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

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

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

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

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.