Cómo crear un acordeón en el que se puede hacer clic usando encabezados de página adhesivos en Divi

Las nuevas opciones de posición adhesiva de Divi 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 ancla de desplazamiento suave para crear una forma similar a un acordeón de indexar y navegar por su página. Construirlo es realmente fácil con las opciones integradas de Divi, por lo que no hay necesidad de 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!

Vistazo

Aquí hay un vistazo rápido al diseño que crearemos en este tutorial.

Aquí puede ver que los encabezados de página adhesivos se pegan 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 adhesivos se saltará (usando enlaces de ancla de desplazamiento suave) a esa sección de la página también como un acordeón.

Esta es la funcionalidad en dispositivos móviles también.

Descarga el diseño GRATIS

Para poner sus manos sobre 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 nuestra lista de correo electrónico Divi Daily mediante 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín 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 toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de 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.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

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:

1. Si aún no lo ha hecho, instale y active Divi Theme.
2. Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (constructor visual).
3. Elija la opción "Construir desde cero".

Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.

Crear la fila pegajosa

Para empezar, creemos nuestra fila pegajosa. 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 adhesiva: adherirse a la parte superior e inferior

Esto hará que la fila se quede en la parte superior de la ventana del navegador a medida que el usuario se desplaza hacia abajo y luego se quedará en la parte inferior de la ventana del navegador a medida que el usuario se desplaza hacia arriba.

Diseñando Sticky Row

Ahora que la posición adhesiva está en su lugar, podemos comenzar a diseñar la fila usando la opción de estilo adhesivo incorporada que le permite darle al elemento un estilo específico siempre que la posición adhesiva esté en efecto (o atascada). Para la fila, queremos que el fondo cambie a un color oscuro siempre que esté en la posición atascada. 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 de la canaleta: 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 (adhesivo): 0px
• Ancho del borde izquierdo (escritorio): 0px
• Ancho del borde izquierdo (adhesivo): 8px

Creación del texto de encabezado fijo

Para crear el texto del encabezado de la página, agregue un nuevo módulo de texto a la fila.

Luego pegue el siguiente HTML en el contenido del cuerpo.

<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 (desplazamiento): rgba (255,255,255,0.2)

Esto hará que sea más obvio que el usuario puede hacer clic en los títulos.

Aplicar estilo al texto de encabezado fijo

En la pestaña de diseño, actualice lo siguiente:

• Fuente del encabezado 2: Montserrat
• Alineación del texto del encabezado 2: izquierda
• Color del texto del título 2 (escritorio): predeterminado (o negro)
• Color del texto del encabezado 2 (pegajoso): #ffffff
• Tamaño del texto del encabezado 2: 80 px (escritorio), 22 px (adhesivo), 28 px (teléfono)
• Altura de línea del encabezado 2: 1.3em (escritorio), 1em (adhesivo)

Luego actualice el relleno de la siguiente manera:

• Relleno (escritorio): 15px superior, 15px inferior
• Relleno (adhesivo): 10 px arriba, 0 px abajo, 20 px a la izquierda
• Relleno (tableta y teléfono): 15 píxeles en la parte superior, 15 píxeles en la parte inferior, 15 píxeles a la izquierda, 15 píxeles a la derecha

Creación del 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 adhesiva.

Luego agregue un nuevo módulo de texto a la fila y pegue algo de contenido simulado.

Duplicar la sección según sea necesario para contenido y encabezados de página más pegajosos

En este punto, tiene el diseño básico en su lugar 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 / encabezado pegajoso 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.

Actualizar el contenido del texto y el color del borde de la fila

En la sección de duplicados, actualice el texto dentro del módulo de texto y luego actualice el color del borde en 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 darnos 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 página adhesivos

En este momento, la funcionalidad permitirá al usuario desplazarse hacia abajo en la página y hacer que los títulos se peguen en la parte superior e inferior como un acordeón. Ahora queremos hacer 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 mediante enlaces de anclaje.

Para agregar un enlace de anclaje, primero debemos agregar un 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 la siguiente ID de CSS:

• ID de CSS: uno

Luego abra la configuración de la fila adhesiva y agregue la siguiente URL de enlace de 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 fija 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: #two

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 fija 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: #three

Agregar ID de CSS de la sección 4

Finalmente, necesitamos agregar el enlace de anclaje 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 fija 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: #four

Resultado final

Aquí puede ver que los encabezados de página adhesivos se pegan 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 adhesivos se saltará (usando enlaces de ancla de desplazamiento suave) a esa sección de la página también como un acordeón.

Aquí está la funcionalidad en dispositivos móviles también.

Pensamientos finales

Este diseño utiliza la opción de posición adhesiva de una manera única. No solo los encabezados de la página 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 su página. Este diseño definitivamente sería útil para indexar contenido de formato largo o para crear un paginador fácil de usar.

Espero tener noticias tuyas en los comentarios.

¡Salud!