# Cómo mostrar visualmente las categorías de entradas de blog en tu encabezado Divi - Link: https://creativa.dev/desarrollo-web/como-mostrar-visualmente-las-categorias-de-entradas-de-blog-en-tu-encabezado-divi/ - Published: 2020-07-19T13:52:28-04:00 - Author: Juanito Ortega 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 ![](https://www.creativa.dev/wp-content/uploads/2020/07/divi-dropdown-blog-categories- desktop-preview.gif) ## Móvil ![](https://www.creativa.dev/wp-content/uploads/2020/07/divi-dropdown-blog-categories- mobile-preview.gif) ## Descargar el encabezado global GRATIS Descarga el encabezado global gratuito haciendo clic en el enlace de abajo. [**Descargar gratis**](https://www.creativa.dev/wp-content/uploads/2020/07/divi-dropdown-post-categories-layout.zip) ## 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. ![](https://www.creativa.dev/wp-content/uploads/2020/07/esspa1.jpg) ![](https://www.creativa.dev/wp-content/uploads/2020/07/esspa2.jpg) 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. ![](https://www.creativa.dev/wp-content/uploads/2020/07/esspa3.jpg) ![](https://www.creativa.dev/wp-content/uploads/2020/07/esspa4.jpg) ![](https://www.creativa.dev/wp-content/uploads/2020/07/esspa5.jpg) ![](https://www.creativa.dev/wp-content/uploads/2020/07/esspa6.jpg) 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. ![](https://www.creativa.dev/wp-content/uploads/2020/07/asppa1.jpg) ### 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. ![](https://www.creativa.dev/wp-content/uploads/2020/07/asppa2.jpg) ### 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 ![](https://www.creativa.dev/wp-content/uploads/2020/07/asppa3.jpg) ## 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’. ![](https://www.creativa.dev/wp-content/uploads/2020/07/aetm4.jpg) ### Empezar a construir el encabezado global A continuación, seleccione ‘Build Global Header’ para ser redirigido al editor de plantillas. ![](https://www.creativa.dev/wp-content/uploads/2020/07/aetm5.jpg) ## 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 ![](https://www.creativa.dev/wp-content/uploads/2020/07/asppa4.jpg) ### Espaciado Vaya a la pestaña de diseño y elimine todo el relleno superior e inferior predeterminado. * Relleno superior: 0px * Relleno inferior: 0px ![](https://www.creativa.dev/wp-content/uploads/2020/07/asppa5.jpg) ## Agregar fila #1 ### Estructura de columna Continúe agregando una nueva fila utilizando la siguiente estructura de columnas: ![](https://www.creativa.dev/wp-content/uploads/2020/07/asppa6.jpg) ### 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% ![](https://www.creativa.dev/wp-content/uploads/2020/07/asppa7.jpg) ### Espaciado Elimine todos los rellenos superiores e inferiores predeterminados. * Relleno superior: 0px * Relleno inferior: 0px ![](https://www.creativa.dev/wp-content/uploads/2020/07/asppa8.jpg) ## 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. ![](https://www.creativa.dev/wp-content/uploads/2020/07/asppa10.jpg) ### 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 ![](https://www.creativa.dev/wp-content/uploads/2020/07/asppa11.jpg) ### 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 ![](https://www.creativa.dev/wp-content/uploads/2020/07/asppa12.jpg) ### 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 ![](https://www.creativa.dev/wp-content/uploads/2020/07/asppa13.jpg) ### Clase CSS Y complete la configuración del módulo agregando una clase CSS. * Clase CSS: category-menu ![](https://www.creativa.dev/wp-content/uploads/2020/07/asppa14.jpg) ## 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. ![](https://www.creativa.dev/wp-content/uploads/2020/07/bsppa1.jpg) ### Color de fondo Abra la configuración de fila y utilice un color de fondo blanco. * Color de fondo: #FFFFFF ![](https://www.creativa.dev/wp-content/uploads/2020/07/bsppa2.jpg) ### 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) ![](https://www.creativa.dev/wp-content/uploads/2020/07/bsppa3.jpg) ### Espaciado Modifique los valores de relleno a continuación. * Relleno superior: 10px * Relleno inferior: 10px * Relleno izquierdo: 10px * Relleno inferior: 10px ![](https://www.creativa.dev/wp-content/uploads/2020/07/bsppa4.jpg) ### 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) ![](https://www.creativa.dev/wp-content/uploads/2020/07/bsppa5.jpg) ### 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 ![](https://www.creativa.dev/wp-content/uploads/2020/07/bsppa6.jpg) ### 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 ![](https://www.creativa.dev/wp-content/uploads/2020/07/bsppa7.jpg) ### 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. ```notranslate width: 50% !important; ``` ![](https://www.creativa.dev/wp-content/uploads/2020/07/bsppa8.jpg) ![](https://www.creativa.dev/wp-content/uploads/2020/07/bsppa9.jpg) ## 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. ![](https://www.creativa.dev/wp-content/uploads/2020/07/csppa1.jpg) ### Añadir enlace de categoría A continuación, agregue un enlace a su categoría. ![](https://www.creativa.dev/wp-content/uploads/2020/07/csppa2.jpg) ### 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í ![](https://www.creativa.dev/wp-content/uploads/2020/07/csppa3.jpg) ### 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) ![](https://www.creativa.dev/wp-content/uploads/2020/07/csppa4.jpg) ### 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 ![](https://www.creativa.dev/wp-content/uploads/2020/07/csppa5.jpg) ### Tamaño Cambie la configuración de tamaño a continuación. * Ancho: 99% * Alineación del módulo: Izquierda ![](https://www.creativa.dev/wp-content/uploads/2020/07/csppa6.jpg) ### 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% ![](https://www.creativa.dev/wp-content/uploads/2020/07/csspa7.jpg) ### 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. ```notranslate cursor: pointer; ``` ![](https://www.creativa.dev/wp-content/uploads/2020/07/csspa8.jpg) ## 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. ![](https://www.creativa.dev/wp-content/uploads/2020/07/csspa9.jpg) ## 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. ![](https://www.creativa.dev/wp-content/uploads/2020/07/csspa10.jpg) ### 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 ![](https://www.creativa.dev/wp-content/uploads/2020/07/csspa11.jpg) ### 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 ![](https://www.creativa.dev/wp-content/uploads/2020/07/csspa12.jpg) ### Clonar ambos módulos una vez Una vez que haya completado ambos módulos (uno en cada columna), puede clonar ambos una vez. ![](https://www.creativa.dev/wp-content/uploads/2020/07/csspa13.jpg) ### Cambiar nombres y enlaces de categoría Cambie los nombres de categoría y los vínculos dentro de los módulos duplicados. ![](https://www.creativa.dev/wp-content/uploads/2020/07/csspa14.jpg) ### 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 ![](https://www.creativa.dev/wp-content/uploads/2020/07/csspa15.jpg) * Tamaño de la imagen de fondo: Ajuste * Posición de la imagen de fondo: Inferior derecha ![](https://www.creativa.dev/wp-content/uploads/2020/07/csspa16.jpg) ## 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ú. ![](https://www.creativa.dev/wp-content/uploads/2020/07/dsspa1.jpg) ### Añadir código CSS Agregue las siguientes líneas de código CSS al módulo de código: ```notranslate ``` ![](https://www.creativa.dev/wp-content/uploads/2020/07/dsspa2.jpg) ### 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. ```notranslate 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'); }); }); }); ``` ![](https://www.creativa.dev/wp-content/uploads/2020/07/dsspa3.jpg) ## 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. ![](https://www.creativa.dev/wp-content/uploads/2020/07/dsspa4.jpg) ## 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. ![](https://www.creativa.dev/wp-content/uploads/2020/07/dsspa5.jpg) ### 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. ![](https://www.creativa.dev/wp-content/uploads/2020/07/dsspa6.jpg) ![](https://www.creativa.dev/wp-content/uploads/2020/07/dsspa7.jpg) ### 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 ![](https://www.creativa.dev/wp-content/uploads/2020/07/dsspa8.jpg) ### 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 ![](https://www.creativa.dev/wp-content/uploads/2020/07/dsspa9.jpg) ### Vista previa Ahora que hemos pasado por todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla. ### Escritorio ![](https://www.creativa.dev/wp-content/uploads/2020/07/divi-dropdown-blog-categories- desktop-preview.gif) ### Móvil ![](https://www.creativa.dev/wp-content/uploads/2020/07/divi-dropdown-blog-categories- mobile-preview.gif) ## 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](https://www.elegantthemes.com/blog/divi-resources/how-to-visually-showcase-blog-post-categories-in-your-divi-header)