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

Al crear un sitio web de comercio electrónico con Divi y WooCommerce, hay muchas formas de personalizar la apariencia 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 Divi’s Theme Builder. Construiremos todo visualmente, usando los elementos incorporados 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 poner sus manos en 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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.

Descárgalo gratis

Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Cómo cargar el archivo JSON

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

Una vez que su diseño se guarde 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 Divi, seleccione el diseño que cargó en el paso anterior y guarde todos los cambios de Divi Theme Builder.

Para tener un menú que funcione desde el principio, se le pedirá que siga la primera parte de este tutorial a continuación; agregar las clases CSS a los elementos del menú en un nivel individual. También deberá habilitar una de las clases de 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 íconos deben contener el contenido “4c” y “21” como puede observar en la pantalla de impresión a continuación.

1. Agregue clases de CSS a los elementos del menú

Ir a Menús en Apariencia

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

Habilitar la opción de clase CSS

Asegúrese de que la opción de clase CSS esté habilitada en la parte superior alternando las opciones de pantalla y habilitando la opción de clases 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 de 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. Crea un encabezado global con el generador de temas de Divi

Vaya a Divi Theme Builder y comience a construir el encabezado global

Una vez que los elementos de su 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 n.º 1

Espaciado

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

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

Visibilidad

Oculte esta sección en la tableta y el teléfono a continuación. Solo mantenemos esta sección en pantallas más grandes para asegurarnos de que la experiencia de navegación en pantallas más pequeñas no se vuelva abrumadora.

Añadir Fila #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 la fila y cambie la configuración de tamaño de la siguiente manera:

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

Espaciado

Elimine todo el relleno superior e inferior predeterminado a continuación.

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

Agregar módulo de imagen a la columna 1

Cargar 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 poco de 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

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

  • Fuente del texto: Oswald
  • Peso de fuente de 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 módulo de texto dos veces y colocar 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.

Añadir Sección #2

Espaciado

Agregue 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
  • Relleno inferior: 0px

Añadir Fila #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 la fila y modifique la configuración de tamaño de la siguiente manera:

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

Espaciado

Elimine todo el relleno superior e inferior predeterminado a continuación.

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

Borde

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 receptivas y cargando el archivo de imagen de su logotipo. Deje el área del escritorio vacía.

Elementos

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

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

Configuración del texto del menú

Pase 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

Ajustes 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: categoría-menú

3. Cree 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 está dedicado 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

Elimine todo el relleno superior e inferior predeterminado a continuación.

  • Relleno superior: 0px
  • Relleno 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 se usó 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 utilizando la siguiente estructura de columnas:

Color de fondo

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

  • Color de fondo: #ffffff

Dimensionamiento

Pase 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 del canalón: 1
  • Igualar alturas de columna: Sí
  • Ancho: 100%
  • Ancho máximo: 100%

Espaciado

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

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

Borde

Y aplica 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%
  • Relleno izquierdo: 5%
  • Relleno derecho: 5%

Elemento principal CSS

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.

01
width: 50% !important

Configuración de la columna 3

Fondo degradado

En la configuración de la columna 3. Aplique el siguiente fondo degradado:

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

Imagen de fondo

Cargue una imagen de fondo de su elección a continuación.

Elemento principal CSS

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

01
margin-right: 10px !important;

Visibilidad

Para asegurarnos de que nuestro menú desplegable móvil 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. Agregue el mismo fondo degradado.

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

Imagen de fondo

Cargue 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

Agregue el enlace a esta categoría a continuación.

Configuración de texto

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

  • Fuente del texto: Oswald
  • Estilo de fuente de texto: Mayúsculas
  • Color del texto: #000000
  • Tamano del texto:

    • Escritorio: 22px
    • Tableta: 18px
    • Teléfono: 16px
  • Espaciado entre letras de texto: -0.6px
  • Altura de línea de texto: 2,4 em

Borde

Agregue un borde inferior también.

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

    • Predeterminado: rgba(0,0,0,0)
    • Pasar el cursor: #ff6600

Clone y modifique 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 del producto.

Agregar enlace de categoría de producto

Añade el enlace también.

Configuración de texto

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

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

Posición

Vuelva a colocar el módulo también.

  • Posición: Absoluta
  • Ubicación: abajo a la izquierda
  • Desplazamiento vertical: 2 %
  • Desplazamiento Horizontal: 2%

Clonar módulo de texto en la columna 3 y colocar 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 del producto

Asegúrese de cambiar el nombre de la categoría del 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 categorías de productos

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

Cambiar las clases de CSS de la sección consecutivamente

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

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

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

4. Agregar código CSS y JQuery

Agregar nuevo módulo de código encima del 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 :

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
sesenta y cinco
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
/* 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.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
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 de Visual Builder, pero podrá acceder a ellas en el modo de estructura alámbrica y/o deshabilitar temporalmente la clase CSS cuando realice cambios en sus secciones desplegables. Para habilitar la clase, elimine los corchetes ‘/* */’ al principio y al final de la clase CSS.

6. Guardar los cambios del generador de temas Divi

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. Creamos los menús desplegables utilizando los elementos integrados de Divi y los combinamos con un código que ayuda a conectar el menú a 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 pudo 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 regalos de Divi, asegúrese de suscribirse  a nuestro boletín de correo electrónico  y  al canal de YouTube  para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.

Publicaciones relacionadas:

  1. Cómo crear un pie de página personalizado con el generador de temas de Divi
  2. Cómo crear un menú anidado plegable móvil con el generador de temas de Divi
  3. Creación del menú desplegable de temas elegantes avanzados con el generador de temas de Divi
  4. Cómo crear una plantilla de página de autor con el generador de temas de Divi