Algunos de ustedes ciertamente ya saben cómo crear enlaces dentro de la misma página (que apuntan a un lugar específico en su página)... Pero cuando empezamos, no es obvio... Durante mi entrenamiento, veo a muchos estudiantes que todavía tienen un pequeño problema con esta práctica. Y para evitar siempre repetir las mismas cosas (lol), decidí explicarlo en este artículo, podría ayudar a otras personas que pasarían por aquí
- 1 – Pequeño recordatorio: ¿qué es un ancla?
- 2 - ¿Cómo crear un enlace simple: externo o interno?
- 3 – Cómo vincular a una sección en la misma página
- 4 - ¿Cómo puedo crear un enlace a una sección en otra página?
- 5 - Enlace del menú que apunta a una sección de una página específica
- 6 - Crear una tabla manual de contenidos
- 7 - Anclaje HTML, enlace en la misma página, vinculo ancla...
1 – Pequeño recordatorio: ¿qué es un ancla?
Anchoring o "Enlaceo "Escribir texto" es la palabra bajo la cual va el editor de un sitio Insertar el enlace. El enlace en cuestión es una dirección web, también llamada URL.
El enlace puede apuntar a:
- Una página interna de su sitio. Por ejemplo, para mi blog, esto podría ser un enlace a mi página de contacto:
<a href="https://astucesdivi.com/contact">Me contacter</a>En este ejemplo, "Contácteme" es el ancla de enlace a mi página de contacto.
- Una página fuera de su sitio. Por ejemplo, se conecta a un sitio externo cuyo tema está relacionado con el tema de su sitio web o con su perfil de Facebook (independientemente):
<a href="https://www.elegantthemes.com/">Découvrir Divi</a>En este ejemplo, Descubre Divi es el ancla de enlace a un sitio externo.
- Un lugar específico dentro de una página: hace un enlace a una sección o párrafo dentro de la misma página:
<a href="#identifiant-css">Voir le paragraphe 3</a>En este ejemplo, "Véase el párrafo 3" es el vinculo anclado a una sección específica de mi página.
Se puede ver que la dirección web a la que se refiere el anclaje no es una URL clásica, es un identificador: #identifier-css.
Y es precisamente este último punto que plantea algunas preocupaciones cuando comenzamos y que merece atención especial, por lo tanto el tema de este artículo.
2 - ¿Cómo crear un enlace simple: externo o interno?
Para grandes principiantes, veamos primero cómo crear un enlace simple (externo o interno) con Divi y WordPress...
Con el Divi Visual Builder
Divi permite colocar enlaces de varias maneras. La forma tradicional es destacar Enlace contenidos en su texto y haga clic en el icono del enlace para introducir la dirección web, externa o interna:
Divi también ofrece otra posibilidad de insertar un enlace: Enlace presente en la ficha Índice de cada módulo, línea o sección:
En este ejemplo, coloqué un enlace en el módulo Imagen Pero podría haberlo puesto en cualquier otro tipo de módulo Divi desde cada artículo en Divi tiene esta ficha Enlace.
A diferencia del primer ejemplo, no sólo el texto del anclaje es clicable sino todo el módulo.
Con WordPress Editor (Gutenberg)
Si deseas Insertar enlaces dentro de una página editada con WordPress (sin habilitar el Divi Builder), el procedimiento es idéntico:
La única diferencia es que con el editor Gutenberg, sólo puede insertar enlaces en un texto de anclaje (como la imagen animada arriba), en un bloque de imagen o en un bloque de botón. Los otros bloques de Gutenberg no ofrecen la posibilidad de insertar un enlace en todo el bloque. Por ejemplo, no puede insertar un enlace en un bloque de Tableau.
Recordatorio: "Link Target" es la forma en que tu enlace debe abrirse. Usted puede decidir abrirlo normalmente (en lugar de la página actual) o en una nueva pestaña del navegador. En HTML, da:
Este enlace se abrirá en lugar de la página actual:
<a href="https://astucesdivi.com/contact">Me contacter</a>Este enlace se abrirá en una nueva pestaña del navegador con el atributo target= »_blank » colocado en la etiqueta <a> :
<a href="https://astucesdivi.com/contact" target="_blank">Me contacter</a>3 – Cómo vincular a una sección en la misma página
Ahora veamos cómo crear un enlace que regrese, no a otra página del sitio o a un sitio externo, pero a una sección específica de su página.
Para esto, necesitará crear un CSS identificador, que se llama CSS ID.
Este identificador ( ID CSS) debe ser único en su página, sólo puede utilizarlo una vez, a diferencia de CSS Clases que se pueden reutilizar el infinito.
LCSS ID nos permite nombrar un elemento web y estilizarlo con CSS por ejemplo, pero en nuestro caso este ID se utilizará para crear un enlace interno dentro de la misma página.
Ya sea con Divi o Gutenberg, tiene todas las herramientas a su disposición para crear IDs CSS y utilizarlas para hacer enlaces en la misma página.
Enlaces internos en la misma página con Divi
Aquí hay un ejemplo de un enlace a hacer clic en la parte superior de la página que se refiere a una sección en la parte inferior de la página:
Después de hacer clic en el enlace, la página se desplaza a la sección deseada (scroll). Ahora veamos cómo hacer esto:
- Editar la configuración de la Sección destino (la sección a la que debe regresar el enlace interno).
- Nos vemos en la pestaña "Advanced" y utilizar el campo CSS ID para entrar en un término único (que usted inventa), por ejemplo: Más información. Tenga en cuenta que este ID de CSS no debe contener caracteres especiales, acentos, capitales o espacio (sólo pequeños y guiones).
- Luego vaya al elemento que debe albergar su enlace: puede ser un botón, una llamada a la acción o un texto del anclaje. Introduzca la URL del anclaje, por mi ejemplo, es #learn-more.
Aquí, el enlace que conduce a una sección específica de su página se crea y es funcional, es tan simple como eso!
Nota: CSS ID no contiene # – Enlace interno URL utiliza #
Enlaces internos en la misma página con Gutenberg
Con Gutenberg, es lo mismo. Simplemente coloque un CSS ID en un bloque y crear el enlace correspondiente:
- Seleccione el bloque de destino al que debe devolver el enlace
- En la barra lateral, vaya a la pestaña Avanzadas √≥ Anclaje HTML e introduzca una identificación de su elección. Por mi ejemplo, es mi ancla.
- En otro lugar de su página, puede crear un texto de anclaje (o utilizar un bloque de botones), destacando el elemento que se hará clic.
- Luego haga clic en el icono Enlace.
- Introduzca la dirección: por mi ejemplo, esto es #mi ancla.
Usted comprenderá, esta práctica es un gran clásico de HTML y por eso todas las herramientas de edición web permiten crear anclas de enlace internos de esta manera.
4 - ¿Cómo puedo crear un enlace a una sección en otra página?
Una pequeña precisión, sin embargo, si necesita hacer un enlace interno a una sección específica ubicada en otra página.
Por ejemplo, usted está en la página "Contacto" y desea vincular a una sección en la parte inferior de su página de inicio:
En este caso, tendrá que especificar dirección URL completa seguida por CSSID. Por ejemplo, use https://mydomain.com/#lear-more/ para #learn-more Sólo, de lo contrario tu enlace no funcionará.
5 - Enlace del menú que apunta a una sección de una página específica
Este es un uso bastante común de anclajes HTML internos: un artículo en el menú principal de su sitio apunta a una sección en una página específica.
Por ejemplo, usted considera innecesario crear una página de contacto porque una sección de su página de inicio podría simplemente contener su forma, pero todavía le gustaría indicar un enlace a este formulario en el menú principal.
El enfoque es entonces idéntico a las explicaciones anteriores:
- Coloque su formulario en la parte inferior de su página de inicio. Nos vemos en la pestaña Avances e ingrese un CSS ID. Por ejemplo: mi forma de contacto.
- Entonces ve a la pestaña Apariencia > Menú de su Palabra Interfaz de prensa y seleccione el campo "Enlaces personalizados".
- Introduzca la URL completa de la página donde se encuentra su formulario (en mi ejemplo, esta es la página principal) y agregue el CSSID al final de la URL sin olvidar el signo #. Ejemplo: https://mydomain.com/#my-contact-form/. Añadir este artículo al menú y guardar los cambios.
De esta manera, el formulario en la parte inferior de su página de inicio será accesible con sólo un clic en su menú principal y usted Guardar creando una nueva página.
6 - Crear una tabla manual de contenidos
Finalmente, otro uso común de anclajes HTML internos es crear una tabla de contenidos dentro de un artículo o página para que los usuarios puedan acceder a partes (secciones) de la publicación con mayor rapidez.
Entonces necesitará agregar un ID de CSS a cada una de sus secciones o elementos en su página. Por ejemplo, sección 1, sección-2, sección-3, etc.
A continuación, puede utilizar un módulo de texto para Divi o un bloque de lista numerada para Gutenberg y necesitará agregar sus enlaces manualmente a cada elemento en la lista. Por ejemplo: #section-4 para volver a la sección que utiliza CSSID Sección 4.
Si publicas un montón de contenido y necesitas un resumen sobre una base regular, te aconsejaría usar un tabla automática de contenidos que te ahorrará mucho tiempo. Si es casual, el método manual será suficiente y usted evitar usar un plugin adicional.
7 - Anclaje HTML, enlace en la misma página, vinculo ancla...
¡Es toda una jerga! Este artículo es un "retorno a lo básico", pero es muy importante conocerlos precisamente...
Porque hoy en día, Word Las herramientas de prensa requieren tan poco conocimiento que casi olvidaríamos que nos escriben código y si sabes algunos consejos de este tipo, entiendes mejor cómo Palabra Obras de prensa, Divi, Gutenberg o incluso otros constructores como Elementor y compañía.
Y si estabas mirando cómo hacer un enlace que apunta en una sección de su página¡Espero que encuentres tu felicidad aquí!
MERCI BEAUCOUP POUR VOS EXPLICATIONS CLAIRES SUR LES LIENS! j’ai passé un temps fou à communiquer avec divi pour en final « ça ne marche pas ». et là j’ai tout compris!
ça fait du bien de « comprendre »! hihihi
cordialement
Ivan
Super Ivan !
Encore un partage d’astuce qui me fait gagner telllllllement de temps. Merci Lycia !
Bonjour Lycia, j’ai suivi exactement le procédé en mettant « Inscris-toi » dans le CSS ID de la section vers laquelle je veux mener et j’ai mis « #inscris-toi » dans le URL du bouton source. Le champs en dessous, j’ai sélectionné « »Bouton lien cible » « Dans la même fenêtre ». Est-ce qu’il y a autre chose à vérifier? Merci
Salut Vicky, si ça ne marche pas, il vaut mieux vérifier si tout a été écris de la bonne manière.
Bonjour, on dirait que avec les mise à jour, l’ancre interne ne marche plus, quelqu’un a eu le meme problème ?
Non, tu peux avoir un plugin qui fout le bordel ?
Bonjour,
merci pour ces explications, cependant, après avoir tout suivi à la lettre, vérifié l’orthographe, rien n’y fait, les liens me ramènent tout en haut de la page concerné et de tiennent pas compte des sections ancrées. J’ai le soucis sur toutes mes pages.
Je précise que j’ai également activé l’option « Méthode alternative de défilement par ancrage » dans les paramètres de DIVI.
Avez-vous une idée du problème svp ?
D’avance merci pour votre aide,
Marie
Salut Marie, tu as dû intervertir le # ?
Bonjour. tuto très clair sur les ancres dans Divi. Tout fonctionne chez moi.
J’ai un question concernant le défilement jsuqu’à une ancre : actuellement et par défaut, lorsque je clique sur un lien, il y a un scroll automatique dans ma page jusqu’à la cible. Je souhaiterai tester un passage « direct » lorsque je clique sur un lien vers ma cible (sans scroll) .Est-ce possible d’avoir cette option, ou de régler le type de scroll (vitesse de défilement ou animation type accélération/décélération). J’espère avoir été claire 😉
Salut Julien, je ne pense pas que tu puisses agir sur le scroll
Merci pour ta réponse. J’ai une autre question : sur la version mobile de mon site les ancres ne semblent pas fonctionner : les liens de mon menu ne réagissent pas, ni les boutons .Alors qu’en version PC, mes ancres dans la même page fonctionnent parfaitement. Ai-je oublié quelque chose en faisant ma version mobile?
Oh ça c’est bizarre ! Il y a souvent une mise en cache sur mobile, si tu as modifié récemment ça pourrait venir de là
Bonjour,
Lorsqu’on fait un lien dans une même page, l’affichage dans le navigateur ne se positionne pas exactement au niveau de la cible mais il y a toujours un décalage d’1 cm par exemple avec l’élément précédent. C’est le même comportement quand on clique dans l’ascenseur à droite de l’écran sous le curseur: il y a toujours un résiduel de la page précédente qui s’affiche. J’ai des sections dimensionnées à 100vh et qui s’enchainent dans la page et souhaiterais afficher la section entière uniquement bien calé dans l’écran.
Savez-vous résoudre ce point?
merci
Olivier
Salut Olivier, regarde le point numéro 2 du chapitre 3 de cet article et dis nous si ça règle le problème : https://astucesdivi.com/options-divi-navigation/
Bonsoir Lycia,
Malheureusement je n’ai que l’option « désactivé le niveau supérieur du menu déroulant » dans navigation/paramètres généraux.
Avec quelle version as-tu fait les copies d’écrans?
Est-ce que l’explication que je donne est suffisamment claire pour comprendre ma problématique? Car j’aimerais bien savoir si c’est solutionnable ou si c’est natif dans les navigateurs et il y aurait rien à faire…
Merci pour ton premier message en tout cas.
Olivier
Bonjour Lycia,
Il me semble que j’avais déjà répondu à ta proposition. Mais je ne vois pas la réponse. Je la refais donc.
Ma version de divi est probablement plus récente que celle de la copie d’écran que tu montres dans ce point 2. Je n’ai pas l’option « Méthode alternative de défilement » dans l’onglet Divi/option thème/navigation/paramètre généraux. Toutefois je ne pense pas que ça résoudrait ce point. Mais ce point est peut être normal finalement. L’écran d’accueil « Bienvenue sur Astuces Divi » a le même comportement: le passage à la page suivante comme décrit dans mon message précédent laisse une petite bande noir du bas de l’image d’arrière plan en haut de ce 2ieme écran.
J’ai remarqué que certains sites laissaient un espace blanc assez large entre les écrans. Les transitions ont peut-être cette vertu. elles ont peut-être été créées pour ça.
J’espère que mon explication est claire.
Merci en tout cas et votre site est interessant.
Olivier
Olivier, tu as raison, cette option n’est plus disponible. Mais en vrai, tu ne devrais pas en avoir besoin, moi je n’ai jamais ce souci on dirait. Sinon, c’est surement solutionnable, il faudrait trouver un snippet de code, que je n’ai pas dans mon chapeau pour l’instant.
Salut Olivier. Je ne suis pas sûre de tout comprendre. Si tu vas sur un de mes articles et que tu cliques sur un titre de la table des matières, tu verras que ce titre est bien visible (non coupé) dans la fenêtre du navigateur. Mais pour la page d’accueil d’Astuces Divi, je ne comprends pas car je n’ai pas de méthode de défilement par scroll, du moins je crois 😉
Alors je ne sais pas, il faudrait trouver un petit bout de script certainement pour corriger ce problème… Mais je suis une bille en JS.
bonjour,
j’ai voulu faire une ancre dans le module onglets (1 onglet par ancre, mais ça ne marche pas. Une idée ?
Merci,
Mapi
Je ne sais pas si cela peut marcher avec le module Onglet. Il faut vérifier si tu n’as pas utilisé plusieurs fois la même ancre car cela ne peut pas fonctionner au sein de la même page.
Merci pour l’astuce !
Super !
Bonjour,
J’ai créé un menu avec un onglet du menu qui mène vers une page et qui comporte des sous-menu avec des ancres pour aller dans des sections différentes de cette même page.
Quand je suis sur la page d’accueil (ou sur une autre page), et que je clique sur un sous-menu de cet onglet, les ancres fonctionnent et je suis bien redirigé vers la section de cette page.
Par contre, une fois que je suis sur la page en question, si je clique sur les sous-menu, cela l’affiche bien dans la barre d’adresse, mais ça n’y va pas…
Une idée de quel pourrait être le problème ?
Merci.
Il faut mettre comme lien l’URL entière où se trouve l’ancre suivie de l’ancre (avec le hashtag), si tu mets uniquement le # comme lien dans ton élément de menu, cela ne fonctionne que sur la page en question. J’espère être assez claire.
Bonjour ! Je ne sais pas si je suis au bon endroit mais…
J’ai deux bouton en header qui redirigent vers des ancres sur la même page. Cela fonctionne très bien sur PC.
Les blocs avec les ancres sont clonés pour une version mobile de la page.
En version mobile, les boutons (ancres) ne fonctionnent pas. Comme si ni le bloc normal PC, ni le bloc mobile ne sont pris en compte.
J’espère être clair.
Une idée, merci.
Hello ! Je pense que c’est normal, les ID doivent être uniques dans une même page. Du coup si tu dupliques tes boutons, ils ne le sont plus, car même si on ne les voit pas, ils existent dans le code. Il faudrait que tu ne dupliques pas et utilises le même bouton sur ordinateur comme sur mobile.
Bonjour Lycia, merci. J’y avais pensé mais il semble que cela ne marche pas non plus. En te lisant je me dis que peut-être on peut dupliquer mobile, le bouton et le bloc et leur donner un ID différent que celui de la version PC. Je vais regarder avec mon technicien à son retour de vacances. Bel été.
Oui il faut un ID différent
Bonjour Lycia,
Je débute dans la création d’un site avec Divi et je dois dire que ton site m’est d’une aide précieuse (intégration d’une police personnalisée, dividers… beaucoup de réponses à des questions restées sans réponse avec d’autres sites).
J’avais essayé de laisser un commentaire la semaine dernière mais il n’a pas été publié alors je tente une nouvelle fois.
En effet, j’ai le même souci que Nicolas quelques commentaires au-dessus (en avril 2022).
C’est à dire que j’ai créé un menu avec un onglet du menu qui mène vers une page et qui comporte des sous-menu avec des ancres pour aller dans des sections différentes de cette même page.
Problème:
* Quand je suis sur la page d’accueil (ou sur une autre page), et que je clique sur un sous-menu de cet onglet, les ancres fonctionnent et je suis bien redirigé vers la section de cette page (avec un léger temps de décallage un poil génant puisque je suis d’abord ramenée en haut de page, puis ça scrolle jusqu’à la section concernée);
* Par contre, une fois que je suis sur la page en question, si je clique sur les sous-menu, cela l’affiche bien dans la barre d’adresse, mais ça n’y va pas…
Je précise que j’ai bien rentré le lien URL entier de la page où se trouve l’ancre, suivie de # »nom de l’ancre » (un truc comme https://tribu-consulting.net/notre-histoire/#biographies/.
Aurais-tu une idée pour régler ce problème?
Merci!
Ah oui, il faut mettre l’URL entière, sinon ça ne marche pas… Du coup tu as trouvé une solution ?
Non, ça ne fonctionne toujours pas et pourtant l’URL est bien entière…
Bonjour Lycia,
Le problème est réglé, ouf! En fait, il s’avère que ça venait tout bêtement du dernier slash après mon nom d’ID CSS. Dans un autre tuto il ne le mettait pas donc j’ai testé, et sans ce slash superflu tout fonctionne bien. Merci encore.
Merci beaucoup pour toutes ces explications. C’est très clair et très simple d’utilisation. Merci d’avoir pris le temps pour cela !
Merci Bruno
Bonjour Lycia ,
tout d’abord un grand merci pour le travail que tu mets à notre disposition ! je suis épatée et reconnaissante de ouf pour la qualité de ce que tu délivres ici.
D’habitude je trouve toutes les réponses ici mais j’ai un problème pour lequel je n’ai rien trouvé (ici ou ailleurs) .
J’ai installé des boutons avec des ancres sur mes pages. (il renvoient à un formulaire en bas de page).
Cela fonctionne très bien sur desktop mais en version mobile il y a 2 couacs.
(1)Dès l’ouverture de la page le défilement se fait AUTOMATIQUEMENT et se (2) BLOQUE sur la section de destination de l’ancre. Impossible de remonter….
( j’ai mis l’adresse de mon site dans le formulaire de commentaires ) . J’ai du merder quelque part …. Aurais tu une piste ?
Un grand merci par avance
Tu m’inspires Lycia ! 🙂
En t’écrivant j’ai eu un flash et j’ai compris le point 1 (défilement automatique) que j’ai corrigé (j’avais utilisé « diapo » et mis le lien de l’ancre …. donc voila oups … je l’ai juste retiré) . Par contre mon problème de blocage au niveau de l’ancre avec impossibilité de remonter, persiste sur la page mobile….
Bon ben je suis désolée de t’avoir dérangée, j’ai paniqué. J’ai fini par trouver une solution. Merci de m’avoir lu.
belle journée et encore merci pour tout ce que tu partages.
ps : je cherche un free lance pour mon seo qui pourrait jeter un oeil sur mon site et régler tous les trucs qui coincent niveau technique . Je ne sais pas si tu proposes ce genre de prestations mais si cela t’intéresse n’hésite pas à me contacter.
Belle journée
Myriam
Bonjour Lycia,
Merci beaucoup pour cet article !
Je me permets de revenir sur le problème de Nicolas du 13 avril 2023 car j’ai le même.
J’ai bien vérifié mes liens dans les éléments de menu (URL complet + #ancre).
Pourtant, si je suis déjà sur la page en question, le lien du menu sensé me renvoyer plus bas sur cette page ne le fait pas… Mais l’URL s’affiche bien dans la barre de recherche.
Avez-vous une solution pour ce problème ?
Merci !
Merci pour cette astuce !
Quentin, il faut que tu vérifies que ton ancre n’est utilisée qu’une seule fois dans ta page, sinon, ça annule son fonctionnement