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.
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.
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.
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
Aquí encontrarás las opciones de contenido disponibles para este módulo.
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
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
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.
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.
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.
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.
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.
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.
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.
Aquí encontrarás todos los estilos y configuraciones de diseño para este módulo.
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:
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.
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.
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.
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.
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.
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).
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.
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.
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).
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.
CSS libre: Escribe CSS personalizado usando el selector selector
.
Elementos del módulo: Aplica CSS a partes específicas del módulo.
Si el usuario ha comprado antes
El navegador o sistema operativo que usa
Y más
Puedes añadir una o varias condiciones.
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.
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).
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.