Añade un botón del tema en Gutenberg
Usa el bloque Button para enlazar a una página o archivo, abrir un modal existente o un panel off-canvas, o controlar un carrusel. Su apariencia proviene de los estilos de botón configurados en POM Theme, no de declaraciones separadas de color o espaciado de Gutenberg.
Esta guía está dirigida a editores de contenido que usan POM Theme en el editor de bloques de WordPress. Configura primero los estilos de botón del sitio. Las acciones de modal, panel y deslizador también requieren que exista un objetivo en la misma página.
Añade un enlace
- Ve a Pages → Add New, o edita una página existente en el editor de bloques.
- Abre el insertador de bloques y elige Button, el bloque del tema. El bloque Buttons independiente de WordPress no es el mismo control.
- Haz clic en el texto visible del botón y escribe una acción breve, como «View our services».
- En los ajustes del bloque, abre Button action, elige Go to URL e introduce Button URL.
- En Appearance, elige Button style, Button size y Alignment. La barra de herramientas flotante también controla la alineación. Para las acciones de URL y archivo, Edit button link da acceso directo al destino y al ajuste de nueva pestaña; los demás controles específicos de la acción permanecen en la barra lateral.
- Guarda, recarga el editor y previsualiza la página. Sigue el enlace en la parte pública para verificar su destino.
El editor previsualiza el componente Buttons del tema, incluidas las personalizaciones de CSS guardadas de los componentes. No activa enlaces ni abre superposiciones mientras editas la etiqueta.
Elige una acción
| Acción | Qué configurar | Resultado esperado |
|---|---|---|
| Go to URL | Button URL; opcionalmente Open in new tab y Link relationship (rel / XFN) | Un enlace normal. Las pestañas nuevas reciben noopener noreferrer. |
| Link to a file | File URL o Choose file; opcionalmente Request download | Un enlace a archivo con un atributo opcional download. Los navegadores pueden ignorar la descarga entre dominios. |
| Open modal box | Modal box ID | Abre el modal existente con ese ID. Solo esta acción solicita la hoja de estilos y el script del Modal del tema. |
| Open off-canvas panel | Off-canvas panel ID | Alterna un block de Offcanvas o un panel lateral Legacy usando el comportamiento de navegación del tema. Los rangos en línea no abren un diálogo. |
| Open AJAX page | Busca en Page para abrir vía AJAX | Abre una página publicada en la superposición Quick View del tema. El enlace basado en ID sobrevive a los cambios en el slug de la página. |
| Manage slider | Slider ID; Next slide, Previous slide o Custom slide; opcionalmente Change slide on hover | Controla un carrusel existente del tema. El carrusel suministra sus propios recursos. |
| Custom action (button element) | Un ancla HTML o clases CSS existentes reconocidas por tu sitio | Genera un botón que no envía. Necesita un comportamiento existente del sitio para realizar una acción. |
Introduce los ID de destino sin #. Empieza con una letra o un guion bajo y usa solo letras, números, guiones bajos y guiones. El botón no crea su objetivo. Los enlaces a archivos y páginas se guardan en el contenido, como otros enlaces estáticos de WordPress; revísalos al mover contenido a otro sitio.
Para las acciones de Modal y off-canvas, deja Use native button element activado para la activación normal por teclado con Intro y Espacio. Desactivarlo usa el elemento de enlace heredado.
Para crear un diálogo directamente en Gutenberg, añade un bloque Modal, copia su Modal ID y úsalo como objetivo del botón.
Apariencia e iconos
- Button style enumera los estilos habilitados en los ajustes del tema. Cambia el estilo compartido allí para actualizar los botones coincidentes en todo el sitio.
- Full width llena el ancho disponible del contenedor.
- No alignment wrapper elimina el elemento de alineación envolvente; úsalo cuando el padre controla el diseño.
- Center on mobile coincide con la clase auxiliar del tema y centra el contenido hasta 991px, incluidas las tabletas. Requiere un contenedor de alineación.
- Select Icon abre el selector de iconos compartido del tema. El tamaño, la posición y los efectos hover del icono siguen el estilo de botón seleccionado.
- Visibility controla los cuatro rangos de dispositivo del tema. Los bloques ocultos en el editor siguen siendo seleccionables; verifica la visibilidad real en la parte pública.
- Additional CSS classes acepta clases auxiliares existentes separadas por espacios y no genera CSS. Usa Advanced → HTML anchor para establecer el ID del elemento del botón.
Usa un botón oculto con cuidado
Hidden button (stretched link) oculta la cara del botón y convierte el padre posicionado más cercano en un área clicable. Añade un Accessible name descriptivo y mantén esa área libre de otros enlaces o controles. El editor muestra un marcador de posición etiquetado para que el control oculto siga siendo fácil de seleccionar.
Usa un botón visible normal cuando el padre no esté posicionado o cuando el área contenga varios elementos interactivos. Un botón oculto no crea por ti un contenedor de tarjeta posicionado.
Revisa antes de publicar
Comprueba la etiqueta visible, el nombre accesible, el destino, la activación por teclado, los cuatro rangos de dispositivo y la relación entre el disparador y su objetivo. Guarda y recarga después de elegir un icono. Comprueba tanto la apariencia normal como la de hover en la parte pública.
Si una acción no hace nada, comprueba su ID y confirma que su modal, panel o carrusel existe en la misma página. Si el selector de página no puede cargar, reintenta la búsqueda; la selección anterior se conserva. Un estilo no disponible permanece identificado en el inspector para que puedas elegir deliberadamente un reemplazo habilitado.
Relacionado: Configura los estilos de botón, Añade un icono del tema, Revisa la accesibilidad.