La nueva herramienta Sticky de Divi abre las puertas a nuevas posibilidades de diseño.
En este tutorial, te muestro cómo combinar la herramienta Sticky de Divi con enlaces y marcadores de posición para crear un acordeón que permite hacer de índice del contenido de una página y al mismo tiempo navegar fácilmente por ella.
Construirlo ahora es realmente fácil gracias a Divi, ya que no hay necesidad de CSS adicional u otro código.
Vamos a usar principalmente la herramienta Sticky Position de Divi para hacer que los encabezados del contenido se adhieran a los bordes superior e inferior de la página.
También vamos a crear marcadores de posición para enlazarlos desde estos mismos encabezados.
Para crear el acordeón de navegación con Divi vamos a usar las siguientes herramientas:
En el siguiente video te muestro paso a paso cómo crear un acordeón para navegar fácilmente una página con Divi.
El acordeón de navegación clicable es una forma única de organizar una página y mejorar la experiencia del usuario en computadoras de escritorio y dispositivos móviles.
Vamos a usar la primera sección para contener al primer bloque de contenido. Esto es el título o encabezado H2 y el texto o párrafo.
A esta sección le vamos a asignar un ID CSS (por ejemplo bloque1) para poder enlazar a ella desde el acordeón.
SEPARACIÓN:
ID y Clase CSS:
En segundo lugar vamos a insertar una fila con estructura de 1 columna para contener al subtítulo o encabezado H2.
A esta fila la vamos a enlazar hacia el marcador que refiere al ID de la sección (por ejemplo: #bloque1). Así cuando hagamos clic sobre esta fila en el acordeón nos va a llevar hasta la posición que corresponde al encabezado dentro de la página.
También es muy importante ir a Scroll Effects, en la pestaña Avanzado, e indicar que esta fila se adhiera Arriba y Abajo (Stick to Top and Bottom), ya que es la fila que conformará las pestañas del acordeón cuando vayamos navegando por la página.
Luego vamos a asignarle también un color de fondo y estilo de bordes diferentes para Escritorio y para Sticky.
SCROLL EFFECTS
ENLACE:
FONDO:
SEPARACIÓN:
BORDES
En tercer lugar vamos a insertar un Módulo Texto de Divi para crear el primer encabezado H2.
A este módulo de texto le vamos a asignar un tamaño de texto diferente para Sticky y para Escritorio. Uno se usará cuando la fila esté adherida a alguno de los bordes y el otro cuando no lo esté.
También vamos a hacerle ajustes específicos a los rellenos para cada una de estas dos situaciones.
FONDO:
TEXTO DEL SUBTITULO:
SEPARACION:
Ahora insertamos una segunda fila con estructura de 1 columna para contener al texto correspondiente al contenido del primer bloque.
Vamos a insertar otro Módulo Texto de Divi para pegar en la página el contenido correspondiente al primer encabezado.
Ajusta los estilos del texto como mejor te parezca.
Por último duplicamos la sección completa tantas veces como encabezados tengamos en la página.
Y por último reemplaza en cada sección el encabezado y el texto que corresponda, sin olvidarte de modificar el Identificador CSS de cada sección y el enlace de la fila en cada caso.
Ahora simplemente nos queda guardar los cambios en el editor e ir a ver cómo queda la página publicada para comprobar que el acordeón de navegación ya funciona según lo previsto.
Como ves, no fue necesario usar ningún código ni CSS adicional.
Déjame debajo un comentario contándome que te parecieron estas características y posibilidades de Divi y ayudame compartiéndolo para que más personas puedan aprender todo lo que se puede hacer con Divi.
Al momento de activar el constructor Divi se crea una nueva opción en el menú…
Divi es un constructor para WordPress que se instala como un si fuera un tema…
En esta guía te muestro paso a paso cómo crear una caja con información del…
En esta guía te muestro cómo cambiar el encabezado de la página home para que…
En esta guía vamos a ver cómo asignar con Divi un diseño diferente a entradas…
En esta guía te muestro paso a paso cómo crear un CV digital con WordPress…