Cómo agregar un menú de categoría pegajosa a las plantillas de blog en Div

Los menús de categoría son una ventaja encantadora para cualquier blog. Ofrecen a los bloggers la oportunidad de presentar los diferentes temas disponibles, para que los lectores puedan alcanzar las cosas que mantienen de manera rápida y fácil. Por lo tanto, es importante tener 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ías adhesivas a su blog con el creador de temas de Divin. Presentaremos cómo crear el menú de categoría pegajosa 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.
Vamos a empezar. Dibujar con el ojo aquí está el menú de categoría pegajosa agregada a la plantilla de publicación

Aquí está el menú de la categoría Sticky en el móvil.

Aquí está el menú 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 pegajosa, comenzando desde la publicación y permaneciendo en la parte superior de la página en el desplazamiento.

Descargue su plantilla (modelos) de forma gratuita para poner sus manos en las plantillas con el menú pegajoso en este tutorial, primero tendrá que descargarla con el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar. No se suscribirá y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Para importar la apariencia en su página, simplemente extraiga el archivo ZIP y agregue uno de los archivos JSON al constructor de temas de portabilidad de Divic Builder de temas.
Pasemos al tutorial, ¿no? ¿Qué tienes que comenzar a comenzar? Deberás hacer lo siguiente:
Si aún no lo ha hecho, instale y active el tema de Div.
Descargue el paquete Temo Builder # 6 para comenzar con el nuevo diseño.
Después de eso, estás listo para irte. Suscríbase a nuestro canal de YouTube agregando un menú de categoría secundaria pegajosa a las plantillas de blog que Cargando el constructor de temas # 6 para este tutorial, usaremos el temas Builder # 6. Después de descargar el paquete del blog, vaya al tablero de WordPress y explore a Divin> Builder de temas.
Luego haga clic en el icono de portabilidad en la parte superior derecha. En la ventana de portabilidad emergente, seleccione la pestaña Importar y elija Div-Theme-Builder-6-LL.JSON. Luego haga clic en “Imprimir plantillas para el Div.
Esto importará todas las plantillas en temas constructor.

Ahora estamos listos para comenzar a crear nuestro menú de categoría. La creación de un nuevo menú de categoría en WordPress se puede crear un menú de categoría como un menú normal de WordPress. Desde el tablero de WordPress, explore los menús de apariencia>. Haga clic en el enlace de creación de un nuevo menú, le dé un nombre al menú y haga clic en el botón “Crear menú”.

En los elementos del menú, abra el conmutador de categoría 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 las categorías de conmutación. Los elementos en el menú Categoría se redirigirán a la página Categoría para una determinada categoría de publicaciones.

Diseño de un menú de categoría pegajosa en el área del cuerpo de la plantilla de publicación. Después de crear el menú Categoría, es hora de diseñar nuestro menú de categoría. Para hacer esto, tendremos que agregarlo a un área del cuerpo de una de las plantillas. Eventualmente, agregaremos el menú Categoría a otras plantillas relacionadas con el blog, pero por ahora, agregaremos a la plantilla para todas las publicaciones (o plantilla de publicación).

Abra el editor de apariencia de patrón para el área del cuerpo en la interfaz de constructor de temas, busque la plantilla “Todas las publicaciones” y haga clic en el icono de edición en el área personalizada del cuerpo.
Agregue una nueva sección y una fila en la parte superior de la plantilla en el editor similar a la plantilla, cree una nueva sección con una fila con una columna y tírela a la parte superior del look.

Personalice la sección antes de agregar un módulo, abra la configuración de la sección y dale un fondo y algunos rellenos de la siguiente manera:

Color de fondo: # F92C8B
Junta: 1VW arriba, 1 VW abajo
Personalice la fila y luego actualice la configuración de la fila de la siguiente manera:

Color izquierdo del gradiente de fondo: # F92C8B
Color derecho del gradiente de fondo: # FFD625
Dirección de gradiente: 90 grados
Forro: 0 px arriba, 0 px abajo
Esquinas redondeadas: 20 px
Agregue un módulo de menú dentro de la fila con una columna, agregue un nuevo módulo de menú.

Luego seleccione el menú Categoría que ha creado previamente en el menú desplegable. Una vez seleccionado, los elementos del menú aparecerán en el menú.

Modula el menú de diseño para que coincida con la plantilla para eliminar el color de fondo predeterminado para que se muestre el color de fondo de la fila.

Actualizar la siguiente configuración de diseño:

Estilo: centrado
Menú de fuentes: Ubuntu
Menú de la fuente de peso: en negrita
El estilo de la fuente del menú: TT (en letras mayúsculas)
Color de texto del menú: #ffffff
Cartas de menú de espacio: 2 PX
La altura de la línea de menú: 2em
El color del fondo de caída: #fffff
Menú desplegable de la línea de color: # F92C8B
El color del texto del menú desplegable: # 222222

Menú móvil Color de texto: # 222222
Icono de menú de hamburguesas de color: #ffffff
Icono del menú de fuente de hamburguesas: 40 PX
Ancho: 90%
Alineación del módulo: centro
La sección y la visibilidad en una fila para evitar la ocultación de cualquier menú desplegable en el menú, debemos asegurarnos y establecer nuestra sección y nuestra visibilidad visible. Además, tendremos que dar al índice Z un gran número para mantener todo el comando de menú sobre todos los demás contenidos en la página. Esto será necesario para maximizar la visibilidad del menú de caída y también para el menú adhesivo. 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 la sección (que contiene el menú) esto es opcional, por supuesto, pero para crear un menú de categoría pegajosa, abra la configuración de la sección y agregue los siguientes CSS personalizados al elemento principal: Posición: -Webkit -sticky!
Posición: ¡pegajoso! Importante;

Arriba: 0px;
Duplicar la sección Para crear el menú inferior de la categoría para una mejor experiencia de usuario en dispositivos móviles, podemos crear otro menú de categorías que permanecerá en la parte inferior de la página. Para crear el menú, simplemente copie la sección que contiene el menú que acaba de crear.
Optimice el menú Landcular Lipic para la actualización de actualización móvil CSS con la posición inferior. Debido a que solo necesitaremos este menú para “pegar” en el móvil, abra la configuración de la sección y elimine la personalización CSS para el escritorio. Luego agregue el siguiente CSS personalizado en la pestaña de la tableta. Posición: -webkit -sticky! Importante;

Posición: ¡pegajoso! Importante;

Abajo: 0px;
Cambie la dirección del menú desplegable para el menú de categoría inferior porque el menú se sentará en la parte inferior de la pantalla en el móvil, cambie la dirección del menú desplegable: Departamento del menú desplegable: arriba
Agregue la etiqueta del menú “Categorías” para agregar una etiqueta junto al icono del menú móvil, en la pestaña avanzada de la configuración del menú, agregue los siguientes CSS personalizados al elemento anterior: Posición: ¡Absoluto! Importante;

Color: #ffffff! Importante;
Tamaño de fuente: 16px;

Contenido: “Categoría”;
Línea de altura: 2em;
Izquierda: 50%;
Margen -left: -110px;
Así es como se ve el menú hasta ahora en el móvil.
Oculte el menú superior en el móvil para evitar el hacinamiento del encabezado en el móvil, apague el menú superior en el teléfono y la tableta. Esto mostrará el menú pegajoso desde la parte superior del escritorio.
Guarde ambos menús / filas en la biblioteca de la Divica. He terminado de crear los dos menús de categoría para la aparición. Para agregarlas fácilmente a otras plantillas, podemos guardarlas en nuestra biblioteca de la Divica. Para guardar el menú desde arriba, seleccione el icono “Agregar a la biblioteca” en el menú de sección. Luego dale un nombre a la apariencia y haga clic en el botón “Guardar la biblioteca”.

Repita el mismo proceso para guardar el menú inferior en la biblioteca. Solo asegúrese de darle un nombre que recordará.

El resultado final de la plantilla de publicación del blog para verificar lo que se ve una publicación en vivo con nuestro nuevo menú de categoría pegajosa. Ver escritorio (menú superior)

Vista móvil (menú inferior)

Agregar la categoría secundaria del menú pegajoso a la plantilla de página de categoría porque tenemos las secciones del menú agregadas a la biblioteca de la Divic, podemos agregarlas a cualquier plantilla. La siguiente plantilla a la que agregaremos los menús de categoría es la plantilla de página de categoría. Edite el cuerpo de la plantilla de página de categoría Encuentre la plantilla asignada “Todas las categorías de páginas” y haga clic en el icono de edición en el área del cuerpo personalizado. Agregue el menú de categoría principal en la biblioteca en el editor de plantilla, haga clic en el icono Blue Plus. Agregue una nueva sección. Luego elija la pestaña Agregar en la biblioteca y seleccione el menú de categoría superior en la lista.

Luego mueva la sección a la parte superior de la apariencia de la plantilla.

Agregue el menú inferior en la categoría de biblioteca y luego, haga clic para agregar una nueva sección justo en la parte inferior del aspecto. Luego agregue el menú de la categoría inferior de la biblioteca.

Actualice el color del enlace de menú activo para esta plantilla, es una buena idea actualizar el color activo del enlace, porque los elementos del menú contendrán enlaces a páginas de categoría utilizando esta plantilla. Abra la configuración del menú superior y actualice lo siguiente:

Color de enlace activo: # 4160FD

Ahora, cuando visita una página de categoría, el enlace activo será azul.

El resultado final de la plantilla de página de categoría

Agregar el menú de categoría adhesiva a una plantilla de página de blog también, podemos agregar nuestro menú de categoría pegajosa en la página de blog de nuestro sitio web. Una página de blog es, en principio, la página inicial de su blog y generalmente muestra un feed con todas las publicaciones de blog. Con Temo Builder Div, podemos crear una plantilla para la página del blog y agregar fácilmente el menú Categoría. Creación de la plantilla de blog primero, copie la plantilla de página de categoría. Luego asigne el duplicado del blog.
Edite el cuerpo personalizado de la plantilla de blog.

Personalice la apariencia de la plantilla de blog Use el editor de apariencia de la plantilla para diseñar la plantilla de blog. Por ahora, ofrecamos una publicación de ancho completa en la parte superior de la página. Para hacer esto, cree una nueva sección de ancho completo.

Agregue el control deslizante de ancho completo y luego agregue un módulo de ancho de ancho completo a la sección.

Establezca el contenido para extraer “publicaciones para la página actual”. Luego se asegurará de que atraiga el contenido dinámico adecuado para la página del blog.

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

Título de la fuente: Ubuntu

Fuente de peso del título: Medio

Cuerpo de fuentes: Ubuntu

Mueva el menú debajo del control deslizante de publicaciones para este aspecto, dibuje la diapositiva de publicación en la parte superior de la página para que el menú de categoría pegajosa se encuentre debajo de la diapositiva.

Cree y asigne la página Postari (o blog) asegúrese de tener una página de blog designada en WordPress. Para hacer esto, vaya a Configuración> Leer. 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 de publicación. El resultado final de la plantilla de página del blog, consulte cómo el menú Categoría se vuelve pegajosa cuando llega a la parte superior de la página.
Pensamientos finales Un menú de categorías adhesivas realmente puede llevar el blog al siguiente nivel. La construcción de uno es realmente simplemente usando Divi Builder. Y el creador de temas facilita agregar el menú donde quiera en su sitio. Incluso puede crear un menú móvil separado para brindar a sus usuarios su mejor experiencia. Esperamos que esto sea útil para su propio blog o el próximo proyecto. Espero tener noticias suyas en los comentarios. ¡Suerte!