Pestaña de Diseño

Alineación

• Izquierda

• Centro

• Derecha

---

Texto

Botón

• Usar estilos personalizados para el botón – Para diseñar un estilo personalizado para este botón, activa esta opción en Sí. Entonces aparecerán las siguientes opciones.

• Tamaño del texto del botón – Elige el tamaño de la fuente del botón aquí. Arrastra el control deslizante para ajustar el tamaño o escribe un valor numérico en el cuadro de texto.

• Color del texto del botón – Elige el color de la fuente del botón aquí. Selecciona un color de la paleta de tu sitio, o usa el icono de cuentagotas para encontrar un color nuevo.

• Fondo del botón – Elige el color de fondo del botón aquí. Selecciona un color de la paleta de tu sitio, o usa el icono de cuentagotas para encontrar un color nuevo.

• Ancho del borde del botón – Ajusta el ancho del borde del botón aquí. Arrastra el control deslizante para ajustar el ancho o escribe un valor numérico en el cuadro de texto.

• Color del borde del botón – Elige el color del borde aquí. Selecciona un color de la paleta de tu sitio, o usa el icono de cuentagotas para encontrar un color nuevo.

• Radio del borde del botón – Ajusta el radio del borde del botón aquí. El radio determina qué tan redondeadas son las esquinas. Cuanto mayor sea el número, más redondeadas serán las esquinas. Arrastra el control deslizante o escribe 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, más espacio.

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

• Peso de la fuente del botón – Haz clic en el menú desplegable para seleccionar el grosor (negrita) de la fuente del botón.

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

• Mostrar icono del botón – Activa o desactiva esta opción para mostrar u ocultar un icono en el botón.

• Icono del botón – Puedes seleccionar el icono del botón aquí si la opción anterior está activada.

• Color del icono del botón – Elige el color del icono aquí. Selecciona un color de la paleta de colores de tu sitio o usa el cuentagotas para encontrar un color nuevo.

• Ubicación del icono del botón – Elige dónde quieres que esté el icono del botón: a la derecha o a la izquierda del texto del botón.

• Mostrar solo el icono al pasar el cursor – Esta opción está activada por defecto, lo que significa que el icono solo aparecerá al pasar el cursor por encima. Si deseas que el icono esté siempre visible, desactiva esta opción.

Sombra del texto del botón
Puedes aplicar una sombra al texto del botón aquí. Elige el estilo de sombra que deseas usar y personalízalo con las siguientes opciones:

• Longitud horizontal de la sombra del texto – Ajusta la posición horizontal de la sombra del texto.

• Longitud vertical de la sombra del texto – Ajusta la posición vertical de la sombra del texto.

• Fuerza de desenfoque de la sombra del texto – Ajusta la fuerza del desenfoque de la sombra aplicada al texto. Cuanto mayor sea el número, más desenfoque.

• Color de la sombra del texto – Elige el color de la sombra del texto. Selecciona un color de la paleta de colores de tu sitio o usa el cuentagotas para elegir un color nuevo.
  

Espaciado

Puedes agregar márgenes o espaciado a este módulo escribiendo valores numéricos.

• El margen agrega espacio fuera del módulo, y el relleno (padding) agrega espacio dentro del módulo.

• Para bloquear proporciones y mantener los valores iguales (por ejemplo, arriba y abajo), haz clic en el ícono de cadena entre los valores que quieres que siempre sean idénticos.

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

Los valores predeterminados de relleno (padding) para el módulo Botón son:

• Relleno superior: 0.3em (6px)

• Relleno inferior: 0.3em (6px)

• Relleno izquierdo: 1em (20px)

• Relleno derecho: 1em (20px)

---

Sombra de caja (Box Shadow)

Aquí puedes agregar una sombra al módulo completo.

Una vez que selecciones un estilo de sombra, podrás personalizar las siguientes opciones:

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

• Fuerza de desenfoque de la sombra: Define la intensidad del desenfoque. A mayor valor, mayor desenfoque, sombra más ancha y ligera.

• Fuerza de expansión de la sombra: Define la densidad de la sombra. Al aumentar este valor, la sombra se vuelve más intensa y densa.

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

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

Filtros

Ajusta los filtros del módulo:

• Matiz (Hue): Define el ángulo del matiz del 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 distinguibles deben ser las áreas claras y oscuras.

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

• Sepia: Define un aspecto más cálido, con tonos amarillos/marrones.

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

• Desenfoque (Blur): Define la cantidad de desenfoque gaussiano aplicado al módulo.

El Modo de fusión (Blend Mode) se refiere a cómo se mezcla el módulo con las capas que están debajo. Por defecto está seleccionado “normal”.

---

Transformar

Opciones para transformar el módulo:

• Escalar (Scale)

• Trasladar (Translate)

• Rotar (Rotate)

• Inclinar (Skew)

• Puntos de origen (Origin points)

Navega por cada opción usando la tecla Tab. Configura cada opción 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 ícono de cadena en la parte inferior derecha.

---

Animación

Aquí puedes aplicar animaciones al módulo. Una vez que elijas un estilo, podrás ajustar estas opciones:

• Duración de la animación: Define cuánto tiempo tarda la 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 esta comienza. La animación puede empezar más tarde, inmediatamente o parcialmente durante su ejecución.

• Opacidad inicial de la animación: Define el valor de opacidad al inicio de la animación.

• Curva de velocidad de la animación: Define el método de aceleración (easing). Esto crea un efecto más suave que una velocidad lineal.

• Repetición de la animación: Por defecto, la animación se reproduce solo una vez. Si quieres que se repita continuamente, selecciona la opción “Loop” (bucle).
  

Pestaña Avanzada

Dentro de la pestaña Avanzada encontrarás opciones que diseñadores web más experimentados podrían encontrar útiles, como CSS personalizado.

Aquí puedes aplicar CSS personalizado a tu módulo. También puedes asignar clases e IDs CSS personalizadas al módulo, las cuales pueden usarse para personalizar los estilos del módulo con propiedades CSS más avanzadas o para aplicar código CSS personalizado usando la clase CSS del módulo.

---

ID y Clases CSS

Asigna un ID CSS o Clase específica a este módulo. Esto es útil cuando aplicas CSS personalizado a un módulo usando la hoja de estilos de tu tema hijo.

---

CSS Personalizado

• CSS de forma libre: Escribe CSS libre usando el selector keyword para apuntar a 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 Elementos del módulo, verás secciones individuales donde puedes añadir propiedades CSS personalizadas.

---

Atributos

• Relación del botón: Define la relación del enlace del botón entre la fuente a la que enlazas y la página desde la que enlazas.

---

Condiciones

Esta pestaña te permite elegir cuándo mostrar este módulo basado en condiciones, como cuando un usuario visita la página, si ya ha comprado en tu empresa, qué navegador usa, qué sistema operativo, y más.

Puedes agregar una o varias condiciones.

---

Visibilidad

• Desactivar en: Define la visibilidad del módulo. Puedes desactivarlo (ocultarlo) en teléfonos, tablets o escritorio marcando las casillas correspondientes.

• Desbordamiento horizontal: Define qué sucede cuando el contenido sobrepasa los bordes izquierdo y derecho del elemento. Puede ser:

  • Visible: el contenido se mostrará aunque se salga del área.

  • Scroll: si el contenido sobrepasa el alto, aparecerá una barra de desplazamiento vertical.

  • Oculto: la parte del contenido que sobrepase el área se ocultará.

  • Automático: el navegador decide si mostrar o no la barra de scroll.

• Desbordamiento vertical: Define qué sucede cuando el contenido sobrepasa los bordes superior e inferior del elemento. Las opciones son las mismas que el desbordamiento horizontal.

---

Transiciones

Controla la duración, retraso y curva de velocidad de la animación hover.

• Duración de la transición: Tiempo (en milisegundos) que dura la animación hover.

• Retraso de la transición: Tiempo (en milisegundos) antes de que comience la animación hover.

• Curva de velocidad de la transición: Método de aceleración (easing) de la animación hover.

---

Posición

Define la posición del módulo:

• Relativa (valor predeterminado): El módulo se posiciona según el flujo normal del documento, y los desplazamientos vertical y horizontal son relativos a sí mismo. No afecta la posición de otros elementos.

• Absoluta: El módulo se saca del flujo normal, no ocupa espacio en el diseño, y se posiciona respecto al ancestro más cercano posicionado o al bloque contenedor inicial.

• Fija: El módulo se saca del flujo normal y se posiciona en relación a la ventana del navegador, útil para módulos “sticky”.

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

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

• Z-index: Define el orden del módulo en la disposición de la página. Módulos con mayor z-index se superponen a los de menor z-index.

---

Efectos de desplazamiento 

Define cómo se comporta el módulo al hacer scroll. Puedes hacer que el módulo sea “sticky” (pegajoso) arriba, abajo o ambos, y elegir si el módulo se transforma al hacer scroll.

También puedes habilitar movimiento vertical en este módulo para ajustar la velocidad a la que se desplaza (más rápido o más lento) sin afectar los elementos alrededor.

El efecto de activación de movimiento permite elegir cuándo se activa el efecto de scroll: cuando la parte superior, media o inferior del elemento está en vista.

---

Guardar tu diseño

Cuando termines de estilizar y configurar el módulo, haz clic en la flecha verde en la esquina inferior derecha del módulo para guardar tu diseño. Si cierras el módulo sin guardar, se perderán los cambios.

---

Guardar el diseño de la página

Para guardar el diseño de la página, puedes usar CMD + S en Mac o CTRL + S en PC. También puedes usar la barra de herramientas inferior de Divi: haz clic en el ícono púrpura circular con tres puntos para expandirla y luego haz clic en el botón verde Guardar en la esquina inferior derecha.

---

Salir del Visual Builder

Una vez guardados todos los cambios, haz clic en Salir del Visual Builder en la barra de administración superior para salir del constructor visual.

Continuar Aprendiendo