Cómo crear un mega menú personalizado de comercio electrónico con el generador de temas de Divi

Al crear un sitio web de comercio electrónico con Divi y WooCommerce, existen muchas formas de personalizar el aspecto general de su sitio web. Los módulos WooCommerce de Divi en combinación con Divi Theme Builder le permiten crear plantillas para sus páginas de productos, páginas de categorías y más. Pero además de asegurarse de que la estructura de su sitio web y las páginas de WooCommerce estén listas para su lanzamiento, también es importante pensar en la experiencia de navegación que tendrán los visitantes. El menú que crea para su sitio web de comercio electrónico establece el tono para el comportamiento de compra de sus visitantes en su sitio web.

Para ayudar a que su sitio web de comercio electrónico alcance su máximo potencial, le mostraremos cómo crear un mega menú de comercio electrónico personalizado con el Creador de temas de Divi. Construiremos todo visualmente, usando los elementos integrados de Divi, y usaremos los elementos como menús desplegables con algo de código. Con este enfoque, podrá crear cualquier tipo de mega menú de comercio electrónico para los sitios web de comercio electrónico que cree. También podrá descargar el archivo JSON de forma gratuita.

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Descargue el diseño del mega menú de comercio electrónico GRATIS

Para tener en sus manos el diseño del mega menú de comercio electrónico gratuito, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

Cómo cargar el archivo JSON

Descomprima la carpeta comprimida que pudo descargar arriba. Luego, navegue a su sitio web de WordPress> Divi> Divi Library y cargue el JSON.

Una vez que su diseño se guarda en la Biblioteca Divi, puede navegar hasta Divi Theme Builder e importar el diseño guardado haciendo clic en "Agregar encabezado global" o "Agregar encabezado personalizado" y seleccionando "Crear encabezado global / personalizado". Vaya a la pestaña "Sus diseños guardados" en la biblioteca de Divi, seleccione el diseño que ha subido en el paso anterior y guarde todos los cambios de Divi Theme Builder.

Para tener un menú funcional desde el principio, se le pedirá que siga la primera parte de este tutorial a continuación; agregar las clases de CSS a los elementos del menú a nivel individual. También deberá habilitar una de las clases CSS dentro del Módulo de código como se muestra en la parte 5 de este tutorial. Si los íconos no se muestran correctamente, asegúrese de verificar el contenido del ícono dentro del Módulo de código. Los iconos deben contener el contenido "\ 4c" y "\ 21", como puede observar en la pantalla de impresión a continuación.

1. Agregar clases CSS a los elementos del menú

Ir a los menús en Apariencia

En la primera parte de este tutorial, asignaremos dos clases CSS diferentes a los elementos del menú al que queremos agregar un mega menú desplegable. Para hacer eso, vaya a los menús en la configuración de apariencia de su panel de WordPress.

Habilitar la opción de clase CSS

Asegúrese de que la opción de clase de CSS esté habilitada en la parte superior alternando las opciones de pantalla y habilitando la opción de clases de CSS.

Agregue clases de CSS consecutivas a los elementos del menú que necesitan un menú desplegable

Cada uno de los elementos del menú al que desea asignar un mega menú desplegable necesita dos clases de CSS. Primero, una clase CSS general que se llama "primer nivel". La segunda clase CSS contiene un número consecutivo al final, "primer nivel-1", "primer nivel-2", "primer nivel-3", etc.

• Primer elemento del menú que contiene el menú desplegable: primer nivel, primer nivel-1
• Segundo elemento del menú que contiene el menú desplegable: primer nivel, primer nivel-2
• Tercer elemento del menú que contiene el menú desplegable: primer nivel, primer nivel-3

2. Cree un encabezado global con el generador de temas de Divi

Vaya a Divi Theme Builder y comience a crear un encabezado global

Una vez que los elementos del menú estén en su lugar, es hora de cambiar a Divi. Crearemos un nuevo encabezado global navegando a nuestro Divi Theme Builder y haciendo clic en "Agregar encabezado global". Construiremos el encabezado global desde cero.

Configuración de la sección # 1

Espaciado

Una vez dentro del editor de plantillas, verá una sección. Abra esa sección y elimine todo el relleno superior e inferior predeterminado.

• Relleno superior: 0px
• Acolchado inferior: 0px

Visibilidad

A continuación, oculte esta sección en la tableta y el teléfono. Solo mantenemos esta sección en tamaños de pantalla más grandes para asegurarnos de que la experiencia de navegación en tamaños de pantalla más pequeños no se vuelva abrumadora.

Agregar fila n. ° 1

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de fila y cambie la configuración de tamaño de la siguiente manera:

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ecualizar alturas de columna: Sí
• Ancho: 95%
• Ancho máximo: 100%

Espaciado

A continuación, elimine todo el acolchado superior e inferior predeterminado.

• Relleno superior: 0px
• Acolchado inferior: 0px

Agregar módulo de imagen a la columna 1

Subir logotipo

Es hora de agregar módulos, comenzando con un Módulo de imagen en la columna 1. Cargue su logotipo.

Espaciado

Pase a la pestaña de diseño del módulo y agregue un margen superior.

• Margen superior: 3%

Agregar módulo de texto a la columna 2

Agregar contenido

A la siguiente columna. Agregue un módulo de texto con algún contenido de su elección.

Configuración de texto

Vaya a la pestaña de diseño del módulo y cambie la configuración del texto de la siguiente manera:

• Fuente de texto: Oswald
• Peso de la fuente del texto: Medio
• Estilo de fuente de texto: mayúsculas
• Color del texto: # 000000
• Tamaño del texto: 19px

Espaciado

Agregue un poco de margen superior e inferior también.

• Margen superior: 5%
• Margen inferior: 5%

Clonar el módulo de texto dos veces y colocar los duplicados en las columnas 3 y 4

Cambiar copia

Una vez que haya completado el primer módulo de texto en la columna 2, puede clonarlo dos veces y colocar los duplicados en las columnas 3 y 4. Asegúrese de cambiar el contenido en ambos módulos duplicados.

Agregar sección n. ° 2

Espaciado

Agrega otra sección justo debajo de la anterior. Abra la configuración de la sección y elimine todo el relleno superior e inferior predeterminado.

• Relleno superior: 0px
• Acolchado inferior: 0px

Agregar fila n. ° 2

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de fila y modifique la configuración de tamaño de la siguiente manera:

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ancho: 100%
• Ancho máximo: 100%

Espaciado

A continuación, elimine todo el acolchado superior e inferior predeterminado.

• Relleno superior: 0px
• Acolchado inferior: 0px

Frontera

Luego, vaya a la configuración del borde y aplique un borde superior e inferior.

• Ancho del borde superior:
  • Escritorio: 2px
  • Tableta y teléfono: 0px
• Ancho del borde inferior: 2px
• Color del borde: # ff6600

Agregar módulo de menú a la columna

Seleccione el menú

Agregue un módulo de menú a la columna de la fila y seleccione un menú de su elección.

Agregar logotipo en tableta y teléfono

Luego, agregue un logotipo en la tableta y el teléfono habilitando las opciones de respuesta y cargando el archivo de imagen de su logotipo. Deje el área del escritorio vacía.

Elementos

También habilitamos el carrito de compras y los íconos de búsqueda.

• Mostrar icono de carrito de compras: Sí
• Mostrar icono de búsqueda: Sí

Configuración del texto del menú

Vaya a la pestaña de diseño y cambie la configuración del texto del menú de la siguiente manera:

• Fuente del menú: Oswald
• Estilo de fuente del menú: mayúsculas
• Color del texto del menú: # 000000
• Tamaño del texto del menú: 19px

Configuración de texto del menú desplegable

También estamos cambiando el color de la línea del menú desplegable.

• Color de la línea del menú desplegable: #ffffff

Configuración de iconos

Junto con la configuración de los iconos.

• Color del icono del carrito de compras: # ff6600
• Color del icono de búsqueda: # ff6600
• Color del icono del menú de hamburguesas: # ff6600

Clase CSS

Complete la configuración del módulo agregando una clase CSS. Usaremos esta clase CSS más adelante en el tutorial cuando agreguemos el código.

• Clase CSS: menú de categorías

3. Crear una plantilla de encabezado interior de fila desplegable

Agregar nueva sección (dedicada al menú desplegable del primer elemento del menú)

Dimensionamiento

Ahora que tenemos nuestro menú en su lugar, es hora de pasar a la siguiente parte del tutorial que se dedica a crear los menús desplegables del mega menú de comercio electrónico. Para crear el primer mega menú desplegable de comercio electrónico, agregaremos una nueva sección. Abra la configuración de la sección y asegúrese de que el ancho y el ancho máximo estén configurados al 100% en la configuración de tamaño.

• Ancho: 100%
• Ancho máximo: 100%

Espaciado

A continuación, elimine todo el acolchado superior e inferior predeterminado.

• Relleno superior: 0px
• Acolchado inferior: 0px

Clase CSS

Luego, agregue dos clases de CSS. El número al final de la segunda clase de CSS es el mismo número que el número utilizado para el primer elemento del menú en la primera parte de este tutorial.

• Clase CSS: menú desplegable menú desplegable-1

Agregar nueva fila a la sección

Estructura de la columna

Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:

Color de fondo

Sin agregar ningún módulo todavía, abra la configuración de fila y agregue un color de fondo blanco.

• Color de fondo: #ffffff

Dimensionamiento

Vaya a la pestaña de diseño de la fila y cambie la configuración de tamaño de la siguiente manera:

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ecualizar alturas de columna: Sí
• Ancho: 100%
• Ancho máximo: 100%

Espaciado

Elimine también todo el acolchado superior e inferior predeterminado.

• Relleno superior: 0px
• Acolchado inferior: 0px

Frontera

Y aplique un borde inferior.

• Ancho del borde inferior: 2px
• Color del borde inferior: # ff6600

Configuración de las columnas 1 y 2

A continuación, abra la configuración de las columnas 1 y 2 individualmente.

Espaciado

Agregue los siguientes valores de relleno de respuesta a ambas columnas:

• Acolchado superior:
  • Computadora de escritorio y tableta: 10%
  • Teléfono: 5%
• Acolchado inferior:
  • Computadora de escritorio y tableta: 10%
  • Teléfono: 5%
• Acolchado izquierdo: 5%
• Acolchado derecho: 5%

CSS del elemento principal

Junto con una línea de código CSS. Esto también nos ayudará a colocar las columnas una al lado de la otra en tamaños de pantalla más pequeños.

width: 50% !important

Configuración de la columna 3

Fondo degradado

A la configuración de la columna 3. Aplica el siguiente fondo degradado:

• Color 1: rgba (0,0,0,0.08)
• Color 2: # 0a0a0a
• Colocar degradado sobre la imagen de fondo: Sí

Imagen de fondo

Sube una imagen de fondo de tu elección a continuación.

CSS del elemento principal

Y agregue un margen derecho a la columna usando una línea de código CSS.

margin-right: 10px !important;

Visibilidad

Para asegurarnos de que nuestro menú desplegable para dispositivos móviles no sea demasiado abrumador, estamos ocultando toda esta columna en la tableta y el teléfono.

Configuración de la columna 4

Fondo degradado

A continuación, tenemos la cuarta columna. Agrega el mismo fondo degradado.

• Color 1: rgba (0,0,0,0.08)
• Color 2: # 0a0a0a
• Colocar degradado sobre la imagen de fondo: Sí

Imagen de fondo

Sube una imagen de fondo aquí también.

Visibilidad

Y oculta la columna en la tableta y el teléfono.

Agregar módulo de texto a la columna 1

Agregar nombre de categoría de producto al cuadro de contenido

¡Es hora de agregar módulos! Puedes colocar lo que quieras en este menú desplegable. Estamos usando módulos de texto, comenzando con el primero en la columna 1. Agregue un nombre de categoría.

Agregar enlace de categoría de producto

A continuación, agregue el enlace a esta categoría.

Configuración de texto

Vaya a la pestaña de diseño y cambie la configuración del texto de la siguiente manera:

• Fuente de texto: Oswald
• Estilo de fuente de texto: mayúsculas
• Color del texto: # 000000
• Tamano del texto:
  • Escritorio: 22px
  • Tableta: 18px
  • Teléfono: 16px
• Espaciado de letras de texto: -0.6px
• Altura de la línea de texto: 2.4em

Frontera

Agrega un borde inferior también.

• Ancho del borde inferior: 2px
• Color del borde inferior:
  • Por defecto: rgba (0,0,0,0)
  • Hover: # ff6600

Clonar y modificar el módulo de texto tantas veces como sea necesario

Una vez que haya completado el primero, puede clonarlo tantas veces como desee y distribuir los duplicados en las columnas 1 y 2.

Cambiar títulos y enlaces de categorías de productos

Asegúrese de cambiar todos los nombres y enlaces de las categorías de productos.

Agregar módulo de texto a la columna 3

Agregar nombre de categoría de producto

A la tercera columna. Agregue un nuevo módulo de texto e inserte el nombre de la categoría de producto.

Agregar enlace de categoría de producto

Agrega el enlace también.

Configuración de texto

Vaya a la pestaña de diseño del módulo y cambie la configuración del texto de la siguiente manera:

• Fuente de texto: Oswald
• Peso de la fuente del texto: negrita
• Estilo de fuente de texto: mayúsculas
• Color del texto: #ffffff
• Tamaño del texto: 3.4vw
• Altura de la línea de texto: 1em

Posición

Vuelva a colocar el módulo también.

• Posición: Absoluto
• Ubicación: Abajo a la izquierda
• Desplazamiento vertical: 2%
• Desplazamiento horizontal: 2%

Clonar el módulo de texto en la columna 3 y colocar el duplicado en la columna 4

Puede clonar el módulo de texto en la columna 3 y colocar el duplicado en la columna 4.

Cambiar el nombre y el enlace de la categoría de producto

Asegúrese de cambiar el nombre de la categoría de producto junto con el enlace.

Clonar toda la sección para reutilizarla como menú desplegable para otros elementos del menú

Tan pronto como haya creado el menú desplegable de la primera sección, puede clonarlo dos veces.

Cambiar todos los nombres y enlaces de las categorías de productos

Cambie los nombres de todas las categorías de productos en los nuevos menús desplegables.

Cambiar las clases CSS de la sección de forma consecutiva

Junto con la clase CSS de la última sección para cada duplicado. Asegúrate de seguir un pedido consecutivo.

• Clase CSS: menú desplegable menú desplegable-2

• Clase CSS: menú desplegable menú desplegable-3

4. Agregue código CSS y JQuery

Agregar nuevo módulo de código sobre el módulo de menú

Ahora que tenemos todos los elementos del menú en su lugar, es hora de colocar los menús desplegables del mega menú de comercio electrónico dentro de nuestro menú. Para hacer eso, agregaremos algo de código a un nuevo módulo de código. Coloque este módulo de código justo encima del módulo de menú de su segunda sección.

Insertar código CSS

Abra el Módulo de código y agregue las siguientes líneas de código CSS entre las etiquetas de estilo, como puede ver en la pantalla de impresión a continuación :

/* Enable class below once you're done editing the menu */ 
   
/*
.dropdown-menu {
visibility: hidden;
}
*/
  
.category-menu .et_pb_menu__menu .dropdown-menu {
visibility: hidden;
opacity: 0;

-webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
-moz-transition: 300ms all cubic-bezier(.4,0,.2,1);   
-o-transition: 300ms all cubic-bezier(.4,0,.2,1); 
-ms-transition: 300ms all cubic-bezier(.4,0,.2,1);   
transition: 300ms all cubic-bezier(.4,0,.2,1);    
  
position: absolute!important;
top: 75px;
bottom: auto;
left: 0px;
right: auto;
}
  
.category-menu .et_pb_menu__menu li.first-level:hover .dropdown-menu {
visibility: visible;
opacity: 1;
}

.category-menu  .et_pb_menu__menu li {
margin-top: 0px !important;
} 

.category-menu .et_pb_menu__menu li>a {
margin-top: 0px !important;
padding: 30px 20px !important;    
}

.category-menu .et_pb_menu__menu li.first-level>a:hover {
background-color: #FF6600; 
}  
  
.category-menu .et_mobile_menu .dropdown-menu {
background-color: white; 
padding-top: 25px;
padding-bottom: 5px;
}   

.category-menu .et_mobile_menu li > a {
background-color: transparent;
position: relative;
}
  
.category-menu .et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\4c';
color: #FF6600;
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
  
.category-menu .et_mobile_menu .first-level > .icon-switch:after{
content: '\21';
color: #c9c9c9;
}
  
.category-menu .et_mobile_menu .dropdown-menu {
display: none;
}
  
.category-menu .et_mobile_menu .dropdown-menu.reveal-items {
display: block;
}
  
.category-menu .et_pb_menu__menu>nav>ul>li {
position: static !important;
}

.category-menu .et_mobile_menu .dropdown-menu {
visibility: visible !important;
}

Insertar código JQuery

Agregue el código JQuery entre las etiquetas de script como puede ver en la pantalla de impresión a continuación también.

jQuery(function($){
$(document).ready(function(){
  

$('.dropdown-menu').each(function(i){
  
i = i + 1;
  
var $dropdown = $('.dropdown-menu-' + i);
var $mainMenuItem = $('.first-level-' + i + '>a');
$dropdown.insertAfter($mainMenuItem);
  
});  
  
var $firstLevel = $('.et_mobile_menu .first-level > a');
var $allDropdowns = $('.et_mobile_menu .dropdown-menu');

$firstLevel.off('click').click(function() {

$(this).attr('href', '#');  
var $thisDropdown = $(this).siblings(); 

$thisDropdown.slideToggle();
$(this).toggleClass('icon-switch');

var dropdownSiblings = $allDropdowns.not($thisDropdown);   
dropdownSiblings.slideUp();

var $thisFirstLevel = $(this);
var $firstLevelSiblings = $firstLevel.not($thisFirstLevel);
$firstLevelSiblings.removeClass('icon-switch');  

});      
  
});
});

5. Habilite la clase CSS una vez que haya terminado de personalizar el menú

Tan pronto como haya terminado de personalizar todas las secciones desplegables, le quedará una cosa por hacer: ocultarlas a primera vista. Esto evitará que aparezca el menú desplegable al cargar la página. Una vez que habilite esta clase CSS, ya no verá las secciones desplegables dentro del Visual Builder, pero podrá acceder a ellas en el modo de estructura alámbrica y / o deshabilitar temporalmente la clase CSS al realizar cambios en sus secciones desplegables. Para habilitar la clase, elimine los corchetes '/ * * /' al principio y al final de la clase CSS.

6. Guarde los cambios en Divi Theme Builder

Una vez que haya completado el encabezado global, asegúrese de guardar todos los cambios de Divi Theme Builder antes de ver el resultado en su sitio web.

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo crear un mega menú de comercio electrónico personalizado dentro del Generador de temas de Divi. Hemos creado los menús desplegables utilizando los elementos integrados de Divi y los hemos combinado con algún código que ayuda a conectar el menú con los menús desplegables en consecuencia. ¡Este enfoque le permite personalizar completamente su menú desplegable de comercio electrónico, en diferentes tamaños de pantalla, sin el uso de un complemento! También pudiste descargar el archivo JSON. Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación.

Si está ansioso por aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.