Fondations Webflow : comment créer une page d'atterrissage

1. Introduction: Tout le monde, et bienvenue sur Webflow Foundations. Ce cours est conçu comme une introduction à Webflow, et nous vous fournirons toutes les compétences nécessaires pour démarrer sur la plateforme Le site Web que nous allons créer dans ce cours est celui de la page de destination Tesla Inspires. Il ne s'agit que d'une seule page. Sur cette page, nous allons couvrir tous les éléments essentiels de Webflow À la fin de ce cours, vous devriez avoir compréhension beaucoup plus approfondie de la plateforme . Nous allons parler de la plateforme Webflow et de son fonctionnement réel Nous allons envisager de créer votre propre site obsolète, de créer des sections personnalisées, de créer vos propres mises en page, de bloquer votre site Web pour nous assurer qu'il correspond exactement à ce que vous souhaitez qu'il ressemble et de nous assurer que votre site Web est réactif sur tous Lorsque nous combinons toutes ces compétences, le produit final doit être une page de destination bien conçue. Et à la fin de ce cours, vous devriez être en mesure de continuer à développer vos compétences en matière de flux Web et de créer un site Web complet avec des tas blancs sur ce cours Je suis donc très heureuse de suivre ce cours avec vous. Cela étant dit, commençons. 2. Aperçu du projet Créer votre page d'atterrissage: Le projet de ce cours est très simple. Tout ce que vous avez à faire est de suivre toutes les étapes que je vais suivre dans ce cours. À la fin, vous devriez avoir une page comme celle-ci, inspirée de Tesla. Les images peuvent désormais être téléchargées dans les fichiers de projet de ce cours. Mais aussi, si vous souhaitez créer votre propre page avec votre propre thème, qui suit une structure de couche similaire , c'est bien aussi. C'est totalement ouvert. Le but est simplement de vous familiariser avec Webflow et de vous familiariser avec la plateforme Peu importe ce que vous obtenez ici, c'est toujours un progrès. Quoi que vous finissiez par rassasier, partagez-le dans le panel de discussion afin que tout le monde puisse tirer des leçons de ce que vous avez construit et que nous puissions vraiment faire avancer les choses J'ai hâte de m'y mettre. Si vous avez des questions sur le projet ou sur Webflow, veuillez commenter le cours, et je vous contacterai dès que possible. Passons à la case départ. 3. Leçon 2 : Design avant le développement: OK. Avant de nous lancer dans le web flote et de commencer à créer notre page de destination, il y avait quelque chose de vraiment important dont je voulais d'abord discuter Il s'agit du filage et de la conception, de la différence entre cela et le développement et de la façon dont la conception du câblage doit toujours passer Parce que c'est une erreur qui se commet très facilement, et vous ne vous en rendrez peut-être même pas compte plus tard, mais cela peut coûter très cher en termes de temps. Et à mon avis, en tout cas, parce que c'est quelque chose que je n'ai pas fait correctement au début. Lorsque j'ai commencé à utiliser Webflow, je faisais tout dans les flux Web J' y faisais tout mon design et mon développement. Tu n'en fais qu'une. Au début, tu penses que tu peux. Tu ne vois pas vraiment la différence. Vous ne comprenez pas vraiment cette différence entre le design et le développement. Et je pense que cette différence serait encore plus importante si vous n'aviez pas de flux Web et que vous étiez obligé de coder vos projets, si vous créiez un nouveau site Web et que vous deviez écrire le code à partir de zéro. Cela serait beaucoup plus évident car il est très difficile pour plupart des gens d'écrire du code à partir de zéro pour un nouveau site Web et d'en faire le design. C'est une question assez difficile. Mais si vous avez une plateforme comme Webflow Frame, etc., il est très facile d'y accéder et de penser que vous pouvez simplement faire toute votre conception et votre développement, tout y faire Mais c'est une erreur. Quel est en fait un bien meilleur processus à suivre. C'est aller en FM ou créer un compte avec Figma comme je l'ai fait ici Si vous n'avez pas entendu parler de Figma dans un avenir proche, je vais créer un cours complet sur Figma et le design et sur Figma et le design et tout ce que vous devez savoir à ce sujet. Il sera totalement adapté aux débutants si vous êtes complètement nouveau Mais en guise de remarque pour le moment dans ce cours, je vous encourage vivement à vous lancer et à expérimenter cette plateforme. Vous pouvez me suivre pendant que je le fais. Vous n' aurez peut-être pas besoin de le faire pour ce projet en particulier, mais je prends certainement l'habitude de le faire et je le recommande vivement. Donc, ici, j'ai ce cours ici et je vais juste suivre ce cours intitulé Skillshare course assets Celui-ci est pour le cours que nous suivons actuellement, évidemment. Je n'y ai pas mis grand-chose, mais je vais vous montrer ce que j'ai dedans. lesquelles je voulais vraiment attirer votre attention sur certains des projets que j'ai réalisés dans le passé. J'en ai un pour laissez-moi voir. J'essaie d'en trouver une bonne que je puisse te montrer. Je peux probablement vous montrer une question qui n'est pas du travail du client, serait Allons-y avec celle-ci. Donc, A, sans trop perdre de temps pour se concentrer, est là. Abi est une société de logiciels. J'ai conçu le back-end de mon logiciel et le front-end de celui-ci sur Figma, faute de plus de contexte Mais une chose que j'ai tendance à faire, c'est d'abord d'essayer de tout concevoir dans Figma Voici un aperçu de la page de destination que vous pouvez voir ici. Et le fait que j'ai fini par créer cette page s'est avéré un peu différent. Vous pouvez voir ici qu'il manque des images dans certains espaces. Mais dans l'ensemble, j'ai fait presque tout le design dont j'avais besoin ici. Et aussi pour ces pages ici. Maintenant, vous n'arriverez jamais à la perfection dans Figma, à moins que vous ne donniez un exemple de pages supplémentaires que je crée, ce n'est pas mon meilleur travail, mais ce n'est pas mal Mais le fait est que lorsque vous travaillez dans Figma, vous pouvez vous concentrer pleinement sur le design grâce à la façon dont Figma a conçu sa propre interface utilisateur Parce que je n'ai pas à m'inquiéter des blocages mortels , des cours, de l'enseignement et tout ça. Je peux juste me concentrer sur le design et la mise en œuvre, vous créez l'art que j'ai envie de créer. Et c'est là l'avantage. Ensuite, quand je suis satisfait, j'ai tout conçu dans son intégralité, puis je peux passer à Webflow et me concentrer sur la copie ce design et le recréer dans Webflow, ce qui est beaucoup, beaucoup plus facile que devoir faire les deux Je vous le dis par expérience. Eh bien, c'était Ambu. En gros, cela vous donne juste une idée de ce à quoi ressemblerait un document figma si vous en êtes le concepteur, vous pouvez aller encore plus loin que cela J'ai du mal à tout organiser et à ne pas tout mettre à jour. C'est quelque chose que je dois améliorer au fur et quelque chose que je dois améliorer au à mesure de mon parcours. Celui-ci présenté pour le cours ne contient des images que nous allons utiliser sur le site, comme nous l'avons déjà dit, mais il est bon de garder à l'esprit le design avant le développement, et je vous encourage à le faire à que des images que nous allons utiliser sur le site, comme nous l'avons déjà dit, mais il est bon de garder à l'esprit le design avant le développement, et je vous encourage à le faire à l'avenir. Projet, vous voudrez peut-être même l'essayer dans celui-ci. Comme je l'ai dit, j'ai un cours complet sur Figma prochainement. OK. Et c'est tout. Passons à la réalité, à la création de cette page de destination et à la création de quelque chose. Alors allons-y. OK. 4. Leçon 1 Comprendre le flux Web utilisateur Int(1): OK. C'est bon. La toute première chose que nous allons examiner ici est de comprendre l'interface utilisateur de Webflow Je pense que c'est un point de départ très important car il vous fournit un contexte essentiel sur le fonctionnement réel de Webflow et sur ce qu'il fait dans les coulisses lorsque vous le développez Parce que Webflow est un peu différent de certaines des autres plateformes avec lesquelles il est en concurrence. Donc, si nous regardions des vélos Schramerbflow ferait la même chose qu' Toutes ces plateformes font de même. Ils sont tous destinés à vous aider à créer des sites Web plus facilement, plus rapidement et avec moins de tracas. Parce que si vous pouvez écrire du code et que vous êtes bon dans ce domaine, alors c'est ce que vous ferez, vous serez excellent dans ce domaine et vous obtiendrez les mêmes résultats que ce que nous ferions avec une plateforme sans code. Mais si vous ne savez pas coder et que vous n'avez pas le temps d'apprendre à coder, ces plateformes font une énorme différence. Ils comblent vraiment un vide car ils vous fournissent une interface utilisateur plus accessible qui vous aide simplement à obtenir de l'aide pour réaliser ce que vous essayez d' accomplir beaucoup plus rapidement. Mais Webflow est différent ces plateformes car il est plus étroitement lié au programme et aux lignées que nous associons généralement à la création Il est plus aligné sur Javascript HTLCSS que sur des logiciels comme X et Framer Et ce que je veux dire par là, c'est que lorsque vous concevez sur We Framer, une toile vierge vous est présentée directement sur Webflow, une toile vierge vous est également présentée Mais pour Framer et We, lorsque vous avez vraiment une feuille blanche, comme une feuille de papier vierge sur laquelle écrire, vous pouvez glisser-déposer des éléments dessus et les déplacer comme bon vous semble Tu n'as pas besoin de vraiment y penser autant. Sur Webflow, vous devez y réfléchir et y être beaucoup plus attentif. Il en va de même pour les cours et la manière générale dont vous êtes structuré sur l'ensemble du site. Je suis sûr que c'est du glisser-déposer, mais c'est du glisser-déposer avec des contraintes. Mais ces contraintes sont en réalité bien plus utiles que ce que vous pourriez penser fur et à mesure que vous approfondissez le processus de développement et que vous comprenez mieux en quoi consiste réellement cette plate-forme. OK. Donc, pour y parvenir, ce que je veux faire ici, c'est parler. Je voudrais vous donner une petite introduction au HTML, au CSS et au JavaScript. Ensuite, nous allons passer à Webflow lui-même, et je vais simplement vous parler l'interface, de la place de ces langages de programmation et des différentes parties de la plate-forme sur lesquelles Webflow traite réellement ces langages de programmation concerne le HTML, le CSS et le JavaScript, je n'essaie pas de vous donner une En ce qui concerne le HTML, le CSS et le JavaScript, je n'essaie pas de vous donner une vision complètement approfondie de chacun de ces langages, car chacun d'entre eux est très détaillé et devient très compliqué très rapidement. Tout ce que j'essaie de vous aider à comprendre, c'est ce qu'ils sont et le but qu'ils remplissent. HTML ou langage de marché hypertexte, vous devriez essentiellement le considérer comme la pierre angulaire du Web Maintenant, les deux métaphores que j'ai ici pour essayer vous aider à mieux comprendre cela, vous devriez penser au HTML comme à la charpente d' une voiture ou à la charpente d'une maison, il fournit simplement la concerne le châssis d'une voiture, le cadre ne me dit rien sur ce qu' est la voiture, sur l'apparence de son intérieur, vitesse à laquelle elle va rouler, sur ce à quoi elle ressemblera. Cela ne me donne rien. Tout ce que je sais, c'est que c'est une voiture, et c'est très similaire au HTML lorsqu'il s'agit de sites Web. Si j'utilise simplement du HTML sans style, sans CSS, sans javascript, ça ne va pas très bien paraître. Et ci-dessous, j' ai un exemple de ce à quoi ressemblerait un site Web HTML de base. Comme vous pouvez le constater, avec ce code, vous n'avez pas besoin de bien comprendre ce qui se passe ici, mais en gros, tout ce que nous avons, c'est un titre, un texte et quelques liens. Voilà à quoi cela ressemble en HTML, et il n'y a pas de CSS là-dedans, il n' y a pas de style là-dedans, c' est juste du HTL pur Et voilà à quoi ça ressemble. Maintenant, si j'avais un client ou un client et que je concevais un site Web et qu'il ressemble à ceci, nous n'en serons pas très satisfaits et ils ne seront pas très contents parce que ce n'est pas ce que nous attendons d'un site Web moderne. Nous nous attendons à ce que quelque chose soit stylé correctement, qu' une marque soit unique, qu'elle suive principes du design moderne, tout ce genre de choses. Cela ne suffirait pas, mais c'est ce que je veux dire par « cadre », car le HTML fournit la structure. Si vous pensez prendre une page Web individuelle, le HTML fournirait la structure de cette page entière pour celle-ci, il me fournit une structure. J'ai une section, un titre, un corps de texte et des liens, et si je voulais ajouter du contenu à cette page, je l'ajouterais en HTML. Mais si je voulais ajouter des couleurs d'arrière-plan, si je voulais changer les polices, si je voulais changer quoi que ce soit à ce sujet, je le ferais avec du CSS. De même, si je voulais ajouter une interaction, si je voulais que les piliers des liens changent lorsque je les survolais, j'utiliserais Java Script pour le faire Si je voulais que la taille du texte change lorsque je passe la souris dessus, j'utiliserais JavaScript pour cela Tout ce qui implique de petites animations ou interactions, c'est uniquement du JavaScript qui le fait. Quoi qu'il en soit, cela vous donne un exemple de HTML. Passons à autre chose. Si nous passons au CSS, CSS définit essentiellement à quoi ressemblera notre page Web et c'est ce que j'ai déjà mentionné. C'est une question de design  : vous le pinceau sur la page et vous la créez exactement comme vous le souhaitez. Couleurs, polices, taille et proportions, réactivité, comment ces éléments changeront à mesure que la taille d'une page augmente ou diminue Par exemple, lorsqu'on passe d'un ordinateur de bureau à un appareil mobile, c'est là que le CSS entre en jeu, et pour reprendre la métaphore que j'ai utilisée Le CSS va dicter l'apparence de votre maison. C'est ce qui permet de passer d'une charpente à une maison. Pareil pour une voiture, le CSS en termes de design web fait la différence entre le châssis d'une voiture et une Tesla entièrement construite. C'est ce qui fait d'un site Web un site Web en fin de compte. Un exemple de CSS, c'est un exemple très basique et ce n'est pas nécessairement un bon exemple, mais il illustre exactement ce que c'est. Le CSS ici sur la gauche nous indique essentiellement que nous voulons que les couleurs d'arrière-plan de ces deux éléments changent. Maintenant, comme vous pouvez le voir, ce code est du HTML, et du CSS a été appliqué à l'intérieur du code HTML. Ce n'est pas souvent le cas. Si vous aviez un vrai projet en cours, votre CSS se trouverait dans un fichier différent de votre code HTML, et vous importerez votre CSS chaque fois que vous en aurez besoin. Maintenant, tout ce que je fais ici, c'est ajouter les styles CSS dans les éléments HTML pour plus de commodité car je sais que je n'ai pas besoin d'un fichier séparé pour cela Pour le premier, pour le H Okay. C'est pour la tête dans un style. Nous allons changer l' arrière-plan en bleu. Et pour le paragraphe, nous allons remplacer cette tomate, comme vous pouvez le voir ici, par le bleu Dodger pour le premier Et c'est uniquement pour illustrer à quoi cela ressemble lorsque nous essayons de modifier ces éléments et ce que cela fait réellement. C'est tout ce que nous essayons de montrer ici. Maintenant, si nous prenons ce que nous savons sur le HTML et le CSS, et passons à Javascript. Si nous pensons à une voiture, JavaScript est comme le moteur d'une voiture. C'est une question de mouvement. C'est une question d'interaction. Il s'agit de savoir où va le site Web. JavaScript est donc un programme puissant, et Line est principalement utilisé pour ajouter l'interactivité et des comportements dynamiques aux sites Web Il fonctionne aux côtés du HTML et du CSS, où le HTML gère la structure du contenu Web et le CSS gère son apparence. JavaScript donne vie aux éléments statiques, leur permettant de répondre aux actions des utilisateurs et d'exécuter des fonctions complexes. JavaScript peut donc devenir très compliqué très rapidement et vous pouvez faire énormément de choses avec. Au niveau le plus élémentaire, c'est là que vous ajoutez des interactions pour les interactions avec le pointeur de la souris sur boutons ou si vous voulez un bouton fasse quelque chose lorsque vous cliquez dessus, euh, si vous voulez avoir un diaporama sur votre site Web et que vous voulez un bouton pour déclencher tout cela, c'est du Javascript Mais Javascript peut aller bien plus loin que cela. Mais en réalité, c'est le moteur d'un site Web. Si vous voulez que votre site Web fasse des choses, JavaScript le fera. Un exemple, et encore une fois, je dois dire qu'un exemple très basique de JavaScript est ce que j'ai ici. Encore une fois, nous avons le code HTML sur la gauche et le résultat de celui-ci sur la droite. Tout ce qui se passe dans cette interaction , c'est que lorsque quelqu'un clique sur le bouton «  cliquez sur moi », une notification apparaît disant « Bonjour tout le monde », et c'est le code qui le fait. Il ne serait pas possible de créer quelque chose comme ça sans JavaScript. Quand je vais bien. Si une telle interaction implique un script Java. Et je vais vous montrer exactement où cela entre en jeu sur Webflow, car cela ne ressemble pas à ça Vous savez, sur Webflow, vous n'aurez pas à écrire de code Tu n'auras pas à t'inquiéter de tout ça. Mais il est utile de comprendre que c'est ce que vous devriez faire si vous le conceviez si vous écrivez du code à partir de zéro, vous devez écrire votre propre script Java, vous devez créer ces fonctions vous-même. C'est possible, juste ici. Il s'agit de la fonction JavaScript ici dans le vert, vous devrez écrire vos propres fonctions et les créer à partir de zéro en gros. Je pense donc l' avoir mentionné au début, mais la majorité des sites Web sur Internet sont construits en utilisant une combinaison de HML CSS JavaScript, je pense que le pourcentage exact est de 94 % de tous les sites Web sur Internet, qui sont une combinaison de ces trois langages. Et le fait est que même lorsque vous utilisez une plateforme comme Webflow, votre site Web est toujours publié dans ces lignées Webflow vous fournit une interface sur votre site Web, puis il se traduit dans une langue compréhensible Ce n'est pas comme si le site Web était publié de manière Webflow, comme si Webflow avait une façon spéciale de le faire Toutes ces plateformes, toutes ces plateformes locales font la même chose. Ils reprennent votre design. Ils le convertissent en un code compréhensible par Internet et ils le publient. Mflows n'est pas différent à cet égard, mais la façon dont il le fait est meilleure que la plupart des Donc ce que je vais faire maintenant, c'est que nous allons sauter d'ici et je vais passer à Webflow , jeter un œil à la plateforme et voir ce qui se passe Je vais m'installer ici, puis voici un site Web pour ma start-up appelée ambo. Ce n'est pas pour promouvoir les ambos, c'est juste le site Web sur lequel j'ai choisi de faire une démonstration Mais cette page elle-même est censée être assez directe et simple et la page de destination que nous allons concevoir sera également la même. Nous allons nous concentrer sur la simplicité et simplement créer quelque chose de bien conçu, tout en nous concentrant sur l'interface utilisateur. Il y a quelques domaines clés que je voudrais aborder ici et ils sont tous liés à tout ce dont nous venons de parler précédemment. Parce que je ne veux pas trop compliquer les choses. Je veux simplement vous expliquer les domaines clés que vous utiliserez le plus lorsque vous concevez avec Webflow et pourquoi ils sont importants Bref, ce premier onglet est l'onglet de vos pages. C'est là que vous allez créer et ajouter nouvelles pages et gérer les pages que vous avez. Il s'agit de vos collections CMS. Nous n'allons pas en parler maintenant, mais nous y reviendrons une autre fois. Le second est un endroit où vous passerez beaucoup de temps. C'est la structure de votre page, et c'est ce dont je parlais ce qui concerne le HTML. Pour moi, quand je regarde cela, cela représente une structure HTML pour moi. Il s'agit de la structure de votre site. Pour chaque site Web, j'ai tendance à tout classer dans une section standard, un conteneur standard, sauf si je fais quelque chose d'unique . Mais comme vous pouvez le voir ici pour cette section supérieure, j'ai appelé cette section de héros un conteneur de héros , puis je l'ai enveloppée et tout mon contenu y figure. Ensuite, j'ai défini chacune de ces impasses essentiellement du côté droit, c'est ce que je vais aborder ensuite. Donc, si je veux ajouter des éléments à la page, je les ajoute avec le bouton plus. Ainsi, si je veux ajouter un deck, je peux le faire glisser, mais ce n'est pas comme si je pouvais simplement faire glisser ou glisser sur du texte et le placer comme je veux. Je dois styliser en conséquence, en utilisant les principes HTML et CSS appropriés. Je vais juste le supprimer pour le moment. Si je revenais ici, si je voulais modifier ce titre, je le ferais sur le côté droit, sur le côté droit, c'est ce que je considère comme toutes vos modifications CSS Lorsque nous pensons au CSS et au style, tout se passe du bon côté. J'y pense souvent sur le côté gauche, je parle de HTML ici. Et puis, sur le côté droit, je m'occupe de mon CSS. Au final, vous n'y penserez pas trop de cette façon, mais pour commencer, il est utile de le voir comme ça. Chaque fois que vous souhaitez apporter des modifications au titre, à un bouton, à une couleur ou à quoi que ce soit vous le faites sur ce côté droit Enfin, lorsque nous pensons JavaScript, JavaScript est une question d'interactions. Tout en bas de cette colonne de droite, vous verrez que vous pouvez ajouter des effets. Webflow l'a initialement ajouté comme moyen plus simple d'ajouter interactions qui ne sont ni énormes ni complexes et dont la création nécessite beaucoup de temps Vous pouvez avoir des animations pour votre opacité, vos contours, vos ombres, vos transformations TCD Tout cela peut se passer ici. Mais si vous souhaitez créer des interactions plus sophistiquées, vous devez le faire dans les interactions Parel. Il peut donc s'agir d' animations lorsque les pages sont soit cliquées, soit survolées, si vous faites défiler la page si vous faites défiler la page ou que vous faites défiler des éléments pour les afficher, toutes ces animations seront considérées comme des J'espère donc avoir expliqué et donné un peu plus de contexte sur la plateforme dans son ensemble. Mais nous allons approfondir cette question et vous pourrez suivre tout au long du processus comme je le fais. Ceci avait juste pour but de vous donner une introduction un peu plus détaillée sur le fonctionnement de la plateforme. Et les puissantes technologies qui le sous-tendent Mais nous allons entrer dans tout cela et créer une excellente page de destination. Passons à la vidéo suivante. 5. Leçon 3 Créer votre guide de style: OK. Maintenant que nous avons parlé un peu de l'interface utilisateur webfll, nous avons parlé de l'importance du design avant le développement, et je vous ai donné une petite introduction ce qu'est GM et pourquoi vous devriez l'utiliser Maintenant, ce que nous allons faire, c'est commencer à créer cette page de destination. Et si vous êtes débutant dans ce domaine, comme prévu dans ce cours, je vous recommande vivement de suivre exactement ce que je fais pour vous familiariser avec la plateforme, puis de partager votre projet à la fin, et je pourrai le revoir. Je peux vous donner quelques conseils pour l'améliorer. Mais en réalité, le but de ce cours est simplement de vous familiariser avec la plateforme, et c'est ce que j'espère que nous pourrons faire, c'est là que j' essaie d'en arriver là. Donc, c'est la première chose que nous allons faire et la première chose que je recommande toujours à tout le monde de faire. Chaque fois qu'ils créent un nouveau site Web sur Webflow, ils créent une porte de style Maintenant, vous savez peut-être déjà ce qu'est une porte de style, si vous en avez déjà utilisé une pour votre image de marque. Il vous donne simplement un aperçu de ce qu'est votre marque et de ses caractéristiques, de ce qui devrait être suivi si vous créez des actifs de design pour une marque en particulier. Sur Webflow, son utilisation est légèrement différente. Il ne s'agit pas simplement de démontrer la marque, mais il existe une application beaucoup plus pratique. Ainsi, lorsque nous créons une porte de style, nous choisissons une police ou une couleur. Nous créons des boutons, c'est là que nous pouvons styliser nos fermes ou nos blocs de texte enrichi , en gros, tout ce que nous allons utiliser de manière cohérente sur le site, c'est là que nous le stylisons lorsque nous le stylisons sur le guide de style, nous pouvons réutiliser les éléments que nous créons partout ailleurs sur le site sans avoir à les recréer à chaque fois Webflow est entièrement consacré aux éléments réutilisables. Je pense que c'est un élément clé que si vous êtes nouveau dans ce domaine, le plus tôt vous le comprendrez, mieux ce sera, car Webflow peut être très, très serré si vous créez tout à partir de zéro à chaque fois Ce que tu feras si tu le fais, tu ne feras que détruire tous tes cours. Tu vas le ralentir un peu. Votre site sera beaucoup plus lourd qu'il ne devrait l'être. Mais si vous vous concentrez sur la création d'éléments réutilisables, votre site sera beaucoup plus léger, plus rapide et il vous sera beaucoup plus facile de le développer et de le développer. C'est donc ce que je veux vraiment dire ici. Vous pouvez le voir ici dans le tableau de bord du flux Web. Ce que nous allons faire, c'est que j'ai créé de nombreux pliages ici appelés sites Web de démonstration. Nous allons simplement commencer par créer un nouveau site à partir d'un document vierge. Je vais simplement l'appeler le site Web Tesla Inspires Model 3. L'autre chose que je veux dire concerne les images que je vais utiliser sur ce site. Vous les trouverez en lien ci-dessous quelque part à télécharger et vous pourrez les utiliser pour suivre. Je n'utiliserai pas beaucoup d' images sur cette première page, mais dans les leçons qui suivent, je le ferai. Allons-y et nous pouvons commencer. Génial. Ainsi, lorsque vous commencez un nouveau projet sur WebP, vous serez toujours confronté une toile vierge qui ressemble à ceci Mais si vous allez dans l'onglet Pages ici, par défaut, vous aurez une page d'accueil, une page de mot de passe et une page 404. C'est votre point de référence. C'est par cela que vous allez commencer. Ce que nous allons ajouter ici, c'est que nous allons cliquer sur ce bouton, et nous allons ajouter une page intitulée Snail guys OK. Et vous n' avez pas à vous soucier de quoi que ce soit d'autre dans la phrase de page pour le moment, mais nous allons simplement procéder à la création de cette phrase. Donc, la première chose à laquelle je veux que vous pensiez ici est de revenir à ce dont je parlais avec les différents langages de programmation et la disposition des boîtes utilisées sur le Web. Techniquement, il s'agit toujours d'un système de facturation par glisser-déposer, mais cela vous oblige à le faire avec la disposition des boîtes Elle comporte un peu plus de contraintes, mais elles sont utiles au fur et à mesure que vous approfondissez votre connaissance de cette plate-forme Lorsque vous découvrirez cette plateforme, vous préférerez de toute façon travailler de cette façon, à mon avis. La première chose que nous allons faire est donc d'ajouter une section. Et c'est ici, dans le coin supérieur droit, que vous allez créer des cours. Maintenant, vous pouvez simplement avoir des classes de base, qui ne sont que des classes uniques où je tape une chose ici, et c'est ma classe, ou nous pouvons avoir des classes combinées, où nous avons une classe de base, que vous allez me voir créer ici pour nos initiateurs. Ensuite, nous ajouterons d'autres classes en plus de cela afin de pouvoir ajouter des ventes et des options individuelles à chaque élément. Nous y reviendrons donc un peu plus tard. Mais la première chose que je ferai toujours en venant ici. Je viens de créer une classe appelée section de base. s'agit donc simplement d'une section réutilisable que je vais utiliser tout au long cette page et de la plupart des autres pages, car les sections n'ont généralement pas besoin de beaucoup de style. C'est donc la première chose que je vais faire, et je vais régler la largeur à 100 %. Et je n'ajouterai aucun rembourrage ou quoi que ce soit de ce genre, simplement parce que ce n'est pas vraiment nécessaire C'est la première chose à faire. Ensuite, ici, vous pouvez voir la valeur de la section. Je vais maintenant ajouter un bloc div. Maintenant, je tiens à souligner une chose à laquelle je pense qu'il serait vraiment bon que vous preniez l' habitude de choisir des conteneurs. Essayez de ne pas utiliser la structure du conteneur Webflos que je vous donne habilement ici. Utilisez toujours un deadlock, puis personnalisez-le comme vous le souhaitez Il n'y a aucune différence entre les deux en termes de performance de votre site ou de façon dont il va l'utiliser. Ils sont utilisés de la même manière. Containers Webflow est une version d' un deadlock personnalisé, mais elle ne vous le donne que si vous en avez besoin plupart du temps, même si je trouve le conteneur est beaucoup plus redondant que ce à quoi il est censé être J'utilise toujours un deadlock et je le stylise comme bon me semble. C'est ce que je recommande. J'ai ajouté un blocage ici, et nous allons simplement appeler ce conteneur de base. C'est la première chose à faire. À l'intérieur, c'est le dernier bloc que nous allons ajouter avant de commencer à ajouter des éléments. Je vais juste appeler celui-ci rappeur. Parce que nous allons mettre le titre de la page. Tu n'es pas obligée de faire ça. C'est juste pour m'entraîner. C'est aussi un bon point de départ. De plus, nous allons ajouter notre premier titre ici. Et nous allons ajouter un paragraphe. Nous n'allons pas encore les styliser. Nous allons y revenir. Nous les styliserons plus tard, car cela ne sert à rien de les retarder pour le moment. Ensuite, si nous passons à Tao Wrapper, nous allons apporter quelques modifications sur le côté droit Nous allons régler le rembourrage de chaque côté je vais le mettre à 60 peut que je change. Je vais passer à 40, puis je vais vous montrer ce que je vais faire dans une seconde. Ensuite, je vais modifier l' alignement du bloc d'étapes afin que tout le texte montre que tout le texte est centré. Donc, ce que nous allons faire ici, c'est passer à la flexibilité, puis nous allons le faire baisser, puis nous le voulons au centre. Nous voulons que tout soit au centre. Maintenant, vous pouvez voir qu'il est centré sur le titre, mais ce n'est pas le cas avec le paragraphe. C'est parce que nous devons modifier cela au niveau du paragraphe, mais nous allons simplement les laisser pour le moment. Maintenant, pour ce qui est de la largeur de l'enveloppe du titre, je vais la remplacer par un pourcentage, et je vais la porter à 60 % parce que je trouve que c'est une question de double sens Maintenant, vous pouvez voir que tout est placé sur le côté gauche, et c'est là que nous devons monter dans la hiérarchie et modifier cela pour nous assurer que l'emballage du titre est centré Nous allons donc passer au conteneur de base. Et c'est en fait quelque chose que j'aurais eu l'intention de faire de toute façon. Nous allons faire en sorte que cela soit flexible, et nous allons nous assurer qu'il descende de manière verticale. Nous y reviendrons un peu plus tard, mais je vais simplement indiquer dans votre style que le texte de remplissage peut rester le même Mais rien de tout cela n'a d'importance pour le moment, nous allons revenir à Alors ce que nous allons faire, c'est ajouter une autre section. Nous allons mettre un autre bloc div dedans et un autre dedans. Maintenant, je vais vous montrer à quoi elles ressemblent de ce côté. Nous avons juste une section avec le dvlock, puis un autre diblock à l'intérieur, mais nous voulons donner un aspect comme celui-ci Et c'est ce à quoi je fais référence lorsque nous parlons d'éléments réutilisables. Nous y reviendrons un peu plus tard, mais pour le moment, nous nous concentrons uniquement sur les éléments de base. Nous avons déjà créé une section de base classique, wrapper de titre de conteneur de base Ici, pour cette section, nous allons l'appeler section de base. Ensuite, nous allons appeler cela un conteneur de base. Et nous les avons déjà là et vous pouvez voir qu'elles s' appliqueront options de style que nous avons par défaut aux options de style que nous avons définies pour ces classes. Ensuite, ce dernier bloc, nous allons l'appeler différemment. Je vais appeler ça un wrapper d' en-têtes. Parce que c'est là que seront placés les titres. Donc, à l'intérieur de l'emballage des en-têtes. C'est ici que nous allons examiner nos rubriques. Nous allons les styliser. Nous allons appliquer les bonnes polices de couleurs. Nous allons leur donner exactement l'apparence que nous voulons et nous assurer qu'ils sont stylisés manière appropriée sur chaque appareil Tout d'abord, ajoutons six titres, car il existe six balises de titre différentes en HTML, à savoir H un, H deux, H, H quatre, cinq, six, et nous voulons que cela reflète notre portail de style Il se peut que vous n'utilisiez pas tous les titres H six, mais il est recommandé de les avoir et de savoir que vous les avez créés. C'est donc le titre 1. Ensuite, pour le wrapper des en-têtes, nous voulons en changer la largeur à Et c'est parce que j'ai les styles de contenants essentiels à la vésicule Il va simplement tout intégrer, à moins que je n'en dise à l'élément enfant, que cela doit être sur toute la largeur de la page. C'est ce que nous avons fait, puis je vais également ajouter quatre Px de chaque côté pour que cela semble un peu proportionné. Nous allons donc les dupliquer six fois. Nous allons appeler celui-ci titre un, titre deux, trois ou cinq et six. C'est vrai. Alors maintenant, nous pouvons nous concentrer un peu là-dessus. C'est ici que nous allons créer une classe combinée. La première classe que nous allons créer ne concerne que le titre lui-même. Nous allons donc ajouter une classe à tous ces styles, mais nous allons quand même l' ajouter. Nous allons ajouter un titre ici. Ici, vous pouvez voir comment Webflow me le recommandera , car il sait c'est un produit que je viens de créer Les mots, nous voulons changer les propriétés, tous ces éléments vont avoir en commun. Nous savons donc que la police est quelque chose qu'ils auront tous en commun, nous savons que la couleur est quelque chose qu' ils auront tous en commun. La seule chose qu'ils n'auront pas en commun, c'est leur taille et leur hauteur. Mais un autre point qu'ils auront en commun est la hauteur de la ligne, juste pour le souligner. Mais nous allons passer au crible. Nous allons donc changer la police de caractères en chemin de fer. Maintenant, si nous passons à la typographie sur le côté droit, et vous pouvez déjà le voir simplement parce que je les ai dessus, vous pouvez voir comment elles changent toutes Mais la première que nous voulons ajouter est la police que je veux utiliser, mais le chemin de fer n'est pas affiché ici. Donc, si nous voulons ajouter une police Google personnalisée à Webflow. C'est très facile à faire car Webflow intègre toutes les polices personnalisées Mais si nous voulons ajouter un fonds vraiment personnalisé, un fonds que nous avons téléchargé ou acheté sur un site Web tiers, nous devrons le télécharger. Alors, appuyons sur le bouton «   ajouter des polices » ici. Et cela nous mènera au site stence de Webflow. Et quand il sera chargé, nous verrons. Donc, pour Google Fonts, je peux choisir une police dans cette liste. Je vais donc prendre le chemin de fer. Je vais juste vérifier tout cela. Parfois, Webflow peut vous reprocher d'avoir vérifié tout cela D'autres fois, ce n'est pas un problème. Mais je les vérifie toutes simplement parce que je veux avoir un contrôle total sur la police que j'utilise. Nous allons donc ajouter cela. Et si vous vouliez ajouter un fonds personnalisé, vous le feriez ici, vous en téléchargeriez un. Donc, vous téléchargeriez, vous téléchargeriez vos fichiers. En général, il s' agirait TTF ou de fichiers OTF Quoi qu'il en soit Passons à autre chose, nous l'avons mis en ligne. Revenons donc au concepteur et voyons si nous pouvons désormais accéder au chemin de fer ou au moins voir si nous pouvons l'utiliser dans notre projet. Nous sommes donc de retour ici et nous allons aller à Stairway. Donc, si je passe à la direction, nous y voilà. Vous pouvez voir que le chemin de fer est là. C'est donc la police que nous allons utiliser. Maintenant, pour ce qui est de la couleur dans le cadre de ce cours, je vais simplement utiliser essentiellement le noir et blanc. Je ne vais pas faire quelque chose d'exagéré avec les combinaisons de couleurs, autant plus que ce sont les images de la page de destination qui parleront le plus. Il serait superflu pour moi d'essayer d'ajouter nouvelles couleurs et ils veulent juste que les choses restent assez simples Je veux donc que les polices soient de couleur noire. ne faut jamais vraiment utiliser du noir pour celui-ci, j'utilise un noir assez épais. Plus lourd que celui fourni par défaut par Webflow. Mais oui, vous voulez toujours rester en vrai noir ou parfois, vrai blanc est souvent utilisé vrai noir, je m'en éloigne toujours. J'ai défini la couleur pour cela. Nous avons réglé le devant. La dernière chose que nous voulons faire est de définir la hauteur de la ligne. Donc, en pographie, vous pouvez voir ici que nous avons de la hauteur. Maintenant, une chose que je recommanderais avec ceci est Webflow, nous le définirons à 44 px par défaut Je recommande de le modifier comme nous le faisons actuellement au niveau de notre classe de base, et je recommande de le remplacer par un pourcentage, et vous pourrez voir que cela se répercute. Ensuite, je recommanderais de le changer à 145 % 125 % serait votre minimum Je recommande 145 %. Et si vous sentez que vous en avez vraiment besoin, vous pouvez le porter à 165 % Mais c'est le type de plage que nous avons examiné en termes de hauteur de tête et de texte de paragraphe. Alors allons-y 145. Je pense que c'est un bon endroit pour nous. Par défaut, une marge sera ajoutée à tous vos titres marge sera ajoutée à Vous pouvez voir que j'ai une marge de 20 en haut pour celui-ci, et j'en ai dix en bas. Je vais les laisser comme ça pour le moment. Je pourrais revenir en arrière et les modifier plus tard si je ne pense pas qu'ils correspondent au texte, mais par défaut, ils devraient être corrects. Maintenant, actionnez la classe de base pour cela. La prochaine chose que nous allons faire est de les traiter individuellement. Pour le titre 1, je vais ajouter une autre classe appelée H one. Le deuxième que je vais ajouter est H deux. Puis un autre est H trois. OK. H quatre D'accord. Maintenant que nous avons apprécié chacun d'entre eux, nous voulons maintenant modifier la taille de chacun de ces titres pour nous assurer qu'ils sont cohérents sur chaque appareil comme nous pouvons le voir ici L'outil que je vais vous recommander utiliser pour cela s'appelle type scale, et je l'ai utilisé la plupart du temps. En gros, ce que je vais faire, c' est que cela vous donnera simplement les bonnes tailles que vous devriez utiliser pour chacune de vos têtes. Donc, dans ce cas, j'ai fixé la base à 18. Nous soutenons chacun de ces REM PX ou PT. Mais je m'en tiendrais à P x, et ceux-ci seront utilisés sur chaque appareil. La première que nous allons prendre coûte 53,75, et nous sommes littéralement passés tout droit Et vous pouvez voir que, grâce à l'ajout de ces classes combinées, je peux désormais supprimer chacune de ces têtes individuellement sans que, lorsque je crée un titre, cela ne s'applique pas à toutes, cela s'applique simplement à celui sur lequel je me trouve Et finissons-y. Je passe tout droit en 44,79. Trois et enfin, six. Je dirais que ça a l'air bien. Maintenant que nous l'avons stylisé, voyons à quoi ils ressemblent sur différents appareils Je pense qu'ils s'adaptent globalement au style au fur et à mesure qu'ils descendent. Quand nous arriverons ici, je pense que dans l'ensemble, le H ira bien. Je trouve que c'est un peu trop important. Mais nous y reviendrons quand même si nous pensons que c'est trop. Mais ensuite, nous allons créer une autre section. Dans la section suivante, nous allons faire les paragraphes, en fait, je vais juste les ajouter directement ici. Je vais changer le nom de cette classe pour en faire un wrapper de texte Je devrais t'aider. Nous allons revenir ici. Nous allons ajouter un paragraphe. Maintenant, ce que je ferais généralement pour les paragraphes, je chercherais à ajouter du texte gros, moyen, moyen ou standard puis du texte petit, car vous pourriez avoir besoin de différentes tailles de texte en fonction de la partie du site Web sur laquelle vous travaillez. Donc un à trois et nous allons simplement répéter la même chose encore une fois. Nous allons juste mettre un paragraphe. Ou parfois, mettez un paragraphe ou un texte standard. Nous allons simplement utiliser le paragraphe maintenant. Et nous allons placer le recto sur le chemin de fer et en changer la taille à 18 parce que c'est ce que nous avons dit la taille de base de notre texte serait. Ensuite, la dernière chose à faire est de changer la hauteur. Maintenant, ce sera soit 125, soit un quatre, cinq, je pense que nous allons passer à un, quatre, cinq, alors nous allons passer au paragraphe. Nous allons faire une demande pour chacun d'entre eux. Cela nous donne juste un paragraphe d'apparence standard. Ensuite, nous allons ajouter le grand standard et le moyen, puis le petit. La première va être grande. Je vais opter pour le standard ici parce que je le sais. C'est le premier, puis le plus petit. Et nous voulons faire du texte en gros Je mets généralement deux P x plus haut que la ligne de base, petit texte, deux P x, plus bas que la ligne de base. Donc, si notre numéro de base est 18, alors je vais en faire un grand et un petit 16. Vous pourriez étendre cela. Vous pouvez avoir un très grand, un extra petit. Vous pouvez le monter ou le descendre comme bon vous semble. Mais pour moi, j'ai généralement besoin ces grands, moyens et petits. Maintenant que c'est fait, encore une fois, nous pouvons y jeter un œil et voir comment cela se réduit. Pour moi, ça a l'air plutôt bien. La taille est bonne et les proportions sont correctes. Vous vous demandez peut-être ce que nous en faisons ici. Maintenant que j'ai la bonne taille et le bon style pour chacun d'entre eux, et c'est la seule chose que j'ai oubliée pour la dernière fois Nous allons inventer celui-ci ici. Nous allons réutiliser ces classes comme il se doit , puis nous allons mettre C Webflow suggest maintenant, puis nous allons mettre H un Ensuite, nous allons mettre un paragraphe. Et nous allons utiliser des normes. Maintenant, ce que je fais souvent, c'est qu'il y a deux façons de le faire. Vous pouvez le dupliquer car ce que vous voulez ici, c'est que vous voudrez que vos titres ou votre texte soient envoyés à certains moments Maintenant, ce qui va se passer, c'est que si je change réellement cela maintenant, je vais simplement prendre l'exemple standard de ces exemples. Si je le pense, j'ai maintenant modifié cette propriété pour chaque endroit, le paragraphe de classe commun en standard apparaît et je ne le veux pas Donc, ce que je voudrais vraiment, c'est ajouter une autre classe OK. Et ce que je vais faire en fait ici, c'est le démontrer. Je vais juste dupliquer toute cette section pour vous la montrer. Nous avons donc maintenant un duplicata. Et ce que je vais faire ici, c'est pour chaque section. Nous avons une tête en H, et je vais ajouter des capteurs. Tu peux le nommer comme tu veux. C'est juste ma préférence personnelle. C'est ainsi que j'ai choisi de procéder. Mais j'ajouterais des capteurs. Ensuite, j'en changerais la propriété en capteurs. OK. Vous pouvez voir où je veux en venir, espérons-le. Et maintenant je vais juste m'en occuper et je vais le faire pour chacun d'entre eux. Donc, si je veux ajouter un titre de capteur, j'ajouterais un capteur plutôt que le titre H ou quelque chose de différent. Cela me permet de classer facilement exactement ce que je veux lorsque je crée mon site Web Je vais passer à C Celui-ci s'appliquera automatiquement car, en gros, même si nous l' appelons de la même manière, Webflow traitera chacune d'entre elles comme des classes individuelles utilisées dans le cadre de cette classe combinée y revenir, nous allons fabriquer celui-ci à l'aide de capteurs. OK. Je vais juste le copier juste au moment voulu. Et nous pouvons constater que cela fonctionne très bien dans l'ensemble. Ensuite, nous allons faire de même pour ici. Génial. C'est fait. Et maintenant, pour en revenir au point initial que j'allais soulever, si nous revenons ici, je peux simplement ajouter ce formulaire central, et cela ne cassera pas l'ensemble de mon site dans mon système de classement C'est donc ainsi que je recommanderais de procéder. Maintenant, nous avons des titres standard, des titres centrés Quelle est la prochaine étape ? La prochaine chose que je vais examiner, ce sont les changements d'arrière-plan. Ces rubriques sont en noir. Mais que se passe-t-il si nous avons un arrière-plan noir ou un arrière-plan très sombre et que nous voulons ajouter ou inconvénients et que nous ne voulons pas avoir à créer un tout nouvel ensemble de classes juste pour les rendre blanches ou plus claires ? Ce que je recommanderais de faire ici, c'est que je vais le dupliquer à nouveau. Encore une fois. Toute cette section. Prends ce duplicata une fois. Ensuite, ce que nous allons rapidement faire ici, c'est que je vais changer le fond de la section. C'est donc une autre chose que je ferais pour les sections. Vous allez créer un tas de classes différentes , car les différentes sections auront naturellement des arrière-plans différents C'est l'une de celles que vous allez beaucoup changer. Donc je vais juste appeler celui-ci un fond sombre. C'est bon. Et puis, quand je le fais, je peux modifier cette section en tant qu'individu. Je vais donc simplement ajouter une couleur ici pour que ce soit essentiellement noir presque entièrement noir. Et maintenant que nous l'avons fait, je vais revenir sur chacune d'entre elles individuellement, et je vais ajouter un arrière-plan sombre. Eh bien, je dirais que j'ajoute souvent un arrière-plan sombre, mais vous voudrez peut-être ajouter quelque chose qui vous convient peut-être un peu plus. Donc, lumières, nous allons juste les rendre blanches. Cela peut prendre une minute lorsque vous le faites. Maintenant que nous l'avons fait pour les cieux, et vous voulez juste refaire la même chose pour le texte , alors I Light text. J'ai l'impression que je dois faire une erreur. Tu as tous tes textes et tout le reste. Vous devez maintenant définir un ensemble de classes différent. Vous avez une classe de combinaison différente si vous voulez placer vos têtes et votre texte sur un sac plus foncé Et c'est juste une bonne habitude pour prendre l'habitude de faire tout cela. Cela peut sembler un peu fastidieux et chronophage, mais en fin de compte, cela fait vraiment une énorme différence si vous travaillez sur un projet plus important et que vous essayez de travailler rapidement. maintenant, c'est fait, nos textes sont à peu près pris en charge. Vous voudrez peut-être revenir sur certaines de ces modifications à certains moments, en particulier si vous essayez d'utiliser des couleurs spécifiques ou si l'un de ces éléments nécessitait vous essayez d'utiliser des couleurs spécifiques plus de travail, nous le ferions Mais comme je n' utilise que le noir et blanc pour la majeure partie de cette page de destination, je n'aurai pas besoin de beaucoup de couleur ou quoi que ce soit d'autre. Je sais que cela sera suffisant. La dernière chose que vous voulez faire ici, je vous recommande au moins ajouter vos boutons et de les styliser en conséquence. C'est probablement une question assez importante également. Ensuite, nous examinerons le texte enrichi, nous utiliserons rapidement les boutons, et au moins vous pourrez voir comment le faire correctement. Nous allons simplement ajouter une autre section, laissez-nous. Parfois, cela peut parfois jouer de manière amusante. Il y a donc une nouvelle section, alors nous devrons la bloquer. Donc, tout ce que nous allons faire, c'est simplement dupliquer à nouveau cette section, car il ne sert à rien d'en créer une entièrement nouvelle. En gros, je vais simplement supprimer tout ce qu'il contient et le modifier à nouveau. Débarrassez-vous de la voiture Pour celui-ci, nous allons nous en débarrasser, nous en débarrasser Et puis pour cela, je vais juste me débarrasser de l'emballage de texte parce que je sais que nous n'en avons pas besoin Ensuite, nous ajouterons un autre bloc ici. Et je vais juste l'appeler par ajout pour que nous puissions le voir. Et nous allons faire quelque chose de similaire à ce que nous avons fait auparavant. On peut juste acheter les blancs par centaines. Et nous allons simplement faire glisser un bouton et le conserver comme bon nous semble. Ce que je vais faire ici avant et avec les en-têtes dans le texte, le texte. J'aurais trois boutons, grands, moyens et petits. C'est une bonne habitude à prendre. Faisons-le et voyons où nous allons continuer. C'est à dire, je vais y aller, OK. OK. Maintenant que nous avons les fils et que nous sommes là, nous allons simplement rester, nous allons continuer . Et je pense que dans ce cas, je vais probablement les rendre tous noirs puis je vais les dupliquer et les rendre blancs parce que je ne pense pas avoir besoin de plus que cela. Mais nous allons simplement nous assurer qu'ils seront côté. Ce que nous allons faire ici pour ce premier bouton ou pour tous ces boutons, nous savons qu'ils seront blancs. Nous allons donc changer le fond en blanc. Je vais ajouter une bordure P x juste pour que je puisse voir chacune d'elles. Ensuite, pour le texte, nous allons le rendre noir. Vous pouvez le voir là-bas. Nous allons changer les coins à au moins 20 px. Courbez juste comme ça. Ensuite, je vais m'assurer que la police est remplacée Railway et que nous utilisons du gras. Ensuite, je vais changer le rembourrage pour qu'il soit de 20 P x à l'intérieur au lieu de 15 parce que je pense que cela sera plus beau Ensuite, je vais changer le en grand et en petit. Pour chacune d'entre elles, je vais ajouter une ombre pour m'aider. La solution standard pour ça, c'est bon. Une fois que j'ai ajouté l'ombre de la boîte, je peux supprimer la bordure car je sais déjà à quoi elle ressemble. Tu peux t'en débarrasser. Et n'oubliez pas que ces boutons blancs seront généralement affichés sur un fond sombre. Ainsi, même si vous ne les voyez pas très bien ici, vous les verrez beaucoup mieux sur un fond sombre. C'est ça. Et puis la dernière chose que je veux faire est ajouter un état de survol et de clic donc Je ne veux donc pas ajouter de transition. Je voudrais ajouter : Oui, une transition. Et je veux changer la couleur de fond. Maintenant, ce que je vais faire maintenant que j'ai ajouté cette transition. Si je passe au survol, je peux simplement changer la couleur d'arrière-plan selon ce que je souhaite pour l' état de survol, et je vais juste le rendre légèrement blanc cassé, rien de trop fou Maintenant, je passe la souris dessus. Vous ne pouvez pas vraiment le savoir avec un fond blanc, mais je donne juste des commentaires à l'utilisateur lorsqu' il le survole Ils peuvent voir que c'est cliquable. Et ce n'est qu'une bonne pratique. Encore une fois, c'est juste une autre de ces choses. C'est une bonne pratique. Maintenant que nous avons fait la dernière chose que nous voulons changer, en tant que taille, nous avons une classe de base de boutons, ils vont vouloir passer à grande taille. Objectif et petite. Si gros que je vais l' apporter, je vais le faire . Appelons-le 30 30, puis nous allons passer à 12 en haut, 12 en bas. Ensuite, nous allons en changer la taille en gros texte, nous en avons 20. Génial. Donc, celui-là a l'air en bon état. Ensuite, pour le second, nous allons chercher 18 pour la taille du texte, car c'est notre taille de texte de base. Nous allons augmenter ce chiffre à je pense qu'en fait , nous passerons à 15 pour faire du milieu 12. Et je vais en faire 25. Et puis pour les plus petits, nous allons partir, nous allons aller jusqu'à 16 ans. Nous allons le laisser à 28 et à neuf heures. Et c'est tout ce dont nous avons vraiment besoin pour changer cela. Ensuite, je vais prendre chacun de ces boutons. Je vais prendre le bouton. Je vais le dupliquer. Je vais modifier à nouveau le contexte . OK. Maintenant que je les ai dupliquées je vais les changer pour qu'il me suffise de changer la couleur du frère et la couleur du texte Nous allons juste faire, je vais mettre l'inverse ici Encore une fois, vous pouvez appeler ces cours comme bon vous semble. Tu n'es pas obligée de faire exactement ce que je fais ici. C'est juste qu'il s'agit plutôt de comprendre ce que sont les cours. Je vais donc inverser la couleur parce que c'est quelque chose que je ferais normalement si je faisais littéralement inverse de tout ce qui s'y trouve C'est de la couleur. Nous allons donc rendre les arrière-plans noirs. Nous allons faire en sorte que le texte soit blanc. Allons-y. Non Ce sont les éléments clés que vous devez faire lorsque vous créez votre guide de style, car je veux dire les éléments ont été créés ici, ce sont les éléments les plus réutilisables. Je veux dire, vous avez besoin de titres, vous avez besoin de texte, vous avez besoin de boutons et voici Mais au lieu de prendre encore 25 minutes pour parcourir tout cela et continuer à vous le montrer car j' espère que maintenant, si vous me suivez, vous aurez compris l'idée. Tu devrais savoir comment suivre un cours. Vous devez savoir quelles propriétés vous devez modifier et celles qui ne doivent pas être modifiées et être familiarisé avec la création de classes Cbo Mais je vais vous montrer rapidement un guide de style entièrement terminé, cela prendra probablement plus d'une heure. Je dirais que si vous le faites correctement, cela dépend de la partie de votre site que vous avez créée. Je vais donc revenir au tableau de bord. Et celui que je vais vous montrer est encore une fois pour Ambi, j'en prends trop. Je veux juste que vous compreniez à quoi ressemble un guide de style complet. Encore une fois, c'est le site Web de ma start-up que je vais vous montrer. Alors voilà. Et encore une fois, lorsque je construisais le site, c'est la toute première chose qui crée. Guide de style. J'ai mes logos ici. Vous savez, j'ai créé plus de titres et d' autres éléments ici pour donner un peu plus de contexte aux différentes couleurs que j'utilise Parce que, comme je l'ai dit plus tôt dans cette vidéo, il s'agit plutôt d'un site Web illustré, donc les couleurs et l'image de marque doivent être un peu plus nombreuses, vous savez, elles doivent faire plus de travail à ma place. J'ai donc mes couleurs là-dedans, j'ai ma tête. J'ai différents types de textes, différentes tailles de liens, des tas de tailles de boutons différentes et des formations différentes. Ensuite, j'ai mon texte, mes formulaires, mes textes inverses. Je veux dire, tout est là parce que lorsque je sors , je suis intégré au site parce que j'ai déjà fait tout ce travail. Il est beaucoup plus facile de créer des pages à partir de zéro. Comme je n'ai pas à créer quoi que ce soit d'utilisé à partir de zéro, je le ferai peut-être parfois, mais tout ce qui est réutilisable, je n'ai pas à le faire. C'est donc là que je vais laisser le soin aux guides de style, car je sais que nous en avons assez dans un bâtiment de plus pour une page de destination Maintenant, je peux m'en servir. Je ne vais pas le faire, je ne vais pas avoir à trop le bricoler J'ai tous les sites importants toutes les classes importantes dont j'ai besoin ont maintenant été créées, lequel est OK. Donc, ce que je vous encourage à faire, si vous souhaitez ajouter plus de variations dans les propriétés si vous souhaitez utiliser des couleurs différentes, peut-être que vous voulez ajouter des boutons rouges, des boutons bleus, ce que vous voulez, peut-être que les couleurs du texte soient légèrement différentes. Je vous recommande de prendre le temps de le faire. Mais je vais laisser ça ici pour la vente. Et dans le prochain calendrier, nous allons en fait aller de l'avant et nous allons commencer à créer la page à partir de zéro. Et nous allons utiliser ces cours pour nous aider à le faire. Je te verrai dans le prochain. OK. 6. Leçon 4 Créer votre barre de navigation: OK. À ce jour, vous devriez avoir créé vos guides de style et vous avez peut-être continué à ajouter d'autres éléments aux vôtres, comme je l'ai fait dans la vidéo précédente. Quoi qu'il en soit, l'étape suivante consiste à créer votre navigation. Maintenant, vraiment, vous n' avez pas besoin de commencer par cela, mais je le recommande. Votre barre de navigation et votre fo sont généralement des éléments qui apparaîtront sur chaque page de votre site Web. Dans ce cas, nous ne faisons que créer une page de destination. Mais si vous aviez un gros projet et qu'il s'agissait d'un site plus grand. Je recommande toujours de commencer par la barre de navigation. La raison en est que même si celle que nous allons construire ici est relativement simple et directe, barres de navigation peuvent certainement se compliquer assez rapidement, surtout si vous travaillez sur un projet plus important, ce qu'il faut garder à l'esprit. En plus de cela, ils peuvent être un peu bogués lorsque vous essayez d' obtenir une réactivité optimale sur tous les appareils Encore une fois, pour ce que nous sommes en train de faire ici, nous ne devrions pas avoir de problèmes, mais je dirais que vous êtes plus susceptible de rencontrer problèmes ici, dans le jardin et d'autres moments de votre parcours de développement. Il y a donc en fait deux façons de procéder. La première consiste à accéder à l'onglet Éléments et à faire défiler la page vers le bas. Vous pouvez simplement faire glisser une barre de navigation à partir de là, mais elle n'aura pas beaucoup de style et d'options. En fait, je ne recommanderais probablement pas d'utiliser celui-ci parce qu'il y a toujours quelque chose que je dois changer à chaque fois que je l'utilise, mais laissez-moi simplement le consulter si je peux voir où ils iraient. Donc, lorsque vous le remontez, l'essentiel sur lequel je souligne c'est qu'il est livré avec un conteneur intégré. Maintenant, cela peut être un peu problématique si vous voulez faire différentes choses avec la réactivité Et comme je le disais tout à l'heure, les conteneurs intégrés à Webflow sont limités Ce n'est pas comme un bloc Did normal parce que Webflows vient d'en éditer certaines parties, comme les webs et le pad, et c'est assez fixe et rigide par rapport à Nous n'allons pas nous en servir. Ce que nous recommandons simplement faire pour votre tranquillité d'esprit, c'est d' entrer dans les mises en page plus puis dans les mises Maintenant, je vais juste en parler rapidement , car Webflow est intégré à bibliothèques pour chaque projet que vous créez. Vous aurez votre bibliothèque démarrée, mais il existe d'autres bibliothèques que vous pouvez ajouter à votre espace Si vous cliquez ici, parcourez Plus de bibliothèques, vous avez tous ces différents UIKits que vous pouvez Et si vous n'en êtes qu'au début, je préférerais de loin que vous passiez par le processus de création de vos classes et conception de vos propres éléments afin de vous familiariser davantage avec ce processus. Si vous cherchez vraiment à créer quelque chose rapidement que vous êtes pressé et que vous avez des délais, ces bibliothèques peuvent vraiment faire une énorme différence car elles vous fournissent tout ce dont vous avez besoin pour créer un site Web à partir de zéro, puis vous pouvez simplement personnaliser ces éléments comme bon vous semble. Pour y revenir. Flow, nous allons commencer notre bibliothèque, puis je vais simplement prendre l'une de ces mises en page de navigation, laquelle n'est pas vraiment un gros problème Allons-y, on va juste prendre celui-ci. Nous allons prendre celui-ci ici. Et cela nous donne une navigation vraiment standard. Et si je passe à la version gratuite ici, on peut voir que ça arrive. Je ne sais pas à quel point j'aime ça, mais voyons à quoi ça ressemble sur mobile. Je viendrai avec une navigation intégrée. Et en fait, je vois que c'est bien. Je ne suis pas fan de la façon dont elle apparaît sur tablette, mais en fait, ça va. En fait, je l'examine de près. Quoi qu'il en soit, revenons au bureau pendant une minute. Et nous sortirons de la révision. Webflow adaptera donc votre barre de navigation, même si vous utilisez les autres méthodes et que vous prenez une directement dans l'onglet Éléments Il faudra cela et analement, il sera réactif par défaut n'y a donc aucun réglage spécial à effectuer pour qu'il apparaisse ainsi sur mobile ou tablette. Il le fera par défaut, et vous pourrez les modifier en conséquence pour les façades et les éléments habituels. Ce que nous allons faire ici, c'est adapter cela à notre marque. N'oubliez pas que nous sommes la page d'accueil de Tesla Inspires. Ce bouton est donc livré avec une classe par défaut de Bustin primary Nous allons changer cela simple bouton et nous allons passer, je pense que nous allons simplement passer au format moyen ici. Ensuite, nous le rendrons noir. Maintenant, cela est inclus dans toutes nos polices. Mais ce que nous devons faire ici, c'est modifier le réglage du navlink Si c'était différent, je l'aurais supprimé et changé en Nav link est la classe générale à laquelle j' irais si j'avais fait cela. Nous voulons remplacer la police par «   chemin de fer » et laissez-moi voir cela une seconde. Oui. Nous voulons que la taille de police soit de 18. En fait, je pense que c'est trop gros. Revenons-y. Le bouton, je vais le réduire à la taille. OK. Ensuite, nous en inverserons la couleur Revenez pour cligner des yeux. Railway, ça va faire 16, puis nous y arriverons, je pense que nous allons le faire à moitié audacieux. Oui. Alors nous ferons de même ici. Les classes que celui-ci a utilisées par défaut Webflow. Ce sont les classes que je créerais de toute façon si je les créais à partir de zéro Pour votre liste déroulante, c'est le nom de la classe que nous utilisons Je voudrais simplement les copier. vous en ferez, plus vous les mémoriserez, plus vous prendrez l' habitude de simplement les utiliser. Nous allons faire de même, voici ce que je suis. Et puis je ne me souviens plus des poules ou des demi-finales. Cool. Maintenant, tout cela va se conserver. En fait, je vais juste aller de l'avant et je vais les conserver à des fins d'illustration, mais aucune de ces longueurs ne sera active Laissons-les donc tels quels pour le moment. Je vais changer celui-ci. Nous pouvons changer cette vue la dernière chose que nous voulons faire est d'ajouter le logo. Vous trouverez donc le logo dans le fichier que j' ai pour vous sur le cours que vous pouvez télécharger. Nous allons donc choisir des images, télécharger une image. Et je vais aller le télécharger et je l'ai ici, et c'est un logo. C'est un logo vectoriel, un vecteur raconte un logo. C'est du SVG. Vous ne pourrez pas vraiment en changer grand-chose. Mais lorsque vous le téléchargez, tout va bien. Si ça ajoute. Nous y voilà. Je vais le démonter. Génial. Nous y voilà. Il s'agit essentiellement de courses ou Na doit toujours être lié. Mais encore une fois, nous créons simplement une page de destination ici. Je ne vais pas avoir à relier tout cela, mais c'est ce que vous feriez ici. Si vous allez de l'avant et que vous essayez de créer un site Web complet à partir de cela, si vous ajoutez des liens vers votre barre NaF, vous le feriez dans les liens ci-dessous et vous sélectionneriez votre page ou vous pouvez sélectionner une section de la page, qui est plus probablement ce que nous allons faire avec cela J'y reviendrai un peu plus tard. OK. Donc oui, il s'agit essentiellement d'une barre NaF, et elle est évolutive, comme vous pouvez le voir, ramenez-la dans quelques modes gratuits Donc, si je le retire, cela augmentera et diminuera avec moi. Comme je l'ai dit, d'après mon expérience, j'ai fait beaucoup de ces choses peuvent généralement être très simples, mais elles peuvent devenir très compliquées très rapidement, selon ce que vous essayez de faire, surtout si vous avez une idée vraiment précise en tête de ce que vous essayez de créer Dans ce cas, cela ne me dérange pas vraiment, ça a l'air très bien. Mais à part une chose que je vais régler. Mais si c'était le mien et que je tiens vraiment la marque et à m'assurer que c'est une façon vraiment particulière, je pourrais y être pendant longtemps. Donc, dans ce cas, cela peut vous prendre 10 minutes, mais une autre fois, cela peut prendre beaucoup plus de temps. Mais oui. C'est ça. Je te verrai donc dans le prochain. OK. 7. Leçon 5 Créer un symbole: C'est bon. Il y a une dernière chose que je voulais ajouter à propos de la barre de navigation. Lorsque vous avez créé votre barre de navigation, vous la stylisez correctement. Tout ressemble exactement à ce que vous voulez. La dernière chose qui doit en faire un composant. Un composant revient essentiellement à cette idée d'éléments réutilisables. heure actuelle, nous utilisons des éléments réutilisables au sens de classes. Nous avons ajouté des classes aux éléments pour faciliter notre travail de développement. Mais la création d'un composant crée essentiellement un élément fixe que vous pouvez glisser-déposer sur n'importe quelle page, ce qui facilite grandement les choses. Cela contribue à rendre votre processus de conception à nouveau plus efficace. Donc, ce que nous allons faire ici c'est cliquer sur Navbar. Maintenant, vous voulez vous assurer que vous avez bien cliqué sur le tout. Dans mon cas, puis nous allons ici et nous allons créer un nouveau composant, et nous allons simplement l'appeler N, ce qui se passera, c'est que si, à titre d'exemple, je vais les guides périmés et que je veux ajouter cette barre de navigation, je reviens simplement aux composants, puis je peux simplement le faire glisser À. Ensuite, je peux littéralement le prendre et l'ajouter en haut de ma page comme ça. De toute évidence, cela ne semble pas correct. Donc, ce que je vais faire, c'est rapidement rester comme ça. Et comme vous pouvez le voir , ils ont une barre NaF sur notre page Sale Gate C'est donc terminé pour le bar Nath. Si vous avez des questions, laissez quelques commentaires, et je serais heureuse d'y répondre . Je vais donc voir le suivant. OK. 8. Leçon 6 Créer votre section de héros: C'est bon. Maintenant que nous avons créé la barre NaF, la prochaine chose que nous allons faire est créer la section des héros Maintenant, si vous ne savez pas ce qu'est la section héros, la section héros est simplement la bannière qui apparaîtra au-dessus des plis de la page. Donc, en gros, c'est la première chose que les gens vont voir lorsqu'ils visitent une page en particulier. Dans ce cas, s' il s'agit de votre page d'accueil, c'est la première chose que la plupart des gens verront lorsqu'ils visiteront votre site dans son ensemble. Euh, ils ne vont peut-être pas plus loin. Il se peut qu'ils ne regardent rien d'autre sur le site. Ils ne défilent peut-être même pas, mais la première chose qu'ils verront, c'est la section des héros. Donc, vous voulez que ce soit le meilleur possible, en gros. C'est donc là que vous verrez généralement des vidéos ajoutées en arrière-plan. Vous verrez les spécialistes du marketing et les concepteurs consacrer le plus de temps et d'efforts possible à ce que cette section soit aussi convaincante que possible Et dans ce cas, nous allons juste essayer et oui, nous allons essayer créer une bonne section de héros qui attirera les utilisateurs. Nous allons donc ajouter une nouvelle section. Encore une fois, je pense que je vais construire cette pièce à partir de zéro, mais je vais juste le mentionner au cas où vous voudriez suivre cette voie. Vous pouvez simplement ajouter une section de héros à partir de l'une de ces mises en page si vous le souhaitez Vous n'en tirerez pas le meilleur parti point de vue de l'apprentissage, mais vous pouvez le faire si vous le souhaitez des sections sur les héros que vous pouvez ajouter ici. Ils ont des modèles. Mais ce que je vais faire, c'est le créer à partir de zéro juste pour que vous puissiez voir le processus complet et ce que vous devez faire si vous le créez à partir de zéro. Nous allons ajouter une nouvelle section. Dans cette section, nous allons ajouter Diplock. Je vais m'assurer que c' est entré et non. Nous allons donc simplement corriger cela. Je vais m'assurer que ce sont des noms corrects. Section Basic Basic. Récipient de base. C'est l'un des cas où je suis en fait des classes partir de ma section de base et de mon conteneur de base en fonction de la taille et de la proportion que je veux que ce soit. C'est ce que je fais habituellement et j' appelle généralement le héros de la classe, mais j'y reviendrai une fois sur place. Ensuite, à l'intérieur de mon conteneur, je souhaite ajouter un autre verrou. Et je ne sais pas encore vraiment ce que je vais mettre ici, alors nous allons y revenir. Donc, pour la section, ce que je veux faire c'est que le wtf est de 100 % en taille et en proportion Ce que je vais faire d'abord, c'est ajouter l'image, je pense. Je vais simplement prendre toutes les photos que j' ai parce que je ne l'ai pas encore fait. Je vais ajouter toutes les images de mon dossier sur le site. Vous pouvez donc voir ici que nous avons déjà téléchargé l'image Vous devez donc savoir comment procéder, mais nous allons simplement la télécharger. Et puis il y a ces images ici, un seul flux sortant Nous les avons donc tous dans Webflow. Beaucoup de ces images sont assez grandes. D'habitude, je prenais le temps de les réduire à une taille plus petite parce que vous pouvez le voir. Je suis presque sûr que Webflow va les signaler lorsque je les téléchargerai Oui, je l'ai fait. Il semble qu'ils ne les aient pas tous téléchargés, mais la plupart d'entre eux. C'est très bien. Je vais rapidement venir ici et apporter quelques modifications rapides. J'étais déjà installé. OK. Prends-les, mets-les dedans. Et je pense que ça suffira. Je ne sais pas si je vais laisser cela allumé dans la vidéo, mais si vous voulez savoir comment convertir des images en images plus petites sur Mac, alors voilà. Revenons au plein écran ici. Donc, lorsque vous ajoutez de l'arrière-plan à votre section et que je vais ajouter cette classe, vous allez mettre et je vais faire le maximum. Je vais juste en faire quelque chose pouvoir voir l' arrière-plan dans un premier temps. Nous allons le faire, puis nous l'appellerons 500 juste pour que je puisse voir exactement ce qu'il y a ici. Maintenant, ce que nous allons faire, c'est si vous faites défiler la page jusqu'aux arrière-plans, et nous allons ajouter l'image d'arrière-plan. Maintenant, je n'en ai pas encore décidé. Je vais juste suivre le courant, pour être honnête avec vous, mais je pense que nous allons opter pour quelque chose d'un peu plus brillant. Comme l'un d'entre eux, en fait, je pense que celui-ci devrait le faire. C'est vrai. Maintenant, vous avez plusieurs options ici. Vous avez une couverture et un contenu personnalisés. Personnalisé, c'est l'endroit où vous pouvez choisir exactement où sur l'image, ce que vous voulez montrer. La couverture est l'endroit où vous essayez d'afficher l'image entière à l'intérieur, mais vous pouvez toujours sélectionner la partie que vous souhaitez réellement afficher. personnalisation consiste simplement à définir la largeur et la hauteur, vous définissez le tout, mais vous vous retrouvez avec une situation étrange où l'image commence à se répéter Dans ce cas, elle essaie de se répéter trois fois parce qu'elle ne correspond tout simplement pas et qu'elle ne sait pas vraiment ce que vous lui demandez de faire. Nous allons opter pour une coque juste qu'elle tienne toujours à l'écran. Nous allons le centrer et je vais ajuster la hauteur à 800, je crois, peut-être moins que cela, peut-être sept. Oui, puis je voudrais changer la façon dont l' arrière-plan est également assis. Cela ne fera pas trop de différence. Essayons-en six. Ce sera peut-être la pièce maîtresse. Oui, ça a l'air mieux. 600. Ce que je veux faire ici, c'est que ma barre de navigation apparaisse au-dessus de l'image. Ce que je veux dire par là, c'est que je veux qu'il soit placé au-dessus de l'image, et je ne veux pas de fond blanc. Je voulais juste m'asseoir bien. Je veux que tout soit réuni. Ce que nous allons faire, c'est retourner au NaF Bar Et nous allons changer le contexte. Nous allons donc aller ici, et je pense que le contexte vient peut-être de Nope Ça doit venir du conteneur. Non, ça ne vient pas du container. Mais voyons voir, nous allons essayer par le haut. Il y a donc du blanc, peut-être pas. Ce que nous allons faire, c'est créer cette barre de sieste collante, qui signifie simplement qu' en termes de position sur la page, elle n'a pas de trottoir ou qu'elle n'hérite de Il restera donc simplement un élément fixe au-dessus de tout le reste de la page. Et au fur et à mesure qu'il défile, il restera fixe. C'est ce que nous allons faire maintenant. Donc, si je monte ici, pour l' instant, c'est réglé sur statique, mais je vais le changer et je vais le régler et vous pourrez voir qu'il n'y avait pas de fond blanc. Je me suis trompé à ce sujet au départ. Maintenant que j'ai déplacé cela vers le haut, le logo et le texte la barre de navigation se trouvent désormais en haut de la section des héros Mais comme je l'ai changé en correctif, cela a fait quelque chose sur la largeur de la barre de navigation, nous allons donc continuer et corriger ce problème Et nous devons nous assurer qu'elle est réglée sur 100 % de largeur. OK. Parce qu'en ce moment, comme vous pouvez le voir, c'est sur 86. On le fait, c'est fini. Maintenant, je pense que cela semble correct, mais je ne suis pas sûr cette image maintenant que je la regarde. Je pense que je voudrais peut-être le changer si je peux en trouver un plus clair ou d'une couleur claire dans le sens où il n' y a pas de motifs. Je pense que je vais utiliser une image comme celle-ci. Voyons ce que nous avons. Nous allons donc revenir ici, choisir une image. Et celui-ci avec le bleu juste là, on y va. Cela semble 100 fois mieux. Nous pouvons donc facilement voir tout le texte du point de vue de l'accessibilité, personne n'aura de mal à le lire, et l'image de la voiture est beaucoup plus précise, et elle convient probablement un peu mieux en tant que section consacrée aux héros. Maintenant, en termes de texte, c'était la prochaine chose que nous devions faire. Et nous allons monter ici. J'ai déjà ajouté un bloc de développement, nous allons donc y revenir et voir comment cela se passe. C'est en haut. C'est donc là que je vais aller . Je vais y mettre du rembourrage et je ne vais pas encore le cours Je changerai cela plus tard, juste pour que vous puissiez voir exactement où il se trouve maintenant, vous pouvez voir ce bloc de développement ici. Permettez-moi d'y revenir. OK. Vous pouvez voir comment cela se trouve en haut de la page. Si je commence l'un ou l'autre texte, ça n'aura pas l' air correct et j' aurais le singe avec plein de choses pour essayer de l'obtenir si je conservais cette option de mise en page. Mais si je passe à la paire de ce déblocage, qui est le conteneur de base Je vais faire de ce héros le conteneur S for Home. Ce que je vais faire, c'est modifier la mise en page du conteneur. Je vais faire en sorte que tout soit envoyé en gros. Alors voilà. En fait, c'est bon. Maintenant, nous allons continuer et ajouter quelques textes. Il y a quelques points que nous devons prendre en compte avant de le faire. Rappelez-vous que je parlais de placer des classes combinées en dehors de la section de base et du conteneur de la section de base et du conteneur. C'est là que nous allons devoir le faire parce que si je commence à essayer d'ajouter du texte, d'ajouter des éléments et de les déplacer selon la façon dont cela est configuré, sera très difficile pour moi de le faire. Ce que je veux faire, il y a deux choses que je dois ajouter ici Je dois modifier le conteneur de base et modifier le verrou de développement que j'ai ajouté, mais je n'ai pas encore apporté de personnalisations Si nous passons au conteneur de base, ce que nous allons faire, c'est en faire hauteur de 100 %. Quel était le pourcentage, nous allons le porter à 100 et vous pouvez voir qu'il s'adapte désormais à 100 % verticalement et horizontalement. Mais ce que cela me permet de faire, c'est de placer le bloc de la mort au centre, en gros. Maintenant que c'est fait, je peux retourner ici, cela devrait être le cas, et nous pouvons voir les impasses ici au centre Maintenant, nous passons au bloc D et je vais changer le nom de celui-ci en uro Content wrap ou quelque chose comme ça. Encore une fois, vous pouvez appeler vos cours comme bon vous semble. Je suis juste que certaines personnes préfèrent utiliser des codes ou des abréviations pour leurs cours parce qu'elles veulent utiliser de petites quantités de textes Pour moi, je suis une personne assez linguiste, donc j'aime utiliser les mots qui, idéalement, parfois, vous voulez que vos cours soient un peu courts, je trouve juste qu'il est plus facile de les identifier et de les mémoriser. C'est juste moi. Tout le monde est différent. Maintenant que nous avons cela ici, la largeur de tout cela, nous allons refaire 100 %, ce qui est le cas actuellement. Tout comme pour le conteneur, nous allons atteindre une hauteur de 100 %. Ça devient amusant. Vous vous demandez peut-être pourquoi j'ai pris l'impasse et l'ai fait en sorte qu'il soit identique à un conteneur Et c'est parce que lorsque j'ajoute les éléments à ce texte, ce que je vais ajouter et les modifications qui pourraient être nécessaires, il est plus logique pour moi d'avoir mon propre blocage pour tout cela au lieu d' essayer d'apporter modifications directement au conteneur à chaque fois Parce que même s' il s'agit d'une classe combinée, je ne veux toujours pas y apporter beaucoup de modifications Je veux que ce soit assez constant peu importe où je vais, car je pourrais créer une section de héros totalement différente avec une intention complètement différente et je veux montrer des choses différentes, je veux que ce soit complètement différent. classe de combo que j'ai pour la section des héros risque alors de devenir superflue parce que je l'ai personnalisée spécifiquement pour ce que je fais ici Il est toujours logique d' utiliser un nouveau bloc mort là où je le peux et cela n'a aucun impact sur le site. Ici, nous allons ajouter quelques textes. Ce sera la première chose à faire. Vous pouvez voir où cela se passe ici. Pour ce qui est du texte, je vais juste aller vite. Ça va être électrique rapide. Je vais revenir et me changer, je pense. Mais pour que nous puissions y parvenir. Et nous allons y aller, Classe va prendre la direction et nous allons lui en donner une Quelle est la dernière chose que je voulais faire ici ? Nous allons le centrer et cela devrait faire ce que je pense. Maintenant, ce que je dois faire ici, c'est la position selon laquelle le texte est un peu trop haut Je voudrais donc le réduire un peu . C'est là que je peux en venir à l'emballage heedro contents et le modifier en gros Au lieu d'en faire 40, je peux en faire 60, 100, 140. Vous pouvez voir que c'est trop bas. 160, peut-être un peu trop haut, donc nous allons opter pour 65 à peut-être 70. Ouais. Cela semble faire le test pour moi. Maintenant, et si je voulais ajouter quelque chose en bas de cette section, comme juste quelques informations, petits blocs de texte. Ce que je vais faire en fait, c'est ajouter un autre bloc de. Et je vais utiliser ça pour vraiment faire n'importe quoi. Passons à l'action et voyons si nous pouvons simplement ajouter une grille directement à cela. Je vais me débarrasser du déblocage. Je vais effectuer une pile rapide sur le réseau. En fait, c'est une bonne chose, juste une occasion pour moi de le souligner Je dirais que vous vous habituerez à beaucoup utiliser dans le flux Web Les barres vous permettent d'ajouter beaucoup plus facilement des éléments de position, en particulier s'il s'agit de colonnes, d'un peu de texte, éléments que vous souhaitez aligner et qui sont sous forme de grille Vous ne voudriez pas utiliser beaucoup de deplocks comme ça. Il se peut que vous ne vouliez pas utiliser beaucoup de colonnes pour cela. Dans l'ensemble, l'utilisation d'une grille est généralement la solution la plus logique. Vous pouvez voir ici que j'ai ajouté une grille deux par un. Je vais en faire quatre par un. Ensuite, je vais y ajouter des Dlocks qu'il me permet, ce qui n'est pas comme d'habitude Nous sommes donc ici. Nous allons simplement l' ajouter directement dans les cellules. Ça n'a toujours pas l'air d'être dedans. Supportez-moi. J'en fais 20. Et dans chacune de ces cellules, je vais juste le déposer à propos du texte, juste pour que vous puissiez voir pendant que je travaille dessus si cela me le permet, qui ne semble pas être le cas. Je vais juste le prendre, le copier-coller dans chaque cellule parce que je pense que ce serait beaucoup plus facile. Quoi qu'il en soit, nous allons le copier-coller, le coller, le coller ici. Et collez-le ici. Maintenant, avant de commencer à personnaliser tout cela, je veux m'assurer que la position sur la page est correcte Ce que nous voulons faire, c'est revenir à notre emballage de contenu Et la façon dont nous avons cette configuration je pense que je me trompe, est Nous voulons donc passer à Flex. Nous voulons que cela se fasse à la verticale. Et nous voulons que ce soit le cas, nous voulons qu'ils apparaissent en haut et en bas. Alors laisse-moi juste supporter une seconde. Nous y voilà. Nous voulons donc qu'il y ait un espace entre les deux. Je veux donc avoir ma vignette ici en haut, puis tous mes éléments de texte en bas. Donc, ce que nous allons faire, c'est créer cette grille, et nous l'appellerons simplement « grille » n'a pas vraiment d'importance. Nous allons faire en sorte que ça soit OK. 100 %. Maintenant, à l'intérieur, je veux ajouter le texte d'un paragraphe, donc nous allons simplement le prendre et l'y ajouter. Encore une fois, cela va changer, alors ne vous inquiétez pas. Au final, ça aura l' air beaucoup mieux. OK. Maintenant, évidemment, en ce qui concerne les couleurs, le texte et tout le reste, nous sommes sur le point de modifier le contenu. En fait, je ne vais pas trop m'attarder. Quoi qu'il en soit, nous allons commencer à le personnaliser. Nous allons faire le suivi et je vais partager avec vous quelque chose ici. Les h12 345, ceux qui ont été stylisés dans le guide de style. Ils peuvent être appliqués à différents tags. Donc, les paramètres, qui devraient vous être présentés ici, vous aurez ce sont les paramètres de votre tête ici. Celui-ci est correct, évidemment, en haut de la page, le H qui est également votre valeur par défaut. C'est celui que nous allons utiliser. Pour celui-ci, il s'agirait techniquement d'un H deux, et il augmentera proportionnellement sans aucune classe Mais quand je vais ici, je peux en faire un H trois ou un H quatre si je le voulais. Je peux en faire un H cinq si je le voulais, mais cela n'affectera pas le tag. Ce que je veux dire par là, c'est que vous n'avez pas besoin de vous limiter au style spécifique que vous avez créé pour un tag spécifique. Il peut donc être étiqueté H deux, mais en réalité, vous utilisez un style H quatre, quelque chose à garder à l'esprit pendant que vous parcourez cette page. Nous allons opter pour cinq parce que je veux que ce soit assez petit et en vous dirigeant vers H cinq, vous allez choisir les deux. Pgraph, alors ce que nous allons faire, c'est faire en sorte que ce soit aussi petit Et appliquons rapidement tout cela. Pgraph Small. M. D'accord. Et nous devons en changer la couleur car pour le moment, ils ne semblent pas corrects. Nous allons fabriquer chacun d'entre eux des capteurs et je veux qu'ils aient une tête lumineuse. La cellule elle-même, nous devons régler ce capteur. Vous pouvez donc voir que je viens de le changer pour cette cellule et que je vais juste créer une cellule. Parfois aussi pour les cellules. Si vous ne voulez pas les modifier directement, vous pouvez y ajouter un blocage directement dans ce cas, et simplement utiliser la cellule parce que je peux le faire s'il s'agit d'une couche plus compliquée J'ajoute simplement un blocage juste pour me donner une couche supplémentaire de personnalisation si je C'est vrai. Et nous devons nous débarrasser d' une partie du texte ici, donc nous allons nous en occuper. Maintenant, vous vous demandez peut-être si ce texte va certainement devoir changer. Je ne veux pas dire que le texte va devoir changer de lui-même. Je parle du style parce que je ne pense pas que cela ira très bien. Quand je stylise tout cela, je débatte ici, je débatte de Maintenant, c' tout cela, je débatte ici, je débatte de Maintenant, est aussi quelque chose que vous pouvez voir Je fais tout cela individuellement. D'habitude, je me contente de les copier-coller. C'est juste à des fins de démonstration. Cela montre également à quel point il est facile d'ajouter des classes assez rapidement. Ce n'est pas difficile car le Web est assez intuitif Il sait à peu près ce que vous allez lui demander de faire avant de le lui demander car il connaît les classes Como existantes. le moment c'est fait, ce texte ne semble pas correct. Donc, je pense que le texte du paragraphe doit être plus petit. C'est là encore une fois que nous pouvons ajouter une autre classe commune pour que cela fonctionne. J'ai donc besoin que ce soit plus petit. Donc, en ce moment, c'est assis, je pense que 16 personnes peuvent le voir là. Il faut vraiment avoir 14 ans. Donc, ce que je ferais, c'est d'ajouter une autre classe de combinaison, généralement. Dans un monde idéal, je vais tenir compte du fait que je vais avoir besoin d' texte encore plus petit que 16 p. Je l'ajouterais à mon guide de style. Je le ramènerais ici, et je appliquerais dans ce cas, mais pas. Je vais juste créer une nouvelle classe ici maintenant parce que c'est plus pratique et cela me fait gagner un peu de temps. Nous allons donc simplement mettre le petit texte rouge du héros. Et c'est spécifiquement pour cet élément. J'utilise cette couche, et si je réutilise une couche et que je l'utilise à différents endroits, je la renommerai à nouveau Nous allons juste prendre ça et en faire 14. C'est beaucoup mieux et les cent 45 % peuvent rester. C'est bon. Je vais considérer que cela s'applique à tout cela. Je veux voir si je dois rester dans l'obscurité. Et je pense qu'en fait, je pense que je vais le garder noir. Maintenant que j'ai vécu tout cela, vous pouvez voir que cela n' apparaît pas aussi bien que je le souhaitais. Je vais donc aller de l'avant et apporter quelques modifications supplémentaires Je voudrais donc réduire un peu cette grille, et je vais peut-être même en faire dix, en bas. Au niveau de la section, je vais ajouter quelque chose juste pour que cette texture soit un peu meilleure. Si nous revenons aux arrière-plans, nous pouvons cliquer. Nous pouvons cliquer sur Plus, et nous allons simplement ajouter un dégradé. Maintenant, le niveau supérieur de ce dégradé sera zéro transparence, apportez ça, débarrassez-vous de cela. En bas, nous allons le changer en noir, comme ça. Ensuite, nous allons faire descendre ce curseur comme ça. Nous pouvons donc y voir que nous avons créé un contraste suffisant entre le fond et le texte pour que le texte blanc apparaisse correctement maintenant. Mais cela n' interfère pas vraiment avec l'image ou le texte du haut de la page, puis-je simplement les blanchir assez bien maintenant Encore une fois, je ne vais pas passer trop de temps sur la copie ici car il ne s'agit évidemment pas d'une question de droit d'auteur. Je vais mettre Superior. Je n'ai jamais fait fonctionner la télé, je n'en ai jamais piloté, mais si vous pensez que c'est supérieur, alors pour jouer C'est donc un bon exemple de section de héros. Maintenant, vous vous demandez peut-être ce que nous faisons ici lorsque nous voulons styliser, désolé, lorsque nous voulons le rendre réactif. Je vais maintenant ajouter une leçon un peu plus tard sur la réactivité dans son ensemble Mais juste à des fins de démonstration, si je le réduis à une tablette, cela ne semble pas trop mal, mais il y a quelques modifications que je vais avoir envie d'apporter Donc, sur l'emballage du contenu, il va falloir que cela passe probablement à zéro, je pense. Ouais. Et puis, pour ce qui est de la grille elle-même, si vous cliquez sur la grille et juste dessus, vous pouvez diminuer le schéma de l'histoire des marges entre chaque élément, et je ne sais pas vraiment si je veux le faire. Peut-être que je veux le garder exactement là où il est. Mais comme vous pouvez le constater, comme vous pouvez le constater, ce texte ne montre pas exactement en quoi cela semble un peu maladroit de travailler ensemble. Et pour ce qui est de la taille de l'écran, ce texte semble un peu trop grand. Donc, comme j'ai déjà ajouté ma classe de combo, je peux simplement revenir à la typographie, et je vais probablement la remplacer par 12 Je pense que cela semble juste. Vous pouvez voir la différence qui semble plus facile à lire. Ensuite, nous passons aux plus petits, un téléphone horizontal et un téléphone, et c'est là que nous pouvons réellement changer la grille y. Ce que je voudrais faire, c'est me débarrasser de ces colonnes et en faire un quatre par quatre. Et ça a l'air bien, mais ça va à l'encontre de l'image, et je vais devoir augmenter la taille de la section pour que celle-ci fonctionne. Donc c'était 600, supprimez-le progressivement en 100 et nous verrons à ce que nous obtenions. 700 c'est mieux, 800 , c'est trop. Non, en fait, ça va. 800 fonctionne également. Cela me semble bon. Enfin, la dernière chose que nous allons vouloir examiner est le mobile lui-même. Alors maintenant sur mobile. Celui-ci a vraiment l'air bien. Je dois juste étendre encore une fois cela un peu plus loin, juste pour que le texte ne gêne pas. Et je voudrais peut-être faire ressortir ce dégradé, mais surtout pour que le texte soit toujours facile à lire plus haut dans la page, où il est écrit plus rapidement et plus efficacement. Nous allons passer à la section. Nous allons porter ce chiffre à 900. Ça a l'air mieux. Nous allons passer aux arrière-plans, et nous pouvons y voir notre dégradé d'arrière-plan. Nous allons le ramener un peu et cela semble déjà beaucoup plus facile à lire Maintenant, vous remarquerez que je ne vais pas m'attarder sur ce point dans le cadre de cette démonstration, mais c'est une illustration des lesquels les barres à pression peuvent devenir assez délicates Vous pouvez voir ici, lorsque je commence à faire défiler la page, que les éléments se sont corrigés, et cela deviendra plus évident fur et à mesure que nous en ajouterons sur la Mais le noir ne va pas apparaître correctement au fur et à mesure que je descends la page et les éléments ne sont pas dynamiques Ils ne changeront donc pas de couleur lorsqu' ils survoleront des éléments plus foncés ou plus clairs. Ce que je voudrais vraiment ici, c'est une interaction ou une animation qui, lorsque je commence à faire défiler l'écran, devient blanc Maintenant, je ne vais pas travailler sur les interactions ici, mais sur le cours principal qui fera suite à celui-ci, qui s' appellera Mastery for Web Flow ou quelque chose comme ça. Lorsque nous aurons développé ce site Web pour en faire un site Web Tesla à part entière avec tous les véhicules et tout le reste, vous me verrez créer interactions et je vais en fait développer davantage, mais nous allons simplement le laisser comme ça pour le moment. Mais tu peux voir que ça a l'air bien. À mes yeux, c'est une section de héros complète, aussi bonne que Tesla ne l'est peut-être pas En fait, maintenant que j'y repense peut-être l'agrandir un peu. Alors redescendez pour éloigner mon visage de la section. Et je vais en faire 700. OK. Batteur. Oui, c'est sûr. Pas d'espace restreint, mais plus d'espace. L'espace est votre ami en matière de design et de sites Web. Ceci, à mon avis, après avoir examiné un grand nombre d'entre eux. Cela serait considéré comme une très bonne solution. Elle met l'accent sur le véhicule. Nous recevrons le texte ci-dessous et ci-dessus. Si nous en faisons une bonne copie, ce serait probablement très convaincant. Maintenant que nous avons créé notre section héros, la prochaine chose à faire est d'ajouter du contenu à cette page et d'en faire une page entièrement formée. ce que nous allons faire. Je te verrai dans le prochain. 9. Leçon 7 Créer le corps de votre page: C'est bon. Nous venons de terminer la création de notre section consacrée aux héros. La prochaine chose que nous devons faire maintenant est commencer à remplir le reste de cette page. Je n'y ai pas trop pensé dans ce cas. Si vous avez suivi mes conseils dans vidéo précédente et que vous avez essayé de créer un cadre métallique ou si vous vous êtes inspiré de la page que vous essayez de créer, c'est génial. Dans ce cas. Je vais juste suivre le cours. Ce ne sera pas une page énorme. Tout ce que j'essaie vraiment de faire ici, c'est de couvrir toutes les structures de base des mises en page de base que vous allez probablement implémenter La première que nous allons faire est créer une colonne de base. En gros, en raison de la disposition des colonnes. Je vais prendre une section contenant. Et en ce qui concerne les colonnes, vous pouvez faire deux choses. Webflow tout en bas. Ils avaient l'habitude d'y mettre beaucoup plus d' importance qu'ils ne le faisaient. Maintenant, ils utilisaient Quickstak pour tout. Vous pouvez donc utiliser les colonnes ou la fonction de grille ici. Je ne recommanderai pas le déclamage, car vous n'avez pas vraiment à vous soucier de l'un ou l'autre de ces éléments Je me concentrerais simplement sur l'utilisation de Quicksta pour tout. C'est beaucoup plus facile, répondez à tous vos besoins et vous n'aurez pas à passer de l'ancien système de mise en page DRI au système de colonnes Il suffit donc d'utiliser Quickstak. Nous allons donc le faire glisser Ensuite, je vais rapidement m'assurer que j'y ai correctement ajouté mes classes . Nous allons donc passer à la section de base. Récipient de base. Ensuite, je vais appeler cette grille à deux colonnes. Et nous allons faire des centaines de mots. En termes de background. Ce sont là deux choses que nous pouvons faire ici. Nous pouvons l'un ou l'autre maintenant, je vais juste le rendre noir. Je reviens et j'ajoute une image, pas encore vraiment décidée, pas encore vraiment décidée, mais nous allons juste en ajouter une autre. Nous allons aller ici et nous allons littéralement le rendre noir. Ensuite, dans la cellule, nous allons ajouter un autre diplo et c'est ce dont je parlais tout à l'heure, c'était juste un peu plus de personnalisation Je vais ajouter une image ici. D'accord, nous allons choisir une image. L'image vais-je choisir ? Telle est la question. Encore une fois, si nous nous concentrons vraiment sur le contenu de cette page et sur tout le reste, nous créerions quelque chose qui pourrait porter sur l' accessibilité, l'intérieur ou les spécifications du moteur, etc. heure actuelle, nous nous concentrons uniquement sur les couches et utilisons réellement le flux Web. Nous allons donc opter pour quelque chose comme ça, je pense. Ensuite, ici, nous allons ajouter un autre bloc d'affichage, nous allons ajouter un paragraphe. Nous allons ajouter un titre au-dessus et en dessous, nous allons ajouter un bouton. Nous allons créer un titre , puis nous allons en faire un H deux. Nous allons y arriver, nous ne voulons pas qu'il soit censuré. Nous allons y arriver. Fais-le cap. J'ai dû créer une autre classe ici appelée Light Heaven parce que je veux garder à gauche. Je veux la garder à gauche comme titre standard. Je veux le rendre blanc. Mais comme je n' utilise pas le centre puis la classe combinée light heading, je veux supprimer le centre. Je dois créer une nouvelle classe qui la rendra blanche. Encore une fois, c'est juste quelque chose que vous devez faire de temps en temps, mais ce n'est pas si grave. Je vais probablement demander à faire de même avec celui-ci, ce qui est normal. Paragraphe. Nous allons utiliser les standards, nous allons suivre les paragraphes, et nous allons faire en sorte que ce soit blanc. Mais je pense que nous allons vraiment faire le petit. Je n'aime pas trop les stands, peut-être que je les laisse trop grands. C'est mieux Ensuite, nous ferons le. Je pense que ça ira. Maintenant, si nous les examinons, j'ai l'air bien dans l'ensemble, mais je veux m'assurer que le schéma est un peu plus précis, nous allons en mettre peut-être 40. Je pense que nous allons opter pour 4020 de ce set puis en termes de g, nous allons choisir d' abord ici et 40 ci-dessous. Je pense peut-être tisser plus d'espace, donc peut-être 60100100 ici Il vaut mieux tisser plus d'espace. Et je vais mettre l'intérieur. C'est une section terminée. Ensuite, nous allons passer à une autre section consacrée à la mise au point de l' image. Ci-dessous, je vais ajouter une autre section. Un autre développeur. Et ce que nous allons faire, c'est créer une autre rubrique et créer un autre développement. Ensuite, nous allons créer un paragraphe et en dessous, nous allons créer un bouton. Et vous verrez où je veux en venir dans une seconde. Nous allons donc revenir ici, section de base. Vous le remarquerez donc au fur et à mesure. Je n'ai pas travaillé sur la réactivité pendant que je le faisais, mais je vais y revenir et le faire à la fin Alors celui-ci sera un conteneur de base. Et puis pour cette section, je vais faire des arrière-plans. Un. Et ici, nous allons nous assurer d'avoir une image. Nous allons choisir une image. Donc, une solution que nous pourrions probablement être assez frappante, je pense qu'elle serait une bonne chose. Je veux dire, nous avons beaucoup de choix ici. Peut-être que celui que nous avions initialement peut être un bon début pour cela Nous voulons nous assurer que la hauteur de la section est adéquate, nous allons donc atteindre 800. Et je m'assure juste que c'est correct au fur et à mesure. Et j'ai besoin d'un emballage ici, quelque chose que vous remarquerez qui n'a pas été ajouté Je dois donc entrer dans le contenant, puis je vais y mettre tout le reste Je vais juste appeler ça « contenu ». Non, comme je vais le faire pour vos wrappers, c'est peut-être simplement avoir une classe de base de wrapper de contenu Et puis en plus de cela, vous voudrez peut-être ajouter une autre classe de combo pour rendre les choses plus spécifiques, mais encore une fois, c'est entièrement pour vous. Et puis, encore une fois, content wrapper, nous allons y aller. Nous devons en faire une largeur de 100 %. Nous faisons la hauteur à 100 %. Et répare, c'était le conteneur. Cela devrait être réglé un peu différemment. Ensuite, avec le trappeur de contenu , nous allons faire en sorte que cela soit flexible, descendant et nous voulons m'assurer que c'est étiré, mais je ne pense pas qu' il le fasse encore Je vais le faire pour que vous puissiez le voir , mais cela ne semble pas correct, nous devons donc ajouter un peu de rembourrage Il y a certaines choses que nous devons faire , par exemple photographier à la hauteur de la section, car il se peut que nous soyons trop grands pour atteindre nos objectifs. OK. Et nous voulons que ce soit centré cette fois-ci, et nous voulons que ce soit comme si et pour sortir de l'impasse, encore une fois, nous voulons en faire un centre OK. Je vais juste ajouter quelque chose au bouton. Je m'en soucie. Une fois que vous avez fait cela pendant un certain temps, cela finit par devenir une seconde nature. Cela prend du temps, bien sûr, mais Webflow n'est pas aussi difficile que ce que certains prétendent. Je pense que c'est une plainte courante que j'ai eue à ce sujet à propos de Rigid. Je comprends d'où viennent les gens pour cela, mais lorsque vous faites ce type de travail assez longtemps, vous commencez à en apprécier un peu plus les contraintes. Emmaüsally a une structure avec laquelle tu travailles . Quand vous connaissez, vous savez, d'autres plateformes comme Wicks, que j'utilise de nombreuses fois maintenant Je ne suis certainement pas très fan de. Et cela ne veut pas dire que ce sont de mauvaises plateformes. C'est juste que lorsque vous commencez à essayer de faire des choses plus compliquées ou que vous voulez vraiment réduire certaines choses ou, selon moi, l'essentiel est la complexité. Si vous commencez à utiliser la complexité typographique de votre projet, wx n'est pas celui à utiliser je ne dirais pas qu'il n'en a pas vraiment mon avis, je ne dirais pas qu'il n'en a pas vraiment les capacités, mais là encore, chacun a sa propre opinion. Quoi qu'il en soit, nous allons l' apporter d'accord. Déposez ça et tout devrait bien se lier. Je pense que pour le moment, nous devons en modifier la largeur car vous remarquerez qu'avec ce paragraphe en bas, il est beaucoup trop large si nous en parlions, nous examinions l'expérience utilisateur et le design, ce n'est pas une bonne expérience utilisateur et ce n'est pas une bonne utilisation du design. Nous voulons que cela attire beaucoup plus de clients. Nous allons donc en faire 60, puis je dois m'assurer qu'il puis je dois m' s'agit de capteurs. OK. Nous y voilà. Ce que je vais faire à nouveau avec notre historique, c'est ajouter autre chose à cette section. Encore une fois, il s'agit de s'assurer que le texte est lisible. Celui-là va bien. C'est celui que nous allons voir au milieu. Débarrassez-vous de la transparence de celui-ci. Au final, nous allons ajouter une autre couleur, qui sera simplement bla Vous pouvez le voir là-bas. Ça a l'air. OK. OK. Je vais simplement donner la priorité à la performance du fonds. Encore une fois, c'est une autre section. Ne pas trop y penser. L'avantage de ce type de mélange de pages, je veux dire que c'est le mérite de Ted, cela n'a rien à voir avec moi, mais la qualité des images est vraiment excellente. Je pense que si vous traversez cette période, que vous travaillez sur votre propre projet et que vous essayez de donner vie à vos propres idées. Vous ne pouvez pas, vous ne pouvez pas sous-estimer l'importance. Je ne peux pas sous-estimer l'importance d'avoir de bonnes images Et qu'il s'agisse de votre produit. Je veux dire, ce sont techniquement des images de produits que nous examinons. Ils sont tellement élevés , tellement élevés. Mais si c'est le cas, vous devez simplement essayer de vous assurer que le contenu est aussi élevé que possible. Parce que cela réunit tout le reste et rend les choses tellement plus faciles. OK. Cette section est donc terminée. Maintenant, nous allons passer à Nous allons suivre cette section. Encore une fois, il ne s'agit que d'un copier-coller, mais nous allons placer cette pâte en bas, puis nous allons en retourner le contenu. Et celui-ci va entrer dans la cellule suivante. Nous allons changer l'image. Quelque chose comme ça. Sois un bon engin qui redevient beau. Nous allons évidemment changer le texte comme vous l'avez fait, donc je vais dire que je ne sais pas. Drive peut donner peu d'importance au contenu de la page de destination. Mais dans l'ensemble, je pense que du point de vue du design, je pense que c'est total. C'est ce que nous ferions , et très bien. Une fois cette section terminée, je vais l'appeler là pour le corps de la page. Vous pouvez donc voir à quel point c'est facile à assembler. Ce n'est pas trop complexe, je ne dirais pas. Ce sont des mises en page assez simples, mais plus vous ferez ces effaci, plus vous vous y sentirez à l'aise Webflow fait plus peur qu'il n'y paraît. Ce n'est pas si difficile à utiliser. Je vais comprendre que c' est une plateforme vraiment très utile. Je vais donc l'appeler ici pour le moment. La prochaine chose que nous devons faire, c'est créer une section dédiée à la génération de prospects, assez standard que une section assez standard que vous verrez sur de nombreux sites Web, et que vous voudrez probablement utiliser vous-même. Ensuite, nous allons créer le fzer, nous allons partir de là Alors, à voir dans le suivant. 10. Leçon 8 Créer votre formulaire de génération de prospects: OK. Maintenant que nous avons le corps de notre page. L'une des dernières choses que je veux faire sur cette page est de créer une ferme de notre génération. Les fermes jouent un rôle important dans Webflow et elles jouent un rôle important parce qu'elles sont elles jouent un rôle important parce qu'elles tellement personnalisables, et c'est quelque chose que l'on ne trouve pas sur beaucoup d'autres créateurs de sites Web et même de créateurs de formulaires La plupart du temps, vous ne pouvez pas vraiment faire grand-chose pour personnaliser les formulaires, leur apparence, la façon dont ils interagissent, les interactions avec le pointeur ou l'animation du survol Il y a beaucoup de choses que vous pouvez faire sur de nombreux autres formulaires que vous pouvez obtenir sur ces autres plateformes. Mais avec Flow, vous pouvez styliser exactement comme vous le souhaitez. Je voulais prendre le temps plonger dans les formulaires en particulier, car normalement je les ajoutais plus tôt dans le processus lorsque vous créez votre guide de style, c'est là que je travaillais dessus, puis vous les importiez simplement dans la page de votre choix. Mais dans ce cas, je veux agir, je veux y aller étape par étape. Nous allons revenir au guide de style. Nous allons y faire toutes les configurations dont nous avons besoin. Ensuite, je vais ajouter une nouvelle section ici et je vais donner l'impression que je vais l' adapter à cette page J'espère qu'elle sera rapide et qu'elle aidera à contribuer à cette page. Revenons à une porte désuète. Je vais faire défiler la page vers le bas ici. Nous allons créer une autre nouvelle section. Tu es juste indulgent avec moi. C'est une chose avec laquelle nous pouvons être assez embrouillés, à savoir que lorsque vous placez des sections sur une page, elle ne l' aime pas trop parfois Nous allons en venir au bouton. Delo à l'intérieur. Un autre bloc de développement à l'intérieur de ces classes s'ajoute. Le contenant. Ensuite, nous allons ajouter que nous allons simplement appeler ce formulaire « se référer ». Je vais probablement l'utiliser sur la page Landon, mais nous verrons. Nous allons gagner 100 %. Et nous allons également faire celui-ci à 100 %. Je vais juste ajouter un bloc-notes et de la place. Faisons en sorte que ce soit un peu plus facile à voir. C'est vrai. Ensuite, nous allons simplement faire glisser un formulaire et je vais passer en revue tout cela avec vous étape par étape. L'essentiel que nous essayons de faire ici, comme nous l'avons fait avec tous les autres éléments du style c'est juste pour faire un bref récapitulatif Nous ajoutons le formulaire. Nous allons ajouter les bonnes classes par style, puis nous pouvons prendre cette forme et ajouter ces classes n' importe où sur le site. Faisons donc simplement glisser un formulaire et nous allons commencer. OK. Il s'agit simplement d'un formulaire très basique, mais il y a d'autres éléments que je voudrais ajouter ici, car il existe d' autres fonctionnalités que vous pouvez avoir avec les formulaires Webflow Vous pouvez donc avoir votre bloc de formulaire, puis nous obtenons des étiquettes, comme nous avons déjà vu une case à cocher. Ensuite, nous voulons ajouter un bouton radio. Si ça me permet. Si on y va. Ensuite, nous allons ajouter une liste déroulante. Et puis recapture. Je vais juste passer en revue tout ça. Nous allons en parler, et nous allons simplement les personnaliser. Commençons donc par les libellés des champs. Donc, je vais juste ajouter des étiquettes, nous voulons créer ce chemin de fer. La police peut simplement en dire long à ce sujet et nous allons simplement prendre cette classe, et nous allons l'y ajouter. C'est vrai. Les entrées sont importantes. Je veux dire, c'est ce que les gens vont taper. Vous voulez vous assurer que les utilisateurs reçoivent les bons commentaires de leur part. Vous devez vous assurer qu'il est facile à saisir, à lire et à comprendre. Allons-y donc et cultivons les intrants. Nous allons nous assurer que la topographie est réglée sur une voie ferrée Dans celui-ci en particulier, je veux faire le point culminant Je pense que nous allons opter pour 30 40. Je suis sûr que d'habitude. 50 Je vais dire 51. Ensuite, nous allons simplement y ajouter du texte d' espace réservé pour que ce soit plus facile à comprendre Nous allons donc, je vais juste ajouter en fait. Ici, je vais faire de même. OK. C'est vrai. Et je pense que j'aimerais qu' ils soient incurvés. Pour le moment, ça a juste l'air un peu carré. Donc, si nous descendons vers le bas, il se peut que je doive ajouter plus que cela. Peut-être sept pieds, je devrais le faire. OK. Et la taille du texte à l'intérieur me fait penser à 16 à 181618 Je pense que 18 ans c'est mieux. Et ici, je vais juste changer légèrement le pad. Je veux 20 par taille, pas 12. J'avais l'air le plus beau. Et puis je ne veux pas vraiment de frontière. Ce que je veux, c'est une ombre en forme de boîte, donc si on descend vers le bas. Et c'est très bien pour une ombre en forme de boîte, et nous n'avons pas besoin de trop la changer. Je ne suis pas très rapide à ce sujet. Nous avons donc une bordure grise. Encore une fois, parce que G va beaucoup parler pour nous. Nous n'avons pas vraiment à nous inquiéter pour la frontière. L'ombre de la boîte permet simplement voir si nous la regardons sur un fond blanc, mais dans l'ensemble, c'est normal. La seule chose que je changerais vraiment ici, et c'est une autre interaction à ajouter, nous allons ajouter une transition et ce sera la couleur de la bordure ou oui, nous allons en faire une couleur de bordure. Et lorsqu'un utilisateur est concentré et que le focus signifie qu'il tape activement à l'intérieur, nous voulons que la couleur des bordures change. Et nous allons le changer en « Je veux le changer en rouge ». Je vais juste essayer de m'asseoir ici, je pense. Non, en fait, nous allons le changer. Oui, nous allons le changer en rouge. Nous allons le remplacer par ceci. Nous verrons à quoi cela ressemble. Maintenant, si je passe à l'aperçu, si je commence à taper dessus, vous verrez les modifications. Une dernière chose à changer est la couleur du texte et quelqu'un est en train de taper dessus parce que c'est trop clair pour le moment. Nous allons donc venir ici. Et j'espère changer. OK. Nous y voilà. C'est ce que nous voulons. C'est bien. Vous verrez ici que les planches changent de couleur. C'est quelque chose que vous avez probablement remarqué lorsque vous interagissez avec de nombreux sites Web. Nous sommes habitués à ce genre de petites choses. Chaque entreprise le fait de manière légèrement différente. Mais l'essentiel ici est de donner un feedback à l'utilisateur. Si cela devient rouge à part le curseur qui clignote sur eux pour taper, cela leur indique simplement qu'ils ont cliqué dessus et qu'ils peuvent commencer à taper un élément d'accessibilité C'est une question de design. C'est bon pour l'expérience utilisateur, c'est l'essentiel. Nous pouvons venir ici et je vais prendre le formulaire de saisie. Je vais l'appliquer ici. OK, donc ça a déjà l'air mieux. Maintenant, pour la case à cocher, ce sera à nouveau similaire, mais nous allons changer la police en chemin de fer, ce n'est pas l' habitude de faire grand-chose d'autre OK. Et nous allons changer de radio en radio. Je viens de le faire sans ajouter de classes personnalisées car je sais que ce sont les classes que je veux utiliser pour cela et vous pourrez ensuite voir si elles seront examinées si vous les cochez ici Radio Radio doit être attentive aux questions, elle ne fonctionnera donc pas ici. Je suis presque sûr que cela ne fonctionne pas non plus si vous testez. Cela ne fonctionnera pas en mode gratuit, vous devrez le tester sur le site en direct ou sur un lien d'évaluation Enfin, nous avons ceci Maintenant, je vais prendre formulaire de saisie et je vais le mettre ici. Et ce sera probablement bien, en fait. Vous remarquerez donc que cela restera gris. Laisse-le comme ça. N'essayez pas de le changer. C'est l'un de ceux de We Fell Forms. C'est un peu plus rigide. Je recommanderais simplement de le laisser tel quel. Et lorsque vous apparaissez, vous n'avez pas à vous soucier du menu déroulant ou de quoi que ce soit d'autre, car il vous propose vos options, et ce sont les options que vous obtenez. Et c'est vraiment ça. Maintenant, reprenez, c'est une question sur laquelle je voudrais consacrer une seconde. Donc, si vous avez activé la recapture, je vais passer à la phrase du site parce que c'est là que cela doit être activé Donc, si la recapture est active, elle doit être ajoutée à chaque formulaire du site Web S'il n'est pas actif, vous ne pourrez pas l'utiliser. Activez-le aussi fort que possible, il vous suffit de créer une clé allant de la lecture au repos de Webflow Ce n'est pas trop compliqué. Tu vas dans des fermes. Ensuite, nous allons ici pour récupérer la validation. Ensuite, nous nous inscrivons pour le Royaume-Uni. Vous pouvez donc voir que j'en ai déjà quelques-uns ici pour différents sites Web. Vous voulez simplement en ajouter un ici. Je vais juste couvrir ce site Web sur le modèle 3. Celui que vous utilisez est la version 2. Oui. C'est la version deux et je ne suis pas une boîte de discussion robotisée. C'est celui que nous pouvons utiliser. Le site Web ne prend en charge que celui-ci. C'est celui que vous voulez vous assurer d'utiliser à chaque fois. Et puis nous n' avons pas le domaine ici. Eh bien, dans ce cas, je vais juste devoir en mettre un dans le site Web du modèle 3. Point com. Quand je le ferai, je recevrai deux clés que je pourrai prendre et il vous suffira de les prendre, de les copier, les coller à nouveau dans Webflow et ici Assurez-vous qu'il est activé pour enregistrer vos modifications. Ensuite, après les avoir publiés, vous commencez à recapturer tous vos formulaires Bref, c'est de la recapture. Encore une fois, si vous l'activez, il doit être ajouté à tous les formulaires du site. C'est une idée fausse courante qui vous évitera des maux de tête si vous vous souvenez de cette seule chose Nous allons donc revenir au guide de style ici. Dans l'ensemble, c'est essentiellement à part le bouton en bas. Nous devons changer cela. OK. Encore une fois, comme nous avons déjà créé les classes de boutons, celles-ci peuvent simplement être ajoutées. En général, vous devriez utiliser un gros bouton pour votre bouton d'envoi. C'est à peu près ça. Il n'y a pas grand-chose d'autre à cela. Maintenant que nous avons créé les classes de formulaires , nous en sommes satisfaits. Nous pouvons rentrer chez nous et nous allons commencer à créer cette section de formulaire. Assurons-nous simplement d'avoir correctement le conteneur de base de la section Basic. Verrouiller. Ensuite, nous allons ajouter un wrapper de formulaire ici en fait Je pense que c'est juste le meilleur pari. Parce que j'ai déjà ajouté emballage de formulaire dans le portail périmé, mais je sais que je vais devoir me changer ici Ensuite, nous allons ajouter un bloc de formulaire. Et ce que nous allons faire ici, c'est changer l'arrière-plan de la section en quelque chose de sympa. Cela correspond donc au thème du reste du site Web. Nous allons donc passer à la section et je vais passer à l'arrière-plan de l'image pour que la hauteur de ce soit probablement à nouveau 800. Peut-être pas aussi gros que ça. Peut-être que c'était 600. Une fois que c'est fait. Prends ça et nous ajouterons une image. L'image pour choisir n'importe laquelle ici que je cherche est en fait assez similaire à celle-ci ou à l'une de ces images rouges. C'est plutôt sympa, sauf la couverture officielle de l'image. Je pense donc que nous allons choisir quelque chose de différent. Quoi ? Je ne sais pas quoi penser de celui-ci. Oui, allons-y pour quelque chose comme ça. Je pense. Maintenant, ce que nous voulons faire, c'est simplement appliquer les classes à ce formulaire. Et je pense que nous allons changer certaines choses, mais je vais vous le montrer. OK. Vous pouvez donc voir que c'est le formulaire qui va avoir un énorme contraste avec le fond, non ? Et c'est quelque chose que tu peux quitter et travailler, mais j'essaierai toujours de l'éviter. Et je vais vous montrer ce que je fais habituellement pour essayer de le faire. Donc, pour l'étiquette, et ensuite nous allons opter pour les blancs. OK. C'est vrai. OK. Donc, pour ce qui est de la contribution, je vais m'assurer d'avoir à nouveau une place ici. Passons à mail.com Si nous voulons ajouter. Je vais juste ajouter une zone de texte ici également. Je continue. Et je ne pense pas que j'ajoute un Et puis, au final, nous devons essayer de le faire un peu. Cela peut être assez fastidieux, comme vous pouvez le constater, mais cela en vaut la peine au final et le résultat final sera satisfaisant, réel. 18. Il va falloir que ça arrive. Oui, c'est bon. Je pense que je suis tous les deux constants. Oui, c'est bon. OK. Maintenant, ce que je veux faire, c'est que je ne veux pas que l'image ressemble à l'image de fond, désolée, j'ai l'impression qu'elle est séparée du formulaire. Je veux que tout se mélange. Je veux que ce soit de belles années d' expérience lorsque quelqu'un interagit avec Donc, pour ce qui est de la contribution je vais faire le plus cool, nous allons mettre Nous voulons nous entraîner Dark Bros. Ce que nous allons faire ici Le contexte n' a pas encore été décidé. La première chose que nous allons faire est de réduire opacité à 75 % ou 50 %. Peut-être que vous voulez juste qu'elle soit suffisamment mélangée à l'arrière-plan, mais vous ne voulez pas qu'elle soit transparente C'est la première chose que nous allons faire. Il se peut que je revienne et que je change cela, mais supportez-moi. Ensuite, nous allons changer la couleur du texte p en général, mais je vais également changer la couleur de l'espace réservé pour soit complètement blanche, juste comme ça Les planches sont la bordure, je pense qu'elle va être complètement blanche, elle va être noire. Je pense que nous allons opter pour le blanc. Je pense que cela permet de maintenir l' accessibilité à un niveau assez élevé. Alors, si je passe juste en revue ceci, assurons-nous de ce gâchis. Ça a l'air bien. Nous allons suivre ce cours, nous allons le mettre ici. Ensuite, nous allons également le mettre dans la zone de texte, mais je dois m'assurer que le texte est à nouveau blanc et que cela prend 2 secondes. Génial. Alors, regardons mieux. Tout ce qui se passe réellement ici, c'est que j' essaie d'unir le fond à la forme. Je ne l'ai pas dit, je ne veux pas qu'ils se sentent séparés l'un de l'autre. Cela fait donc un bien meilleur travail À mon avis, je dois juste le centrer maintenant et ils ont besoin de texte vers le haut. Nous allons donc ajouter un titre ici, un paragraphe ici. Celui-ci va être Heading Jump myself heading, puis nous allons faire de ce H deux. Dans ce cas, oui, je pense que nous allons y arriver. Texte des paragraphes. Ensuite, je vais le mettre en profondeur parce que je dois m' assurer que, encore une fois, le paragraphe est trop large Et nous allons sortir de cette impasse. Rappeur en titre. Je pense que ça devrait être la bonne. Je pense. Quoi qu'il en soit, nous allons simplement opter pour ça. En tant que rappeur, nous allons atteindre la largeur de 60 %. Ensuite, je dois m'assurer que le rappeur de la forme est centré pour que tout fonctionne, placez ce rectangle à droite OK. J'ai donc besoin que cela soit détecté, mais vous pouvez voir quand je le fais, cela fait entrer la ferme dans ce que nous allons faire, c'est simplement aller à la ferme Ensuite, nous allons juste y arriver. Ce n'est pas bien joué pour une raison ou une autre. À 800 %. OK. Préviens-moi pendant que j'essaie de réparer ce blocage. Vous pouvez donc voir ici les problèmes que vous pouvez rencontrer lorsque vous faites cela. C'est ce que nous allons faire. Je pense que cela devait être juste un bogue faible. Nous voilà au travail. La forme est toujours blanche. En fait, je vais changer ça. À Savez-vous ce que c'est. C'est le bloc de formulaire qui pose problème ici. Je viens de me rendre compte que ça fait 60 %. Peut-être 70. Tu peux te décider, mais j'essaie juste de trouver cet équilibre. Ça a l'air bien. Pour l'étiquette du formulaire, je souhaite ajouter une petite marge en haut pour tous ces éléments, car il s'agit d'un spécim Maintenant, je dois juste m'assurer que la section est d'une hauteur adéquate. Nous devrions être prêts à partir. OK. OK. Nous y voilà. C'est un formulaire. Encore une fois, nous allons revenir et modifier la réactivité. Encore une fois, nous allons revenir et en modifier la réactivité, mais cela vous donne une bonne idée de la situation Dans l'ensemble, ça va. Je ne vais pas demander à apporter des modifications à cette page Je ne pense pas, mais nous pouvons voir le formulaire de facture. Et je vais rapidement vous diriger vers les paramètres de page pour vous montrer ce que vous devez faire pour vous assurer que vos formulaires seront accessibles. Donc, si vous allez dans les paramètres du site et que nous arrivons ici, vous pouvez changer votre nom d'expéditeur. Vous devez vous assurer que les soumissions de votre entreprise sont transmises à la bonne adresse e-mail et vous assurer que votre adresse e-mail y figure. Vous pouvez ajouter votre ligne d'objet comme bon vous semble. Webflow laisse des notes à ce sujet sur le côté droit. Si vous souhaitez un modèle d'e-mail, vous pouvez l'y ajouter. Nous avons déjà parlé de recapture. Si vous souhaitez intégrer vos entreprises à d' autres sites, c'est ce que je pense. La plupart des gens ne s'inquiéteront pas à ce sujet , car c'est pour les entreprises. Filtre anti-spam, activez-le. Et oui, vous devez absolument restreindre l'accès aux fichiers de téléchargement sur. Je vais vous indiquer ci-dessous combien de formulaires vous avez utilisés au cours du mois. À part ça, c'est tout. Les formulaires peuvent être un peu difficiles à styliser, mais quand on s' y habitue, ils sont assez simples Je dirais que tous les éléments l'écosystème Webflow sont probablement les plus sous-développés Le fait que vous deviez suivre le plan d' entreprise de Webs pour intégrer correctement ces formulaires à d'autres plateformes est intégrer correctement ces formulaires à d'autres plateformes mais quand on s'y habitue, ils sont assez simples. Je dirais que tous les éléments de l'écosystème Webflow sont probablement les plus sous-développés. Le fait que vous deviez suivre le plan d' entreprise de Webs pour intégrer correctement ces formulaires à d'autres plateformes est un vrai un coup de pied dans les dents, car cela rend les choses encore plus difficiles lorsque vous essayez simplement d'envoyer des informations à différents endroits, comme si vous deviez presque utiliser Zapier tout le temps Mais à part cela, pour les soumissions de formulaires de base , elles sont très simples. C'est donc ça. Et la prochaine chose que nous devons faire ou la dernière chose que nous devons faire dans ce cas est de créer le pied de page et nous allons le faire dans la prochaine vidéo OK. 11. Leçon 9 Créer votre pied de page: C'est bon. Nous avons donc fait la plupart des choses que nous devions faire pour cette page de destination. La dernière chose à faire est d'ajouter un installateur, puis nous aurons quelques points de réactivité sur lesquels travailler, et il y a quelques petites choses que je vais vous montrer juste pour peaufiner le tout Ajoutons donc simplement un ajusteur. Et le processus que nous allons suivre pour ajouter l' installateur sera simple sera donc similaire à ce que nous avons fait pour ajouter la barre de navigation. Vous pouvez donc le faire soit , je ne pense pas vraiment que Webflow n'en ait pas Nous allons passer aux mises en page, puis nous allons redémarrer la bibliothèque et nous allons faire défiler la page vers le bas jusqu'à l'unité de fusion, vous pouvez choisir celle que vous voulez ici Cela ne fait pas vraiment de différence. Juste dans le but de le démontrer, nous allons simplement choisir celui-ci, et je vais faire apparaître en bas de la page. Une fois que c'est fait, nous serons en bas. Génial. Nous avons un pied en place. Il ne nous reste plus qu'à y apporter les modifications nécessaires. La première chose que je vais faire est rendre le fond noir. En fait, avant de le faire, je pense que je vais m' assurer d'ajouter tous les bons actifs ici. Ouais. En fait , le noir le rendra blanc. Je pense que je pourrais simplement supprimer complètement le logo. Parce que cela n'a pas besoin d'être trop compliqué. Ensuite, nous changerons tout cela en chemin de fer. On y est presque. Et je vais laisser ça dans Nous n'allons pas définir cette partie. La partie où nous demandons aux utilisateurs de mettre la robe universitaire et tout le reste. Ce n'est pas nécessaire, mais je vais le vendre et nous verrons. Nous allons donc changer cela de la vraie manière. Et nous y arriverons car je pense que ce sera le cas, nous y arriverons. Alors voilà, fais en sorte que ça fasse l'affaire. La dernière chose que nous allons faire est de les rendre tous blancs. Ensuite, nous allons passer à Je vais le remplacer par « pour le médecin » afin que le cours soit précis. Je crée Nous allons créer ce bouton. Je pense que ce serait le cas. OK. Cela ne semble pas changer l'âge en fait. Nous allons donc laisser cela pour le moment. C'est essentiellement un besoin de plus de style. Je ne vais pas perdre trop de temps là-dessus. Mais il y a plein de choses différentes que vous pouvez faire ici. Ce sont des choses que je ne peux pas changer. Ce sont des images, donc je vais juste les voir. est une frontière que nous allons certainement vouloir changer parce que c'est un peu. Et puis c'est tout. Et puis il devrait évoluer parce que c'est une zone we, ce qui est effectivement le cas. C'est bon. Ouais. C'est parfait. Nous voulons simplement créer ce symbole de la même manière avec les vêtements, n'est-ce pas ? Composant de composants, appelez The creates create Après l'instance nous créons plusieurs pages ici, nous pourrons simplement ajouter cette barre et placer un filtre sur chaque page sur laquelle nous travaillons C'est ça. La dernière chose à faire est donc de simplement modifier cette page pour réactivité et nous serons alors au bon endroit. Je te verrai dans le prochain. 12. Leçon 10 Rendre votre page réactive: OK. Maintenant que nous avons fini de créer l'intégralité de notre site, nous voulons simplement nous assurer qu'il est réactif sur tous les appareils ici présents. Donc, sur ordinateur, je pense que dans l'ensemble , cette page semble plutôt bonne, plutôt contente. Vous savez, je ne vais pas y passer beaucoup plus de temps, mais si c'était le cas, je pense que ce serait vraiment un excellent site Web. OK. Mais de toute façon, concentrons-nous sur la réactivité. Dans l'ensemble, sur ordinateur de bureau, je pense que nous avons tout cela comme on pouvait s'y attendre. Passez à la tablette, et la seule chose ici. Ce que je vais faire, c'est que je veux que l'image soit centrée, l'image est trop haute ici. Donc, dans la cellule, je vais prendre ça et le centrer pour que ça soit déjà plus beau. Et ce que je tiens à souligner ici, c'est qu'à chaque point d'arrêt, c' est-à-dire ce que sont ces points d'arrêt, lorsque vous apportez une modification, elle ne la changera pas sur le bureau Mais dans ce cas, toute modification que j'apporterai à la table s'appliquera au téléphone horizontal et au téléphone. Cela fonctionne en quelque sorte. De même, toutes les modifications que j' apporte sur le bureau s'appliquent à toutes. Et toutes les modifications que j'apporte au mobile ne s'appliquent qu'au mobile, vous pouvez donc voir le type de hiérarchie qui s'y trouve. Tout ça a l'air bien. Pareil ici. Je veux que cela soit centré. Sous cette forme, cette année, je vais passer à 70 %, je pense que c'est suffisant. Génial. Et ça a l'air bien ici. Et à l'horizontale, remontons simplement en haut. Ça a l'air bien. Ceci ici Au fur et à mesure que nous entrons, vous pouvez voir que je n'en serais probablement pas très content, mais au fur et à mesure que nous en sortons, tout semble aller bien. C'en est un, essayons-le. Si nous allons dans le grain et supprimons cette colonne, voyons à quoi elle ressemble Ça a vraiment l'air bien comme ça. Je suis plutôt content. En fait, j'en suis content parce que c'est le truc. Parfois, les images ne sont pas assez bonnes pour être Parfois, pour certains sites Web elles ne sont pas assez bonnes pour que vous ne vouliez pas y mettre autant l'accent. Dans ce cas, cette image est suffisamment bonne pour être soulignée. En fait, cela fonctionne très bien, donc je vais le faire pour l'autre section ci-dessous. Génial. Cela fonctionne vraiment bien. Et génial. Nous allons laisser ça comme ça. Encore une fois, je vais changer cela en « probablement ». C'est mieux. Enfin, mobile. Celui-ci ne devrait pas être long du tout. Celui-ci a l'air bien. Cela doit être étendu. Je vais le retirer un peu. Oui, c'est réglé. Cela doit être changé à 100 % ils auront besoin d'un bloc-notes à l'intérieur d' ici et porteront ce chiffre à 20. Et puis pour la taille du texte lui-même, OK. Le côté texte. Je pense que je vais voir. Si j'agrandis la section, elle l'agrandirait et peut-être qu'une plus grande partie du dégradé reprendra ce texte et lui donnera une apparence correcte. Nous allons en faire 800. C'est ainsi que nous allons descendre ici. Nous allons regarder notre dégradé. Ensuite, nous allons apporter la moitié qui est bien meilleure. Celui-là a l'air bien. C'est génial. J'adore ça. Cela doit passer à 100 %. Pareil pour ça. Bloc de formulaire. Génial. Et c'est assez lâche, super. Nous y voilà donc. C'est ça. C'est donc la réponse de Mlle Dunn. Donc, tout ce que vous devez garder à l'esprit lorsque vous faites cela, c' est que vous essayez simplement de rendre le site Web ou la page aussi beau que possible à chaque point d'arrêt individuel C'est ça. Une fois que vous avez fait cela, soyez Cette page Web est au bon endroit. Il y a quelques petites choses que je veux faire ici. Et dans la prochaine vidéo, je vais vous parler de. Je vais vous montrer une interaction spécifique. Je voudrais ajouter quelque chose à cette page juste pour vraiment le ramener à la maison car en ce moment, c'est fait à 99 %. Il y a juste une chose que je dois changer pour l'amener à la norme que je souhaite qu'elle soit, et je vous en parlerai dans le prochain article. 13. Leçon 11 Une introduction aux interactions: OK. Voilà pourquoi. Cette page de destination est donc presque terminée et j'espère que vous avez apprécié ce cours avec moi jusqu'à présent, mais il y a juste une chose que je ne peux pas quitter, c'est à voir avec la barre de navigation. Vous pouvez le voir ici sous forme de parchemin. Parfois, le texte est simplement complètement intégré à l'arrière-plan, et cela ne fonctionne pas vraiment Ça nuit, ça n'a tout simplement pas l'air bien. Cette page n'a pas pu être publiée en tant que page terminée. Pour résoudre ce problème, je dois ajouter une interaction, car en haut, je veux tout de même être clair et me fondre dans la section des héros. Mais en tant que parchemin, je veux que l' arrière-plan de la barre navigation passe au blanc afin qu'elle soit toujours lisible et facile à utiliser sur le site lorsque vous faites défiler le site Ce que nous allons faire ici, c'est que les interactions sont un sujet que je vais aborder de manière les interactions sont un sujet que je vais aborder beaucoup plus approfondie dans le suivi de ce cours, à maîtrise du flux Wi-Fi. Mais dans ce cas précis, nous allons simplement créer une interaction très simple, et c'est probablement une bonne occasion voir comment les interactions fonctionnent réellement. Parce que nous avons déjà vu comment certaines interactions plus petites et moins importantes sont utilisées dans la section style de la colonne des effets. Mais les interactions sont un peu différentes. Ils sont plus compliqués. Ensuite, ils peuvent devenir très compliqués très rapidement. Dans ce cas, c'est un exemple assez simple, et c'est probablement un très bon exemple à utiliser. Donc je vais juste le faire. Ce que nous devons faire ici, c'est créer une animation défilante. Lorsque quelqu'un fait défiler la page vers le bas, quelque chose se produit et lorsque le défilement remonte vers le haut, il revient à son état d'origine Pour cela, nous avons besoin d' un déclencheur de page. Celui que nous allons utiliser est pendant le défilement de la page, celui-ci ici Je vais cliquer dessus, puis nous allons sélectionner une action, et nous allons appuyer sur Play Scroll Animation. Maintenant, aucune animation n'a été créée actuellement, et c'est un endroit où flow ne vous fournit généralement aucune valeur par défaut Vous devez construire avec eux à partir de zéro. Nous allons créer une nouvelle animation. Nous allons appuyer sur l'icône plus ici et nous allons appuyer sur la couleur d'arrière-plan. Vous pouvez le voir ici, cela m'a donné deux endroits pour déterminer la couleur de fond. Dans le premier cas, nous allons définir la couleur d'arrière-plan pour qu'elle soit complètement transparente, comme par le passé, c'est-à-dire 0 %. Et le pourcentage représente la distance que nous faisons défiler vers le bas de la page Ensuite, pour le second, nous allons passer à environ 5 %. Nous allons porter ce chiffre à 4 %. Alors pour celui-ci, nous allons le rendre complètement blanc. Maintenant, ce que nous allons faire, c'est activer l'aperçu en direct. Puis, au fur et à mesure que je fais défiler la page, vous pouvez voir que la barre de navigation devient blanche, et c'est tout ce que nous faisons ici. Mais cela fait une énorme différence pour l'expérience utilisateur et l'accessibilité dans son ensemble. Comme c'était le cas auparavant, il ne pouvait pas être publié dans ce cas, c'est possible. Je dois donc juste m' assurer que nous l'enregistrons et qu'il est actif. Comme vous pouvez le voir ici, ce nous allons faire ici activer ce que nous allons faire est là, vous ne le verrez pas dans le concepteur, mais si vous appuyez sur le bouton de lecture ici, et ce n'est pas vraiment ce que je recherche. 50 % là-haut, vous pouvez voir cela changer sous forme de parchemin, ce qui est parfait. C'est exactement ce que nous recherchons. Et vous pouvez voir ici que lorsque nous commençons à faire défiler la page, cela change, et c'est exactement ce que nous recherchons. C'est ça. Cette page est quasiment terminée. Je suis absolument content de cette page. Si j'avais tout le temps du monde à y consacrer, je pourrais le faire bien mieux, mais dans l'ensemble, je pense que c'est une très bonne démo de ce que vous pouvez faire dans Webflow, si vous êtes débutant, et c'est vraiment un bon exercice à suivre C'est ça. Euh, d'accord. Et c'est tout. Dans la prochaine vidéo, je vais vous parler des pages de ce site web et simplement vous expliquer comment le publier et le mettre en ligne Mais après ça, oui. J'espère donc que vous êtes maintenant dans une meilleure position avec Webflow et que vous en savez beaucoup plus sur la plateforme. Je vous verrai dans la prochaine vidéo. OK. 14. Leçon 12 Publier votre site: Maintenant que nous avons terminé notre page de destination, vous êtes peut-être prêt à la publier. C'est donc ce que je vais rapidement vous montrer comment faire. Donc, avant même de commencer connecter votre domaine ou quoi que ce soit d'autre, je vais juste vous passer à la phrase de page pendant une seconde. Nous passons donc aux pages, et ici. Dans votre balise de titre, il s'agit généralement de la page d' accueil, mais c'est là que vous souhaitez optimiser vous mettez le nom de la marque, qui peut être Tesla. Ensuite, nous mettrions le modèle ou commanderions le modèle C aujourd'hui ou quelque chose comme ça. Quelque chose comme ça. Ensuite, vous aurez une description ici. cette balise de titre et cette description Vous pouvez ensuite définir cette balise de titre et cette description comme description de votre méthode dans la balise de titre. Si vous avez une image à ajouter, vous devez la prendre, je vais juste vous la montrer à titre d'exemple. Nous allons donc simplement prendre celui-ci. Cela ne suffira probablement pas, car ce n'est pas la bonne phrase que vous copiez pour revenir à la phrase de votre page. Ensuite, vous devez coller l'URL ici. C'est bon. Cela fonctionne. OK. Vous pouvez donc le voir là-bas. C'est ainsi que nous apparaîtrions si les gens le partageaient sur les réseaux sociaux. Ensuite, ici, vous pouvez ajouter le code personnalisé de votre choix. n'est probablement pas ce que vous ferez dans ce cas, mais s'il y avait quelque chose que vous deviez ajouter, c'est ici que vous l'ajouteriez. Ensuite, il suffit de sauvegarder. Maintenant, cette page est prête à être publiée, mais supposons que vous avez un projet complet, vous en aurez beaucoup à faire et vous devriez probablement réfléchir un peu plus attentivement à la manière dont vous allez aborder le référencement. Maintenant, si nous voulons publier, il suffit d'aller ici, publier, pouvons-nous le publier sur notre domaine de préparation. Je vais juste le faire tout à l'heure. Quoi qu'il en soit Ensuite, ici pour la production. Staging, c'est votre domaine intermédiaire, puis nous voudrions le mettre en production si nous avons terminé, nous voudrions ajouter un domaine personnalisé. Dans les paramètres du site, vous devrez choisir un plan de site. Maintenant, la structure tarifaire du weblos va généralement de pair avec le fait que vous paierez pour un espace Ils proposent différents niveaux pour cela, puis lorsque vous êtes prêt à publier un site individuel, vous payez pour un plan de site. Celui que j' opterais normalement pour celui que je recommande normalement est le plan CMS. Vous pouvez payer mensuellement ou annuellement. Si vous deviez simplement publier quelque chose ressemble à ce que nous venons de faire, vous n'auriez pas besoin de la version CMS, vous auriez juste besoin de la version de base. Et la raison en est que nous n'avons pas réellement utilisé le CMS Webflow Nous n'avons créé aucune collection. Il n'y a aucun contenu dynamique. Nous n'avons besoin de rien de tout cela. Vous devez donc simplement utiliser le plan de base. Mais j'espère que cela vous aidera à vous donner un peu plus de contexte à ce sujet. Pour ce qui est de l' ajout du domaine, nous passerions à la publication, j'en suis sûr. Vous devrez donc ajouter un plan de site avant que nous puissions faire tout cela. Mais je vais vous montrer un autre site très rapidement. Je vais vous montrer celui d' Ambio juste pour que vous sachiez exactement à quoi il ressemble Si je vais ici et là, vous pouvez voir ici que vous pouvez voir que j'ai ambu par défaut, et que j'ai aussi able comme autre domaine que je peux utiliser Pour les ajouter, il vous suffit d'insérer quelques enregistrements TXT et un enregistrement de nom que vous y insérez. Par exemple, j'utilise name sheep, je l'ajoute dans name sheep, puis je peux utiliser les domaines sur le flux Web. Et c'est tout. C'est ce que vous feriez pour publier. Lorsque vous avez créé votre domaine, vous sélectionnez celui que vous souhaitez publier, puis un bouton de publication, et c'est parti. 15. Étapes suivantes: Très bien, nous sommes maintenant à la fin de ce cours. Tout d'abord, je tiens à vous remercier d'avoir pris le temps de suivre ce cours. Et tout commentaire que vous pourriez fournir sur la qualité et sur tout ce que je peux faire pour l'améliorer serait très, très apprécié. dehors de cela, j'espère que vous êtes maintenant dans une position où vous pouvez aller de l'avant continuer à développer vos compétences sur Webflow et devenir un meilleur designer Nous avons tout abordé, de l'interface utilisateur de Webflow au fonctionnement réel de la plateforme Donc, la disposition des boîtes et tous les autres composants d'introduction que vous devez connaître pour pouvoir tirer parti efficacement de cette plate-forme. Si vous êtes propriétaire d' une petite entreprise et que vous essayez de créer votre site Web, mais que vous avez peut-être toujours l' impression de ne pas avoir toutes les compétences requises pour créer le site Web que vous souhaitez, hésitez pas à me contacter et je serais heureuse de vous aider. Sinon, laissez simplement ce que vous avez à dire dans la section des commentaires de ce cours, et je vous contacterai dès que possible. Mais dans l'ensemble, j' aime beaucoup enseigner ce cours, et j'ai hâte de publier d'autres contenus de ce type dans un avenir proche. Alors merci, je vous verrai bientôt