El módulo Divi Woo Breadcrumbs se integra con WooCommerce y ayuda a los clientes a navegar fácilmente por tu tienda.

Usar Woo Breadcrumbs en tu tienda en línea ayudará a los clientes a orientarse y les permitirá regresar a páginas anteriores aún más fácilmente.

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.

Añadir el módulo Divi Woo Breadcrumbs (migas de pan)

• 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 Woo Modules para ver todos los módulos Woo de Divi.

• Haz clic en el módulo Woo Breadcrumbs para añadirlo a tu página.

Explicación de todos los ajustes del módulo Divi Woo Breadcrumbs

Una vez agregado, la ventana modal de Ajustes del módulo aparecerá automáticamente. Aquí es donde se configura el contenido y los estilos de diseño del módulo.

Estos ajustes están organizados en tres grupos mediante las 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 disponibles para este módulo.

• Producto – Selecciona a qué producto se relacionará la ruta de migas (breadcrumb). Por defecto, está configurado en Este Producto, que es el producto que se está visualizando.

• Texto de inicio – Especifica qué texto se mostrará como el primer ítem en el módulo de migas. Por defecto, el texto es Inicio.

• Enlace de inicio – Define el enlace para el primer ítem en las migas. Usar “/” siempre enlazará a la página principal.

• Separador – Selecciona el separador que deseas usar entre cada ítem de la ruta. El separador predeterminado es “/”. Sin embargo, puedes usar >, -, ➝ u otros símbolos adecuados.

Enlace

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

• URL del enlace del módulo – Pega la URL a la que quieres que lleve este módulo entero. 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 – Define si el enlace se abre en una nueva pestaña o en la misma ventana:

  • En la misma ventana – el enlace se abre en la misma ventana.

  • En una nueva pestaña – el enlace se abre en una pestaña nueva.

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 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 un color de la paleta de tu sitio, o usa el ícono de cuentagotas para seleccionar un color nuevo.

Cómo añadir 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 cuentagotas para elegir uno nuevo. Puedes añadir más puntos al degradado haciendo clic en cualquier parte de la barra del deslizador.

Opciones del degradado:

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

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

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

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

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

Cómo añadir 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 multimedia y seleccionar o subir una imagen.

Opciones de imagen de fondo:

• Usar efecto parallax – Activa para que la imagen se desplace a diferente velocidad que el contenido (efecto 3D).

• Tamaño de la imagen de fondo – Selecciona el tamaño de la imagen.

• Posición de la imagen de fondo – Selecciona la posición de la imagen.

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

• Modo de fusión de la imagen de fondo – Define cómo se mezcla la imagen con otras capas.

Cómo añadir 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 multimedia y seleccionar o subir un video.

Opciones de video de fondo:

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

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

• Alto del video de fondo – Establece la altura en valor numérico.

• Pausar video cuando otro video se reproduce – Activa para pausar este video cuando se reproduzca otro. Por defecto, el video se pausa cuando no está en vista.

Cómo añadir 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 desde el menú desplegable.

Opciones de patrón de fondo:

• Color del patrón – Selecciona el color o usa el cuentagotas para un color nuevo.

• Transformar patrón – Puedes rotar, invertir o transformar horizontal/verticalmente.

• Tamaño del patrón – Selecciona tamaño real, cubrir, ajustar, estirar o tamaño personalizado.

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

• Desplazamiento horizontal y vertical del patrón – Ajusta el desplazamiento horizontal y vertical.

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

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

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
3. Selecciona el tipo de máscara que desees a través del 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 ícono de cuentagotas para seleccionar un color nuevo.

• 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 entre su ancho y su altura.

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

• Modo de fusión 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 fusión disponibles en el menú desplegable.

---

Etiqueta de administración

La Etiqueta de Administración es donde puedes darle un nombre al módulo que solo será visible para ti, para ayudar a mantener todo organizado y fácil de entender en el backend. Por defecto, la etiqueta de administración será el nombre del módulo. Puedes cambiar el texto para que refleje lo que desees.

---

Pestaña Diseño

Dentro de esta pestaña encontrarás todos los estilos y configuraciones de diseño para este módulo.

---

Texto

Aquí puedes dar estilo al texto de este módulo.

• Fuente del texto – Elige la fuente que deseas usar para el texto. La fuente predeterminada está seleccionada automáticamente; sin embargo, puedes elegir una fuente diferente o subir una personalizada desde el menú desplegable.

• Peso de la fuente – Selecciona el grosor de la fuente desde el menú desplegable.

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

  • Cursiva

  • Mayúsculas

  • Versales

  • Subrayado

  • Tachado

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

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

• Espaciado entre letras – Ajusta el espacio entre cada letra arrastrando el deslizador o escribiendo un valor numérico. Mientras más alto el número, más espacio habrá.

• Altura de línea – Ajusta el espacio entre líneas de texto arrastrando el deslizador o escribiendo un valor numérico. Mientras más alto el número, más espacio habrá.

• Sombra del texto – Agrega sombra al texto. Una vez seleccionado un estilo, puedes configurar la dirección (horizontal y vertical), la intensidad del desenfoque y el color de la sombra.

• Alineación del texto – Elige la alineación del texto:

  • Izquierda

  • Centro

  • Derecha

  • Justificado

---

Tamaño

• 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 ha definido un ancho o ancho máximo, la alineación del módulo puede ajustarse con las siguientes opciones:

  • Alineado a la izquierda

  • Centrado

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

---

Espaciado

Puedes agregar márgenes o relleno al módulo escribiendo valores numéricos.

• 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 ícono de cadena entre los valores que deseas mantener iguales (ejemplo: arriba y abajo).

• Los valores predeterminados de margen y relleno son 0.

---

Borde

Agrega un borde al módulo. Puedes agregar un borde completo o solo en un lado.

• Ajusta el ancho del borde con el deslizador y selecciona un color.

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

• Esquinas redondeadas – Escribe un valor numérico para redondear las esquinas. Mientras más alto el número, más redondeadas serán las esquinas. Los valores están enlazados automáticamente, pero puedes desvincularlos haciendo clic en el ícono de cadena azul.

• Estilos de borde – Agrega borde a todos los lados o solo a uno (arriba, derecha, abajo, izquierda).

• Ancho del borde – Establece el ancho del borde. Debe ser al menos 1 px para que se muestre.

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

• Estilo de borde – Elige el estilo: sólido, discontinuo, punteado, doble, ranurado, en relieve, inset, outset o ninguno.

---

Sombra de caja

Agrega una sombra al módulo completo. Una vez seleccionado un estilo, puedes personalizar:

• Posición horizontal – Define la posición horizontal de la sombra.

• Posición vertical – Define la posición vertical de la sombra.

• Fuerza de desenfoque – Define qué tan difusa será la sombra. Mientras más alto el valor, más grande y suave será la sombra.

• Fuerza de expansión – Define la densidad de la sombra. Más densidad produce una sombra más intensa.

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

• Posición de la sombra – Puede estar 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 saturación del color.

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

• Contraste – Define la distinción entre áreas claras y oscuras.

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

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

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

• Desenfoque – Aplica un desenfoque gaussiano al módulo.

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

Transformar

1. Escalar
   

1. Trasladar
2. Rotar
3. Inclinar
4. Puntos de origen

Navega con la tecla Tab para acceder a cada opción. Configura cada opción ingresando valores numéricos o arrastrando y ampliando 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 elijas un estilo, podrás ajustar las siguientes opciones:

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

• Retraso de la animación - Define cuánto tiempo esperar desde que se aplica la animación antes de comenzar a ejecutarla. La animación puede empezar más tarde, inmediatamente desde el principio o inmediatamente y a mitad de la animación.

• Opacidad inicial de la animación - Define el valor de opacidad con el que comienza la animación.

• Curva de velocidad de la animación - Define el método de aceleración de la animación. Suavizar la entrada y salida de la animación crea un efecto más fluido que una curva de velocidad lineal.

• Repetición de la animación - Por defecto, las animaciones se reproducen una sola vez. Si deseas que la animación se repita continuamente, selecciona la opción de bucle (Loop).

Pestaña Avanzada

Dentro de la pestaña Avanzada encontrarás opciones que diseñadores web con más experiencia podrían encontrar útiles, como CSS personalizado.

Aquí puedes aplicar CSS personalizado a tu módulo. También puedes asignar clases e IDs CSS personalizadas al módulo, las cuales pueden usarse para personalizar los estilos del módulo con propiedades CSS avanzadas o para aplicar código CSS personalizado usando la clase del módulo.

---

ID y Clases CSS

Asigna un ID o clase CSS específicos 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 "selector" para dirigirte a este módulo. Ejemplo:
  selector h1 {color: red;}

• Elementos del módulo - También puedes aplicar CSS personalizado a este módulo pegándolo en esta pestaña. Al hacer clic en la pestaña de Elementos del módulo, 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 basándote en un conjunto de condiciones, como cuándo un usuario visita la página, si ya ha comprado antes en tu tienda, qué navegador está usando, qué sistema operativo utiliza y más.

Puedes agregar una o varias condiciones.

---

Visibilidad

• Desactivar en - Define la visibilidad del módulo. Puedes desactivarlo (ocultarlo) en teléfonos, tablets o computadoras haciendo clic en la casilla correspondiente.

• Desbordamiento horizontal - Define qué se muestra 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, aparecerá una barra de desplazamiento vertical para navegar el contenido.

  • Oculto - Si el contenido desborda la altura, la parte que sobresalga se ocultará.

  • Automático - El navegador decide si mostrar o no la barra de desplazamiento.

• Desbordamiento vertical - Define qué se muestra cuando el contenido desborda los bordes superior e inferior de un elemento de nivel bloque. Puede ser:

  • Visible

  • Desplazamiento

  • Oculto

  • Automático

Transiciones

Controla la duración, el retraso y la curva de velocidad de la animación al pasar el cursor (hover).

• 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 transición de la animación hover.

• Curva de velocidad de la transición - Define la curva de velocidad de la transición de la animación hover.

Posición

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

  • Relativa (valor predeterminado) - El módulo se posiciona según el flujo normal del documento y los valores de desplazamiento vertical y horizontal son relativos a sí mismo. El desplazamiento no afecta la posición de otros elementos, por lo que el espacio asignado en el diseño es el mismo que si la posición fuera estática.

  • Absoluta - El módulo se elimina del flujo normal del documento y no crea espacio en el diseño. Se posiciona respecto a su ancestro más cercano con posición establecida o el contenedor inicial. Las opciones de ubicación determinan su posición final.

  • Fija - El módulo se elimina del flujo normal y no crea espacio. Se posiciona en relación con la ventana del navegador. Esto puede usarse para crear un módulo fijo (sticky).

• 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. Módulos con índice Z más alto se superponen a módulos con índice menor.

---

Efectos de desplazamiento

Esta sección define el comportamiento del módulo cuando el usuario desplaza la página. Puedes hacer que el módulo se quede fijo en la parte superior, inferior o ambos lados y decidir si el módulo debe transformarse mientras se desplaza.

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

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

---

Guardar y salir

Cuando termines de diseñar y configurar el módulo contador, haz clic en la flecha verde en la parte inferior derecha del módulo para guardar tu diseño. Si cierras el módulo sin guardar, se perderán los cambios.

---

Guardar el diseño de la página

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

---

Salir del constructor visual

Una vez que todos tus cambios estén guardados, haz clic en “Salir del Constructor Visual” en la barra de administración superior para salir del constructor visual.

---

Más recursos del módulo Divi Woo Breadcrumbs

• Cómo instalar WooCommerce y configurar tu tienda

• Cómo configurar ajustes de WooCommerce

• 5 ideas de personalización eCommerce para WooCommerce

• Optimización del rendimiento de WooCommerce: 14 consejos y mejores prácticas

• Una guía simple para las páginas predeterminadas de WooCommerce

• Actualización de WooCommerce: mejores prácticas para seguir siempre

---

Continúa aprendiendo

Mantente actualizado con nuestros últimos tutoriales de Divi Woo Breadcrumbs visitando nuestra página de Woo Breadcrumbs.