Dans le cours : Webflow : Créer un site web sans aucune ligne de code

Mettre en page avec les paramètres de style dynamiques - Tutoriel Webflow

Dans le cours : Webflow : Créer un site web sans aucune ligne de code

Démarrer mon mois d’essai gratuit Acheter pour mon équipe

Mettre en page avec les paramètres de style dynamiques

“

Maintenant, ce que l'on va faire, c'est affiner le résultat, mais en harmonisant avec le reste. C'est-à-dire que là, vous voyez, que vous avez bien votre collection de portfolio, mais que les extrémités, les bords, dépassent, ne sont pas en harmonie avec le reste de la mise en page. C'est-à-dire que l'on aura besoin également de rajouter un container pour que ce soit bien mis en place. Donc, on va retourner dans l'éditeur et donc c'est au niveau ici, le navigateur, donc on va reprendre un petit peu ; on voit qu'on a Collection List Wrapper qui se distingue du reste, donc à la place, on devrait avoir un portfolio section. On va ajouter ici une section, on va placer entre ces deux éléments. Voilà, on peut avoir une section et à l'intérieur, on va également avoir un container. Ensuite, dans le navigateur, donc c'est à partir d'ici que l'on va pouvoir placer notre Collection List Wrapper et immédiatement, on va pouvoir voir que la mise en place sera plus en adéquation avec le reste de notre interface. Pour le reste, donc on va bien sûr conserver les mêmes paramètres de style, donc il s'agira d'une section avec la même classe, comme on a vu déjà donc, qui est portfolio section. Pareil pour container, on va aussi placer donc la même classe qui est portfolio container. Voyez, donc tout de suite, il va prendre exactement les mêmes paramètres de style que le reste des autres sections. On va juste faire quelques ajustements pour que ce soit plus clair, donc évidemment pour celui-ci, donc ce sera du blanc et pour faire le contraste avec le reste, on va juste en fait, conserver la même couleur, donc ce sera deux sections qui seront similaires là ici. On avait donc ici cette classe que l'on va supprimer > Remove class, voilà, et à la place, ce que j'aurai ici, donc, j'aurai une classe spécifique pour ce container qui va correspondre à mon portfolio, donc au projet, une galerie de projets et je vais appeler celui-ci « portfolio container » et je vais appeler celui-ci « projects container » et à la place d'avoir cette couleur d'arrière-plan, je vais modifier et avoir une couleur blanche, voilà, donc pour faire un peu de contraste. Et voici. Donc, là, ici, ce que l'on va faire, c'est ajuster avec ce qui correspond au texte, c'est-à-dire le titre de chaque projet. Donc ici, on va sélectionner à partir de notre CMS, donc c'est le CMS qui va piloter la mise en page. On va modifier avec « Name », voilà, donc ça va « matcher » avec ce que l'on a d'enregistré dans notre base de données et on va également rajouter un heading comme avec les autres sections, toujours ici en maintenant ici sélectionné le portfolio container, on va rajouter un heading. Donc, on va cliquer : voici notre Heading qui par contre est placé... s'est placé automatiquement en bas, donc on va remonter celui-ci et le placer en haut du portfolio container. L'autre chose que l'on va faire, c'est qu'on a une classe spécifique pour chaque heading, donc on va remplacer et sélectionner Section heading pour appliquer les mêmes règles de style. Voici. Et donc là, on va modifier avec « Projects ». Alors, la seule différence, c'est qu'on n'aura pas d'espace, vous voyez, entre le heading et la liste de collections. Alors, ce qu'on va faire, c'est sélectionner notre heading et rajouter un peu de « margin » pour aérer la disposition des éléments et que ce soit tout de suite plus clair. Voilà. Donc là, j'ai rajouté 41, donc on pourrait juste faire un chiffre rond qui soit 40. Voilà, donc, on va maintenant consulter le résultat. Donc, on a bien une section Header Hero, About Me, Projects et enfin, Let's get in touch.

Table des matières