Cómo mostrar visualmente las categorías de publicaciones de blog en su encabezado Divi

Al crear su encabezado global, es muy probable que incluya un elemento del menú del blog. Si no tiene muchas categorías de publicaciones de blog en su sitio web, elegir un elemento del menú del blog podría ser suficiente. Sin embargo, si tiene un conjunto de categorías diferentes y desea resaltar cada una de ellas, es posible que desee probar un enfoque diferente, como mostrar visualmente cada categoría de blog dentro de un menú desplegable.

En este tutorial, le mostraremos exactamente cómo hacerlo usando el Generador de temas de Divi. Construiremos el menú desplegable usando los elementos y opciones incorporados de Divi y lo combinaremos con algún código que nos permitirá colocar el menú desplegable dentro del elemento del menú del blog. ¡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

Descarga The Global Header GRATIS

Para poner sus manos sobre el encabezado global 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 está guardado 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 ha subido en el paso anterior y guarde todos los cambios en 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.

1. Agregar clase CSS al elemento del menú del blog

Ir a los menús en Apariencia

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

Habilitar la 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 del menú del blog

Luego, busque el elemento del menú de su blog y agregue dos clases de CSS. Asegúrese de dejar un espacio entre las clases de CSS.

• Clases CSS: primer nivel primer nivel-1

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

Ir a Divi Theme Builder

Una vez que las clases de CSS del elemento del menú están en su lugar, es hora de cambiar a Divi. Vaya al Generador de temas Divi y seleccione 'Agregar encabezado global / personalizado'.

Comience a construir un encabezado global

Luego, seleccione 'Crear encabezado global' para ser redirigido al editor de plantillas.

Configuración de la sección

Color de fondo

Dentro del editor de plantillas, verá 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 acolchado superior e inferior predeterminado.

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

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 modifique la configuración de tamaño en consecuencia:

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• 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 menú a la fila

Seleccione el menú

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

Subir logotipo

Sube un logo a continuación.

Configuración 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
• Espaciado de letras del menú: -1px

Configuración del menú desplegable

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

• Color de la 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.

• Color del icono del menú de hamburguesas: # 000000

Clase CSS

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

• Clase CSS: menú de categorías

3. Crear un diseño desplegable de blog

Agregar fila n. ° 2

Estructura de la columna

Una vez que su fila, que contiene el Módulo de menú, esté en su lugar, es hora de crear el menú desplegable que contiene las categorías visuales del blog. Para hacer eso, agregue una nueva fila con dos columnas del mismo tamaño. La fila completa será nuestro menú desplegable para el elemento del menú del blog.

Color de fondo

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

• Color de fondo: #FFFFFF

Dimensionamiento

Vaya a la pestaña de diseño 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: 80vw (escritorio), 100% (tableta y teléfono)
• Ancho máximo: 50vw (escritorio), 100% (tableta y teléfono)

Espaciado

A continuación, modifique los valores de relleno.

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

Sombra de la caja

También estamos usando una sombra de caja sutil.

• Fuerza de desenfoque de sombra de caja: 30px
• Color de sombra: rgba (0,0,0,0.13) (escritorio), rgba (0,0,0,0) (tableta y teléfono)

Clase CSS

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

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

Posición

Vaya a la pestaña avanzada y cambie la posición de la fila también.

• Posición: Absoluto (escritorio), relativo (tableta y teléfono)
• Ubicación: arriba a la derecha
• Desplazamiento vertical: 100 px (escritorio), 0 px (tableta y teléfono)
• Índice Z: 11

Elemento principal de ambas columnas

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

width: 50% !important;

Agregar módulo de texto a la columna 1

Agregar nombre de categoría

¡Es hora de mostrar visualmente las categorías de nuestro 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.

Agregar enlace de categoría

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

Fondo degradado

Luego, aplique el siguiente fondo degradado:

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

Imagen de fondo

Sube una imagen de fondo de tu elección. Si desea obtener exactamente el mismo resultado que en este tutorial, cargue una de las ilustraciones que puede encontrar en la carpeta que pudo descargar al comienzo de esta publicación.

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

Configuración de texto

Vaya 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 del 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

Dimensionamiento

A continuación, cambie la configuración de tamaño.

• 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)
• Acolchado superior: 60% (escritorio), 40% (tableta y teléfono)
• Acolchado inferior: 4%
• Acolchado izquierdo: 2%

CSS del elemento principal

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 el módulo de texto y colocar el duplicado 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 el módulo de texto en la columna 2

Cambiar el nombre y el enlace de la categoría

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

Cambiar imagen de fondo

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

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

Cambiar talla

A continuación, cambie la alineación del módulo en la configuración de tamaño.

• 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ías

Cambie los nombres de las categorías y los enlaces dentro de los módulos duplicados.

Cambiar imágenes de fondo

Junto con las imágenes de fondo. Puede encontrar las nuevas ilustraciones en la carpeta que pudo descargar al comienzo de esta publicación.

• Tamaño de la imagen de fondo: Ajustar
• Repetición de imagen de fondo: sin repetición

• Tamaño de la imagen de fondo: Ajustar
• Posición de la imagen de fondo: abajo a la derecha

4. Agregue código CSS y JQuery

Agregar módulo de código debajo del módulo de menú en la fila n. ° 1

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

Agregar 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>

Agregar código JQuery

Junto con un coeficiente de JQuery que ayudará a colocar la fila, que contiene las categorías, dentro del elemento del menú de su blog. Asegúrese de colocar el código JQuery entre las etiquetas del script, como puede observar 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 del menú desplegable, le quedará una cosa por 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 aparezca el menú desplegable al cargar la página. Una vez que habilite esta clase CSS, ya no verá la segunda fila dentro del Visual Builder, pero podrá acceder a ella en el modo de estructura alámbrica y / o deshabilitar temporalmente la clase CSS cuando realice cambios en su menú desplegable. Para habilitar la clase, elimine los corchetes '/ * * /' al principio y al final de la clase CSS.

6. Agregar más menús desplegables de categorías de publicaciones

Fila de categoría de blog de clonación

Si está buscando agregar más menús desplegables de categorías, puede clonar toda la fila desplegable que ha creado.

Acceder a la fila duplicada en el panel Capas

Dado 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 su 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 sea consecutivo.

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

Agregar clases CSS a los elementos del menú en apariencia

Luego, regrese a su menú de WordPress dentro de su tablero y agregue las siguientes clases de CSS a otro elemento del menú y listo:

• Clases CSS: primer nivel primer nivel 2

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 ser creativo con su encabezado Divi y el elemento del menú del blog. Más específicamente, le mostramos cómo incluir visualmente categorías de blogs como elementos del menú desplegable que se ven muy bien en todos los tamaños de pantalla. Este enfoque lo ayudará a resaltar cada categoría de blog diferente mientras mantiene una apariencia mínima a primera vista. ¡También pudo descargar el archivo JSON gratis! Si tiene alguna pregunta, 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.