Tamaño

Ancho Máximo - Define el ancho máximo del módulo. Para más información, consulta la documentación oficial.

Alineación del Módulo - Si se establece un valor para Ancho o Ancho Máximo, la alineación del módulo puede configurarse usando las tres opciones:

• Alineado a la izquierda

• Alineado al centro

• Alineado a la derecha

Ancho del Contenido - Configura el ancho del área de contenido dentro del deslizador.

Ancho Máximo del Contenido - Configura el ancho máximo para el área de contenido dentro del deslizador.

Altura Mínima - Define el valor mínimo para la altura del módulo. Para más información, consulta la documentación oficial.

Altura - Define la altura del módulo. Para más información, consulta la documentación oficial.

Altura Máxima - Define el valor máximo de altura que el módulo puede tener. Para más información, consulta la documentación oficial.

Espaciado

El margen añade espacio fuera del módulo, y el relleno añade espacio dentro del módulo. Para mantener proporciones y que los valores sean iguales, haz clic en el icono de cadena entre los valores que deseas que siempre sean idénticos (por ejemplo, arriba y abajo).

Los valores predeterminados de margen para el módulo son 0.

Los valores predeterminados de relleno para el módulo son:

• Relleno superior: 16%

• Relleno inferior: 16%

• Relleno izquierdo: 8%

• Relleno derecho: 8%

Borde

Esquinas redondeadas – Introduce un valor numérico para redondear las esquinas del borde. Mientras mayor sea el número, más redondeadas serán las esquinas. Los valores de las esquinas están vinculados automáticamente (lo puedes ver por la cadena azul resaltada); sin embargo, si deseas diferentes valores para cada esquina, haz clic en la cadena azul para desvincular los valores. Si están vinculados, siempre tendrán el mismo valor y se actualizarán automáticamente si se cambia uno.

Estilos de borde – Añade un borde a todos los lados del módulo o solo a lados individuales (arriba, derecha, abajo, izquierda).

Ancho del borde - Configura el ancho del borde. Para un borde más grueso, incrementa el número. El ancho debe ser al menos 1px para que el borde se muestre.

Color del borde – Elige el color del borde. Puedes seleccionar un color de la paleta predeterminada del sitio que ya se muestra o hacer clic en el icono del cuentagotas para seleccionar un nuevo color.

Estilo de borde – Selecciona el estilo del borde que deseas: sólido, discontinuo, punteado, doble, ranurado, elevado, incrustado, sobresaliente o ninguno.

Sombra de caja

• Posición horizontal de la sombra: Define la posición horizontal de la sombra.

• Posición vertical de la sombra: Define la posición vertical de la sombra.

• Intensidad del desenfoque: Define la fuerza del desenfoque de la sombra. Mientras mayor sea el valor, más grande y difusa será la sombra.

• Intensidad de expansión: Define la fuerza con la que se extiende la sombra. Incrementar este valor aumenta la densidad de la sombra. Una mayor densidad hace la sombra más intensa.

• Color de la sombra: Define el color de la sombra.

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

Filtros

• Matiz – Define el ángulo del color.

• Saturación – Define la intensidad del color.

• Brillo – Define qué tan brillante es el color.

• Contraste – Define el nivel de diferencia entre áreas claras y oscuras.

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

• Sepia – Da un tono más cálido, amarillento/marrón.

• Opacidad – Define qué tan transparente u opaco debe ser el fondo (color, degradado, imagen, etc.).

• Desenfoque – Define la cantidad de desenfoque gaussiano aplicado al módulo.

El modo de mezcla indica cómo el módulo se fusiona con las capas inferiores. Por defecto, está seleccionado “normal”.

Transformar

1. Escalar
   Desplazar
   Rotar
   Inclinar
   Puntos de origen

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

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

Animación

• Duración de animación – Define el tiempo que tarda en completarse un ciclo de animación.

• Retraso de animación – Define el tiempo que debe esperar desde que se aplica la animación hasta que comienza. La animación puede iniciar más tarde, inmediatamente desde el principio o parteway (a mitad de camino).

• Opacidad inicial – Define el valor de opacidad al inicio.

• Curva de velocidad – Define el método de aceleración de la animación. Una curva suave crea un efecto más fluido que una velocidad lineal.

• Repetición – Por defecto, la animación se reproduce solo una vez. Para que se repita continuamente, selecciona la opción “Bucle”.

Pestaña Avanzada

Aquí puedes aplicar CSS personalizado al módulo. También puedes asignar clases e IDs personalizadas para usar estilos avanzados o aplicar código CSS usando la clase del módulo.

ID y Clases CSS

CSS personalizado

Elementos del módulo - También puedes aplicar CSS personalizado a este módulo pegándolo en esta pestaña. Al hacer clic en “Elementos del módulo” verás secciones individuales para agregar propiedades CSS.

Atributos

Condiciones

Puedes agregar una o varias condiciones.

Visibilidad

• Mostrar contenido en móvil – Activa o desactiva la visualización del contenido en teléfonos móviles.

• Mostrar llamada a la acción en móvil – Activa o desactiva el botón CTA en teléfonos móviles.

• Mostrar imagen/video en móvil – Activa o desactiva la imagen o video en móviles.

• Desactivar en – Define en qué dispositivos se oculta el módulo.

• Desbordamiento horizontal – Define qué sucede cuando el contenido sobrepasa los bordes izquierdo y derecho. Opciones: visible, scroll, oculto, automático.

• Desbordamiento vertical – Define qué sucede cuando el contenido sobrepasa los bordes superior e inferior. Opciones: visible, scroll, oculto, automático.

Transiciones

• Duración de transición – Define la duración (en milisegundos) de la transición de hover.

• Retraso de transición – Define el retraso de la transición de hover (en milisegundos).

• Curva de velocidad de transición – Define la curva de velocidad de la transición de hover.

Posición

• Relativa (valor por defecto) – El módulo se posiciona según el flujo normal del documento y se desplaza relativo a sí mismo según valores de desplazamiento vertical y horizontal. No afecta a otros elementos.

• Absoluta – El módulo se elimina del flujo normal y no ocupa espacio. Se posiciona relativo a su ancestro posicionado más cercano o el contenedor inicial. Las opciones de ubicación determinan su posición final.

• Fija – El módulo se elimina del flujo normal y se posiciona respecto a la ventana del navegador. Se puede usar para crear módulos fijos (sticky).

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

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

• Índice Z – Define el orden en el que el módulo se superpone respecto a otros. Un índice Z mayor se mostrará sobre uno menor.

Efectos de desplazamiento

También puedes activar el movimiento vertical para ajustar la velocidad de desplazamiento del elemento sin afectar los elementos circundantes.

La función “Disparador de efecto de movimiento” te permite elegir cuándo se activa el efecto de scroll (cuando la parte superior, media o inferior del elemento está visible).

Personalización de diapositivas individuales

Cómo acceder a la configuración de diapositivas individuales: abre la configuración del módulo y haz clic en el icono de engranaje junto a la diapositiva que quieres editar.

Configuración de contenido de diapositivas individuales

Texto

• Título – Escribe el título de la diapositiva aquí. Déjalo en blanco si no quieres título.

• Botón – Escribe el texto del botón. Déjalo en blanco si no quieres botón.

• Cuerpo – Escribe el texto principal. Déjalo en blanco si no quieres texto.

Imagen y video

• Imagen – Para agregar imagen, haz clic en “Agregar imagen” y selecciona o sube una en la biblioteca de medios.

• Video – Para agregar video, haz clic en “Agregar video” y selecciona o sube uno en la biblioteca de medios.

Enlace

• URL del enlace del botón – Pega el enlace al que quieres dirigir el botón. Al hacer clic, los visitantes irán a esa URL.

• Objetivo del enlace del botón – Define si el enlace se abre en la misma ventana o en una nueva pestaña:

  • En la misma ventana

  • En nueva pestaña

• URL del enlace del módulo – Pega la URL que quieres que haga clic en todo el módulo. Esto hace que el módulo completo sea clickeable.

• Objetivo del enlace del módulo – Igual que para el botón, define si el enlace abre en la misma ventana o en nueva pestaña.

Fondo

Etiqueta administrativa

Guardar diseño

Si cierras el módulo sin guardar, perderás tu trabajo.

Guardar el diseño de la página

Salir del constructor visual

Recursos del módulo Divi Slider

Cómo crear un mosaico de navegación con el módulo Divi Slider

Cómo añadir elementos parallax y una transición de deslizamiento hacia abajo al módulo Divi Slider