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

Projection du logo Digidop sur la façade d'un bâtiment dans une grande ville la nuit, symbolisant la visibilité de la marque.
Storytelling
Digidop

Était-ce une bonne idée (ou pas) d’appeler notre entreprise Digidop ?

Était-ce une bonne idée (ou pas) d’appeler notre entreprise Digidop ?
Illustration conceptuelle d’un utilisateur face à deux versions d’un site web : une interface traditionnelle à gauche et une interface futuriste axée données à droite. Métaphore du web d’aujourd’hui et du web de demain.
Documentation
IA

Quand les LLMs redéfinissent le rôle du site de marque

Quand les LLMs redéfinissent le rôle du site de marque
Photo de groupe sur le rooftop du Webflow Momentum Tour Paris avec Hélène, Directrice EMEA chez Webflow, et Thomas et Florian, cofondateurs de Digidop, en compagnie d’autres participants, avec la tour Eiffel en arrière-plan.
Evénements
Webflow

Webflow Momentum Tour Paris : Talks, démo et networking avec Webflow & Digidop

Webflow Momentum Tour Paris : Talks, démo et networking avec Webflow & Digidop

Transformez votre site web en un moteur de croissance.

Nous contacter