---
url: "/fr/weblify/build/site-builder.md"
description: "Créez des pages Weblify à partir de modèles, de sections, d’éléments et de briques de mise en page responsive."
---

# Créer un site web dans Figma

> Créez des pages Weblify à partir de modèles, de sections, d’éléments et de briques de mise en page responsive.

Les onglets **Add**, **Navigator** et **Style** de Weblify créent et modifient des pages de site web sous forme de calques Figma modifiables. Les calques générés conservent les métadonnées Weblify pour que le plugin puisse les prévisualiser, les auditer et les exporter en site web statique.

## Créer une page {#start-a-page}

1. Ouvrez l’onglet **Navigator**, saisissez un nom dans **New page name** et sélectionnez **Add page**. Vous pouvez aussi ouvrir l’onglet **Add**, choisir **Templates** et sélectionner un modèle pour l’ajouter en tant que nouvelle page portant le nom du modèle.
2. Sélectionnez la page générée sur le canevas Figma, ou dans **Navigator**, avant d’ajouter du contenu.

Si rien n’est sélectionné, Weblify utilise la première page Weblify qu’il trouve ou crée une page nommée **Home**. La ligne sous les filtres de l’onglet **Add** indique où le nouveau contenu sera inséré.

## Ajouter des sections et des éléments {#add-sections-and-elements}

L’onglet **Add** est une bibliothèque unique dans laquelle vous pouvez faire des recherches. Utilisez les filtres **Templates**, **Sections**, **Elements** et **Layouts**, ou recherchez par nom. Utilisez **Sections** pour des zones de page complètes : navigation, hero, contenu, tarifs, formulaires, pieds de page, etc. Utilisez **Elements** pour des composants individuels. Sélectionnez un élément pour l’insérer.

Sélectionnez une page, une section ou une colonne Weblify avant d’insérer un élément. Weblify dispose ainsi d’un parent prévisible et la structure exportée reste intacte.

Ajoutez une étoile à un élément pour l’ajouter aux **Favourites**. Pour réutiliser l’une de vos propres sections, ouvrez son menu **⋯** dans **Navigator** et choisissez **Save to My sections** ; elle apparaît ensuite sous **My sections** dans l’onglet **Add**.

## Modifier la structure {#edit-the-structure}

L’onglet **Navigator** liste vos pages et les sections de la page actuelle. Vous pouvez :

- Ajouter des pages, faire glisser les pages et les sections pour les réordonner, et utiliser le menu **⋯** pour les renommer, les dupliquer, les masquer, les supprimer ou définir la page d’accueil.
- Sélectionner le bouton **⚙** à côté d’une page pour modifier son URL et ses métadonnées pour les moteurs de recherche, puis sélectionner **Save page**.
- Utiliser le menu **⋯** d’une section pour l’afficher sur toutes les pages en tant qu’en-tête ou pied de page.

Les métadonnées de page comprennent le titre, la description, l’URL canonique, les champs de partage sur les réseaux sociaux, le favicon, le type de carte Twitter et le réglage pour les moteurs de recherche.

Pour configurer l’adaptation d’une section, d’une ligne, d’une grille ou d’une colonne sélectionnée sur tablette et sur téléphone, ouvrez l’onglet **Style** et dépliez **Responsive**.

## Appliquer des styles et des images {#apply-styles-and-images}

Ouvrez l’onglet **Style** et dépliez **Brand styles** pour vérifier les thèmes, les couleurs, la typographie et l’arrondi des angles utilisés par le contenu généré. Dépliez **Images** pour lister les images de substitution et les remplacer par de vraies URL d’images avant l’export.

Ouvrez l’onglet **Preview** pour vérifier le site web actuel sans quitter le plugin.