¿Te gustaría crear una barra de navegación entre publicaciones que sea fija en Divi?
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 siguiente en tu blog. Y, si agrega estos enlaces de navegación de publicaciones a una barra adhesiva, estos enlaces permanecen visibles y más accesibles.
En este tutorial, crearemos una barra de navegación entre post sticky en Divi. Para hacer esto, usaremos las opciones integradas de Divi para transformar una fila en una barra adhesiva. A continuación, utilizaremos el módulo de navegación de artículos para diseñar los enlaces "artículo anterior" y "artículo 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 la publicación que están viendo actualmente, lo que le da a la barra de navegación un elemento agradable de "pasado, presente y futuro". .
¡Empecemos!
vista
Aquí hay un vistazo rápido al diseño que crearemos en este tutorial.
Lo que necesitas para empezar
Si bien 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 el diseño rápidamente.
Importe la plantilla de publicación de blog "Meal Kit" en Divi Theme Builder
Para comenzar, descargue el 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 editor de temas, siga estos pasos:
- Ve 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 importar.
- Cliquez sur « Importar generador de temas Divi Plantillas ».
- Haga clic en el icono de edición para editar la plantilla importada.
Crear una barra de navegación fija en Divi
Parte 1: Creando la línea pegajosa
Para crear la barra de navegación adhesiva, usaremos una fila de tres columnas como contenedor adhesivo para nuestros enlaces de navegación entre la publicación y el título de la publicación.
Lea también: Divi: cómo usar la opción "Repetir degradado" para crear patrones de fondo personalizados
En la segunda sección del diseño de la plantilla, agregue una nueva fila debajo de la fila que contiene el contenido de la publicación.
Configuraciones de línea
Configuración de línea abierta.
Primero, debemos agregar la posición fija a la línea 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
Para asegurarse de que las columnas no se acumulen en dispositivos móviles, agregue el siguiente CSS personalizado a Elemento principal :
display:flex;
flex-wrap:nowrap;
align-items:center;
En la pestaña Contenido, agregue un color de fondo blanco a la línea en el estado fijo de la siguiente manera:
- fondo: ninguno
- Fondo: #ffffff (pegajoso)
En configuración 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 (superior e inferior)
Ocultar la columna central en la tableta y el teléfono
Para ocultar la columna en el móvil, abra la configuración de la columna 2 (columna central) y actualice las opciones de visibilidad de la siguiente manera:
- Deshabilitar en: teléfono, tableta
Parte 2: Creación de enlaces de navegación de artículos
Para abrir una mayor flexibilidad de diseño para la navegación posterior, usaremos dos módulos de Navegación posterior separados. En la columna de la izquierda, agregaremos un módulo de Navegación de publicaciones que solo muestra el enlace del artículo anterior. En la columna de la derecha, agregaremos un módulo de Navegación de publicaciones que solo muestra el enlace de la siguiente publicación.
Enlace a la publicación anterior
En la columna 1, agregue un nuevo módulo de Navegación posterior.
Abra la configuración del módulo, actualice la pestaña de opciones 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
- Fondo: #000000
En la pestaña Diseño, actualice lo siguiente:
- Enlaces Fuente: Kumbh Sans
- Enlaces Peso de fuente: Negrita
- 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: 1,3 cm
- Relleno: 0,9 em (superior), 0,7 em (inferior), 2 em (izquierda y derecha)
Dado que estamos ocultando la columna del medio en el móvil, las dos columnas restantes 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.
Ver también: Divi: cómo cambiar el estilo de varios elementos al pasar el mouse o después de un clic
Para asegurarse de que el vínculo de navegación abarque el 50 % de la ventana gráfica, agregue el siguiente CSS personalizado al cuadro Vínculos CSS para visualización en tableta:
display:block;
width:50vw;
text-align:center;
float:none;
Creación del enlace Next Post
Para crear el enlace para la próxima publicación, copie el módulo Navegación de publicaciones (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: Siguiente publicación
- Mostrar enlace de publicación anterior: NO
- Mostrar enlace de publicación siguiente: SÍ
- Fondo: #ffb100
En la pestaña 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
Con ambos enlaces de navegació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 del mensaje que está leyendo con la capacidad de navegar al mensaje anterior y al mensaje siguiente.
En la columna del medio, agregue un nuevo módulo de texto.
En la pestaña Contenido, haga clic en el ícono “Usar contenido dinámico” en el área del cuerpo, luego seleccione Título de la publicación / archivo.
Una vez que se haya agregado el título dinámico de la publicación, abra la configuración de Título de la publicación / archivo y actualizar el contenido antes:
- Antes de la lectura
Luego guarda los cambios.
En la pestaña Diseño, actualice lo siguiente:
- Fuente del texto: Kumbh Sans
- Peso de fuente de texto: Negrita
- Estilo de fuente: TT
- Texto Color del texto: transparente (Escritorio), #000000 (Adhesivo)
- Tamaño del texto: 16px
- Espaciado entre letras: 1px
- Altura de la línea: 1,3 cm
- Alineación de texto: centrado
- Ancho máximo: 96%
- Módulo de alineación: centro
- Relleno: 0,5 em (superior e inferior)
Resultado final
Descarga DIVI ahora!!!
Conclusión
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 barra/línea 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 que sea fijo solo en la parte superior o inferior de la ventana del navegador.
Espero que esto sea útil para su próximo blog. Si tienes alguna inquietud o sugerencia, encuéntranos en la sección de comentarios para discutirlo
También puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet.
No dudes en consultar también nuestra guía sobre la Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
