Texto

Alineación de Texto – Elige cómo se alinea el texto:

• Izquierda

• Centrado

• Derecha

• Justificado

Color de Texto – Selecciona la paleta de colores predeterminada para el texto de este módulo: claro u oscuro. Las paletas de colores predeterminadas claras y oscuras pueden configurarse en las Opciones del Tema Divi.

Sombra de Texto – Aplica una sombra paralela a todo el texto dentro de este módulo. Cuando se selecciona un tipo de sombra, se aplicará a todo el contenido, tanto al número como al texto del título.

Texto del Botón

Fuente del botón – Elige la fuente que quieres para el texto del botón. La fuente predeterminada se selecciona automáticamente; sin embargo, puedes elegir una fuente diferente o subir una personalizada haciendo clic en el menú desplegable.

Peso de la fuente del botón – Selecciona la negrita del texto del botón.

Estilo de la fuente del botón – Elige el estilo de la fuente del texto del botón: cursiva, mayúsculas, versalitas, subrayado o tachado.

Color del texto del botón – Elige un color específico para el texto del botón. Selecciona desde la paleta de colores de tu sitio o haz clic en el icono de cuentagotas para encontrar un color nuevo.

Tamaño del texto del botón – Elige el tamaño de la fuente del texto del botón arrastrando el control deslizante o escribiendo un valor numérico.

Espaciado entre letras del botón – Elige el espaciado entre letras del texto del botón arrastrando el control deslizante o escribiendo un valor numérico. El espaciado entre letras es el espacio entre cada letra. A mayor número, mayor espacio.

Altura de línea del botón – Elige la altura de línea arrastrando el control deslizante o escribiendo un valor numérico. La altura de línea es el espacio entre cada línea de texto. A mayor número, mayor espacio.

Sombra del texto del botón – Añade una sombra paralela al texto del botón. Una vez que se selecciona un estilo, puedes configurar la dirección de la sombra (horizontal y vertical), la intensidad del desenfoque y el color de la sombra.

Dimensiones

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 tres opciones:

• Alineado a la izquierda

• Centrado

• Alineado a la derecha

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 la altura máxima que puede tener el módulo. 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 bloquear proporciones y mantener los valores iguales, haz clic en el icono de cadena entre los valores que quieres 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 0.

Borde

Esquinas redondeadas – Escribe un valor numérico para redondear las esquinas del borde. A mayor número, más redondeadas serán las esquinas. Los valores de las esquinas están vinculados automáticamente (como se ve en la cadena azul resaltada en el centro); sin embargo, si quieres valores diferentes para cada esquina, haz clic en la cadena azul para desvincularlos. Si los valores están vinculados, siempre tendrán el mismo valor y se actualizarán automáticamente si cambias 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 – Define el ancho del borde. Para un borde más grueso, aumenta el número. El ancho del borde debe ser al menos 1px para mostrarse.

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

Estilo del borde – Selecciona el estilo de borde que desees: sólido, punteado, rayado, doble, canalado, acanalado, interno, externo o ninguno.

Sombra de caja

• Posición horizontal de la sombra de caja – Define la posición horizontal de la sombra paralela.

• Posición vertical de la sombra de caja – Define la posición vertical de la sombra paralela.

• Intensidad del desenfoque de la sombra de caja – Define la intensidad del desenfoque de la sombra. A mayor valor, más grande y más amplia y ligera será la sombra.

• Intensidad de propagación de la sombra de caja – Define la fuerza de propagación del desenfoque. Aumentar este valor incrementa la densidad de la sombra. Mayor densidad significa una sombra más intensa.

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

• Posición de la sombra de caja – Define si la sombra está dentro o fuera del módulo.

Filtros

• Tono – Define el ángulo del tono de un color.

• Saturación – Define la intensidad de la saturación del color.

• Brillo – Define qué tan brillantes deben ser los colores.

• Contraste – Define qué tan distintos deben ser las áreas claras y oscuras.

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

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

• Opacidad – Define cuán 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 Fusión se refiere a cómo se mezcla el módulo con las capas debajo. Por defecto, estará seleccionado Normal.

Transformar

• Escalar

• Trasladar

• Rotar

• Inclinar

• Puntos de origen

Navega por cada opción con tabulador. Configura cada opción escribiendo 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 abajo a la derecha.

Animación

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

• Retraso de animación – Define cuánto tiempo esperar antes de que comience la animación tras aplicarla. Puede comenzar más tarde, inmediatamente o parcialmente durante la animación.

• Opacidad inicial de la animación – Define el valor de opacidad inicial.

• Curva de velocidad de la animación – Define el método de aceleración de la animación. Acelerar y desacelerar suaviza el efecto más que una velocidad lineal.

• Repetición de la animación – Por defecto, las animaciones solo se reproducen una vez. Para que se repita continuamente, elige la opción Loop (bucle).

Pestaña Avanzada

Aquí puedes aplicar CSS personalizado a tu módulo. También puedes agregar clases e IDs CSS personalizados para el módulo, que pueden usarse para personalizar los estilos con propiedades CSS más avanzadas o para añadir código CSS personalizado 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 la pestaña Elementos del módulo, verás secciones individuales donde puedes añadir propiedades CSS personalizadas.

Condiciones

Puedes añadir una o múltiples condiciones.

Visibilidad

Desbordamiento horizontal – Define qué se muestra cuando el contenido se desborda por los bordes izquierdo y derecho de un elemento de nivel bloque. Puede ser:

• Visible – El contenido se mostrará si se desborda en altura.

• Desplazamiento – Si el contenido se desborda, aparecerá una barra de desplazamiento vertical para navegar.

• Oculto – La parte que se desborda estará oculta.

• Automático – El navegador decide si muestra barra de desplazamiento.

Desbordamiento vertical – Define qué se muestra cuando el contenido se desborda por los bordes superior e inferior. Puede ser:

• Visible

• Desplazamiento

• Oculto

Transiciones

• Duración de la transición – Define la duración (en milisegundos) de la transición de la animación al pasar el cursor.

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

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

Posición

• Relativa (valor predeterminado) – El módulo se posiciona según el flujo normal del documento, y los valores de desplazamiento son relativos a sí mismo con base en los valores de desplazamiento vertical y horizontal. El desplazamiento no afecta la posición de otros elementos; el espacio para el módulo en la página es el mismo que si la posición fuera estática.

• Absoluta – El módulo se elimina del flujo normal del documento, y no se crea espacio para él en el diseño. Se posiciona relativo a su ancestro más cercano que tenga posición o al bloque contenedor inicial. Las opciones de ubicación determinan su posición final.

• Fija – El elemento se elimina del flujo normal y no crea espacio en el diseño. Se posiciona en relación a la ventana del navegador. Puede usarse para crear un módulo pegajoso.

• 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 del módulo en el diseño de la página. Los módulos con índice z más alto se superponen a los de índice z más bajo.

Efectos de desplazamiento

Además, puedes habilitar movimiento vertical en este módulo, lo que permite ajustar la velocidad del desplazamiento del elemento sin afectar a los elementos circundantes.

La función de activador de movimiento te permite elegir cuándo se activa el efecto de desplazamiento aplicado. Puedes activarlo cuando la parte superior, media o inferior del elemento esté visible.

Guardar tu diseño

Guardar el diseño de la página

Salir del constructor visual

Recursos del módulo de búsqueda Divi

• Cómo crear una plantilla de página de resultados de búsqueda en Divi

• Cómo crear una sección dinámica de ofertas de trabajo con el módulo blog de Divi