Les onglets sont l'un des moyens les plus simples d'empêcher une longue page de se sentir écrasante. Au lieu de tout empiler verticalement, vous divisez le contenu en sections cliquables que les visiteurs peuvent explorer à leur propre rythme.
Le Onglets avancés widget dans Modules complémentaires principaux pour Elementor prend le basique widget d'onglets Elementor et ajoute beaucoup plus de flexibilité Vous obtenez quatre mises en page prédéfinies, la possibilité d'ajouter une image, une icône ou une animation Lottie à chaque onglet, et la possibilité de charger une section Elementor enregistrée dans n'importe quel panneau d'onglets.
Ci-dessous, je vous expliquerai comment le configurer à partir de zéro en utilisant les mêmes choix de mise en page que ceux présentés dans la vidéo de démonstration.
Ce que fait le widget Elementor Advanced Tabs #
À la base, ce widget crée un ensemble d'étiquettes à onglets plus une zone de contenu Lorsque quelqu'un clique sur une étiquette, le panneau correspondant apparaît.
Par rapport au widget par défaut des onglets Elementor, la version Master Addons vous donne plus de contrôle Vous pouvez basculer entre quatre préréglages visuels, ajouter des images ou des icônes à des onglets individuels, utiliser du texte brut ou un modèle enregistré comme contenu du panneau, et styliser séparément les états normal, hover et actif.
Avant de commencer #
- WordPress avec Élémenteur installé et actif.
- Modules complémentaires principaux pour Elementor installé et actif Si vous ne l'avez pas encore installé, vérifiez le guide d'installation.
- Le widget Advanced Tabs activé dans le panneau d'options Master Addons.
- Facultatif : un modèle Elementor enregistré si vous souhaitez en charger un dans un onglet.
Ajouter le widget Avancées onglets #
Ouvrez l'éditeur Elementor et recherchez le Onglets avancés widget sous la section Addons principaux Faites-le glisser dans votre page et vous verrez la barre d'onglets horizontale par défaut avec trois exemples d'onglets : Contrôle intelligent, Meilleures performances et Personnalisation facile.
Choisissez une disposition prédéfinie #
Le moyen le plus rapide de changer le look est le Style Préréglé dépose dans l'onglet Contenu Vous avez quatre options :
- Onglets horizontaux : les étiquettes s'exécutent sur le dessus avec du contenu en dessous. C'est la valeur par défaut.
- Onglets verticaux : les étiquettes s'empilent à gauche et le contenu apparaît à droite.
- Frontière active gauche : semblable aux onglets verticaux, mais l'onglet actif obtient une bordure colorée à gauche.
- Contenu tabulaire : les étiquettes deviennent des boutons de type carte plus grands au-dessus du panneau de contenu.
Vous pouvez basculer entre ceux-ci instantanément, alors essayez-les tous et voyez lequel correspond le mieux à votre contenu. Il y a aussi un Disposition des colonnes contrôle qui vous permet d'ajuster le nombre de colonnes occupées par les étiquettes à onglets, ce qui est pratique lorsque vous souhaitez des étiquettes plus étroites et plus de place pour le contenu.
Configurer les onglets et le contenu #
Une fois que vous avez choisi une mise en page, développez le Contenu section pour voir la liste des onglets Chaque élément a son propre panneau de paramètres Vous pouvez dupliquer, supprimer ou réorganiser les onglets, et appuyer sur Ajouter un élément quand il vous en faut plus.
Paramètres par onglet #
- Définir par défaut : choisissez quel onglet s'ouvre en premier lorsque la page se charge.
- Type d'icône : choisir Icône, Image; ou Lottie pour l'étiquette de l'onglet, ou laissez-la vide.
- Image /Icône /Lottie : l'actif visuel affiché à côté du titre de l'onglet.
- Titre de l'onglet : le texte sur lequel les visiteurs cliquent.
- Type de contenu : utilisation Contenu pour un éditeur de texte régulier, ou Section enregistrée pour tirer un modèle Elementor.
- Contenu de l'onglet : le contenu ou le modèle réel qui remplit le panneau.
Dans la démo, le premier onglet utilise une image Il suffit de définir le Type d'icône sur Image, ouvrir la médiathèque et sélectionner votre fichier L'image apparaît à la fois à côté du titre de l'onglet et à l'intérieur du panneau de contenu.
Pour le deuxième onglet, la démo passe à une icône Choisissez le type d'icône et choisissez quelque chose qui correspond à l'étiquette Dans ce cas, une icône de style compteur de vitesse fonctionne bien pour “Better Performance.”
Charger une section enregistrée à l'intérieur d'un onglet #
Voici où ça devient intéressant Changer le Type de contenu à Section enregistrée et choisissez n'importe quel modèle dans votre bibliothèque Elementor. La démo charge un accordéon FAQ complet dans un seul onglet, ce qui signifie que votre panneau peut contenir des titres, des accordéons, des formulaires ou tout ce que vous avez enregistré comme modèle.
Stylez les onglets et le contenu #
Rendez-vous au Style onglet pour changer les couleurs, la typographie, l'espacement, et les bordures Les contrôles sont regroupés en deux sections principales :
- Onglets : couvre les étiquettes des onglets, y compris la couleur du titre, la typographie du titre, la couleur de l'arrière-plan, la couleur du contenu, la typographie du contenu, l'alignement du contenu, le rayon de la bordure, l'ombre de la boîte, le remplissage et la marge.
- Contenu: stylise le panneau qui s'affiche lorsqu'un onglet est actif.
La plupart de ces contrôles prennent en charge les états normaux, de vol stationnaire et actifs, de sorte que l'onglet que quelqu'un consulte actuellement peut être différent du reste. Le Alignement du contenu les boutons vous permettent également d'aligner le texte du panneau en haut, au centre ou en bas de la zone de contenu.
Paramètres avancés #
Le Avancé tab a les contrôles Elementor habituels auxquels vous vous attendez : marge, remplissage, animation d'entrée, visibilité réactive, CSS personnalisé et attributs Utilisez-les pour ajuster le positionnement ou masquer les onglets sur des tailles d'écran spécifiques.
Le résultat sur la page #
Une fois publiés, les onglets fonctionnent exactement comme vous les configurez L'onglet par défaut s'ouvre en premier, les visiteurs cliquent sur les étiquettes et toute section ou support enregistré que vous avez ajouté apparaît dans le panneau correspondant.
Cas d'utilisation courants #
- Décompressions des fonctionnalités sur les pages de produits, avec un onglet par fonctionnalité.
- Tarification ou comparaisons de plans utilisation de contenu tabulaire ou d'étiquettes verticales.
- Rubriques FAQ à l'intérieur d'un onglet en chargeant un accordéon enregistré comme contenu du panneau.
- Descriptions de service où chaque onglet couvre un service différent.
- Portfolio ou études de cas avec une image ou une icône par onglet et des détails dans le panneau.
Conseils pour de meilleurs onglets #
- Faites correspondre le préréglage à votre contenu. Les onglets horizontaux fonctionnent mieux avec les étiquettes courtes, les onglets verticaux sont parfaits pour les listes plus longues et le contenu tabulaire fait ressortir chaque option.
- Définissez votre onglet le plus important par défaut. Utilisation Définir comme par défaut ainsi, les visiteurs voient d'abord votre meilleur contenu.
- Gardez les icônes et les images cohérentes. Le mélange d'images, d'icônes et d'étiquettes de texte brut dans la même barre d'onglets a tendance à paraître compliqué.
- Ne surchargez pas les sections enregistrées. Une forme ou un accordéon à l'intérieur d'un onglet est parfait, mais une section de héros lourde peut ralentir les choses même lorsqu'elle est cachée.
- Vérifiez la vue mobile avant de publier. Les onglets verticaux peuvent devenir hauts sur de petits écrans, alors prévisualisez d'abord la mise en page réactive.
Foire aux questions #
Qu'est-ce que le widget Advanced Tabs dans Master Addons ?
C'est un widget Elementor pour la construction de contenu à onglets Vous pouvez choisir des mises en page horizontales, verticales, gauches-actives-frontières, ou tabulaires ; ajouter des icônes, des images, ou des animations Lottie à chaque onglet ; remplir des panneaux avec du texte ou des sections enregistrées ; et styliser les états normal, hover, et actif.
Puis-je charger un modèle Elementor dans un onglet ?
Oui. Définissez le type de contenu de l'onglet sur la section enregistrée et choisissez n'importe quel modèle dans votre bibliothèque Elementor. Ce modèle sera rendu à l'intérieur du panneau lorsque l'onglet est actif.
Comment puis-je ouvrir un onglet par défaut ?
Ouvrez l'élément d'onglet dans l'onglet Contenu et activez Définir par défaut. Stick to one default tab so the panel always start in a clear state.
Quelle est la différence entre les onglets horizontaux et le contenu tabulaire ?
Horizontal Tabs place les étiquettes dans une seule rangée au-dessus du contenu Le contenu tabulaire transforme les étiquettes en boutons plus grands de type carte, ce qui fonctionne bien lorsque vous souhaitez que chaque onglet ressemble à un choix distinct.
Puis-je utiliser différents types d'icônes pour différents onglets ?
Oui. Chaque onglet a son propre contrôle de type d'icône, donc un onglet peut utiliser une image tandis qu'un autre utilise une icône ou un fichier Lottie. Pour un look plus épuré, essayez de garder le style visuel cohérent sur tous les onglets.
Envelopper #
Le Onglets avancés widget est un moyen solide de construire elementor onglets avancés avec plusieurs mises en page et panneaux de contenu riches Mélangez et associez les préréglages avec des images par onglet, des icônes ou des sections enregistrées jusqu'à ce que vous obteniez le design souhaité.
Si vous souhaitez voir ce qui est disponible d'autre, parcourez l'ensemble complet de Widgets et extensions Master Addons. Et si vous êtes curieux des fonctionnalités Pro, jetez un œil au page de tarification.
