Instructions

Introduction:

Voici une version réécrite de votre texte : « Comme vous le savez peut-être déjà, Castifye est conçu avec Webflow, une puissante plateforme sans code pour la création de sites web. Si vous connaissez Webflow, vous trouverez la modification de ce modèle très simple. Cette documentation présente les principales directives d'utilisation de Webflow, que nous jugeons importantes à partager. » Si vous débutez avec Webflow. En revanche, si c'est votre première utilisation de Webflow, vous pouvez consulter Webflow University et son cours intensif 101.

‍

Guide de style

‍

Dans un modèle Webflow, un guide de style est un élément essentiel qui définit les normes visuelles et de conception de l'ensemble du site web. Il sert de point de référence pour assurer la cohérence entre toutes les pages et tous les éléments. Voici ce qu'un guide de style comprend généralement : Palette de couleurs : couleurs primaires, secondaires et d'accentuation utilisées sur l'ensemble du site web. Typographie : polices, tailles et styles des titres, du corps du texte et des autres éléments textuels. Espacement et mise en page : directives pour les marges, le remplissage et la structure générale de la mise en page. Composants de l'interface utilisateur : conception standardisée des boutons, formulaires, éléments de navigation et autres composants réutilisables. Directives relatives à l'imagerie : règles d'utilisation des images, des icônes et autres éléments visuels. Le guide de style garantit que toute personne travaillant sur le site web peut facilement conserver une apparence cohérente, même lors des mises à jour ou de l'ajout de nouvelles pages. Il est particulièrement utile lorsque plusieurs membres de l'équipe collaborent sur un même projet.

‍

Comment modifier le guide de style

Pour modifier le Guide de style dans Webflow, procédez comme suit : Accéder au Guide de style : Dans votre projet Webflow, recherchez la page ou la section du Guide de style. Elle se trouve généralement dans le panneau Pages ou sous forme de symbole dédié dans le navigateur. Utiliser le Gestionnaire de styles : Ouvrez le panneau Gestionnaire de styles (généralement à droite du concepteur Webflow). C'est ici que vous pouvez modifier les styles globaux qui affectent l'ensemble du site. Modifier les nuanciers : Dans le Gestionnaire de styles, recherchez la section Couleurs. Ici, vous pouvez modifier les échantillons de couleurs existants ou en ajouter de nouveaux pour mettre à jour votre palette de couleurs. Mettre à jour la typographie : dans la section Typographie du Gestionnaire de styles, vous pouvez modifier les styles, tailles et épaisseurs de police de différents éléments de texte, tels que les titres et les paragraphes. Modifier les composants de l'interface utilisateur : sélectionnez des composants d'interface utilisateur individuels (comme des boutons ou des formulaires) sur la page Guide de style et utilisez le panneau Style pour ajuster leurs propriétés. Ajuster l'espacement et la mise en page : utilisez le panneau Style pour modifier les propriétés d'espacement (marge, remplissage) de divers éléments afin de garantir une mise en page cohérente sur l'ensemble du site. Enregistrer et publier : après avoir apporté des modifications, n'oubliez pas d'enregistrer votre travail et de publier le site pour appliquer les mises à jour à toutes les pages. N'oubliez pas que les modifications apportées au Guide de style affecteront toutes les instances où ces styles sont utilisés sur votre site web. Prévisualisez toujours vos modifications pour vous assurer qu'elles s'affichent correctement sur toutes les pages avant de les publier.

‍

Nommage des classes et classes combinées dans Webflow

In Webflow, class naming and combo classes are essential concepts for organizing and styling your website efficiently. Here's an explanation of these concepts and the conventions mentioned:

Class Naming

Class naming in Webflow refers to how you label the CSS classes for your elements. Consistent class naming helps maintain a clean, organized, and easily manageable codebase. The template you're working with suggests using one of the following naming conventions consistently:

• Default: Uses spaces between words, capitalizing each word (e.g., "Hero Container Element")
• Snake Case: Uses underscores between lowercase words (e.g., "hero_container_element")
• Pascal Case: Capitalizes the first letter of each word with no spaces (e.g., "HeroContainerElement")
• Camel Case: Capitalizes the first letter of each word except the first, with no spaces (e.g., "heroContainerElement")
• Kebab Case: Uses hyphens between lowercase words (e.g., "hero-container-element")
• BEM (Block Element Modifier): A naming methodology that uses double underscores for elements and double hyphens for modifiers (e.g., "block__element--modifier")

Choosing one convention and sticking to it throughout your project ensures consistency and makes your code more readable and maintainable.

Combo Classes

Combo classes in Webflow are a powerful feature that allows you to combine multiple classes on a single element. This approach enables you to create reusable styles and apply them flexibly across your site. Here's how combo classes work:

• You can apply multiple classes to an element by creating a new class.
• Each class in the combo can define different aspects of the element's style.
• Combo classes allow for more modular and reusable CSS, reducing redundancy in your stylesheets.

For example, using the BEM naming convention, you might have a combo class like this:

‍button button__primary--large

This combo class applies the base button styles, styles specific to primary buttons, and styles for large-sized buttons.

By using consistent class naming conventions and leveraging combo classes, you can create a more organized, flexible, and maintainable design system in your Webflow project.

Webflow Components and Symbols

In Webflow, components (also known as symbols) are reusable design elements that can be created once and used multiple times across your website. They are powerful tools for maintaining consistency and efficiency in your web design process. Here's an overview of Webflow components/symbols:

What are Webflow Components/Symbols?

Components or symbols in Webflow are design elements that you create once and can reuse across your website. They can be anything from simple buttons to complex layouts like headers or footers.

Key Features of Components/Symbols:

• Reusability: Once created, a component can be used multiple times across different pages of your website.
• Consistency: Changes made to the original component are automatically applied to all instances, ensuring design consistency.
• Customization: Individual instances of a component can be customized without affecting the original or other instances.
• Nested Components: You can create components within components for more complex, modular designs.

How to Use Components/Symbols:

1. Create a Component: Select the elements you want to turn into a component and click the "Create Component" button in the top right corner of the Designer.
2. Use a Component: Drag and drop the component from the Symbols panel onto your canvas where you want to use it.
3. Edit a Component: Double-click on a component instance to enter isolation mode, where you can make changes to the original component.
4. Customize Instances: Select a component instance and use the Properties panel to make instance-specific changes.

Using components effectively can significantly streamline your workflow, reduce redundancy in your design, and make site-wide updates much easier to manage.

Editing and Adding Interactions in Webflow

Interactions in Webflow allow you to create dynamic and engaging user experiences. Here's how you can edit existing interactions or add new ones:

Editing Existing Interactions:

1. Select the element: Click on the element that has the interaction you want to edit.
2. Open the Interactions panel: Click on the "Interactions" tab in the right sidebar.
3. Modify the interaction: In the Interactions panel, you'll see the existing interactions. Click on the interaction you want to edit.
4. Adjust settings: Change the trigger, animation, or timing as needed.
5. Save changes: Your modifications will automatically save.

Adding New Interactions:

1. Select an element: Click on the element you want to add an interaction to.
2. Open the Interactions panel: Click on the "Interactions" tab in the right sidebar.
3. Add new interaction: Click the "+" button to add a new interaction.
4. Choose a trigger: Select when you want the interaction to occur (e.g., on click, on hover).
5. Set the animation: Choose the type of animation you want to apply.
6. Adjust settings: Fine-tune the animation settings, such as duration, delay, and easing.
7. Preview and save: Use the preview mode to test your interaction, then save your changes.

Remember to test your interactions thoroughly across different devices and browsers to ensure they work as intended.

Creating and Editing a CMS Collection in Webflow

CMS (Content Management System) collections in Webflow allow you to create dynamic content that can be easily updated and managed. Here's a step-by-step guide on how to create and edit a CMS collection:

Creating a CMS Collection:

1. Access the CMS panel: Click on the "CMS" tab in the left sidebar of the Webflow Designer.
2. Create a new collection: Click the "+" button next to "Collections" to create a new collection.
3. Name your collection: Give your collection a descriptive name (e.g., "Blog Posts", "Team Members").
4. Add fields: Click "Add New Field" to add the necessary fields for your collection (e.g., Title, Content, Image).
5. Configure field settings: For each field, set the field type, name, and any additional options.
6. Save the collection: Click "Create Collection" to finalize and save your new CMS collection.

Editing a CMS Collection:

1. Select the collection: In the CMS panel, click on the collection you want to edit.
2. Add or edit items: Click "Add New Item" to create new entries, or click on existing items to edit them.
3. Modify collection structure: To change the collection's fields, click on "Collection Settings" at the top of the CMS panel.
4. Add or remove fields: Use the "Add New Field" button to add fields, or click the trash icon next to existing fields to remove them.
5. Adjust field settings: Click on a field to modify its settings, such as changing the field type or making it required.
6. Save changes: Any modifications to the collection structure or individual items are automatically saved.

Remember to update your website's design to reflect any changes made to your CMS collections, especially if you've added or removed fields.

Using CMS collections effectively can greatly enhance your website's flexibility and ease of content management.