El Módulo Divi Woo Ventas Cruzadas

El Módulo Divi Woo Ventas Cruzadas

Cómo agregar, configurar y personalizar el módulo Divi Woo Ventas Cruzadas.


El Módulo Divi Woo Ventas Cruzadas muestra dinámicamente productos similares vinculados desde tu tienda en línea para incentivar a los visitantes a explorar más artículos y agregarlos a su carrito.

Las ventas cruzadas son cuando se muestran productos similares junto al producto que un cliente está viendo.

Es similar a la línea de caja en una tienda física que coloca objetos de precio parecido para fomentar compras impulsivas. El módulo Ventas Cruzadas de Woo extrae información de la sección Productos Vinculados en la ficha del producto.


Divi Woo Cross Sells Module


Divi Woo Cross Sells Module

Instalar el plugin WooCommerce

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

  • Ve al Panel 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 Divi Woo Ventas Cruzadas

  • 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 Woo Divi.

  • Haz clic en el módulo Título de Producto Woo para agregarlo a tu página.


Add the Divi Woo Cross Sells Module

Explicación de todos los ajustes del Módulo Divi Woo Ventas Cruzadas

Una vez agregado, 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 de este módulo.

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

  • Contenido

  • Diseño

  • Avanzado


All Divi Woo Cross Sells Module Settings Explained

Pestaña Contenido

Aquí encontrarás las opciones de contenido disponibles para este módulo.


Divi Woo Cross Sells Module Content Tab settings

Enlace

Si deseas aplicar un enlace clickeable a todo el módulo, puedes hacerlo aquí.

  • URL del enlace del módulo – Pega aquí la URL a la que quieres dirigir al hacer clic en el módulo. Esto hace que todo el módulo sea clickeable y, al hacerlo, dirigirá a los visitantes a la URL indicada.

  • Destino del enlace del módulo – Define si el enlace se abre en una pestaña nueva o en la misma ventana.

    • En la misma ventana

    • En una pestaña nueva


Divi Woo Cross Sells Module Link 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 de cubo de pintura.

  • Haz clic en Añadir color de fondo y elige uno de la paleta de colores de tu sitio o usa el gotero para seleccionar un nuevo color.


Divi Woo Cross Sells 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 del degradado y selecciona un color de la paleta o usa el gotero para elegir uno nuevo.
    Puedes agregar más colores haciendo clic en cualquier parte de la barra del degradado.

Opciones de degradado:

  • Tipo de degradado – Cambia el tipo desde el menú desplegable.

  • Dirección del degradado – Cambia la dirección arrastrando la barra o escribiendo un valor numérico.

  • Repetir degradado – Activa para que el degradado se repita.

  • Unidad de degradado – Cambia cómo se calculan los puntos de parada del degradado.

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


Divi Woo Cross Sells 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 imagen ya subida o subir una nueva.

Opciones para la imagen de fondo:

  • Usar efecto parallax – Aplica efecto parallax (donde la imagen se mueve más rápido que el contenido en primer plano, creando un efecto 3D). Por defecto está desactivado.

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

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

  • Repetición de imagen de fondo – Elige si y cómo se repite la imagen.

  • Mezcla de imagen de fondo – Elige cómo se mezcla la imagen con otras capas.


Divi Woo Cross Sells 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 y seleccionar o subir un video.

Opciones para video de fondo:

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

  • Ancho del video – Define el ancho en valor numérico.

  • Alto del video – Define la altura en valor numérico.

  • Pausar video cuando otro video se reproduzca – Activa para pausar el video de fondo cuando otro video esté en reproducción. Por defecto el video se pausa cuando no está visible.


Divi Woo Cross Sells 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 en el menú desplegable.

Opciones de patrón:

  • Color del patrón – Selecciona un color de la paleta o usa el gotero para uno nuevo.

  • Transformar patrón – Transforma horizontal o verticalmente, rota o invierte el patrón.

  • Tamaño del patrón – Elige tamaño real, cubrir, ajustar, estirar o personalizado. Si eliges personalizado, podrás definir ancho y alto con un deslizador o valor numérico.

  • Origen de repetición – Selecciona desde dónde se repite el patrón.

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

  • Repetición del patrón – Define cómo se repite (horizontal, vertical, etc.).

  • Modo de mezcla del patrón – Define cómo interactúa el patrón con las capas inferiores. Hay 16 modos disponibles.

Divi Woo Cross Sells 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 en el menú desplegable.

Opciones de máscara:

  • Color de máscara – Selecciona color de la paleta o usa el gotero para uno nuevo.

  • Transformar máscara – Transforma horizontal o vertical, rota o invierte.

  • Proporción de aspecto – Define la proporción ancho/alto de la máscara.

  • Tamaño de máscara – Elige tamaño real, cubrir, ajustar, estirar o personalizado. Si es personalizado, define ancho y alto con deslizador o valor numérico.

  • Modo de mezcla de máscara – Define interacción con capas inferiores, con 16 modos disponibles.


Divi Woo Cross Sells Module Background Mask settings

Etiqueta administrativa

Aquí puedes ponerle un nombre al módulo visible solo para ti, para mantener todo organizado y fácil de identificar en el backend. Por defecto, la etiqueta será el nombre del módulo, pero puedes cambiarla.


Divi Woo Cross Sells 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 Cross Sells Module Design Tab settings


Texto

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

  • Alineación del texto – Elige cómo se alinea el texto:

    • Izquierda

    • Centrado

    • Derecha

    • Justificado

  • Sombra de texto – Aplica sombra al texto dentro del módulo. Al seleccionar una sombra, se aplicará a todo el contenido textual del módulo.

Claro, aquí tienes la traducción completa respetando negritas, bullets y sin resumir:


Divi Woo Cross Sells Module Text settings

Texto del Título
Aquí puedes aplicar estilos y configuraciones de diseño únicos al texto del título.
  • Fuente del Título – Elige la fuente que deseas usar para el texto del título. 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 Título – Haz clic en el menú desplegable para seleccionar el grosor de la fuente del texto del título.

  • Estilo de la Fuente del Título – Elige el estilo de la fuente del texto del título:

    • Cursiva

    • Mayúscula inicial

    • Versalitas

    • Subrayado

    • Tachado

  • Alineación del Texto del Título – Elige la alineación específica para el texto del título:

    • Izquierda

    • Centro

    • Derecha

    • Justificado

  • Color del Texto del Título – Elige un color específico para el texto del título. Selecciona de la paleta de colores de tu sitio o haz clic en el icono del cuentagotas para encontrar un nuevo color.

  • 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 del texto del título arrastrando el deslizador o escribiendo un valor numérico. El espaciado es el espacio entre cada letra. Mientras mayor sea el número, más espacio habrá.

  • Altura de Línea del Título – Elige la altura de línea del texto del título arrastrando el deslizador o escribiendo un valor numérico. La altura de línea es el espacio entre cada línea de texto. Mientras mayor sea el número, más espacio habrá.

  • Sombra del Texto del Título – Añade una sombra al texto del título. Una vez seleccionado un estilo, puedes configurar la dirección de la sombra (horizontal y vertical), la fuerza del desenfoque y el color de la sombra.


Divi Woo Cross Sells Module Title Text settings
Texto del Precio
Aquí puedes estilizar el texto del precio para este módulo.
  • Fuente del Precio – Elige la fuente que deseas para el texto del precio. La fuente predeterminada se selecciona automáticamente; sin embargo, puedes elegir una diferente o subir una personalizada desde el menú desplegable.

  • Peso de la Fuente del Precio – Haz clic en el menú desplegable para seleccionar el grosor de la fuente del texto del precio.

  • Estilo de la Fuente del Precio – Elige el estilo de la fuente del texto del precio:

    • Cursiva

    • Mayúscula inicial

    • Versalitas

    • Subrayado

    • Tachado

  • Alineación del Texto del Precio – Elige la alineación específica para el texto del precio:

    • Izquierda

    • Centro

    • Derecha

    • Justificado

  • Color del Texto del Precio – Elige un color específico para el texto del precio. Selecciona de la paleta de colores de tu sitio o usa el cuentagotas para elegir un nuevo color.

  • Tamaño del Texto del Precio – Elige el tamaño de fuente del texto del precio arrastrando el deslizador o escribiendo un valor numérico.

  • Espaciado entre Letras del Precio – Elige el espaciado entre letras del texto del precio arrastrando el deslizador o escribiendo un valor numérico.

  • Altura de Línea del Precio – Elige la altura de línea del texto del precio arrastrando el deslizador o escribiendo un valor numérico.

  • Sombra del Texto del Precio – Añade una sombra al texto del precio. Después de elegir un estilo, puedes configurar dirección, fuerza de desenfoque y color de la sombra.


Divi Woo Cross Sells Module Price Text settings

Dimensiones
  • 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 configurarse con 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. Consulta la documentación oficial para más detalles.

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

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


Divi Woo Cross Sells 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 iguales y que los valores sean idénticos, haz clic en el icono de cadena entre los valores que quieras bloquear (por ejemplo, arriba y abajo).

  • Los valores predeterminados para margen y relleno son 0.


Divi Woo Cross Sells Module Spacing settings

Borde
Añade un borde al módulo. Puedes agregar un borde completo o solo a un lado.
  • Ajusta el ancho con el deslizador y selecciona un color.

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

  • Esquinas Redondeadas – Escribe un valor numérico para redondear las esquinas. Mientras mayor sea el número, más redondeadas serán. Los valores están enlazados automáticamente (cadena azul), pero puedes desvincularlos para asignar valores distintos a cada esquina.

  • Estilos de Borde – Aplica borde a todos los lados o a lados individuales (arriba, derecha, abajo, izquierda).

  • Ancho del Borde – Ajusta el ancho del borde (mínimo 1px para que se vea).

  • Color del Borde – Selecciona un color de la paleta o usa el cuentagotas para elegir otro.

  • Estilo del Borde – Elige entre sólido, punteado, doble, etc.


Divi Woo Cross Sells Module Border settings

Sombra de Caja
Añade sombra al módulo completo. Al seleccionar un estilo, puedes personalizar:
  • Posición horizontal y vertical de la sombra.

  • Fuerza del desenfoque (más valor = sombra más amplia y difusa).

  • Fuerza de expansión (más valor = sombra más densa).

  • Color de la sombra.

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


Divi Woo Cross Sells Module Box Shadow settings

Filtros
Ajusta los filtros del módulo:
  • Matiz – Define el ángulo de 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.

  • Sepia – Da un tono más cálido y amarillento/marrón.

  • Opacidad – Define qué tan transparente u opaco será el fondo (color, gradiente, imagen, etc.).

  • Desenfoque – Aplica desenfoque gaussiano al módulo.

  • Modo de Fusión – Define cómo se mezcla el módulo con las capas debajo. Por defecto es normal.


Divi Woo Cross Sells Module Filters settings

Transformar
Opciones para transformar el módulo:
  • Escalar

  • Trasladar

  • Rotar

  • Sesgar

  • Puntos de origen

Puedes navegar entre opciones y configurarlas con valores numéricos o arrastrando los controles. Para bloquear valores iguales, haz clic en el icono de cadena.


Divi Woo Cross Sells Module Transform settings

Animación
Aplica animación al módulo y ajusta:
  • Duración de la animación.

  • Retardo antes de iniciar la animación.

  • Opacidad inicial al comenzar la animación.

  • Curva de velocidad para suavizar la animación.

  • Repetición (por defecto se reproduce solo una vez; puedes activar bucle).


Divi Woo Cross Sells Module Animation settings

Pestaña Avanzada

Opciones para usuarios con más experiencia, como CSS personalizado.

  • Puedes aplicar CSS personalizado al módulo.

  • Añadir clases e ID para aplicar estilos CSS más avanzados o código personalizado.


Divi Woo Cross Sells Module Advanced Tab settings

ID y Clases CSS
Asignar un ID o clase CSS específico para usar en hojas de estilo de temas hijo.

Divi Woo Cross Sells Module CSS ID and Classes settings

CSS Personalizado
  • CSS libre: Escribe CSS personalizado usando el selector selector.

  • Elementos del módulo: Aplica CSS a partes específicas del módulo.


Divi Woo Cross Sells Module Custom CSS settings

Condiciones
Permite elegir cuándo mostrar este módulo basado en condiciones como:
  • Si el usuario ha comprado antes

  • El navegador o sistema operativo que usa

  • Y más

Puedes añadir una o varias condiciones.

Divi Woo Cross Sells Module Display Conditions settings


Visibilidad
Define en qué dispositivos mostrar u ocultar el módulo (Teléfono, Tableta, Escritorio).
  • Desbordamiento Horizontal – Qué pasa si el contenido supera los bordes izquierdo y derecho: visible, con scroll, oculto o automático.

  • Desbordamiento Vertical – Qué pasa si el contenido supera los bordes superior e inferior: visible, con scroll, oculto o automático.


Divi Woo Cross Sells Module Visibility settings

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

Divi Woo Cross Sells Module Transform settings

Posición
Define la posición del módulo:
  • Relativa (por defecto) – Posición basada en el flujo normal del documento y desplazamientos relativos al módulo.

  • Absoluta – El módulo se saca del flujo normal y se posiciona relativo al antecesor más cercano con posición.

  • Fija – Posiciona el módulo respecto a la ventana del navegador (útil para módulos pegajosos).

Además:

  • Desplazamiento vertical y horizontal.

  • Índice z para definir el orden de apilamiento (módulos con índice mayor se muestran encima).


Divi Woo Cross Sells Module Position settings

Efectos de Desplazamiento
Define comportamiento al hacer scroll:
  • Puedes hacer el módulo pegajoso arriba, abajo o ambos.

  • Permite movimiento vertical ajustando la velocidad de scroll del módulo sin afectar otros elementos.

  • El efecto se activa cuando la parte superior, media o inferior del módulo entra en vista.


Divi Woo Cross Sells Module Scroll Effects settings

Guardar y Salir


Cuando termines de configurar y diseñar el módulo, haz clic en la flecha verde abajo a la derecha para guardar. Si cierras sin guardar, perderás los cambios.

Guardar Diseño de Página

Presiona CMD + S en Mac o CTRL + S en PC para guardar el diseño de la página. También puedes usar la barra inferior de Divi, haciendo clic en el ícono circular púrpura con tres puntos para expandir y luego en el botón verde Guardar.

Salir del Constructor Visual

Cuando todo esté guardado, haz clic en "Salir del Constructor Visual" en la barra superior para salir.

Más Recursos para el Módulo Divi Pricing Table

Visita la página oficial de documentación de Divi para ver tutoriales, artículos y más.
    • 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 Venta Cruzada de Productos Divi Woo

      Cómo agregar, configurar y personalizar el módulo de venta cruzada de productos Divi Woo. La venta cruzada es la práctica de promover productos relacionados que tienen un precio más alto cuando una persona se acerca a finalizar la compra. El módulo ...
    • El Módulo de Productos Relacionados de Divi Woo

      Cómo agregar, configurar y personalizar el módulo de Productos Relacionados Divi Woo. El módulo de Productos Relacionados Divi Woo se integra completamente con las capacidades de WooCommerce y muestra productos relacionados con el producto que se ...
    • 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 Producto de Divi Woo

      Cómo agregar, configurar y personalizar el módulo Divi Woo Productos. El módulo Divi Woo Productos muestra una galería de productos en tu sitio web. Es una manera fácil de añadir una colección de productos en cualquier lugar de tu sitio. Usa el ...
    • 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 ...