Création de Sections Stylisées dans Webflow

Construction de la Section Carrières
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

Les objectifs de cette vidéo incluent :

- Savoir copier et modifier des sections dans Webflow.

- Comprendre l'utilisation des classes utilitaires pour ajuster les marges et paddings.

- Apprendre à insérer et styliser des citations et des images.

Découvrez comment copier et modifier des sections dans Webflow pour créer une section de recrutement avec citation et image.

Dans cette leçon, nous allons créer une nouvelle section dans Webflow en utilisant la méthode Client First. Nous allons copier une section existante de type "Safety" et l'adapter pour une section "Carrières". Nous ajouterons une citation accompagnée d'une image, en prenant soin de configurer l'affichage en utilisant des propriétés CSS telles que Flex et Grid.

Nous commencerons par copier la section "Safety" pour gagner du temps et ajusterons les marges avec des classes utilitaires comme Margin Top et Margin Huge. Ensuite, nous remplacerons le contenu textuel et les images pour correspondre à notre nouvelle section.

La citation sera stylisée avec des éléments typographiques de Webflow comme le Block Quotes. Nous ajusterons le design en jouant avec les propriétés CSS, notamment les paddings et les marges pour obtenir l'espacement désiré. Enfin, les images seront configurées pour s'ajuster correctement, en utilisant le mode cover pour garantir une bonne mise en page quel que soit le format d'image.

Voir plus
Questions réponses
Comment copier une section existante dans Webflow ?
Pour copier une section existante, sélectionnez la section, puis utilisez les commandes de copie et de coller de Webflow, ou faites un clic droit et choisissez les options correspondantes.
Quelle classe utilitaire est utilisée pour ajouter une marge au-dessus d'une section ?
La classe utilitaire Margin Top est utilisée pour ajouter une marge au-dessus d'une section.
Comment configurer l'affichage Flex pour les éléments de la section ?
Pour configurer l'affichage Flex, sélectionnez la section, puis appliquez les propriétés CSS de Flexbox, telles que 'display: flex', 'justify-content: space-between', et 'align-items: top'.