Onglets et accordéons sur WordPress avec Elementor

• Introduction
• Comment ajouter des onglets et des accordéons sur WordPress avec Elementor
• Conclusion

Introduction

Personne ne nierait la popularité croissante des constructeurs de sites Web aujourd'hui. Après tout, ils permettent aux personnes sans expérience en programmation de créer facilement leur propre site Web unique.

Elementor est un plugin plutôt nouveau et très efficace pour les besoins de votre site web. Une fois que vous avez terminé avec la structure de présentation, vous pouvez commencer à ajouter des widgets. Les widgets sont les blocs de construction de votre conception. Ils peuvent être facilement ajoutés par glisser-déposer du panneau de gauche à la section et à la colonne souhaitées. Aujourd'hui, nous allons parler de la façon d'ajouter des onglets et des accordéons à votre site Web WordPress. Elementor nous donne un tas d'options pour éditer chaque widget. Après avoir ajouté un widget, vous pouvez en modifier le contenu, le style, l'indentation et l'alignement.

Regardons le processus de plus près

Comment ajouter des onglets et des accordéons sur WordPress avec Elementor

Il est temps de voir comment ajouter des onglets et des accordéons à votre site Web WordPress à l'aide du constructeur de pages Elementor. Outre Elementor, vous aurez besoin du  plugin JetTabs. En option, vous pouvez l'obtenir gratuitement dans le thème Monstroid2 WordPress.

Pour faire face à cette tâche, vous aurez besoin d’un widget pour les onglets et d’un autre pour les accordéons.

Commençons par les onglets. Le widget Tabs vous permet de diviser votre contenu en onglets.

1. Recherchez le widget Tabs. Les widgets Tabs et Accordions ils peuvent être situés à l'intérieur du plugin JetTabs. Glissez-déposez-le sur la section centrale.
2. La section de contenu affiche la liste des éléments. Chaque élément définit ce que vous avez dans votre onglet. Pour afficher des informations dans un onglet, vous devrez ajouter un modèle, puis affecter ce modèle à un onglet. *Le tableau de bord WordPress vous permet de choisir Elementor > My templates > puis créer un modèle que vous souhaitez afficher à l'intérieur de votre onglet.
3. Le premier réglage que vous pouvez voir est ‘Active’. Si vous basculez cette option sur Yes, cela signifie que cet article sera ouvert tout de suite. Ensuite, vous pouvez ajouter une Image qui sera affichée juste à côté du Title (titre). Aussi, vous pouvez changer le Label (étiquette) à celui que vous voulez voir là-bas. Ces paramètres peuvent être ajustés pour chaque Tab (onglet).
4. Allez à l'ongler Settings (paramètres). Ici vous pouvez choisir un effet d'animation. L'onglet Event vous permet de choisir l'option ‘Hover’ afin que vous puissiez naviguer dans vos onglets juste en survolant ceux-ci. L'Auto Switch fait que vos onglets changent automatiquement. Vous pouvez également configurer le délai de commutation automatique ici (Auto Switch Delay).
5. Allez à l'onglet Style > section General pour choisir la position de vos onglets (haut, gauche, droit).
6. La section Tabs Control vous permet de définir les Tabs Alignment, Background Type, etc.
7. La section Tabs Control Items vous permet de définir une Image, icône (Icon) ou étiquette (Label) (cela dépend de ce que vous avez choisi). Vous pouvez ajuster la largeur de l'image (Image Width), la position de l'icône (Icon Position), ajouter une marge à l'image (Image Margin). State Styles vous aide à choisir l'état : Normal, Hover ou Active.
8. Vous pouvez modifier l'apparence et ajuster les paramètres du conteneur dans la section Tabs Content.

En ce qui concerne les accordéons, vous devez rechercher le widget Accordion classique. Le widget Accordion est utilisé pour afficher le texte de manière condensée et réduite, vous permettant de gagner de la place tout en présentant une abondance de contenu. Les paramètres sont légèrement différents, mais le processus est similaire.

1. créez des modèles et les affectez à Toggles. Vous pouvez choisir deux icônes - l'une d'elles est utilisée lorsque votre Toggle est fermé, et l'autre lorsque votre Toggle est ouvert et actif.
2. Si vous définissez l'option Active à Yes, cela signifie que cette bascule particulière sera ouverte tout de suite.
3. Le paramètre étiquette vous permet de changer votre étiquette.
4. L'option Collapsible activée signifie qu'un utilisateur ne pourra pas ouvrir plus d'une bascule à la fois.
5. L'onglet Style offre des paramètres similaires à ceux décrits précédemment.

Conclusion

Elementor est l’un des plugins gratuits les plus intéressants et les plus efficaces pour la construction de sites Web. Les widgets, inclus dans Elementor, fournissent des fonctionnalités assez basiques, mais ils couvrent toujours les besoins de personnalisation de la plupart des utilisateurs. Choisissez le meilleur thème Elementor pour votre projet et amusez-vous avec ses incroyables widgets. J'espère que mon tutoriel vous a été utile et que vous pouvez maintenant ajouter des onglets et des accordéons à votre ressource Web. Créez votre nouveau contenu sensationnel en quelques clics!

Articles connexes

Comment créer un texte animé avec Elementor Builder

Comment configurer un modèle Elementor sur votre thème WordPress

Astuce Elementor : Comment créer un portfolio catégorisé

Elementor Page Builder : votre nouveau plugin WordPress indispensable