Crea un carrusel de contenido en Gutenberg
Usa Carousel para presentar texto editable, imágenes y diseños en diapositivas ordenadas. Esta guía es para editores de contenido que usan el editor de bloques de WordPress con POM activo. Para presentaciones de imágenes de la biblioteca, usa Gallery.
Crea y organiza las diapositivas
- Abre Pages → All Pages o Posts → All Posts y edita tu contenido.
- Inserta el bloque Carousel de POM y luego elige Add slide. El carrusel empieza vacío; al añadir una diapositiva se crea un Carousel item con un párrafo vacío.
- En Slide settings, introduce un Slide title. Así se nombra el elemento en la Vista de lista y en las flechas de navegación con nombre, sin insertar un encabezado de contenido.
- Añade párrafos, encabezados, listas, imágenes, galerías, iconos, Icon Boxes, botones, espacios, Tabs, Modal o bloques de diseño del tema dentro del elemento. Las filas conservan sus reglas existentes de columnas y anidamiento. Los bloques HTML y Shortcode también están disponibles.
- Selecciona el Carousel principal. Usa Slides para seleccionar, mover, duplicar o eliminar elementos, o utiliza la Vista de lista de WordPress.
- Guarda la página y previsualízala en una pestaña nueva.
Duplicate slide y los controles de duplicación del bloque regeneran un Slide ID conflictivo, dejando el original sin cambios. Duplicar un Carousel también regenera su ancla raíz conflictiva. Las IDs opcionales vacías permanecen vacías. Comprueba también las anclas dentro del contenido duplicado: todas las IDs de una página deben ser únicas. Usa IDs que empiecen por una letra o un guion bajo para las acciones del deslizador de Button/Image.
El panel Slides resalta la última diapositiva seleccionada incluso después de que selecciones el Carousel principal para editar sus ajustes.
Elige un diseño
| Estilo | Comportamiento |
|---|---|
| Style 1 · Centered content | Diapositivas a ancho completo con contenido centrado más estrecho; las flechas predeterminadas se superponen al contenido. |
| Style 2 · Multiple columns | Las tarjetas vecinas permanecen visibles. Elige 3, 4, 5 o 7 Desktop columns, alineación centrada/izquierda y atenuación opcional. Las flechas predeterminadas se sitúan junto al contenido. |
| Style 3 · Wide slider | Diapositivas a ancho completo con el tratamiento de deslizador ancho del tema; las flechas predeterminadas se sitúan debajo del contenido. |
El carrusel usa los anchos existentes del tema, incluidos sus límites específicos de carrusel de 576px, 768px y 1200px y el ancho máximo de tarjeta. El número de escritorio es nominal; las pantallas más estrechas muestran menos tarjetas. Adaptive height ajusta el área de visualización a la diapositiva seleccionada.
Navegación y movimiento
En Navigation, activa las flechas y elige Style default, Over content, Next to content o Below content. Show dots se aplica al Style 2. Show slide numbers se aplica a todos los estilos. Allow dragging, Loop slides y Free scroll conservan el comportamiento del tema; el desplazamiento libre permite detenerse entre diapositivas en lugar de ajustarse a una tarjeta.
Los iconos de flecha y las etiquetas traducidas se guardan con este bloque estático. Después de cambiar los iconos de navegación del tema, elige Refresh theme arrow icons y guarda. Los bloques dinámicos Image y Gallery dentro de una diapositiva siguen resolviendo los metadatos actuales de la biblioteca de forma independiente.
La reproducción automática es opcional, con un Interval (ms) de 1.000 a 10.000. Reverse direction invierte el movimiento automático. Pause on hover lo pausa mientras el puntero está sobre el área de visualización de la diapositiva. La navegación manual detiene la reproducción automática. Con el bucle desactivado, la reproducción automática se detiene en la última diapositiva, o en la primera en dirección inversa; la reproducción inversa que empieza en la primera diapositiva ya está completa. Activa el bucle para repetir continuamente. Prefiere no usar la reproducción automática cuando el movimiento no sea necesario.
Como alternativa, activa Autoplay → Continuous scroll. Elige Scroll direction y Scroll speed (px/s) de 1 a 300. Este movimiento usa un bucle infinito y tiene prioridad sobre la reproducción automática con temporizador; los controles de intervalo y de reproducción automática inversa quedan ocultos. Loop slides y Free scroll también quedan ocultos porque el movimiento continuo siempre activa ambos internamente. Al desactivar el movimiento continuo se restauran esos controles con tus elecciones anteriores sin cambios. Pause on hover está disponible en ambos modos. El movimiento continuo respeta las preferencias de movimiento reducido y se pausa durante la interacción con el teclado. El editor permanece estático y editable; revisa el movimiento en la previsualización del frontend. Ambos modos reutilizan el tiempo de ejecución de carrusel existente del tema.
Carga de imágenes
Con Advanced → Performance → Lazy loading (recommended) activado en los ajustes del tema, las imágenes y los fondos con carga diferida se cargan a medida que se hacen visibles en el carrusel. Las tarjetas vecinas parcialmente visibles cuentan. Las diapositivas ocultas y los carruseles anidados dentro de diapositivas ocultas esperan hasta revelarse. El contenido de Core Image, POM Image y las imágenes adaptativas usan el mismo comportamiento.
Mantén dimensiones de imagen precisas o una relación de aspecto definida para reservar espacio. Una imagen recién revelada puede necesitar un momento para descargarse en una conexión lenta. Precarga solo la primera imagen si es crítica para la vista inicial; precargar otras diapositivas fuerza sus descargas antes de que sean visibles. Consulta la revisión de rendimiento del maquetador.
Enlaza directamente a una diapositiva
- Selecciona Carousel e introduce una Advanced → HTML anchor única, como
customer-stories. - Asigna a cada Carousel item de destino un Slide ID único, como
story-two. - En un POM Button o Image, elige su acción de deslizador e introduce la ID principal. Para una acción de diapositiva personalizada, introduce también la ID del elemento.
- Como alternativa, activa Link to slides with URL hashes y enlaza a
#story-two.
Solo un carrusel por página debería controlar el hash de la URL. Los carruseles anidados mantienen diapositivas, controles y contadores independientes.
Previsualiza y verifica
El editor usa el CSS de carrusel efectivo del tema sin cargar la hoja de estilos completa del frontend. Las diapositivas siguen siendo editables en una franja desplazable horizontalmente. Los controles de editor anterior/siguiente y la Vista de lista revelan las diapositivas. Las flechas decorativas del frontend no interceptan la edición; la reproducción automática, los puntos y el arrastre deben comprobarse en la previsualización del frontend.
En Accessibility and visibility, introduce un Accessible name descriptivo y elige los dispositivos en los que todo el carrusel es visible. Los bloques ocultos siguen siendo seleccionables en el editor. Additional CSS classes acepta helpers existentes, no declaraciones CSS.
Antes de publicar, guarda y recarga, comprueba el orden de las diapositivas y el contenido anidado, revisa todas las previsualizaciones adaptativas incluyendo la editable Very Large, opera las flechas con Tab/Enter/Espacio, verifica los objetivos de Button/Image y los enlaces con hash, y comprueba el comportamiento de pausa de la reproducción automática. Un carrusel vacío no tiene contenido visible en el frontend.
Si un elemento está fuera del lienzo en el editor, selecciónalo en la Vista de lista. Si una acción no hace nada, comprueba ambas IDs y confirma que el elemento de destino pertenece a ese carrusel. Si un icono está desactualizado, actualiza los iconos de flecha del tema, guarda y limpia la caché relevante de la página/navegador.