Cómo crear una barra de navegación publicada en la división

Una barra de navegación adhesiva es una forma efectiva de mejorar la experiencia del usuario de cualquier sitio de blog. Además de la navegación principal de su sitio, los enlaces posteriores a la navegación permiten a los usuarios pasar fácilmente la publicación anterior o la próxima publicación en su blog y, si agrega esos enlaces de navegación a una barra pegajosa, esos enlaces siguen siendo visibles y accesibles . En este tutorial, crearemos una barra de navegación pegajosa en la división. Para hacer esto, utilizaremos las opciones integradas de la división para convertir una fila en una barra pegajosa. Luego usaremos el módulo de navegación POST para diseñar los enlaces de “publicación anterior” y “próxima publicación”. Además, agregaremos un título de publicación como un contenido dinámico en el medio de la barra, lo que recuerda a los usuarios que actualmente están visualizando, lo que le da a la barra de navegación un hermoso “pasado, presente y futuro”.
¡Vamos a empezar! Él saca la vista con un vistazo rápido al diseño que construiremos en este tutorial. Descargue el aspecto gratuito para poner su mano en los dibujos en este tutorial, primero deberá descargarlo usando 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 la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” 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!
Cómo cargar la plantilla gratuita para importar la plantilla gratuita al generador de temas, siga estos pasos:
Navegue a Divin> Temor Builder.
Haga clic en el icono de portabilidad.
En la ventana de portabilidad emergente, seleccione la pestaña Importar.
Elija el archivo descargado previamente para importarse.
Haga clic en el botón Importar.
Haga clic en el icono de edición para editar la plantilla importada.
Pasemos al tutorial, ¿no? Lo que debe comenzar, aunque puede agregar esta barra de navegación adhesiva a cualquier aspecto o publicación de blog en la división, utilizaremos una plantilla de publicación de blog preproducida y comenzaremos a crear un diseño. Si aún no lo ha hecho, instale y active el tema de Div.

Importe la plantilla de blog MEL Kit en Temo Builder para comenzar, descargue la plantilla de publicación de blog gratuita para el paquete Divin Kit Match Make. Para hacer esto, vaya a la publicación del blog.
Luego ingrese la dirección de correo electrónico para descargar el archivo zip.

Después de eso, descomprima el archivo para que esté listo para la importación. Para importar el archivo al generador de temas, siga estos pasos: navegar en Div> Temor Builder.

Haga clic en el icono de portabilidad.
En la ventana de portabilidad emergente, seleccione la pestaña Importar.
Elija el archivo descargado previamente para importarse.
Haga clic en el botón Importar.
Haga clic en el icono de edición para editar la plantilla importada.
Creación de una barra de navegación de la Part 1 de la Parte 1: Creación de la fila pegajosa para crear la elegante barra de navegación, usaremos una fila con tres columnas como contenedor pegajoso para nuestros enlaces de navegación posteriores y el título de publicación. En la segunda sección de la aparición de la plantilla, agregue una nueva fila de un cuarto, mitad y cuarto, bajo el giro que contiene el contenido de la publicación.
Configuración de fila Abra la configuración de la fila. Primero, debemos agregar la posición pegajosa en una fila, para que podamos actualizar otras opciones de diseño en el estado adhesivo. En la pestaña avanzada, actualice lo siguiente:

Posición pegajosa: Pegue desde la parte superior e inferior

Límite superior de aterrizaje: sección
Pequeño límite inferior: área del cuerpo
Con esta posición pegajosa, la fila pegajosa se adhirirá a la parte inferior de la ventana del navegador cada vez que la sección que contenga el contenido de la publicación. Una vez que el usuario ejecuta la posición real de la fila pegajosa, el giro permanecerá atascado en la parte superior de la ventana del navegador en el resto del área del cuerpo posterior.
Para asegurarse de que las columnas no se apilen en el móvil, agregue los siguientes elementos CSS personalizados al elemento principal:
Pantalla: Flex;

Flex-Wrap: Nowrap;
Alinine-Ritams: Center; debajo de la pestaña de contenido, agregue un color de fondo blanco en una fila en el estado pegajoso, de la siguiente manera:
El color del fondo: ninguno
Color de fondo: #ffffff (pegajoso)


En la configuración de diseño, actualice lo siguiente:
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1

Ancho: 100%
Ancho máximo: 100%
Forro: 0 px arriba, 0 px abajo
Ocultar la columna central de la tableta y llamar a la columna central de la fila eventualmente contendrá el título de publicación dinámica, lo que permite a los usuarios saber qué publicación leen. Para una mejor experiencia móvil, ocultaremos la columna central de la tableta y el teléfono.
Para ocultar la columna en el móvil, abra la configuración de la columna 2 (la columna central) y actualice las opciones de visibilidad de la siguiente manera:
Desactivar: teléfono, tableta

Parte 2: Creación de enlaces de navegación posteriores Para abrir más flexibilidad de diseño para navegar por la publicación, utilizaremos dos módulos de navegación posteriores por separado. En la columna izquierda, agregaremos un módulo para navegar por las publicaciones que muestran solo el enlace de publicación anterior. En la columna derecha, agregaremos un módulo para navegar por las publicaciones que solo muestran el siguiente enlace de la publicación. Creando el enlace de publicación anterior en la columna 1, agregue un nuevo módulo de navegación posterior.
Abra la configuración de la navegación de la publicación, actualice las opciones de la hoja de contenido de la siguiente manera:
Enlace anterior (texto): publicación anterior

Muestra el enlace de publicación anterior: Sí

Mostrar enlace de publicación NEX: No
Color de fondo: # 000000
En la pestaña Diseño, actualice lo siguiente:
Enlaces de fuentes: Kumbh Sans
Enlaces de peso de fuente: en negrita

Enlaces de estilo de fuente: TT
Enlaces de texto en color: #ffffff
Enlaces de tamaño de texto: 26 PX (escritorio), 16 PX (tableta y teléfono)
La altura de la línea de enlace: 1.3em
Revestimiento: 0.9em arriba, 0.7em hacia abajo, 2em a la izquierda, 2em a la derecha
Debido a que ocultamos la columna central en el móvil, las dos columnas restantes que contendrán los enlaces de navegación ahora pueden ocupar cada 50% del ancho del navegador en la tableta y el teléfono. Para asegurarse de que el enlace de navegación cubra el 50% de la ventana de vista, agregue el siguiente CSS personalizado a los enlaces CSS para ver la tableta:
Bloqueo de pantalla;
Ancho: 50VW;

Text-Align: Center;
Flotante: ninguno;
Creando el siguiente enlace de publicación Para crear el siguiente enlace de publicación, copie el módulo de publicación (con el enlace de publicación anterior) que acabo de diseñar y pegarlo a la columna 3 (columna derecha). Luego, abra la configuración de la navegación posterior al módulo duplicado en la columna derecha y actualice las siguientes opciones de hoja de contenido:
Siguiente enlace: la siguiente publicación
Mostrar el enlace de publicación anterior: no

Muestra el siguiente enlace de publicación: Sí
Color de fondo: # FFB100
En la pestaña Diseño, actualice el color del texto del enlace:
Enlaces de texto de texto: # 000000

Parte 3: Creación del título de la publicación dinámica Una vez que los dos enlaces de navegación están en su lugar, estamos listos para agregar el título de publicación como un contenido dinámico a la columna central. La idea es proporcionar al usuario un hermoso recordatorio de publicación que lee, junto con la opción de navegar en la publicación anterior y la próxima publicación. En la columna central, agregue un nuevo módulo de texto.

En la pestaña Contenido, haga clic en el icono “Usar contenido dinámico” en el área del cuerpo y seleccione el título de publicación / archivo.
Una vez agregado el título de publicación dinámica, abra la configuración para publicar / Archivo Título y actualice el contenido anterior: Antes de leer: ”

Luego guarde los cambios.

En la pestaña Diseño, actualice lo siguiente:

Texto de fuente: Kumbh Sans
El peso de la fuente de texto: en negrita
Text -Text Style: TT

Color de texto de texto: transparente (escritorio), # 000000 (pegajoso)
Tamaño de texto de texto: 16 PX
Texto de la carta de espacio: 1 PX
La altura de la línea de texto: 1.3em
Alineación de texto: Centro
Ancho máximo: 96%
Alineación del módulo: centro
Revestimiento: 0.5em arriba, 0.5em abajo
Resultados finales Pensamientos finales En este tutorial, mostré lo fácil que es crear una barra de navegación pegajosa para una plantilla de publicación de blog. La funcionalidad pegajosa de la barra / fila también se puede ajustar fácilmente con el div. Por ejemplo, puede limitar la condición pegajosa a una sección o elegir pegarla solo en la parte superior o inferior de la ventana de vista del navegador. Esperamos que esto sea útil para su próximo sitio de blog. Espero tener noticias suyas en los comentarios. ¡Suerte!