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 está visualizando. Incluirlo en las páginas de producto es excelente para ayudar a aumentar ventas y conversiones.

El módulo de Productos Relacionados Divi Woo es uno de los módulos básicos para crear páginas de comercio electrónico personalizadas en el Constructor de Temas.

Instalar el plugin WooCommerce

Ve al Escritorio de WordPress → Plugins → Añadir nuevo plugin.

Usa la barra de búsqueda (esquina superior derecha) y busca WooCommerce.

1. Haz clic en el botón Instalar ahora.
2. Haz clic en el botón Activar.

Agregar el módulo Divi Woo de Productos Relacionados a tu página

Sin embargo, todo lo explicado a continuación también se puede aplicar a:

• Diseño de página de producto individual

• Plantilla del Constructor de Temas asignada a Todos los Productos

La página del carrito se construye como una plantilla de página del Constructor de Temas. El Constructor de Temas Divi nos permite crear y diseñar fácilmente plantillas de páginas para comercio electrónico.

Para aprender más sobre el Constructor de Temas Divi, haz clic aquí.

Navegar al Constructor de Temas Divi

Esto te lleva a la página del Constructor de Temas, donde se encuentran todas las plantillas personalizadas de tu sitio web.

Agregar una nueva plantilla para la página del carrito

• Crear nueva plantilla – Comenzar a construir la plantilla desde cero.

• Agregar desde biblioteca – Se usa para importar un paquete de diseño prehecho. Esto abrirá la Biblioteca Divi, donde puedes explorar paquetes de diseño prehechos. Aprende cómo importar paquetes de diseño desde la biblioteca Divi aquí.
  

• Importar vía portabilidad (opcional) – Otra forma de importar un diseño prehecho al Constructor de Temas Divi es importando un archivo JSON usando la función de portabilidad de Divi. Aprende cómo hacerlo aquí.

  

Asignar la nueva plantilla a la página del carrito:

1. Haz clic en Agregar cuerpo personalizado.
   

1. Haz clic en Construir cuerpo personalizado.
   

Agregar el módulo de Productos Relacionados Woo

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

1. 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.
2. Haz clic en Módulos Woo para ver todos los módulos Divi Woo.
   

1. Haz clic en Productos Relacionados Woo para agregarlo a tu página.
   

Nota: ¡La biblioteca de módulos también es buscable! Usa la barra de búsqueda en la parte superior para escribir el nombre del módulo que buscas.

Todas las configuraciones del módulo Divi Woo Productos Relacionados explicadas

Una vez agregado, la ventana modal de configuración del módulo aparecerá automáticamente. Aquí es donde se configura 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

Pestaña Contenido

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

• Producto – Especifica a qué producto quieres que el módulo se relacione cuando muestre productos relacionados. Por defecto, está configurado en Este Producto. Para nuestros propósitos, dejaremos esta opción en Este Producto para que muestre productos relacionados con el que el visitante está viendo.

• Cantidad de productos – Define el número de productos que se muestran una vez por página de resultados escribiendo un valor numérico en el campo de entrada.

• Diseño de columnas – Elige cuántas columnas quieres que el módulo muestre seleccionando un número del menú desplegable.

• Orden – Elige cómo quieres que se ordenen los productos desde el menú desplegable: orden aleatorio, por orden de menú, por popularidad, de más antiguo a más nuevo, de más nuevo a más antiguo, por precio de menor a mayor o de mayor a menor.

• Categorías incluidas – Elige qué categorías de productos quieres incluir en los resultados mostrados. Por defecto, se muestran todas las categorías. Para seleccionar una categoría, haz clic en su casilla correspondiente. Cuando se selecciona una o varias categorías, solo se mostrarán productos asignados a esa(s) categoría(s). Para este ejemplo, seleccionaremos Este Producto para mostrar productos relacionados con el producto que el visitante está visualizando.

• Número de desplazamiento de producto – Elige cuántos productos deseas omitir; no se mostrarán en el feed. Por ejemplo, si tienes 12 productos pero solo quieres mostrar del 2 al 12, escribe 1 en este campo.

Elementos

Aquí puedes elegir qué información del producto se muestra.

• Mostrar nombre – Activa o desactiva para mostrar u ocultar el nombre del producto.

• Mostrar imagen – Activa o desactiva para mostrar u ocultar la imagen del producto.

• Mostrar precio – Activa o desactiva para mostrar u ocultar el precio del producto.

• Mostrar valoración – Activa o desactiva para mostrar u ocultar la valoración del producto.

• Mostrar etiqueta de oferta – Activa o desactiva para mostrar u ocultar la etiqueta de oferta.

Enlace

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

• URL del enlace del módulo – Pega la URL del enlace que deseas aplicar a este módulo. Esto hará que todo el módulo sea clicable y, al hacer clic, dirigirá a los visitantes a la URL pegada aquí.

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

  • En la misma ventana – si quieres que el enlace se abra en la misma ventana.

  • En una pestaña nueva – si quieres que el enlace se abra en una nueva pestaña.

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

1. Haz clic en la primera pestaña, el ícono de balde de pintura.
   
2. Haz clic en Añadir color de fondo y elige un color de la paleta de colores de tu sitio o usa el ícono cuentagotas para seleccionar un color nuevo.

1. Haz clic en la segunda pestaña, el ícono de degradado.
   
2. Haz clic en Añadir degradado de fondo.
   Para cambiar los colores del degradado, haz clic en los puntos de parada del 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 parada te permiten añadir más colores al degradado. Haz clic en cualquier parte de la barra deslizante para añadir 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 la barra deslizante o escribiendo un valor numérico.

• Repetir degradado – Activa esta opción si quieres que el degradado se repita.

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

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

1. Haz clic en la tercera pestaña, el ícono de imagen.
   
2. 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 de paralaje – Para aplicar un efecto paralaje 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 la imagen de fondo – Elige el tamaño de tu imagen de fondo seleccionando una opción del menú desplegable.

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

• Repetir imagen de fondo – Elige si y cómo se repite la imagen de fondo desde el menú desplegable.

• Mezcla de la imagen de fondo – Elige cómo se mezcla la imagen de fondo con otras capas del módulo desde el menú desplegable.

1. Haz clic en la cuarta pestaña, el ícono de video.
   
2. 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 – Recomendamos subir ambas versiones, mp4 y webm, porque no todos los navegadores soportan el formato webm. Subir ambos formatos asegura que el video se reproduzca en todos los dispositivos y navegadores.

• Ancho del video de fondo – Establece el ancho del video escribiendo un valor numérico.

• Alto del video de fondo – Establece el alto del video escribiendo un valor numérico.

• Pausar video cuando otro video se reproduce – Si quieres que el video de fondo se pause cuando otro video está reproduciéndose, activa esta opción. Por defecto, el video se pausa cuando no está visible. Si quieres que el video continúe, desactiva esta opción.

Cómo Agregar un Patrón de Fondo

1. Haz clic en la quinta pestaña, el ícono de Patrón.
   
2. Haz clic en Agregar 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 colores de tu sitio o usa el ícono del cuentagotas para encontrar un nuevo color.

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

• Tamaño del Patrón – Aquí puedes seleccionar el tamaño del patrón: tamaño real, cubrir, ajustar, estirar para llenar o tamaño personalizado. Si seleccionas tamaño personalizado, aparecerán las opciones: ancho del patrón y alto del patrón. Arrastra el control deslizante o escribe un valor numérico para definir estas opciones.

• Origen de Repetición del Patrón – Selecciona el origen desde donde el patrón se repite.

• Desplazamiento Horizontal y Vertical del Patrón – Ajusta los desplazamientos horizontal y vertical para el patrón.

• Repetición del Patrón – Elige cómo se repite el patrón: horizontalmente, verticalmente, y más.

• 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 en el menú desplegable.

Cómo Agregar una Máscara de Fondo

1. Haz clic en la sexta pestaña, el ícono de Máscara.
   
2. Haz clic en Agregar Máscara de Fondo.

Selecciona el tipo de máscara que deseas 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 encontrar un nuevo color.

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

• Relación de Aspecto de la Máscara – Establece la relación de aspecto de la máscara. La relación de aspecto de una imagen es la proporción de su ancho con respecto a su alto.

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

• Modo de Mezcla de la Máscara – Define cómo la capa de la máscara interactúa con las capas debajo. Selecciona uno de los 16 modos de mezcla disponibles en el menú desplegable.

Etiqueta Administrativa

Pestaña Diseño

Superposición

• Color del Ícono de Superposición – Elige el color del ícono seleccionando desde la paleta de colores o usando el cuentagotas para un nuevo color.

• Color de Fondo de Superposición – Elige un color de fondo para el ícono desde la paleta o usando el cuentagotas.

• Ícono de Superposición – Elige entre cientos de íconos que vienen con Divi. Usa el botón filtro para ordenar íconos sólidos, íconos Divi y Font Awesome.

Imagen
Este grupo de configuraciones te permite estilizar la apariencia de las imágenes del producto.

• Esquinas Redondeadas de la Imagen – Para redondear las esquinas de la imagen, escribe un valor numérico. A mayor número, más redondeadas serán las esquinas. Los valores están vinculados automáticamente (lo indica el ícono de cadena azul resaltado); si quieres valores diferentes para cada esquina, haz clic en la cadena para desvincular.

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

• Ancho del Borde de la Imagen – Establece el grosor del borde. Debe ser al menos 1px para que se vea.

• Color del Borde de la Imagen – Selecciona el color del borde desde la paleta o usa el cuentagotas para un nuevo color.

• Estilo del Borde de la Imagen – Elige entre sólido, punteado, doble, entre otros.

• Sombra de Caja de la Imagen – Elige el estilo de sombra para la imagen (por defecto no hay sombra).

• Posición Horizontal de la Sombra – Controla la posición horizontal de la sombra.

• Posición Vertical de la Sombra – Controla la posición vertical de la sombra.

• Fuerza de Desenfoque de la Sombra – Controla el desenfoque de la sombra. Más alto es más desenfoque.

• Fuerza de Extensión de la Sombra – Controla la expansión de la sombra.

• Color de la Sombra – Elige el color de la sombra.

• Posición de la Sombra – Elige si la sombra es interna o externa.

• Tono de la Imagen – Ajusta el tono de la imagen.

• Saturación de la Imagen – Ajusta la saturación.

• Brillo de la Imagen – Ajusta el brillo.

• Contraste de la Imagen – Ajusta el contraste.

• Invertir Imagen – Invierte los colores de la imagen.

• Sepia de la Imagen – Ajusta el nivel de tono sepia aplicado.

• Opacidad de la Imagen – Controla la transparencia.

• Desenfoque de la Imagen – Controla qué tan borrosa está la imagen.

• Modo de Mezcla de la Imagen – Define cómo el módulo se mezcla con las capas debajo. Por defecto está en normal.

Calificación con Estrellas

• Alineación de la Calificación – Elige cómo se alinea la calificación: izquierda, centro, derecha, justificado.

• Color de la Calificación – Define el color de las estrellas desde la paleta o con el cuentagotas.

• Tamaño de la Calificación – Ajusta el tamaño escribiendo un número o usando el deslizador. Más alto es más grande.

• Espaciado de Letras de la Calificación – Ajusta el espacio entre letras. Más alto es más espacio.

Texto de la Insignia de Venta

• Color de la Insignia de Venta – Define el color desde la paleta o con el cuentagotas.

• Margen de la Insignia de Venta – Agrega margen externo escribiendo un número. Para bloquear proporciones iguales, haz clic en el ícono de cadena.

• Relleno de la Insignia de Venta – Agrega espacio interno escribiendo un número. Para bloquear proporciones, usa el ícono de cadena.

• Fuente de la Insignia de Venta – Elige la fuente para el texto. Puedes usar la predeterminada o subir una personalizada.

• Grosor de Fuente – Elige el grosor desde el menú desplegable.

• Estilo de Fuente – Elige entre itálica, mayúsculas, pequeñas mayúsculas, subrayado, tachado.

• Alineación del Texto de la Insignia – Elige cómo se alinea solo el texto: izquierda, centro, derecha, justificado.

• Color del Texto de la Insignia – Selecciona un color específico para el texto.

• Tamaño del Texto de la Insignia – Ajusta el tamaño del texto con el deslizador o número.

• Espaciado de Letras del Texto de la Insignia – Ajusta el espacio entre letras.

• Altura de Línea del Texto de la Insignia – Ajusta el espacio entre líneas.

• Sombra del Texto de la Insignia – Agrega sombra al texto. Puedes configurar dirección, fuerza y color.

• Esquinas Redondeadas de la Insignia – Redondea las esquinas escribiendo un número. Usa el ícono de cadena para vincular o desvincular valores.

• Estilos de Borde de la Insignia – Agrega borde a todos o lados específicos.

• Ancho del Borde – Ajusta grosor, mínimo 1px para verse.

• Color del Borde – Elige color del borde.

• Estilo del Borde – Elige tipo de borde (sólido, punteado, etc.).

• Sombra de Caja de la Insignia – Elige sombra para la insignia. Por defecto no hay sombra.

Texto
Aquí se configuran los estilos generales de texto del módulo, aunque puedes establecer estilos específicos en otros grupos como Texto del Título, Texto del Título del Producto, Texto del Precio y Texto del Precio en Oferta.

• Alineación del Texto – Izquierda, centro, derecha, justificado.

• Sombra del Texto – Aplica sombra a todo el texto del módulo.

Texto del Título
Configuraciones específicas para el texto del título.

• Fuente del Título – Elige la fuente del texto del título.

• Grosor de Fuente del Título – Selecciona el grosor.

• Estilo de Fuente del Título – Itálica, mayúsculas, pequeñas mayúsculas, subrayado, tachado.

• Alineación del Texto del Título – Izquierda, centro, derecha, justificado.

• **

Color del Texto del Título** – Selecciona color para el título.

• Tamaño del Texto del Título – Ajusta el tamaño.

• Espaciado de 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 – Agrega sombra al texto con configuraciones de dirección, fuerza y color.

Texto del Título del Producto

• Fuente del Título del Producto – Elige fuente para el texto del título del producto.

• Grosor de Fuente – Selecciona grosor.

• Estilo de Fuente – Itálica, mayúsculas, pequeñas mayúsculas, subrayado, tachado.

• Alineación del Texto – Izquierda, centro, derecha, justificado.

• Color del Texto – Selecciona color.

• Tamaño del Texto – Ajusta tamaño.

• Espaciado de Letras – Ajusta espacio entre letras.

• Altura de Línea – Ajusta espacio entre líneas.

• Sombra del Texto – Agrega sombra con opciones de dirección, fuerza y color.

Texto del Precio
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 fuente diferente o subir una fuente personalizada haciendo clic en el cuadro desplegable.

Peso de la Fuente del Precio – Haz clic en el 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úsculas

• 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 desde la paleta de colores de tu sitio o haz clic en el ícono del cuentagotas para encontrar un nuevo color.

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

Espaciado entre Letras del Precio – Elige el espaciado entre letras del texto del precio 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 Precio – Elige la altura de línea del texto del precio 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 del Precio – Añade una sombra proyectada al texto del precio. Una vez seleccionado un estilo, puedes configurar la dirección de la sombra (horizontal y vertical), la intensidad del desenfoque de la sombra y el color de la sombra.

Texto del Precio en Oferta
Fuente del Precio en Oferta – Elige la fuente para el texto del precio en oferta. La fuente predeterminada se selecciona automáticamente; sin embargo, puedes elegir una fuente diferente o subir una fuente personalizada haciendo clic en el cuadro desplegable.

Peso de la Fuente del Precio en Oferta – Haz clic en el desplegable para seleccionar el grosor de la fuente del texto del precio en oferta.

Estilo de la Fuente del Precio en Oferta – Elige el estilo de la fuente del texto del precio en oferta:

• Cursiva

• Mayúsculas

• Versalitas

• Subrayado

• Tachado

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

• Izquierda

• Centro

• Derecha

• Justificado

Color del Texto del Precio en Oferta – Elige un color específico para el texto del precio en oferta. Selecciona desde la paleta de colores de tu sitio o haz clic en el ícono del cuentagotas para encontrar un nuevo color.

Tamaño del Texto del Precio en Oferta – Elige el tamaño de la fuente del texto del precio en oferta arrastrando el control deslizante o escribiendo un valor numérico.

Espaciado entre Letras del Precio en Oferta – Elige el espaciado entre letras del texto del precio en oferta 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 Precio en Oferta – Elige la altura de línea del texto del precio en oferta 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 del Precio en Oferta – Añade una sombra proyectada al texto del precio en oferta. Una vez seleccionado un estilo, puedes configurar la dirección de la sombra (horizontal y vertical), la intensidad del desenfoque de la sombra y el color de la sombra.

Tamaño
Ancho – Define el ancho del módulo. Para más información, por favor revisa la documentación oficial.

Ancho Máximo – Define el ancho máximo del módulo. Para más información, por favor revisa la documentación oficial.

Alineación del Módulo – Si se establece un valor para Ancho o Ancho Máximo, la alineación del módulo puede ajustarse usando las 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. Para más información, por favor revisa la documentación oficial.

Altura – Define la altura del módulo. Para más información, por favor revisa la documentación oficial.

Altura Máxima – Define el valor máximo que la altura del módulo puede tener. Para más información, por favor revisa la documentación oficial.

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

Márgenes añaden espacio fuera del módulo, y relleno (padding) añade espacio dentro del módulo. Para bloquear proporciones y mantener los valores iguales, haz clic en el ícono de cadena entre los valores que deseas mantener siempre idénticos (por ejemplo, arriba y abajo).

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

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

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

Esquinas Redondeadas – Escribe un valor numérico para redondear las esquinas del borde. A mayor número, más redondeadas serán las esquinas. Los valores de las esquinas están vinculados automáticamente (como se ve por el ícono de cadena azul resaltado en el medio); sin embargo, si deseas tener diferentes valores para cada esquina, simplemente haz clic en el ícono de cadena azul para desvincular los valores. Si los valores están vinculados, siempre tendrán el mismo valor y se actualizarán automáticamente si uno de ellos cambia.

Estilos de Borde – Añade un borde a todos los lados del módulo o solo a lados individuales (arriba, derecha, abajo y izquierda).

Ancho del Borde – Establece el ancho del borde. Para un borde más grueso, aumenta el número. El ancho del borde debe ser al menos 1px para que se muestre.

Color del Borde – Elige el color del borde. Puedes seleccionar un color de la paleta predeterminada de tu sitio o hacer clic en el ícono del cuentagotas para encontrar un nuevo color.

Estilo del Borde – Selecciona el estilo del borde que prefieras: sólido, punteado, discontinuo, doble, canal, relieve, interior, exterior o ninguno.

Sombra de Caja

Posición Horizontal de la Sombra de Caja – Define la posición horizontal de la sombra proyectada.

Posición Vertical de la Sombra de Caja – Define la posición vertical de la sombra proyectada.

Intensidad del Desenfoque de la Sombra de Caja – Define la intensidad del desenfoque de la sombra. A mayor valor, mayor desenfoque, y la sombra será más amplia y ligera.

Intensidad de Expansión de la Sombra de Caja – Define la fuerza de expansión del desenfoque. Aumentar este valor incrementa la densidad de la sombra, resultando en una sombra más intensa.

Color de la Sombra – Define el color de la sombra.

Posición de la Sombra de Caja – Define la posición de la sombra. Puede estar dentro o fuera del módulo.

Filtros
Ajusta los filtros del módulo:

• Matiz – Define el ángulo del matiz de un color.

• Saturación – Define qué tan intensa debe ser la saturación del color.

• Brillo – Define qué tan brillante deben ser los colores.

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

• Invertir – Invierte el matiz, saturación y brillo por el valor especificado.

• Sepia – Da una apariencia más cálida, amarilla/marrón.

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

• Desenfoque – Define la cantidad de desenfoque gaussiano aplicado al módulo.

Modo de Mezcla se refiere a cómo el módulo se mezcla con las capas debajo. Por defecto, está seleccionado “normal”.

Transformación

• Escalar

• Trasladar

• Rotar

• Inclinar

• Puntos de origen

Navega por las opciones para acceder a cada una. 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.

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

• Retraso de la Animación – Define cuánto tiempo esperar antes de que comience la animación. La animación puede iniciar después de un retraso, inmediatamente o parcialmente en ejecució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 aceleración de la animación para crear un efecto más suave que una velocidad lineal.

• Repetición de la Animación – Por defecto, la animación solo se reproduce una vez. Si deseas que se repita continuamente, elige la opción “Bucle”.

Pestaña Avanzada

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 avanzadas o para aplicar código CSS personalizado usando la clase del módulo.

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

CSS Personalizado

• CSS Libre – Escribe CSS libre usando el selector palabra clave 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. Cuando haces clic en esta pestaña, verás secciones individuales donde puedes agregar propiedades CSS personalizadas.

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 en tu tienda antes, qué navegador usa, qué sistema operativo usa, y más.

Puedes añadir una condición o múltiples condiciones.

Visibilidad
Deshabilitar en – Define la visibilidad del módulo. Puedes deshabilitarlo (ocultarlo) cuando la ventana de visualización sea un Teléfono, Tablet o Computadora, marcando la casilla correspondiente.

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

• Visible – El contenido se mostrará si desborda la altura del módulo.

• Desplazamiento – Si el contenido desborda la altura del módulo, se usará una barra de desplazamiento vertical.

• Oculto – El contenido que desborda la altura del módulo estará oculto.

• Automático – El navegador decidirá si mostrar una barra de desplazamiento.

Desbordamiento Vertical – Define qué mostrar cuando el contenido desborda los bordes superior e inferior de un elemento de nivel bloque. Opciones idénticas al desbordamiento horizontal.

Transiciones
Controla la duración, retraso y 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 hover.

• Retraso de la Transición – Define el retraso (en milisegundos) de la animación hover.

• Curva de Velocidad de la Transición – Define la curva de velocidad de la animación hover.

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. El desplazamiento no afecta la posición de otros elementos, así que el espacio para el módulo en el diseño de la página es el mismo que si la posición fuera estática.

• Absoluta – El módulo se elimina del flujo normal del documento, y no se crea espacio para él 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 del documento, y no se crea espacio para él. Se posiciona en relación con la ventana del navegador, útil para crear módulos fijos o pegajosos.

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 de la página. Los módulos con un índice z mayor se superponen a los que tienen un índice menor.

Efectos de Desplazamiento

Además, puedes habilitar movimiento vertical en este módulo, lo que permite ajustar la velocidad del desplazamiento del elemento sin afectar los elementos circundantes.

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

Guarda Tu Diseño

Luego, Guarda el Diseño de la Página

Salir del Constructor Visual

Guardar Configuraciones del Constructor de Temas

Consejos para Usar el Módulo Divi Woo Related Products

• Configura el Módulo para Mostrar Productos Relacionados Basados en el Producto que se Está Visualizando
  Por defecto, el módulo muestra productos relacionados al producto que se está viendo. Sin embargo, si usas este módulo en una página de categoría, puedes seleccionar la categoría a la que quieres que se relacione.

• Añade un Módulo Woo Related Products a la Plantilla de tu Página de Producto
  El módulo funciona bien en páginas de productos porque ayuda a sugerir otros productos que tus usuarios podrían interesarles. Esto mejora la experiencia del usuario y puede ayudar a aumentar las ventas.

Más Información: Una Visión General de los Elementos Requeridos para tu Plantilla de Página de Producto Divi

Recursos Divi Woo Related Products

• Una Visión General de los Elementos Requeridos para tu Plantilla de Página de Producto Divi

• Cómo Instalar WooCommerce y Configurar tu Tienda

• Cómo Configurar los Ajustes de WooCommerce

• 5 Ideas de Personalización de Comercio Electrónico para WooCommerce

• Optimización de Rendimiento WooCommerce: 14 Consejos y Mejores Prácticas

• Guía Simple de las Páginas Predeterminadas