Los menús de categorías son una adición deliciosa a cualquier blog. Brindan a los bloggers la oportunidad de mostrar los diferentes tipos de temas disponibles para que los lectores puedan acceder a las cosas que les interesan rápida y fácilmente. 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ía fijo a su blog con Divi’s Theme Builder . Cubriremos cómo crear el menú de categoría fijo usando Divi Builder y también cómo agregar los menús de categoría a diferentes plantillas en su sitio que conforman su blog.
Empecemos.
Aquí está el menú de categoría fijo agregado a la plantilla de publicación
Aquí está el menú inferior de categorías pegajosas en el móvil.
Aquí está el menú de categoría en la plantilla de página de categoría.
Y aquí hay una plantilla de blog rápida y fácil que crearemos con el Menú de categoría fijo que comienza debajo del control deslizante de publicación y se adhiere a la parte superior de la página al desplazarse.
Descargue la(s) plantilla(s) GRATIS
Para tener en sus manos las plantillas con el menú de categorías fijas de este tutorial, 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!
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 utilizando 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 has hecho, instala y activa el tema Divi .
- Descarga Theme Builder Pack #6 para comenzar con el nuevo diseño.
Después de eso, estás listo para ir.
Suscríbete a nuestro canal de Youtube
Cargando el paquete de creación de temas n.º 6
Para este tutorial, vamos a utilizar Theme Builder Pack #6 . Una vez que descargue el paquete de la publicación del blog, vaya al panel de control de WordPress y navegue a Divi> Theme Builder.
Luego haga clic en el icono 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 de Divi Theme Builder «.
Esto importará todas las plantillas al generador de temas.
Ahora estamos listos para comenzar a crear nuestro menú de categorías.
Se puede crear un menú de categoría como un menú normal en WordPress. Desde el Panel de WordPress, navega a Apariencia > Menús. Haga clic en el vínculo 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 el botó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 el conmutador de categorías. Los elementos del menú de categoría redirigirán a la página de categoría para una categoría de publicación específica.
Después de crear 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ía a otras plantillas relacionadas con el Blog, pero por ahora, agréguelo a la plantilla para todas las publicaciones (o plantilla de publicación).
Editor de diseño de plantilla de área de cuerpo abierto
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 del 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 arriba, 1vw abajo
Personalizar fila
A continuación, actualice la configuración de la fila de la siguiente manera:
- Degradado de fondo Color izquierdo: #f92c8b
- Degradado de fondo Color derecho: #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.
La actualización de 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 entre 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
- Icono de menú de hamburguesa Fuente: 40px
- Ancho: 90%
- Alineación del módulo: Centro
Visibilidad de secciones y filas
Para evitar que se oculten los menús desplegables, debemos asegurarnos y configurar la visibilidad de nuestra sección y fila como visible. 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 dispositivos móviles y también para el 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 que la sección (que contiene el menú) sea pegajosa
Esto es opcional, por supuesto, pero para crear un menú de categoría fijo, abra la configuración de la sección y agregue el siguiente CSS personalizado al elemento principal:
|
01
02
03
|
position: -webkit-sticky !important;position: sticky !important;top: 0px; |
Sección duplicada para crear el menú de categoría inferior
Para una mejor experiencia de usuario en dispositivos móviles, podemos crear otro menú de categorías que se pegará en la parte inferior de la página. Para crear el menú, simplemente duplique la sección que contiene el menú recién creado.
Optimizar el menú fijo inferior para dispositivos móviles
Actualice Sticky CSS con posicionamiento inferior.
Como solo necesitaremos este menú para “pegarnos” en el móvil, abre el apartado de ajustes y borra el CSS personalizado para escritorio. Luego agregue el siguiente CSS personalizado en la pestaña de la tableta.
|
01
02
03
|
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 al lado del ícono del menú móvil, en la pestaña avanzada de la Configuración del menú, agregue el siguiente CSS personalizado al Elemento anterior:
|
01
02
03
04
05
06
07
|
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 menú superior en el móvil
Para evitar saturar el encabezado en el móvil, deshabilite 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 dos menús de 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» en el menú de la 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 también el menú inferior en la biblioteca. Solo asegúrate de darle un nombre que recordarás.
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 permanentes.
Vista de escritorio (menú superior)
Vista móvil (menú inferior)
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ía es la plantilla de página de categoría.
Edite el área del cuerpo de la plantilla de página de categoría
Busque la plantilla asignada a «Todas las páginas de categoría» y haga clic en el icono de edición en el área del cuerpo personalizado.
Agregar menú de categoría superior de la biblioteca
Desde el editor de diseño de plantilla, haga clic en el ícono azul más para agregar una nueva sección. Luego elija la pestaña Agregar de la biblioteca y seleccione el menú de 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 en la parte inferior del diseño. Luego agregue el menú de 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ú tendrán enlaces a las páginas de categorías que usan esta plantilla. Abra la configuración del menú superior y actualice lo siguiente:
- Color del 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
También podemos agregar nuestro menú de categorías fijas 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, por lo general, 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 la página de categoría.
Luego asigne la plantilla duplicada al Blog.
Edite el cuerpo personalizado de la plantilla de blog.
Personaliza el diseño de la plantilla de blog
Utilice el editor de diseño de plantillas para diseñar la plantilla del blog. Por ahora, vamos a darle 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 para la página actual». Luego se asegurará de que esté generando 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 publicación a la parte superior de la página para que el menú superior de categorías fijas se ubique debajo del control deslizante.
Crear y asignar la página de publicaciones (o blog)
Asegúrate de tener una página de blog designada en WordPress. Para hacer esto, vaya a Configuración> Lectura. Luego, para mostrar 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 fijas realmente puede llevar tu blog al siguiente nivel. Construir uno es 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 brindar a sus usuarios la mejor experiencia. Con suerte, esto será útil en su propio blog o próximo proyecto.
Espero escuchar de usted en los comentarios.
¡Salud!