Cómo agregar, configurar y personalizar el módulo Deslizador de Publicaciones de Divi.

El Módulo Divi Post Slider puede mostrar publicaciones recientes del blog, reseñas, proyectos destacados, citas inspiradoras, eventos próximos y más.

Pueden ser grandes, pequeños, de ancho fijo o de ancho completo. Este módulo también soporta fondos con efecto paralaje, así como fondos de video de ancho completo. El slider puede animarse automáticamente a través de las diapositivas o configurarse para navegación manual.

Ver una Demo en Vivo de Este Módulo

Cómo Agregar el Módulo Divi Post Slider a tu Página

• Agrega una nueva página o edita una página existente.

• Por defecto, el Editor Estándar de Gutenberg se carga cada vez que agregas un nuevo post o página en WordPress.

• Haz clic en el botón morado debajo del título de la página. Usa The Divi Builder.

Al recargar la página, verás tres opciones:

• Construir desde cero

• Elegir un diseño prediseñado

• Construir con IA

Construir desde cero

Elegir un diseño prediseñado

Construir con IA

Agregar el Módulo Post Slider

• Haz clic en el ícono verde + para insertar una fila.

• Haz clic en el ícono gris + dentro de la fila para abrir la Biblioteca de Módulos Divi, que contiene todos los módulos incluidos con el tema Divi.

• Encuentra el módulo Post Slider y haz clic para cargarlo.
  La biblioteca de módulos es también buscable; escribe el nombre del módulo que deseas en la barra de búsqueda arriba.

Todas las Opciones del Módulo Post Slider Explicadas

Después de agregar el módulo post slider, automáticamente aparecerán los ajustes del módulo. Aquí puedes configurar el contenido y los estilos de diseño. Los ajustes están divididos en tres grupos mediante pestañas en la parte superior: Contenido, Diseño y Avanzado.

Pestaña Contenido

Dentro de esta pestaña, encontrarás las opciones de contenido para el módulo post slider.

• Número de Posts (Post Count) – Determina la cantidad de posts que se mostrarán en el slider.

• Categorías Incluidas – Define las categorías que quieres mostrar en el slider. Por defecto, se muestran todas las categorías. La opción Categoría Actual puede usarse en una plantilla de página del Theme Builder para resultados de búsqueda (aprende cómo hacerlo aquí).

• Ordenar Por (Order By) – Escoge el orden en que quieres que se muestren los posts:

  • Por Fecha (nuevo a viejo)

  • Por Fecha (viejo a nuevo)

  • Por Título: A-Z

  • Por Título: Z-A

  • Aleatorio (Random)

• Botón (Button) – Por defecto, el texto del botón es Leer Más. Si quieres que el texto sea otro, puedes escribirlo aquí. Ejemplo: Seguir Leyendo, Continuar Leyendo, etc.

• Mostrar Contenido (Content Display) – Selecciona Mostrar Extracto para mostrar un extracto del post, o Mostrar Contenido para mostrar el contenido completo.

• Usar Extractos de Post (Use Post Excerpts) – Desactiva esta opción si quieres ignorar los extractos definidos manualmente y que siempre se generen automáticamente.

• Longitud del Extracto (Excerpt Length) – Por defecto, los extractos tienen 270 caracteres. Escribe un valor numérico si quieres alargar o acortar esa cantidad.

• Número de Desplazamiento (Offset Number) – Elige la cantidad de posts que quieres omitir. Por ejemplo, si quieres que el slider empiece desde el tercer post más reciente, escribe 3 aquí.

Elementos

• Mostrar Flechas (Show Arrows) – Activa o desactiva para mostrar u ocultar las flechas de navegación del slider.

• Mostrar Controles (Show Controls) – Activa o desactiva para mostrar u ocultar los controles en la parte inferior (los puntos de navegación).

• Mostrar Botón Leer Más (Show Read More Button) – Activa o desactiva para mostrar u ocultar el botón Leer Más.

• Mostrar Meta del Post (Show Post Meta) – Activa o desactiva para mostrar u ocultar la meta información del post (autor, categoría, fecha, etc.).

Imagen Destacada

• Mostrar Imagen Destacada (Show Featured Image) – Activa o desactiva para mostrar u ocultar la imagen destacada del post.

• Posición de la Imagen Destacada (Featured Image Placement) – Determina cómo se muestra la imagen destacada:

  • En el fondo (background)

  • A la izquierda

  • A la derecha

  • Arriba

  • Abajo del slider

Por defecto, la imagen se muestra como fondo.

Enlace

Si deseas aplicar un enlace clickeable a todo el módulo, puedes hacerlo aquí.

• URL del Enlace del Módulo (Module Link URL) – Pega la URL que quieres que el módulo enlace. Esto hace que todo el módulo sea clickeable y redirija a la URL pegada.

• Destino del Enlace (Module Link Target) – Define si el enlace se abre en la misma ventana o en una pestaña nueva:

  • En la misma ventana

  • En una pestaña nueva

Fondo

En el grupo de opciones de fondo, se pueden configurar:

• Color de fondo

• Degradado de fondo

• Imagen de fondo

• Video de fondo

• Patrón de fondo

• Máscara de fondo

Nota: En las demostraciones abajo, la opción mostrar imagen destacada está desactivada para poder ver el fondo.

Cuando apagas la imagen destacada y eliges una imagen de fondo, esa imagen aparecerá debajo de todos los posts en el slider. Lo mismo aplica para videos de fondo.

Cómo Agregar un Color de Fondo

• Haz clic en la primera pestaña, el ícono del cubo de pintura.

• Haz clic en Agregar Color de Fondo y elige un color de la paleta de colores de tu sitio, o usa el ícono de cuentagotas para elegir un nuevo color.

Cómo Agregar un Degradado de Fondo

• Haz clic en la segunda pestaña, el ícono de degradado.

• Haz clic en Agregar Degradado de Fondo.

• Para cambiar los colores del degradado, haz clic en los puntos del degradado y selecciona un color de la paleta de tu sitio o usa el cuentagotas para elegir un nuevo color. Puedes agregar más puntos haciendo clic en la barra del degradado.

Opciones del Degradado de Fondo

• Tipo de degradado: cambia el tipo desde el menú desplegable.

• Dirección del degradado: ajusta la dirección arrastrando la barra o escribiendo un valor numérico.

• Repetir degradado: activa esta opción si quieres que el degradado se repita.

• Unidad del degradado: cambia cómo se calculan los puntos del degradado.

• Colocar degradado sobre la imagen de fondo: activa para que el degradado esté encima de la imagen de fondo.

Cómo Agregar una Imagen de Fondo

• Haz clic en la tercera pestaña, el ícono de imagen.

• Haz clic en el ícono gris + para abrir la Biblioteca de Medios y selecciona o sube una imagen.

Opciones de Imagen de Fondo

• Usar efecto paralaje: activa para que la imagen tenga efecto paralaje (la imagen se mueve más rápido que el contenido de primer plano, dando efecto 3D). Por defecto está desactivado.

• Tamaño de imagen de fondo: selecciona un tamaño desde el menú.

• Posición de imagen de fondo: selecciona la posición desde el menú.

• Repetición de imagen de fondo: elige si y cómo se repite la imagen.

• Mezcla de imagen de fondo: elige cómo se mezcla la imagen con otras capas.

Cómo Agregar un Video de Fondo

• Haz clic en la cuarta pestaña, el ícono de video.

• Haz clic en el ícono gris + para abrir la Biblioteca de Medios y seleccionar o subir un video.

Opciones de Video de Fondo

• Mp4 vs WebM: Se recomienda subir ambos formatos porque no todos los navegadores soportan WebM. Subir ambos asegura compatibilidad total.

• Ancho del video de fondo: escribe un valor numérico para definir el ancho.

• Alto del video de fondo: escribe un valor numérico para definir la altura.

• Pausar video cuando otro video se reproduce: activa para que el video de fondo se pause si otro video está reproduciéndose. Por defecto, el video se pausa cuando no está en vista. Si quieres que continúe, desactiva esta opción.

Cómo Agregar un Patrón de Fondo

• Haz clic en la quinta pestaña, el ícono de patrón.

• Haz clic en Agregar Patrón de Fondo.

• Elige el tipo de patrón que quieres desde el menú desplegable.

Opciones de Patrón de Fondo

• Color del patrón: elige un color de la paleta o usa el cuentagotas.

• Transformación del patrón: rota, invierte o transforma el patrón horizontal o verticalmente.

• Tamaño del patrón: selecciona tamaño real, cubrir, ajustar, estirar o tamaño personalizado (aparecen opciones de ancho y alto para tamaño personalizado).

• Origen de repetición del patrón: selecciona desde dónde comienza la repetición.
  

Cómo agregar una Máscara de Fondo

• Haz clic en la sexta pestaña, el ícono de Máscara.

• Haz clic en Agregar Máscara de Fondo.

• Selecciona el tipo de máscara que deseas desde el menú desplegable.

Opciones de Máscara de Fondo

• Color de Máscara – Elige el color de la máscara desde la paleta de tu sitio o usa el cuentagotas para seleccionar uno nuevo.

• Transformación de Máscara – Transforma la máscara horizontal o verticalmente, gírala o inviértela.

• Proporción de Aspecto de la Máscara – Establece la proporción entre el ancho y la altura.

• Tamaño de la Máscara – Selecciona el tamaño: real, cubrir, ajustar, estirar para llenar o tamaño personalizado. Si eliges personalizado, aparecerán las opciones de ancho y alto, las cuales puedes definir con el control deslizante o valores numéricos.

• Modo de Fusión de Máscara – Define cómo interactúa la máscara con las capas que están debajo. Puedes elegir entre 16 modos diferentes.

---

Etiqueta de Administrador

La Etiqueta de Administrador te permite darle un nombre al módulo que solo tú puedes ver, para mantener todo organizado. Por defecto, el nombre será el del módulo, pero puedes cambiarlo como desees.

---

Pestaña de Diseño

Aquí encontrarás todas las opciones de estilo y apariencia del módulo Deslizador de Publicaciones.

---

Superposición

• Usar Superposición de Fondo – Activa esta opción para mostrar una superposición sobre el fondo.

• Color de la Superposición de Fondo – Elige un color desde la paleta del sitio o usa el cuentagotas. Para hacerla transparente, haz clic en el círculo con una línea roja.

• Usar Superposición de Texto – Activa para mostrar un color de fondo debajo del texto.

---

Navegación

• Color de las Flechas – Elige el color de las flechas de navegación.

• Color de Navegación por Puntos – Elige el color de los puntos de navegación.

---

Imagen

(Estas opciones solo se aplican si la imagen destacada no está como fondo)

• Esquinas Redondeadas de la Imagen – Introduce un número para redondear los bordes. Valores más altos = esquinas más redondeadas.

• Estilos de Borde de Imagen – Puedes agregar bordes a todos los lados o individualmente (superior, derecho, inferior, izquierdo).

• Ancho del Borde – Establece el grosor del borde (mínimo 1 px).

• Color del Borde – Elige un color desde la paleta del sitio o con el cuentagotas.

• Estilo del Borde – Elige entre sólido, discontinuo, punteado, doble, surco, cresta, interior, exterior o ninguno.

• Sombra de la Caja de la Imagen – Define la posición (horizontal y vertical), desenfoque, expansión, color y si la sombra es interior o exterior.

• Tono de la Imagen – Ajusta el tono de color.

• Saturación de la Imagen – Ajusta la intensidad del color.

• Brillo de la Imagen – Ajusta la claridad.

• Contraste de la Imagen – Ajusta la diferencia entre claros y oscuros.

• Invertir Imagen – Invierte los colores.

• Sepia de Imagen – Aplica un tono sepia (marrón antiguo).

• Opacidad de la Imagen – Controla la transparencia.

• Desenfoque de la Imagen – Ajusta el nivel de desenfoque.

• Modo de Fusión de Imagen – Define cómo se mezcla la imagen con el fondo.

---

Texto

Configura estilos generales de texto:

• Alineación del Texto – Izquierda, centro, derecha o justificado.

• Color del Texto – Paleta clara u oscura (definida en opciones del tema).

• Sombra de Texto – Añade sombra a todo el texto. Puedes ajustar dirección, desenfoque y color.

---

Texto del Título

• Nivel de Encabezado – h1, h2, h3, h4, h5, h6.

• Fuente del Título – Selecciona una fuente o carga una personalizada.

• Grosor de la Fuente – Define el grosor del texto.

• Estilo de Fuente – Cursiva, mayúsculas, versalitas, subrayado, tachado.

• Alineación del Título – Izquierda, centro, derecha, justificado.

• Color del Título – Desde la paleta o usando el cuentagotas.

• Tamaño del Texto del Título – Usa el control deslizante o escribe un valor.

• Espaciado entre Letras – Define el espacio entre caracteres.

• Altura de Línea – Espacio entre líneas de texto.

• Sombra del Título – Agrega sombra con dirección, desenfoque y color personalizados.

---

Texto del Cuerpo

• Fuente del Cuerpo – Escoge o sube una fuente.

• Grosor de Fuente – Elige qué tan grueso es el texto.

• Estilo de Fuente – Cursiva, mayúsculas, versalitas, subrayado, tachado.

• Alineación del Texto – Izquierda, centro, derecha, justificado.

• Color del Texto – Desde la paleta o cuentagotas.

• Tamaño del Texto – Ajusta el tamaño.

• Espaciado entre Letras – Más número = más espacio.

• Altura de Línea – Más número = más espacio entre líneas.

• Sombra del Texto – Dirección, desenfoque y color personalizables.

---

Texto Meta

• Fuente Meta – Define la fuente para autor, fecha, categoría.

• Grosor y Estilo de Fuente – Mismos ajustes que el título y cuerpo.

• Alineación, Color, Tamaño, Espaciado y Altura de Línea – Igual que en secciones anteriores.

• Sombra del Texto Meta – Ajustable completamente.

---

Botón

• Usar Estilos Personalizados – Actívalo para modificar el botón de forma individual.

• Tamaño del Texto del Botón – Ajusta el tamaño.

• Color del Texto del Botón – Elige desde paleta o cuentagotas.

• Fondo del Botón – Color sólido, degradado o imagen.

• Ancho del Borde del Botón – Define el grosor del borde.

• Color del Borde del Botón – Selecciona color desde paleta.

• Radio del Borde del Botón – Esquinas redondeadas.

• Espaciado entre Letras – Más valor = más espacio.

• Fuente del Botón – Define tipo y grosor.

• Estilo de Fuente del Botón – Cursiva, mayúsculas, etc.

• Mostrar Ícono – Activar o desactivar.

• Ícono del Botón / Color / Posición – Personaliza el ícono.

• Mostrar Ícono Solo al Pasar el Ratón – Sí o no.

• Alineación del Botón – Izquierda, centro o derecha.

• Sombra de Texto del Botón – Dirección, desenfoque, color.

• Márgenes y Relleno del Botón – Espacios externos e internos.

• Sombra de Caja del Botón – Personaliza sombra exterior o interior.

---

Tamaño

• Ancho / Ancho Máximo – Define el tamaño horizontal.

• Alineación del Módulo – Izquierda, centro, derecha.

• Ancho de Contenido / Ancho Máximo de Contenido – Ajusta contenido.

• Altura Mínima / Altura / Altura Máxima – Control total de altura.

---

Espaciado

Puedes aplicar márgenes y relleno ingresando valores numéricos.

• Margen – Espacio fuera del módulo.

• Relleno – Espacio dentro del módulo.

• Icono de Cadena – Úsalo para bloquear proporciones (por ejemplo, mismo valor arriba y abajo).

Valores predeterminados:

• Margen: 0

• Relleno:

  • Superior: 16 %

  • Inferior: 16 %

  • Izquierda: 8 %

  • Derecha: 8 %
    

Borde

Agrega un borde al módulo. Puedes agregar un borde completo o un borde solo a un lado del módulo. Ajusta el ancho mediante el control deslizante y selecciona un color. Elige un estilo de borde haciendo clic en el menú desplegable.

Esquinas Redondeadas – Escribe un valor numérico si deseas esquinas de borde redondeadas. Cuanto mayor sea el número, más redondeadas serán las esquinas. Los valores de las esquinas están vinculados automáticamente (como lo indica el ícono de cadena azul resaltado en el medio); sin embargo, si deseas tener valores diferentes para cada esquina, haz clic en el ícono de cadena azul para desvincular los valores. Si los valores están vinculados automáticamente, siempre tendrán el mismo valor y se actualizarán automáticamente si se cambia uno.

Estilos de Borde – Agrega un borde a todos los lados del módulo o a lados individuales (superior, derecho, inferior e izquierdo).

Color del Borde – Elige el color del borde. Puedes seleccionar un color de la paleta predeterminada del sitio o hacer clic en el ícono del cuentagotas para encontrar un nuevo color.

Estilo del Borde – Selecciona el estilo de borde que prefieras: sólido, discontinuo, punteado, doble, acanalado, cresta, insertado, sobresalido o ninguno.

---

Sombra de Caja

Agrega una sombra al módulo completo. Una vez que selecciones un estilo de sombra, puedes personalizar las siguientes opciones:

• Posición Horizontal de la Sombra de Caja – Define la posición horizontal de la sombra.

• Posición Vertical de la Sombra de Caja – Define la posición vertical de la sombra.

• Intensidad del Desenfoque de la Sombra – Define qué tan desenfocada será la sombra. Cuanto mayor sea el valor, más desenfocada y suave será la sombra.

• Intensidad de Expansión de la Sombra – Define qué tan densa será la sombra. Un mayor valor crea una sombra más intensa.

• Color de la Sombra – Define el color de la sombra.

• Posición de la Sombra de Caja – Define si la sombra estará dentro o fuera del módulo.

---

Filtros

Ajusta los filtros del módulo:

• Matiz (Hue) – Define el ángulo de matiz de un color.

• Saturación – Define cuán intensa será la saturación del color.

• Brillo – Define cuán brillantes serán los colores.

• Contraste – Define cuán distintas serán las áreas claras y oscuras.

• Invertir – Invierte el matiz, saturación y brillo según el valor especificado.

• Sepia – Aplica un tono cálido tipo sepia (amarillo/marrón).

• Opacidad – Define cuán transparente u opaco será el fondo (color, degradado, imagen, etc.).

• Desenfoque – Define el nivel de desenfoque gaussiano aplicado al módulo.

Modo de Fusión – Se refiere a cómo se mezcla el módulo con las capas debajo de él. Por defecto, se selecciona el modo "normal".

---

Transformación

• Escalar

• Trasladar

• Rotar

• Inclinar

• Puntos de origen

Navega por cada opción. Configura cada una ingresando valores numéricos o arrastrando y expandiendo la caja o el círculo.

Puedes bloquear estos valores para que siempre sean idénticos haciendo clic en el ícono de cadena en la parte inferior derecha.

---

Animación

Aquí puedes aplicar animación al módulo. Una vez que eliges un estilo, puedes ajustar las siguientes opciones:

• Duración de la Animación – Define cuánto tiempo tarda en completarse un ciclo de animación.

• Retraso de la Animación – Define cuánto tiempo esperar desde que se aplica la animación hasta que comienza a ejecutarse.

• Opacidad Inicial de la Animación – Define el valor de opacidad con el que comienza la animación.

• Curva de Velocidad de la Animación – Define el método de aceleración/desaceleración de la animación. Suavizar la animación al inicio y final crea un efecto más fluido que una curva lineal.

• Repetición de Animación – Por defecto, las animaciones se ejecutan una sola vez. Si deseas que se repita continuamente, elige la opción "Bucle".

---

Pestaña Avanzado

En esta pestaña encontrarás opciones útiles para diseñadores web experimentados, como CSS personalizado.

Aquí puedes aplicar CSS personalizado a tu módulo. También puedes agregar clases e IDs personalizados para utilizar estilos más avanzados o aplicar código CSS directamente.

---

ID y Clases CSS

Asigna un ID o Clase CSS específico al módulo. Esto es útil para aplicar CSS personalizado desde la hoja de estilos de tu tema hijo.

---

CSS Personalizado

• CSS Libre – Escribe CSS libre usando el selector selector para apuntar a este módulo. Ejemplo: selector h1 {color: red;}

• Elementos del Módulo – Puedes aplicar CSS personalizado directamente en esta pestaña. Al hacer clic en "Elementos del Módulo", verás secciones individuales para agregar propiedades CSS específicas.

---

Atributos

Esto define la relación del enlace del botón entre la fuente a la que se enlaza y la página desde donde se enlaza.

---

Condiciones

Esta pestaña te permite definir cuándo se mostrará el módulo según ciertas condiciones, como:

• si el usuario ha visitado antes,

• si ya ha comprado en tu sitio,

• qué navegador está utilizando,

• qué sistema operativo utiliza, y más.

Puedes agregar una o múltiples condiciones.

---

Visibilidad

• Desactivar en – Define la visibilidad del módulo. Puedes desactivarlo (ocultarlo) en Teléfonos, Tablets o Escritorio marcando la casilla correspondiente.

• Desbordamiento Horizontal – Define lo que se muestra cuando el contenido se desborda hacia los lados:

  • Visible – El contenido se mostrará si sobrepasa el ancho del módulo.

  • Desplazamiento (Scroll) – Aparece una barra de desplazamiento horizontal si el contenido es mayor que el ancho del módulo.

  • Oculto – El contenido que sobrepase el ancho será ocultado.

  • Auto – El navegador decide si mostrar o no la barra de desplazamiento.

• Desbordamiento Vertical – Similar al anterior, pero afecta el contenido que se desborda hacia arriba o abajo.

---

Transiciones

Controla la duración, retraso y curva de velocidad de las animaciones al pasar el cursor (hover):

• Duración de la Transición – Define cuánto dura (en milisegundos) la transición.

• Retraso de la Transición – Define el tiempo de espera antes de que comience la transición.

• Curva de Velocidad de la Transición – Define el tipo de aceleración de la transición.

---

Posición

• Posición – Define la posición del módulo:

  • Relativa (valor predeterminado) – El módulo se posiciona dentro del flujo normal del documento.

  • Absoluta – El módulo se elimina del flujo normal y se posiciona en relación con su ancestro más cercano.

  • Fija – Se posiciona en relación con la ventana del navegador, útil para módulos que deben permanecer visibles al hacer scroll (fijos).

• Desplazamiento Vertical – Define la posición vertical del módulo.

• Desplazamiento Horizontal – Define la posición horizontal del módulo.

• Z-Index – Define el orden del módulo. Un número mayor hace que se superponga sobre módulos con un número menor.

---

Efectos de Desplazamiento

Define el comportamiento del módulo cuando el usuario hace scroll:

• Puedes hacer que el módulo se fije (pegue) en la parte superior, inferior o ambas.

• Puedes aplicar Movimiento Vertical para que el módulo se desplace más rápido o lento que otros
  

Guardar tu diseño

Una vez que hayas terminado de diseñar y configurar el módulo de contador numérico, haz clic en la flecha verde en la parte inferior derecha del módulo para guardar tu diseño. Si cierras el módulo sin guardar, perderás tu trabajo.

---

Luego, guarda el diseño de la página

Para guardar el diseño de la página, puedes presionar CMD + S en Mac o CTRL + S en PC. También puedes utilizar la barra de herramientas inferior de Divi para guardar tu diseño haciendo clic en el ícono púrpura circular con los tres puntos … para expandir la barra de herramientas y luego haciendo clic en el botón verde de Guardar en la parte inferior derecha.

---

Salir del Constructor Visual

Ahora que todos tus cambios han sido guardados, haz clic en Salir del Constructor Visual en la barra de administración superior para salir del Constructor Visual.

---

---

Seguir aprendiendo

Cómo crear un marcador de publicaciones de blog con el módulo Deslizador de Publicaciones de Divi.