El Módulo Meta de Producto Divi Woo muestra información del producto, como el número SKU, la categoría del producto y las etiquetas del producto.

Meta de Producto Divi Woo

Este módulo extrae información de la sección de Inventario en la lista de productos (el número SKU) y las etiquetas y categorías del producto.

Instalar el plugin WooCommerce

• 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 Meta de Producto 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 Título de Producto Woo para agregarlo a tu página.

Todas las Opciones del Módulo Meta de Producto Divi Woo Explicadas

Una vez agregado, la ventana modal de Configuración del módulo aparecerá automáticamente. 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

Pestaña Contenido

Aquí encontrarás las opciones de contenido para el Módulo Meta de Producto Divi Woo.

Contenido
El primer grupo de configuraciones también se llama Contenido, donde puedes controlar el tipo de contenido que se muestra y cómo.

• Producto – Especifica a qué producto quieres que se relacione el módulo cuando muestre los metadatos del producto. Por defecto, está configurado en Este Producto. Para nuestros propósitos, dejaremos esta opción en Este Producto para que muestre dinámicamente los metadatos del producto basado en el producto que se está visualizando.

• Separador – Escribe el separador que deseas entre cada elemento del módulo. Por ejemplo, | o +, etc.

• Mostrar SKU – Activa o desactiva esta opción para mostrar u ocultar el número SKU.

• Mostrar Categorías – Activa o desactiva esta opción para mostrar u ocultar las categorías del producto.

• Mostrar Etiquetas – Activa o desactiva esta opción para mostrar u ocultar las etiquetas del producto.

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

• Destino del enlace del módulo – Definir un destino de enlace determina 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 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 Añadir un Color de Fondo

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

• Haz clic en Añadir color de fondo y elige de la paleta de colores de tu sitio, o usa el ícono del cuentagotas para encontrar 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 de parada del degradado y selecciona un color de la paleta de colores de tu sitio o usa el cuentagotas para elegir un nuevo color. Los puntos de parada permiten agregar más colores al degradado. Haz clic en cualquier lugar de la barra deslizante para añadir un nuevo punto.

Opciones del 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 para que el degradado se repita.

• Unidad de degradado – La unidad del degradado cambia cómo se calculan los puntos de parada del degradado. Selecciona el desplegable para cambiar la unidad.

• Colocar degradado sobre imagen de fondo – Si hay una imagen de fondo aplicada, puedes colocar el degradado sobre la imagen 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 foto ya subida o subir una nueva.

Opciones de imagen de fondo

• Usar efecto Parallax – Para aplicar un efecto parallax a la imagen (donde la imagen se desplaza más rápido que el contenido frontal, dando la ilusión de un efecto 3D), activa esta opción. Por defecto está desactivada.

• Tamaño de la imagen de fondo – Elige el tamaño de la imagen de fondo desde el 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 imagen de fondo – Elige cómo se mezcla la imagen de fondo con otras capas del módulo desde el menú desplegable.

• 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 – Recomendamos subir una versión mp4 y una versión webm del video porque no todos los navegadores soportan 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 la altura del video escribiendo un valor numérico.

• Pausar video cuando otro video se reproduzca – Si deseas que el video de fondo se pause cuando otro video se esté reproduciendo, activa esta opción. Por defecto, el video se pausará cuando no esté visible. Si quieres que continúe, desactívala.

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

Opciones de patrón de fondo

• Color del patrón – Selecciona el color del patrón de la paleta de colores de tu sitio o usa el cuentagotas para elegir un nuevo color.

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

• Tamaño del patrón – Selecciona el tamaño del patrón: tamaño real, cubrir, ajustar, estirar para llenar o tamaño personalizado. Si eliges tamaño personalizado, aparecerán opciones para ancho y alto del patrón. Usa la barra deslizante o escribe un valor numérico.

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

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

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

• Modo de mezcla del patrón – Define cómo la capa del patrón interactúa con las capas inferiores. Selecciona uno de los 16 modos de mezcla disponibles.

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

Opciones de máscara de fondo

• Color de la máscara – Elige el color de la máscara de la paleta de colores de tu sitio o usa el cuentagotas para elegir 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 – Define la relación de aspecto (ancho a alto) de la máscara.

• 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 opciones para ancho y alto de la máscara. Usa la barra deslizante o escribe un valor numérico.

• Modo de mezcla de la máscara – Define cómo la capa de la máscara interactúa con las capas inferiores. Selecciona uno de los 16 modos de mezcla disponibles.

Etiqueta de administración
La etiqueta de administración es donde puedes darle un nombre al módulo que solo tú verás para ayudarte a mantener las cosas organizadas y fáciles de entender en el backend. Por defecto, la etiqueta de administración será el nombre del módulo. Puedes cambiar el texto de esta etiqueta para reflejar lo que desees.

Diseño
Aquí puedes seleccionar la disposición para este módulo.

• En línea – Selecciona esta opción si quieres que los elementos estén en línea (una sola línea de texto).

• Apilados – Selecciona esta opción si quieres que los elementos estén apilados verticalmente.

---

• Fuente Meta – Elige la fuente que quieres usar para el texto meta. La fuente predeterminada se selecciona automáticamente, pero puedes elegir una fuente diferente o subir una personalizada haciendo clic en el menú desplegable.

• Grosor de Fuente Meta – Selecciona el grosor de la fuente del texto meta.

• Estilo de Fuente Meta – Elige el estilo de la fuente para el texto meta:

  • Cursiva

  • Mayúscula inicial

  • Versales

  • Subrayado

  • Tachado

• Alineación del Texto Meta – Elige la alineación del texto específicamente para el texto meta:

  • Izquierda

  • Centro

  • Derecha

  • Justificado

• Color del Texto Meta – Escoge un color específico para el texto meta. Selecciona del paleta de colores de tu sitio o usa el icono del cuentagotas para encontrar un nuevo color.

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

• Espaciado entre Letras Meta – Elige el espaciado entre letras del texto meta arrastrando el deslizador o escribiendo un valor numérico. El espaciado es el espacio entre cada letra; a mayor número, más espacio.

• Altura de Línea Meta – Elige la altura de línea del texto meta arrastrando el deslizador 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 Meta – Agrega una sombra al texto meta. 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.

• 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 ancho o ancho máximo, la alineación del módulo puede configurarse 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, 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.

• El margen agrega espacio fuera del módulo, y el relleno agrega espacio dentro del módulo.

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

• Esquinas redondeadas – Escribe un valor numérico si quieres bordes redondeados. A mayor número, más redondeadas las esquinas. Los valores están vinculados automáticamente (como se muestra en la cadena azul resaltada), pero si quieres diferentes valores para cada esquina, haz clic en la cadena azul para desvincularlos.

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

• Ancho del Borde – Define el ancho del borde. Para un borde más grueso, aumenta el número. El ancho 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 usar el cuentagotas para elegir uno nuevo.

• Estilo del Borde – Selecciona el estilo del borde que deseas: sólido, discontinuo, punteado, doble, ranurado, en relieve, hundido, 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 de Desenfoque de la Sombra – Define la intensidad del desenfoque. A mayor valor, mayor desenfoque y sombra más amplia y ligera.

• Fuerza de Expansión de la Sombra – Define la densidad de la sombra. Al aumentar, la sombra se vuelve más intensa.

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

• Posición de la Sombra – Define si la sombra estará dentro o fuera del módulo.

Filtros

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

• Saturación – Define la intensidad del color.

• Brillo – Define qué tan brillantes son los colores.

• Contraste – Define la diferencia entre áreas claras y oscuras.

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

• Sepia – Define un aspecto más cálido, amarillento/marrón.

• Opacidad – Define cuán transparente u opaco debe ser el fondo (color, degradado, imagen, etc.).

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

El modo de fusión indica cómo el módulo se mezcla con las capas debajo. Por defecto, está en normal.

• Escalar

• Trasladar

• Rotar

• Sesgar

• Puntos de origen

Navega con tabulador para acceder a cada opción. Configura cada opción ingresando valores numéricos o arrastrando y expandiendo la caja o círculo.

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

• 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 antes de iniciar la animación. Puede empezar más tarde, inmediatamente o parte 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 el método de aceleración de la animación para 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. Para que se repita continuamente, elige la opción de bucle.