Divi le permite colocar controles deslizantes en secciones de ancho completo, lo que hace que sus controles deslizantes abarquen todo el ancho del navegador. Los deslizadores Divi (Sliders) admiten fondos de paralaje, ¡así como fondos de video!

usa un control deslizante en divi.png

Cómo agregar un módulo Diapo de ancho completo desde Divi

Antes de que pueda agregar un módulo deslizante de ancho completo a su página, primero debe saltar a Divi Builder. Una vez el Tema divi instalado en su Sitio web, notarás un botón Utilice Divi Builderencima del editor de publicaciones cada vez que crea 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 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 navegas por tu Sitio web en primer plano si ha iniciado sesión en su panel de WordPress.

usar visual builder divi.png

Una vez que esté en 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.

crear un tutorial de diapositivas divi wordpress.png

Busque el módulo deslizante de ancho completo en la lista de módulos y haga clic en él para agregarlo a su página. La lista de modificaciones se puede buscar, lo que significa que también puede escribir la palabra "Diapositiva" y luego hacer clic en Intro para buscar y agregar automáticamente el módulo deslizante de ancho completo. 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: agregar una sección Hero del control deslizante de ancho completo a su página de inicio

Un control deslizante de ancho completo es una excelente manera de mostrar múltiples CTA por encima del umbral de su página de inicio. La combinación de imágenes y contenido realmente puede darle a su sección una sensación profesional que se destaca.

Para este ejemplo, agregaré una diapositiva de ancho completo para que sirva como sección principal en una página de inicio.

crear una diapositiva de ancho completo example.jpg

Con Visual Builder, agregue una sección de ancho completo en la parte superior de su página web. Luego inserte el módulo Control deslizante de ancho completo en su nueva sección. En la pestaña Contenido de la configuración de diapositivas de ancho completo, haga clic en + Agregar un nuevo elemento para crear tu primera diapositiva.

crear una diapositiva divi.png

En la configuración de la diapositiva de su primera diapositiva, actualice las siguientes opciones:

Opciones de contenido

Entête : [ingrese el título de la diapositiva]
Texto del botón : [ingrese el texto del botón]
Contenido : [ingrese el contenido del texto de la diapositiva]
URL del botón : [ingrese la URL de destino del botón de diapositiva]
Imagen de fondo : [ingrese la imagen que servirá como fondo de la diapositiva]

Opciones de diseño

Usar la superposición de fondo : SI
Color de superposición de fondo : rgba (0,0,0,0.2) esta superposición oscurece ligeramente la imagen de fondo para que el texto sea más legible.

slide divi blogpascher.png

Guardar configuración de diapositiva

Ahora duplique la diapositiva que acaba de crear y actualice la nueva diapositiva con contenido nuevo según sea necesario. Repita esto para todas las diapositivas que desee agregar.

duplicar una diapositiva divi.png

Es todo. Para este ejemplo, solo incluyo dos diapositivas, pero el resultado es un control deslizante efectivo de ancho completo con múltiples llamadas a la acción que incita al usuario a hacer clic en el botón para obtener más información. Dado que este es su principal llamado a la acción para su Sitio web, sugiero ejecutar pruebas divididas en su diapositiva de ancho completo usando Divi Leads y ver cuál convierte mejor.

ejemplo slide divi dem.gif

Deslice las opciones de contenido completo

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.

slide divi section content.png

flechas

Elija si desea o no mostrar las flechas de navegación izquierda y derecha.

Contrôles

Elija si desea mostrar los botones de círculo / indicadores deslizantes en la parte inferior del cursor.

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 de diapositiva

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.

diseño de la sección deslizante divi.png

Eliminar la sombra interior

De forma predeterminada, se muestra una sombra interna en el cursor. Si desea desactivar esta sombra, puede hacerlo usando esta configuración.

efecto de paralaje

Habilitar esta opción le dará a sus imágenes de fondo una posición fija mientras se desplaza. Tenga en cuenta que cuando esta configuración está activada, sus imágenes escalarán sus imágenes a la altura del navegador.

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.

diseño de fuente de sección de diapositivas de lentete.png

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.

Cuerpo de policía

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.

módulo de deslizamiento de diseño de sección divi.png

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.

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 del botón divi.png

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.

Fuente de botón

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.

Desplazar el color del texto 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 de módulo deslizante de ancho completo

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.

módulo de deslizamiento de sección de avance divi.png

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 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. 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).

visibilidad

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.

Opciones de contenido para elementos de módulo de diapositivas de ancho completo

módulo de elemento individual divi diapo.png

Título

Establezca el texto del título del cursor aquí.

Texto del botón

Si desea mostrar un botón debajo del contenido de la diapositiva, ingrese el texto del botón aquí. Deje este campo en blanco si no desea mostrar un botón.

Contenido

Ingrese el contenido del cuerpo de su cursor aquí. Tenga en cuenta que la cantidad de texto que ingrese aquí determinará la altura de sus diapositivas.

URL del botón

Si muestra un botón, inserte una URL web válida en este campo para establecer el enlace de destino.

Arrastra la imagen

Si agrega una imagen de diapositiva, aparecerá a la izquierda del texto de la diapositiva sobre el fondo de la diapositiva. Si no especifica una imagen de diapositiva, estará a la izquierda con una diapositiva centrada de solo texto. Dado que la altura de cada diapositiva está determinada por el texto, si la imagen de la diapositiva es lo suficientemente alta, caerá por debajo de la parte inferior de la diapositiva, creando una imagen alineada en la parte inferior.

arrastre una imagen divi.png

Tenga en cuenta que la altura de una diapositiva con una imagen de diapositiva se puede determinar mediante una diapositiva más alta en el control deslizante. Asegúrese de que la imagen de la diapositiva sea lo suficientemente grande para que quepa si desea alinear una imagen en la parte inferior. Para facilitar la lectura, las imágenes de diapositivas solo aparecen en los controles deslizantes de columna, columna o 1 columna de ancho. Del mismo modo, las imágenes de diapositivas no se mostrarán en navegadores de ancho inferior a 768 píxeles. Los anchos de las imágenes de diapositivas se definen a continuación. Recomendamos que las imágenes de las diapositivas sean al menos tan anchas.

Diapositiva de video

Si agrega un video de diapositiva, aparecerá a la izquierda del texto de la diapositiva sobre el fondo de la diapositiva. Si no especifica un video de diapositiva, estará a la izquierda con una diapositiva centrada de solo texto. Dado que la altura de cada diapositiva está determinada por el texto, si la imagen de la diapositiva es lo suficientemente alta, caerá por debajo de la parte inferior de la diapositiva, creando una imagen alineada en la parte inferior.

Pausar el video

Permitir que otros jugadores pausen el video cuando comienzan a reproducir

Imagen de fondo

Si se establece, esta imagen se utilizará como fondo para este módulo. Para eliminar una imagen de fondo, simplemente elimine la URL del campo de configuración.

La altura de una diapositiva está determinada por la cantidad de texto que agrega. Si tiene varias diapositivas, el control deslizante tomará la altura de la diapositiva más alta.

El ancho de su cursor está determinado por el ancho del navegador. Según los tamaños de pantalla estándar, recomendamos que sus imágenes tengan al menos 1280 px por 768 px.

Posición de la imagen de fondo

De forma predeterminada, las imágenes de fondo se muestran en el centro de la diapositiva. Puede utilizar esta configuración para cambiar la ubicación en la parte superior, inferior, izquierda, derecha o en cualquiera de las cuatro esquinas de la diapositiva.

Tamaño de la imagen de fondo

De forma predeterminada, las imágenes de fondo se ampliarán proporcionalmente para garantizar que llenen toda la diapositiva. Sin embargo, puede utilizar esta opción para cambiar el comportamiento predeterminado. "Cobertura" es el comportamiento predeterminado, que escala la imagen para cubrir toda el área de la diapositiva. "Ajustar" también obligará a la imagen a cubrir toda el área, sin embargo, forzará la altura y el ancho de la imagen para que coincidan con la altura y el ancho del cursor. Esto puede resultar en una imagen distorsionada, pero evitará que la imagen se recorte. "Tamaño real" no escala la imagen y la muestra en su tamaño original.

Color de fondo

Si solo desea usar un fondo de color sólido para su diapositiva, use el selector de color para establecer un color de fondo.

Video de fondo MP4

Todos los videos deben descargarse en ambos formatos .MP4 .WEBM para garantizar la máxima compatibilidad en todos los navegadores. Descarga la versión .MP4 aquí. Nota importante: los fondos de video están deshabilitados desde dispositivos móviles. En su lugar, se utilizará su imagen bkacground. Por esta razón, debe establecer una imagen de fondo y un video de fondo para garantizar mejores resultados.

Video de fondo de WEBM

Todos los videos deben descargarse en ambos formatos .MP4 .WEBM para garantizar la máxima compatibilidad en todos los navegadores. Descargue las versiones .WEBM aquí. Nota importante: los fondos de video están deshabilitados desde dispositivos móviles. En su lugar, se utilizará su imagen bkacground. Por esta razón, debe establecer una imagen de fondo y un video de fondo para garantizar mejores resultados.

Ancho del video de fondo

Para que los videos tengan el tamaño adecuado, debe ingresar el ancho exacto (en píxeles) de su video aquí.

Fondo de altura de video

Para que los videos tengan el tamaño adecuado, debe ingresar la altura exacta (en píxeles) de su video aquí.

Opciones de diseño de elementos de elementos deslizantes

módulo de estilo de sección divi.png

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.

Color de superposición de texto

Use el selector de color para elegir un color para la superposición de texto.

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.

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.

Alineación vertical de la imagen de la diapositiva

Esta configuración determina la alineación vertical de su imagen de diapositiva. Su imagen se puede centrar verticalmente o alinear en la parte inferior de su diapositiva.

Color del texto

Si el fondo de la diapositiva es oscuro, el color del texto debe establecerse en "Claro". Por el contrario, si el fondo de la diapositiva es claro, el color del texto debe establecerse en "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.

color del módulo de diseño de la sección del encabezado dispo divi.png

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.

línea del cuerpo divi module diapo.png

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.

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.

Botón de ancho del borde

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.

módulo de botón de configuración divi.png

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.

Fuente de botón

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.

Desplazar el color del texto 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 de cursor Ancho completo

sección adelantada módulo deslizante elemento individual divi.png

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.

Texto de imagen alternativo

El texto alternativo proporciona toda la información necesaria si la imagen no se carga, no se muestra correctamente o en cualquier otra situación en la que un usuario no puede ver la imagen. También permite que los motores de búsqueda lean y reconozcan la imagen.

[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