Cómo agregar un menú de categoría fija a las plantillas de su blog en Divi

Publicado: 2019-11-09

Los menús de categorías son una adición deliciosa a cualquier blog. Brindan a los blogueros la oportunidad de mostrar los diferentes tipos de temas disponibles para que los lectores puedan acceder a lo que les interesa de manera rápida y sencilla. Por lo tanto, es importante que tenga un menú de categorías bien diseñado en todas las plantillas relacionadas con blogs en su sitio web.

En este tutorial, le mostraremos cómo agregar un menú de categorías pegajosas a su blog con el Generador de temas de Divi. Cubriremos cómo crear el menú de categorías adhesivas usando Divi Builder y también cómo agregar los menús de categorías a diferentes plantillas en su sitio que componen su blog.

Empecemos.

Vistazo

Aquí está el menú de categoría fija agregado a la plantilla de publicación

Aquí está el menú de categorías fijas inferior en dispositivos móviles.

Aquí está el menú de categorías en la plantilla de página de categorías.

Y aquí hay una plantilla de blog rápida y fácil que crearemos con el menú de categorías adhesivas comenzando debajo del control deslizante de la publicación y pegándose en la parte superior de la página en el desplazamiento.

Descarga la (s) plantilla (s) GRATIS

Para poner sus manos en las plantillas con el menú de categorías adhesivas de este tutorial, 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 será resuscrito 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.

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!

Para importar el diseño a su página, simplemente extraiga el archivo zip y agregue uno de los archivos json en Divi Theme Builder usando la opción de portabilidad de Theme Builder.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

Si aún no lo ha hecho, instale y active Divi Theme.
Descargue Theme Builder Pack # 6 para comenzar con el nuevo diseño.

Después de eso, estará listo para comenzar.

Suscríbete a nuestro canal de Youtube

Agregar un menú fijo de categorías secundarias a las plantillas de su blog

Carga del paquete Theme Builder n. ° 6

Para este tutorial, usaremos el Theme Builder Pack # 6. Una vez que descargue el paquete de la publicación del blog, vaya al panel de WordPress y navegue a Divi> Theme Builder.

Luego, haz clic en el ícono de portabilidad en la parte superior derecha. En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo Divi-Theme-Builder-Pack-6-All.json. Luego haga clic en el botón "Importar plantillas Divi Theme Builder".

Esto importará todas las plantillas al Theme Builder.

Ahora estamos listos para comenzar a crear nuestro menú de categorías.

Creación de un nuevo menú de categorías en WordPress

Se puede crear un menú de categorías como un menú normal en WordPress. Desde el panel de WordPress, vaya a Apariencia> Menús. Haga clic en el enlace crear un nuevo menú, asigne un nombre al menú y haga clic en el botón "Crear menú".

Debajo de los elementos del menú, abra la opción Categorías y seleccione todas las categorías / páginas que desea agregar al menú. Asegúrese de tener categorías ya creadas para que los elementos de categoría aparezcan en la alternancia de categorías. Los elementos del menú de categorías redirigirán a la página de categoría para una categoría de publicación específica.

Diseño de un menú de categoría fija en el área del cuerpo de la plantilla de publicación.

Una vez creado el menú de categorías, es hora de diseñar nuestro menú de categorías. Para hacer esto, necesitaremos agregarlo a un área del cuerpo de una de las plantillas. Eventualmente agregaremos el menú de categorías a otras plantillas relacionadas con el Blog, pero por ahora, agreguemos a la plantilla para todas las publicaciones (o plantilla de publicación).

Abrir editor de diseño de plantilla de área corporal

En la interfaz de Theme Builder, busque la plantilla ya asignada a "Todas las publicaciones" y haga clic en el icono de edición en el área de cuerpo personalizado.

Agregar nueva sección y fila en la parte superior de la plantilla

En el editor de diseño de plantilla, cree una nueva sección con una fila de una columna y arrástrela hasta la parte superior del diseño.

Personalizar sección

Antes de agregar un módulo, abra la configuración de la sección y dele un fondo y algo de relleno de la siguiente manera:

Color de fondo: # f92c8b
Acolchado: 1vw superior, 1vw inferior

Personalizar fila

A continuación, actualice la configuración de la fila de la siguiente manera:

Color de degradado de fondo a la izquierda: # f92c8b
Color de degradado de fondo a la derecha: # ffd625
Dirección del gradiente: 90 grados
Relleno: 0px arriba, 0px abajo
Esquinas redondeadas: 20px

Agregar módulo de menú

Dentro de la fila de una columna, agregue un nuevo módulo de menú.

Luego, seleccione el menú de categorías que creó anteriormente en el menú desplegable. Una vez seleccionados, los elementos del menú aparecerán en el menú.

Módulo de menú de diseño para que coincida con la plantilla

Elimine el color de fondo predeterminado para que se muestre el color de fondo de la fila.

Actualice la siguiente configuración de diseño:

Estilo: centrado
Fuente del menú: Ubuntu
Peso de la fuente del menú: negrita
Estilo de fuente del menú: TT (en mayúsculas)
Color del texto del menú: #ffffff
Espaciado de letras del menú: 2px
Altura de la línea del menú: 2em
Color de fondo del menú desplegable: #ffffff
Color de la línea del menú desplegable: # f92c8b

Color del texto del menú desplegable: # 222222
Color del texto del menú móvil: # 222222
Color del icono del menú de hamburguesas: #ffffff
Fuente del icono del menú de hamburguesas: 40px
Ancho: 90%
Alineación del módulo: centro

Visibilidad de sección y fila

Para evitar que se oculten los menús desplegables, debemos asegurarnos y configurar la visibilidad de nuestra sección y fila como visibles. Además, también necesitaremos darle al índice z un número alto para mantener el orden del menú completo por encima del resto del contenido de la página. Esto será necesario para maximizar la visibilidad del menú desplegable en el móvil y también del menú fijo.

Abra la configuración de la sección y actualice lo siguiente:

Desbordamiento horizontal: visible
Desbordamiento vertical: visible
Índice Z: 999

Abra la configuración de la fila y actualice lo siguiente:

Desbordamiento horizontal: visible
Desbordamiento vertical: visible

Hacer pegajosa la sección (que contiene el menú)

Esto es opcional, por supuesto, pero para crear un menú de categorías pegajoso, abra la configuración de la sección y agregue el siguiente CSS personalizado al elemento principal:

position: -webkit-sticky !important;
position: sticky !important;
top: 0px;

Sección duplicada para crear menú de categoría inferior

Para una mejor experiencia de usuario en dispositivos móviles, podemos crear otro menú de categorías que se quedará en la parte inferior de la página. Para crear el menú, simplemente duplique la sección que contiene el menú que acaba de crear.

Optimizar el menú fijo inferior para dispositivos móviles

Actualice Sticky CSS con posicionamiento inferior.

Dado que solo necesitaremos este menú para "pegar" en el móvil, abra la sección de configuración y elimine el CSS personalizado para escritorio. Luego agregue el siguiente CSS personalizado en la pestaña de la tableta.

position: -webkit-sticky !important;
position: sticky !important;
bottom: 0px;

Cambiar la dirección del menú desplegable para el menú de categoría inferior

Debido a que el menú se ubicará en la parte inferior de la pantalla en el dispositivo móvil, cambie la dirección del menú desplegable:

Dirección del menú desplegable: hacia arriba

Agregar etiqueta de menú "Categorías"

Para agregar una etiqueta junto al ícono del menú móvil, en la pestaña avanzada de Configuración del menú, agregue el siguiente CSS personalizado al elemento Antes:

position: absolute !important;
color: #ffffff!important;
font-size: 16px;
content: "Categories";
line-height: 2em;
left: 50%;
margin-left: -110px;

Así es como se ve el menú hasta ahora en dispositivos móviles.

Ocultar el menú principal en el móvil

Para evitar abarrotar el encabezado en el móvil, desactive el menú superior en el teléfono y la tableta. Esto solo mostrará el menú fijo superior en el escritorio.

Guarde ambos menús / filas en la biblioteca Divi.

Hemos terminado de crear los menús de dos categorías para el diseño. Para que sea más fácil agregarlos a otras plantillas, podemos guardarlos en nuestra biblioteca Divi. Para guardar el menú superior, seleccione el icono "Agregar a la biblioteca" del menú de sección. Luego, asigne un nombre al diseño y haga clic en el botón "Guardar en la biblioteca".

Repita el mismo proceso para guardar el menú inferior en la biblioteca también. Solo asegúrese de darle un nombre que recuerde.

Resultado final de la plantilla de publicación de blog

Veamos cómo se ve una publicación en vivo con nuestro nuevo menú de categorías fijas en su lugar.

Vista de escritorio (menú superior)

Vista móvil (menú inferior)

Adición del menú fijo de categorías secundarias a la plantilla de página de categorías

Dado que tenemos nuestras secciones de menú agregadas a la Biblioteca Divi, podemos agregarlas a cualquier diseño de plantilla. La siguiente plantilla a la que vamos a agregar los menús de categorías es la plantilla Página de categorías.

Editar el área del cuerpo de la plantilla de página de categoría

Busque la plantilla asignada a "Todas las páginas de categorías" y haga clic en el icono de edición en el área de cuerpo personalizado.

Agregar menú de categoría superior de la biblioteca

Desde el editor de diseño de plantilla, haga clic en el icono azul más para agregar una nueva sección. Luego, elija la pestaña Agregar desde la biblioteca y seleccione el menú de la categoría superior de la lista.

Luego, mueva la sección a la parte superior del diseño de la plantilla.

Agregar menú de categoría inferior de la biblioteca

A continuación, haga clic para agregar una nueva sección al final del diseño. Luego agregue el menú de la categoría inferior de la biblioteca.

Actualizar el color del enlace activo para el menú

Para esta plantilla, es una buena idea actualizar el color del enlace activo, ya que los elementos del menú contendrán enlaces a las páginas de categorías que utilizan esta plantilla. Abra la configuración del menú superior y actualice lo siguiente:

Color de enlace activo: # 4160fd

Ahora, cuando visite una página de categoría, el enlace activo se mostrará en azul.

Resultado final de la plantilla de página de categoría

Agregar el menú de categoría fija a una plantilla de página de blog

También podemos agregar nuestro menú de categorías adhesivas a la página del blog de nuestro sitio web. Una página de blog es básicamente la página de inicio de su blog y generalmente muestra un feed de todas las publicaciones de su blog. Con Divi Theme Builder, podemos crear una plantilla para la página del blog y agregar el menú de categorías fácilmente.

Creación de la plantilla de blog

Primero, duplique la plantilla de página de categoría.

Luego asigne la plantilla duplicada al Blog.

Edite el cuerpo personalizado de la plantilla de blog.

Personalizar el diseño de la plantilla de blog

Utilice el editor de diseño de plantillas para diseñar la plantilla de blog. Por ahora, démosle un buen control deslizante de publicación de ancho completo en la parte superior de la página. Para hacer esto, cree una nueva sección de ancho completo.

Agregar control deslizante de publicación de ancho completo

Luego agregue un módulo Post Slider de ancho completo a la sección.

Configure el contenido para extraer las "Publicaciones de la página actual". Luego, se asegurará de que esté obteniendo el contenido dinámico correcto para la página del blog.

Actualice la configuración del control deslizante de publicación de ancho completo de la siguiente manera:

Fuente del título: Ubuntu
Peso de la fuente del título: Medio
Fuente del cuerpo: Ubuntu

Mover menú debajo del control deslizante de publicación

Para este diseño, arrastremos el control deslizante de la publicación a la parte superior de la página para que el menú de la categoría adhesiva superior se ubique debajo del control deslizante.

Crear y asignar la página de publicaciones (o blog)

Asegúrese de tener una página de blog designada en WordPress. Para hacer esto, vaya a Configuración> Lectura. Luego, para las pantallas de la página de inicio, seleccione una página estática. Luego, seleccione la página que desea usar para la página Publicaciones.

Resultado final de la plantilla de página de blog

Observe cómo el menú de categorías se vuelve pegajoso cuando llega a la parte superior de la página.

Pensamientos finales

Un menú de categorías pegajoso puede llevar tu blog al siguiente nivel. Construir uno es realmente simplemente usar Divi Builder. Y Theme Builder facilita agregar el menú en cualquier lugar que desee en su sitio. Además, incluso puede crear un menú fijo separado para dispositivos móviles para brindarles a sus usuarios la mejor experiencia. Con suerte, esto será útil en su propio blog o en su próximo proyecto.

Espero tener noticias tuyas en los comentarios.

¡Salud!