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 anclaje distintos de la navegación es el hecho de que son increíbles para 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 te muestra 5 cosas geniales que puedes hacer en Divi con enlaces de anclaje. Para estos ejemplos, todo lo que necesita es Divi y un deseo de aprender.

¡Vamonos!

Los acordeones 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 alternar ciertos tipos de contenido.

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

Primero, cree una nueva página e implemente el generador visual. Luego seleccione la opción «Elegir un diseño prefabricado». En la ventana emergente Cargar desde la biblioteca, busque el diseño de la página de preguntas frecuentes del contador 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, al hacer clic, la página se desplace a una palanca específica que se abrirá simultáneamente.

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 alternar en la página. Este nombre de identificación se correlacionará con la ID de CSS de alternancia que agregaremos más adelante para que el botón sepa a qué alternar para desplazarse.

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

Clase CSS: abrir-alternar

Luego guarda tu configuración.

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

A continuación, desplácese hacia abajo de la página a la fila que contiene las dos columnas de módulos de alternancia que se utilizan 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 la siguiente ID de CSS:

ID de CSS: toggle3

Es importante que esto se correlacione exactamente con la URL del enlace del botón utilizada 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 hacerlo, navegue a las Opciones de 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 olvides envolver el código en la etiqueta de script adecuada.

Ahora puede probar su página para ver si funciona.

Para entender un poco sobre lo que está haciendo 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 la tercera palanca. Esto se debe a que Divi le da al primer conmutador la clase «et-pb_toggle_0», el segundo conmutador «et-pb_toggle_1», y así sucesivamente.

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

Es importante saberlo para que pueda actualizar su código en consecuencia. Por ejemplo, si quisiera que mi botón abriera la segunda palanca del acordeón 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 mantenerlo lo más simple posible.

Esta técnica genial 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 saltar 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 rápida de cómo hacer esto.

Esto funcionará para cualquier diseño prefabricado, pero para este ejemplo, voy a usar el diseño de la página de inicio de Web Freelancer. Cree una nueva página, implemente el generador visual, seleccione «Elegir diseño prefabricado» y luego implemente el diseño de la 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 dele a esa sección un ID de CSS de la siguiente manera:

ID de CSS: trabajo

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

ID de CSS: about

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

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

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

Enlace personalizado 2
URL: #work
Texto del enlace: Trabajo

Enlace personalizado 3
URL: #about
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, puede probarla. Puede notar que hay un desplazamiento suave. Esto se debe a que el tema Divi agrega automáticamente un desplazamiento suave: esta característica se agregó en Divi versión 2.4 .

Saltar a una sección de página desde otra página

Podemos usar el ejemplo de arriba 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 esa sección 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 se crea un enlace en una página diferente. Si desea poner un enlace a la sección de servicios con la ID «servicios», se vería algo así como,  www.yourdomain.com/page/#services .

Para asegurarse de que la página se desplaza a la ubicación correcta al saltar desde una página diferente, es posible que deba habilitar la opción «Método alternativo de desplazamiento para anclar» en Divi> Opciones de tema> Navegación> Configuración general.

Aquí hay 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, ¡aprenda más, obtenga Divi, vote por mí!, Etc.) a las que desee saltar desde diferentes páginas de su sitio.

Utilice la navegación Divi Dot

Técnicamente, estos son enlaces de anclaje incorporados. No necesitará agregar sus propios identificadores de sección CSS. La función de navegación de puntos crea automáticamente enlaces de anclaje fuera de sus secciones. Para activar la navegación de puntos para su página, simplemente configure la opción de navegación de puntos en «ON» en la Configuración de la página Divi en la parte superior derecha de la pantalla cuando edite su página. Una vez que active Dot Navigation, Divi agrega automáticamente un menú transparente al lado de su página. Cada punto se desplaza a las secciones a lo largo de su página cuando se hace clic.

Agregar enlaces de anclaje a sus encabezados siempre es una buena idea. Es una excelente manera de indexar páginas más largas con mucho contenido, ya 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 utilizando Divi Builder, abra el módulo que contiene el texto del encabezado. Asegúrese de tener abierta la pestaña de texto. Busque la etiqueta de encabezado (h1, h2, h3, etc.) y luego ingrese una identificación dentro de los corchetes de la etiqueta de encabezado inicial. Aquí hay un ejemplo de un encabezado h3 con la identificación «diseño web»:

01<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 más o menos así:

www.yourdomain.com/page/#webdesign

Esto también será útil para páginas o publicaciones que no usan el generador de 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 localice el encabezado de su elección y agregue la identificación dentro de la etiqueta del encabezado como se muestra a continuación.

Terminando

Los enlaces de anclaje tienen algunos buenos usos prácticos, 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 función, por lo que, en algunos casos, los enlaces de anclaje pueden ser muy útiles. Pero en otros, solo significa que los usuarios van y vienen 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 enlaces de anclaje? Háganos saber sus experiencias en la sección de comentarios a continuación.

Pin It on Pinterest