Una barra de navegación de publicación fija es una forma efectiva de mejorar la experiencia del usuario de cualquier sitio web de blog. Además de la navegación principal de su sitio, los enlaces de navegación de publicaciones permiten a los usuarios saltar fácilmente a la publicación anterior o a la siguiente publicación en su blog. Y, si agrega esos enlaces de navegación de publicaciones a una barra adhesiva, esos enlaces permanecen visibles y más accesibles.
En este tutorial, vamos a crear una barra de navegación de publicaciones fijas en Divi . Para ello, vamos a utilizar las opciones integradas de Divi para transformar una fila en una barra adhesiva. Luego, usaremos el módulo de navegación de publicaciones para diseñar los enlaces «publicación anterior» y «publicación siguiente». Además, agregaremos un título de publicación como contenido dinámico en el medio de la barra que recuerda a los usuarios qué publicación están viendo actualmente, lo que le da a la barra de navegación un elemento agradable de «pasado, presente y futuro».
¡Empecemos!
Aquí hay un vistazo rápido al diseño que construiremos en este tutorial.
Descarga el diseño GRATIS
Para poner sus manos en los diseños 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!
Cómo cargar la plantilla GRATIS
Para importar la plantilla gratuita al generador de temas , siga estos pasos:
- Vaya a Divi > Generador de temas.
- Haga clic en el icono de portabilidad.
- En la ventana emergente Portabilidad, seleccione la pestaña de importación.
- Elija el archivo descomprimido previamente descargado para importarlo.
- Haga clic en el botón Importar.
- Haga clic en el icono de edición para editar la plantilla importada.
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Aunque puede agregar esta barra de navegación de publicación fija a cualquier diseño o plantilla de publicación de blog en Divi, vamos a utilizar una plantilla de publicación de blog prefabricada para acelerar el proceso y comenzar con el diseño.
Si aún no lo has hecho, instala y activa el tema Divi .
Importar la plantilla de publicación de blog del kit de comidas a Theme Builder
Para comenzar, descargue la plantilla de publicación de blog gratuita para el paquete de diseño del kit de comidas de Divi . Para hacer esto, vaya a la entrada del blog .
Luego ingrese su correo electrónico para descargar el archivo zip.
Después de eso, descomprima el archivo para que esté listo para importar.
Para importar el archivo al generador de temas, siga estos pasos:
- Vaya a Divi > Generador de temas.
- Haga clic en el icono de portabilidad.
- En la ventana emergente Portabilidad, seleccione la pestaña de importación.
- Elija el archivo descomprimido previamente descargado para importarlo.
- Haga clic en el botón Importar.
- Haga clic en el icono de edición para editar la plantilla importada.
Parte 1: Creando la fila pegajosa
Para crear la barra de navegación de publicaciones fijas, vamos a utilizar una fila de tres columnas como contenedor fijo para los enlaces de navegación de nuestras publicaciones y el título de la publicación.
En la segunda sección del diseño de la plantilla, agregue una nueva fila de columna de un cuarto, medio, un cuarto debajo de la fila 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 fija a la fila para que podamos actualizar otras opciones de diseño en el estado fijo.
En la pestaña Avanzado, actualice lo siguiente:
- Posición pegajosa: adhiérase a la parte superior e inferior
- Límite fijo superior: Sección
- Límite pegajoso inferior: área del cuerpo
Con esta posición fija, la fila fija se pegará en la parte inferior de la ventana del navegador siempre que esté a la vista la sección que contiene el contenido de la publicación. Una vez que el usuario se desplaza más allá de la posición real de la fila adhesiva, la fila permanecerá bloqueada en la parte superior de la ventana del navegador en el resto del área del cuerpo de la publicación.
Para asegurarse de que las columnas no se acumulen en dispositivos móviles, agregue el siguiente CSS personalizado al elemento principal:
|
01
02
03
|
display:flex;flex-wrap:nowrap;align-items:center; |
En la pestaña de contenido, agregue un color de fondo blanco a la fila en el estado fijo de la siguiente manera:
- Color de fondo: ninguno
- Color de fondo: #ffffff (pegajoso)
En la configuración de diseño, actualice lo siguiente:
- Usar ancho de canalón personalizado: SÍ
- Ancho del canalón: 1
- Ancho: 100%
- Ancho máximo: 100%
- Relleno: 0px arriba, 0px abajo
Ocultar la columna central en la tableta y el teléfono
La columna del medio de la fila eventualmente tendrá el título de la publicación dinámica que les permite a los usuarios saber qué publicación están leyendo. Para una mejor experiencia en dispositivos móviles, vamos a ocultar la columna central en tabletas y teléfonos.
Para ocultar la columna en el móvil, abra la configuración de la columna 2 (columna del medio) y actualice las opciones de visibilidad de la siguiente manera:
- Deshabilitar en: teléfono, tableta
Para abrir una mayor flexibilidad de diseño para la navegación de publicaciones, vamos a utilizar dos módulos de navegación de publicaciones separados. En la columna de la izquierda, vamos a agregar un módulo de navegación de publicaciones que muestra solo el enlace de la publicación anterior. En la columna de la derecha, agregaremos un módulo de navegación de publicaciones que muestra solo el enlace de la siguiente publicación.
Crear el enlace de la publicación anterior
En la columna 1, agregue un nuevo módulo de navegación de publicaciones.
Abra la configuración de navegación de publicaciones, actualice las opciones de la pestaña de contenido de la siguiente manera:
- Enlace anterior (texto): Publicación anterior
- Mostrar enlace de publicación anterior: SÍ
- Mostrar enlace de publicación siguiente: NO
- Color de fondo: #000000
En la pestaña de diseño, actualice lo siguiente:
- Enlaces Fuente: Kumbh Sans
- Enlaces Peso de fuente: Negrita
- Enlaces Estilo de fuente: TT
- Color del texto de los enlaces: #ffffff
- Enlaces Tamaño del texto: 26 px (escritorio), 16 px (tableta y teléfono)
- Altura de la línea de enlaces: 1,3 em
- Acolchado: 0.9em arriba, 0.7em abajo, 2em izquierda, 2em derecha
Dado que estamos ocultando la columna del medio en el móvil, las dos columnas que quedan que contendrán los enlaces de navegación ahora pueden ocupar cada una el 50 % del ancho del navegador en la tableta y el teléfono. Para asegurarse de que el enlace de navegación abarque el 50 % de la ventana gráfica, agregue el siguiente CSS personalizado al cuadro CSS de enlaces para la vista de tableta:
|
01
02
03
04
|
display:block;width:50vw;text-align:center;float:none; |
Crear el enlace de la siguiente publicación
Para crear el enlace de la siguiente publicación, copie el módulo de navegación de la publicación (con el enlace de la publicación anterior) que acabamos de diseñar y péguelo en la columna 3 (columna derecha).
A continuación, abra la configuración de navegación de publicaciones para el módulo duplicado en la columna derecha y actualice las siguientes opciones de la pestaña de contenido:
- Siguiente enlace: próxima publicación
- Mostrar enlace de publicación anterior: NO
- Mostrar enlace de publicación siguiente: SÍ
- Color de fondo: #ffb100
En la pestaña de diseño, actualice el color del texto del enlace:
- Color del texto de los enlaces: #000000
Parte 3: Crear el 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 la publicación como contenido dinámico en la columna central. La idea es darle al usuario un buen recordatorio de la publicación que está leyendo junto con la opción de navegar a la publicación anterior y la publicación siguiente.
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 que se agrega el título dinámico de la publicación, abra la configuración para el título de la publicación/archivo y actualice el contenido anterior:
- Antes de la lectura: «
Luego guarde los cambios.
En la pestaña de diseño, actualice lo siguiente:
- Fuente del texto: Kumbh Sans
- Peso de fuente de texto: Negrita
- Estilo de fuente de texto: TT
- Texto Color del texto: transparente (escritorio), #000000 (adhesivo)
- Texto Tamaño del texto: 16px
- Espaciado entre letras de texto: 1px
- Altura de línea de texto: 1,3 em
- Alineación de texto: centro
- Ancho máximo: 96%
- Alineación del módulo: centro
- Acolchado: 0,5 em arriba, 0,5 em abajo
Resultado final
Pensamientos finales
En este tutorial, mostramos lo fácil que es crear una barra de navegación de publicaciones fijas para una plantilla de publicación de blog en Divi. La funcionalidad pegajosa de la barra/fila también se puede ajustar fácilmente con las opciones integradas de Divi. Por ejemplo, puede limitar el estado fijo a una sección o elegir pegarlo solo en la parte superior o inferior de la ventana del navegador. Con suerte, esto será útil para su próximo sitio de blog.
Espero escuchar de usted en los comentarios.
¡Salud!