Apprendre à construire une page dans Webflow : les Elements

Aujourd’hui, nous allons apprendre à construire une page dans Webflow grâce aux éléments. Webflow propose une solution simple de drag and drop (glisser-déposer) pour pouvoir créer des pages personnalisées. Il vous est possible de disposer différents éléments dans votre page.

Petit Tips : Ajouter rapidement un élément grâce au raccourci clavier Ctrl + E ou Cmd + E.

1. Les éléments Layout

Les éléments de la section “Layout” permettent de structure les pages de votre site Webflow.

Section

Cet élément permet de séparer des blocs de contenu distincts et de diviser votre page en plusieurs sections significatives. Une section a une largeur qui s’étend sur toute la page (100%).

Container

L'élément Container s’associe avec l’élément section. Il permet de gérer le contenu de manière ordonné et centré.

Grid

L’élément Grid permet de placer du contenu dans celui-ci selon une disposition de grille (avec des colonnes et des lignes). C’est un élément pratique lorsqu’il s’agit d’avoir un design responsif.

Columns

Tout comme son nom l’indique, l’élément Columns permet de disposer le contenu à l’intérieur de celui-ci sous forme de colonne. Vous pouvez personnaliser cet élément en choisissant le nombre de colonnes ainsi que leurs largeurs.

2. Les éléments Basic

Les éléments de la section Basic sont en fait les éléments les plus utilisés (basiques) pour construire sa page web.

Div Block

Le Div Block est un élément très polyvalent. En effet, tous les autres types de blocs sont des Div Block avec des propriétés spéciales. Les Div Blocks peuvent être utilisés à votre convenance, mais ils sont surtout utilisés pour regrouper différents éléments.

List

L’élément List permet de créer des listes ordonnées (numérotées) ou non ordonnées (à puces) d’éléments.

List item

List Item est un élément qui ne peut être ajouté qu'à un élément "List” et qui permet d’afficher du contenu sous forme de liste.

Link block

L’élément Link Block est un Div Block qui a comme spécialité de transformer les éléments à l’intérieur en lien.

Button

L’élément Button est tout simplement un bouton qui renvoie à des pages, sections, formulaires etc. Il est indispensable pour ses CTA (Call To Action).

3. Les éléments Typography

Les éléments typographie permettent d’ajouter du contenu texte à votre page.

Heading

Un Heading est un élément texte qui renvoie à un titre. Les Headings permettent de décrire le sujet d’une section (à la manière d’une dissertation). Il existe plusieurs types de Headings (H1, H2, H3, ..., H6). Les headings ont un ordre d’importance selon leurs types H1 > H2 > ... > H6. Ils sont importants en SEO car ils permettent de donner des indications aux robots d’indexation. Ainsi, il est important de ne pas sauter de Heading sur une page, de n’avoir qu’un seul H1 et de les optimiser avec des mots-clés.

Paragraph

L’élément Paragraph permet d’ajouter du contenu textuel sur vos pages.

Text Block

L’élément Text Block permet d’ajouter n’importe quel type de texte sur sa page. C’est un peu le Div Block pour les éléments de typographie.

Text Link

L’élément Text Link permet d’insérer un contenu textuel qui renvoie vers d’autres pages ou sections.

Block quote

L’élément Block Quote permet d’ajouter un contenu textuel sous forme de citation.

Rich Text Element

L'élément rich text vous permet de créer et de mettre en forme des titres, des paragraphes, des citations, des images et des vidéos en un seul endroit, au lieu de devoir les ajouter et les mettre en forme individuellement.

Comment utiliser les rich text dans webflow !

4. Les éléments CMS

Les éléments CMS sont des éléments qui sont liés à la partie dynamique de Webflow.

Collection List

Une liste de collection est un élément de Webflow qui vous permet d'afficher le contenu d'une collection CMS sous forme de liste.

5. Les éléments E-commerce

Ces éléments sont disponibles lorsqu’on a opté pour un plan e-commerce et sont donc utilisés dans le cadre de la gestion d’une boutique en ligne.

Cart

Cart est un élément qui permet d’ajouter un panier à votre site e-commerce.

Add to cart

Add to cart est un élément de type bouton qui permet d’ajouter des produits à votre panier.

Web payements

Cet élément s’insère dans la page de paiement (checkout page) et permet d’accepter les paiements par Apple Pay (depuis Safari) ou par un autre navigateur (depuis Chrome par exemple avec Google Pay).

Paypal

L’élément Paypal s’insère dans la page de paiement (checkout page) et permet d’accepter les paiements Paypal.

6. Les éléments Media

Les éléments Media permettent d’insérer des fichiers de types images ou vidéos dans son projet Webflow.

Image

L’élément image permet d’insérer des fichiers graphiques sur vos pages.

Video

L’élément vidéo permet d’embed des vidéos YouTube ou encore Vimeo sur votre site.

YouTube

L’élément YouTube est un élément qui permet d’insérer une vidéo YouTube sur ses pages avec des options supplémentaires (Start At, Playback, etc.).

Lottie Animation

L’élément Lottie Animation permet d’insérer des animations (de type After Effects) sur ses pages et de contrôler leur lecture.

7. Les éléments Forms

Les éléments Forms de Webflow renvoient à des éléments pour construire un formulaire.

Form block

L’élément Form Block désigne un ensemble d'éléments qui constituent un formulaire de base.

Field label

Un Field label est un élément de formulaire qui permet de donner des indications aux internautes sur le contenu à saisir dans un champ.

Input field

Input field est un élément de formulaire qui permet de récupérer des données des utilisateurs sur une ligne.

File Upload

L’élément File Upload permet aux internautes de joindre un fichier à leur soumission de formulaire.

Text Area

Text Area est un élement de formulaire qui permet aux visiteurs de saisir des données sur plusieurs lignes (à l’inverse de Input Field).

Checkbox

Checkbox est un élément de formulaire qui permet aux personnes de sélectionner une ou plusieurs options.

Radio Button

L’élément Radio Button permet de sélectionner un choix parmi plusieurs autres dans votre formulaire.

Select Field

Select Field est un élément de formulaire qui vous permet de faire une sélection dans une liste déroulante.

Recaptcha

L’élément Recaptcha permet d’insérer dans son formulaire le service de Google du même nom pour éviter les spams.

Form button

Form button élément de formulaire qui permet aux visiteurs du site Web de soumettre les données qu’ils ont remplies.

8. Les éléments Components

Les éléments Components sont des éléments de flux web prédéfinis  tels que des sliders des onglets et des lightboxes.

Background Video

L’élément Background Video permet d’insérer une vidéo en arrière-plan de votre page.

Dropdown

Dropdown est un élément Webflow qui vous permet d'afficher un menu qui se déploie pour afficher une liste d'éléments lorsqu'on clique dessus.

Embed component

Embed compenent est un élément Webflow que vous pouvez utiliser pour intégrer du HTML afin d'afficher du contenu externe, des plugins ou des applications.

Lightbox

Lightbox est un élément Webflow qui ouvre une vue plein écran des images ou des vidéos lorsqu'on clique dessus.

Navbar

Navbar est un élément Webflow qui crée automatiquement un menu de navigation (responsif) pour les ordinateurs et les mobiles.

Search

Search est un élément Webflow qui permet d’insérer un système de recherche sur son site web (une sorte de mini moteur de recherche pour son site internet).

Slider

Slider est un élément Webflow qui affiche des diapositives défilant soit lors d’une interaction ou automatiquement selon un minuteur au préalable paramétré.

Tabs

Tabs est un élément Webflow qui affiche un volet de contenu comprenant un menu d'onglet.  

Google Map

Google Map est un élément Webflow qui intègre une carte Google Map interactive dans votre site.

Facebook button

Facebook button est un élément Webflow qui incorpore un bouton Like de Facebook dans votre site.

Twitter Button

Twitter button est un élément Webflow qui intègre un bouton de suivi ou de partage Twitter dans votre site.  

9. Les Symboles (Symbols) dans Webflow

Si vous souhaitez simplement et facilement dupliquer des éléments d’une page à l’autre, il est possible de le faire dans Webflow. En effet, grâce aux symboles vous pouvez dupliquer un groupe d’élément d’une page à une autre facilement. Le gros point positif est que si une modification est faite sur le symbole d’une page, la modification se fera automatiquement sur les autres pages contenant le même symbole.

Pour plus d’explication, voici une vidéo YouTube : Comment créer et utiliser un “symbol” dans Webflow | Webflow Tutoriel

Bonus : Element breadcrumbs

Voici un petit bonus pour finir cet article sur la construction de pages Webflow grâce aux éléments. Nous parlons ici de l’Element Breadcrumbs (Fil d’Ariane) du Designer. C’est une aide à la navigation qui s'affiche en bas du Webflow Designer pour vous aider à suivre l'élément avec lequel vous interagissez par rapport à sa hiérarchie. Très utile puisqu’on imbrique souvent différents éléments et grâce à cette fonctionnalité, on peut sélectionner facilement l’élément que l’on souhaite.

Pour en apprendre plus sur Webflow, vous pouvez consulter notre article pour apprendre à designer dans Webflow grâce à l’onglet Style ou bien retrouver notre chaine YouTube.