Divi y sus opciones pegajosas continúan abriendo puertas para nuevos diseños y funcionalidades. En este tutorial, vamos a diseñar una forma creativa de guiar a los usuarios a través del contenido de una página web utilizando encabezados fijos como enlaces ancla. Los encabezados fijos se adhieren a la parte superior e inferior de la ventana del navegador como un identificador útil del contenido a la vista, así como del contenido que se encuentra arriba o abajo. Al agregar enlaces de anclaje a estos encabezados fijos, podemos permitir que los usuarios hagan clic en esos encabezados fijos para saltar a la sección correspondiente. Esta es una excelente manera de mejorar la experiencia del usuario en las páginas que muestran un proceso (como los pasos de una receta).
Para construir la navegación de enlace de anclaje de encabezado fijo, vamos a utilizar solo las opciones integradas de Divi. La funcionalidad en el escritorio y el móvil son únicas. ¡Y los resultados pueden sorprenderte!
¡Empecemos!
Aquí hay un vistazo a los encabezados fijos con la navegación de enlace ancla que construiremos en este tutorial.
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!
Suscríbete a nuestro canal de Youtube
Para importar el diseño de la sección a su Biblioteca Divi, navegue hasta la Biblioteca Divi.
Haga clic en el botón Importar.
En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.
Luego haga clic en el botón importar.
Una vez hecho esto, el diseño de la sección estará disponible en Divi Builder.
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Para comenzar, deberá hacer lo siguiente:
- Si aún no lo has hecho, instala y activa el tema Divi .
- Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
- Seleccione la opción «Elegir un diseño prefabricado».
- En la ventana emergente Cargar desde biblioteca, busque y cargue el diseño de la página de recetas del kit de comidas desde el paquete de diseño del kit de comidas .
Parte 2: Modificar el diseño
Eliminación de filas
Una vez que se haya cargado el diseño, elimine las dos filas inferiores debajo de la segunda sección denominada Instrucciones.
Ahora debería tener una fila con el contenido del «paso 01» de la receta.
Crear una nueva fila y llenarla con contenido
Los encabezados fijos van a residir en la columna izquierda de una fila de dos columnas. Para crear esta configuración, agregue una nueva fila de columna de 0ne-fourths tres cuartos debajo de la fila actual.
Usando mulitselect (mantenga presionado cmd/ctrl y haga clic), seleccione los tres módulos que contienen el contenido para el paso uno de la receta en la fila de diseño prefabricado anterior.
Luego arrastre esos módulos en la columna derecha de la nueva fila que acaba de crear.
Elimine la fila vacía de arriba cuando haya terminado.
Parte 3: Crear encabezados adhesivos para cada fila
Este diseño incluirá cuatro filas, cada una con un encabezado adhesivo en la columna izquierda. Después de crear el primer encabezado adhesivo para la primera fila, duplicaremos las filas para crear cada fila adicional de contenido.
Creación del encabezado fijo para la primera fila (paso uno)
Para crear el primer encabezado fijo para el paso uno, agregue un nuevo módulo de texto a la columna izquierda de la fila.
Luego actualice la configuración de diseño para el texto del encabezado H4 de la siguiente manera:
- Encabezado 4 Peso de fuente: Negrita
- Título 4 Estilo de fuente: TT
- Encabezado 4 Alineación de texto: Centro
- Título 4 Tamaño del texto: 15px
- Encabezado 4 Espaciado entre letras: 3px
- Encabezado 4 Altura de línea: 2em
Luego actualice el espaciado y las esquinas redondeadas de la siguiente manera:
- Margen: 0px
- Relleno: 10px
- Esquinas redondeadas: 3px
NOTA: Debido al tamaño del texto (15 px), la altura de la línea (2 em que equivale a 30 px), el relleno (10 px) y el margen inferior H4 predeterminado (10 px), la altura resultante del módulo de texto es 50 px (30 px + 10 px + 10 píxeles). Es importante tener esto en cuenta para que sepamos cuánto compensar cada posición superior e inferior del palo en el futuro.
En la pestaña avanzada, actualice las siguientes opciones adhesivas :
- Desplazamiento inferior adhesivo: 150 px (escritorio), 0 px (tableta)
- Límite superior fijo: Sección (escritorio), Ninguno (tableta)
- Límite fijo inferior: Sección (escritorio), Fila (tableta)
- Desplazamiento de los elementos pegajosos circundantes: NO
Esta técnica se asegurará de que nuestros enlaces de anclaje lleven la fila a la parte superior de la ventana del navegador al hacer clic en el encabezado adhesivo.
A continuación, actualice el color de fondo en el estado fijo:
- Color de fondo adhesivo: #febd2d
Luego actualice el Índice Z en el estado pegajoso:
- Índice Z (pegajoso): 10003
Esto asegurará que el encabezado se mantenga por encima de otros encabezados fijos siempre que se apilen en dispositivos móviles.
Actualizar contenido simulado
Antes de duplicar nuestra fila para obtener más pasos, elimine el encabezado H4 en el módulo de texto superior en la columna 2. Luego copie el segundo módulo de texto (con el texto del párrafo) en la columna 2 y péguelo tres veces debajo del módulo de imagen. Esto nos dará más contenido para desplazarnos.
Fila duplicada 1
Para crear la segunda fila para el paso dos, duplique la fila 1.
Crear encabezado fijo para la segunda fila (paso dos)
Abra la configuración de texto para el encabezado en la columna 1 de la fila duplicada (segunda) y cambie el texto H4 a «Paso-02».
Luego actualice las opciones adhesivas para el texto de la siguiente manera:
- Desplazamiento superior adhesivo: 50 px (escritorio), 0 px (tableta)
- Desplazamiento inferior fijo: 100 px (escritorio)
- Límite superior fijo: Sección (tableta)
Luego actualice el Índice Z para el estado pegajoso:
- Índice Z (pegajoso): 10002
Fila duplicada 2
Para crear la tercera fila para el paso tres, duplique la fila 2.
Crear encabezado fijo para la tercera fila (Paso tres)
Abra la configuración de texto para el encabezado en la columna 1 de la fila duplicada (tercera) y cambie el texto H4 a «Paso-03».
Luego actualice las opciones adhesivas para el texto de la siguiente manera:
- Desplazamiento superior fijo: 100 px (escritorio)
- Desplazamiento inferior fijo: 50 px (escritorio)
Luego actualice el Índice Z para el estado pegajoso:
- Índice Z (pegajoso): 10001
Fila duplicada 3
Para crear la cuarta fila para el paso cuatro, duplique la fila 3.
Crear encabezado fijo para la cuarta fila (paso cuatro)
Abra la configuración de texto para el encabezado en la columna 1 de la fila duplicada (tercera) y cambie el texto H4 a «Paso-04».
Luego actualice las opciones adhesivas para el texto de la siguiente manera:
- Desplazamiento superior fijo: 150 px (escritorio)
- Desplazamiento inferior fijo: 0px (escritorio)
Luego actualice el Índice Z para el estado pegajoso:
- Índice Z (pegajoso): 10000
Actualizar el índice de la columna Z para cada encabezado fijo
Aunque actualizamos el índice z para cada encabezado de barra, también debemos actualizar el índice z para la columna principal de cada encabezado para asegurarnos de que funcione el orden de apilamiento en dispositivos móviles.
Para hacer esto, abra la configuración para cada columna principal de cada encabezado fijo (paso 1-4) y actualice el índice z de la columna para cada uno de la siguiente manera:
Fila 1, Columna 1
- Índice Z: 20
Fila 2, Columna 1
- Índice Z: 19
Fila 3, Columna 1
- Índice Z: 18
Fila 4, Columna 1
- Índice Z: 17
Parte 3: Creación de enlaces de anclaje de encabezado fijo
Para crear los enlaces de anclaje para cada encabezado, debemos asignar una ID de CSS a la Fila que corresponde a la URL del módulo para el encabezado.
Enlace de anclaje del primer paso
Para crear el enlace de anclaje para el primer encabezado fijo en la fila 1, abra la configuración de la fila 1 y agregue la siguiente ID de CSS:
- ID de CSS: uno
Luego abra la configuración del módulo de texto para el encabezado «paso-01» y agregue la siguiente URL del enlace del módulo:
- URL del enlace del módulo: #one
Enlace de anclaje del segundo paso
Para crear el enlace de anclaje para el segundo encabezado adhesivo en la fila 2, abra la configuración de la fila 2 y agregue la siguiente ID de CSS:
- ID de CSS: dos
Luego abra la configuración del módulo de texto para el encabezado «paso-02» y agregue la siguiente URL del enlace del módulo:
- URL del enlace del módulo: #dos
Enlace de anclaje del paso tres
Para crear el enlace de anclaje para el tercer encabezado fijo en la fila 3, abra la configuración de la fila 3 y agregue la siguiente ID de CSS:
- ID de CSS: tres
Luego abra la configuración del módulo de texto para el encabezado «paso-03» y agregue la siguiente URL del enlace del módulo:
- URL del enlace del módulo: #tres
Enlace de anclaje del paso cuatro
Para crear el enlace de anclaje para el cuarto encabezado adhesivo en la fila 4, abra la configuración de la fila 4 y agregue la siguiente ID de CSS:
- ID de CSS: cuatro
Luego abra la configuración del módulo de texto para el encabezado «paso-04» y agregue la siguiente URL del enlace del módulo:
- URL del enlace del módulo: #4
Resultados finales
Pensamientos finales
Los encabezados fijos por sí solos son útiles para mantener a los usuarios al tanto del contenido a la vista. Y, la creación de encabezados fijos como navegación de enlace de anclaje es una forma excepcionalmente efectiva de mejorar la experiencia del usuario de una manera que involucra a los usuarios para navegar a través de los pasos rápidamente. Con suerte, esto se convertirá en un diseño útil para cualquier página que guíe a los usuarios a través de un proceso.
Espero escuchar de usted en los comentarios.
¡Salud!