Cómo agregar, configurar y personalizar el módulo de Título de Producto Woo de Divi.

Los módulos WooCommerce de Divi facilitan diseñar páginas personalizables para comercio electrónico.

El módulo de Título de Producto Woo permite añadir y estilizar el título de un producto en cualquier parte de tu sitio web, incluyendo plantillas de página y construcciones de páginas regulares.

Instalar el plugin WooCommerce

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

Agregar el Módulo de Título de Producto Woo de Divi

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

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

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

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

Todos los Ajustes del Módulo de Título de Producto Woo de Divi Explicados

Estos ajustes están organizados en tres grupos mediante pestañas en la parte superior del módulo:

• Contenido

• Diseño

• Avanzado

Pestaña Contenido

Dentro de esta pestaña encontrarás las opciones de contenido del Módulo de Título de Producto Woo de Divi.

• Producto – Este ajuste te permite especificar a qué producto quieres que se relacione el módulo al mostrar el título del producto. Por defecto está configurado en Este Producto. Al construir una plantilla de página y usar el módulo de Título de Producto Woo, debes mantenerlo en Este Producto para que muestre dinámicamente los títulos según el producto que se esté viendo.

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

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

  • 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 pestaña nueva.

• Color de fondo

• Degradado de fondo

• Imagen de fondo

• Video de fondo

• Patrón de fondo

• Máscara de fondo

Cómo agregar un color de fondo

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

• Haz clic en Añadir color de fondo y elige un color desde la paleta de tu sitio o usa el cuentagotas para elegir 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 cuentagotas. Puedes añadir más colores haciendo clic en cualquier lugar de la barra deslizante.

Opciones de degradado:

• Tipo de degradado – cambia el tipo con el menú desplegable.

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

• Repetir degradado – activa esta opción para repetir el degradado.

• Unidad del degradado – cambia cómo se calculan los puntos del degradado.

• Colocar degradado sobre imagen de fondo – si tienes 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 de imagen de fondo:

• Usar efecto de paralaje – activa para que la imagen se desplace más rápido que el contenido delante, creando efecto 3D. Por defecto está desactivado.

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

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

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

• Mezcla de la imagen de fondo – elige cómo se mezcla la imagen con otras capas del módulo.

• Haz clic en la cuarta pestaña, el ícono de video.

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

Opciones de video de fondo:

• Mp4 vs Webm – se recomienda subir ambos formatos porque no todos los navegadores soportan Webm. Subir ambos asegura que el video se reproduzca en todos los dispositivos y navegadores.

• Ancho del video de fondo – escribe un valor numérico para definir el ancho.

• Alto del video de fondo – escribe un valor numérico para definir el alto.

• Pausar video cuando otro video se reproduzca – activa para pausar el video de fondo si otro video está en reproducción. Por defecto el video se pausa si no está visible. Desactiva para que continúe reproduciéndose.

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

Opciones de patrón de fondo:

• Color del patrón – selecciona el color desde la paleta o usa el cuentagotas.

• Transformar patrón – transforma horizontal, vertical, rota o invierte el patrón.

• Tamaño del patrón – elige el tamaño: tamaño real, cubrir, ajustar, estirar para llenar o tamaño personalizado.

• Origen de repetición del patrón – selecciona el origen desde donde se repite.

• Desplazamiento horizontal y vertical – ajusta los desplazamientos horizontal y vertical.

• Repetición del patrón – elige 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, elige entre 16 modos de mezcla.

• 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 de fondo:

• Color de la máscara – elige el color desde la paleta o usa el cuentagotas.

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

• Proporción de aspecto de la máscara – define la relación de ancho a alto.

• Tamaño de la máscara – elige el tamaño: tamaño real, cubrir, ajustar, estirar para llenar o tamaño personalizado.

• Modo de mezcla de la máscara – define cómo interactúa la máscara con las capas inferiores, elige entre 16 modos de mezcla.

Etiqueta administrativa

Pestaña Diseño

Aquí encontrarás todos los estilos y configuraciones de diseño para el módulo de Título de Producto Woo de Divi.

• Nivel de encabezado del texto – elige h1, h2, h3, h4, h5 o h6 para el título.

• Fuente del título – elige la fuente del título. Por defecto está seleccionada una fuente automática, pero puedes elegir otra o subir una personalizada.

• Peso de la fuente del título – selecciona el grosor de la fuente.

• Estilo de la fuente del título – elige el estilo:

  • Cursiva

  • Mayúscula

  • Versalitas

  • Subrayado

  • Tachado

• Alineación del texto del título – elige cómo se alinea el texto: izquierda, centro, derecha o justificado.

• Color del texto del título – elige un color del texto desde la paleta o usa el cuentagotas.

• Tamaño del texto del título – ajusta el tamaño con la barra o escribe un valor numérico.

• Espaciado entre letras del título – ajusta el espacio entre letras con la barra o valor numérico.

• Altura de línea del título – ajusta el espacio entre líneas con la barra o valor numérico.

• Sombra del texto del título – añade una sombra al texto. Al seleccionar un estilo, puedes configurar dirección (horizontal y vertical), intensidad del 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 para Ancho o Ancho Máximo, la alineación del módulo puede configurarse usando las 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 el valor máximo de altura que el módulo puede tener. Para más información, consulta la documentación oficial.

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

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

• Para bloquear las proporciones y mantener los valores iguales, haz clic en el icono de cadena entre los valores que quieras 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.

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

• Esquinas redondeadas – Introduce un valor numérico para redondear las esquinas del borde. A mayor número, más redondeadas estarán las esquinas. Los valores de las esquinas están vinculados automáticamente (como indica el icono de cadena azul); si quieres valores diferentes para cada esquina, haz clic en la cadena para desvincularlos.

• Estilos de borde – Añade borde a todos los lados o a lados individuales (arriba, derecha, abajo, izquierda).

• Ancho del borde - Establece el ancho del borde. Para un borde más grueso, aumenta el número. El ancho debe ser al menos 1 px para mostrarse.

• Color del borde – Escoge el color del borde desde la paleta de colores del sitio o usa el icono de cuentagotas para elegir un color nuevo.

• Estilo del borde – Selecciona el estilo de borde que quieras: sólido, discontinuo, punteado, doble, canal, relieve, incrustado, sobresaliente o ninguno.

Sombra de caja

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

• Fuerza del desenfoque de la sombra - Define la intensidad del desenfoque. A mayor valor, mayor desenfoque y sombra más amplia y suave.

• Fuerza de propagación de la sombra - Define la densidad de la sombra. Aumentar este valor intensifica 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.

Filtros
Ajusta los filtros del módulo:

• Tono - Define el ángulo del tono del color.

• Saturación - Define la intensidad de la saturación del color.

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

• Contraste - Define qué tan marcado será el contraste entre áreas claras y oscuras.

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

• Sepia - Da un tono más cálido, amarillento/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.

• Modo de fusión - Define cómo se mezcla el módulo con las capas debajo. Por defecto, normal.

Transformar

• Escalar

• Trasladar

• Rotar

• Inclinar

• Puntos de origen

Navega por las opciones con tabulador. Configura cada opción con valores numéricos o arrastrando/expandiendo el cuadro o círculo.

Puedes bloquear los valores para que siempre sean idénticos haciendo clic en el icono de cadena en la parte inferior derecha.

Animación
Aplica animación al módulo. Al elegir un estilo, puedes ajustar:

• Duración de la animación - Define el tiempo que tarda la animación en completar un ciclo.

• Retraso de la animación - Define el tiempo que pasa desde que se aplica la animación hasta que comienza. Puede empezar después, inmediatamente o en mitad de la animación.

• Opacidad inicial de la animación - Define el valor de opacidad al inicio.

• Curva de velocidad de la animación - Define la suavidad de la animación al comenzar y terminar, para un efecto más fluido que una velocidad lineal.

• Repetición de la animación - Por defecto, la animación se reproduce una vez. Para repetirla continuamente, elige la opción de bucle.

Pestaña Avanzada

• Puedes aplicar CSS personalizado directamente al módulo.

• Puedes añadir clases y IDs CSS para personalizar estilos avanzados o usar código CSS externo.
  

CSS personalizado

• CSS libre - Escribe CSS usando el selector “selector” para apuntar a este módulo. Ejemplo:
  selector h1 {color: red;}

• Elementos del módulo - Puedes aplicar CSS personalizado a secciones específicas dentro del módulo.

Condiciones
Las condiciones de visualización te permiten elegir cuándo mostrar este módulo según ciertas reglas, como si el usuario ya compró antes, navegador, sistema operativo, etc.

Puedes añadir una o varias condiciones.

Visibilidad

• Desactivar en - Define la visibilidad del módulo. Puedes ocultarlo en teléfonos, tablets o computadoras al marcar la casilla correspondiente.

• Desbordamiento horizontal - Controla qué sucede cuando el contenido del módulo excede los bordes izquierdo o derecho:

  • Visible: se muestra todo el contenido que sobresale.

  • Desplazamiento: aparece una barra de desplazamiento horizontal.

  • Oculto: se oculta el contenido que excede.

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

• Desbordamiento vertical - Controla qué sucede cuando el contenido excede los bordes superior o inferior:

  • Visible

  • Desplazamiento (barra vertical)

  • Oculto

  • Automático

• Duración de la transición (en milisegundos)

• Retraso de la transición (en milisegundos)

• Curva de velocidad de la transición

Posición
Define la posición del módulo:

• Relativa (valor predeterminado) - Posicionado según el flujo normal del documento, con desplazamientos relativos a sí mismo. No afecta la posición de otros elementos.

• Absoluta - El módulo se saca del flujo normal y se posiciona relativo al ancestro posicionado más cercano o al contenedor inicial.

• Fija - El módulo se saca del flujo y se posiciona relativo a la ventana del navegador, útil para módulos “pegajosos”.

• Desplazamiento vertical - Posición vertical del módulo.

• Desplazamiento horizontal - Posición horizontal del módulo.

• Índice z - Orden del módulo en la página; módulos con mayor índice se superponen a los de menor.

Efectos de desplazamiento

• Puedes hacer que el módulo sea “pegajoso” arriba, abajo o ambos.

• Decide si el módulo debe transformarse mientras se desplaza.

• Activa movimiento vertical para ajustar la velocidad del scroll sin afectar elementos cercanos.

• El disparador de efecto de movimiento define cuándo se activa el efecto según la posición del elemento (arriba, medio o abajo en la vista).

Guardar tu diseño

Guardar el diseño de la página

• En Mac, presiona CMD + S

• En PC, presiona CTRL + S

• O usa la barra de herramientas inferior de Divi: haz clic en el icono morado con tres puntos para expandir y luego en el botón verde de guardar.

Salir del constructor visual

Más recursos Divi WooCommerce

• Cómo instalar WooCommerce y configurar tu tienda

• Cómo configurar ajustes de WooCommerce

• 5 ideas para personalizar WooCommerce

• Optimización del rendimiento de WooCommerce: 14 consejos

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

• Buenas prácticas para actualizar WooCommerce

Continúa aprendiendo