{"id":58821,"date":"2022-06-20T13:36:57","date_gmt":"2022-06-20T12:36:57","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=58821&preview=true&preview_id=58821"},"modified":"2023-10-18T09:52:21","modified_gmt":"2023-10-18T08:52:21","slug":"onglets-elementor","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/onglets-elementor\/","title":{"rendered":"Comment cr\u00e9er et utiliser les onglets Elementor"},"content":{"rendered":"

Lorsque vous construisez un site web<\/a>, il est essentiel de veiller \u00e0 ce que votre contenu soit bien organis\u00e9. Une organisation soign\u00e9e de vos pages peut contribuer \u00e0 am\u00e9liorer l’exp\u00e9rience utilisateur (UX) et rendre le texte plus digeste. L’une des fa\u00e7ons d’organiser votre contenu est d’utiliser le widget d’onglets d’Elementor.<\/p>\n

Le contenu \u00e0 onglets permet \u00e0 vos utilisateurs d’alterner entre diff\u00e9rentes sections de contenu. Cette fonctionnalit\u00e9 \u00e9vite aux visiteurs de devoir naviguer vers diff\u00e9rentes zones des pages. Le regroupement de contenus similaires dans des conteneurs \u00e0 onglets peut am\u00e9liorer l’aspect et la convivialit\u00e9 de votre site. De plus, vous pouvez mettre tout cela en place sans aucune exp\u00e9rience en mati\u00e8re de d\u00e9veloppement WordPress<\/a>.<\/p>\n

Dans cet article, nous allons pr\u00e9senter bri\u00e8vement Elementor et ses diff\u00e9rentes versions. Ensuite, nous vous expliquerons comment cr\u00e9er et personnaliser les onglets Elementor et quelques outils tiers que vous pouvez utiliser pour am\u00e9liorer la fonctionnalit\u00e9 par d\u00e9faut du widget.<\/p>\n

C’est parti !<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Un aper\u00e7u d’Elementor<\/h2>\n

Elementor<\/a> est une extension de construction de sites web<\/a> populaire et puissante :<\/p>\n

\"Extension
Extension Elementor<\/figcaption><\/figure>\n

Vous pouvez utiliser le constructeur de pages pour cr\u00e9er de belles pages pour votre site web, soit \u00e0 partir de z\u00e9ro, soit en utilisant des mod\u00e8les pr\u00e9m\u00e2ch\u00e9s. Elementor dispose d’un \u00e9diteur de type glisser-d\u00e9poser, vous n’aurez donc pas besoin de toucher \u00e0 ligne de code<\/a>.<\/p>\n

Il est important de noter qu’il existe une version gratuite<\/a> et payante d’Elementor<\/a>. L’extension gratuite Elementor vous permet de cr\u00e9er des pages et des articles standard.<\/p>\n

Toutefois, ses caract\u00e9ristiques et ses fonctionnalit\u00e9s peuvent \u00eatre limit\u00e9es. Pour d\u00e9bloquer l’ensemble des outils, nous vous recommandons de passer \u00e0 Elementor Pro. Tout au long de cet article, nous soulignerons les diff\u00e9rences entre le plan gratuit et le plan pro lorsque vous travaillez avec le widget Onglets.<\/p>\n\n

Comment cr\u00e9er des onglets Elementor (Widget d’onglets)<\/h2>\n

Maintenant que nous en savons plus sur Elementor, voyons comment utiliser le widget d’onglets. Notez que, pour le tutoriel suivant, nous supposerons que vous avez d\u00e9j\u00e0 install\u00e9 et activ\u00e9<\/a> Elementor sur votre site WordPress.<\/p>\n

Pour commencer, naviguez vers l’article ou la page WordPress o\u00f9 vous voulez ajouter le contenu \u00e0 onglets et s\u00e9lectionnez Modifier avec Elementor<\/strong>:<\/p>\n

\"S\u00e9lectionnez
S\u00e9lectionnez Modifier avec Elementor.<\/figcaption><\/figure>\n

Ceci lancera l’interface de l’\u00e9diteur Elementor. Dans le panneau de gauche, sous \u00c9lements<\/strong>, recherchez et s\u00e9lectionnez le widget Onglets <\/strong>:<\/p>\n

\"Recherchez
Recherchez et s\u00e9lectionnez le widget Onglets.<\/figcaption><\/figure>\n

Vous pouvez faire glisser et d\u00e9poser le widget sur une section de page. Une fois que vous avez plac\u00e9 le widget Onglets, un nouveau tableau de bord appara\u00eet avec ses r\u00e9glages :<\/p>\n

\"Faites
Faites glisser le widget sur votre page.<\/figcaption><\/figure>\n

Vous pouvez saisir le titre et le contenu de chaque onglet. Vous pouvez \u00e9galement cliquer sur le bouton + Ajouter un \u00e9l\u00e9ment <\/strong>pour ins\u00e9rer un autre onglet. Sous Type<\/strong>, choisissez d’afficher les onglets horizontalement ou verticalement.<\/p>\n

Comment personnaliser vos onglets Elementor<\/h2>\n

Une fois que vous avez ajout\u00e9 du texte aux onglets, vous pouvez personnaliser les r\u00e9glages g\u00e9n\u00e9raux du widget. Il existe quelques options diff\u00e9rentes.<\/p>\n

S\u00e9lectionnez chaque onglet personnalis\u00e9 pour modifier ses attributs<\/a>, notamment son titre, le contenu de sa bo\u00eete et son ic\u00f4ne. Vous pouvez \u00e9galement modifier sa position et son alignement :<\/p>\n

\"Modifiez
Modifiez les onglets selon vos besoins.<\/figcaption><\/figure>\n

Ensuite, sous l’onglet Style <\/strong>, vous trouverez de nombreuses options pour personnaliser le design et l’apparence du widget Onglets d’Elementor. Vous pouvez modifier la couleur et l’ombre de son texte, sa typographie, son espacement, et plus encore :<\/p>\n

\"Personnaliser
Personnaliser les styles et l’espacement.<\/figcaption><\/figure>\n

Vous pouvez modifier la couleur et la largeur de la bordure qui entoure les onglets. Cette caract\u00e9ristique de conception peut aider \u00e0 distinguer les sections individuelles.<\/p>\n

Sous Titre<\/strong>, vous pouvez modifier la couleur du texte des titres des onglets. Vous pouvez \u00e9galement modifier la police et la taille du texte en cliquant sur Typographie <\/strong>:<\/p>\n

\"Plus
Plus d’options de modification.<\/figcaption><\/figure>\n

Lorsque vous avez termin\u00e9, enregistrez vos modifications. Il existe \u00e9galement quelques r\u00e9glages avanc\u00e9s que vous pouvez envisager d’utiliser pour rendre votre contenu \u00e0 onglets plus sophistiqu\u00e9.<\/p>\n

R\u00e9glages avanc\u00e9s pour les onglets Elementor<\/h2>\n

Sous l’onglet Avanc\u00e9<\/strong> du panneau de param\u00e8tres du widget, vous trouverez un large \u00e9ventail d’options suppl\u00e9mentaires<\/a>:<\/p>\n

\"Options
Options avanc\u00e9es de l’onglet.<\/figcaption><\/figure>\n

Examinons de plus pr\u00e8s ces r\u00e9glages :<\/p>\n