Widget Elementor Advanced Tabs : onglets horizontaux, verticaux et image gratuits
Le widget Advanced Tabs dans Master Addons divise le contenu long en onglets propres et cliquables, et il est gratuit Choisissez un préréglage de bordure active horizontale, verticale ou gauche, ajoutez une icône ou une image à chaque titre d'onglet et choisissez si les onglets basculent en un clic ou en un survol Remplissez chaque onglet avec du texte de l'éditeur ou, avec Master Addons Pro, chargez une section enregistrée, un widget ou un modèle de page. Cela fonctionne bien pour les fonctionnalités du produit, les FAQ, les plans et les guides étape par étape.
Voir le widget onglets en action
Le bloc ci-dessous est le widget, pas une capture d'écran Quatre onglets, icônes sur les titres, et le premier défini pour ouvrir par défaut Cliquez sur un titre pour changer de panneau.
- Aperçu
- Spécification
- Livraison
- Garantie
Un bloc, quatre panneaux
Les onglets gardent une longue page courte Tout ci-dessous se trouve dans le même bloc, et seul le panneau que vous choisissez est à l'écran, donc une spécification, un bon de livraison et une page de garantie arrêtent de rivaliser pour le même parchemin.
C'est le widget lui-même Cliquez sur un titre ci-dessus pour changer de panneau.
Spécification
Chaque panneau prend le contenu ordinaire de l'éditeur : titres, paragraphes, listes et images Rien ici n'est une capture d'écran.
- Titres d'onglets avec une icône, une image ou un texte seul
- Préréglages de bordure active horizontale, verticale ou gauche
- Activer le clic ou le vol stationnaire
Livraison
Un panneau de livraison ou d'expédition est le deuxième onglet classique sur une page de produit, car les gens le recherchent et personne n'en veut dans la description principale.
Définissez l'onglet qui s'ouvre en premier avec Définir par défaut sur l'élément.
Garantie
Le dernier panneau est un bon foyer pour les conditions, les retours et tout ce qui compte pour un acheteur mais n'a pas sa place dans le terrain.
Comment ajouter des onglets dans Elementor
Cinq étapes d'une page vide à un bloc d'onglets de travail.
- Recherchez des onglets dans le panneau du widget Elementor et faites glisser le widget sur la page.
- Ouvrez le répéteur Tabs et ajoutez un élément par panneau Chaque élément a un titre d'onglet et un éditeur de contenu.
- Définissez le type d'icône sur chaque élément sur Aucun, Icône ou Image, puis choisissez l'icône ou téléchargez l'image.
- Choisissez un préréglage de style : onglets horizontaux, onglets verticaux ou bordure active gauche.
- Définissez Effet d'onglet sur Cliquer ou Survoler, et changez Définir par défaut sur l'onglet qui doit s'ouvrir en premier.
Tabulations horizontales et verticales avec préréglages de style
Partez d'un préréglage intégré Horizontal Tabs met les titres d'affilée sur le dessus, Vertical Tabs les aligne sur le côté, et Left Active Border marque l'onglet ouvert avec une bordure colorée Master Addons Pro ajoute un préréglage Tabular Content pour un look en boîte Chaque préréglage n'est qu'un point de départ, vous pouvez donc le restyler pour correspondre à votre marque.
- Dispositions horizontales et verticales : choisissez la direction des onglets qui correspond à votre contenu.
- Préréglages visuels : commencez à partir d'une mise en page conçue au lieu d'un widget vierge.
- Changement facile : passez des onglets horizontaux aux onglets verticaux sans reconstruire le contenu.
Onglet verticaux, en direct
Le même widget avec Style Preset réglé sur Vertical Tabs. Les titres descendent vers la gauche, le panneau est assis à côté d'eux et sur un écran étroit, la bande s'empile au-dessus du contenu.
- Enquête
- Conception
- Construire
- Remise
Enquête
Les onglets verticaux placent les titres dans une colonne à gauche et le panneau à côté d'eux. Ils conviennent à un processus dans lequel l'ordre compte et chaque étape comporte un paragraphe ou deux.
Conception
Avec quatre ou cinq marches, une bande verticale indique mieux qu'une rangée horizontale, car les titres longs ont de la place et l'œil les suit sur la page.
Construire
Basculer entre les deux avec le contrôle Style Preset Les onglets horizontaux, les onglets verticaux et la bordure active gauche sont les trois préréglages de la liste.
Remise
Sur un écran étroit, la bande verticale s'empile au-dessus du panneau, de sorte que le contenu reste lisible sans deuxième disposition.
Modèles enregistrés à l'intérieur des onglets (Pro)
La version gratuite remplit chaque onglet depuis l'éditeur de texte Avec Master Addons Pro, chaque onglet peut utiliser un Type de Contenu différent : simple Éditeur de Texte, une Section Sauvée, un Widget Sauvé, ou même un Modèle de Page Sauvée entier Cela signifie que vous pouvez placer une table de tarification complexe, un formulaire de contact, une galerie d'images, ou tout autre bloc de contenu pré-conçu dans un onglet C'est comme avoir plusieurs pages dans une, sans l'encombrement.
- Intégration du modèle : Insérez tout modèle d'élémentor enregistré dans un onglet pour des possibilités de conception illimitées.
- Conception cohérente : réutilisez vos sections et widgets existants pour conserver un aspect cohérent.
- Parfait pour les comparaisons : utilisez des onglets pour basculer entre différentes spécifications de produits, plans de prix ou listes de fonctionnalités.
Style des onglets : couleurs, bordures et typographie
Obtenez un look parfait et poli en coiffant chaque partie des onglets Concevez séparément le conteneur des onglets et la zone Contenu Pour les onglets, contrôlez les états Normal et Actif avec différentes couleurs, arrière-plans, bordures et typographie Ajustez le rembourrage, la marge et la taille de l'icône Pour la zone de contenu, stylisez l'arrière-plan, le rembourrage, les marges et la typographie Ce niveau de contrôle garantit que vos onglets sont intégrés et professionnels.
- Style basé sur l'État : définissez des couleurs, des arrière-plans et des bordures uniques pour les onglets actifs et inactifs.
- Prise en charge des icônes : ajoutez des icônes à vos onglets et contrôlez leur taille et leur position.
- Conception de zone de contenu : stylisez le conteneur de contenu pour qu'il corresponde à l'esthétique de votre site.
Changez d'onglet en cliquant ou en passant au vol stationnaire
Décidez comment les utilisateurs interagissent avec vos onglets Définissez l'effet d'onglet sur Cliquer (traditionnel) ou Survoler (pour une navigation plus rapide).Vous pouvez également définir quel onglet est ouvert par défautCette flexibilité vous permet de créer l'expérience utilisateur exacte que vous souhaitez, que ce soit pour une vitrine de produit rapide ou un guide soigné, étape par étape.
- Cliquez ou Survolez : choisissez le déclencheur qui convient à votre contenu Le survol est la valeur par défaut.
- Onglet Active par défaut : définissez l'onglet ouvert lors du chargement de la page.
Onglets d'élémentateur vs onglets avancés d'addons principaux
Le propre widget Tabs d'Elementor est dans le plugin gratuit, et il est bon pour une chose que celui-ci ne peut pas faire : il contient d'autres widgets à l'intérieur de chaque panneau, car chaque onglet est un conteneur Le commerce est ce que les titres des onglets peuvent transporter et quelle part du style est exposée.
| Caractéristique | Onglets d'élément (noyau libre) | Onglets principaux Addons |
|---|---|---|
| Déposez d'autres widgets dans un onglet | Oui, chaque panneau est un conteneur | Non, le panneau prend le contenu de l'éditeur |
| Titres sur le côté (vertical) | Oui | Oui, les onglets verticaux sont prédéfinis |
| Se transforme en accordéon sur mobile | Oui | Non |
| Image comme titre de l'onglet | Non | Oui, Type d'icône défini sur Image |
| Icône sur le titre de l'onglet | Oui | Oui |
| Préréglages de style | Non | Trois, plus le contenu tabulaire avec Pro |
| Allumez le vol stationnaire | Non | Oui, Effet de tabulation défini sur Hover |
| Modèle enregistré à l'intérieur d'un onglet | Pas nécessaire, utilisez des widgets | pro |
Donc la version courte : si un panneau a besoin d'un formulaire, d'une galerie ou d'une table de tarification à l'intérieur, utilisez le widget de base Si la bande d'onglets elle-même est le problème de conception, avec les titres d'images, les préréglages ou le basculement de vol stationnaire, celui-ci a les commandes.
Ce que fait et ne fait pas le widget Tabs
Vérifié dans le panneau du widget Les lignes “ no” sont aussi utiles que le reste, car deux d'entre elles sont les questions que les gens posent le plus.
| Réglage | Soutenu |
|---|---|
| Tabulations horizontales | Oui, le préréglage par défaut |
| Tabulations verticales | Oui |
| Préréglage de la bordure active gauche | Oui |
| Icône sur un titre à onglet | Oui, de la bibliothèque d'icônes Elementor |
| Image sous forme de titre d'onglet | Oui, Type d'icône défini sur Image |
| Texte uniquement les titres | Oui, le type d'icône défini sur Aucun |
| Activer le clic ou le survol | Oui, effet tabulation |
| Choisissez l'onglet qui s'ouvre en premier | Oui, défini par défaut sur l'article |
| Alignement des onglets et du contenu | Oui |
| Couleurs actives et inactives | Oui |
| Section enregistrée, widget ou modèle de page dans un onglet | pro |
| Préréglage du contenu tabulaire | pro |
| Disposition des colonnes pour la bande à onglets | pro |
| Ouvrir un onglet à partir d'une URL ou d'un lien | Non |
| Accordéon sur mobile | Non |
Widgets associés pour le même travail : Accordéon avancé pour les listes de FAQ, Basculer le contenu pour échanger un bloc de contenu, Tableau dynamique pour les spécifications, Tableau des prix pour les plans, et Table des matières pour les longues pages.
Onglet Image et icône dans Elementor
Chaque titre d'onglet peut transporter une icône de la bibliothèque Elementor ou une image de votre propre Définir le type d'icône sur Image, choisir une image de la bibliothèque multimédia, et le titre devient un onglet image Ceci est une option gratuite et fonctionne avec chaque préréglage gratuit.
- Type d'icône par onglet : Aucun, icône ou image.
- Utilisez des images pour les onglets de produits ou de catégories et des icônes pour les listes de fonctionnalités.
- Gardez un style sur une barre d'onglets, car le mélange d'images et d'icônes semble occupé.
Pour le contenu qui s'ouvre sur place au lieu de commuter les panneaux, essayez le Accordéon avancé ou Basculer le contenu (Pro).
Foire aux questions pour les onglets
Puis-je utiliser à la fois des icônes et du texte dans les titres des onglets ?
Oui. Pour chaque onglet, définissez Type d'icône sur Icône ou Image, puis choisissez une icône dans la bibliothèque ou une image dans votre médiathèque Le contrôle Taille de l'icône dans l'onglet Style définit la taille de l'icône.
Comment puis-je donner une belle apparence aux onglets sur mobile ?
Utilisez le mode réactif d'Elementor pour ajuster la typographie, le remplissage et les marges pour la tablette et le téléphone Prévisualisez les onglets verticaux sur un petit écran avant de publier, puisque la colonne de titres prend de la largeur.
Quelle est la différence entre le préréglage « Contenu tabulaire » et les autres ?
Tabular Content est un préréglage Pro. Il donne à la zone de contenu des onglets un arrière-plan, une bordure et un remplissage distincts, ce qui la fait ressembler à une boîte connectée aux onglets C'est un look plus structuré et contenu par rapport aux styles classiques souligné ou border-left.
Puis-je mettre un modèle enregistré dans un onglet ?
Oui, avec Master Addons Pro. Définissez le type de contenu sur l'élément dans la section enregistrée, le widget enregistré ou le modèle de page enregistrée et choisissez le modèle. Sur le plugin gratuit, chaque panneau prend à la place le contenu de l'éditeur.
Puis-je définir quel onglet s'ouvre en premier ?
Oui. Commuter Définir par défaut sur l'élément que vous souhaitez ouvrir lorsque la page se charge Si aucun n'est défini, le premier onglet s'ouvre.
Puis-je lier un onglet à une URL externe ou à une autre section de la page ?
L'élément Advanced Tabs est conçu pour basculer le contenu dans le widget Pour créer des liens vers des URL externes ou des sections de page, vous pourriez avoir besoin d'une solution différente, comme un menu de navigation ou des liens d'ancrage. Cependant, vous pouvez placer un bouton avec un lien à l'intérieur du contenu de l'onglet.
En quoi est-ce différent du propre widget Tabs d'Elementor ?
Le widget Tabs gratuit d'Elementor vous permet de placer n'importe quels widgets à l'intérieur de chaque onglet et de mettre les titres au-dessus, en dessous ou à côté du contenu Master Addons Advanced Tabs vous offre un déclencheur de survol, des étiquettes d'icônes ou d'images et des préréglages prêts à l'emploi tels que Left Active Border, et vous pouvez ajouter autant de widgets Advanced Tabs à une page que nécessaire Pro ajoute le préréglage du contenu tabulaire et les sections, widgets ou modèles de page enregistrés comme contenu d'onglets.
Comment fonctionne le préréglage « Frontière active gauche » ?
Le préréglage Left Active Border met généralement en évidence l'onglet actif avec une bordure ou un fond coloré sur le côté gauche C'est un look moderne et épuré qui fonctionne bien pour les onglets verticaux ou même horizontaux si vous voulez un indicateur distinctif.
Les onglets se transforment-ils en accordéon sur mobile ?
Non. La bande d'onglets reste une bande d'onglets et s'enroule sur des écrans étroits. Le propre widget Tabs d'Elementor passe à un accordéon, de sorte que l'un d'entre eux est le meilleur choix si un accordéon mobile est l'exigence.
Dois-je utiliser des onglets ou un accordéon ?
Onglets lorsque les panneaux sont des alternatives qu'un visiteur choisit entre, telles que la spécification, la livraison et la garantie. Un accordéon lorsque les éléments sont une liste que les gens lisent, comme une FAQ, car plusieurs peuvent être ouverts à la fois et s'empilent naturellement sur un téléphone.
Widgets et extensions d'éléments tendance
Construisez des sites Web sophistiqués en moins de temps.
Glassmorphisme
Extras de conteneurs
Modèles
![Modules principaux Extension de duplicateur de messages/pages pour le lien de ligne Elementor : MA Duplicator dans la liste des pages WordPress créant une ébauche de page de destination - [Dupliqué n° 128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicateur de messages/pages
