El Módulo Detalles de Pago de Divi Woo

El Módulo Detalles de Pago de Divi Woo

Cómo agregar, configurar y personalizar el módulo Detalles de Pago de Divi Woo.


El Módulo de Detalles de Pago Divi Woo

El módulo Detalles de Pago Divi Woo se integra con las funcionalidades de WooCommerce y muestra los detalles del carrito.

Este módulo lista qué productos han sido añadidos al carrito y muestra los precios subtotal y total.


Divi Woo Checkout Details Module

Instalar el plugin WooCommerce

Antes de poder usar el módulo Productos Relacionados Divi Woo, 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.


Añadir el Módulo Detalles de Pago Divi Woo

  • Haz clic en el ícono verde + para insertar una fila y selecciona la estructura de columnas que desees.

  • Haz clic en el ícono gris + dentro de la fila para abrir la Biblioteca de Módulos 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 Detalles de Pago para añadirlo a tu página.


Add Divi Woo Checkout Details Module

Explicación de Todas las Configuraciones del Módulo Detalles de Pago Divi Woo

Una vez añadido, se abrirá automáticamente la ventana modal de Configuración del módulo. Aquí es donde se configuran el contenido y los estilos de diseño del módulo.

Estas configuraciones están organizadas en tres grupos mediante pestañas en la parte superior del módulo:

  • Contenido

  • Diseño

  • Avanzado


Divi Woo Checkout Details Module Settings

Pestaña Contenido

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


Divi Woo Checkout Details 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 Añadir un Color de Fondo

  • Haz clic en la primera pestaña, el ícono de Cubo de Pintura.

  • Haz clic en Añadir Color de Fondo y elige un color de la paleta de colores de tu sitio, o usa el icono de cuentagotas para seleccionar un nuevo color.


Divi Woo Checkout Details Module Background Color settings

Cómo Añadir 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 o usa el cuentagotas para elegir uno nuevo. Los puntos permiten agregar más colores al degradado. Haz clic en cualquier parte del deslizador para añadir un nuevo punto.

Opciones del degradado:

  • Tipo de Degradado: Cambia el tipo de degradado seleccionando uno en el menú desplegable.

  • Dirección del Degradado: Cambia la dirección arrastrando el deslizador o ingresando un valor numérico.

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

  • Unidad del Degradado: Cambia cómo se calculan los puntos del degradado, seleccionando la unidad en el menú desplegable.

  • Colocar Degradado Sobre Imagen de Fondo: Si tienes una imagen de fondo, activa esta opción para que el degradado quede encima de la imagen.


Divi Woo Checkout Details Module Background Gradient settings

Cómo Añadir 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 (la imagen se mueve más rápido que el contenido en primer plano, creando una ilusión 3D), activa esta opción. Por defecto está desactivada.

  • Tamaño de la Imagen de Fondo: Selecciona el tamaño de la imagen desde el menú desplegable.

  • Posición de la Imagen de Fondo: Selecciona la posición de la imagen desde el menú desplegable.

  • Repetición de la Imagen de Fondo: Decide si y cómo se repite la imagen desde el menú desplegable.

  • Modo de Fusión de la Imagen de Fondo: Elige cómo se mezcla la imagen con otras capas dentro del módulo.


Divi Woo Checkout Details Module Background Image settings

Cómo Añadir 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 y seleccionar un video ya subido o subir uno nuevo.

Opciones de video de fondo:

  • Mp4 vs Webm: Se recomienda subir ambos formatos para asegurar compatibilidad con todos los navegadores.

  • Ancho del Video de Fondo: Ingresa un valor numérico para el ancho.

  • Alto del Video de Fondo: Ingresa un valor numérico para el alto.

  • Pausar Video Cuando Otro Video Reproduzca: Activa esta opción para que el video se pause si otro video está en reproducción. Por defecto, el video se pausa cuando no está visible. Si quieres que continúe, desactiva esta opción.


Divi Woo Checkout Details Module Background Video settings

Cómo Añadir 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 del patrón:

  • Color del Patrón: Selecciona un color de la paleta o usa el cuentagotas.

  • Transformar Patrón: Transforma el patrón horizontal o verticalmente, gira o invierte el patrón.

  • Tamaño del Patrón: Selecciona tamaño real, cubrir, ajustar, estirar o tamaño personalizado. Si eliges tamaño personalizado, aparecerán opciones para ancho y alto del patrón.

  • Origen de Repetición del Patrón: Selecciona desde dónde se repite el patrón.

  • Desplazamiento Horizontal y Vertical del Patrón: Ajusta los desplazamientos horizontal y vertical.

  • Repetición del Patrón: Elige cómo se repite (horizontal, vertical, etc.).

  • Modo de Fusión del Patrón: Define cómo la capa del patrón interactúa con las capas inferiores. Hay 16 modos de fusión disponibles.


Divi Woo Checkout Details Module Background Pattern settings

Cómo Añadir 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 desde el menú desplegable.

Opciones de máscara:

  • Color de la Máscara: Elige un color de la paleta o usa el cuentagotas.

  • Transformar Máscara: Transforma la máscara horizontal o verticalmente, rota o invierte.

  • Relación de Aspecto de la Máscara: Ajusta la relación de aspecto (ancho vs alto).

  • Tamaño de la Máscara: Selecciona tamaño real, cubrir, ajustar, estirar o tamaño personalizado. Si eliges personalizado, ajusta ancho y alto.

  • Modo de Fusión de la Máscara: Define cómo interactúa con las capas debajo; 16 modos disponibles.


Divi Woo Checkout Details Module Background Mask settings

Etiqueta Administrativa

La Etiqueta Administrativa es donde puedes darle un nombre al módulo visible solo para ti, para mantener todo organizado y claro en el backend. Por defecto, la etiqueta será el nombre del módulo, pero puedes cambiarla.


Divi Woo Checkout Details Module Admin Label settings

Pestaña Diseño

Aquí encontrarás todos los estilos y configuraciones de diseño para este módulo.


Divi Woo Checkout Details Module Design Tab settings

Texto

Configura los estilos de texto generales para el módulo. Puedes definir estilos específicos en otras configuraciones.

  • Alineación de Texto:

    • Izquierda

    • Centrado

    • Derecha

    • Justificado

  • Sombra de Texto: Aplica sombra a todo el texto dentro del módulo.


Divi Woo Checkout Details Module Text settings

Texto del Título

Puedes aplicar estilos únicos y configuraciones al texto del título.

  • Fuente del Título: Elige la fuente para el texto del título. Por defecto está seleccionada una fuente automática, pero puedes cambiarla o subir una personalizada.

  • Grosor de Fuente del Título: Selecciona el grosor de la fuente.

  • Estilo de Fuente del Título:

    • Cursiva

    • Mayúscula

    • Versalitas

    • Subrayado

    • Tachado

  • Alineación del Texto del Título:

    • Izquierda

    • Centrado

    • Derecha

    • Justificado

  • Color del Texto del Título: Elige un color desde la paleta o con el cuentagotas.

  • Tamaño del Texto del Título: Ajusta el tamaño con el deslizador o valor numérico.

  • Espaciado entre Letras del Título: Ajusta el espacio entre letras.

  • Altura de Línea del Título: Ajusta el espacio entre líneas.

  • Sombra del Texto del Título: Añade sombra y configura dirección, fuerza y color.

Divi Woo Checkout Details Module Title Text settings

Etiqueta de columna


Aquí puedes diseñar el texto de la etiqueta de columna para este módulo. También puedes aplicar estilos únicos a los enlaces navegando por las pestañas en la parte superior.

Fuente de la etiqueta de columna - Elige la fuente para el texto de la etiqueta de columna. 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.

Peso de la fuente de la etiqueta de columna - Selecciona el grosor de la fuente del texto de la etiqueta de columna.

Estilo de fuente de la etiqueta de columna - Elige el estilo de la fuente del texto de la etiqueta de columna:

  • Cursiva

  • Mayúsculas

  • Versalitas

  • Subrayado

  • Tachado

Alineación del texto de la etiqueta de columna - Elige la alineación del texto específicamente para la etiqueta de columna:

  • Izquierda

  • Centro

  • Derecha

  • Justificado

Color del texto de la etiqueta de columna - Elige un color específico para el texto de la etiqueta de columna. Selecciona de la paleta de colores de tu sitio o usa el icono del cuentagotas para encontrar un color nuevo.

Tamaño del texto de la etiqueta de columna - Elige el tamaño de la fuente del texto de la etiqueta de columna arrastrando el control deslizante o escribiendo un valor numérico.

Espaciado entre letras de la etiqueta de columna - Elige el espaciado entre letras del texto de la etiqueta de columna arrastrando el control deslizante o escribiendo un valor numérico. El espaciado entre letras es el espacio entre cada letra. A mayor número, mayor espacio.

Altura de línea del texto de la etiqueta de columna - Elige la altura de línea del texto de la etiqueta de columna 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, mayor espacio.

Sombra del texto de la etiqueta de columna - Agrega una sombra proyectada al texto de la etiqueta de columna. 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 Details Module Column Label text settings

Texto del cuerpo

Aquí puedes diseñar el texto del cuerpo para este módulo. También puedes aplicar estilos únicos a los enlaces navegando por las pestañas en la parte superior.

Fuente del cuerpo - Elige la fuente que deseas para el texto del cuerpo. 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.

Peso de la fuente del cuerpo - Haz clic en el menú desplegable para seleccionar el grosor de la fuente del texto del cuerpo.

Estilo de fuente del cuerpo - Elige el estilo de la fuente del texto del cuerpo:

  • Cursiva

  • Mayúsculas

  • Versalitas

  • Subrayado

  • Tachado

Alineación del texto del cuerpo - Elige la alineación del texto específicamente para el cuerpo:

  • Izquierda

  • Centro

  • Derecha

  • Justificado

Color del texto del cuerpo - Elige un color específico para el texto del cuerpo. Selecciona de la paleta de colores de tu sitio o usa el icono del cuentagotas para encontrar un color nuevo.

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

Espaciado entre letras del cuerpo - Elige el espaciado entre letras del texto del cuerpo arrastrando el control deslizante o escribiendo un valor numérico. El espaciado entre letras es el espacio entre cada letra. A mayor número, mayor espacio.

Altura de línea del cuerpo - Elige la altura de línea del texto del cuerpo 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, mayor espacio.

Sombra del texto del cuerpo - Agrega una sombra proyectada al texto del cuerpo. 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 Details Module Body Text settings

Tabla

Aquí puedes diseñar el contenedor de la tabla del módulo.

Colapsar espacios y bordes de la tabla - Si deseas anular el estilo personalizado y forzar que la tabla use valores predeterminados para los espacios y bordes, activa esta opción en sí.

Espacios verticales - Esta opción solo será visible si la opción anterior está desactivada. Los espacios verticales se refieren al espacio vertical en cada fila. A mayor número, más espacio tendrá cada línea de fila.

Espacios horizontales - Los espacios horizontales se refieren a la cantidad de espacio entre elementos horizontalmente. A mayor número, más espacio.

Color de fondo de la tabla - Define el color del fondo de la tabla eligiendo de la paleta de colores o usando el cuentagotas para un nuevo color.

Margen de la tabla - Define los márgenes de la tabla. Los márgenes añaden espacio fuera del elemento.

Esquinas redondeadas de la tabla - Escribe un valor numérico si deseas esquinas redondeadas para la tabla. 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 el icono de cadena azul resaltada); 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 se cambia uno.

Estilos de borde de la tabla - Aquí puedes añadir un borde a la tabla. Puedes añadir un borde a todos los lados o a lados individuales (superior, derecho, inferior e izquierdo).

Ancho del borde de la tabla - Aquí defines el ancho del borde. Para un borde más grueso, aumenta el número. El ancho del borde debe ser al menos 1px para mostrarse.

Color del borde de la tabla - Aquí puedes elegir el color del borde. Puedes seleccionar un color de la paleta predeterminada de tu sitio o usar el cuentagotas para un color nuevo.

Estilo del borde de la tabla - Selecciona el estilo de borde que desees: sólido, discontinuo, punteado, doble, ranura, relieve, embutido, sobresaliente o ninguno.

Sombra del cuadro de la tabla - Elige el estilo de sombra que quieres aplicar a la tabla. Por defecto, no se aplica sombra.


Divi Woo Checkout Details Module Table settings

Fila de la tabla

Aquí puedes diseñar el contenedor de la fila de la tabla del módulo.

Color de fondo de la fila de la tabla - Define el color de fondo de la fila de la tabla eligiendo de la paleta o usando el cuentagotas para un color nuevo.

Sombra del cuadro de la fila de la tabla - Elige el estilo de sombra que quieres aplicar a la fila. Por defecto, no se aplica sombra.


Divi Woo Checkout Details Module Table Row settings

Celda de la tabla

Aquí puedes diseñar el contenedor de la celda de la tabla del módulo.

Color de fondo de la celda de la tabla - Define el color de fondo de la celda eligiendo de la paleta o usando el cuentagotas para un color nuevo.

Relleno de la celda de la tabla - Define el relleno de la celda escribiendo un valor numérico. El relleno añade espacio dentro del elemento.

Esquinas redondeadas de la celda de la tabla - Escribe un valor numérico si deseas esquinas redondeadas para la celda. A mayor número, más redondeadas serán las esquinas. Los valores están vinculados automáticamente (como indica la cadena azul resaltada); si quieres valores distintos para cada esquina, haz clic en la cadena para desvincular. Si están vinculados, se actualizan automáticamente juntos.

Estilos de borde de la celda de la tabla - Añade un borde a la celda. Puedes añadir borde a todos los lados o a lados individuales (superior, derecho, inferior e izquierdo).

Ancho del borde de la celda de la tabla - Define el ancho del borde. Para un borde más grueso, aumenta el número. El ancho debe ser al menos 1px para verse.

Color del borde de la celda de la tabla - Elige el color del borde. Puedes seleccionar de la paleta predeterminada o usar el cuentagotas para un color nuevo.

Estilo del borde de la celda de la tabla - Selecciona el estilo de borde: sólido, discontinuo, punteado, doble, ranura, relieve, embutido, sobresaliente o ninguno.

Sombra del cuadro de la celda de la tabla - Elige el estilo de sombra para la celda. Por defecto, no se aplica sombra.


Divi Woo Checkout Details Module Table Cell settings

Dimensionamiento

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 de ancho o ancho máximo, la alineación del módulo puede definirse con tres opciones:

  • Alineado a la izquierda

  • Centrado

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


Divi Woo Checkout Details Module Sizing settings

Espaciado

Puedes añadir márgenes o relleno 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 mantener proporciones y que los valores sean iguales, haz clic en el icono de cadena entre los valores que deseas mantener idénticos (por ejemplo, arriba y abajo).

Los valores predeterminados del margen para el módulo son 0.

Los valores predeterminados del relleno para el módulo son 0.


Divi Woo Checkout Details Module Spacing settings

Borde

Añade un borde al módulo. Puedes añadir un borde completo o solo a un lado. Ajusta el ancho con el control deslizante y selecciona un color. Elige un estilo de borde haciendo clic en el menú desplegable.

Esquinas redondeadas – Escribe un valor numérico para redondear las esquinas del borde. A mayor número, más redondeadas. Los valores están vinculados automáticamente (como muestra la cadena azul); para diferentes valores por esquina, haz clic en la cadena para desvincularlos. Si están vinculados, se actualizan automáticamente juntos.

Estilos de borde – Añade borde a todos los lados o lados individuales (superior, derecho, inferior, izquierdo).

Ancho del borde - 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 – Elige el color del borde. Selecciona un color de la paleta predeterminada o usa el cuentagotas para uno nuevo.

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


Divi Woo Checkout Details Module Border settings

Sombra de cuadro

Añade una sombra al módulo completo. Una vez seleccionado 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.

Intensidad del desenfoque de la sombra - Define la fuerza del desenfoque. A mayor valor, mayor desenfoque, sombra más amplia y ligera.

Intensidad de propagación de la sombra - Define la densidad del desenfoque. Aumentar este valor aumenta la intensidad de la sombra.

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.


Divi Woo Checkout Details Module Box Shadow settings

Filtros

Ajusta los filtros del módulo:
  • Matiz - Define el ángulo del matiz del color.

  • Saturación - Define la intensidad del color.

  • Brillo - Define qué tan brillante será el color.

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

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

  • Sepia - Da una apariencia más cálida, amarillenta o marrón.

  • Opacidad - Define qué tan transparente u opaco 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 se mezcla el módulo con las capas inferiores. Por defecto, está seleccionado normal.

Divi Woo Checkout Details Module Filters settings

Transformar

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

Navega por las pestañas 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.

Divi Woo Checkout Details 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 la animación - Define el tiempo que espera desde que se aplica la animación a un elemento antes de comenzar a ejecutarla. La animación puede comenzar más tarde, inmediatamente desde el inicio 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. Aplicar suavizado al inicio y al final crea un efecto más fluido que una velocidad lineal.

  • Repetición de la animación - Por defecto, las animaciones solo se reproducen una vez. Si quieres que tu animación se repita continuamente, selecciona la opción de repetir en bucle.

Divi Woo Checkout Details Module Animation settings


Pestaña Avanzada

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

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

Divi Woo Checkout Details 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 a un módulo usando la hoja de estilos de tu tema hijo.

Divi Woo Checkout Details Module CSS ID and Classes settings


CSS Personalizado

  • CSS de Forma 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.

Divi Woo Checkout Details 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 cuando un usuario visita la página, si ya ha comprado antes en tu empresa, qué navegador usa, qué sistema operativo tiene, y más.

Puedes agregar una o múltiples condiciones.

Divi Woo Checkout Details Module Display Conditions settings


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 marcando la casilla correspondiente.

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

    • Visible - El contenido se mostrará si sobresale la altura del módulo.

    • Desplazar - Si el contenido sobresale la altura, se mostrará una barra de desplazamiento vertical para navegar.

    • Oculto - Si el contenido sobresale, la parte que sobresale quedará oculta.

    • Automático - El navegador decidirá si muestra la barra de desplazamiento.

  • Desbordamiento vertical - Define qué se muestra cuando el contenido sobresale de los bordes superior e inferior de un elemento de bloque. Opciones iguales a las de desbordamiento horizontal.

Divi Woo Checkout Details Module Visibility settings


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 de la animació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.

Divi Woo Checkout Details Module Transitions settings


Posición

  • 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 según el desplazamiento vertical y horizontal. No afecta la posición de otros elementos y el espacio reservado para el módulo sigue siendo el mismo que en posición estática.

    • Absoluta - El módulo se elimina del flujo normal, sin crear espacio en el diseño. Se posiciona relativo 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 en el diseño. Se posiciona respecto a la ventana del navegador, útil para 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 índice Z más alto se superponen a los de índice más bajo.

Divi Woo Checkout Details Module Position settings


Efectos de desplazamiento
Esta sección define el comportamiento del módulo al hacer scroll en la página. Puedes hacer que el módulo se fije en la parte superior, inferior o en ambas, y decidir si el módulo se transforma mientras el usuario desplaza.

Además, puedes activar movimiento vertical en el módulo para ajustar la velocidad del desplazamiento sin afectar a los elementos circundantes.

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

Divi Woo Checkout Details Module Scroll Effects settings


Guardar y salir

Una vez termines de estilizar y configurar el módulo de contador numérico, haz clic en la flecha verde en la parte inferior derecha del módulo 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 presionar CMD + S en Mac o CTRL + S en PC. También puedes usar la barra de herramientas de Divi en la parte inferior para guardar haciendo clic en el ícono circular púrpura con tres puntos para expandir la barra y luego 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 de administración superior para salir del Constructor Visual.

Más recursos para el Módulo de Detalles de Pago Divi Woo

  • Cómo instalar WooCommerce y configurar tu tienda

  • Cómo configurar ajustes de WooCommerce

  • 5 ideas de personalización para WooCommerce

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

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

  • Actualización de WooCommerce: mejores prácticas para seguir siempre


Continuar aprendiendo

Mantente al día con todos nuestros últimos tutoriales de Divi Woo Checkout Details visitando nuestra página de Detalles de Pago Woo Checkout.
    • 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

    • 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 ...
    • Cómo usar el Editor de Imágenes de Divi IA

      Aprende a usar el Editor de Imágenes de Divi IA para crear y editar fácilmente imágenes impresionantes directamente dentro del Constructor de Divi. <br> Cómo usar el Editor de Imágenes de Divi IA Este artículo te guiará paso a ...
    • 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 ...
    • 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 ...