Lorsque vous construisez un site web, il est essentiel de veiller à ce que votre contenu soit bien organisé. Une organisation soignée de vos pages peut contribuer à améliorer l’expérience utilisateur (UX) et rendre le texte plus digeste. L’une des façons d’organiser votre contenu est d’utiliser le widget d’onglets d’Elementor.
Le contenu à onglets permet à vos utilisateurs d’alterner entre différentes sections de contenu. Cette fonctionnalité évite aux visiteurs de devoir naviguer vers différentes zones des pages. Le regroupement de contenus similaires dans des conteneurs à onglets peut améliorer l’aspect et la convivialité de votre site. De plus, vous pouvez mettre tout cela en place sans aucune expérience en matière de développement WordPress.
Dans cet article, nous allons présenter brièvement Elementor et ses différentes versions. Ensuite, nous vous expliquerons comment créer et personnaliser les onglets Elementor et quelques outils tiers que vous pouvez utiliser pour améliorer la fonctionnalité par défaut du widget.
C’est parti !
Un aperçu d’Elementor
Elementor est une extension de construction de sites web populaire et puissante :
Vous pouvez utiliser le constructeur de pages pour créer de belles pages pour votre site web, soit à partir de zéro, soit en utilisant des modèles prémâchés. Elementor dispose d’un éditeur de type glisser-déposer, vous n’aurez donc pas besoin de toucher à ligne de code.
Il est important de noter qu’il existe une version gratuite et payante d’Elementor. L’extension gratuite Elementor vous permet de créer des pages et des articles standard.
Toutefois, ses caractéristiques et ses fonctionnalités peuvent être limitées. Pour débloquer l’ensemble des outils, nous vous recommandons de passer à Elementor Pro. Tout au long de cet article, nous soulignerons les différences entre le plan gratuit et le plan pro lorsque vous travaillez avec le widget Onglets.
Comment créer des onglets Elementor (Widget d’onglets)
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éjà installé et activé Elementor sur votre site WordPress.
Pour commencer, naviguez vers l’article ou la page WordPress où vous voulez ajouter le contenu à onglets et sélectionnez Modifier avec Elementor:
Ceci lancera l’interface de l’éditeur Elementor. Dans le panneau de gauche, sous Élements, recherchez et sélectionnez le widget Onglets :
Vous pouvez faire glisser et déposer le widget sur une section de page. Une fois que vous avez placé le widget Onglets, un nouveau tableau de bord apparaît avec ses réglages :
Vous pouvez saisir le titre et le contenu de chaque onglet. Vous pouvez également cliquer sur le bouton + Ajouter un élément pour insérer un autre onglet. Sous Type, choisissez d’afficher les onglets horizontalement ou verticalement.
Comment personnaliser vos onglets Elementor
Une fois que vous avez ajouté du texte aux onglets, vous pouvez personnaliser les réglages généraux du widget. Il existe quelques options différentes.
Sélectionnez chaque onglet personnalisé pour modifier ses attributs, notamment son titre, le contenu de sa boîte et son icône. Vous pouvez également modifier sa position et son alignement :
Ensuite, sous l’onglet Style , 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 :
Vous pouvez modifier la couleur et la largeur de la bordure qui entoure les onglets. Cette caractéristique de conception peut aider à distinguer les sections individuelles.
Sous Titre, vous pouvez modifier la couleur du texte des titres des onglets. Vous pouvez également modifier la police et la taille du texte en cliquant sur Typographie :
Lorsque vous avez terminé, enregistrez vos modifications. Il existe également quelques réglages avancés que vous pouvez envisager d’utiliser pour rendre votre contenu à onglets plus sophistiqué.
Réglages avancés pour les onglets Elementor
Sous l’onglet Avancé du panneau de paramètres du widget, vous trouverez un large éventail d’options supplémentaires:
Examinons de plus près ces réglages :
- Avancé : Modifiez les marges et les marges intérieurs des onglets.
- Effets de mouvement : Ajoutez des effets de défilement et de souris pour rendre le widget plus interactif et ajoutez une animation d’entrée.
- Transformer : Retournez, faites pivoter et mettez à l’échelle votre widget.
- Arrière-plan : Choisissez entre un arrière-plan standard ou un survol pour insérer une transition.
- Bordure : Choisissez le type de bordure, par exemple une ligne pleine ou en pointillés.
- Masque : Sélectionnez un masque de conception élégant et appliquez-le au widget.
- Positionnement : Ajustez la largeur et la position du widget.
- Réceptif : Modifiez la visibilité réactive qui affectera les pages d’aperçu ou les pages en direct.
- Attributs : Définissez des attributs personnalisés pour le wrapper de l’élément.
- CSS personnalisé : Insérez votre CSS personnalisé.
Il est important de noter que si vous utilisez la version gratuite d’Elementor, vous n’aurez pas accès à tous ces réglages avancés. Par exemple, vous ne pouvez pas ajouter d’attributs personnalisés, d’effets de défilement ou votre CSS.
Comment ajouter un élément dans le widget des onglets
Avec Elementor Pro, vous pouvez également insérer un autre élément dans le widget Onglets. Par exemple, disons que vous voulez ajouter le widget Cartes sous un onglet Localisations.
Pour cela, créez la carte que vous souhaitez utiliser puis enregistrez-la en tant que widget global en cliquant avec le bouton droit de la souris sur l’icône du crayon et en sélectionnant Enregistrer en global :
Ensuite, naviguez dans votre bibliothèque de modèles ( depuis votre tableau de bord WordPress) et copiez le code court du widget global que vous venez de créer.
Cliquez ensuite à l’intérieur du widget Onglets et sélectionnez le bouton + Ajouter un élément pour ajouter un nouvel onglet. Dans la zone de texte du conteneur, collez le code court que vous venez de copier :
Lorsque vous avez terminé, cliquez sur Mettre à jour ou Publier en bas de l’écran. Vous pouvez ensuite prévisualiser l’apparence du widget sur l’interface publique de votre site :
Voilà, c’est fait ! Vous avez terminé.
8 Extensions top pour les onglets Elementor
Elementor est un outil robuste qui est livré avec toutes les fonctionnalités et caractéristiques dont vous aurez besoin pour créer un contenu en onglets beau et fonctionnel.
Cependant, vous voudrez peut-être aller plus loin dans votre conception ou utiliser des capacités avancées. Dans ce cas, vous pourriez envisager de coupler Elementor avec un autre outil tiers.
Jetons un coup d’œil à quelques-unes des meilleures extensions pour les onglets Elementor, classés sans ordre particulier.
1.ElementsKit Elementor Table Widget
ElementsKit Addon for Elementor est une extension populaire :
Son widget de tableau vous permet de présenter une grande quantité de données non synchronisées de manière organisée. Vous pouvez construire un tableau personnalisable, ajouter du contenu de corps, et insérer des images et des éléments de navigation.
Les fonctionnalités d’ElementsKit comprennent :
- Tableaux de comparaison
- Planifications et calendriers
- Gestion de projet
- Menus
- Plus de 500 blocs
- Plus de 70 modules
- Un constructeur de méga-menu
- Effets Parallax
- Un générateur de popup
La tarification d’ElementsKit commence à 39 $ par an pour un seul site. Ce plan comprend un an de mises à jour et d’assistance.
2. Elegant Tabs for Elementor
Elegant Tabs for Elementor est un outil intuitif qui vous aide à créer et à personnaliser des onglets dynamiques :
Cette extension peut être un choix solide si vous recherchez une extension avec de nombreuses options de personnalisation du design. Vous pouvez ajouter des couleurs, des icônes et des polices personnalisées. Vous pouvez également utiliser Elegant Tabs pour ajouter une fonction de changement automatique à vos onglets et les lier à d’autres contenus sur votre site.
Les principales caractéristiques d’Elegant Tabs sont les suivantes :
- Des options de style avancées
- Une fonction de bascule automatique
- La possibilité d’activer n’importe quel onglet au chargement
- Onglets justifiés et verticaux
- Liens profonds
- Prise en charge de l’alignement des onglets
Le prix d’Elegant Tabs commence à 19 $ par an. Ce plan comprend six mois de mises à jour.
3. Addons Livemesh
Livemesh Addons for Elementor comprend une pléthore d’éléments prêts à l’emploi pour vous aider à styliser et à structurer votre contenu à onglets en toute simplicité :
Vous pouvez choisir entre des types d’onglets clairs et foncés, plus de 10 modèles d’onglets et des options de mise en page horizontale et verticale. Livemesh Addons est également simple à utiliser, ce qui est excellent si vous êtes nouveau sur WordPress ou Elementor.
Les principales fonctionnalités de Livemesh comprennent :
- 10 modèles d’onglets clairs et 10 modèles d’onglets sombres
- Options verticales et horizontales
- Résolution mobile personnalisable
- plus de 25 modules
- Prise en charge des icônes
Les les plans de Livemesh Addons commencent à 37 $ par an. Ce plan inclut les mises à jour et l’assistance pendant un an.
4. Elementor Addons
Elementor Addons, issu du populaire PowerPack, est une extension riche en fonctionnalités permettant de booster à la fois le design et la fonctionnalité de votre widget d’onglets Elementor :
Vous pouvez utiliser cette extension pour ajouter du texte et des images à vos onglets et appliquer six styles pour le widget Advanced Tabs. Il est convivial et facile à comprendre. De plus, Elementor Addons est également léger, vous n’avez donc pas à craindre de ralentir votre site.
Les principales caractéristiques d’Elementor Addons by PowerPack sont les suivantes :
- Une interface rapide et légère
- Modèles pré-construits
- Affichage de contenu personnalisé
- Styles d’onglets avancés
Débutant à 44 $ par an, cette extension est plus chère que certaines autres options de cette liste. Cependant, elle dispose d’une suite complète de widgets pour personnaliser tous les aspects de votre site, et pas seulement le contenu de vos onglets.
5. JetElements
JetElements propose un widget Responsive Tables qui pourrait être idéal si vous recherchez un moyen rapide et facile de regrouper votre contenu :
Il vous permet de présenter des données non structurées d’une manière propre et moderne. JetElements propose également un widget Tableau des prix pour personnaliser et styliser les détails de vos prix de huit façons différentes.
Les principales caractéristiques de JetElements sont les suivantes :
- 45 widgets
- Importation CSV pour les réglages des tableaux
- 8 options de style
- Prise en charge de tous les types de contenu
- Entièrement personnalisable
Un abonnement à JetElements commence à 24 $ par an. Crocoblock propose également un forfait tout compris pour 130 $ par an, avec plus de 150 widgets.
6. Essential Addons
Une autre extension populaire que vous pourriez envisager d’utiliser pour vos onglets Elementor est Essential Addons:
C’est l’une des extensions de widgets Elementor les plus populaires. Elle comprend plus de 100 blocs prêts à l’emploi et plus de 80 éléments pour étendre et améliorer le constructeur de sites web.
L’un des meilleurs éléments que vous pouvez exploiter pour votre contenu à onglets est le tableau de données de l’extension. Cet outil vous permet de concevoir de manière transparente presque tous les types de tableaux et d’y ajouter des icônes, des filtres, etc.
Les principales caractéristiques d’Essential Addons sont les suivantes :
- Importation CSV vers les paramètres des tableaux
- Options de filtrage
- Réglages entièrement personnalisables
- Options de style avancées
- Onglets et éléments en accordéon avancés
- Tableaux de tarification
Le prix d’Essential Addons commence à 39,97 $ par an pour un site web. Il est livré avec un an de mises à jour et d’assistance.
7. Addons Premium
Premium Addons est un outil hautement personnalisable pour Elementor qui est livré avec une large gamme de widgets gratuits et premium :
Parmi les nombreux widgets puissants inclus avec ce module figure le tableau des prix Elementor. Il est doté d’une fonction de tri, d’une recherche en direct et de la possibilité de classer les éléments par ordre croissant ou décroissant.
Les principales caractéristiques de Premium Addons sont les suivantes :
- La possibilité d’importer des fichiers CSV
- Ajout d’URL aux cellules des tableaux
- Recherche et tri en direct
- Options de personnalisation et de style
- Animations Lottie
Vous pouvez télécharger et utiliser gratuitement le widget de tableau Elementor Premium Addons. Il existe également une version premium, à partir de 39 $ par an.
8. Element Pack
Un dernier module que vous pourriez envisager d’utiliser avec votre widget d’onglets Elementor est Element Pack :
Ce pack d’extensions Elementor comprend un widget Tableau qui peut présenter votre contenu d’une manière attrayante et élégante. Vous pouvez créer divers tableaux dans votre contenu à onglets, notamment des tableaux de prix, de contenu et de crypto-monnaies.
Les principales caractéristiques du pack Elementor sont les suivantes :
- Importation de CSV dans les réglages des tableaux
- Éléments de trois tableaux
- Options de personnalisation et de style
- Une fonction de filtrage
- Une recherche en direct
Une licence pour site unique pour Element Pack coûte 29,25 $ par an, ce qui en fait l’une des options les moins chères de cette liste. Le plan comprend également une garantie de remboursement de 20 jours.
Résumé
Elementor est un excellent outil qui peut vous aider à concevoir et à construire votre site web sans effort. Si vous cherchez à regrouper et à organiser votre contenu de manière attrayante, vous pouvez envisager d’utiliser le widget d’onglets d’Elementor.
Comme nous l’avons évoqué dans cet article, vous pouvez facilement insérer ce widget dans n’importe quelle page ou article via l’éditeur Elementor. Vous pouvez ensuite ajouter votre contenu et le styliser en fonction de votre image de marque. Pour étendre les fonctionnalités du widget, vous pouvez également l’associer à une extension tierce, telle que ElementsKit.
Un design convivial et attrayant est essentiel au succès d’un site. Vous devrez également vous associer à un puissant fournisseur d’hébergement WordPress.
Vous devrez également vous associer à un puissant fournisseur d’hébergement d’applications, d’hébergement de bases de données et d’hébergement WordPress infogéré.
Consultez nos plans d’hébergement pour voir comment Kinsta peut faire passer votre site web au niveau supérieur !
Laisser un commentaire