CATALOGUE Code & Data Formation No Code Webflow - Créer la landing Page d'OpenAI

Création de Sections Stylisées dans Webflow

Retour à la formation
Chapitre 6 Leçon 9
Précédent
Suivant

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

Détails de la leçon

Description de la leçon

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.

Objectifs de cette leçon

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.

Prérequis pour cette leçon

Pour suivre cette vidéo, il est nécessaire de :

- Avoir des connaissances de base en Webflow.

- Savoir utiliser les CSS pour la mise en page.

Métiers concernés

Les professionnels qui pourraient bénéficier de cette vidéo incluent :

- Développeurs Front-end

- Designers Web

- Responsables Marketing Digital

Alternatives et ressources

Si vous ne pouvez pas utiliser Webflow, les alternatives incluent :

- WordPress avec des plugins de mise en page.

- Wix pour un design sans code.

- Squarespace pour des solutions similaires.

Questions & Réponses

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.
La classe utilitaire Margin Top est utilisée pour ajouter une marge au-dessus d'une 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'.