Posición de la Etiqueta del Campo - Elige cómo quieres que se posicione la etiqueta del campo: en línea (uno al lado del otro en una línea) o apiladas (verticalmente una encima de la otra).

Fuente de la Etiqueta del Campo - Elige la fuente que quieres para el texto del campo. La fuente predeterminada se selecciona automáticamente; sin embargo, puedes elegir una fuente diferente o subir una fuente personalizada haciendo clic en el cuadro desplegable.

Grosor de Fuente de la Etiqueta del Campo - Selecciona el grosor del texto de la fuente del campo.

Estilo de Fuente de la Etiqueta del Campo - Elige el estilo de la fuente del texto del campo:

• Cursiva

• En mayúsculas

• Mayúsculas pequeñas

• Subrayado

• Tachado

Alineación del Texto de la Etiqueta del Campo - Elige la alineación del texto específicamente para el texto del campo:

• Izquierda

• Centro

• Derecha

• Justificado

Color del Texto de la Etiqueta del Campo - Elige un color específico para el texto del campo. Selecciona del paleta de colores de tu sitio o haz clic en el icono cuentagotas para encontrar un nuevo color.

Tamaño del Texto de la Etiqueta del Campo - Elige el tamaño de fuente del texto del campo arrastrando el control deslizante o escribiendo un valor numérico.

Espaciado entre Letras de la Etiqueta del Campo - Elige el espaciado entre letras del texto del campo arrastrando el control deslizante o escribiendo un valor numérico. El espaciado entre letras es el espacio entre cada letra. Cuanto mayor sea el número, más espacio habrá.

Altura de Línea de la Etiqueta del Campo - Elige la altura de línea del texto del campo arrastrando el control deslizante o escribiendo un valor numérico. La altura de línea es el espacio entre cada línea de texto. Cuanto mayor sea el número, más espacio habrá.

Sombra de Texto de la Etiqueta del Campo - Añade una sombra al texto del campo. 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.

Campos
Aquí puedes diseñar la apariencia y sensación de los campos.

Color del Marcador de Posición (Placeholder) - Elige un color para el texto del marcador de posición desde la paleta de colores o usa el icono cuentagotas para encontrar un nuevo color.

Color de Fondo de los Campos - Elige un color de fondo para los campos. Selecciona de la paleta de colores de tu sitio o haz clic en el cuentagotas para encontrar un nuevo color.

Color del Texto de los Campos - Elige el color del texto dentro de los campos. Selecciona de la paleta de colores de tu sitio o haz clic en el cuentagotas para encontrar un nuevo color.

Color de Fondo de Campos en Foco - Elige un color de fondo para los campos en foco. Por ejemplo, podrías hacer que el color de fondo cambie cuando un visitante haga clic en ese campo y empiece a escribir. Selecciona de la paleta de colores de tu sitio o usa el cuentagotas para encontrar un nuevo color.

Color del Texto de Campos en Foco - Elige el color del texto cuando el campo está en foco. Selecciona de la paleta de colores o usa el cuentagotas.

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 quieres usar para el texto. La fuente predeterminada se selecciona automáticamente; sin embargo, puedes elegir otra fuente o subir una fuente personalizada usando el cuadro desplegable.

Grosor de Fuente de los Campos - Selecciona el grosor de la fuente del campo.

Estilo de Fuente de los Campos - Elige el estilo de la fuente del campo:

• Cursiva

• En mayúsculas

• Mayúsculas pequeñas

• Subrayado

• Tachado

Alineación del Texto de los Campos - Elige la alineación del texto específicamente para el texto del campo:

• Izquierda

• Centro

• Derecha

• Justificado

Tamaño del Texto de los Campos - Elige el tamaño de la fuente del texto del campo arrastrando el control deslizante o escribiendo un valor numérico.

Espaciado entre Letras de los Campos - Elige el espaciado entre letras del texto del campo 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 del campo arrastrando el control deslizante o escribiendo un valor numérico.

Sombra de Texto de los Campos - Añade una sombra al texto del campo. Una vez seleccionado un estilo, puedes configurar la dirección de la sombra, la intensidad del desenfoque y el color.

Esquinas Redondeadas de los Campos - Si quieres redondear las esquinas de los campos, escribe un valor numérico. Cuanto mayor sea el número, más redondeadas estarán las esquinas. Los valores de las esquinas están vinculados automáticamente (como lo muestra el icono de cadena azul resaltado en el medio); si quieres valores diferentes para cada esquina, haz clic en la cadena azul para desvincularlos. Si están vinculados, todos tendrán el mismo valor y se actualizarán automáticamente si cambias uno.

Estilos de Borde de los Campos - Añade un borde a los campos. Puedes añadir borde a todos los lados o a lados individuales (arriba, derecha, abajo y izquierda).

Ancho del Borde de los Campos - Establece el ancho del borde. Para un borde más grueso, aumenta el número. El borde debe tener al menos 1px para mostrarse.

Color del Borde de los Campos - Aquí puedes elegir el color del borde. Selecciona un color de la paleta de colores predeterminada de tu sitio o usa el cuentagotas para un nuevo color.

Estilo de Borde de los Campos - Selecciona el estilo de borde: sólido, discontinuo, punteado, doble, ranurado, en relieve, empotrado, sobresaliente o ninguno.

Usar Bordes de Foco - Activa esta opción para mostrar opciones de estilo para bordes en foco.

Esquinas Redondeadas de Campos en Foco - Si quieres redondear las esquinas de los campos en foco, escribe un valor numérico. Funciona igual que para las esquinas normales.

Estilos de Borde de Campos en Foco - Añade un borde a los campos en foco, igual que para los bordes normales.

Ancho del Borde de Campos en Foco - Establece el ancho del borde para campos en foco. Debe ser al menos 1px.

Color del Borde de Campos en Foco - Elige el color del borde para campos en foco.

Estilo de Borde de Campos en Foco - Selecciona el estilo de borde para campos en foco.

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 del Aviso del Formulario - Elige el color de fondo del aviso desde la paleta o usa el cuentagotas.

Color del Texto del Aviso del Formulario - Elige el color del texto del aviso.

Margen del Aviso del Formulario - Los márgenes añaden espacio fuera de un elemento. Para añadir margen, escribe un valor numérico. Los valores están vinculados (igualados); haz clic en el icono de cadena para desvincular.

Relleno del Aviso del Formulario - El relleno añade espacio dentro del elemento. Igual que los márgenes, se puede vincular o desvincular.

Fuente del Aviso del Formulario - Elige la fuente para el texto. Se selecciona una predeterminada automáticamente, pero puedes cambiarla o subir una personalizada.

Grosor de Fuente del Aviso del Formulario - Selecciona el grosor de la fuente.

Estilo de Fuente del Aviso del Formulario - Elige el estilo de fuente:

• Cursiva

• En mayúsculas

• Mayúsculas pequeñas

• Subrayado

• Tachado

Alineación del Texto del Aviso del Formulario - Elige la alineación:

• Izquierda

• Centro

• Derecha

• Justificado

Tamaño del Texto del Aviso del Formulario - Ajusta tamaño de fuente.

Espaciado entre Letras del Aviso del Formulario - Ajusta espaciado entre letras.

Altura de Línea del Aviso del Formulario - Ajusta altura de línea.

Sombra de Texto del Aviso del Formulario - Añade sombra al texto, con opciones de dirección, fuerza y color.

Esquinas Redondeadas del Aviso del Formulario - Escribe un valor para redondear esquinas; funciona igual que en campos.

Estilos de Borde del Aviso del Formulario - Añade bordes a todos o lados individuales.

Ancho del Borde del Aviso del Formulario - Ajusta el ancho del borde (mínimo 1px).

Color del Borde del Aviso del Formulario - Elige color para el borde.

Estilo de Borde del Aviso del Formulario - Selecciona estilo de borde: sólido, discontinuo, punteado, doble, ranurado, en relieve, empotrado, sobresaliente o ninguno.

Sombra de Caja del Aviso del Formulario - Elige el estilo de sombra para el contenedor del aviso. Por defecto no tiene sombra.

Tamaño

Ancho Máximo - Define el ancho máximo del módulo.

Alineación del Módulo - Si estableces un ancho o ancho máximo, puedes alinear el módulo con estas opciones:

• Alineado a la izquierda

• Alineado al centro

• Alineado a la derecha

Altura Mínima - Define el valor mínimo de altura del módulo.

Altura - Define la altura del módulo.

Altura Máxima - Define la altura máxima que puede tener el módulo.

Espaciado

El margen añade espacio fuera del módulo y el relleno añade espacio dentro del módulo. Para mantener proporciones iguales, haz clic en el icono de cadena entre los valores.

Los valores predeterminados para márgenes y relleno son 0.

Borde

Esquinas Redondeadas – Escribe un valor numérico para redondear las esquinas. Funciona igual que en campos.

Estilos de Borde – Añade borde a todos o lados individuales.

Ancho del Borde – Ajusta el ancho del borde (mínimo 1px).

Color del Borde – Elige el color del borde.

Estilo del Borde – Selecciona el estilo: sólido, discontinuo, punteado, doble, ranurado, en relieve, empotrado, sobresaliente o ninguno.

Sombra de Caja

• Posición horizontal de la sombra

• Posición vertical de la sombra

• Intensidad del desenfoque

• Color de la sombra
  

Filtros
Ajusta los filtros del módulo:

• 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 brillantes deben ser los colores.

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

• Invertir – Invierte el tono, la saturación y el 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 que están debajo. Por defecto, estará seleccionado normal.

---

Transformar

• Escalar

• Trasladar

• Rotar

• Sesgar

• Puntos de origen

Navega entre las opciones con la tecla Tab. Configura cada opción ingresando valores numéricos o arrastrando y ampliando la caja 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

Aquí puedes aplicar animación al módulo. Una vez que elijas 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 desde que se aplica la animación antes de que empiece. La animación puede iniciar más tarde, inmediatamente desde el inicio o en medio del proceso.

• 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 suavizado de la animación. Usar aceleración y desaceleración crea un efecto más suave que una curva lineal.

• Repetición de la animación – Por defecto, las animaciones solo se reproducen una vez. Si quieres que se repita continuamente, selecciona la opción Bucle.

---

---

Pestaña Avanzada

Dentro de la pestaña Avanzada, encontrarás opciones que diseñadores web con más experiencia 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, que se pueden usar para personalizar estilos con propiedades CSS más avanzadas o para aplicar código CSS usando la clase del módulo.

---

---

ID y Clases CSS
Asigna un ID CSS o una clase 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 apuntar a este 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 donde puedes agregar propiedades CSS personalizadas.

---

Configuración de CSS personalizado del módulo Divi Woo Checkout Billing

---

Condiciones
Las Condiciones de Visualización te permiten elegir cuándo mostrar este módulo basándote en un conjunto de condiciones, como cuando un usuario visita la página, si ya ha comprado antes en tu empresa, qué navegador usa, qué sistema operativo utiliza, y más.

Puedes agregar una o múltiples condiciones.

---

Visibilidad

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

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

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

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

  • Oculto – Si el contenido desborda, la parte que sobrepase quedará oculta.

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

• Desbordamiento Vertical – Define qué se muestra cuando el contenido desborda los bordes superior e inferior. Las opciones son iguales que para el desbordamiento horizontal.

---

---

Transiciones
Controla la duración, el retraso y la curva de velocidad de la animación al pasar el cursor.

• Duración de la transición – Define la duración (en milisegundos) de la transició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

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

  • Relativa (valor predeterminado) – El módulo se posiciona según el flujo normal del documento, luego los valores de desplazamiento vertical y horizontal son relativos a sí mismo. Este desplazamiento no afecta la posición de otros elementos; el espacio que ocupa es igual que si estuviera estático.

  • Absoluta – El módulo se elimina del flujo normal y no crea espacio en el diseño. Se posiciona respecto a su antecesor posicionado más cercano o al bloque contenedor inicial. Las opciones de ubicación determinan la posición final.

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

• 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. Los módulos con un índice z más alto se superponen a los de índice más bajo.

---

---

Efectos de desplazamiento
Esta sección define el comportamiento del módulo cuando el usuario hace scroll en la página. Puedes hacer que el módulo se quede fijo en la parte superior, inferior o ambos lados, y decidir si debe transformarse mientras el usuario desplaza la página.

También puedes habilitar movimiento vertical en este módulo, lo que te permite ajustar la velocidad de desplazamiento del elemento sin afectar a los elementos alrededor.

La función de activación por movimiento te permite elegir cuándo se activa el efecto de desplazamiento: cuando la parte superior, media o inferior del elemento está visible.

---

---

Guardar y salir

Cuando termines de diseñar y configurar el módulo contador numérico, haz clic en la flecha verde en la parte inferior derecha para guardar tu diseño. Si cierras el módulo sin guardar, perderás tu trabajo.

---

Guardar el diseño de la página

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

---

Salir del constructor visual

Una vez que todos tus cambios estén guardados, haz clic en Salir del constructor visual en la barra de administración superior para salir del constructor visual.

---

Más recursos para el módulo Divi Woo Checkout Billing

• Cómo instalar WooCommerce y configurar tu tienda

• Cómo configurar los ajustes de WooCommerce

• 5 ideas de personalización para WooCommerce

• Optimización del rendimiento de WooCommerce: 14 consejos y mejores prácticas

• Guía sencilla para las páginas predeterminadas de WooCommerce

• Actualización de WooCommerce: mejores prácticas para cada vez

---

Continuar aprendiendo

Mantente actualizado con nuestros últimos tutoriales de Divi Woo Checkout Billing revisando nuestra página de Woo Checkout Billing.