5 cosas interesantes que puedes hacer en Divi con Anchor Links

Los enlaces de anclaje pueden mejorar la navegación y ayudar a organizar su contenido, especialmente en un sitio web con contenido de formato largo. Uno de los otros beneficios principales de usar enlaces de ancla distintos a la navegación es el hecho de que son increíbles para el SEO. Si bien el concepto de usar enlaces de anclaje es muy simple, puede ser difícil saber por dónde empezar. En realidad, es una de las primeras cosas que busqué cuando comencé a desarrollar sitios web de WordPress.

Este artículo le muestra 5 cosas interesantes que puede hacer en Divi con enlaces de anclaje. Para estos ejemplos, todo lo que necesita es Divi y el deseo de aprender.

¡Vamos!

Aprenderá a:

1. Desplácese y abra una palanca con un enlace de ancla en Divi
2. Crear un menú de navegación de una página
3. Ir a la sección de una página desde otra página
4. Utilice la navegación Divi Dot
5. Agregue enlaces de anclaje a sus encabezados

5 cosas interesantes que puedes hacer en Divi con Anchor Links

Suscríbete a nuestro canal de Youtube

Desplácese y abra una palanca con un enlace de ancla en Divi

Los conmutadores son uno de esos elementos que pueden mejorar la experiencia del usuario. Llámame perezoso (usaría la palabra eficiente) pero cuanto más fácil sea para mí obtener mi información, mejor. Soy un gran fanático de los conmutadores para ciertos tipos de contenido.

Uno de los mejores usos que he visto de los conmutadores es para las páginas de preguntas frecuentes. Funcionan muy bien para revelar pequeños fragmentos de información en los que el usuario desea centrarse. Esto solo tomará un minuto y algunas líneas de JavaScript para completar. También puede utilizar una variación de este método para abrir pestañas o acordeones y, si bien esto puede parecer difícil, en realidad no es demasiado complejo.

Primero, cree una nueva página e implemente el constructor visual. Luego seleccione la opción "Elegir un diseño prediseñado". En la ventana emergente Cargar desde la biblioteca, busque el diseño de la página de preguntas frecuentes del contable escribiendo "faq" en la barra de búsqueda. Luego haga clic en el diseño y en la vista previa que aparece, haga clic en el botón Usar este diseño para implementarlo en su página.

Ahora está listo para agregar su funcionalidad de enlace de anclaje. Para este ejemplo, voy a usar el botón en la sección del encabezado superior como enlace de anclaje para que, cuando se haga clic, la página se desplace a un interruptor específico que se abrirá simultáneamente de forma automática.

Para hacer esto, primero abra la configuración del botón y agregue la siguiente URL de enlace para su botón:

URL del enlace del botón: # toggle3

Le di a este enlace de anclaje la identificación "toggle3" para ayudar a recordar que quiero vincular al tercer conmutador en la página. Este nombre de ID se correlacionará con el ID de CSS de alternancia que agregaremos más adelante para que el botón sepa a qué alternar desplazarse.

A continuación, agregue una clase CSS única al módulo de botones:

Clase CSS: alternar abierto

Luego guarda tu configuración.

Este nombre de clase ayuda a recordarle la acción de la apertura de alternancia al hacer clic en el botón. Usaremos esta clase en nuestro jqeury personalizado para obtener la funcionalidad deseada en un momento.

A continuación, desplácese hacia abajo en la página hasta la fila que contiene las dos columnas de módulos de alternancia que se están utilizando para las preguntas frecuentes. Abra la configuración del tercer módulo de alternancia en la primera columna. Este es el módulo al que queremos desplazarnos y abrir al hacer clic en el botón (o enlace de anclaje).

En la pestaña Avanzado, agregue el siguiente ID de CSS:

ID de CSS: toggle3

Es importante que esto se corresponda exactamente con la URL del enlace del botón que se usó anteriormente. La única diferencia aquí es que debe omitir el "#".

El último paso consiste en agregar un código personalizado al cuerpo de nuestra página. Para hacer eso, navegue hasta las Opciones del tema Divi, abra la pestaña Integración y luego pegue lo siguiente en la sección del cuerpo como se muestra en el GIF a continuación.

jQuery(function ($) {
    //open toggle on button click
	$('a.open-toggle').on('click', function(event){
        $('#toggle3.et_pb_toggle_2 .et_pb_toggle_title').click();
	});
});

No olvide envolver el código en la etiqueta de secuencia de comandos adecuada.

Ahora puedes probar tu página para ver si funciona.

Para entender un poco sobre lo que hace este código. Miremos más de cerca. Aquí está el fragmento de nuevo:

jQuery(function ($) {
    //open toggle on button click
	$('a.open-toggle').on('click', function(event){
        $('#toggle3.et_pb_toggle_2 .et_pb_toggle_title').click();
	});
});

En el código, el selector "a.open-toggle" se refiere al botón con nuestra clase personalizada. El selector "# toggle3.et_pb_toggle_2 .et_pb_toggle_title" se refiere al título del toggle con el ID "toggle3" y la clase "et_pb_toggle_2".

La clase "et_pb_toggle_2" es en realidad la clase asociada con el tercer conmutador. Esto se debe a que Divi le da al primer conmutador la clase "et-pb_toggle_0", al segundo conmutador "et-pb_toggle_1", y así sucesivamente.

Entonces, si desea saber cuál es la clase para un conmutador en particular en su página, simplemente puede contar desde 0 comenzando con el primer conmutador en la página y continuar hacia abajo. O siempre puede simplemente inspeccionar el código html para encontrar la clase de esa manera.

Es importante saber esto para que pueda actualizar su código en consecuencia. Por ejemplo, si quisiera que mi botón abriera la segunda palanca en la página, reemplazaría “# toggle3.et_pb_toggle_2 .et_pb_toggle_title” con “# toggle3.et_pb_toggle_1 .et_pb_toggle_title”.

Este fragmento de código es una variación del siguiente concepto. Traté de hacerlo lo más simple posible.

Esta genial técnica también funcionaría para pestañas y acordeones. El truco consiste en identificar las clases CSS correctas para el elemento o pestaña del acordeón para que pueda usarlo en el código.

Crear un menú de navegación de una página

Este tipo de diseño de menú es popular para sitios de una página. Puede ser útil crear enlaces en el menú para pasar de una sección a otra en su página. Esto es especialmente útil si está creando un sitio de una página o una página de destino. Puede consultar la documentación sobre cómo crear sitios web de una página con Divi para obtener más información sobre este proceso.

Aquí hay una descripción general rápida sobre cómo hacer esto.

Esto funcionará para cualquier diseño prefabricado, pero para este ejemplo, usaré el diseño de la página de inicio de Web Freelancer. Cree una nueva página, implemente el constructor visual, seleccione "Elegir diseño prediseñado" y luego implemente el Diseño de página de inicio de Freelancer en su página.

Ahora debe agregar ID de CSS a cada sección a la que desee vincular (o desplazarse). Busque la sección titulada "Mis servicios". Abra la configuración de la sección, haga clic en la pestaña avanzada y agregue la siguiente ID de CSS:

ID de CSS: servicios

A continuación, busque la sección "trabajo destacado" y asigne a esa sección un ID de CSS de la siguiente manera:

ID de CSS: trabajo

Y agregue el siguiente ID de CSS a la sección "Acerca de nosotros" también:

ID de CSS: acerca de

Con estas tres secciones configuradas correctamente con sus ID de CSS únicos, podemos saber cómo crear nuestros enlaces de anclaje de menú.

Desde el Panel de control, vaya a Apariencia> Menús y cree un nuevo Menú principal . Luego, cree tres enlaces personalizados con la siguiente URL y texto del enlace:

Enlace personalizado 1
URL: #servicios
Texto del enlace: Servicios

Enlace personalizado 2
URL: #trabajo
Texto del enlace: trabajo

Enlace personalizado 3
URL: #acerca de
Texto del enlace: Acerca de

No olvide seleccionar establecer su ubicación de visualización en Menú principal. Luego guarda tu menú.

Ahora, cuando visite su página, podrá probarla. Puede notar que hay un desplazamiento suave. Esto se debe a que el tema Divi agrega automáticamente un desplazamiento suave; esta función se agregó en la versión 2.4 de Divi.

Para obtener más inspiración sobre la creación de sitios web de estilo de una página asesinos, consulte estas publicaciones:

• Cómo construir una barra lateral fija receptiva con enlaces de anclaje
• Cómo crear secciones de pantalla completa con enlaces de desplazamiento superior e inferior con Divi
• Cómo crear enlaces activos en el desplazamiento para sitios web Divi de una página

Ir a la sección de una página desde otra página

Podemos usar el ejemplo anterior para demostrar esto. Dado que agregamos un ID de CSS a tres secciones de la página (servicios, trabajo, acerca de), no solo podemos saltar a esas secciones usando nuestros enlaces de anclaje de menú, sino que también podemos saltar a esas secciones desde una página completamente diferente.

Todo lo que necesita hacer es usar la URL del enlace de anclaje cuando crea un enlace en una página diferente. Si quisiera poner un enlace a la sección de servicios con el ID "servicios", se vería algo así como www.yourdomain.com/page/#services .

A continuación, se muestra un ejemplo de cómo se cargará la página y se desplazará a la sección "Mis servicios" cuando se vincule a esa sección desde otra página.

Esto funciona muy bien para muchas llamadas a la acción diferentes (es decir, obtener más información, obtener Divi, votar por mí, etc.) a las que quizás desee acceder desde diferentes páginas de su sitio.

Utilice la navegación Divi Dot

Técnicamente, estos son enlaces de anclaje integrados. No necesitará agregar sus propios ID de sección CSS. La función Dot Navigation crea automáticamente enlaces de anclaje a partir de sus secciones. Para activar la navegación por puntos para su página, simplemente configure la opción Navegación por puntos en "ON" en la Configuración de página Divi en la parte superior derecha de la pantalla cuando edite su página. Una vez que activa Dot Navigation, Divi agrega automáticamente un menú transparente al costado de su página. Cada punto se desplaza a las secciones de la página cuando se hace clic en él.

Para obtener más información, hay una excelente publicación sobre cómo agregar etiquetas a la navegación por puntos.

Agregue enlaces de anclaje a sus encabezados

Agregar enlaces de anclaje a sus títulos siempre es una buena idea. Es una excelente manera de indexar páginas más largas con mucho contenido, lo que le permite navegar fácilmente a cada encabezado dentro de la misma página o crear enlaces a estos encabezados desde otras páginas de su sitio web. También ayuda a los motores de búsqueda a rastrear su sitio.

Para agregar una ID de CSS a sus encabezados usando Divi Builder, abra el módulo que contiene el texto del encabezado. Asegúrate de tener abierta la pestaña de texto. Busque la etiqueta del encabezado (h1, h2, h3, etc.) y luego ingrese una identificación entre los corchetes de la etiqueta del encabezado inicial. A continuación, se muestra un ejemplo de un encabezado h3 con la identificación "diseño web":

<h3 id="webdesign">Website Design</h3>

Ahora puedo vincular a este encabezado desde cualquier lugar siempre que use la URL de enlace de anclaje correcta. Que para este ejemplo debería verse así:

www.yourdomain.com/page/#webdesign

Esto también será útil para páginas o publicaciones que no utilicen el constructor Divi. Para agregar enlaces de anclaje a sus encabezados para estas páginas o publicaciones, abra la pestaña Texto en el editor de texto de WordPress. Simplemente ubique el encabezado de su elección y agregue la identificación dentro de la etiqueta de encabezado como se muestra a continuación.

Esto es exactamente lo que hice para esta publicación. Los enlaces de la sección en la parte superior de esta publicación sirven como una buena tabla de contenido que enlaza con los diferentes títulos de la publicación.

Cosas bastante interesantes.

Terminando

Los enlaces de anclaje tienen algunos usos prácticos excelentes, pero no te vuelvas loco con ellos porque siempre debes considerar primero a tu audiencia y tus objetivos. Recuerde, un buen diseño se trata de usabilidad y funcionalidad, por lo que, en algunos casos, los enlaces de anclaje pueden ser muy útiles. Pero en otros, solo significa que los usuarios se mueven de un lado a otro sobre las secciones de paralaje y terminan perdiéndose. Con suerte, pudo obtener algunos consejos útiles de esta publicación.

¿Tiene algún consejo o pregunta sobre los enlaces de anclaje? Háganos saber sobre sus experiencias en la sección de comentarios a continuación.