El módulo "Artículos Slider" o Posts Slider en el tema de WordPress Divi le permite mostrar de manera distinguida, artículos de su elección en la página de inicio. En muchos blogs, este tipo de módulo se usa generalmente para mostrar artículos destacados. Pero puede hacer un uso diferente y mostrar sugerencias de artículos, por ejemplo.

Cómo agregar el módulo deslizante de artículos en Divi Builder

Antes de que pueda agregar un módulo deslizante de artículo a su página, primero debe saltar a Divi Builder. Una vez que el Tema divi instalado en su sitio web, notará una bouton Utilice Divi Builder encima del editor cada vez que crea una nueva página. Haga clic en este botón para activar Divi Builder y acceder a todos los módulos de Divi Builder. Luego haga clic en el botón Use Visual Builder para iniciar el generador en modo visual. También puede hacer clic en el botón Use Visual Builder cuando navega por su sitio web en primer plano si está conectado a su panel de WordPress.

Una vez que haya ingresado a Visual Builder, puede hacer clic en el botón gris más para agregar un nuevo módulo a su página. Los nuevos módulos solo se pueden agregar dentro de las filas. Si está comenzando una nueva página, recuerde agregar una fila a su página primero.

Busque el módulo "Post Sliders" en la lista de módulos y haga clic en él para agregarlo a su página. La lista de módulos se puede buscar, lo que significa que también puede escribir la palabra "Post Cursors" y luego hacer clic en "Enter" para buscar y agregar automáticamente el módulo Post Cusors. Una vez que se agrega el módulo, será recibido por la lista de opciones del módulo. Estas opciones se dividen en tres grupos principales: Contenido , diseño et Avanzado .

Ejemplo de caso de uso: publicar deslizadores (artículos) para mostrar los recientes

Para este ejemplo, agregaré un control deslizante de publicaciones para mostrar las tres publicaciones más recientes en la parte superior de una página de blog. Cada diapositiva muestra la imagen de la publicación seleccionada como imagen de fondo, el título y meta de la publicación, y un botón Leer más.

Con Visual Builder, agregue una nueva sección estándar en la parte superior de la página del blog con una fila de ancho completo (1 columna). Luego inserte el módulo Post Slider en su nueva línea.

En Configuración del cursor, actualice las siguientes opciones:

Opciones de contenido

Número de mensajes: 3

Opciones de diseño

Fuente del encabezado: Roboto (mayúsculas) Tamaño de la fuente del encabezado: 50px Color del texto del encabezado: # edef5d Espaciado de las letras del encabezado: 1px Tamaño de la fuente del cuerpo: 16 Espacio entre las letras del cuerpo: 1px Altura de la línea del cuerpo: 1.4em Fuente meta: Open Sans, Cursiva, mayúsculas Tamaño de fuente meta: 18px Color del meta texto: #cccccc Altura de la meta línea: 2em Use estilos personalizados para el botón: SÍ Tamaño del texto: 26px Color del texto del botón: # edef5d Ancho del botón: 0px Icono del botón:> Mostrar solo icono

Guardar configuración

Es todo !

Módulo deslizante de artículo de opciones de contenido

En la pestaña de contenido, encontrará todos los elementos de contenido del módulo, como texto, imágenes e iconos. Todo lo que controla lo que aparece en su módulo siempre se encontrará en esta pestaña.

Número de elementos (número de publicaciones)

Elija la cantidad de elementos que desea mostrar en el control deslizante.

Incluir categorías

Elija las categorías que desea incluir en el control deslizante.

Ordenar por

Aquí puede ajustar el orden en que se muestran los artículos.

Texto del botón

Defina el texto que se mostrará en el botón "Leer más". dejar en blanco por defecto (Leer más)

Pantalla de contenido

Mostrar contenido completo no truncará sus publicaciones en el control deslizante. La visualización del fragmento muestra solo el texto del fragmento.

Use un extracto del artículo si está definido

Deshabilite esta opción si desea omitir los fragmentos definidos manualmente y aún así generarlo automáticamente.

Longitud de extracción automática

Defina la longitud de los extractos generados automáticamente. Dejar en blanco por defecto (270)

Mostrar flechas

Esta configuración activará y desactivará las flechas de navegación.

Mostrar controles

Esta configuración habilitará y deshabilitará los botones circulares en la parte inferior del cursor.

Mostrar el botón Leer más

Esta configuración habilitará y deshabilitará el botón Leer más.

Mostrar el mensaje Meta

Esta configuración habilitará y deshabilitará la sección meta.

Mostrar imagen destacada

Esta configuración enciende y apaga la imagen seleccionada en el control deslizante.

Imagen de ubicación

Seleccione cómo desea mostrar la imagen seleccionada en las diapositivas

Color de fondo

Utilice el selector de color para elegir un color de fondo para este módulo.

Imagen de fondo

Cargue la imagen que desee o escriba la URL de la imagen que desea utilizar como fondo para el control deslizante.

Posición de la imagen de fondo

Elija el posicionamiento CSS de la imagen de fondo para cada diapositiva.

Tamaño de la imagen de fondo

Elija el tamaño de la imagen de fondo CSS que se usa para cada diapositiva.

Etiqueta de administrador

Esto cambiará la etiqueta del módulo en el constructor para una fácil identificación. Cuando usa la vista WireFrame en Visual Builder, estas etiquetas aparecen en el bloque de módulo de la interfaz Divi Builder.

Opciones de diseño del módulo deslizante

En la pestaña Diseño, encontrará todas las opciones de estilo del módulo, como fuentes, colores, tamaño y espaciado. Esta es la pestaña que usará para cambiar la apariencia de su módulo. Cada módulo Divi tiene una larga lista de configuraciones de diseño que puede usar para cambiar cualquier cosa.

Eliminar la sombra interior

Esto eliminará la sombra interna de CSS aplicada a todas las diapositivas de forma predeterminada.

Usar la superposición de fondo

Cuando está habilitado, se agregará un color de superposición personalizado encima de la imagen de fondo y detrás del contenido del control deslizante.

Color de superposición de fondo

Utilice el selector de color para elegir un color para el fondo.

Usar superposición de texto

Cuando esta opción está habilitada, se agrega un color de fondo detrás del texto del cursor para que sea más legible en las imágenes de fondo.

Superposición de texto Radio de borde

El radio del borde afecta la redondez de las esquinas del área de superposición de texto. De forma predeterminada, las esquinas tienen un borde ligeramente redondeado de 3 píxeles. Puede reducir este valor a 0 para crear un cuadro rectangular o aumentar el valor para redondear aún más las esquinas.

Usa el efecto Parallax

Habilitar esta opción le dará a sus imágenes de fondo una posición fija mientras se desplaza.

Método de paralaje

Aquí puede configurar el método utilizado para el efecto de paralaje: CSS o True Parallax.

Flechas de color personalizadas

Cuando se desplaza sobre un módulo deslizante, aparecen flechas para permitir que el visitante navegue por cada diapositiva. De forma predeterminada, estas flechas heredan el color del texto principal de la diapositiva. Sin embargo, puede definir un color personalizado para estas flechas usando esta configuración.

Dot Nav Color personalizado

En cada cursor, los elementos de navegación por puntos aparecen debajo del contenido del cursor. Estos elementos permiten al usuario navegar por el cursor. Puede definir un color personalizado para usar con estos elementos usando el selector de color en esta configuración.

Color del texto

Aquí puede elegir si su texto es claro u oscuro. Si tiene una diapositiva con un fondo oscuro, elija texto claro. Si usted
tener un fondo claro, usar texto oscuro.

Fuente de encabezado

Puede cambiar la fuente del texto del encabezado seleccionando la fuente deseada en el menú desplegable. Divi viene con docenas de fuentes geniales impulsadas por Google Fonts. De forma predeterminada, Divi usa la fuente Open Sans para todo el texto de su página. También puede personalizar el estilo de su texto utilizando las opciones de negrita, cursiva, mayúsculas y subrayado.

Tamaño de fuente del encabezado

Aquí puede ajustar el tamaño del texto de su encabezado. Puede arrastrar el control deslizante de rango para aumentar o disminuir el tamaño de su texto o ingresar directamente el valor de tamaño de texto deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" según el valor de su tamaño para cambiar su tipo de unidad.

Color del texto del encabezado

De forma predeterminada, todos los colores del texto en Divi aparecen en blanco o gris oscuro. Si desea cambiar el color del texto de su encabezado, elija el color deseado en el selector de color usando esta opción.

Espaciado entre letras del encabezado

El espaciado de letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra en el texto del encabezado, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" según el valor de su tamaño para cambiar su tipo de unidad.

Altura de la fila del encabezado

La altura de la fila afecta el espacio entre cada fila del texto del encabezado. Si desea aumentar el espacio entre cada fila, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espaciado deseado en el campo de entrada a la derecha del cursor. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" según el valor de su tamaño para cambiar su tipo de unidad.

Fuente del cuerpo

Puede cambiar la fuente de su cuerpo seleccionando la fuente deseada en el menú desplegable. Divi viene con docenas de fuentes geniales impulsadas por Google Fonts. De forma predeterminada, Divi usa la fuente Open Sans para todo el texto de su página. También puede personalizar el estilo de su texto utilizando las opciones de negrita, cursiva, mayúsculas y subrayado.

Tamaño de letra del cuerpo

Aquí puede ajustar el tamaño del texto del cuerpo. Puede arrastrar el control deslizante de rango para aumentar o disminuir el tamaño de su texto o ingresar directamente el valor de tamaño de texto deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" según el valor de su tamaño para cambiar su tipo de unidad.

Color del texto del cuerpo

De forma predeterminada, todos los colores del texto en Divi aparecen en blanco o gris oscuro. Si desea cambiar el color de su texto, elija el color deseado en el selector de color usando esta opción.

Espaciado de letras corporales

El espaciado de letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra en su texto, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" según el valor de su tamaño para cambiar su tipo de unidad.

Altura de la línea del cuerpo

La altura de la línea afecta el espacio entre cada línea de texto en su cuerpo Si desea aumentar el espacio entre cada línea, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espaciado deseado en el campo de entrada ubicado a la derecha del cursor. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" según el valor de su tamaño para cambiar su tipo de unidad.

Meta Police

Puede cambiar la fuente de su meta texto seleccionando la fuente deseada en el menú desplegable. Divi viene con docenas de fuentes geniales impulsadas por Google Fonts. De forma predeterminada, Divi usa la fuente Open Sans para todo el texto de su página. También puede personalizar el estilo de su texto utilizando las opciones de negrita, cursiva, mayúsculas y subrayado.

Tamaño de la fuente Meta

Aquí puede ajustar el tamaño de su metatexto. Puede arrastrar el control deslizante de rango para aumentar o disminuir el tamaño de su texto o ingresar directamente el valor de tamaño de texto deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" según el valor de su tamaño para cambiar su tipo de unidad.

Color del texto meta

De forma predeterminada, todos los colores del texto en Divi aparecen en blanco o gris oscuro. Si desea cambiar el color de su meta-texto, elija el color deseado en el selector de color usando esta opción.

Espaciado entre letras y metar

El espaciado de letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra en su meta-texto, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" según el valor de su tamaño para cambiar su tipo de unidad.

Altura de la línea Meta

La altura de la línea afecta el espacio entre cada línea en su meta-texto. Si desea aumentar el espacio entre cada línea, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada ubicado a la derecha del cursor. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" según el valor de su tamaño para cambiar su tipo de unidad.

Acolchado superior

Este parámetro controla el espacio interno entre la parte superior del módulo y el contenido de texto en el módulo. Si desea aumentar o disminuir este espacio, ingrese el valor deseado aquí. Por ejemplo, para reducir el espacio y el tamaño general del cursor, puede ingresar un valor de 100 px. También puede ingresar un valor porcentual, por ejemplo, 10%, para hacer que la altura sea más dinámica.

Acolchado inferior

Este parámetro controla el espacio interno entre la parte inferior del módulo y el contenido de texto en el módulo. Si desea aumentar o disminuir este espacio, ingrese el valor deseado aquí. Por ejemplo, para reducir el espacio y el tamaño general del cursor, puede ingresar un valor de 100 px. También puede ingresar un valor porcentual, por ejemplo, 10%, para hacer que la altura sea más dinámica.

Use estilos personalizados para el botón

Habilitar esta opción revela varias configuraciones de personalización de botones que puede usar para cambiar la apariencia del botón de su módulo.

Tamaño del texto del botón

Esta configuración se puede utilizar para aumentar o disminuir el tamaño del texto en el botón. El botón se adapta a medida que aumenta y disminuye el tamaño del texto.

Color del texto del botón

De forma predeterminada, los botones adoptan el color de acento de su tema como se define en el Personalizador de temas. Esta opción le permite asignar un color de texto personalizado al botón de este módulo. Seleccione su color personalizado con el selector de color para cambiar el color del botón.

Color de fondo del botón

Por defecto, los botones tienen un color de fondo transparente. Esto se puede cambiar seleccionando el color de fondo deseado en el selector de color.

Ancho del borde del botón

Todos los botones Divi tienen un borde de 2px por defecto. Este borde se puede aumentar o disminuir con esta configuración. Los bordes se pueden eliminar ingresando un valor de 0.

Color del borde del botón

De forma predeterminada, los bordes de los botones adoptan el color de acento de su tema como se define en el Personalizador de temas. Esta opción le permite asignar un color de borde personalizado al botón de este módulo. Seleccione su color personalizado con el selector de color para cambiar el color del borde del botón.

Radio del borde del botón

El radio del borde afecta la redondez de las esquinas de sus botones. De forma predeterminada, los botones en Divi tienen un pequeño radio de borde que redondea las esquinas en 3 píxeles. Puede reducir este valor a 0 para crear un botón cuadrado o aumentarlo significativamente para crear botones con bordes circulares.

Espaciado de las letras del botón

El espaciado de letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra en el texto de su botón, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" según el valor de su tamaño para cambiar su tipo de unidad.

Botón de policía

Puede cambiar la fuente del texto de su botón seleccionando la fuente deseada en el menú desplegable. Divi viene con docenas de fuentes geniales impulsadas por Google Fonts. De forma predeterminada, Divi usa la fuente Open Sans para todo el texto de su página. También puede personalizar el estilo de su texto utilizando las opciones de negrita, cursiva, mayúsculas y subrayado.

Agregar un ícono de botón

Desactivado, esta configuración eliminará los iconos de su botón. De forma predeterminada, todos los botones Divi muestran un icono de flecha en el desplazamiento.

Icono de botón

Si los íconos están habilitados, puede usar esta configuración para elegir qué ícono usar en su botón. Divi tiene diferentes iconos para elegir.

Botón de icono de color

El ajuste de esta configuración cambiará el color del icono que aparece en su botón. De forma predeterminada, el color del icono es el mismo que el color del texto del botón, pero esta configuración le permite ajustar el color de forma independiente.

Botón de ubicación del icono

Puede elegir mostrar el icono de su botón a la izquierda o derecha de su botón.

Mostrar icono solo al pasar el cursor sobre el botón

De forma predeterminada, los iconos de los botones se muestran solo cuando se desplaza. Si desea que el icono aparezca siempre, desactive esta configuración.

Color de texto de desplazamiento del botón

Cuando el botón de un visitante pasa por encima del botón, se utilizará este color. El color cambiará del color base definido en la configuración anterior.

Color de fondo del botón de desplazamiento

Cuando el botón de un visitante pasa por encima del botón, se utilizará este color. El color cambiará del color base definido en la configuración anterior.

Botón de borde Color Hover

Cuando el botón de un visitante pasa por encima del botón, se utilizará este color. El color cambiará del color base definido en la configuración anterior.

Botón de radio del borde deslizante

Cuando el mouse de un visitante pasa el mouse sobre el botón, se utilizará este valor. El valor cambiará del valor base definido en la configuración anterior.

Botón de espaciado de nota apuntando

Cuando el mouse de un visitante pasa el mouse sobre el botón, se utilizará este valor. El valor cambiará del valor base definido en la configuración anterior.

Opciones avanzadas del control deslizante de publicación

En la pestaña avanzada, encontrará opciones que los diseñadores web más experimentados pueden encontrar útiles, como los atributos personalizados de CSS y HTML. Aquí puede aplicar CSS personalizado a cualquiera de los muchos elementos del módulo. También puede aplicar clases e ID de CSS personalizados al módulo, que se pueden usar para personalizar el módulo en el archivo style.css de su tema secundario.

ID de CSS

Ingrese un ID de CSS opcional para usar en este módulo. Se puede usar una identificación para crear un estilo CSS personalizado o para vincular a secciones particulares de su página.

Clase de CSS

Ingrese las clases de CSS opcionales para usar en este módulo. Se puede usar una clase CSS para crear estilos CSS personalizados. Puede agregar varias clases, separadas por un espacio. Estas clases se pueden usar en su tema secundario Divi o en la hoja de estilo CSS personalizada que agrega a su página o sitio web usando las opciones del tema Divi o la configuración de la página Divi Builder.

CSS personalizado

También se puede aplicar CSS personalizado al módulo y a cualquiera de los componentes internos del módulo. En la sección CSS personalizado, encontrará un campo de texto donde puede agregar hojas de estilo CSS personalizadas directamente a cada elemento. Las entradas CSS en esta configuración ya están envueltas en etiquetas de estilo. Así que simplemente ingrese las reglas CSS separadas por punto y coma.

Animación automática

Si desea que el cursor se deslice automáticamente, sin que el visitante tenga que hacer clic en el siguiente botón, habilite esta opción, luego ajuste la velocidad de rotación a continuación si lo desea.

Velocidad de animación automática (en ms)

Aquí puede indicar qué tan rápido se desvanece el cursor entre cada diapositiva, si la opción 'Auto-animar' está habilitada arriba. Cuanto mayor sea el número, mayor será la pausa entre cada rotación.

Continuar con la diapositiva automática al deslizar

Si activa esta opción, la diapositiva automática continuará con el movimiento del mouse.

Ocultar contenido en dispositivos móviles

A medida que el tamaño de la pantalla se reduce en los dispositivos móviles, el espacio de la pantalla se vuelve más valioso. A veces es una buena idea desactivar algunos elementos del cursor menos importantes para reducir el tamaño del cursor y hacerlo más legible. Habilitar esta configuración oculta el contenido del texto del cursor en el móvil.

Ocultar CTA en dispositivos móviles

A medida que el tamaño de la pantalla se reduce en los dispositivos móviles, el espacio de la pantalla se vuelve más valioso. A veces es una buena idea desactivar algunos elementos del cursor menos importantes para reducir el tamaño del cursor y hacerlo más legible. La activación de esta configuración ocultará los botones de llamada a la acción del cursor en el móvil.

Ver imagen / video en el móvil

A medida que el tamaño de la pantalla se reduce en los dispositivos móviles, el espacio de la pantalla se vuelve más valioso. A veces es una buena idea desactivar algunos elementos del cursor menos importantes para reducir el tamaño del cursor y hacerlo más legible. Al habilitar esta configuración, se muestran imágenes de diapositivas y videos en el móvil (están deshabilitados de manera predeterminada).

desactivar

Esta opción le permite controlar los dispositivos en los que aparece su módulo. Puede optar por desactivar su módulo en tabletas, teléfonos inteligentes o computadoras de escritorio individualmente. Esto es útil si desea utilizar diferentes mods en diferentes dispositivos o si desea simplificar el diseño del móvil eliminando ciertos elementos de la página.

[vc_row center_row=”sí”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DESCARGAR TEMA DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/filiales/idevfiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DESCARGAR EL TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Otros tutoriales de Divi

• 5 sitios web para su uso restaurante temático Divi
• Cómo agregar texto en un producto Divi WooCommerce
• Cómo cambiar el color del menú entre páginas Divi
• Cómo personalizar las cuadrículas de un blog con Divi
• Cómo utilizar la función de editor Divi en WordPress
• Cómo crear un control deslizante Divi a pantalla completa
• Cómo cambiar el color de los menús entre páginas Divi
• Características que probablemente no conozcas sobre Divi
• Cómo usar Divi Builder en WordPress
• Cómo usar el módulo de desplazamiento de video Divi
• Cómo usar el módulo Divi Builder Flip
• Cómo agregar un módulo testimonial en Divi Builder
• Cómo usar el módulo de texto Divi
• Cómo crear un control deslizante en Divi
• Cómo editar un rol de usuario Divi
• Cómo usar el módulo de Divi Social Media
• Cómo usar el módulo de tienda en el tema WordPress Divi
• Cómo usar el módulo de la barra lateral Divi
• Cómo usar el Módulo Divi Price Table
• Cómo usar el módulo de título de las publicaciones de Divi
• Cómo agregar un módulo de video de Divi
• Cómo usar el módulo de navegación del artículo
• Cómo usar el módulo de búsqueda Divi
• Cómo usar el módulo Divi wallet
• Cómo usar el módulo de persona en Divi Builder
• Cómo usar el módulo de billetera con filtro Divi
• Cómo usar el módulo deslizante de ancho completo
• Cómo usar el Módulo de imagen Divi Builder
• Cómo utilizar el módulo de navegación de ancho completo de Divi Builder
• Cómo usar el módulo de la galería de imágenes
• Cómo utilizar el módulo de tarjeta de ancho completo de Divi Builder
• Cómo utilizar el módulo de cartera de ancho completo de Divi
• Cómo usar el módulo de encabezado de ancho completo Divi
• Cómo usar el módulo Divi Counter
• Cómo usar el control deslizante de artículos en Divi Builder
• Cómo usar el módulo Divi Email Optin