Es muy fácil crear enlaces de anclaje en Divi. El enlace de anclaje permite a sus visitantes saltar a diferentes secciones en la misma página sin salir de ella. Es muy útil en páginas y publicaciones largas de Divi.
HTML.COM define los enlaces de anclaje de una manera integral:
El elemento anchor se utiliza para crear hipervínculos entre un anclaje de origen y un anclaje de destino. El origen es el texto, la imagen o el botón que enlaza con otro recurso y el destino es el recurso al que se vincula el anclaje de origen.
Join 1740+ subscribers!
Dos ejemplos de enlaces de anclaje en Divi
Como puede ver en el video anterior, los enlaces de anclaje se pueden usar tanto en los menús de navegación como en los botones de una página o en una publicación.
También puede usar el módulo Divi Text o los editores predeterminados de WordPress (Gutenberg Block Builder y Classic Editor) para agregar enlaces de anclaje en texto plano.
¿Cuándo es apropiado usar enlaces de anclaje?
Los enlaces de anclaje se utilizan mejor en páginas y publicaciones largas y densas . También son una buena opción para sitios web de una página. Una buena sección de tabla de contenido a menudo se basa en enlaces de anclaje, así como en ingeniosos botones de volver al principio.
Tabla de contenidos
Los enlaces a continuación son en realidad enlaces de anclaje que lo llevarán directamente a los diferentes capítulos de esta publicación.
- Crea tu destino ancla en Divi
- Agregar un enlace de anclaje en un menú Divi
- Agregar un enlace de anclaje en un botón Divi
- Agregar un enlace de anclaje en cualquier elemento de texto
- Agregar un enlace de anclaje de volver al principio en Divi
- Solución de problemas: errores comunes de enlace de anclaje
¡Vamos!
Paso 1: Crea tu destino de anclaje en Divi
El primer paso es «soltar su ancla» en el lugar donde desea que lleguen sus visitantes. Para hacer esto, debe agregar un ID único (identificador) a una sección, fila o módulo. En el siguiente paso, crearemos enlaces dirigidos a este ID.
- Habilite Divi Visual Builder en la página donde desea agregar el anclaje.
- Haga clic en la rueda dentada para editar el elemento (una sección, fila o módulo) donde desea agregar el anclaje.
- Vaya a Advanced tab y abra la pestaña CSS ID & Classes.
- Agregue un nombre claro para su ancla (por ejemplo, blog o contáctenos) en el campo ID de CSS.
⚠️ No uses espacios o caracteres especiales como # en tu ID CSS. - Haga clic en el botón verde para guardar la configuración y, a continuación, guarde la página.
Paso 2: Crea tus enlaces de anclaje en Divi
Ahora es el momento de agregar los enlaces que enviarán a sus visitantes a su nuevo destino de anclaje. El principio es simple: simplemente agregue un enlace a su ID CSS con un hash (#) delante de él, por ejemplo, #blog o #contact-us. Por supuesto, puede vincular a un ancla en una página específica en su sitio web Divi agregando primero la, por ejemplo, / about-us/#contact-us. Incluso puede vincular profundamente a un ancla en su sitio web desde una fuente externa como un correo electrónico o redes sociales agregando su URL completa seguida de la identificación #css, por ejemplo, https://mysite.com/about-us/#contact-us.
Estos son los casos de uso más comunes.
Agregar un enlace de anclaje en un menú divi
Agregar enlaces de anclaje a su menú Divi es una excelente manera de referir a los visitantes a un área específica de su página web.
- Vaya a su panel de WordPress y diríjase a Apariencia » Menús
- Seleccione el menú que desea editar
- Vaya a Agregar elementos de menú y expanda Vínculos personalizados
- Agregue el ID CSS (desde el paso 1) al campo URL e inserte un hash delante de él, por ejemplo, #blog o #contact-us
- Haga clic en el botón azul Guardar menú .
Ahora puede obtener una vista previa del enlace de anclaje de su menú en la interfaz. Es posible que primero deba borrar la memoria caché del navegador y la caché del sitio web.
Agregar un enlace de anclaje en un botón Divi
Un botón de llamada a la acción en el área de héroe puede usar un enlace de anclaje para enviar al visitante a una sección específica de su página web.
- Habilite el Divi Visual Builder.
- Inserte un módulo de botón.
- Agregue el texto del botón y expanda la pestaña Enlace.
- Añade el ID CSS para tu elemento de anclaje en el campo URL de enlace de botón . Asegúrese de agregar un hash (#) delante del ID, por ejemplo, #blog o #contact-us.
- Haga clic en el botón verde para guardar la configuración y guardar la página.
Ahora puede obtener una vista previa del enlace de anclaje de su botón en la interfaz. Es posible que primero deba borrar la memoria caché del navegador y la caché del sitio web.
Agregar un enlace de anclaje en cualquier elemento de texto
Puede agregar enlaces de anclaje como enlaces de texto sin formato en módulos de texto o en publicaciones utilizando el Editor clásico o el Editor de bloques de Gutenberg. Simplemente enlace al ID CSS con un hash (#) delante. He usado un módulo de texto divi para crear los enlaces de anclaje en la sección Tabla de contenido de esta publicación.
- Habilite el Divi Visual Builder.
- Inserte un módulo de texto.
- Agregue su texto y resalte el texto donde desea agregar el enlace de anclaje.
- Añade el ID CSS para tu elemento de anclaje en el campo URL . Asegúrese de agregar un hash (#) delante del ID, por ejemplo, #blog o #contact-us.
- Haga clic en Aceptar y, a continuación, pulse el botón verde para guardar la configuración y guardar la página.
Ahora puede obtener una vista previa de su enlace de anclaje de texto en frontend. Es posible que primero deba borrar la memoria caché del navegador y la caché del sitio web.
Agregar un enlace de anclaje de volver al principio en Divi
Agregar un enlace de volver al principio en Divi es una buena manera de mejorar la experiencia del usuario en páginas largas y publicaciones. Aquí hay una forma práctica de hacerlo sin agregar un ID CSS personalizado a su encabezado. Esto funciona bien tanto con el antiguo encabezado Divi predeterminado como con el encabezado Theme Builder.
- Cree un enlace usando un botón, texto, menú de pie de página, publicidad o cualquier otra forma que desee.
- Agregar la URL #et-boc
- Guarde su configuración y salga.
Ahora puede obtener una vista previa de su enlace de anclaje de vuelta a la parte superior en la interfaz. Es posible que primero deba borrar la memoria caché del navegador y la caché del sitio web.
Solución de problemas: 3 errores comunes de enlace de anclaje
¿Su enlace de anclaje conduce a un callejón sin salida? Aquí hay algunos errores que debe evitar.
Error 1: Usar la clase CSS en lugar del ID CSS
Es fácil mezclar los campos CSS Class y CSS ID. Utilice siempre el campo ID de CSS cuando cree vínculos de anclaje, no el campo Clase CSS (que se utiliza para aplicar estilos). De hecho, cometí este error dos veces al crear esta publicación, ¡en un tutorial sobre cómo crear enlaces de anclaje!
Error 2: Agregar el hash (#) en el campo ID CSS
Divi agregará automáticamente el # inicial cuando agregue un ID CSS a una sección, fila o módulo. Nunca debe agregar su propio # cuando agrega un ID CSS (paso 1). Pero asegúrese de agregar el # inicial cuando cree sus enlaces de anclaje (paso 2).
Error 3: Agregar ID CSS idénticos en la misma página
Un ID de CSS debe ser único en una página o publicación específica. Si agrega el mismo ID CSS, por ejemplo, blog, en dos secciones diferentes en la misma página, el ancla no puede referir al visitante a dos ubicaciones diferentes al mismo tiempo. Utilice siempre identificadores CSS únicos.
¡Eso es todo por hoy!
Espero que hayas disfrutado de este post. Suscríbete a DiviMundo en YouTube y únete a nuestro grupo de Facebook para obtener contenido más nítido sobre WordPress y diseño web.
👉 Post relacionado: Cómo crear diseños adhesivos personalizados de volver al principio con Divi (de Elegant Themes)
👉 Curso gratuito: Crear un sitio web desde cero con Divi
