Borde

• Esquinas Redondeadas – Escribe un valor numérico para las esquinas redondeadas del borde. Cuanto mayor sea el número, más redondeadas serán las esquinas. Los valores de las esquinas están vinculados automáticamente (como se muestra con el icono de cadena azul resaltado en el medio); sin embargo, si deseas tener valores diferentes para cada esquina, haz clic en la cadena azul para desvincular los valores. Si los valores están vinculados automáticamente, 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 a lados individuales (superior, derecho, inferior e izquierdo).

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

• Color del Borde – Elige el color del borde. Puedes seleccionar un color de la paleta de colores predeterminada de tu sitio que ya esté mostrada o hacer clic en el icono de cuentagotas para encontrar un nuevo color.

• Estilo del Borde – Selecciona el estilo del borde que prefieras: sólido, discontinuo, punteado, doble, ranura, cresta, inseto, outset o ninguno.

Sombra de Caja

• Posición Horizontal de la Sombra de Caja - Define la posición horizontal de la sombra proyectada.

• Posición Vertical de la Sombra de Caja - Define la posición vertical de la sombra proyectada.

• Fuerza del Desenfoque de la Sombra de Caja - Define la intensidad del desenfoque de la sombra. Cuanto mayor sea el valor, mayor será el desenfoque y más amplia y clara será la sombra.

• Fuerza de Expansión de la Sombra de Caja - Define la fuerza de expansión del desenfoque. Aumentar esta fuerza incrementa la densidad de la sombra. Una mayor densidad resulta en una sombra más intensa.

• Color de la Sombra - Define el color de la sombra.

• Posición de la Sombra de Caja - Define la posición de la sombra. Puede estar dentro o fuera del módulo.

Filtros

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

• Saturación – Define qué tan intensa debe ser la saturación del color.

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

• Contraste – Define cuán distintos deben ser las áreas claras y oscuras.

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

• Sepia – Define una apariencia más cálida, con tonos amarillos/marrones.

• 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 Fusión se refiere a cómo el módulo se mezcla con las capas debajo de él. Por defecto, estará seleccionado el modo normal.

Transformar

• Escalar

• Trasladar

• Rotar

• Sesgar

• Puntos de origen

Navega con la tecla tab para acceder a cada opción. Configura cada opción ingresando valores numéricos o arrastrando y expandiendo el cuadro 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 la Animación – Define el tiempo que tarda una animación en completar un ciclo.

• Retraso de la Animación – Define cuánto tiempo esperar desde que se aplica la animación hasta que comienza a ejecutarse. La animación puede empezar más tarde, inmediatamente desde el inicio o inmediatamente y a mitad de la animación.

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

• Curva de Velocidad de la Animación – Define el método de aceleración de la animación. Suavizar la entrada y salida crea un efecto más fluido que una velocidad lineal.

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

Pestaña Avanzada

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

ID y Clases CSS

CSS Personalizado

• CSS de Forma Libre – Escribe CSS de forma libre usando el selector keyword para dirigir este módulo. Ejemplo: selector h1 {color: red;}

• Elementos del Módulo – También puedes aplicar CSS personalizado pegándolo en esta pestaña. Al hacer clic en la pestaña de Elementos del Módulo, verás secciones individuales donde puedes añadir propiedades CSS personalizadas.

Condiciones

Puedes añadir una o varias condiciones.

Visibilidad

• Deshabilitar en – Define la visibilidad del módulo. Puedes deshabilitarlo (ocultarlo) cuando la ventana de visualización sea un Teléfono, Tableta o Escritorio marcando la casilla correspondiente.

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

  • Visible – El contenido se mostrará si se desborda la altura del módulo.

  • Desplazar – Si el contenido se desborda, se usará una barra de desplazamiento vertical para recorrer el contenido.

  • Oculto – Si el contenido se desborda, la parte que sobrepasa la altura se ocultará.

  • Automático – El navegador decidirá si muestra o no una barra de desplazamiento.

• Desbordamiento Vertical – Define qué se muestra cuando el contenido se desborda en los bordes superior e inferior de un elemento de nivel bloque. Las opciones son las mismas que para el desbordamiento horizontal.

Transiciones

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

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

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

Posición

• Posición – Define la posición del módulo:

  • Relativa (valor por defecto) – El módulo se posiciona según el flujo normal del documento, y los valores de desplazamiento vertical y horizontal son relativos a sí mismo. El desplazamiento no afecta la posición de otros elementos; el espacio asignado para el módulo en el diseño de 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 de la página. Se posiciona en relación con su antecesor más cercano que tenga posición (si hay alguno) o con el bloque contenedor inicial. Las opciones de ubicación determinan su posición final.

  • Fija – El módulo se elimina del flujo normal del documento y no se crea espacio para él. Se posiciona en relación con la ventana del navegador. Esto puede usarse para crear un módulo fijo (sticky).

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

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

• Índice Z (Z-index) – Define el orden del módulo en el diseño de la página. Los módulos con un índice z más alto se superponen a los que tienen un índice más bajo.

Efectos de Desplazamiento

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

La función de Disparador de Movimiento te permite elegir cuándo se activa el efecto de desplazamiento que aplicaste. 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

Editar Plantillas de Página con Edición Completa en el Front-end del Sitio

Una vez que hayas creado la plantilla mediante el Constructor de Temas, puedes navegar a una página con una plantilla personalizada y editar esa página usando el Constructor Visual haciendo clic en Activar Constructor Visual en la barra superior. Aprende más sobre la edición completa en el front-end del sitio aquí.

Continuar Aprendiendo

• 4 Ejemplos Impresionantes del Módulo de Título de Publicación de Divi y Cómo Lograrlos

• 7 Consejos Prácticos para el Constructor de Temas Divi

• Cómo Organizar Tus Plantillas del Constructor de Temas Divi

• Cómo Usar el Módulo de Contenido de Publicación en el Constructor de Temas Divi