CATALOGUE Code & Data Formation No Code Webflow - Créer la landing Page d'OpenAI Création de Sections en CSS avec Utility Classes

Création de Sections en CSS avec Utility Classes

Construction de la Section Informations Principales
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Webflow - Créer la landing Page d'OpenAI
Revoir le teaser Je m'abonne
Transcription
Cette leçon fait partie de la formation
49,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
Cette leçon fait partie de la formation
49,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Introduction aux Utility Classes

Objectifs

À la fin de cette vidéo, vous serez capable de :
- Créer et utiliser des Utility Classes pour des sections CSS réutilisables.
- Configurer une structure en grid pour un layout cohérent.
- Appliquer des paddings, marges et gaps de manière efficace.

Résumé

Apprenez à créer une section CSS cohérente et réutilisable en utilisant des Utility Classes et des structures en grid dans Webflow.

Description

Dans cette leçon, nous allons créer une section CSS structurée et réutilisable juste en dessous de la section héros existante. Nous allons utiliser des Utility Classes pour garantir la cohérence et permettre la réutilisation des éléments. La configuration passe par la création de classes de base telles que section_underscore_update, update_underscore_component, et update_underscore_information. En utilisant le model client-first, nous nous assurons que chaque section utilise des padding et margins cohérents. Nous verrons également comment configurer une grid à trois colonnes pour afficher les éléments de manière structurée.
Puis, nous ajouterons des éléments individuels avec des tags HTML spécifiques comme h2, link et text-link.

Ensuite, nous nous pencherons sur l'ajout des cartes en utilisant une utilitaire de classe 'title-wrapper'. Nous verrons comment utiliser des classes flex et grid pour obtenir une disposition idéale et ajuster les espacements avec des paddings et marges appropriés. Pour les images et les textes, nous aborderons l'application de paramètres de flexibilité verticale et de gaps afin de garantir une disposition homogène et esthétique. Enfin, nous vérifierons l'affichage global et ajusterons les derniers détails pour s'assurer d'un rendu visuel optimal.

Voir plus

Questions fréquentes

Pourquoi utiliser des Utility Classes pour créer des sections CSS?
Les Utility Classes permettent de créer des sections réutilisables avec des règles CSS prédéfinies, ce qui garantit une cohérence à travers le site et simplifie les mises à jour et modifications.
Comment configurer une grid avec trois colonnes dans Webflow?
Pour configurer une grid à trois colonnes dans Webflow, vous devez définir le display de votre conteneur sur grid, puis spécifier trois colonnes et une ligne dans les paramètres de grid.
Quels sont les avantages de l'utilisation du modèle client-first dans Webflow?
L'utilisation du modèle client-first dans Webflow assure que le site reste organisé avec des conventions de nommage claires et des classes réutilisables, facilitant ainsi la maintenance et les mises à jour.