El uso de enlaces Anchor en Divi (o cualquier sitio web) puede 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 que no sean de navegación es el hecho de que son increíbles para el SEO. Si bien el concepto de usar enlaces ancla 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 ancla. Para estos ejemplos, todo lo que necesitas es Divi y ganas de aprender.
¡Vamos!
Aprenderás a:
- Desplácese y abra una palanca con un enlace de anclaje en Divi
- Crear un menú de navegación de una página
- Saltar a una sección de página desde otra página
- Utilice la navegación Divi Dot
- Agregue enlaces de anclaje a sus encabezados
5 cosas geniales que puedes hacer en Divi con enlaces ancla
Suscríbete a nuestro canal de Youtube
Desplácese y abra una palanca con un enlace de anclaje en Divi
Los conmutadores son uno de esos elementos que pueden mejorar la experiencia del usuario. Llámame perezoso (yo usaría la palabra eficiente), pero cuanto más fácil sea para mí obtener mi información, mejor. Soy un gran admirador de los conmutadores para ciertos tipos de contenido.
Uno de los mejores usos que he visto para 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 quiere concentrarse. Esto solo tomará un minuto y unas pocas líneas de JavaScript para completarse. También puede usar 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. Un método simple puede ser usar un complemento de preguntas frecuentes , pero de cualquier manera, considere este uso de enlaces de salto para una mejor experiencia de usuario del sitio.
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 «preguntas frecuentes» 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, usaré el botón en la sección del encabezado superior como enlace ancla para que, cuando se haga clic en él, la página se desplace a un conmutador 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 del enlace para su botón:
URL del enlace del botón: #toggle3
Le di a este enlace ancla el id «toggle3» para ayudar a recordar que quiero vincular al tercer interruptor de 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 del botón:
Clase CSS: palanca abierta
Luego guarde su configuración.
Este nombre de clase le ayuda a recordar la acción de abrir la palanca 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 utilizan para las preguntas frecuentes. Abra la configuración del tercer módulo de alternar 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: alternar3
Es importante que esto se correlacione 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 implica agregar un código personalizado al cuerpo de nuestra página. Para hacer eso, navegue a las Opciones del tema Divi y abra la pestaña Integración, luego pegue lo siguiente en la sección del cuerpo como se muestra en el GIF a continuación.
|
01
02
03
04
05
06
|
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 puede probar su página para ver si funciona.
Para entender un poco acerca de lo que está haciendo este código. Miremos más de cerca. Aquí está el fragmento de nuevo:
|
01
02
03
04
05
06
|
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” hace referencia al título del conmutador 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», al segundo conmutador «et-pb_toggle_1», y así sucesivamente.
Entonces, si desea saber cuál es la clase para un cambio en particular en su página, simplemente puede contar desde 0 comenzando con el primer cambio en la página y avanzar 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 el segundo interruptor de 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 genial técnica también funcionaría para tabs y acordeones. El truco consiste en identificar las clases de CSS correctas para el elemento o pestaña de acordeón para que pueda usarlo en el código.
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 general rápida de 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 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 asigne a esa sección una 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: acerca de
Con estas tres secciones configuradas correctamente con sus ID de CSS únicos, ahora podemos crear nuestros enlaces de anclaje de menú.
Desde el Tablero, navegue hasta 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 guarde su menú.
Ahora cuando visites tu página puedes probarlo. 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 sola página, 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 Scroll para sitios web Divi de una página
Saltar a una sección de página desde otra página
Podemos usar el ejemplo de arriba para demostrar esto. Dado que agregamos una 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 ancla al crear 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.sudominio.com/pagina/#servicios .
Este es 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 muchos llamados a la acción diferentes (es decir, obtener más información, obtener Divi, ¡votar por mí!, etc.) a los que puede acceder desde diferentes páginas de su sitio.
Técnicamente, estos son enlaces ancla integrados. No necesitará agregar sus propios identificadores de sección de CSS. La función de navegación de puntos crea automáticamente enlaces de anclaje a partir 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 activas Dot Navigation, Divi agrega automáticamente un menú transparente al costado de tu página. Cada punto se desplaza a las secciones a lo largo de su página cuando se hace clic.
Para obtener más información, hay una excelente publicación sobre cómo agregar etiquetas a su navegación de puntos .
Agregue enlaces de anclaje a sus encabezados
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, 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 de su encabezado. Asegúrate de tener la pestaña de texto abierta. Busque la etiqueta del encabezado (h1, h2, h3, etc…) y luego ingrese una identificación entre corchetes de la etiqueta del encabezado inicial. Aquí hay un ejemplo de un encabezado h3 con el id «diseño web»:
|
01
|
<h3 id="webdesign">Website Design</h3> |
Ahora puedo vincular a este encabezado desde cualquier lugar, siempre y cuando use la URL de enlace de anclaje correcta. Que para este ejemplo debería ser algo como esto:
www.tudominio.com/pagina/#diseñoweb
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 del 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 encabezados de la publicación. Lea más sobre cómo usar el método para crear secciones de tabla de contenido para sus páginas y publicaciones en WordPress.
Cosas bastante geniales.
Si quisiera, también podría usar un complemento de tabla de contenido para ayudarlo a agregar uno a su contenido.
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 tiene que ver con la usabilidad y la función, por lo que, en algunos casos, los enlaces ancla 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.
¿Tienes algún consejo o pregunta sobre los enlaces ancla? Háganos saber acerca de sus experiencias en la sección de comentarios a continuación.