Tabs Webflow : Ordonner les onglets

Tutoriel
3 min
Publié le May 09, 2022
Dernière mise à jour le
Webflow tuto avec un fichier rangé
Résumez cet article avec une IA
Points clés de l'article

Le mode Designer de Webflow, vous permet d’insérer de multiples éléments dans votre projet. Ainsi, vous pouvez personnaliser votre site web comme bon vous semble. Aujourd’hui, nous allons nous intéresser à l’élément Tabs dans Webflow.

Dans notre tutoriel, nous allons vous expliquer comment réorganiser les différents onglets de vos Tabs dans Webflow. Eh oui, vous avez peut-être déjà développé un Tabs et vous souhaitez maintenant mettre de l’ordre dans les volets, mais vous ne savez pas comment faire. Pas de soucis, nous allons vous montrer comment le faire étape par étape.

Étape 1 : Sélectionnez le Tabs dans votre projet Webflow

La toute première étape de ce tutoriel va consister à vous rendre dans votre projet Webflow. Une fois arrivé à bon port, vous allez vous rendre dans la page, puis la section qui contient le Tabs à réordonner.

Dans la section, vous allez sélectionner l’entièreté de votre Tabs. Vous allez en fait sélectionner l’élément Tabs (le plus haut dans la hiérarchie de développement Webflow).

élément Tabs dans Webflow

Étape 2 : Renommez les onglets de votre Tabs

Une fois que vous avez sélectionné votre Tabs, vous allez pouvoir vous rendre dans les paramètres de l’élément. Pour ce faire, il vous suffit de cliquer sur l’icône en forme d’engrenage dans le panneau de droite du Designer.

Dans les paramètres de tous les éléments Tabs, nous retrouvons une section intitulée “Tabs Settings”. Dans cette section, nous voyons tous les onglets existants de notre Tabs. C’est d’ailleurs dans cette même section que l’on peut ajouter ou supprimer des volets (onglets).

Paramètres de l'élément Tabs de Webflow

Dans le but de nous y retrouver, nous allons donner un nom à chacun des onglets de notre Tabs. Ainsi, nous pourrons plus facilement réorganiser les volets à notre convenance. Pour ce faire, rien de bien compliquer, il vous suffit de cliquer sur la petite icône en forme de stylo à côté de celle pour supprimer un onglet. Nous vous conseillons de donner le même nom à votre onglet que celui que vous avez donné dans le menu de votre élément.

Renommer les onglets de l'élément Tabs de Webflow depuis les paramètres

Étape 3 : Changez l’ordre des onglets de votre Tabs

Lorsque vous avez renommé les onglets de votre élément Tabs, vous pouvez réorganiser l’ordre grâce en sélectionnant votre onglet et en le glissant grâce aux petits traits à gauche du cercle de sélectionnons de l’onglet actif.

Changer l'ordre des onglets de l'élément Tabs dans Webflow

Voilà, vous pouvez maintenant disposer les onglets de votre Tabs comme vous le souhaitez depuis Webflow. Vous pouvez d’ailleurs découvrir notre superbe Template Webflow Tabs pour embellir votre site web.

Par ailleurs, pour plus de tutoriel Webflow, nous vous invitons à souscrire à notre newsletter. Vous y découvrirez notamment comment créer l’animation de lecture de vidéos on hover dans Webflow.

Thibaut Legrand
Thibaut Legrand
Technical Solutions Architect & Webflow Expert

Articles qui devraient vous intéresser

 Collage de plusieurs sites Web de finance et de technologie financière présentant les tendances de design de 2026 : minimalisme, typographie épurée, photographie humaine et expérience utilisateur haut de gamme.
Documentation
Design

Tendances design 2026 pour les sites web de finance

Tendances design 2026 pour les sites web de finance
Interface de Webflow Optimize affichant le tableau de bord d’analyse et les opportunités d’optimisation des conversions, avec suivi du trafic et des sources organiques.
Documentation
Webflow

Optimize by Webflow, l'outil de CRO boosté à l'IA pour les équipes marketing

Optimize by Webflow, l'outil de CRO boosté à l'IA pour les équipes marketing
Graphique de performance boursière d'Apple Inc. montrant les variations de prix intrajournalières et les données de marché dans une interface sombre.
Documentation
Développement

Pourquoi et comment intégrer des graphiques, tableaux et données financières sur votre site web ?

Pourquoi et comment intégrer des graphiques, tableaux et données financières sur votre site web ?

Transformez votre site web en un moteur de croissance.

Nous contacter