Divi y sus nuevas opciones de posición fija abren la puerta a muchas posibilidades de diseño nuevas y emocionantes. En este tutorial, le mostraremos cómo combinar las opciones de posición fija de Divi con enlaces de anclaje de desplazamiento suave para crear una forma similar a un acordeón para indexar y navegar por su página. Construirlo es realmente fácil con las opciones integradas de Divi, por lo que no es necesario CSS adicional u otro código. Una vez hecho esto, tendrá una forma única de organizar su página y mejorar la experiencia del usuario en computadoras de escritorio y dispositivos móviles.
¡Empecemos!
Aquí hay un vistazo rápido al diseño que construiremos en este tutorial.
Aquí puede ver los encabezados de las páginas fijas en la parte superior e inferior de la ventana del navegador y se apilan uno encima del otro como un acordeón.
Aquí puede ver que al hacer clic en uno de los encabezados fijos saltará (usando enlaces de anclaje de desplazamiento suave) a esa sección de la página también como un acordeón.
Aquí está la funcionalidad en el móvil también.
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!
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).
- Elija la opción «Construir desde cero».
Después de eso, tendrás un lienzo en blanco para comenzar a diseñar en Divi.
Crear la fila pegajosa
Para empezar, creemos nuestra fila fija. Para hacer eso, agregue una fila de una columna a la sección predeterminada.
Abra la configuración de la fila. En la pestaña Avanzado, actualice la posición fija de la siguiente manera:
- Posición pegajosa: adhiérase a la parte superior e inferior
Esto hará que la fila se mantenga en la parte superior de la ventana del navegador cuando el usuario se desplaza hacia abajo y luego se mantendrá en la parte inferior de la ventana del navegador cuando el usuario se desplaza hacia arriba.
Estilo de la fila pegajosa
Ahora que la posición fija está en su lugar, podemos comenzar a diseñar la fila usando la opción de estilo fijo incorporada que le permite darle al elemento un estilo específico siempre que la posición fija esté en efecto (o bloqueada). Para la fila, queremos que el fondo cambie a un color oscuro siempre que esté en la posición de bloqueo. Para hacer esto, abra la configuración de la fila y actualice lo siguiente:
- Color de fondo (escritorio): #ffffff
- Color de fondo (pegajoso): #051923
En la pestaña de diseño, actualice lo siguiente:
- Usar ancho de canalón personalizado: SÍ
- Ancho del canalón: 1
- Ancho (tableta y teléfono): 100%
- Relleno: 0px arriba, 0px abajo
A continuación, queremos dar un borde inferior a la fila para que sirva como línea divisoria entre el encabezado y el contenido a continuación. Y, una vez que la fila esté en la posición fija, queremos mostrar un borde izquierdo en su lugar.
Debajo de la opción de borde, actualice lo siguiente:
- Color del borde: #6eeb83
- Ancho del borde inferior (escritorio): 8px
- Ancho del borde inferior (pegajoso): 0px
- Ancho del borde izquierdo (escritorio): 0px
- Ancho del borde izquierdo (pegajoso): 8px
Crear el texto del encabezado adhesivo
Para crear el texto del encabezado de la página, agregue un nuevo módulo de texto a la fila.
Luego pegue el siguiente código HTML en el contenido del cuerpo.
|
01
|
<h2><strong>Step 2:</strong> S<span>ed do eiusmod tempor incididunt</span></h2> |
Y actualice el color de fondo al pasar el mouse también…
- Color de fondo (pasar el mouse): rgba (255,255,255,0.2)
Esto hará que sea más obvio que el usuario puede hacer clic en los encabezados.
Dar estilo al texto del encabezado adhesivo
En la pestaña de diseño, actualice lo siguiente:
- Título 2 Fuente: Montserrat
- Encabezado 2 Alineación de texto: Izquierda
- Título 2 Color del texto (escritorio): predeterminado (o negro)
- Título 2 Color del texto (adhesivo): #ffffff
- Título 2 Tamaño del texto: 80 px (escritorio), 22 px (adhesivo), 28 px (teléfono)
- Encabezado 2 Altura de línea: 1,3 em (escritorio), 1 em (adhesivo)
Luego actualice el relleno de la siguiente manera:
- Relleno (escritorio): 15px arriba, 15px abajo
- Relleno (adhesivo): 10 px arriba, 0 px abajo, 20 px a la izquierda
- Relleno (tableta y teléfono): 15 px arriba, 15 px abajo, 15 px a la izquierda, 15 px a la derecha
Crear el contenido de la página simulada
Una vez que la fila adhesiva esté en su lugar, podemos agregar otra fila que contendrá contenido de página simulada debajo del encabezado. Para hacer esto, cree una nueva fila de una columna debajo de la fila fija.
Luego agregue un nuevo módulo de texto a la fila y pegue algún contenido simulado.
Duplicar la sección según sea necesario para obtener más encabezados y contenido de página fija
En este punto, tiene el diseño básico listo para crear secciones de página adicionales con encabezados fijos simplemente duplicando la sección.
Sección duplicada
Para crear otra sección, duplique la sección existente que contiene la fila/título fijo y la fila de contenido simulado. Esto acelerará el proceso de desarrollo de la creación de la siguiente sección de la página.
Actualice el contenido del texto y el color del borde de la fila
En la sección duplicada, actualice el texto dentro del módulo de texto y luego actualice el color del borde debajo de la configuración de la fila.
Repita según sea necesario
Continúe duplicando la sección y actualice el contenido del texto y el color del borde de la fila según sea necesario. Para este ejemplo, vamos a duplicar la sección otras dos veces más para obtener un total de cuatro encabezados de página adhesivos que formarán el acordeón.
Adición de enlaces de anclaje a los encabezados de las páginas fijas
En este momento, la funcionalidad permitirá al usuario desplazarse hacia abajo en la página y hacer que los encabezados se peguen en la parte superior e inferior como un acordeón. Ahora queremos que se pueda hacer clic en los encabezados para que, cuando el usuario haga clic en uno de los encabezados fijos, el usuario sea llevado a esa sección de la página. Esto se hace usando enlaces ancla.
Para agregar un enlace de anclaje, primero debemos agregar una ID de CSS a la sección a la que queremos que salte el enlace.
Agregar ID de CSS de la sección 1
Abra la configuración de la sección y agregue el siguiente ID de CSS:
- ID de CSS: uno
A continuación, abra la configuración de la fila adhesiva y agregue la siguiente URL del enlace de la fila:
- URL de enlace de fila: #one
Ahora, cuando el usuario haga clic en la fila/encabezado, la página saltará a esta primera sección.
Agregar ID de CSS de la Sección 2
A continuación, debemos agregar el enlace de anclaje para el segundo encabezado.
Abra la configuración de la segunda sección y agregue la siguiente ID de CSS:
- ID de CSS: dos
Agregar URL de enlace de fila adhesiva de la sección 1
Luego abra la configuración de la fila adhesiva dentro de la segunda sección y agregue la URL del enlace de la fila:
- URL de enlace de fila: #dos
Agregar ID de CSS de la Sección 3
A continuación, debemos agregar el enlace de anclaje para el tercer encabezado.
Abra la configuración de la tercera sección y agregue la siguiente ID de CSS:
- ID de CSS: tres
Agregar URL de enlace de fila adhesiva de la sección 1
Luego abra la configuración de la fila adhesiva dentro de la tercera sección y agregue la URL del enlace de la fila:
- URL de enlace de fila: #tres
Agregar ID de CSS de la Sección 4
Finalmente, necesitamos agregar el enlace ancla para el cuarto encabezado.
Abra la configuración de la cuarta sección y agregue la siguiente ID de CSS:
- ID de CSS: cuatro
Agregar URL de enlace de fila adhesiva de la sección 1
Luego abra la configuración de la fila adhesiva dentro de la cuarta sección y agregue la URL del enlace de la fila:
- URL de enlace de fila: #cuatro
Resultado final
Aquí puede ver los encabezados de las páginas fijas en la parte superior e inferior de la ventana del navegador y se apilan uno encima del otro como un acordeón.
Aquí puede ver que al hacer clic en uno de los encabezados fijos saltará (usando enlaces de anclaje de desplazamiento suave) a esa sección de la página también como un acordeón.
Aquí está la funcionalidad en el móvil también.
Pensamientos finales
Este diseño utiliza la opción de posición fija de una manera única. Los encabezados de página no solo permanecen visibles a medida que el usuario se desplaza, sino que también se puede hacer clic en cada encabezado, lo que lleva al usuario a esa sección específica mediante enlaces de anclaje. El resultado es muy parecido a un acordeón para toda la página. Este diseño definitivamente sería útil para indexar contenido de formato largo o para crear un one-pager fácil de usar.
Espero escuchar de usted en los comentarios.
¡Salud!