4

Découvrir la Barre d'outils de l'éditeur Webflow

Chapitre 4
4min
Frédéric Lemercier

01. Introduction

Maintenant que vous avez créé un compte pour votre éditeur de site et que vous savez y retourner à n'importe quel moment, découvrons ensemble l'interface qui le compose et attardons nous sur la barre d'outils !

02. Quelles sont les icônes qui la compose ?

La barre d'outils de l'éditeur comporte les onglets et icônes suivants:

  • Menu | Utilisez ce menu pour accéder au tableau de bord ou aux paramètres de votre projet. Ce bouton comporte le logo Webflow.
  • Pages | Ouvre le panneau Pages, qui répertorie les pages "statiques" et les pages "collection" (dynamiques) de votre site (détaillée plus bas). De là, vous pouvez rechercher une page, cliquer pour afficher la page en direct et gérer les paramètres de n'importe quelle page.
  • Orders (uniquement pour les site E-commerce) | Ouvre le panneau des commandes effectuées sur votre site par vos clients, ainsi que leur état.
  • Ecommerce (uniquement pour les site E-commerce) | Ouvre le panneau pour contrôler vos paramètres E-commerce (tels que vos catégories de produits, vos produits, vos commandes, vos réductions, stocks, etc.)
  • Collections | Ouvre le panneau "Collections", qui répertorie toutes vos collections. Cliquer sur une collection ouvre un nouvel onglet dans la barre d’outils, qui ouvre la liste du panneau des éléments de la collection de tous les éléments de cette collection. Ici, vous pouvez modifier n'importe quel élément ou en créer de nouveaux.
  • Formulaires | Ouvre le panneau "Formulaires" où vous pouvez voir et télécharger les abonnements de formulaires effectués sur le site.
  • Paramètres du compte (icône) | Ouvre le panneau des paramètres du compte dans lequel vous pouvez modifier les informations de votre compte et télécharger une image de profil.
  • Aide et support (icône) | Ouvre le panneau "Aide et support", où vous pouvez trouver des réponses à quelques questions courantes sur l'utilisation de l'éditeur.
  • Déconnexion (icône) | Vous déconnecte de l'éditeur après confirmation.
  • Retour au site en direct (bouton) | Passe du mode éditeur au mode "direct", ce qui vous permet de visualiser votre site tel que les visiteurs le verront.
  • Sauvegarde | Toutes les modifications sont enregistrées automatiquement dans l'éditeur. L'état Sauvegarde ... et Enregistré en bas à gauche le montre.
  • Changelog | Cela montre le nombre de modifications non publiées à côté du bouton de publication en bas à gauche. Cliquez sur le journal des modifications pour afficher une liste d'éléments et de pages avec des modifications non publiées, et vous pouvez voir quel collaborateur les a apportées.
  • Publier (bouton) | Vous permet de publier toutes les modifications que vous apportez dans l'éditeur.

03. Onglet "Pages"

Dans cet onglet, vous pouvez donc voir les différentes pages sur votre site web. Elles seront probablement divisées en deux sections (peut-être plus) :

  • Les "Static pages" | Ce sont les pages conçues pour vous en dehors des collections. Elles peuvent être par exemple : Votre page d'accueil, la page "À propos", "Services", "Contact", etc.
  • Les "Collection pages" | (peut être appelées autrement selon le nom de vos collections) Ce sont les pages générées par nos soins et appelées "Collections", qui peuvent être par exemple : les pages d'articles de blogs, de documentation, etc., en bref, il s'agit de pages qui sont toutes construites selon la même structure (par exemple, la page que vous êtes en train de lire est une page de Collection !)
  • Les "Category pages" (uniquement pour les site E-commerce) | Recense toutes vos catégories de produits.
  • Les "Product pages" (uniquement pour les site E-commerce) | Les pages individuelles de chaque produits proposés.

04. Ce que vous pouvez faire sur l'onglet "Pages"

Cet onglet vous permet de :

  • Rechercher une page : Tapez le nom de la page que vous recherchez dans la barre de recherche en haut à droite.
  • Aller sur une certaine page : Il vous suffit de cliquer dessus (rien d'extraordinaire...)
  • Gérer les paramètres de chaque page : Quand vous passez votre souris sur une page dans la liste, vous allez voir un boutons "settings" apparaitre à droite. Ici vous pourrez gérer des paramètres vitaux tels que le SEO (meta title et description, Open graph title, description et image), que nous étudierons en détails plus tard.

Besoin d'aide ? Demandez-nous !

Nous contacter

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.