El Módulo de Envío en la Página de Pago de Divi Woo

El Módulo de Envío en la Página de Pago de Divi Woo

Cómo agregar, configurar y personalizar el módulo de envío de pago de Divi Woo.


Módulo de Envío en el Pago de Divi Woo

El Módulo de Envío en el Pago de Divi Woo se integra perfectamente con las capacidades de WooCommerce y captura la dirección de envío del cliente.

Agrega este módulo a la página de pago de Woo y personaliza el estilo; usa los controles y configuraciones intuitivas y fáciles de Divi como prefieras.

Divi Woo Checkout Shipping Module

Instalar el plugin WooCommerce

Antes de poder usar el módulo Divi Woo Productos Relacionados, necesitas tener WooCommerce instalado en tu sitio web.

Ve al Escritorio de WordPress → Plugins → Añadir Nuevo Plugin.

Usa el campo de búsqueda (esquina superior derecha) y busca WooCommerce.

Haz clic en el botón Instalar ahora.

Haz clic en el botón Activar.

Add Divi Woo Checkout Shipping module

Agregar el Módulo de Envío en el Pago de Divi Woo

Haz clic en el ícono verde + para insertar una Fila y selecciona la estructura de columnas deseada.

Haz clic en el ícono gris + dentro de la fila para abrir la Biblioteca de Módulos de Divi, que contiene todos los módulos incluidos con el tema Divi.

Haz clic en Módulos Woo para ver todos los módulos Divi Woo.

Haz clic en el módulo Envío en el Pago Woo para agregarlo a tu página.

Explicación de todas las configuraciones del Módulo de Envío en el Pago de Divi Woo

Una vez agregado, la ventana modal de Configuraciones del módulo aparecerá automáticamente. Aquí es donde se configuran el contenido y los estilos de diseño de este módulo.

Estas configuraciones están organizadas en tres grupos a través de las pestañas en la parte superior del módulo:

  • Contenido

  • Diseño

  • Avanzado

Divi Woo Checkout Shipping Module settings

Pestaña Contenido

Dentro de esta pestaña, encontrarás las opciones de contenido disponibles para este módulo.

Configuraciones de la pestaña Contenido del módulo de envío en el pago Divi Woo

Divi Woo Checkout Shipping module Content Tab settings

Fondo

En el grupo de opciones de Fondo, se pueden configurar las siguientes opciones:

  • Color de fondo

  • Degradado de fondo

  • Imagen de fondo

  • Video de fondo

  • Patrón de fondo

  • Máscara de fondo

Cómo agregar un color de fondo

Haz clic en la primera pestaña, el ícono del balde de pintura.

Haz clic en Añadir color de fondo y elige de la paleta de colores de tu sitio, o usa el ícono cuentagotas para encontrar un nuevo color.

Divi Woo Checkout Shipping module Background Color settings


Cómo agregar un degradado de fondo
Haz clic en la segunda pestaña, el ícono de degradado.

Haz clic en Añadir degradado de fondo.
Para cambiar los colores del degradado, haz clic en los puntos de degradado y selecciona un color de la paleta de colores de tu sitio o usa el cuentagotas para elegir un color nuevo. Los puntos de degradado permiten agregar más colores al degradado. Haz clic en cualquier parte del deslizador para agregar un nuevo punto.

Opciones de degradado de fondo

  • Tipo de degradado - Puedes cambiar el tipo de degradado haciendo clic en el menú desplegable y seleccionando el deseado.

  • Dirección del degradado - Puedes cambiar la dirección del degradado arrastrando el deslizador o escribiendo un valor numérico.

  • Repetir degradado - Activa esta opción para que el degradado se repita.

  • Unidad de degradado - Cambia cómo se calculan los puntos de parada del degradado. Selecciona el menú desplegable para cambiar la unidad.

  • Colocar degradado sobre la imagen de fondo - Si hay una imagen de fondo aplicada, puedes colocar el degradado encima activando esta opción.


Divi Woo Checkout Shipping module Background Gradient settings

Cómo agregar una imagen de fondo

Haz clic en la tercera pestaña, el ícono de imagen.

Haz clic en el ícono gris + para abrir la Biblioteca de Medios, donde puedes seleccionar una foto ya subida o subir una nueva.

Opciones de imagen de fondo

  • Usar efecto Parallax - Para aplicar un efecto parallax a la imagen (donde la imagen se desplaza más rápido que el contenido en primer plano, dando una ilusión 3D), activa esta opción. Por defecto está desactivada.

  • Tamaño de imagen de fondo - Elige el tamaño de la imagen de fondo desde el menú desplegable.

  • Posición de imagen de fondo - Elige la posición de la imagen desde el menú desplegable.

  • Repetición de imagen de fondo - Elige si y cómo se repite la imagen desde el menú desplegable.

  • Mezcla de imagen de fondo - Elige cómo la imagen se mezcla con otras capas dentro del módulo.

Divi Woo Checkout Shipping module Background Image settings

Cómo agregar un video de fondo
Haz clic en la cuarta pestaña, el ícono de video.

Haz clic en el ícono gris + para abrir la biblioteca de medios, donde puedes seleccionar un video ya subido o subir uno nuevo.

Opciones de video de fondo

  • Mp4 vs WebM - Se recomienda subir ambas versiones, mp4 y webm, porque no todos los navegadores soportan WebM. Subir ambos asegura que el video se reproducirá en todos los dispositivos y navegadores.

  • Ancho del video de fondo - Define el ancho del video escribiendo un valor numérico.

  • Alto del video de fondo - Define la altura del video escribiendo un valor numérico.

  • Pausar video cuando otro video se reproduzca - Si quieres que el video de fondo se pause cuando otro video esté en reproducción, activa esta opción. Por defecto, el video se pausa cuando no está en vista. Para que continúe, desactiva esta opción.

Divi Woo Checkout Shipping module Background Video settings

Cómo agregar un patrón de fondo
Haz clic en la quinta pestaña, el ícono de patrón.

Haz clic en Añadir patrón de fondo.

Elige el tipo de patrón que deseas desde el menú desplegable.

Opciones de patrón de fondo

  • Color del patrón - Selecciona el color del patrón desde la paleta de tu sitio o usa el cuentagotas para elegir un color nuevo.

  • Transformar patrón - Transforma el patrón horizontal o verticalmente, gíralo o inviértelo.

  • Tamaño del patrón - Selecciona el tamaño del patrón: tamaño real, cubrir, ajustar, estirar para llenar o tamaño personalizado. Si eliges personalizado, aparecerán opciones para ancho y alto del patrón. Usa el deslizador o escribe un valor numérico.

  • Origen de repetición del patrón - Selecciona el punto desde donde el patrón se repite.

  • Desplazamiento horizontal y vertical del patrón - Ajusta los desplazamientos horizontal y vertical.

  • Repetición del patrón - Elige cómo se repite el patrón: horizontal, vertical, etc.

  • Modo de mezcla del patrón - Define cómo la capa del patrón interactúa con las capas debajo. Selecciona uno de los 16 modos de mezcla disponibles.

Divi Woo Checkout Shipping module Background Pattern settings

Cómo agregar una máscara de fondo
Haz clic en la sexta pestaña, el ícono de máscara.

Haz clic en Añadir máscara de fondo.

Selecciona el tipo de máscara que quieres desde el menú desplegable.

Opciones de máscara de fondo

  • Color de la máscara - Elige el color de la máscara desde la paleta de colores de tu sitio o usa el cuentagotas para elegir un color nuevo.

  • Transformar máscara - Transforma la máscara horizontal o verticalmente, gírala o inviértela.

  • Proporción de aspecto de la máscara - Define la proporción de ancho a alto de la máscara.

  • Tamaño de la máscara - Selecciona el tamaño: tamaño real, cubrir, ajustar, estirar para llenar o tamaño personalizado. Si eliges personalizado, aparecerán opciones para ancho y alto de la máscara. Usa el deslizador o escribe un valor numérico.

  • Modo de mezcla de la máscara - Define cómo la capa de máscara interactúa con las capas debajo. Selecciona uno de los 16 modos de mezcla disponibles.

Divi Woo Checkout Shipping module Background Mask settings

Etiqueta administrativa

La etiqueta administrativa es donde puedes darle un nombre al módulo visible solo para ti, para ayudarte a mantener todo organizado y fácil de entender en el backend. Por defecto, la etiqueta administrativa es el nombre del módulo. Puedes cambiar el texto para reflejar lo que quieras.

Divi Woo Checkout Shipping module Admin Label settings

Pestaña Diseño

Dentro de esta pestaña, encontrarás todos los estilos y configuraciones de diseño para este módulo.

Divi Woo Checkout Shipping module Design Tab settings

Diseño

Elige el diseño de este módulo seleccionando una de las siguientes opciones en el menú desplegable:

  • Predeterminado - Muestra todos los campos del formulario en un diseño de ancho completo.

  • Ancho completo - Muestra todos los campos del formulario en un diseño de ancho completo.

  • 2 Columnas - Muestra todos los campos del formulario en un diseño de 2 columnas.

Divi Woo Checkout Shipping module Layout settings

Texto

Esto define los estilos generales del texto para este módulo; sin embargo, puedes configurar estilos específicos para textos específicos en otros grupos de configuración.

  • Alineación de texto - Elige cómo se alinea el texto:

    • Izquierda

    • Centro

    • Derecha

    • Justificado

  • Sombra de texto - Aplica una sombra paralela a todo el texto dentro del módulo. Cuando se selecciona un tipo de sombra, se aplica a todo el contenido textual del módulo.

Divi Woo Checkout Shipping module Text settings

Texto del título

Aquí puedes aplicar estilos y configuraciones únicas al texto del título.

  • Nivel de encabezado del texto - Elige el nivel de encabezado asignado al texto del título: h1, h2, h3, h4, h5 o h6.

  • Fuente del título - Elige la fuente que quieres usar para el texto del título. La fuente predeterminada se selecciona automáticamente, pero puedes elegir una diferente o subir una fuente personalizada haciendo clic en el menú desplegable.

  • Peso de fuente del título - Haz clic en el menú para seleccionar el grosor de la fuente del título.

  • Estilo de fuente del título - Elige el estilo del texto del título:

    • Cursiva

    • Mayúsculas

    • Versales pequeñas

    • Subrayado

    • Tachado

  • Alineación del texto del título - Elige la alineación del texto específicamente para el título:

    • Izquierda

    • Centro

    • Derecha

    • Justificado

  • Color del texto del título - Elige un color específico para el texto del título desde la paleta de colores de tu sitio o usa el cuentagotas para elegir un color nuevo.

  • Tamaño del texto del título - Elige el tamaño de fuente del texto del título arrastrando el deslizador o escribiendo un valor numérico.

  • Espaciado entre letras del título - Elige el espaciado entre letras arrastrando el deslizador o escribiendo un valor numérico. El espaciado entre letras es el espacio entre cada letra; mientras más alto el número, más espacio.

  • Altura de línea del título - Elige la altura de línea arrastrando el deslizador o escribiendo un valor numérico. La altura de línea es el espacio entre cada línea de texto; mientras más alto el número, más espacio.

  • Sombra de texto del título - Añade una sombra paralela al texto del título. 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.

Divi Woo Checkout Shipping module Title Text settings

Etiquetas de Campos
Puedes aplicar estilos de diseño únicos y configuraciones al texto de la etiqueta del campo.

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

  • Fuente de la Etiqueta del Campo - Elige la fuente que deseas 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 menú desplegable.

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

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

    • Cursiva

    • Mayúsculas

    • Versales pequeñas

    • Subrayado

    • Tachado

  • Alineación del Texto de la Etiqueta del Campo - Elige la alineación del texto específicamente para la etiqueta 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 de la paleta de colores de tu sitio o usa el icono de 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 del Campo - Elige el espaciado entre letras del texto del campo arrastrando el control deslizante o escribiendo un valor numérico. El espaciado es el espacio entre cada letra. A mayor número, mayor espacio.

  • 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. A mayor número, más espacio.

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

Divi Woo Checkout Shipping module Filed Labels settings

Campos
Aquí puedes estilizar la apariencia de los campos.

  • Color del Marcador de Posición - Elige un color para el texto marcador de posición de la paleta o usa el cuentagotas para seleccionar 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 usa el cuentagotas para elegir 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 usa el cuentagotas para elegir un nuevo color.

  • Color de Fondo de los Campos en Foco - Elige un color de fondo para los campos cuando están enfocados (por ejemplo, al hacer clic y comenzar a escribir). Selecciona de la paleta o usa el cuentagotas.

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

  • Márgenes de los Campos - Los márgenes añaden espacio alrededor del elemento. Puedes agregar espacio escribiendo un valor numérico o usando las flechas para aumentar o disminuir.

  • Relleno de los Campos - El relleno agrega espacio dentro del elemento. Puedes agregar espacio interno escribiendo un valor o usando las flechas.

  • Fuente de los Campos - Elige la fuente para el texto. La fuente predeterminada se selecciona automáticamente, pero puedes cambiarla o subir una personalizada desde el menú desplegable.

  • Grosor de la 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

    • Mayúsculas

    • Versales pequeñas

    • Subrayado

    • Tachado

  • Alineación del Texto de los Campos - Elige la alineación del texto de los campos:

    • 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 o escribiendo un valor.

  • Espaciado entre Letras de los Campos - Elige el espaciado entre letras del texto del campo.

  • Altura de Línea de los Campos - Elige la altura de línea del texto de los campos.

  • Sombra del Texto de los Campos - Añade sombra al texto de los campos y configura dirección, intensidad y color.

  • Esquinas Redondeadas de los Campos - Si deseas redondear las esquinas, escribe un valor numérico. A mayor número, más redondeadas serán. Los valores están vinculados (icono de cadena azul resaltado); para valores diferentes por esquina, haz clic en el icono para desvincular.

  • Estilos de Borde de los Campos - Añade bordes a todos los lados o individualmente (arriba, derecha, abajo, izquierda).

  • Ancho del Borde de los Campos - Define el ancho del borde. Para un borde más grueso, aumenta el número. Debe ser al menos 1px para mostrarse.

  • Color del Borde de los Campos - Elige el color del borde desde la paleta o usando el cuentagotas.

  • Estilo del Borde de los Campos - Elige el estilo del borde: sólido, discontinuo, punteado, doble, estriado, relieve, incrustado, sobresaliente o ninguno.

  • Usar Bordes en Foco - Activa esta opción para habilitar estilos de borde cuando el campo está enfocado.

  • Esquinas Redondeadas de los Campos en Foco - Define el redondeo de esquinas para campos enfocados, con las mismas reglas que las esquinas normales.

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

  • Ancho del Borde de los Campos en Foco - Define el ancho del borde para campos en foco.

  • Color del Borde de los Campos en Foco - Elige el color del borde para campos enfocados.

  • Estilo del Borde de los Campos en Foco - Elige el estilo de borde para campos enfocados.

  • Sombra de Caja de los Campos - Elige el estilo de sombra aplicada a los campos. Por defecto no tiene sombra.

Divi Woo Checkout Shipping module Fileds settings

Tamaño

  • Ancho - Define el ancho del módulo. Consulta la documentación oficial para más detalles.

  • Ancho Máximo - Define el ancho máximo del módulo. Consulta la documentación oficial para más detalles.

  • Alineación del Módulo - Si se define un ancho o ancho máximo, el módulo puede alinearse:

    • Izquierda

    • Centro

    • Derecha

  • Altura Mínima - Define la altura mínima del módulo. Consulta la documentación oficial.

  • Altura - Define la altura del módulo.

  • Altura Máxima - Define la altura máxima del módulo.

Divi Woo Checkout Shipping module Sizing settings

Espaciado
Puedes añadir márgenes o rellenos al módulo escribiendo valores numéricos.

  • El margen añade espacio fuera del módulo, el relleno dentro.

  • Para bloquear proporciones y mantener valores iguales, haz clic en el icono de cadena entre los valores (por ejemplo, arriba y abajo).

  • Los valores predeterminados de margen y relleno son 0.

Divi Woo Checkout Shipping module Spacing settings

Borde
Añade un borde al módulo. Puedes aplicar el borde a todos los lados o solo a uno.

  • Ajusta el ancho con el control deslizante.

  • Selecciona el color.

  • Elige un estilo de borde en el menú desplegable.

  • Esquinas Redondeadas - Define el redondeo de esquinas con un valor numérico. Igual que en campos, los valores pueden vincularse o desvincularse.

  • Estilos de Borde - Aplica borde a todos los lados o individualmente.

  • Ancho del Borde - Ajusta el ancho, mínimo 1px para mostrarse.

  • Color del Borde - Selecciona el color del borde.

  • Estilo del Borde - Elige entre sólido, discontinuo, punteado, doble, estriado, relieve, incrustado, sobresaliente o ninguno.

Divi Woo Checkout Shipping module Border settings

Sombra de Caja
Añade sombra a todo el módulo y personaliza:

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

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

  • Fuerza del Desenfoque - Define la intensidad del desenfoque. Más valor = sombra más difusa y grande.

  • Fuerza de Expansión - Define qué tan densa es la sombra. Más valor = sombra más intensa.

  • Color de la Sombra - Define el color.

  • Posición de la Sombra - Puede ser dentro o fuera del módulo.

Divi Woo Checkout Shipping module Box Shadow settings

Filtros
Ajusta los filtros del módulo:

  • Tono - Ángulo del color.

  • Saturación - Intensidad del color.

  • Brillo - Luminosidad de los colores.

  • Contraste - Distinción entre áreas claras y oscuras.

  • Invertir - Invierte tono, saturación y brillo según valor.

  • Sepia - Da una apariencia cálida amarilla/marrón.

  • Opacidad - Transparencia u opacidad del fondo (color, degradado, imagen, etc.).

  • Desenfoque - Aplica desenfoque gaussiano al módulo.

El Modo de Fusión define cómo se mezcla el módulo con las capas inferiores. Por defecto está en normal.

Divi Woo Checkout Shipping module Filters settings

Transformar
  1. Escalar
  2. Trasladar
  3. Rotar
  4. Sesgar
  5. Puntos de origen

Navega con tabulador 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 esquina inferior derecha.

Divi Woo Checkout Shipping module Transform settings

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 una animación en completar un ciclo.

  • Retraso de animación - Define el tiempo de espera desde que se aplica la animación a un elemento hasta que comienza a ejecutarse. La animación puede comenzar más tarde, inmediatamente desde el principio, 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 suavizado de tu animación. Suavizar la entrada y salida crea un efecto más fluido que una curva de velocidad lineal.

  • Repetición de animación - Por defecto, las animaciones solo se reproducen una vez. Si quieres que la animación se repita continuamente, elige la opción "Repetir" aquí.

Divi Woo Checkout Shipping module Animation settings

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 personalizados al módulo, que pueden usarse para personalizar estilos con propiedades CSS más avanzadas o para aplicar código CSS personalizado usando la clase CSS del módulo.

Divi Woo Checkout Shipping module Advanced Tab settings

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

Divi Woo Checkout Shipping module CSS ID and Classes settings

CSS Personalizado

  • CSS libre - Escribe CSS libre usando el selector "selector" 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.

Divi Woo Checkout Shipping module Custom CSS settings

Condiciones
Las condiciones de visualización te permiten elegir cuándo mostrar este módulo basado en un conjunto de condiciones, como si un usuario está visitando la página, si ya ha comprado antes en tu empresa, qué navegador está usando, qué sistema operativo tiene, y más.

Puedes agregar una o múltiples condiciones.

Divi Woo Checkout Shipping module Display Conditions settings

Visibilidad

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

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

    • Visible: el contenido se mostrará si se desborda.

    • Desplazar (Scroll): aparecerá una barra de desplazamiento vertical para navegar el contenido.

    • Oculto: la parte del contenido que se desborda será oculta.

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

  • Desbordamiento vertical - Define qué se muestra cuando el contenido se desborda por los bordes superior e inferior de un elemento a nivel de bloque. Puede ser:

    • Visible

    • Desplazar (Scroll)

    • Oculto

    • Automático

Divi Woo Checkout Shipping module Visibility settings

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

  • Duración de transición - Define la duración (en milisegundos) de la transición de la animación al pasar el cursor.

  • Retraso de transición - Define el retraso de la transición (en milisegundos).

  • Curva de velocidad de transición - Define la curva de velocidad de la transición.

Configuración de Transiciones del módulo Divi Woo Checkout Shipping

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, y los valores de desplazamiento vertical y horizontal son relativos a sí mismo. El espacio asignado en la página es igual que si la posición fuera estática.

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

    • Fija - El módulo se elimina del flujo normal y no crea espacio. Se posiciona en relación con la ventana del navegador, permitiendo 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 - 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 z más bajo.

Divi Woo Checkout Shipping module Transitions settings

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

También puedes habilitar el movimiento vertical, que permite ajustar la velocidad de desplazamiento del elemento sin afectar a los elementos circundantes.

La función "Disparador de movimiento" permite elegir cuándo se activa el efecto de desplazamiento: cuando la parte superior, media o inferior del elemento está en vista.

Divi Woo Checkout Shipping module Position settings

Guardar y salir

Cuando termines de estilizar y configurar el módulo contador numérico, haz clic en la flecha verde en la esquina 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, presiona CMD + S en Mac o CTRL + S en PC. También puedes usar la barra inferior de Divi para guardar haciendo clic en el icono circular morado con tres puntos para expandir la barra y luego hacer clic en el botón verde Guardar en la esquina inferior derecha.

Salir del Constructor Visual

Ahora que todos tus cambios están guardados, haz clic en "Salir del Constructor Visual" en la barra administrativa superior para salir del constructor.

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

  • Cómo instalar WooCommerce y configurar tu tienda

  • Cómo configurar ajustes de WooCommerce

  • 5 ideas de personalización para WooCommerce

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

  • Guía simple de las páginas predeterminadas de WooCommerce

  • Actualizar WooCommerce: mejores prácticas para cada vez

Continúa aprendiendo

Mantente actualizado con los últimos tutoriales de Divi Woo Checkout Shipping visitando nuestra página de Woo Checkout Shipping.

    • Popular Articles

    • Guía de Negocio para Resellers y Partners

      En esta Guía de Negocio vamos a analizar los 8 puntos más importantes a tener en cuenta si te estás planteando lanzar tu Propio Negocio de Apps: ¿Cuánto puedes ganar con un Negocio de Apps? Demo de Scoreapps: Cómo crear Apps y Monetizarlas ¿Qué ...

    • Ver una Demo de Scoreapps para Resellers

      En este vídeo te explicamos el modelo de negocio, los tipos de Apps que puedes crear y las distintas herramientas que incluye Scoreapps en su Plan de Resellers: Y en este otro vídeo te enseñamos cómo funciona el software por dentro:

    • Proporciona acceso a tus Aplicaciones

      Con el Plan Reseller o Plan Partner puedes otorgar fácilmente a tus clientes o colaboradores acceso a tus aplicaciones. Accede a tu Panel de Apps, y después accede a cualquier Aplicación: Una vez dentro del constructor de Apps, ve a Mi Cuenta - ...

    • Cómo Crear una App de Tienda

      El comercio electrónico desde dispositivos móviles se disparó desde comienzos de 2020 debido a la Pandemia del Covid19 y sigue creciendo a tasas del 45% anual. Hoy en día, contar con una App de Tienda resulta imprescindible para cualquier negocio de ...

    • Cómo diseñar la pantalla de inicio o portada de una App

      En el video que te mostramos a continuación te explicamos cómo diseñar la pantalla de inicio de una App:

    • Related Articles

    • Uso de las Opciones de Sombra de Caja en Divi

      Las opciones de sombra de caja en Divi te permiten darle a cualquier elemento de la página la ilusión de profundidad. Las sombras proyectadas son una forma creativa de dar vida a los elementos de diseño de tu sitio web. Pueden resaltar elementos e ...

    • El módulo de suscripción por correo electrónico de Divi

      Cómo agregar, configurar y personalizar el módulo de suscripción por correo electrónico de Divi <br> El módulo de suscripción por correo electrónico de Divi simplifica el proceso de aumentar tus suscriptores de correo electrónico al ...

    • El Módulo de Facturación en el Pago de Divi Woo

      Cómo agregar, configurar y personalizar el módulo de facturación en el pago de Divi Woo. El Módulo de Facturación en el Checkout de Divi Woo se integra perfectamente con WooCommerce en tu sitio web de WordPress y captura los datos de facturación de ...

    • El Módulo de Información de Pago de Divi Woo

      Cómo agregar, configurar y personalizar el módulo de Información de Pago de Divi Woo. El Módulo de Información de Pago de Divi Woo se integra perfectamente con WooCommerce. Puede añadirse al diseño o plantilla de tu página de pago Woo para que los ...

    • El Módulo de Pago en el Proceso de Compra de Divi Woo

      El módulo de pago en el proceso de compra de Divi Woo añade funcionalidad de pago a la página de finalizar compra de Woo y se integra a la perfección con WooCommerce. Instalar el plugin WooCommerce Antes de poder usar el módulo de pago de Divi Woo, ...