homefinance blog
Los enlaces de anclaje pueden mejorar la navegación y ayudarlo a organizar su contenido, especialmente en un sitio web en forma de larga data. Una de las otras ventajas principales de usar enlaces de anclaje, aparte de la navegación, es que son maravillosas para SEO. Aunque 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 fui a cazar 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 la división y el deseo de aprender.
¡Vamos! Descubrirás cómo:
Desplácese y abra un interruptor con un enlace de anclaje en Div
Crear un menú de navegación de una sola página
Salta a una sección de página en otra página
Usar Dot Div
Agregue enlaces de anclaje a sus títulos.
5 cosas interesantes que puede hacer en Divi con enlaces de anclaje suscribirse a nuestro canal de YouTube y abrir un interruptor con un enlace de anclaje en Div
Los swinges son uno de esos elementos que pueden mejorar la experiencia del usuario. Dime perezoso (usaría la palabra efectiva), pero cuanto más fácil sea obtener mi información, mejor. Soy un gran fanático de cambiar por ciertos tipos de contenido.
Uno de los mejores usos que he visto para cambiar es para páginas con preguntas frecuentes. Funcionan excelente para revelar una pequeña información en la que el usuario quiere centrarse. Esto solo tomará un minuto y algunas líneas de JavaScript para completarse. También puede usar una variante de este método para abrir pestañas o acordeones y, aunque esto puede parecer difícil, no es demasiado complejo. Primero, cree una nueva página e implemente el Visual Builder. Luego seleccione la opción “Elija un aspecto prefabricado”. En la ventana emergente de la biblioteca, encontrará la página de la página preguntas de contabilidad frecuentes que escriben “Preguntas frecuentes” en la barra de búsqueda. Luego haga clic en la apariencia y la vista previa que aparece, haga clic en el botón Este aspecto para implementarlo en su página está listo para agregar la funcionalidad del enlace de anclaje. Para este ejemplo, usaré el botón en la sección del encabezado superior como un enlace de anclaje, de modo que al hacer clic, la página se ejecute a una conmutación específica que se abrirá simultáneamente. Para hacer esto, primero abra la configuración del botón y agregue la siguiente URL para el botón: URL del botón: # Toggle3 Le di este enlace de anclaje “Toggle3” para recordar que quiero vincular al tercer cambio en la página. Este nombre de ID se correlacionará con la ID de conmutación de CSS que agregaremos más tarde para que el botón sepa qué conmutación ejecutar.
Luego agregue una clase CSS única al módulo de botón: Clase CSS: Open-Toggle y luego guarde su configuración. Este nombre de clase le ayuda a recordarle el interruptor que abre la acción al hacer clic en el botón. Usaremos esta clase en JQEURY personalizado para obtener la funcionalidad deseada en una foto. Luego desplácese la página hacia abajo a la fila que contiene las dos columnas de los módulos de conmutación que se utilizan para preguntas frecuentes. Abra la configuración del tercer módulo de conmutación en la primera columna. Este es el módulo que queremos desplazarlo y abrirlo al hacer clic en el botón (o en el enlace de anclaje). En la pestaña Avance, agregue el siguiente ID CSS: ID CSS: Commission3 Es importante correlacionar exactamente con URL del botón utilizado anteriormente . El único diferente aquí es que tienes que dejar a un lado “#”.
El último paso implica agregar un código personalizado al cuerpo de nuestra página. Para hacer esto, navegue por las opciones del tema de la división y abra la pestaña de integración, luego pegue lo siguiente en la sección del cuerpo, como se muestra en GIF a continuación. JQuery (function ($) {
// Abrir alternar en el botón Haga clic
$ (‘a.open-toogle’). on (‘hacer clic’, función (evento) {
$ (‘#toggle3.et_pb_togle_2 .et_pb_togle_title’). Click ();
});
});
Recuerde envolver el código en la etiqueta de script apropiada.
Ahora puede probar su página para ver si funciona.
Para entender poco sobre lo que hace este código. Miremos más de cerca. Aquí está el fragmento nuevamente: jQuery (function ($) {
// Abrir alternar en el botón Haga clic
$ (‘a.open-toogle’). on (‘hacer clic’, función (evento) {
$ (‘#toggle3.et_pb_togle_2 .et_pb_togle_title’). Click ();
});
});
En el código, el selector “a.ose-toggle” se refiere al botón con nuestra clase personalizada. El selector “# toggle3.et_pb_togle_2 .et_pb_togle_title” se refiere al título del conmutador con la ID “Toggle” y la clase “ET_PB_TOGLE_2”. La clase “ET_PB_TOGLE_2” es en realidad la clase asociada con el tercer conmutador. Esto se debe al hecho de que DIV ofrece el primer interruptor “ET-PB_TOGLE_0”, el segundo conmutador “ET-PB_TOGLE_1” y así sucesivamente. Simplemente contó desde 0 comenzando con el primer conmutador en la página y puede ir más allá . O siempre puede inspeccionar el código HTML para encontrar la clase de esta manera. Es importante saber esto para poder actualizar su código en consecuencia. Por ejemplo, si quería que mi botón abriera el segundo conmutador en la página, reemplazaría “# toggle3.et_pb_togle_2 .et_pb_togle_itle” con “# toggle3.et_pb_togle_1 .et_pb_togle_title”. Este fragmento de código es una variante del siguiente concepto. Traté de mantenerlo lo más simple posible.
Esta técnica interesante funcionaría para pestañas y acordeones. El truco es identificar las clases CSS adecuadas para el elemento o la pestaña de acordeón para que pueda usarlo en el código. Crear un menú de navegación de una sola página
Este tipo de diseño de menú es popular para los sitios de una sola página. Puede ser útil crear conexiones en el menú para moverse de una sección a otra. Esto es especialmente útil si crea una sola página o página de destino. Puede consultar la documentación sobre cómo crear un sitio web en una página con DIV para obtener más información sobre este proceso. Una presentación rápida sobre cómo hacerlo. Esto funcionará para cualquier aspecto prefabricado, pero para este ejemplo, usaré la apariencia de la página de inicio web de Freelancer. Cree una nueva página, implemente el Visual Builder, seleccione “Elija el aspecto prefabricado”, luego implemente la apariencia del Freelancer Start en su página.
Ahora necesita agregar códigos CSS a cada sección que desea atar (o ejecutar). Encuentre 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
Luego encuentre la sección “Trabajo presentado” y le dé a la sección respectiva un ID CSS de la siguiente manera: ID CSS: Trabajo
Y agregue el siguiente CSS de identificación y a la sección “Acerca de nosotros”: ID CSS: Aproximadamente
Con estas tres secciones configuradas correctamente con sus ID de CSS únicos, podemos conocer la creación de nuestros enlaces de anclaje de menú. Desde el tablero, navegue por los menús de apariencia y cree un nuevo menú principal. Luego cree tres enlaces personalizados con la siguiente URL y texto de conexión: Enlace personalizado 1 URL: #Servicii Enlace de texto: Servicios de conexión personalizados 2 URL: #Work Text of Lie: Work Link personalizado 3 URL: #Text Link: Acerca de: Acerca de
Recuerde seleccionar la ubicación de visualización en el menú principal. Luego guarde el menú. Ahora, cuando visita su página, puede probarla. Puede notar que hay un desfile suave. Esto se debe al hecho de que el tema se divide automáticamente como un desfile suave: esta característica se ha agregado en la versión Divic 2.4. Para obtener más inspiración en la construcción de los sitios web de una página asesina, consulte estas publicaciones:
Cómo construir una barra lateral fija receptiva con enlaces de anclaje
Cómo crear secciones de pantalla completas con lazos superior e inferior con div Div
Cómo crear enlaces activos al desplazarse por una página Div
Salta a una sección de página en otra página
Podemos usar el ejemplo anterior para demostrar esto. Debido a que hemos agregado un ID CSS a tres secciones en la página (Servicios, Servicio, Acerca de), no solo puede acceder a esa sección utilizando nuestros enlaces de anclaje de menú, sino que podemos acceder a esas secciones desde una página completamente diferente. Todo lo que tiene que hacer es usar la URL del enlace de anclaje cuando creó un enlace en otra página. Si desea poner un enlace a la sección de servicio con la ID de “Servicios”, se vería así, www.yourdomain.com/page/#services. Aquí hay un ejemplo de la forma en que la página se cargará y se desplazará en la sección “Mis servicios” cuando se conecta con la sección respectiva desde otra página.
Esto funciona excelente para muchas llamadas de acción diferentes (es decir, descubrir más, obtener divino, votar!, Etc.) a lo que es posible que desee mudarse de diferentes páginas de su sitio. Técnicamente, estos se construyen en bonos de anclaje.No tendrá que agregar sus propios códigos de sección CSS.La función de navegación de puntos crea automáticamente enlaces de anclaje en sus secciones para activar la navegación de puntos para su página, simplemente establezca la opción de navegación de puntos en “activar” en los conjuntos de espigas en la parte superior derecha de la pantalla al editar la página.Después de activar la navegación por puntos, agrega automáticamente un menú transparente en el lado de la página.Cada punto se ejecuta en secciones de toda la página al hacer clic.
Para obtener más información, hay una excelente publicación sobre cómo agregar etiquetas a la navegación de puntos. Agregar enlaces de anclaje a sus títulos Agregar enlaces de anclaje a los 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 por cada título en la misma página o crear enlaces a estos títulos desde otras páginas en su sitio web. También ayuda a los motores de búsqueda a acceder con los rastreadores de su sitio para agregar un ID CSS a sus encabezados usando Divi Builder, abra el módulo que contiene el texto del encabezado. Asegúrese de tener una pestaña de texto abierto. Encuentre la etiqueta del encabezado (H1, H2, H3, etc.) y luego ingrese una ID entre la etiqueta del encabezado para principiantes. Aquí hay un ejemplo del título H3 con el “Design web” ID:
Diseño del sitio web
Ahora puedo conectarme a este encabezado desde cualquier lugar, siempre que utilice la URL correcta del ancla Enlace. Lo cual para este ejemplo debería verse así: www.yourdomain.com/page/#webdesign, esto será útil para páginas o publicaciones que no usan el generador de la Divica. Para agregar enlaces de anclaje a sus títulos para estas páginas o publicaciones, abra la pestaña de texto del editor de texto de WordPress. Simplemente ubique el encabezado a su elección y agregue la ID a la etiqueta del encabezado, como se muestra a continuación.
