• Posición de las etiquetas de campo – Elige cómo quieres que se posicionen los campos: en línea (uno al lado del otro en una misma línea) o apilados (verticalmente uno sobre otro).

• Fuente de los campos – Escoge la fuente que quieres para el texto de los campos. La fuente predeterminada se selecciona automáticamente; sin embargo, puedes elegir una fuente diferente o subir una fuente personalizada haciendo clic en el menú desplegable.

• Grosor de la fuente de los campos – Selecciona el grosor del texto de la fuente del campo.

• Estilo de fuente de los campos – Elige el estilo del texto de los campos:

  • Cursiva

  • En mayúsculas

  • Versalitas

  • Subrayado

  • Tachado

• Alineación del texto de los campos – Elige la alineación del texto específicamente para el texto de los campos:

  • Izquierda

  • Centro

  • Derecha

  • Justificado

• Color del texto de los campos – Elige un color específico para el texto de los campos. Selecciona desde la paleta de colores de tu sitio o haz clic en el icono cuentagotas para elegir un color nuevo.

• Tamaño del texto de los campos – Elige el tamaño de la fuente del texto de los campos arrastrando el control deslizante o escribiendo un valor numérico.

• Espaciado entre letras de los campos – Elige el espaciado entre letras del texto de los campos arrastrando el control deslizante 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á.

• Altura de línea de los campos – Elige la altura de línea del texto de los campos arrastrando el control deslizante o escribiendo un valor numérico. La altura de línea es la cantidad de espacio entre cada línea de texto. Mientras mayor sea el número, más espacio habrá.

• Sombra del texto de los campos – Añade una sombra al texto de los campos. Una vez seleccionado un estilo, puedes configurar la dirección de la sombra (horizontal y vertical), la intensidad del desenfoque de la sombra y el color de la sombra.

• Alineación del texto – Elige la alineación del texto:

  • Izquierda

  • Centro

  • Derecha

  • Justificado

• Sombra del texto – Aplica una sombra a todo el texto dentro de este módulo. Cuando se selecciona un tipo de sombra, se aplicará a todo el contenido de texto del módulo.

• Color de fondo de los campos – Elige un color de fondo para los campos. Selecciona desde la paleta de colores de tu sitio o usa el cuentagotas para elegir un color nuevo.

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

• Color de fondo al enfocar campos – Elige un color de fondo para los campos cuando están enfocados. Por ejemplo, el color puede cambiar cuando un visitante hace clic en ese campo y empieza a escribir. Selecciona desde la paleta de colores o usa el cuentagotas para un color nuevo.

• Color del texto al enfocar campos – Elige el color del texto cuando el campo está enfocado. Selecciona desde la paleta de colores o usa el cuentagotas para un color nuevo.

• Margen de los campos – Los márgenes agregan espacio alrededor del elemento. Si quieres añadir espacio alrededor de los campos, hazlo aquí escribiendo un valor numérico o usando las flechas para aumentar o disminuir el margen.

• Relleno de los campos – El relleno añade espacio dentro del elemento. Si quieres añadir espacio dentro de los campos, hazlo aquí escribiendo un valor numérico o usando las flechas para aumentar o disminuir el relleno.

• Fuente de los campos – Elige la fuente que deseas para el texto. La fuente predeterminada se selecciona automáticamente; sin embargo, puedes elegir otra fuente o subir una personalizada desde el menú desplegable.

• Grosor de la fuente de los campos – Selecciona el grosor de la fuente de los campos.

• Estilo de fuente de los campos – Elige el estilo del texto de los campos:

  • Cursiva

  • En mayúsculas

  • Versalitas

  • Subrayado

  • Tachado

• Alineación del texto de los campos – Elige la alineación del texto específicamente para el campo:

  • Izquierda

  • Centro

  • Derecha

  • Justificado

• Tamaño del texto de los campos – Elige el tamaño de la fuente del texto de los campos arrastrando el control deslizante o escribiendo un valor numérico.

• Espaciado entre letras de los campos – Elige el espaciado entre letras del texto arrastrando el control deslizante o escribiendo un valor numérico.

• Altura de línea de los campos – Elige la altura de línea del texto arrastrando el control deslizante o escribiendo un valor numérico.

• Sombra del texto de los campos – Añade una sombra al texto de los campos. Una vez seleccionado un estilo, puedes configurar dirección, intensidad y color.

• Esquinas redondeadas de los campos – Si quieres redondear las esquinas de los campos, escribe un valor numérico. Mientras mayor sea el número, más redondeadas estarán las esquinas. Los valores están vinculados automáticamente (lo indica el ícono de cadena azul); si quieres valores diferentes para cada esquina, haz clic en la cadena para desvincularlos. Si están vinculados, cambiar un valor actualizará todos.

• Estilos del borde de los campos – Añade un borde a los campos. Puedes aplicarlo en todos los lados o en lados específicos (arriba, derecha, abajo, izquierda).

• Ancho del borde de los campos – Establece el grosor del borde. Para un borde más grueso, aumenta el número. El ancho mínimo para que se muestre es 1px.

• Color del borde de los campos – Escoge el color del borde. Puedes seleccionar un color de la paleta de colores de tu sitio o usar el cuentagotas para uno nuevo.

• Estilo del borde de los campos – Selecciona el estilo de borde: sólido, punteado, rayado, doble, ranura, relieve, inseto, sobresaliente o ninguno.

• Esquinas redondeadas del campo enfocado – Redondea las esquinas del campo cuando está enfocado, con la misma lógica que las esquinas de los campos normales.

• Estilos del borde del campo enfocado – Añade un borde cuando el campo está enfocado, igual que con los campos normales.

• Ancho del borde del campo enfocado – Define el grosor del borde para el campo enfocado.

• Color del borde del campo enfocado – Elige el color del borde para el campo enfocado.

• Estilo del borde del campo enfocado – Selecciona el estilo del borde para el campo enfocado.

• Sombra de caja de los campos – Elige el estilo de sombra que quieres aplicar a los campos. Por defecto, no se aplica sombra.

• Color de fondo de los menús desplegables – Elige un color de fondo para el menú. Selecciona desde la paleta de colores o usa el cuentagotas para un color nuevo.

• Color del texto de los menús desplegables – Elige el color del texto del menú. Selecciona desde la paleta de colores o usa el cuentagotas para un color nuevo.

• Color de fondo al enfocar menús desplegables – Elige un color de fondo cuando el menú está enfocado.

• Color del texto al enfocar menús desplegables – Elige el color del texto cuando está enfocado.

• Margen de los menús desplegables – Añade espacio alrededor del menú escribiendo un valor numérico o usando las flechas.

• Fuente de los menús desplegables – Elige la fuente para el texto del menú. Puedes elegir otra fuente o subir una personalizada desde el menú desplegable.

• Grosor de la fuente de los menús desplegables – Selecciona el grosor del texto.

• Estilo de fuente de los menús desplegables – Elige el estilo del texto:

  • Cursiva

  • Mayúsculas

  • Versalitas

  • Subrayado

  • Tachado

• Tamaño del texto de los menús desplegables – Define el tamaño de la fuente arrastrando el control deslizante o escribiendo un valor numérico.

• Espaciado entre letras de los menús desplegables – Define el espacio entre letras.

• Sombra del texto de los menús desplegables – Añade sombra al texto del menú. Configura dirección, intensidad y color.

• Usar bordes en foco – Activa esta opción para que aparezcan más opciones para personalizar los bordes cuando el menú está enfocado.

• Estilos del borde de los menús desplegables – Añade bordes en todos o algunos lados.

• Ancho del borde de los menús desplegables – Define el grosor del borde (mínimo 1px).

• Color del borde de los menús desplegables – Elige el color del borde.

• Estilo del borde de los menús desplegables – Selecciona el estilo del borde.

• Esquinas redondeadas – Redondea las esquinas del menú desplegable. Mismo funcionamiento que en campos.

• Estilos del borde – Añade bordes en todos o algunos lados para el menú.

• Ancho del borde – Define grosor del borde.

• Color del borde – Elige color del borde.

• Estilo del borde – Elige estilo: sólido, punteado, rayado, doble, etc.

• Sombra de caja – Elige el estilo de sombra para el menú desplegable.

Botones

• Color de fondo del botón – Elige el color de fondo del botón.

• Color del texto del botón – Elige el color del texto dentro del botón.

• Margen del botón – Añade espacio alrededor del botón.

• Relleno del botón – Añade espacio dentro del botón.

• Fuente del botón – Elige la fuente para el texto del botón.

• Grosor de la fuente del botón – Define grosor del texto.

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

• Tamaño del texto del botón – Define tamaño de fuente.

• Espaciado entre letras del botón – Define espacio entre letras.

• Sombra del texto del botón – Añade sombra al texto.

• Esquinas redondeadas del botón – Redondea las esquinas del botón.

• Estilos del borde del botón – Añade borde.

• Ancho del borde del botón – Define grosor del borde.

• Color del borde del botón – Escoge color del borde.

• Estilo del borde del botón – Selecciona estilo de borde.

• Sombra de caja del botón – Añade sombra al botón.

• Color de fondo de la barra de desplazamiento – Define color del fondo de la barra.

• Color del pulgar de la barra de desplazamiento – Define color del “pulgar” (la parte que se arrastra).

• Ancho de la barra de desplazamiento – Define grosor de la barra.

• Radio del borde de la barra de desplazamiento – Redondea las esquinas de la barra.

• Color del pulgar al enfocar – Cambia el color cuando el pulgar está enfocado.

• Sombra del pulgar – Añade sombra al pulgar.

Separadores

• Color del separador – Define color de la línea.

• Ancho del separador – Define grosor de la línea.

• Estilo del separador – Define el estilo de la línea: sólido, punteado, rayado, doble, etc.

• Margen del separador – Añade espacio alrededor del separador.

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 de Ancho o Ancho Máximo, la alineación del módulo puede configurarse usando tres opciones:

• Alineado a la Izquierda

• Alineado al Centro

• 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 el valor máximo de altura que el módulo puede tener. Para más información, consulta la documentación oficial.

Espaciado

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

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 ícono de cadena entre los valores que quieras 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
Añade un borde al módulo. Puedes agregar un borde completo o un borde solo a un lado del módulo. Ajusta el ancho con el control deslizante y selecciona un color. Elige un estilo de borde haciendo clic en el desplegable.

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 medio); sin embargo, si deseas valores diferentes para cada esquina, haz clic en la cadena azul para desvincularlos. Si 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 a lados individuales (arriba, derecha, abajo y izquierda).

Ancho del Borde – Establece el ancho del borde. Para un borde más grueso, incrementa el número. El ancho del borde debe ser al menos 1 px para mostrarse.

Color del Borde – Elige el color del borde. Puedes seleccionar un color del paleta predeterminada de colores de tu sitio o hacer clic en el ícono cuentagotas para elegir un color nuevo.

Estilo de Borde – Selecciona el estilo de borde que desees: sólido, punteado, discontinuo, doble, ranurado, en relieve, inset, outset o ninguno.

---

Sombra de Caja

Agrega una sombra al módulo completo. Una vez que selecciones un estilo de sombra, puedes 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 fuerza del desenfoque de la sombra. A mayor valor, mayor será el desenfoque y la sombra será más ancha y clara.

• Fuerza de Expansión de la Sombra – Define la fuerza de expansión del desenfoque. Incrementar este valor aumentará la densidad de la sombra. Una densidad mayor resulta en una sombra más intensa.

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

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

---

Filtros
Ajusta los filtros del módulo:

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

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

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

• Contraste – Define qué tan marcadas serán las áreas claras y oscuras.

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

• Sepia – Da 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.

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

---

Transformar

• Escalar

• Trasladar

• Rotar

• Sesgar

• Puntos de origen

Usa 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 ícono de cadena en la parte inferior derecha.

---

Animación
Aquí puedes aplicar animación al módulo. Una vez que eliges un estilo, puedes ajustar las siguientes opciones:

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

• Retraso de la Animación – Define cuánto tiempo esperar antes de que la animación comience a ejecutarse. Puede empezar más tarde, inmediatamente o parcialmente.

• 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 (easing) para suavizar la animación, en lugar de una velocidad lineal.

• Repetición de la Animación – Por defecto, la animación solo se reproduce una vez. Para repetirla continuamente, elige la opción “Loop”.

---

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 añadir clases e IDs CSS personalizadas, que pueden usarse para estilos avanzados o aplicar código CSS usando la clase del módulo.

ID y Clases CSS
Asigna un ID o clase CSS específica a este módulo. Esto es útil para aplicar CSS personalizado usando la hoja de estilos de tu tema hijo.

---

CSS Personalizado

• CSS Libre – Escribe CSS libre usando el selector keyword para dirigir el módulo. Ejemplo: selector h1 {color: rojo;}

• Elementos del Módulo – También puedes aplicar CSS personalizado pegándolo en esta pestaña. Al hacer clic en Elementos del Módulo, verás secciones individuales para agregar 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. Esto ayuda a que los motores de búsqueda obtengan más información sobre tu sitio, mejorando la precisión en resultados.

Condiciones

Las Condiciones de Visualización te permiten elegir cuándo mostrar este módulo según condiciones, como si un usuario ya compró antes, qué navegador o sistema operativo usa, entre otros.

Puedes agregar una o múltiples condiciones.

---

Visibilidad

Desactivar en – Define la visibilidad del módulo. Puedes desactivarlo (ocultarlo) en teléfonos, tabletas o escritorios marcando la casilla correspondiente.

Desbordamiento Horizontal – Define qué mostrar cuando el contenido excede los bordes izquierdo o derecho del elemento. Puede ser:

• Visible – Se mostrará el contenido si excede la altura.

• Scroll – Aparecerá una barra de desplazamiento vertical para recorrer el contenido.

• Oculto – La parte que exceda se ocultará.

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

Desbordamiento Vertical – Define qué mostrar cuando el contenido excede los bordes superior o inferior del elemento. Opciones iguales a las del desbordamiento horizontal.

---

Transiciones

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

• 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 (en milisegundos) de la animación hover.

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

---

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 son relativos a sí mismo. No afecta la posición de otros elementos; el espacio reservado es el mismo que si la posición fuera estática.

• Absoluta – El módulo se remueve del flujo normal, sin crear espacio en el diseño. Se posiciona relativo al ancestro posicionado más cercano o al contenedor inicial. Las opciones de ubicación determinan la posición final.

• Fija – El módulo se remueve del flujo normal, sin crear espacio. Se posiciona con relación a la ventana del navegador, ideal para módulos adhesivos (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 del módulo en la página. Módulos con índice Z más alto se superponen a los de índice más bajo.

---

Efectos de Desplazamiento

Define el comportamiento del módulo al desplazarse por la página. Puedes hacer que el módulo quede fijo arriba, abajo o ambos, y decidir si debe transformarse mientras el usuario hace scroll.

También puedes activar movimiento vertical, que ajusta la velocidad del desplazamiento del módulo sin afectar elementos cercanos.

La función Disparador de Movimiento te permite elegir cuándo activar el efecto: cuando la parte superior, media o inferior del elemento esté visible.

Guardar y Salir
Una vez termines de diseñar y configurar el módulo contador, haz clic en la flecha verde en la parte inferior derecha para guardar tu diseño. Si cierras el módulo sin guardar, se perderá tu trabajo.

---

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 inferior de Divi, haciendo clic en el ícono circular morado con tres puntos para expandir la barra y luego clic en el botón verde Guardar en la parte inferior derecha.

---

Salir del Constructor Visual

Una vez guardados todos los cambios, haz clic en “Salir del Constructor Visual” en la barra superior para salir del constructor.

---

Más Recursos para el Módulo Divi Woo Agregar al Carrito

• Cómo Instalar WooCommerce y Configurar tu Tienda

• Cómo Configurar Ajustes de WooCommerce

• 5 Ideas de Personalización eCommerce para WooCommerce

• Optimización de Rendimiento WooCommerce: 14 Consejos y Mejores Prácticas

• Guía Simple para las Páginas Predeterminadas de WooCommerce

• Actualizar WooCommerce: Mejores Prácticas para Seguir Siempre

---

Continúa Aprendiendo

• Aprende lo Básico de Divi

• Consulta la Documentación de Divi

• Documentación de Módulos WooCommerce de Divi