Cómo mostrar visualmente las categorías de entradas de blog en tu encabezado Divi

Al crear el encabezado global, es muy probable que incluya un elemento de menú de blog. Si no tienes muchas categorías de entradas de blog en tu sitio web, ir a un elemento de menú de blog podría ser suficiente. Sin embargo, si tiene un conjunto de categorías diferentes y desea resaltar cada una de ellos, es posible que desee probar un enfoque diferente, como mostrar visualmente cada categoría de blog dentro de un menú desplegable, una especie de megamenu que seguramente debes conocer.

En este tutorial, te mostraremos exactamente cómo hacerlo usando el Theme Builder de Divi. Crearemos el menú desplegable usando los elementos y opciones integrados de Divi y lo combinaremos con algún código que nos permitirá colocar el menú desplegable dentro del elemento de menú del blog. ¡También podrás descargar el archivo JSON gratis!

Vamos a hacerlo.

¿Cómo se verá?

Antes de profundizar en el tutorial, echemos un vistazo rápido al resultado a través de diferentes tamaños de pantalla.

Escritorio

Móvil

Descargar el encabezado global GRATIS

Descarga el encabezado global gratuito haciendo clic en el enlace de abajo.

Descargar gratis

Cómo cargar el archivo JSON

Descomprime el archivo que descargaste arriba. Luego, navega a tu sitio web de WordPress > Divi > Divi Library y carga el archivo JSON.

Una vez que el diseño se guarda en la biblioteca Divi, puede navegar al Theme Builder de Divi e importar el diseño guardado haciendo clic en ‘Agregar encabezado global’ o ‘Agregar encabezado personalizado’ y seleccionando ‘Construir encabezado global/personalizado’. Ve a la pestaña «Tus diseños guardados» en la Biblioteca Divi, selecciona el diseño que has cargado en el paso anterior y guarda todos los cambios del Theme Builder de Divi.

Para tener un menú funcional de inmediato, se le pedirá que vaya a través de la primera parte de este tutorial a continuación; agregar las clases CSS a los elementos de menú en un nivel individual. También necesitará habilitar una de las clases CSS dentro del módulo de código como se muestra en la parte 5 de este tutorial.

1. Agregue la clase CSS al elemento del menú del blog

Ir a Menús en Apariencia

En la primera parte de este tutorial, agregaremos dos clases CSS personalizadas al elemento de menú de la página del blog dentro del menú de WordPress. Para ello, navegue a los menús dentro de su panel de WordPress.

Habilitar opción de clase CSS

En la parte superior de la página, asegúrese de habilitar la opción de clases CSS dentro de la opción de pantalla.

Agregar clases CSS al elemento de menú del blog

A continuación, busque el elemento de menú de su blog y agregue dos clases CSS. Asegúrese de dejar un espacio entre las clases CSS.

• Clases CSS: first-level first-level-1

2. Crea un encabezado personalizado con el Theme Builder de Divi

Ve a Divi Theme Builder

Una vez que las clases CSS del elemento de menú están en su lugar, es el momento de cambiar a Divi. Vaya al Theme Builder de Divi y seleccione ‘Agregar encabezado global/personalizado’.

Empezar a construir el encabezado global

A continuación, seleccione ‘Build Global Header’ para ser redirigido al editor de plantillas.

Configuración de la sección

Color de fondo

Dentro del editor de plantillas, notará una sección. Abra esa sección y aplique un color de fondo blanco.

• Color de fondo: #FFFFFF

Espaciado

Vaya a la pestaña de diseño y elimine todo el relleno superior e inferior predeterminado.

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

Agregar fila #1

Estructura de columna

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

Tamaño

Sin añadir ningún módulo todavía, abra la configuración de fila y modifique la configuración de tamaño en consecuencia:

• Usar ancho de cortador personalizado: Sí
• Ancho de la cortadora: 1
• Ancho: 95%
• Ancho máximo: 100%

Espaciado

Elimine todos los rellenos superiores e inferiores predeterminados.

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

Agregar módulo de menú a la fila

Seleccionar Menu

Luego, agregue un Módulo de menú y seleccione el menú que ha modificado en la primera parte de este tutorial.

Subir un logo

Sube un logo a continuación.

Ajustes del texto del menú

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

• Fuente del menú: Roboto Mono
• Estilo de fuente del menú: Mayúsculas
• Color del texto del menú: #000000
• Tamaño del texto del menú: 18px
• Espacio entre letras de menú: -1px

Configuración del menú desplegable

Cambie también el color de la línea del menú desplegable.

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

Configuración de iconos

A continuación, cambie el color del icono del menú de hamburguesas en la configuración de los iconos.

• Hamburger Menu Icon Color: #000000

Clase CSS

Y complete la configuración del módulo agregando una clase CSS.

• Clase CSS: category-menu

3. Crear diseño desplegable de blog

Añadir fila #2

Estructura de columna

Una vez que la fila, que contiene el módulo de menú, está en su lugar, es el momento de crear el menú desplegable que contiene categorías de blog visual. Para ello, agregue una nueva fila con dos columnas de igual tamaño. Toda la fila será nuestro menú desplegable para el elemento de menú del blog.

Color de fondo

Abra la configuración de fila y utilice un color de fondo blanco.

• Color de fondo: #FFFFFF

Tamaño

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

• Usar ancho de cortador personalizado: Sí
• Ancho de la cortadora: 1
• Ecualizar alturas de columna: Sí
• Ancho: 80vw (Escritorio), 100% (tableta y teléfono)
• Ancho máximo: 50vw (escritorio), 100% (tableta y teléfono)

Espaciado

Modifique los valores de relleno a continuación.

• Relleno superior: 10px
• Relleno inferior: 10px
• Relleno izquierdo: 10px
• Relleno inferior: 10px

Sombra de caja

También estamos usando una sutil sombra de caja.

• Box Shadow Blur Strength: 30px
• Color de las Sombras: rgba(0,0,0,0.13) (Escritorio), rgba(0,0,0,0) (Tableta y Teléfono)

Clase CSS

A continuación, agregaremos dos clases CSS a nuestra fila. Estas clases CSS (en combinación con algún código más adelante) nos ayudarán a colocar todo el contenedor de filas dentro del elemento de menú del blog como un menú desplegable.

• Clase CSS: dropdown-menu dropdown-menu-1

Posición

Pasa a la pestaña avanzada y vuelve a colocar la fila también.

• Posición: Absolute (Desktop), Relative (Tablet & Phone)
• Localización: Top Right
• Desplazamiento vertical: 100px (escritorio), 0px (tableta y teléfono)
• Z-indice: 11

Elemento principal de ambas columnas

Por último, pero no menos importante, complete la configuración de fila agregando una línea de código CSS al elemento principal de cada columna. Esto nos ayudará a mantener la estructura de columnas en tamaños de pantalla más pequeños.

width: 50% !important;

Añadir módulo de texto a la columna 1

Añadir nombre de categoría

¡Es hora de mostrar visualmente nuestras categorías de blog! Agregue un primer módulo de texto a la columna 1 y agregue el título de la categoría al cuadro de contenido.

Añadir enlace de categoría

A continuación, agregue un enlace a su categoría.

Fondo de degradado

A continuación, aplique el siguiente fondo de degradado:

• Color 1: rgba(0,0,0,0.08)
• Color 2: #0a0a0a
• Posición de inicio: 60%
• Posición final: 60%
• Colocar degradado por encima de la imagen de fondo: Sí

Imagen de fondo

Cargue una imagen de fondo de su elección. Si quieres exactamente el mismo resultado que en este tutorial, sube una de las ilustraciones que puedes encontrar en la carpeta que pudiste descargar al principio de esta publicación.

• Tamaño de la imagen de fondo: tamaño real
• Repetición de imagen de fondo: Repetir X (horizontal)

Ajustes de texto

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

• Fuente de texto: Roboto Mono
• Peso de la fuente de texto: Negrita
• Color del texto: #ffffff
• Tamaño del texto: 1.9vw (escritorio), 3vw (tableta), 3.5vw (teléfono)
• Espaciado de letras de texto: -0.1vw
• Altura de la línea de texto: 1em

Tamaño

Cambie la configuración de tamaño a continuación.

• Ancho: 99%
• Alineación del módulo: Izquierda

Espaciado

Modifique también la configuración de espaciado.

• Margen inferior: 10px
• Margen derecho: 1% (tableta y teléfono)
• Relleno superior: 60% (escritorio), 40% (tableta y teléfono)
• Relleno inferior: 4%
• Relleno izquierdo: 2%

Elemento principal CSS

Y complete la configuración del módulo agregando una línea de código CSS al elemento principal del módulo.

cursor: pointer;

Clonar módulo de texto y colocar duplicados en la columna 2

Una vez que haya completado el primer módulo de texto, clone el módulo y coloque el duplicado en la columna 2.

Modificar módulo de texto en la columna 2

Cambiar nombre de categoría y enlace

Modifique el título de la categoría y el vínculo en el módulo duplicado.

Cambiar imagen de fondo

Cambie la imagen de fondo también. Puede encontrar la ilustración en la carpeta de descarga.

• Repetición de imagen de fondo: Sin repetición

Cambio de tamaño

Cambie la alineación del módulo en la configuración de tamaño siguiente.

• Alineación del módulo: Derecha

Clonar ambos módulos una vez

Una vez que haya completado ambos módulos (uno en cada columna), puede clonar ambos una vez.

Cambiar nombres y enlaces de categoría

Cambie los nombres de categoría y los vínculos dentro de los módulos duplicados.

Cambiar imágenes de fondo

Junto con las imágenes de fondo. Puedes encontrar las nuevas ilustraciones en la carpeta que pudiste descargar al principio de esta publicación.

• Tamaño de la imagen de fondo: Ajuste
• Repetición de imagen de fondo: Sin repetición

• Tamaño de la imagen de fondo: Ajuste
• Posición de la imagen de fondo: Inferior derecha

4. Agregue CSS y Código JQuery

Agregar módulo de código debajo del módulo de menú en la fila #1

Una vez que haya completado la fila que contiene los nombres de categoría de menú desplegable, agregue un módulo de código a la primera fila de la sección, justo debajo del módulo de menú.

Añadir código CSS

Agregue las siguientes líneas de código CSS al módulo de código:

<style>
/* 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);  
}
   
.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: #00C995; 
}  
   
.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: '\37';
color: black;
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
   
.category-menu .et_mobile_menu .first-level > .icon-switch:after{
content: '\36';
color: #c9c9c9;
}
   
.category-menu .et_mobile_menu .dropdown-menu {
display: none;
visibility: visible;
}
   
.category-menu .et_mobile_menu .dropdown-menu.reveal-items {
display: block;
}
   
</style>

Añadir código JQuery

Junto con algunos JQuery coe que ayudará a colocar la fila, que contiene categorías, dentro del elemento de menú del blog. Asegúrese de colocar el código JQuery entre las etiquetas de script como se puede ver en la pantalla de impresión a continuació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 los elementos desplegables del blog

Tan pronto como haya terminado de personalizar todos los elementos desplegables, tendrá una cosa que hacer: ocultar toda la fila que contiene los elementos del menú desplegable. Esto, en combinación con una función de carga dentro de nuestro código, evitará que el menú desplegable aparezca al cargar la página. Una vez que habilite esta clase CSS, ya no verá la segunda fila dentro del Generador visual, pero podrá acceder a ella en el modo de estructura alámbrica y/o deshabilitar temporalmente la clase CSS al realizar cambios en el menú desplegable. Para habilitar la clase, quite los corchetes ‘/* */’ al principio y al final de la clase CSS.

6. Adición de más listas desplegables de categorías de entrada

Fila de categoría de blog (clon)

Si desea agregar más listas desplegables de categorías, puede clonar toda la fila desplegable que ha creado.

Acceda a fila duplicada en el panel Capas

Puesto que estamos usando el posicionamiento absoluto en el escritorio, las filas se colocarán una encima de la otra. Para acceder a las filas individualmente, abra el panel de capas dentro de Divi Builder y abra la configuración de la fila duplicada.

Cambiar la clase CSS de fila duplicada

Cambie la segunda clase CSS en su fila duplicada. Asegúrate de que el número que estás usando es consecutivo.

• Clase CSS: dropdown menu dropdown-menu-2

Añadir clases CSS a elementos de menú en apariencia

Luego, vuelve a tu menú de WordPress dentro de tu panel de control y agrega las siguientes clases CSS a otro elemento de menú y listo:

• Clases CSS: first-level first-level-2

Vista previa

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

Escritorio

Móvil

Conclusiones finales

En esta entrada, te hemos mostrado cómo ser creativo con tu encabezado Divi y el elemento de menú del blog. Más específicamente, te hemos mostrado cómo incluir visualmente categorías de blog como elementos de menú desplegable que se ven muy bien en todos los tamaños de pantalla. Este enfoque le ayudará a resaltar cada categoría de blog diferente sin dejar de mantener un aspecto mínimo a primera vista.

Si tienes alguna pregunta, no dudes en dejar un comentario en la sección de abajo.

Fuente: Elegantthemes