Saltar al contenido principal

Tutorial de Divi: Cómo utilizar el control deslizante de artículos de Divi Builder

Divi: el tema de WordPress más fácil de usar

¿Estás buscando los mejores temas y complementos de WordPress?

Descarga los mejores complementos y temas de WordPress en Envato y crea fácilmente tu sitio web. Ya más de las descargas de 49.720.000. [EXCLUSIVO]

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

Cómo agregar el módulo deslizante del artículo en Divi Builder

Antes de que pueda agregar un módulo deslizante de artículos a su página, primero debe ir a Divi Builder. Una vez que el tema Divi está instalado en su sitio web, verá un bouton Utilice Divi Builder sobre el editor cada vez que creas una página nueva. Haga clic en este botón para activar Divi Builder y acceder a todos los módulos de Divi Builder. Luego haz 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 explora su sitio web en primer plano si está conectado a su tablero 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 comienza una página nueva, no olvide agregar una línea a su página primero.

articulos.png cursor

Ubique el módulo "Post Cursors" en la lista de módulos y haga clic en él para agregarlo a su página. La lista de los módulos está disponible, lo que significa que puede escribir la palabra "mensajes de Cuseurs" haga clic en "Enter" para buscar y agregar el módulo Cuseurs mensajes de forma automática! Una vez que se agrega el módulo, será recibido por la lista de opciones del módulo. Estas opciones están separadas en tres grupos principales: Contenido , diseño et avanzado .

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

Para este ejemplo, agregaré un cursor de artículo para presentar los tres artículos más recientes en la parte superior de una página de blog. Cada diapositiva muestra la imagen seleccionada a partir de la publicación de una imagen de fondo, el título del artículo y la sección de metadatos y una más como botón de lectura.

ejemplo de blog divi.jpg

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

creando una nueva columna divi.png

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

Opciones de contenido

Número de mensajes: 3

Opciones de diseño

Encabezamiento de la Fuente: Roboto (superior) cabecea tamaño de la fuente: 50px cabecera Color del texto: # edef5d cabecera espaciado entre letras: Tamaño 1px cuerpo de letra: 16 Carta-espacio corporal: 1px Línea Altura del cuerpo: 1.4em Policía Meta Open Sans, Itálica , Alta tamaño de fuente Meta Meta 18px texto color: #CCCCCC Meta Línea Altura: 2em utilizar estilos personalizados para el botón: SÍ tamaño del texto: 26px botón de texto color: Ancho #edef5d Knob: 0px botón del icono:> Mostrar solo el ícono

ejemplo del botón divi.jpg

Guardar configuraciones

Es todo !

ejemplo de un blog en acción divi.gif

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

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

contenido de la opción curser divi module slider of articles.png

Número de artículos (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 elementos.

Texto del botón

Define el texto que se mostrará en el botón "Leer más". dejar en blanco para el valor predeterminado (Leer más)

Pantalla de contenido

Ver todo el contenido no truncará sus artículos en el control deslizante. La vista del extracto muestra solo el texto del extracto.

Use el extracto del artículo si está definido

Desactive esta opción si desea omitir los fragmentos definidos manualmente y siempre generarlos automáticamente.

Longitud de extracción automática

Establezca la longitud de los fragmentos generados automáticamente. Déjelo en blanco para el valor predeterminado (270)

Mostrar flechas

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

Mostrar controles

Esta configuración activará y desactivará los botones de círculo 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 habilita y deshabilita la imagen seleccionada en el control deslizante.

Divi: ¡el mejor tema de WordPress de todos los tiempos!

más 600.000 descargas, Divi es el tema de WordPress más popular en el mundo. Es completo, fácil de usar y viene con más de plantillas gratuitas 62. [Recomendado]

Imagen de ubicación

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

Color de fondo

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

Imagen de fondo

Suba la imagen que desee o escriba la URL de la imagen que desea usar como fondo del control deslizante.

Posición de la imagen de fondo

Elija la ubicación de CSS de la imagen de fondo para cada diapositiva.

Tamaño de la imagen de fondo

Elija el tamaño de marco CSS utilizado para cada diapositiva.

Etiqueta de administrador

Esto cambiará la etiqueta del módulo en el constructor para una fácil identificación. Cuando utiliza la vista WireFrame en Visual Builder, estas etiquetas aparecen en el bloque de módulos de la interfaz de 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 parámetros de diseño que puede usar para cambiar cualquier cosa.

opción de diseño divi articles.png

Eliminar la sombra interna

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

Usar superposición de fondo

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

Color de superposición de fondo

Usa 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 hacerlo más legible en las imágenes de fondo.

Superposición de texto Radio de borde

El radio del borde afecta el redondeo de las esquinas del área de superposición de texto. Por defecto, las esquinas tienen un borde ligeramente redondeado de píxeles 3. Puede reducir este valor a 0 para crear un cuadro rectangular o aumentar el valor para hacer las esquinas aún más redondeadas.

Usa el efecto Parallax

Al habilitar esta opción, las imágenes de fondo se fijarán en una posición fija mientras se desplaza.

Método Parallax

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

Flechas de color personalizadas

Al pasar el cursor sobre un módulo de cursor, aparecen flechas para permitir al visitante navegar a través de cada diapositiva. Por defecto, estas flechas heredan el color del texto principal de la diapositiva. Sin embargo, puede establecer un color personalizado para estas flechas usando esta configuración.

Dot Nav Color personalizado

En cada control deslizante, los elementos de navegación de puntos aparecen debajo del contenido del cursor. Estos elementos le permiten al usuario navegar por el cursor. Puede definir un color personalizado para usar para 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 un texto claro. Si usted
tener un fondo claro, usar texto oscuro.

Fuente del encabezado

Puede cambiar la fuente del texto del encabezado seleccionando la fuente deseada en el menú desplegable. Divi viene con docenas de fuentes grandes con la tecnología de Google Fonts. Por defecto, Divi usa la fuente Open Sans para todo el texto en su página. También puede personalizar el estilo de su texto usando las opciones en negrita, cursiva, mayúscula y subrayada.

Tamaño de la 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 del texto o ingresar el valor del tamaño de texto deseado directamente 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" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Color del texto del encabezado

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

Espaciado de los membretes

El espaciado de las letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra del texto del encabezado, 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 control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Altura de la línea de encabezado

La altura de la línea afecta el espacio entre cada línea del texto del encabezado. Si desea aumentar el espacio entre cada línea, use el control deslizante de rango para ajustar el espacio o ingresar el tamaño de espaciado deseado en la línea. 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" dependiendo del 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 grandes con la tecnología de Google Fonts. Por defecto, Divi usa la fuente Open Sans para todo el texto en su página. También puede personalizar el estilo de su texto usando las opciones en negrita, cursiva, mayúscula y subrayada.

Tamaño de letra del cuerpo

Aquí puedes ajustar el tamaño del texto de tu cuerpo. Puede arrastrar el control deslizante de rango para aumentar o disminuir el tamaño del texto o ingresar el valor del tamaño de texto deseado directamente 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" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Color del texto del cuerpo

Por defecto, todos los colores de texto 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.

Crea fácilmente tu tienda en línea

Descargue gratis WooCommerce, los mejores complementos de comercio electrónico para vender sus productos físicos y digitales en WordPress. [GRATIS]

Espaciado de letras corporales

El espaciado de las letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra del texto, use el control deslizante de rango para ajustar el espacio o introduzca 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" dependiendo del 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 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" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Meta Policía

Puede cambiar la fuente de su meta texto seleccionando la fuente deseada en el menú desplegable. Divi viene con docenas de fuentes grandes con la tecnología de Google Fonts. Por defecto, Divi usa la fuente Open Sans para todo el texto en su página. También puede personalizar el estilo de su texto usando las opciones en negrita, cursiva, mayúscula y subrayada.

Tamaño de la fuente Meta

Aquí puede ajustar el tamaño de su meta-texto. Puede arrastrar el control deslizante de rango para aumentar o disminuir el tamaño del texto o ingresar el valor del tamaño de texto deseado directamente 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" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Color del texto meta

Por defecto, todos los colores de texto 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 las letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra de su meta-texto, utilice el control deslizante para ajustar el rango de espacio o introduzca el tamaño de separación deseada 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" dependiendo del 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 de su meta-texto Si desea aumentar el espacio entre cada línea, utilice el control deslizante para ajustar el rango de espacio o introduzca el tamaño de separación deseada 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" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Relleno 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 aquí su valor deseado. Por ejemplo, para reducir el espacio y el tamaño general del control deslizante, 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.

Relleno de la parte inferior

Esta configuración 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 aquí su valor deseado. Por ejemplo, para reducir el espacio y el tamaño general del control deslizante, 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

Al habilitar esta opción, se muestran diferentes configuraciones de personalización para los botones que puede usar para cambiar la apariencia del botón en su módulo.

Tamaño del texto del botón

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

Color del texto del botón

Por defecto, los botones adoptan el color de acento de su tema como se define en el personalizador del tema. Esta opción le permite asignar un color de texto personalizado al botón en 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 predeterminado 2px. Este límite se puede aumentar o disminuir usando este parámetro. Los bordes se pueden eliminar al ingresar un valor de 0.

Color del borde del botón

De forma predeterminada, los bordes de los botones cambian al color de acento de su tema como se define en el personalizador del tema. Esta opción le permite asignar un color de borde personalizado al botón en este módulo. Seleccione su color personalizado utilizando 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 tus botones. Por defecto, los botones en Divi tienen un pequeño radio de borde que redondea las esquinas de los píxeles de 3. 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 las letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra en el texto del botón, use el control deslizante de rango para ajustar el espacio o introduzca 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" dependiendo del 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 grandes con la tecnología de Google Fonts. Por defecto, Divi usa la fuente Open Sans para todo el texto en su página. También puede personalizar el estilo de su texto usando las opciones en negrita, cursiva, mayúscula y subrayada.

Agregar un ícono de botón

Deshabilitado, esta configuración eliminará los iconos de su botón. Por defecto, todos los botones Divi muestran un ícono de flecha en el vuelo estacionario.

Icono de botón

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

Botón de icono de color

Establecer esta configuración cambiará el color del ícono que aparece en su botón. Por defecto, el color del icono es el mismo que el color del texto de sus botones, pero esta configuración le permite ajustar el color de forma independiente.

Botón de ubicación del icono

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

Mostrar solo el ícono cuando el botón se da vuelta

Por defecto, los iconos de los botones solo se muestran durante la renovación. Si desea que el ícono aparezca siempre, desactive esta configuración.

Color de texto de desplazamiento del botón

Cuando un ratón de visitante sobrevuela el botón, se usará ese color. El color cambiará del color base definido en la configuración anterior.

Color de fondo del botón de desplazamiento

Cuando un ratón de visitante sobrevuela el botón, se usará ese color. El color cambiará del color base definido en la configuración anterior.

Botón de borde Color Hover

Cuando un ratón de visitante sobrevuela el botón, se usará ese color. El color cambiará del color base definido en la configuración anterior.

Botón de radio del borde deslizante

Cuando un mouse de visitante sobrepasa el botón, se usará este valor. El valor cambiará del valor base definido en los parámetros anteriores.

Botón de espaciado de nota apuntando

Cuando un mouse de visitante sobrepasa el botón, se usará este valor. El valor cambiará del valor base definido en los parámetros anteriores.

Opciones avanzadas de Post Slider

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

módulo de cursor

ID de CSS

Ingrese un identificador CSS opcional para usar en este módulo. Una ID puede usarse para crear un estilo CSS personalizado o para crear enlaces a secciones particulares de su página.

Clase de CSS

Ingrese las clases de CSS opcionales para usar en este módulo. Una clase CSS se puede usar para crear un estilo CSS personalizado. Puede agregar varias clases, separadas por un espacio. Estas clases se pueden utilizar en su tema infantil Divi o en la hoja de estilo CSS personalizada que agregue a su página o sitio web utilizando las opciones de Divi tema o la configuración de la página de Divi Builder.

CSS personalizado

CSS personalizado también se puede aplicar al módulo y a uno de los elementos internos del módulo. En la sección CSS personalizado, encontrará un campo de texto en el que puede agregar hojas de estilo CSS personalizadas directamente a cada elemento. Las entradas de CSS en estos parámetros ya están incluidas en las etiquetas de estilo. Así que solo 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 especificar qué tan rápido se desvanece el cursor entre cada diapositiva, si la opción "Animación automática" está habilitada arriba. Cuanto mayor es el número, más larga es 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, la pantalla de bienes raíces se vuelve más valiosa. A veces es una buena idea desactivar algunos elementos deslizantes menos importantes para reducir el tamaño del control deslizante y hacerlo más legible. Al habilitar esta configuración, se oculta el 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, la pantalla de bienes raíces se vuelve más valiosa. A veces es una buena idea desactivar algunos elementos deslizantes menos importantes para reducir el tamaño del control deslizante y hacerlo más legible. Al habilitar esta configuración, se ocultará la llamada del cursor a los botones de acción del dispositivo móvil.

Ver imagen / video móvil

A medida que el tamaño de la pantalla se reduce en los dispositivos móviles, la pantalla de bienes raíces se vuelve más valiosa. A veces es una buena idea desactivar algunos elementos deslizantes menos importantes para reducir el tamaño del control deslizante y hacerlo más legible. Al habilitar esta configuración, se muestran las imágenes de diapositivas y los videos en el móvil (están desactivados por defecto).

desactivar

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

Otros tutoriales de Divi

Dejar un comentario

Su dirección de correo electrónico no será publicada. Los campos necesarios están marcados con *

Este sitio usa Akismet para reducir los no deseados. Obtenga más información sobre cómo se utilizan sus datos de comentarios.

Temas geniales de WordPress que encontré en
¡Y hay más temas y modelos 50 000 para elegir!

Volver arriba
12 acciones
cuota6
Tweet2
Siguiente 4
WhatsApp