Comment ajouter un lien sur un conteneur Elementor

Il est fréquent de vouloir ajouter des liens sur du texte et sur des images. Afin d’améliorer le maillage interne de son site internet WordPress mais aussi pour offrir l’occasion à ses visiteurs de pouvoir se rendre facilement d’une page à une autre. Aussi, si des pages sont construites avec Elementor, il est assez normal de s’attendre à pouvoir facilement ajouter un lien sur un conteneur. Mais vous l’aurez peut-être remarqué. Les conteneurs ne proposent pas de champ par défaut pour mettre un lien hypertexte. 

Alors est-il impossible d’ajouter un lien sur un conteneur Elementor ? Alors que ce constructeur de page (page builder) est si populaire ? Et si c’est possible, comment faire pour ajouter un lien hypertexte sur un conteneur Elementor ?

Le conteneur sur Elementor

Le conteneur sur Elementor, c’est un widget qu’on ajoute pour créer des zones sur une page WordPress en construction. On peut ajouter un seul conteneur puis le remplir de widgets secondaires comme un widget Titre et un widget éditeur de texte. Ou ajouter un conteneur dans lequel on insère un ou plusieurs autres conteneurs. Afin de créer une mise en page plus complexe. Ceci est surtout valable pour les designs sur Desktop et tablette. Puisque sur mobile, les conteneurs Elementor auront tendance à s’empiler de haut en bas. 

Ajouter un lien hypertexte sur un conteneur Elementor

Il est heureusement possible d’ajouter un lien hypertexte sur un conteneur. Ceci est particulièrement utile si vous voulez rendre cliquable toute la zone du conteneur et donc son contenu.

Attention cependant. Le conteneur Elementor porte bien son nom puisqu’il est d’abord et surtout utilisé pour contenir d’autres widgets : Titre, éditeur de texte, image… Ou même un ou plusieurs conteneurs. 

Alors avant d’aller plus loin dans cet article tutoriel, il est important de savoir que si vous souhaitez qu’un conteneur soit entièrement cliquable et donc lui ajouter un lien, alors aucun des éléments qu’il contient ne doit être cliquable et avoir de lien. 

La preuve en image

pas de lien dans les elements dans un conteneur cliquable elementor

Pourquoi ? Parce qu’on insère pas des liens dans des liens. En somme, mettre des liens dans un ou plusieurs éléments qui sont dans le conteneur ET sur le conteneur parent, ça imbriquerait dans le code HTML plusieurs liens. Ce qui n’est pas logique et créera sans doute des erreurs. 

Aussi, avant d’ajouter un lien sur un conteneur, veillez à bien choisir ce que vous préférez

  • Avoir un seul lien sur le conteneur principal à savoir le conteneur parent ?
  • Ou avoir plusieurs lien ou un seul sur un ou plusieurs éléments qui sont dans votre conteneur ?

Si vous voulez vraiment un seul lien sur votre conteneur Elementor Parent, supprimez tous les liens qui sont peut-être présents sur vos éléments enfants (images, titres, icônes…). 

Ensuite, retournez sur votre conteneur parent. 

Cliquez afin d’en ouvrir les paramètres.

Une fois que vous êtes dans les paramètres, repliez l’item principal nommé : Conteneur.

En revanche ouvrez celui du dessous nommé : Options supplémentaires.

Une fois dans cette partie, rendez-vous dans le menu déroulant nommé : Balise HTML et choisissez le dernier élément de la liste : a (lien).

Cela fera apparaître le champ dans lequel coller ou taper votre lien hypertexte ! 

Celui qui rendez tout votre conteneur cliquable comme attendu (très pratique pour une navigation sur mobile)

Vidéo tutoriel pour ajouter un lien sur un conteneur Elementor

En images ci-dessous : 

Les tutoriels vidéos sur la chaîne reprennent après une longue inactivité. N’hésitez pas à la partager et/ou à vous abonner si cela vous a été utile ! 

Et découvrez d’autres tutoriels et articles sur Elementor (free) : 

Faîtes-vous plaisir !

Griselidis
Griselidis

Heureuse maman d'un petit garçon né en 2018, je tiens aujourd'hui quatre blogs. Après 17 années passées dans une grande entreprise de téléphonie, je travaille désormais en tant que webmaster freelance à mon compte depuis 2015.

Newsletter

Saisissez votre adresse e-mail ci-dessous et abonnez-vous à la newsletter

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *