Principaux points à retenir
- Les onglets verticaux placent les titres dans une colonne à gauche ou à droite, avec le panneau à côté d'eux. Ils conviennent aux titres longs et à six sections ou plus, où une bande horizontale s'enroulerait.
- Le propre widget Tabs d'Elementor le fait avec le contrôle de direction défini sur Démarrer ou Fin Aucun CSS nécessaire.
- Le Widget Master Addons Tabs a un préréglage de style Vertical Tabs, qui arrive stylé plutôt que simple.
- En dessous d'environ 768 px il n'y a pas assez de largeur pour une colonne latérale, donc les deux routes s'empilent Seul le widget de coeur se transforme en accordéon.
- Choisissez le noyau si les widgets entrent dans les panneaux et l'addon si la colonne d'onglets elle-même a besoin d'icônes ou d'un look fini.
Les onglets horizontaux se cassent une fois que les titres deviennent longs ou nombreux. Six titres sur une colonne de 1 200 px soit enveloppent deux lignes, soit réduisent le texte jusqu'à ce que personne ne les lise.
Les onglets verticaux tournent la bande sur le côté : une étroite colonne de titres avec le panneau actif à côté de lui Chaque titre obtient une ligne complète, donc “Shipping et returns” s'ajuste sans emballage Les deux façons de le construire suivent.
Table des matières
Quand la verticale bat l'horizontale
Vertical est la meilleure disposition lorsque l'un de ces éléments est vrai :
- Plus de cinq sections, où une bande s'enroule mais une colonne devient de plus en plus haute.
- Titres de plus de deux mots.“Garantie et réparations” a besoin d'une ligne complète.
- Panneaux de hauteurs très différentes, puisque la colonne titre reste posée pendant que le panneau change de taille.
- Contenu qui se lit comme un menu : sections de documentation, listes de services, FAQ groupées.
Restez horizontal pour trois ou quatre titres courts Une colonne latérale mange environ un quart de la largeur, et avec trois onglets que le commerce n'en vaut pas la peine.
Méthode 1 : Contrôle de direction de l'élémenteur
Le widget Tabs dans Elementor gère cela sans addon.
- Faites glisser le widget Onglets sur la page.
- Dans Mise en page, définissez Direction pour commencer pour les titres à gauche ou Fin pour les titres à droite.
- Définissez Aligner le titre pour contrôler si le texte du titre se trouve à gauche, au centre ou à droite dans la colonne.
- Construire chaque panneau à l'intérieur de son conteneur comme d'habitude.
Start met la colonne à gauche dans un langage de gauche à droite et bascule automatiquement de droite à gauche, c'est pourquoi les valeurs sont nommées Start et End au lieu de Gauche et Droite.
Le résultat est fonctionnel et non stylisé : titres de texte dans une colonne, le panneau à côté d'eux, et chaque bordure et couleur laissée pour l'onglet Style.
Méthode 2 : préréglage des onglets verticaux
Le widget Master Addons traite la mise en page comme un préréglage au lieu d'une direction, le style l'accompagne donc.
- Faites glisser le widget Onglets dans.
- Définissez le style préréglé sur les onglets verticaux.
- Ajoutez un élément répétiteur par section, chacun avec un titre d'onglet.
- Définissez le type d'icône sur l'icône ou l'image si les titres en ont besoin, puis choisissez l'icône.
- Écrivez le contenu du panneau et changez Définir par défaut l'onglet qui doit s'ouvrir en premier.
La colonne arrive avec son propre arrière-plan, espacement et état actif, donc un bloc utilisable prend une minute au lieu d'une session de style La limite est la même que celle que l'addon a toujours : les panneaux contiennent le contenu de l'éditeur, donc un formulaire ou une galerie à l'intérieur d'un onglet signifie un modèle enregistré sur Pro, ou le widget principal à la place.
Une variante plus silencieuse : frontière active gauche
Le troisième préréglage mérite d'être connu. Left Active Border conserve la colonne verticale mais abandonne le look encadré : les titres se trouvent sur le fond de la page et l'actif est marqué d'une barre colorée sur son bord gauche.
C'est celui qu'il faut atteindre sur les pages de style documentation, où une lourde colonne à onglets combat le corps du texte pour attirer l'attention.
Ce qui se passe sur un téléphone
Un écran 390 px n'a pas de place pour une colonne latérale plus un panneau, donc les deux itinéraires abandonnent la disposition verticale.
Le widget principal s'empile sur un accordéon vertical sous le point d'arrêt que vous choisissez dans Paramètres supplémentaires, chaque titre se trouvant directement au-dessus de son propre panneau Le widget addon empile les titres dans une colonne pleine largeur avec le panneau en dessous, ce qui fonctionne, bien qu'il ne s'agisse pas d'un accordéon : le panneau ouvert reste en dessous de toute la liste des titres.
Quoi qu'il en soit, vérifiez la vue du téléphone avant de publier La mise en page que vous avez conçue sur le bureau n'est pas la mise en page qu'un visiteur du téléphone voit.
Quelle méthode utiliser
| situation | Méthode |
|---|---|
| Formulaires, galeries ou tableaux de prix à l'intérieur des panneaux | Core Tabs, Direction définie sur Démarrer |
| Il faut être accordéon sur les téléphones | Onglets de base |
| Titres à droite au lieu de gauche | Onglets de base, direction réglée sur Fin |
| Icônes ou images sur les titres | Addon, onglets verticaux prédéfinis |
| Colonne stylisée sans travail d'onglet Style | Addon, onglets verticaux prédéfinis |
| Navette latérale de style documentation simple | Addon, préréglage de la bordure active gauche |
| Les panneaux s'allument en vol stationnaire | Addon, effet d'onglet réglé sur Hover |
Questions fréquemment posées
Elementor peut-il créer des onglets verticaux sans addon ?
Oui. Réglez le contrôle de direction du widget Tabs sur Démarrer ou Fin et les titres se déplacent dans une colonne latérale.
Pourquoi les valeurs de direction sont-elles appelées début et fin, pas gauche et droite ?
Ainsi la mise en page bascule correctement dans les langues de droite à gauche Démarrer est le côté sur lequel le texte commence.
Combien d'onglets fonctionnent dans une disposition verticale ?
Six à dix est confortable Passé que la colonne devient plus haute que le panneau à côté, ce qui semble étrange.
Les onglets verticaux restent-ils verticaux sur mobile ?
Non. Il n'y a pas assez de largeur, donc les deux itinéraires s'empilent Le widget principal devient un accordéon ; l'addon empile les titres au-dessus du panneau.
Puis-je mettre un formulaire dans un onglet vertical ?
Avec le widget de base, oui, car chaque panneau est un conteneur Avec l'addon, l'équivalent est de pointer le Type de contenu vers un modèle enregistré, qui est une option Pro.
Réflexions finales
Passer à la verticale est la façon dont vous résolvez un problème de largeur sans raccourcir les titres Le contrôle de direction d'Elementor le fait sans addon et garde les conteneurs dans les panneaux, ce qui compte si quelque chose d'interactif entre à l'intérieur Les préréglages d'addon comptent lorsque la colonne de titre doit avoir l'air terminée sans que vous la styliez. Les deux prennent à peu près le même temps à construire, donc ce qui vit dans le panneau le décide.
Lecture connexe
