Guide de structure des sections
Dans nos projets Webflow, nous suivons une structure cohérente pour organiser les éléments. L'ordre que nous utilisons est le suivant :
- Section: Chaque page commence par une section, qui sert de conteneur pour tout le contenu de cette partie de la page. Les sections aident à diviser la page en zones distinctes, facilitant la gestion et le style des différentes parties de la mise en page.
- Marge intérieure: Nous appliquons une marge intérieure aux sections pour garantir un espace suffisant entre le contenu et les bords de la section. Cette marge améliore l'espacement visuel et la clarté du design.
- Conteneur: À l'intérieur de la section, nous ajoutons un conteneur pour centrer le contenu et maintenir un alignement cohérent sur tous les formats d'écran. Les conteneurs assurent que le contenu reste dans une largeur spécifiée, offrant un aspect propre et professionnel.
- Wrapper: Les wrappers sont utilisés dans les conteneurs pour regrouper les éléments liés et gérer leur mise en page. Ils aident à organiser le contenu et peuvent être stylisés individuellement pour une plus grande flexibilité et un meilleur contrôle du design.
En suivant cette structure, nous créons des mises en page Webflow bien organisées, réactives et facilement gérables.
Aperçu : Premiers pas avec votre modèle
Commencez par dupliquer le modèle et explorer le Designer Webflow. Observez comment les pages sont structurées et comment les éléments fonctionnent ensemble. Le modèle est conçu pour offrir de la flexibilité à différents projets, vous permettant d'ajuster facilement le contenu et le design.
- Explorez le Navigateur: Utilisez le Navigateur pour comprendre la hiérarchie des sections, conteneurs et composants.
- Personnalisation des styles: Rendez-vous dans le Panneau de style pour ajuster les polices, les couleurs et l'espacement.
- Examinez les composants: Familiarisez-vous avec chaque composant et la façon dont il peut être réutilisé sur différentes pages.
Personnalisation des composants
Chaque composant de ce modèle a un but spécifique et peut être entièrement personnalisé selon vos besoins.
La Barre de navigation est responsive et peut être facilement mise à jour pour refléter votre image de marque. Pour la modifier :
- Allez dans le panneau des symboles et double-cliquez sur le composant de navigation.
- Personnalisez le logo, les liens et les états de survol via le panneau de style.
Chaque Section sert de conteneur de contenu qui peut être stylisé ou dupliqué sur les pages.
- Pour modifier : Ajustez la marge intérieure, la couleur de fond et la typographie.
- Ajoutez de nouvelles sections en dupliquant les existantes pour maintenir la cohérence du design.
Les cartes sont utilisées pour afficher des extraits d'informations, souvent pour des articles de blog, des caractéristiques de produits ou des membres d'équipe.
- Personnalisez l'image, le titre et la description dans la collection CMS ou directement dans le Designer.
- Ajustez l'espacement et l'alignement selon les besoins.
Guide de style et variantes
Le modèle inclut un Guide de style complet, vous donnant accès à tous les éléments prédéfinis tels que les titres, les boutons et les champs de formulaire. Suivez ces étapes pour maintenir la cohérence :
- Rendez-vous sur la page du Guide de style pour visualiser et modifier les styles globaux.
- Apportez des modifications aux couleurs, à la typographie et à l'espacement, qui s'appliqueront automatiquement à l'ensemble du modèle.
- Utilisez les Variantes pour les boutons et les champs de texte qui ont des états prédéfinis (par exemple, survol, pressé) et ajustez-les si nécessaire.
Ce modèle inclut quelques interactions avancées qui donnent vie à votre site.
Certaines sections ont des animations déclenchées au défilement qui font apparaître ou bouger des éléments lorsque vous faites défiler la page.
- Pour modifier: Sélectionnez la section avec l'animation et allez dans le panneau Interactions pour visualiser ou modifier les effets de défilement.
Les boutons et les cartes présentent des états de survol qui changent leur apparence lorsqu'un utilisateur les survole avec la souris.
- Pour modifier: Sélectionnez le composant et, dans le panneau Style, basculez vers l'état de survol pour personnaliser les couleurs, les bordures ou les effets d'ombre.
Modification des composants cachés
Certains composants peuvent être cachés par défaut pour maintenir le design ou simplifier l'espace de travail.
Accès aux éléments cachés
- Les éléments cachés peuvent être trouvés dans le Navigateur. Il suffit de les rendre visibles en basculant la visibilité dans le panneau Style.
Composants cachés dans le CMS
- Certains éléments dynamiques peuvent ne pas être visibles dans le Designer. Vous pouvez les modifier en naviguant vers la Collection CMS et en mettant à jour le contenu directement.
