Los menús de categoría son una adición encantadora 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 de manera rápida y fácil. Por lo tanto, es importante que tenga un menú de categoría bien diseñado en todas las plantillas relacionadas con el blog 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ías fijas 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ú inferior de categoría adhesiva en dispositivos móviles.

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 fija comenzando debajo del control deslizante de la publicación y pegándose a la parte superior de la página en el desplazamiento.

Agregar un menú de categoría secundaria fijo a las plantillas de tu blog

Carga del paquete de generador de temas # 6

Para este tutorial, vamos a usar el paquete de creación de temas # 6 . Una vez que descargue el paquete de la publicación del blog, vaya al panel de WordPress y navegue a Divi> Generador de temas.

Luego haga clic en el icono de portabilidad en la esquina 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.

Crear un nuevo menú de categoría en WordPress

Se puede crear un menú de categoría como un menú normal en WordPress. Desde el Panel de WordPress, navegue hasta 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 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 la alternancia 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.

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

Después de crear el menú de categorías, es hora de diseñar nuestro menú de categorías. Para hacer esto, necesitaremos agregarlo al á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, vamos a agregarlo 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 a 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:

  • Gradiente de fondo Color izquierdo: # f92c8b
  • Gradiente de fondo Color correcto: # ffd625
  • Dirección de degradado: 90 grados
  • Acolchado: 0px arriba, 0px abajo
  • Esquinas redondeadas: 20 px

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ía que creó anteriormente en el menú desplegable. Una vez seleccionado, sus elementos de 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 fuente del menú: negrita
  • Estilo de fuente del menú: TT (mayúscula)
  • Color del texto del menú: #ffffff
  • Espaciado entre letras del menú: 2px
  • Altura de la línea del menú: 2 em
  • Color de fondo del menú desplegable: #ffffff
  • Color de línea del menú desplegable: # f92c8b

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

Sección y visibilidad de fila

Para evitar que se oculten los menús desplegables del menú, debemos asegurarnos y establecer la visibilidad de nuestra sección y fila en visible. Además, también tendremos que darle al índice z un número alto para mantener todo el orden del menú por encima de todo el 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

Por supuesto, esto es opcional, 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 menú de categoría inferior

Para una mejor experiencia de usuario en dispositivos móviles, podemos crear otro menú de categoría que se mantendrá 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.

Como solo necesitaremos este menú para «pegarnos» en el móvil, abra la configuración de la sección y elimine 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 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, 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 dos menús de categoría para el diseño. Para que sea 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 sección. Luego asigne un nombre al diseño y haga clic en el botón «Guardar en biblioteca».

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

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.

Vista de escritorio (menú superior)

Vista móvil (menú inferior)

Agregar el menú de categoría secundaria fijo a la plantilla de página de categoría

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

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ía» y haga clic en el icono de edición en el Área del cuerpo personalizado.

Agregar el 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 el 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 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 páginas de categorías que usan 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 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 una fuente de todas sus publicaciones de blog. Con Divi Theme Builder, podemos crear una plantilla para la página del blog y agregar el menú de categoría fácilmente.

 Crear 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

Use el editor de diseño de plantilla para diseñar la plantilla de 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 extraiga 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
  • Título Fuente Peso: Medio
  • Fuente del cuerpo: Ubuntu

Mover menú debajo del control deslizante Publicar

Para este diseño, arrastre el control deslizante de la publicación a la parte superior de la página para que el menú de categoría 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ía se vuelve fijo cuando llega a la parte superior de la página.

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

You have Successfully Subscribed!