Botón

Tamaño del Texto del Botón - Elige el tamaño de la fuente del texto del botón arrastrando el deslizador de rango o escribiendo un valor numérico.

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 del cuentagotas para encontrar un color nuevo.

Fondo del Botón - Estiliza el fondo del botón aquí. Puedes agregar un color sólido, un degradado o una imagen. Elige un color desde la paleta de colores de tu sitio o haciendo clic en el icono del cuentagotas para elegir un color nuevo. Para agregar un fondo degradado, selecciona la segunda pestaña de iconos, el icono de degradado, y luego haz clic en Agregar Degradado de Fondo, lo que mostrará las opciones para estilizar un fondo degradado. Para agregar un fondo con imagen, selecciona la segunda pestaña de iconos, el icono de imagen, y luego haz clic en Agregar Imagen de Fondo, lo que mostrará las opciones para estilizar un fondo con imagen.

Ancho del Borde del Botón - Determina el ancho (grosor) del borde del botón arrastrando el deslizador o escribiendo un valor numérico.

Color del Borde del Botón - Aquí puedes elegir 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 del cuentagotas para encontrar un color nuevo.

Radio del Borde del Botón - El radio del borde del botón determina qué tan redondeadas son las esquinas del botón. Mientras mayor sea el número, más redondeadas serán las esquinas.

Espaciado entre Letras del Botón - Elige el espaciado entre letras del texto del botón arrastrando el deslizador o escribiendo un valor numérico. El espaciado entre letras es el espacio entre cada letra. Mientras mayor sea el número, más espacio habrá.

Fuente del Botón - Elige la fuente que quieres para el texto del botón. La fuente predeterminada está seleccionada automáticamente; sin embargo, puedes elegir una fuente diferente o subir una fuente personalizada haciendo clic en la caja desplegable.

Peso de la Fuente del Botón - Haz clic en el desplegable para seleccionar el grosor (negrita) de la fuente del texto del botón.

Estilo de Fuente del Botón - Elige el estilo de la fuente del texto del botón:

• Cursiva

• Mayúscula inicial

• Versales pequeñas

• Subrayado

• Tachado

Mostrar Icono en el Botón - Activa esta opción en sí o no para mostrar u ocultar el icono del botón.

Icono del Botón - El icono predeterminado es >. Sin embargo, aquí puedes elegir un icono único para el botón.

Color del Icono del Botón - Selecciona el color del icono del botón.

Posición del Icono del Botón - Elige la ubicación del icono a la derecha o a la izquierda del botón.

Mostrar Solo Icono al Pasar el Mouse Sobre el Botón - Activa esta opción en no si quieres que el icono del botón sea visible en todo momento. Por defecto, esta opción está activada en sí, lo que significa que el icono solo se muestra al pasar el mouse.

Alineación del Botón - Elige cómo se alinea el botón: izquierda, centrado o derecha.

Sombra del Texto del Botón - Agrega una sombra al texto del botón. Una vez seleccionado un estilo, puedes configurar la dirección de la sombra (horizontal y vertical), la intensidad del desenfoque y el color de la sombra.

Margen del Botón - Agrega márgenes al botón escribiendo valores numéricos. Los márgenes añaden espacio fuera del elemento botón. Para bloquear proporciones y mantener valores iguales, haz clic en el icono de cadena entre los valores que quieras mantener idénticos (ej. arriba y abajo).

Relleno del Botón - Agrega relleno al botón escribiendo valores numéricos. El relleno añade espacio dentro del elemento botón. Para bloquear proporciones y mantener valores iguales, haz clic en el icono de cadena entre los valores que quieras mantener idénticos (ej. arriba y abajo).

Sombra de Caja del Botón - Añade una sombra al botón. Una vez seleccionado el estilo de sombra, puedes personalizar la posición de la sombra (horizontal y vertical), la intensidad del desenfoque y la intensidad de la expansión ajustando el deslizador o ingresando valores numéricos. Selecciona el color de la sombra desde la paleta de colores de tu sitio o haz clic en el cuentagotas para elegir un color nuevo. Elige la posición de la sombra (dentro o fuera del contenedor) mediante el desplegable.

Tamaño

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

• 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 ser:

  • Alineado a la izquierda

  • Alineado al centro

  • Alineado a la derecha

• Altura Mínima - Define el valor mínimo de altura del módulo. Consulta la documentación oficial para más detalles.

• Altura - Define la altura del módulo. Consulta la documentación oficial para más detalles.

• Altura Máxima - Define la altura máxima que el módulo puede tener. Consulta la documentación oficial para más detalles.

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 valores iguales, haz clic en el icono de cadena entre los valores que quieras mantener idénticos (ej. 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. Mientras mayor sea el número, más redondeadas serán las esquinas. Los valores de las esquinas están vinculados automáticamente (como se indica con la cadena azul resaltada); sin embargo, si quieres valores distintos para cada esquina, haz clic en la cadena azul para desvincularlos. Si están vinculados, todos los valores serán iguales 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 (arriba, derecha, abajo e izquierda).

• Ancho del Borde - Define el ancho del borde. Para un borde más grueso, aumenta el número. El ancho 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 o hacer clic en el cuentagotas para elegir un color nuevo.

• Estilo del Borde – Selecciona el estilo del borde: sólido, discontinuo, punteado, doble, ranura, relieve, incrustado, sobresaliente o ninguno.

Sombra de Caja

• Posición Horizontal de la Sombra

• Posición Vertical de la Sombra

• Intensidad del Desenfoque

• Intensidad de la Expansión

• Color de la Sombra

• Posición de la Sombra (dentro o fuera del módulo)

Filtros

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

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

• Sepia - Define una apariencia más cálida, amarillenta/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.

Modo de Fusión se refiere a cómo el módulo se mezcla con las capas debajo. Por defecto está seleccionado “normal”.

Transformar

• Escalar

• Traducir (mover)

• Rotar

• Sesgar

• Puntos de origen

Navega por cada opción y configúrala con valores numéricos o arrastrando/expandiento cajas o círculos. Puedes bloquear los valores para que siempre sean idénticos haciendo clic en el icono de cadena.

Animación

• Duración de la Animación

• Retraso de la Animación

• Opacidad inicial

• Curva de velocidad (easing)

• Repetición de la Animación (por defecto solo se reproduce una vez; elige “bucle” para que se repita continuamente)

Pestaña Avanzada

• Puedes aplicar CSS personalizado al módulo o asignar clases e IDs CSS para usar estilos más avanzados o código CSS personalizado.

ID y Clases CSS

CSS Personalizado

• CSS libre: escribe CSS libre usando el selector keyword para este módulo (Ejemplo: selector h1 {color: rojo;})

• Elementos del módulo: también puedes aplicar CSS personalizado en secciones específicas del módulo.

Atributos

Condiciones

Visibilidad

• Desactivar en - Define la visibilidad del módulo. Puedes ocultarlo en teléfono, tableta o escritorio marcando la casilla correspondiente.

• Desbordamiento horizontal - Define qué sucede si el contenido se desborda por los lados izquierdo o derecho:

  • Visible

  • Desplazamiento (barra de scroll)

  • Oculto

  • Automático (el navegador decide)

• Desbordamiento vertical - Define qué sucede si el contenido se desborda por arriba o abajo (con las mismas opciones que horizontal).

Transiciones

Posición

• Relativa (por defecto)

• Absoluta

• Fija (puede usarse para módulos “pegajosos”)

También define desplazamientos vertical y horizontal, y el índice Z para controlar la superposición.

Efectos de Desplazamiento

Cómo Estilizar Tablas de Precios Individualmente

• Abre las configuraciones del módulo.

• Haz clic en el icono de engranaje junto a la tabla que quieres personalizar.

• Encontrarás opciones de contenido, diseño y avanzadas que solo aplican a esa tabla.

Guardar Tu Diseño

Para guardar el diseño de la página, presiona CMD + S en Mac o CTRL + S en PC, o usa la barra de herramientas de Divi abajo, haciendo clic en el icono morado de tres puntos para expandir y luego en el botón verde Guardar.

Salir del Constructor Visual

Continuar Aprendiendo

• Cómo agregar botones simples de pago con Stripe a tus tablas de precios en Divi

• Cómo crear tablas de precios horizontales con Divi