Les bases de Webflow : le guide des débutants pour créer de beaux sites Web

1. Introduction au cours de formation sur le flux Web: Bonjour, Je m' appelle Dan Scott et ensemble, nous allons apprendre à créer des sites Web réactifs, beaux et accessibles dans Webflow. Ce cours s' adresse désormais aux personnes qui découvrent le logiciel de flux de travail. Et pour ceux d'entre vous qui débutent dans la conception Web en général, vous allez commencer par créer un site Web simple d'une page. Et dans les bases de la mise en page et animation, utilisez Webflow n' est pas un logiciel de code, tout est conçu pour, visuellement, vous apprendrez à donner à votre site Web un aspect cohérent sur un ordinateur de bureau, une tablette, et mobile. Vous commencez à apprendre les classes CSS pour la mise en page et le style de police, ainsi que l'importance des conventions de dénomination des classes. Si vous êtes quelqu'un qui a un peu utilisé le flux de travail, d'accord ? Et vous trouverez des éléments tels que des grilles, des flicks, des colonnes et des développeurs. Tout cela est un peu difficile de savoir lequel utiliser. Ne vous inquiétez pas, je vous promets qu'à la fin de ce cours, vous , mon ami, saurez quand utiliser quel NY. Vous aborderez ensuite notre projet plus vaste qui consiste créer votre propre site Web de portfolio. Ici, vous commencerez également à créer des animations plus complexes, des animations chronométrées, des animations de parallaxe, etc. Vous allez apprendre à créer et à styliser des formulaires. Certains d'entre vous maîtrisent peut-être Figma ou Adobe XD, et je vais vous montrer comment convertir ces designs en un site Web de flux de travail. Mais connaissant Figma ce que XD n'est pas essentiel pour le cours, vous apprendrez que les systèmes de navigation collants sont les symboles E0, flotteurs de marques, les dégradés rouges à verts, les Comic Sans. Mais c'est faux avec l'impact de Comic Sans. Ainsi, une fois que nous aurons acquis les bases du flux Web, nous examinerons la création d'un site Web CMS dynamique. Nous allons créer un blog. D'accord, vous apprendrez à créer un nouveau style, puis à transférer les responsabilités de ce site à votre client, à votre client, votre membre du personnel, à votre usine d'intérieur. Ils peuvent se connecter et commencer à apporter leurs propres modifications au site Web et à créer leurs propres articles de blog sans aucune de votre aide. Ensuite, à la fin du cours, vous utiliserez vos nouvelles compétences pour créer une boutique de commerce électronique, créer et styliser des paniers d' achat, des formulaires de commande, des passerelles de paiement. Vous découvrirez comment vendre des produits physiques et numériques ainsi que des services. Si vous êtes assis là à penser à des films de classe mondiale, des grilles, à des flotteurs, tout cela semble bien trop chaud. Porte. N'oubliez pas que nous allons commencer par le début et nous frayer un chemin étape par étape. Ce cours s'adresse à tous ceux qui souhaitent créer des sites Web et des flux de travail. se peut que vous n'ayez qu' un seul site Web ou une seule boutique à créer pour vous-même ou pour un client. Ou peut-être souhaitez-vous devenir un concepteur de sites Web à plein temps, ou peut-être que vous êtes déjà indépendant et que vous devez élargir votre offre en tant que freelance. Je fais des devoirs tout au long ce cours afin que vous puissiez mettre en pratique ce que vous avez appris et créer des choses réellement pour votre portefeuille. D'accord, c'est le moment de vous améliorer. Passez de sites Web zéro à Webflow hero. 2. Commencez avec le tutoriel de Webflow: Très bien, pour commencer. Tout d'abord, il existe des fichiers d'exercices. Il y aura un lien sur cette page ici. Téléchargez-les. les fichiers que nous utiliserons pour ce cours. D'accord, le flux de travail du logiciel est en fait basé sur un navigateur. Donc, vous allez sur, vous pouvez utiliser ce lien ici si vous souhaitez vous inscrire. C'est un lien d'affiliation. Alors Webflow me donne ses honoraires pour cela ou allez directement au flux de travail, créez un compte là-bas. L'inscription est gratuite. Il s'agit d' un Mac ou d'un PC car il est basé sur un navigateur. J'utilise Google Chrome. Consultez les spécifications du navigateur sur Webflow, savoir si elles sont compatibles avec votre navigateur, si vous utilisez Safari, Edge ou autre, mais j'utilise Chrome dans ce cours. flux de travail payant et gratuit a donc à la fois un flux de travail gratuit et payant. Pour ce cours en particulier, nous allons commencer le cours en utilisant la version gratuite dans la mesure du possible. Et à un moment donné, nous avons besoin de fonctionnalités supplémentaires et nous nous abonnerons à la version payante. Donc, si c'est le cas, vous pouvez faire deux options. Vous pouvez faire tous les contenus gratuits, puis regarder les contenus payants et décider si c'est visible. Ou ce qui pourrait être utile, c'est que vous pouvez créer un compte mensuel avec eux lorsque nous aurons accès à ces services payants. Et puis vous pouvez décider après leur premier mois, si c'est bon pour vous ou non gay et peut-être changer d'année par la suite. Mais oui, vous pouvez suivre une partie de ce cours, disons 20 à 30 % en utilisant la version gratuite. Et je vous préviendrai lorsque nous aurons croisé la gamme de versions payantes. Le flux de travail se met désormais à jour très rapidement Donc, s'il y a des mises à jour de l'interface utilisateur qui ne sont pas évidentes, et regardez les commentaires sous la vidéo juste pour voir s'il y a quelque chose, si c'est vraiment mauvais ou s'il s'agit d'un gros changement, j'irai et re- enregistrez-le, mais faites-moi savoir s'il y a des changements et pour que vous puissiez aider d'autres personnes ou s'il y a quelque chose qui ne sait pas, gripe, passez simplement à la vidéo pour voir. Il y a eu une petite mise à jour. L'autre point, c'est que je parle très vite. je ne suis pas sûre de parler vite en ce moment. J'ai l'impression d'être un peu plus détendue. Au début du cours, je suis un peu nerveux parce que nous venons de nous rencontrer, mais je parle vite. Vous remarquerez qu'il y a un rouage et qu'il y a en bas de ce côté de toutes les vidéos. Tu as déjà changé de vitesse et tu m'as ralenti pour devenir Dan en état d'ébriété, ça peut être plus facile si l'anglais n'est pas ta langue maternelle ou si je parle vite. Certaines personnes m'accélèrent. Les deux. Ça a l'air bizarre, mais on s'y habitue. Et la dernière chose à faire était, oh, oui, moi, il y a quelques explications sur le flux de travail, ce qu'il fait pour les prochaines vidéos. Si vous voulez ignorer cela, passez à la vidéo intitulée Weight. Ils vont vérifier, ils l'ont trouvé. Il s'agit de savoir comment créer votre premier site Web et votre premier flux Web. Vous verrez cela un peu plus loin dans le cours, si vous voulez simplement passer à la partie où vous êtes, commencez simplement à faire cuire la farce avec toute la dinde et vous pouvez y aller. Sinon, nous allons regarder les prochaines vidéos ou répondre à toutes les questions que je me posais avant de commencer à utiliser Webflow. Je pense qu'il est important de définir ce qu'il fait, ce qu'il fait. Questions fréquemment posées. Diego. Très bien, vidéo suivante. 3. Qu'est-ce que webflow: Quel est donc le flux de travail ? Le flux de travail est un moyen de créer des sites Web et sa position sur le marché de la création de sites Web est considéré comme un constructeur de sites Web sans code. Cela signifie donc que d'un côté, vous avez le codage complet, votre site Web, HTML, CSS, PHP, tout ce que vous utilisez. l'autre côté, il y a plus le Wix et le Squarespace où il est très facile de glisser-déposer. Et ils gèrent tout le backend. Donc Webflow se situe en quelque sorte dans ce juste milieu pour moi, il écrit du beau code et vous donne accès au code si vous le souhaitez, vous n'avez pas à le faire. Mais pour moi, en tant que concepteur de sites Web qui comprend une grande partie du code, je trouve cela très utile car il me donne un contrôle total, comme le côté codage. Si vous codez vous-même pour pouvoir faire ce que vous voulez. Mais cela prend plus de temps et c'est une façon différente de construire, non ? Tu es un codeur. Je suis plutôt designer. Ce que j'aime, c'est Webflow car il me permet de créer des sites vraiment complexes, personnalisés, exactement comme je le souhaite. Ou je peux commencer par des modèles, un peu plus sur la façon dont fonctionne ce monde Wix Squarespace, d'accord ? Les flux de travail au milieu vous cachent le code. Il est accessible si vous en avez besoin ou si vous voulez aller plus loin. Et il a beaucoup de profondeur. Codage. Votre propre site Web a une profondeur infinie. Tu peux faire ce que tu veux. OK ? vent souffle dans ce juste milieu où vous pouvez faire à peu près ce que vous voulez, tout ce qui est normal. Vous pouvez le faire dans le flux de travail et cela s'étend, où et puis, sur cet autre ensemble, il y a plus de glisser-déposer pour les personnes qui souhaitent créer un site Web pour leur équipe ou leur club ou pour affaires, et je ne veux plus jamais y toucher. Parce que vous pouvez choisir un joli modèle et c'est parti. Alors qu'ici, vous pouvez choisir un joli modèle et c'est parti. Mais aussi si tu veux faire cette autre chose étrange et cette chose ici aussi. Et tu voulais avoir cette apparence. C'est là qu'il fait circuler des ensembles et qu'il vous cache en quelque sorte le code. Écrivez du bon code. Juste pour ceux qui ont peur d' avoir la bonne syntaxe et des trucs comme ça. C'est donc une chose à propos de ce qu'est le flux de travail. C'est ce qu'est Webflow, qui il est destiné et qui l'utilise normalement. Ce sont généralement les concepteurs et les spécialistes du marketing qui souhaitent être en mesure de produire un site sans l'aide d'un développeur. Ils peuvent avoir l'impression qu'ils ne peuvent aller que si loin par eux-mêmes, puis ils deviennent assez difficiles à ce moment-là de faire participer une autre personne et de la payer. Le design l' utilisera donc souvent pour créer plusieurs sites Web pour ses clients. Ils font peut-être d'autres travaux de conception pour eux. Il veut créer des sites Web, il ne sait pas coder. Nous avons réduit cette solution parfaite. Pas de code, des sites Web assez complexes et il donne au client l' accès pour le mettre à jour également. C'est donc ça. C'est un flux agréable pour un concepteur de créer des sites Web et il devient de plus en plus populaire auprès des spécialistes du marketing où ils ont une idée, un microsite ou quelque chose qu'ils veulent faire rapidement. OK ? Et vous ne voulez pas avoir à en faire un très gros projet avec d'autres Dwell externes. n'y a rien de mal à travailler avec un développeur. Je travaille tout le temps avec le développeur pour faire des choses personnalisées. Mais avec les logos, j'ai la possibilité d'aller assez loin par moi-même sans aucune aide. Et vous pouvez aller un peu plus loin dans le flux ce n'est pas le cas, vous ne pouvez pas utiliser de développeur. Ce que vous pouvez faire, c'est utiliser Webflow et vous obtiendrez probablement 99 % de ce dont vous avez besoin. Mais pour ce cas étrange, vous pouvez faire appel à un développeur pour vous aider. Et il y a de plus en plus de développeurs qui aident spécifiquement les designers et les spécialistes du marketing à pousser cela un peu plus loin , afin que vous puissiez également être un peu un gentleman. Et les propriétaires d'entreprise utilisent également Webflow, car cela leur permet d'en prendre le contrôle total. Ils ne l'externalisent pas et ressentent ce décalage entre leur idée, surtout au début et ce qu'ils veulent livrer. Parce que nous avons entendu dire que cela vous permet de faire du commerce électronique et de créer des sites Web de style CMS pilotés par des bases de données qui ont traditionnellement besoin Alors que le flux de travail intègre en quelque sorte tout cela et vous permet de tout faire vous-même. Parlons de sa place dans le processus de conception Web. Webflow n'est donc pas utilisé pour concevoir un site Web. Tu aurais dû le faire plus tôt. Vous le faites dans quelque chose comme Figma ou XD, Photoshop ou Microsoft Paint. Pourquoi le concevriez-vous dans ces premiers et obtiendriez-vous peut-être l'approbation du client ou la vôtre ? Et puis créez-le dans Webflow par la suite. Et il ne suffit pas de le construire tout de suite car il est très rapide et facile de concevoir quelque chose et quelque chose comme ces autres outils tels que Figma, XD, Photoshop. Nous avons des cours sur tout cela qui illustrent que cela n'a pas d'importance. Tout outil que vous souhaitez utiliser pour le concevoir. Il est très facile de déplacer des objets et un flux de travail beaucoup plus structuré. Tu dois en quelque sorte construire des choses, Bob, à partir de zéro. Et c'est très difficile, pas très difficile de changer les choses, mais déplacer quelque chose avec votre souris par rapport endroit où il se trouve sur un site Web est très différent. Et la meilleure analogie, c'est que tu veux une maison, d'accord ? Vous pourriez en concevoir dix, construire des maisons en tôle et décider laquelle vous préférez. Ou vous pouvez dessiner une maison en tôle et décider laquelle vous préférez, puis en construire une pour vous faire une idée. Ce n'est pas aussi élaboré que cela, vous pouvez totalement concevoir et Webflow n'est tout simplement pas un excellent moyen de le faire. Conçu quelque chose d'abord, approbation du client Git, signature, vous pouvez le faire tester. Et ces autres programmes, je ne sais pas pourquoi ils sont ici. Cette diapositive présente tous ces gars, le logiciel de conception, puis vous le créez et le flux de travail. Une fois que vous avez aimé votre design, vous pouvez apporter quelques modifications en cours de route. Ce n'est pas gravé dans le marbre, mais j'espère que vous aurez compris l'idée. Conception et création de flux de travail. Ensuite, le flux de travail est le dernier port d'escale. Vous pouvez alors dire : voici un site Web, j'ai terminé. C'est donc ce qu'est Webflow, qui il est destiné, où il s'intègre dans l'ensemble du flux de conception Web. Si vous êtes du genre, Oh, j'ai d'autres questions. Oh moi, moi, moi. Bien Parce que j'ai une autre vidéo. Je vais passer en revue toutes les questions fréquemment posées par la plupart des gens et que j'ai eues à ce sujet quand j'ai commencé, je voyais cette vidéo. Je vais prendre une tasse de thé et je reviendrai. Je te vois dans une minute. 4. FAQ sur le flux Web - Combien coûte le flux Web Partie 1: Bonjour tout le monde. Bienvenue dans la vidéo sur les questions fréquemment posées. Qu'est-ce que c'était au début, c'est comme un moyen de vous lancer dans cette longue vidéo pour toutes les questions fréquemment posées. Pour beaucoup d'entre vous, vous venez de tout regarder. Pour certains d'entre vous. Tu peux y jeter un coup d'œil. Vas-y, je sais. Passons à la vidéo suivante. Pour certains d'entre vous, encore une fois, vous voulez juste vérifier quelques points. Je soulève donc cette question dès le début. Il est donc facile de revenir en arrière et de voir où il se trouve, puis de se déplacer dans la chronologie. Est-ce que cela garantit que cela a du sens ? Eh bien, pendant que nous faisons cela, c'est parce qu'il y avait juste un tas de questions je me posais avant de me lancer dans Webflow que j' ai fini par tout comprendre. Et je me suis dit : « C'est le genre de choses. J'aimerais qu'il n'y ait qu'un seul endroit pour tout ça. C'est donc pour cela que cette vidéo vous est destinée. J'espère que cela répondra à toutes vos questions et réponses en un seul endroit. Descendez, c'est tout. D'accord, la question la plus fréquemment posée à propos de Webflow est le prix. Je vais parler du dollar américain et des paiements mensuels ici par souci de cohérence. Et allons-y avec un site gratuit, d'abord c'est que les avantages et les inconvénients, c'est que vous pouvez travailler gratuitement et que vous pouvez créer un site et le lancer. Vous ne pouvez en avoir que deux. Et le gros inconvénient est que c'était le cas, le premier inconvénient est que les deux sites Web différents que vous créez ne peuvent avoir que deux pages différentes. C'est une amende pour une page de destination ou une brochure, un site Web ou une page d'accueil Contactez-nous, la page d'accueil devenant assez étendue. Et la chose que nous construisons ici, c'est que vous pouvez les suivre assez longtemps. Montrez encore beaucoup de contenu pour ces deux pages. 2 sites Web, deux pages seulement. La limite devient lorsque vous voulez arrêter payer, c'est lorsque vous voulez un domaine personnalisé, parce que ces deux premiers sites Web peuvent être publiés, mais ils sont actifs, sur le compte gratuit, mais ils sont sur celui de Dan site Web incroyable, point Webflow, point io. C'est donc l'URL que vous devez donner. Ce n'est donc pas très professionnel. Donc, si tu veux l' incroyable site web .com de Dan, d'accord. Vous devez ensuite passer à 15$ par mois. OK. Et c'est votre hébergement Web. Et c'est comme si vous preniez une éternité, les coûts d'hébergement Web peuvent coûter aussi bas que 5$. Mais avec Webflow, vous bénéficiez de tous les avantages du flux de travail. Vous devez donc effectuer une mise à niveau à partir de là pour le site Web, mais uniquement lorsqu'il est prêt à être publié, obtenir ce domaine personnalisé. Et oui, le prochain type de hausse de prix serait le cas, dans ce cours , lorsque nous aurons besoin d'un CMS. CMS si vous n'en avez jamais utilisé un, c'est vraiment bon pour des choses comme les articles de blog. Supposons que nous ne souhaitions pas concevoir chaque page et chaque flux Web. Nous voulons le donner au client et lui permettre d'accéder au site Web et de mettre un titre de blog. Certaines images et leurs propres textes peuvent appuyer sur et de mettre un titre de blog Télécharger sur le site Web. Et ils n'ont rien à voir avec portails Webflow téléchargés sur un CMS ou une base de données et affichés sur le site Web. Cela permet donc aux gens de ne pas coder et de concevoir chaque page leur donne juste un petit espace pour pouvoir télécharger des choses un peu comme WordPress. Donc, vous passez à 20 dollars par mois, je suppose que pour accéder à ce CMS, il y a un trafic de bande passante. La plupart des petits sites ne dépasseront donc pas du tout cette bande passante. Mais si vous avez un site Web très fréquenté, ils pourraient vous demander de passer au niveau supérieur parce qu'il reçoit beaucoup de trafic, mais il est très populaire et vous gagnez beaucoup d'argent, donc vous sera capable de le faire. Autres tranches de prix, il y a beaucoup d'échelles différentes et lui, je suis juste en train de choisir les principales que je trouve les plus utiles, c'est quand ils passent du CMS au commerce électronique. Alors laisse-moi regarder. Commerce électronique. Le commerce électronique est différent parce qu'ils ont besoin de faire un tas de choses différentes. Donc, pour obtenir un site de commerce électronique léger, disons que vous fabriquez écouteurs et que vous voulez les vendre de votre côté, vous allez devoir passer au forfait de 29$ par mois parce que c'est ce que nous faisons séjours. Et il déverrouille tous leurs outils de commerce électronique. Tu peux aller droit vers elle en lui disant : « Qu'est-ce que c'était ? Oui, ça fait un mois. Vous pouvez aller jusqu'au plus cher que je puisse voir ici, c'est 212$ par mois pour le commerce électronique. Et ça descend jusqu'au lac. Ils le décomposent en fonction du nombre d'articles que vous avez dans votre boutique. Et vous ont-ils indiqué des frais de transaction ? Ne le font-ils pas ? Toutes sortes d'autres choses. Jetez donc un petit coup d'œil à une réduction des prix sur webflow.com. Ce sont les éléments principaux. Encore une fois, ceux-ci changent, les règles changent. Mais ce sont les types de 015, 2029 sont les principaux groupes alimentaires que vous pourriez utiliser pour Webflow. Et si vous pensez que je ne les paie pas, si vous avez déjà fait de la conception de sites Web auparavant, vous savez, vous avez besoin d'une sorte d' hébergement et vous avez besoin enregistrement de domaine et quelqu'un va Je dois faire le commerce électronique pour vous. Tu vas payer quelque part. C'est ce que fait le flux de travail. C'est au-dessus de ce que vous pouvez obtenir si vous avez vraiment un budget serré. Mais les avantages de le faire sont plutôt bons. Ils s'occupent de tous les correctifs. Vous devez vous soucier des serveurs et oui, c'est tout. C'est ça, la tarification. 5. FAQ sur le flux Web - Combien coûte le flux Web Partie 2: Parlons de WordPress par rapport à Webflow. Quelles sont les différences ? Lequel devriez-vous utiliser ? Parlons donc de ce qu'ils sont tous les deux. Wordpress est essentiellement lancé comme un logiciel de blogging que vous pouvez manipuler pour faire pratiquement n'importe quoi. Une grande partie du monde est alimentée par WordPress. Il a une profondeur exhaustive, tellement de profondeur. Si tous ces cas de pointe bizarres, vous pouvez probablement trouver un plugin WordPress qui saura régler le problème. Alors que le flux est davantage au cœur de ce que vous devez faire pour la conception de sites Web. Mais aucun d'entre eux n'aime les petits boîtiers, ou du moins ce n'est pas un clic, un plug-in et un jeu. Vous pouvez en faire une grande partie sur WordPress. Et donc, si vous êtes une personne qui veut juste un blog rapide cet après-midi, hé, site de blogging en ligne. Il suffit d'installer WordPress, de choisir un plug-in ou de choisir un modèle que vous aimeriez installer et de commencer à le brancher. Et si vous le souhaitez, si vous avez un design que vous avez créé et que vous voulez le construire. Faites-le dans WordPress. Parce qu'obtenir cette personnalisation sur le Web, Wordpress, prendre leur temps à concevoir, vous voulez que ce soit parfait. Ou du moins, vous avez une idée très précise de ce à quoi vous voulez qu'il ressemble. Et créer WordPress pour cela est vraiment délicat. je suis OK pour l'encodage et c'est quand même assez difficile de faire en sorte que WordPress fasse ce que je veux. Et tu dois entrer dans le code et tout ça. Et en disant cela, même si je n'en ai pas envie, WordPress est incroyable à cause de tous ces plug-ins dont vous avez besoin pour faire quelque chose. Si vous avez besoin d'un plugin qui acceptera les paiements mais uniquement à partir de leur étrange passerelle de paiement seuls les utilisateurs de votre pays. Et c'est uniquement pour les gauchers, vous allez probablement trouver un plug-in pour cela. Alors que WordPress acceptera les paiements génériques de la plupart des pays du monde. Oui, c'est un peu profond, assez difficile à personnaliser, mais très facile à démarrer. Wordpress, assez facile à démarrer. Vous verrez dans ce cours. Mais vous permet de tout contrôler. Et vous êtes un peu WordPress, bon flux de travail, très bon. Et les deux ont leurs avantages et leurs inconvénients, mais ce sont là, c'est l' aperçu de ces deux. Tu commences par lequel ? À vous de dire, est-ce que votre client peut mettre à jour votre site Web Webflow sans votre aide ? Ils le peuvent. Webflow a deux faces. Il y a le côté designer, vous, le créateur, le créateur du site Web. Et puis il y a ce qu'on appelle l'éditeur. Et l'éditeur est destiné aux clients ou aux clients et ils peuvent accéder au site Web et mettre à jour le site Web selon leurs besoins. Ils n'ont besoin d'aucune interaction avec Webflow, d'accord. Ils peuvent le faire sur le site Web. Je vais vous donner la plus petite démo de Tiny. Juste pour te montrer ce que je veux dire, on y va. Webflow a deux faces. Il y a le designer, c' est-à-dire que je vais ici et que je me dis : « Tu sais ce que je dois faire ? J'ai besoin d'augmenter ce rembourrage pour le déplacer et le concevoir. Donnez-lui une belle apparence. Je publie le site Web, puis le client ou mon client utilise ce que l' on appelle l'éditeur. L'éditeur leur permet en tant que client, de ne pas revenir vers vous, mais d'accéder au site Web cliquer sur Modifier et de dire « Je veux vraiment changer cela ». Ça doit être 2036, d'accord ? Et quand j'ai apporté un changement, ils peuvent dire « publiez-le », et ils ont publié le site Web. Et ce qui est cool, c'est qu'il mettra à jour le site Web en ligne afin que le texte soit modifié ou mis à jour. Mais cela changera aussi ici, dans ma vision du design. On y va. Cela signifie donc que les modifications apportées aux clients apparaissent également pour moi. Quand je crée, je peux voir ce qu'ils ont changé. Ils peuvent désormais modifier le texte, les images, les liens, n'importe quoi. Ils peuvent également ajouter blog si vous avez créé un blog ou si vous avez ajouté des produits Si vous avez créé un site de commerce électronique, c'est une petite configuration assez intéressante ici. Vous pouvez utiliser le design Webflow Justin de vous et juste pour vous-même, d' accord, si vous créez votre propre portfolio et que vous n'avez jamais touché à l'éditeur. Mais si vous souhaitez passer le relais à un client, il dispose de moyens pour mettre à jour le site Web sans revenir vers vous à chaque fois. Le client peut-il donc mettre à jour le site Web ? Oui, ils le peuvent. Sans ton aide, Fancy. 6. FAQ sur le flux Web - Combien coûte le flux Web Partie 3: La question est la suivante : puis-je héberger mon site Web Webflow sur mon propre serveur ou sur ma propre plateforme d'hébergement ? Oui, cas d'utilisation limités. Et si vous souhaitez créer quelque chose et un flux de travail, comme un site Web statique et peut-être son portfolio. Et tu t'en sors un peu et tu ne voulais pas aller le mettre sur ton propre hôte. Tout à fait faisable. Si vous souhaitez mettre à jour ce site Web, vous pouvez soit pirater le code de ce côté, d'accord, si vous avez des connaissances de base en HTML et CSS, vous pouvez totalement le faire sur votre propre hébergeur et oublier flux de travail maintenant, je l'ai juste utilisé pour le créer. Si vous souhaitez continuer à utiliser Webflow pour apporter des modifications, vous pouvez accéder à Webflow et dire « OK, je veux déplacer cela » ou ajouter le projet suivant et tout présenter, puis exporter le codon vers le vôtre hôte. Tu peux totalement le faire. La limite se produit lorsque vous voulez un CMS, que vous voulez que le client puisse se connecter ou que vous souhaitez publier des articles de blog. Nous allons créer notre site Web de publication de blog. Et nous allons également créer un commerce électronique. Ces deux fonctionnalités doivent être hébergées sur Webflow. Ils n'explorent pas toutes les bases de données et autres éléments pour que cela fonctionne pour votre propre site. sites Web statiques donc parfaits. Tout ce qui nécessite des fonctionnalités telles que la connexion client ou un CMS pour le téléchargement de nos articles de blog ou le commerce électronique qui doit être hébergé avec peu pour que cela fonctionne. Donc oui et non. Pouvez-vous importer votre propre code dans Inflow ? Oui ou non ? Non Vous ne pouvez pas récupérer votre site Web existant, le placer dans Webflow, effectuer des ajustements, puis le recracher à nouveau. Vous ne pouvez pas importer un site Web entier, il ne le fait donc pas. Ce que vous pouvez faire dans Workflow, c' est le mettre dans votre propre code personnalisé. Il se peut donc que vous ayez du code à insérer dans la balise d'en-tête ou dans le corps d'une ou de plusieurs pages en particulier. Vous pouvez injecter votre propre code dans les pages afin d'y intégrer de petits morceaux de code, mais pas d'importer l'intégralité du site dans Webflow. Vous allez, puis-je créer un site Web d'adhésion dans Webflow ? Pas encore, en quelque sorte. C'est en version bêta. Il est peut-être déjà sorti, selon le moment où vous regardez ceci. À partir de cet enregistrement, il est en version bêta, donc ils y travaillent. Il est donc probablement déjà sorti. Oui, tu peux. Pour le moment, vous pouvez créer comme une section protégée par mot de passe de votre site Web qui fonctionne déjà dans Webflow et site d'adhésion arrive ou pourrait être publié. Maintenant, allez vérifier. Ils s'en vont. Voilà la réponse. Puis-je utiliser mon propre nom de domaine personnalisé avec Webflow ? Peuvent-ils vous en donner un dans le cadre de la partie gratuite et du site de développement de Webflow. Et c'est comme l'incroyable site web de Dan point Webflow, point io. Tu peux utiliser celui-ci. Tout le monde veut cependant son propre domaine personnalisé , l' incroyable site web.com de Dan. Et oui, vous pouvez les connecter. Est-ce qu'ils les vendent ? Vous savez comment les configurer ? Je vous le montrerai plus tard dans le cours de base, mais c'est possible. Oui, encore une fois, d'accord. À partir de. Webflow gère-t-il vos adresses e-mail ? Vous avez l' incroyable site Web .com de Dan. OK. Tu veux que Dan soit sur l' incroyable site web .com de Dan ? Notre flux de travail ne gère pas les e-mails à votre place. Tu as besoin d'autre chose. La plupart des utilisateurs utiliseront les espaces de travail Gmail ou Google. C'est ce que j'utilise, c'est très courant. Ou gérez votre propre hébergement de messagerie. Ils ne se chargent donc pas de la gestion des e-mails à votre place. Vous pouvez simplement utiliser votre compte Gmail et ne pas recevoir de Dan spécial sur l'adresse e-mail spéciale website.com et simplement utiliser votre compte Gmail. L'autre point est qu'ils gèrent des choses comme, par exemple, passer une commande via votre site, quelqu'un effectue un achat. Ils s'en chargeront, par exemple , de récupérer la commande , de vous l' envoyer par e-mail et de vous donner un espace pour vous connecter pour voir toutes vos commandes. Ils ne gèrent donc pas tout à fait les e-mails, mais comme ces transactions. Pareil pour un formulaire. Je vais vous montrer comment créer un formulaire dans ce cours. Et quand quelqu'un te dit bonjour, m'appelle Daniel Scott et je veux t' engager et te soumettre. Il traitera ce qui en conservera une copie et vous l' enverra. Quelle que soit l'adresse e-mail que vous souhaitez envoyer à votre compte Gmail, Hotmail, Yahoo ou utiliserait-elle ? OK, donc ils vont traiter cette incitation pour l'utiliser. Vous comprenez le contexte. Ils traiteront donc le formulaire et l'enverront à votre adresse e-mail. Ils ne trient pas vos adresses e-mail sophistiquées, mais ils traitent et envoient des informations à votre adresse e-mail existante. Webflow est-il bon pour le référencement ? Oui. Je suis une personne relativement qualifiée de l'ACO, ai traitée depuis longtemps, assez bien. Et il fait très bien les bases. Le flux de travail sur la page, le référencement sur la page et en fait devient assez profond en termes d' eau, peut réellement faire pour le référencement de votre site Web. La réponse est donc oui. Site Web sur la page SEO. Très bien. Je vais dire extrêmement impatient. 7. Comment créer votre premier site Web dans le flux Web: Bonjour à tous. Nous allons créer notre premier site Web dans Webflow. Ça va être super basique comme ça et nous n' allons pas vraiment le construire mais utiliser beaucoup de choses prédéfinies dans Webflow. Et je le fais parce que je veux avoir un très bon aperçu du processus, de la façon dont vous démarrez un site, de la façon dont vous y mettez du contenu, façon dont vous le publiez, comment vous le prévisualisez ? OK, donc c'est pour ça que c'est une courte vidéo et que nous allons pouvoir l' entendre assez rapidement car il y a juste quelques éléments de base. Je veux vous montrer l'ensemble du processus en un clin d'œil et vous montrer les principaux domaines que vous allez utiliser avant de passer l'essentiel de Webflow. Belle brève vue d'ensemble. Ce sera soit très utile quand vous vous dites : « Oh oui, c'était bien. Je peux maintenant me faire une idée de l'endroit où nous allons , sinon ce sera trop rapide et très confus. Je ne sais pas encore lequel il s'agit, alors allons-y dès maintenant. Selon l'endroit où vous commencez, vous êtes peut-être ici, vous pouvez créer un nouveau site. Vous pourriez vous retrouver juste dans cette fenêtre ici. Vous pouvez commencer avec des modèles, ce qui sera génial plus tard lorsque vous serez génial. Mais pour l'instant, commençons par un projet gratuit. Tu peux, je vais juste faire une démonstration. Vous pouvez suivre si vous le souhaitez à ce stade, mais nous allons ranger ce que je vais faire. Il s'agit plutôt d'une visite guidée complète, juste pour vous donner une idée de ce qui se passera dans le futur. Voici donc le designer. Bienvenue. C'est là que vous allez passer le plus clair de votre temps. Le, c'est un peu quatre endroits principaux pour trouver des choses. Je vais vous en montrer trois maintenant et un plus tard appelé rédacteur en chef. Nous reviendrons plus tard dans le cours. Mais les principaux dont vous avez besoin maintenant en tant que designer, c'est ici que nous pouvons ajouter et dessiner des choses. Alors je vais ici et je dis ce petit bouton plus et je peux dire que je veux appuyer sur et puis je veux le bouton. N'oubliez pas que ce n'est qu'un moyen rapide , si vous le souhaitez, de ralentir. Le but de cette vidéo n'est pas de vous donner une sorte de vue d'ensemble. Avant d'entrer dans les détails, le designer, vous allez créer des choses et faire du travail de design. L'autre endroit qui est utile est de dire ici, dans le coin, quels sont les paramètres de votre projet. Donc c'est notre projet, d'accord, c'est mon projet. Je peux entrer dans ces paramètres et il y a beaucoup de choses importantes. Donc, le mien s'appelle Dan's Awesome site. Et nous avons un bouton et cliquez dessus ici, des informations générales, le nom de votre site Web, ils ont des icônes. OK. Regardez où vous êtes basé, toutes ces sortes de choses. Et les membres sont un domaine pour, vous pouvez l'avoir, un autre design qui vous aide, vous ou votre client, à y trouver des moyens de publier votre facturation, choses que vous pouvez modifier pour le site Web, pour le référencement, n'importe quelle forme soumissions. Je suppose que ce n'est pas trop prêt à être parcouru c'est plutôt comme si cette section contenait beaucoup de choses importantes qui, lorsque vous commencerez, vous vous demanderez : « Où est-ce que c'est ? C'est dans vos paramètres, dans les paramètres de votre projet. Bon, revenons donc au concepteur de ce projet appelé Daniel is awesome site. Il y a plusieurs façons de se déplacer. C'est bon, souvenez-vous du designer, je peux accéder aux paramètres de mon projet , d' accord, mais disons que vous avez deux projets. Tu travailles avec trois clients, dix clients, tu es génial. OK, tu peux accéder à ton tableau de bord. Vous vous retrouverez ici assez souvent lorsque vous chargez le flux de travail au bout d'un certain temps, que vous vous déconnectez ou que vous vous en éloignez , que vous le fermez et que vous revenez ici, vous vous retrouverez ici. Pour le moment, j'ai un site, vous allez vous retrouver avec plusieurs sites ici. Si vous créez plusieurs sites à partir d'ici, vous pouvez le plus souvent cliquer dessus et accéder au concepteur où nous étions auparavant. Vous pouvez également accéder directement aux paramètres du projet. Voilà, les paramètres de ce projet. Ce sont donc les trois parties, le concepteur, les paramètres et ce tableau de bord. Vous allez passer de l'un à l'autre, ces choses le sont ici, c'est important. Ces choses ici, des sites Web sympas qui ont fait des designers que vous pourriez engager pour leur formation, c'est l'essentiel. Et dans ce tableau de bord, vous pouvez ouvrir votre projet et un designer, Diego. Ce sont donc les principaux domaines. Et l'autre point principal que je veux aborder , c'est que je vais cliquer dessus et simplement les supprimer sur mon clavier. Et je voudrais juste passer rapidement en revue ces éléments ici. Vous avez donc des éléments et des mises en page. Les éléments sont les éléments de base avec lesquels vous allez travailler. Vous allez commencer à créer un conteneur. Et puis à l'intérieur de ce contenant, vous pouvez mettre vos en-têtes pour qu'il ne touche pas tout le chemin. Tu commences à créer ton site web, tu y vas, d'accord, j'ai besoin de quoi d'autre ? Nous en avons besoin. Des trucs faciles. J'ai besoin d'une image. OK, mettons notre image dedans. Je l'ai raté, mets-le au bon endroit. Vous commencez à créer votre site Web à l'aide ces éléments et il y en a beaucoup ici, il y a des formulaires. Vous pouvez voir qu'il y a des menus de navigation, toutes sortes de choses intéressantes que nous allons apprendre dans ce cours. Les mises en page me permettent de supprimer ces mises en page, ne trichent pas, mais sont des morceaux prédéfinis. Tu veux un coup collant jusqu'au sommet. Boum. Vous voulez, ah, des mises en page. Vous voulez une section dédiée aux héros ? Pied de page ? Où est-ce que je vais ? On y va. Plus des mises en page. Pied de page. OK, vous avez déjà un site assez complexe en cours. Et ce qui est cool, c'est que je vais vous montrer que c'est votre aperçu. Voici donc le designer. C'est moi avec tout le montage et plein de trucs indésirables partout. Vous pouvez tout nettoyer en prévisualisant à quoi cela ressemblera pour l'utilisateur final en cliquant sur ce petit globe oculaire. On y va. On dirait que vous pouvez le voir ici. Je ne peux pas faire grand-chose. Ce n'est pas beau, mais il y a une grande partie de la structure. Par exemple, si vous passez à affichage mobile, pouvez-vous voir le système de navigation ? Est-ce que ça change ? À chaque pile, les images s'empilent un peu différemment là-dessus. fait une grande partie du travail pour vous en utilisant ces mises en page pour sortir de l'aperçu, puis cliquez à nouveau sur le globe oculaire. Les éléments, tous les bits individuels, mises en page sont tous des bits individuels collés ensemble. Cela fonctionne toujours, il y a encore des textes et ça reste un bouton. Mais c'est centré. Maintenant, regardez que cela semble rentrer dans la boîte. Donc c'est juste une façon de sauter, de sauter. Maintenant, tu ne peux pas encore le faire. Tu pourrais. Le problème devient le suivant : « OK, je veux obtenir ceci, je veux supprimer ça, d'accord, je veux supprimer tout ça. Nous allons simplement tous les supprimer. Pourquoi est-ce que ça a sauté là-bas ? Il y a beaucoup de choses qui sont très utiles pour une fois que vous savez ce que vous faites. À la fin de ce cours, vous serez capable utiliser tout cela, de savoir quels sont les éléments flottants et pourquoi Flexbox garde tout cela entre les deux. Ce n'est pas difficile, il suffit de l'apprendre. Donc, passer à ces trucs prédéfinis ou modèles d'autres personnes est cool. Mais ce n'est qu'une fois que vous aurez acquis quelques compétences de base je vous donnerai quelques compétences de base afin que vous puissiez vous aussi gagner du temps en copiant modèles ou en clonant des sites Web ou en utilisant ces gros morceaux de mise en page. autre chose que je voulais te montrer ? Donc les éléments de base de l'élément, les mises en page, la tricherie, d'accord, la prévisualisation. Et l'autre, c'est la publication, d'accord, donc là-haut, on peut publier et elle peut être vue sur Internet par les gens. Il va utiliser ce genre de domaine étrange. Comme je l'ai dit plus tôt dans le cours, vous pouvez utiliser votre propre domaine personnalisé. Mais pour le moment, nous allons l'utiliser. Et vous pouvez le publier et les gens peuvent le voir. le prévisualisant juste pour vous, publiant dans le monde entier. Construisez-le avec des éléments. Tricher en utilisant des flux de travail, des éléments déjà créés ou des éléments préstylés et prêts à l'emploi. OK, c'est mon bref aperçu de la création de quelque chose dans Webflow. Le processus complet est bref pour ainsi dire. N'oubliez pas non plus les endroits où vous devez être. N'oubliez pas que votre séance de projet est essentielle à ce projet en particulier. Bon, revenons au tableau de bord pour voir les différents projets sur lesquels vous travaillez et dont l'éditeur parlera plus tard. C'est le point de vue que votre client pourra potentiellement voir si vous lui donnez accès pour mettre à jour le site. Vous n'avez peut-être pas l' intention de le faire, mais c'est un autre élément. D'accord, j'espère que ça a aidé, pas aidé. Je ne sais pas Je trouve qu'un petit tour d'horizon rapide est plutôt agréable pour voir où tout va ou ça va embrouiller l'académie. C'est l'un ou l' autre. Quoi qu'il en soit, passons à la vidéo suivante et commençons à créer quelque chose à partir de zéro afin de connaître Webflow. Petit bonus, je suppose que lorsque nous découvrons comment supprimer un site Web, parce que c'est tout ce qu'il servait, c'était de créer quelque chose et de tout assembler. Donc, si vous avez créé quelque chose, nous allons le supprimer. Je vais donc retourner à mon tableau de bord. Et je vais dire que voici tous mes projets. Celle-là en particulier, je vais la supprimer. Vous devez être très typographique dans tout cela parce que c'est très important parce qu'ils le suppriment et vous ne le laisserez jamais revenir. Ne copiez-collez pas cela parce que c'est de la triche. Très bien, nous avons tout nettoyé et sommes prêts à démarrer correctement dans Webflow. Je te verrai dans la prochaine vidéo. 8. Projet de cours 01 - Créez votre propre mémoire de flux Web: Bonjour. Nous allons faire un projet de classe Alpha. Elle est belle et simple. Cela va juste générer un brief que vous pourrez utiliser pour me suivre dans cette première section du cours. Et je ne veux pas, eh bien, ce n'est pas très amusant. Si nous faisons tous exactement la même chose. Nous allons avoir la même structure, mais je veux que chacun ait son propre client brief et ses couleurs afin qu'il soit unique et que vous puissiez l'utiliser pour votre portefeuille. Les projets de classe sont maintenant tous listés dans vos fichiers d'exercices. Il existe un PDF complet appelé projets de classe, afin que vous puissiez accéder à quelque chose qui ressemble à ceci. La première consiste à accéder au générateur de projet aléatoire. C'est quelque chose que nous avons créé ici à Bringyourown laptop pour que nous soyons tous uniques. Cliquez donc sur Webflow Centrals et il vous suffit de saisir votre nom, votre ville ou quoi que ce soit d'autre. OK. Il n'est pas nécessaire que ce soit le lieu réel. C'est juste que je ne veux pas savoir où tu vis. Mais ce que nous voulons faire, c'est avoir quelque chose d'unique pour chacun. Ainsi, lorsque vous cliquez dessus , vous obtenez votre club. Donc celui-ci, utilisez le premier que vous obtenez, ne trichez pas, n'appuyez pas sur Réessayer. OK, j'ai eu l'idée. Club d'appréciation Roundabout. Il y a environ Appreciation Club, je crois, au Royaume-Uni. Mais tout le monde trouvera quelque chose de différent ici dans le brief que nous allons suivre c'est que je peux le lire à haute voix. On vous a demandé qu'il s'agit d'un site Web d'une page pour ce club k. Cela nécessite un site Web simple. Ce sera une page juste pour publier les événements à venir, les événements passés et les sponsors. C'est leur client idéal. Ils ont 60 ans. Ils vivent sur place. Et en gros, cette diapositive est juste un moyen pour le club de ne pas être contacté chaque fois que quelqu'un veut savoir à quelle heure nous nous réunissons samedi. OK. C'est donc l'objectif. PNG téléchargé. N'appuyez pas sur Réessayer pour simplement utiliser le premier que vous avez obtenu. Si vous le faites, Internet se cassera si vous le faites trois fois. OK. Ne l'essayez jamais trois fois. Téléchargez-le, préparez-vous, et nous pourrons arrêter de créer des vidéos à venir. C'est tout ? C'est dans les projets de classe ? Oui. À votre nom, vous avez téléchargé les livrables. n'y a rien pour ça. Pour certains des futurs projets de classe, je vous demanderai de prendre des captures d'écran et de les télécharger pour celui-ci. Non, prends juste ton brief. Si vous le souhaitez, faites-moi savoir sur les réseaux sociaux que vous commencez, vous utilisez ce hashtag, que vous lancez le vent. Vous devez le copier et le coller pour voir d'autres personnes commencer et me le faire savoir. Tu es vraiment enthousiaste. Est-ce déjà trop difficile ? Parce que je vais me défoncer plus tard dans le plat , Violet, même étiquette et voir comment tu t'y prends. Vous êtes encore plus bouleversé quand nous avons commencé à vous y habituer, faites-le moi savoir. C'est cool de voir des gens commencer à utiliser MyCourses. Il a tous mes réseaux sociaux. Oui. Envoyez-moi un message. Très bien. Obtenez votre brief et je vous verrai dans la prochaine vidéo. 9. Ce qui est des conteneurs ou des sections dans le flux Web: Gardez vos chapeaux, tout le monde. Nous allons en faire un bel exemple de design. Nous allons le faire parce que nous devons apprendre quelques choses que nous devons apprendre sous vos éléments de mise en page ici. Les plus importants le contiennent en section. Je vais vous montrer comment les faire et je vais vous présenter ce type, le navigateur. Il est super utile. Très bien, design Brilliance. Nous voici, Mark the first up. Créons un nouveau site. Si vous n'avez pas supprimé la première ligne ou créé un nouveau site, créez-en un vide pour commencer, donnez-lui un nom. Et mon seul souvenir s'appelle Dear Kayaks Day Kayak Club. On y va. Génial. Et vous citez. N'oubliez donc pas que c'est notre designer. On nous a donné une chose. C'est ce corps. Le corps est tout ce que vous voyez sur la toile actuellement est blanc et il n'y a rien dedans. Si je prévisualise mon site, ce membre C'est de la diffamation, je n'ai rien. Cliquez à nouveau dessus pour revenir. Nous allons donc apprendre les deux parties les plus fondamentales de la création d'un site Web. Nous allons cliquer sur ce petit bouton Ajouter. Et sous les éléments, nous allons examiner les sections et les conteneurs. Nous examinerons le reste plus tard. Mais ce sont les deux principales. Le contenant est généralement correct, c'est très général. Vous en avez un par site Web et vous l'avez rempli de différentes sections. Ce que je veux dire par là, c'est que j'ajoute quelqu'un ici. J'aurais une certaine topographie si je l' ajoute ici à mon pote. OK. Il traîne juste et c'est tout ici sur la gauche et vous êtes du genre, je veux que ce soit au milieu, comme le sont les sites Web. OK, donc je vais annuler cela en utilisant Command Z sur Mac, Control Z sur PC. Ok, donc tu dois commencer par ne pas frapper des décharges directement dans le corps. Ce que vous faites, c'est dire, eh bien, pourquoi puis-je simplement mettre une section dans le problème, cette section aussi, elle a le même problème que l'en-tête. Il s'étendra aussi loin que possible, c' est-à-dire jusqu' au bord du corps. Vous ne commencez donc pas par une section. Vous commencez par un contenant et vous pouvez le voir. Il y a des bords, d'accord, donc disons le côté ensoleillé. C'est assez courant maintenant que vous pouvez vous étendre jusqu' aux limites et je vous montrerai comment le faire plus tard avec un site Web plus complexe. Mais beaucoup de sites Web se trouvent juste au milieu et ont cet espace blanc. C'est tout simplement courant. Ce n'est pas central. Mais rappelez-vous quand les sites Web se trouvaient sur la gauche de toute façon. Nous avons donc ce conteneur et il est suspendu au milieu. Et à l'intérieur de ce conteneur que nous ajoutons, nos sections sont des sections. Les sections sont, regardons Apple. Le site Web est divisé en sections assez uniques. C'est une façon de délimiter l'information. Il s'agit d'une navigation. Il s'agit d'une section appelée navigation. Il s'agit d'une section appelée charité. Je suppose qu'il s'agit d'une section appelée MacBook Air, iPhone 313. OK. Il s'agit donc de différentes sections. Faites défiler la page vers le bas, il y a un pied de page, pareil pour Sony. Ils ont un système de navigation, ils ont ce carrousel, ils ont ce que je ne veux pas appeler cela différentes unités commerciales. Et puis le bas ou les dernières nouvelles et un pied de page. Ce sont donc des sections différentes. C'est ce que tu as. Et en ce qui concerne le flux de travail, vous vous retrouverez avec de nombreuses sections. Regardons donc notre aperçu. C'est donc ce que nous sommes en train de construire, n'est-ce pas ? Le vôtre aura un aspect différent, mais il y a un navigateur, il y a ce que l'on appelle une section héros. Il y aura une section sponsorisée, nouvelle section sur les événements, puis une section sur les événements passés. Tu peux le séparer. Je vais vous montrer comment procéder à l'aide d'une grille. Mais vous n'avez que de grandes choses appelées sections. OK, donc ce que nous allons faire, c'est ignorer la navigation et simplement créer la section des héros. Et il est plus facile d' apprendre la section des héros et nous ferons la navigation un peu plus tard. Alors, qu'est-ce que j'ai fait ? J'ai cliqué dessus, annule ça. Cliquez donc sur plus et j'ai fait glisser ma section dans mon conteneur. Tu peux voir où tu le fais glisser. Si je le fais glisser là, il se trouvera sous mon contenant. Mauvais. Je vais donc annuler et faire glisser ma section à l'intérieur du conteneur, le membre, la section s'étale un peu aussi loin que possible. Mais comme il est à l'intérieur du conteneur, Hey, il s'y retrouve piégé. Faisons un aperçu. Il ne se passe rien. Jetons un coup d'œil à l'ajout quelque chose dans cette section. Alors allons-y plus et ajoutons notre frappe. Alors, saisissez le raccourci ici, cliquez sur Maintenir, glissez, faites glisser, faites glisser. N'oubliez pas que vous pouvez le presser dans cette section ou en dessous de ce contenant de section, ou simplement ici dans le corps. Ce n'est pas ce que je veux. Si vous ne le trouvez pas au bon endroit, vous pouvez simplement cliquer dessus et le faire glisser et dire « Entrez réellement ». Tu y vas. Nous avons notre succès dans la section OWL. Ajoutons, eh bien, que nous pourrions continuer à ajouter différentes sections. Je vais juste en laisser un, pour le moment, celui que nous appelons héros parce que je veux vous présenter quelque chose, deux choses. J'ai sélectionné ma frappe, donc sélectionnez votre frappe également. Ensuite, en bas , vous voyez j'ai un objet qui se trouve à l'intérieur d'une section qui se trouve à l'intérieur d'un conteneur, trouve à l'intérieur de mon pote. Nous concevons le Web pour tout le monde. OK ? Ce sont donc les miettes de pain qui vous indiquent où vous en êtes dans le monde, ce qui peut être pratique. Vous souhaitez donc sélectionner le conteneur maintenant. Continuez à frapper. Vous pouvez dire qu'en fait, je veux cliquer sur le conteneur et lui donner une couleur d'arrière-plan, qui se trouve quelque part en bas, des arrière-plans. Donc tu pourrais le faire. Elles sont pratiques. L'autre élément de la probabilité, ce que vous utiliserez le plus ou du moins moi, c'est que je vais cliquer sur frapper. Est-ce que c'est égal à un navigateur ? Navigator vous montre de la même manière que le fil de navigation en bas, mais il contient toutes ces indentations qui sont vraiment utiles. Donc, il se trouve que je frappe à l'intérieur d' une section à l'intérieur de mon contenant, où, à l'intérieur du corps, tu auras un pote. 100 % du temps, vous aurez probablement un seul contenant et de nombreuses sections différentes et de nombreuses rubriques différentes. Ensuite, la navigation est pratique pour déplacer des objets. Supposons que je veuille ajouter une autre touche ou dire un paragraphe et que je modifie ici et ici. Mais ça s'est retrouvé dans son corps et elle. Vous pouvez le faire glisser et essayer de le placer sous le titre. Et ça marche. Je vais l'annuler pour que tu ne puisses pas le faire. Alors naviguer est vraiment bon pour cela. Vous pouvez dire qu'il est là. Il traîne pas au bon endroit, il est sous le container. Vous pouvez donc dire que je les veux juste en dessous de cette rubrique. Donc tu vas entraîner une foule, la déplacer. On y va. Il est juste en dessous, dans cette section, à traîner avec le chauffage. Vous pouvez modifier l'ordre dans lequel cet UVA, c'est parti. C'est donc une bonne façon de travailler plus avec le code qu'il ne l'est. Le visuel, des visuels parfaits pour plein de choses. Mais parfois, cela peut être délicat. C'est pourquoi je vous ai présenté le navigateur. Mettons en forme cette section un peu avant passer à autre chose et d' examiner probablement les styles. Vous pourriez donc aimer en arrière-plan, regardons notre aperçu. Je veux l'arrière-plan de ce morceau ici, j' ai une image dedans. Je vais faire l'image un peu plus tard pour le moment, il suffit de la remplir d'une couleur foncée que nous puissions voir le texte. Ceci. Dois-je colorier le paragraphe ? Vous pourriez dire paragraphe ici. J'aimerais avoir un parchemin. Vous devriez donc obtenir votre option de styles ici. Ce sont des options par défaut, faites défiler vers le bas, faites défiler vers le bas, faites défiler vers le bas. J'utilise la molette de ma souris. Tu peux frapper ça. Tu es chargé de trouver comment monter et descendre ce truc. OK, j'utilise ma petite molette de défilement. Vous pouvez faire glisser le petit curseur ou le côté. Alors voilà, le contexte. Je peux donc dire que les balises u, p ou paragraphe ont un fond sombre, comme vous le souhaitez. Tu dois le faire, le frapper. OK. Donc, vous voulez souvent utiliser des styles aussi grands que celui-ci , d' accord, je vais annuler, c'est-à-dire Command Z sur Mac, contrôler C sur PC. Vous aimeriez le faire probablement dans cette section, je sais qu'il y a un truc ici, c' est toute une section que je veux faire sombre. Alors, comment sélectionner les mains en l'air, les mains en l'air ? Comment sélectionner la section ? Tu sais, il y a deux manières de dire ici la section « Vous ». Tu te souviens de la chapelure ? J'ai d'abord cliqué dessus. Il sait donc en quelque sorte où tu te trouves dans le monde. Sur le paragraphe. Je ne veux pas que cette section ait un arrière-plan, une couleur, des arrière-plans transparents. Je vais juste utiliser un gris foncé pour le moment. Et nous la changerons plus tard en image. Tu y vas. Vous avez ouvert votre section. Vous venez de créer le premier bit de CSS. Tu ne le savais même pas. Nous utilisons donc les miettes de pain pour le sélectionner. Vous pourriez peut-être que si je clique à nouveau sur mon paragraphe, vous vous dites : « Hé, la couleur de fond a disparu. Comment puis-je cliquer sur la section ? Le panneau de navigation est probablement ce que j'utilise le plus, pourrait-on dire, pas le paragraphe. Cliquez sur lui. Tu y vas. Voici ma couleur, sur laquelle je peux ensuite cliquer et avec ce sélecteur de couleurs ici. Et si vous n'y êtes pas habitué, il vous suffit de cliquer n'importe où ici. Une fois que je clique et que je fais glisser, souvent, je n'ai pas à le faire, mais je trouve juste une couleur. Et pour choisir une couleur différente, vous pouvez faire glisser ce curseur de teinte, d'accord ? Si vous voulez un bleu foncé, si vous voulez un vert, faites glisser le curseur vers le vert, puis choisissez parmi les nuances et la saturation du vert. Mais je vais aller jusqu'ici, choisir un gris délavé, puis entrer ici et c'est fini. C'est bon, ça y est. Nous avons ajouté un contenant , pour nous protéger des bords. Et à l'envers. Dans la première section, nous allons ajouter plusieurs sections à notre seul conteneur. Et Buddy est là pour tous ceux qui sont assis en arrière-plan en milieu rural , en gardant tout le monde au bon endroit. C'est bon, c'est ça. Structure de base, conteneurs, sections. Passons à la vidéo suivante. 10. Comment créer des cours de CSS dans le Webflow: Bonjour tout le monde. Cette vidéo explique quelles classes sont des classes CSS dans Webflow. Comment stylisons-nous les choses ? C'est long car c'est un sujet relativement important qui est assez étranger aux novices en conception de sites Web. Si vous savez déjà ce qu'est une classe CSS, regardez-la probablement quand même, il y a quelques bizarreries de Webflow que nous devons maîtriser avant de pouvoir poursuivre le cours. Très bien, allons-y. Alors, qu'est-ce qu'un cours ? Une classe, une classe CSS. La version longue de styliser les éléments de la page, leur donner de la couleur style, du rembourrage et ce qui est amusant à utiliser. Nous les glissons donc un peu comme éléments au niveau des blocs sur la page, juste ces éléments similaires. Nous les avons simplement regroupés. Ensuite, nous voudrons les styliser, les sélectionner et ici, changer le style. Nous avons déjà fait le fond du gris. Alors faisons-en une autre. Cliquons sur notre page. OK, et voyons un peu comment le design que nous suivons. N'oubliez pas que vous pouvez choisir vous-même ce que vous voulez. Allons-y et stylisons-le. J'ai donc sélectionné ma frappe. Maintenant, la bonne façon de le faire est d'entrer ici et de dire : «  OK, j'ai sélectionné ma frappe ». Je vais cliquer ici et lui donner un nom. Donc je vais dire que c'est pour moi que je vais m'installer dans mes tanières, donnez-lui un nom. Vous pouvez voir ici que cela lui est appliqué. Ensuite, je vais passer au style et je vais dire ici et à la typographie, faites défiler vers le bas. Voilà ma couleur. Je vais dire, cliquez sur la petite chose qui s'y trouve et dites qu'en fait, je veux que le blanc devienne blanc. Peu importe ce que Hugh urine, tant que vous cliquez sur Maintenir et que vous faites glisser, glissez, glissez, glissez, faites glisser. peu comme aller jusqu'à ce coin et le dépasser un peu. Ou vous pouvez ouvrir si, si, si, si, si c'est le code pour le blanc en langage hexadécimal, pouvons-nous appuyer sur Entrée sur mon clavier ? Non, je vais juste cliquer. OK, et nous l'avons stylisé en lui donnant un goût blanc. Si je clique dessus, il y a une classe CSS que j'ai nommée dance hitting K et qui indique que les choses sont blanches. Je peux le réutiliser. OK. Je pourrais appeler, je pourrais dire en fait ce paragraphe ici que j'ai ajouté. Vous êtes aussi, si je clique ici, je peux dire, écoutez, voici toutes les autres que j'ai faites. Mes cours actuels qui peuvent aller à la danse, frappe, à la frappe, à la frappe de danois, ne font rien. Ça ne fait que blanchir les choses. C'est le seul emploi au monde qui fonctionne aujourd'hui. Je vais l'utiliser comme si c'était texte blanc amer et froid. Je peux simplement m'appliquer à différentes choses. Vous avez donc créé votre première classe CSS appelée hit ou density dans mon cas. Donc, sélectionner quelque chose et ajouter une classe à dessein, c'est ce que vous voulez faire. Bond Workflow sait que les gens se contentent de pirater et de le faire. Et ce qu'ils font, c'est qu'ils vous proposent des cours. Nous en avons déjà fait un, nous avons déjà mis l'accent. C'est comme votre deuxième style CSS. Souvenez-vous de l'époque où nous avions notre section, le contexte. Alors, comment puis-je cliquer sur cette section ? N'oubliez pas que vous pouvez le faire ici. Je vais d' abord cliquer à l'intérieur et dire qu'il ne s'agit pas du chauffage de la section. Cliquez dessus. Ou peut-être pouvez-vous accéder à votre navigateur et cliquer sur. La section a un titre de style, un bon style. Voyez-vous qu'ils ont été automatiquement nommés pour nous, cette petite chose bleue qui n'existait pas auparavant. Le site n'est pas né avec. C'était juste une modification lorsque vous démarrez une chaîne pour changer la couleur et vous avez oublié de la nommer. Donc c'est tout, je vais juste les nommer pour toi. Vous vous retrouverez donc avec beaucoup de cela, surtout lorsque vous êtes nouveau. Laissez-moi donc vous montrer un exemple. Ne me suivez pas. Je vais donc ajouter une nouvelle section. Rubrique. Je vais le faire traîner, essayer de me mettre au bon endroit. Eh bien, ils n'ont pas fonctionné. OK. Annuler, annuler. Je vais aller à la section. Vous pouvez en mettre un dans l'autre. Cela va à l'encontre des règles d'Internet, ou du moins des règles du flux de travail. Les éléments de section ne peuvent pas être imbriqués les uns dans les autres. Donc je suis d'accord, je vais le mettre ici quelque part où vous pourrez voir que son corps en haut, vous pouvez monter un peu plus haut, se trouve à l'intérieur du récipient, qui est un peu là où je le veux à l'intérieur du récipient, pas dans cette autre section à cause de y, laisse-moi le mettre au bon endroit. Même si tu ne le mets pas au bon endroit. Je veux vous en montrer quelques-unes, en fait, non, finissons cet exemple. Je vais donc me mettre au bon endroit et le styliser. Et sur ma petite maquette, vous pouvez voir ses fonds blancs. Oh cool. Je vais faire un fond blanc. Waouh, pourquoi ça ne va pas être si utile pour le moment. Choisissons tous les anciens arrière-plans. Donc, ici, et ce que je veux que tu fasses, je vais changer de contexte. Regarde ça, regarde ça ici. Je vais dire, pouvons-nous le faire défiler vers le haut pour qu'il soit plus proche ? C'est pire là-bas. Je vais dire que vous allez avoir une couleur de fond rouge très vif. Vous voyez qu'il a dit : « Hé, vous ne lui avez pas donné de nom, alors je vais le nommer pour la deuxième section. Lorsque vous serez nouveau, vous vous retrouverez avec la section 42, ce qui n'est pas très utile. Donc ce que tu veux faire, c'est avoir un peu plus de sens. Je vais le défaire. Je veux que vous voyiez si vous pouvez ajouter votre section, essayez-la. Alors donnons-lui un nom avant de le styliser. OK, je vais l' appeler section. Je vais utiliser la casse des titres ici. Peu importe le nom que vous donnez vos classes CSS. Tu peux leur donner n'importe quel ancien nom. Je pense qu'ils doivent commencer par une lettre, pas par un chiffre. C'est important. Ce sera une section et ce seront mes sponsors qui la laisseront entrer. Je peux le trouver facilement et je vais maintenant choisir une couleur vraiment intéressante, une mauvaise couleur, des arrière-plans. Nous devons cliquer ici pour voir la couleur. Je veux traîner jusqu'à ce que je trouve quelque chose. Je vais juste utiliser un autre gris pour le moment. Je suis un peu plus déterminé maintenant que j'ai créé un style, ai appliqué à la section intitulée Sponsors. Et vous vous demanderiez : « Waouh, que faisons-nous de celui que nous avons déjà fabriqué ? Nous allons donc le sélectionner. Nous allons cliquer ici. On va faire quelque chose. Eh bien, cliquons dessus ici et disons que je veux que cette section soit sélectionnée. D'accord, au lieu d'une section sympa, parce que ce n'est pas un très bon nom, vous pouvez simplement cliquer dessus avec le bouton droit de la souris et double-cliquer dessus et dire section. Et celui-ci s'appelle My Hero. Ok, donc maintenant j' ai une section héros et j'ai une section. On y va. Au bout d'un moment, vous prenez l'habitude de vous faire des noms d'abord, mais pour le début, vous finirez par les créer et les nommer ensuite, et c'est tout à fait normal. Maintenant, la prochaine chose à noter à propos des classes CSS est qu'il est plus souvent utile de styliser la section ou l' objet dans lequel elle se trouve plutôt que les éléments eux-mêmes que nous avons stylisés. On utilise la frappe de Dan et on la met sur les deux. Et c'est très bien. Tu peux continuer à faire ça. Il n'y a rien de mal à cela, mais c'est probablement mieux. Débarrassons-nous de cela. Alors, comment supprimer un tag ici , dans la liste déroulante. Il y en a un qui dit de supprimer celui-ci. Et je vais le supprimer d'ici aussi , supprimer cette classe. Donc c'est parti. Quoi ? Au lieu de créer une classe, c'est plus facile de le faire à tous les deux. Vous dites, en fait, que je veux que tout ce qui se trouve dans ma section, le héros, ait une typographie blanche. Ce n'est pas vraiment le cas, tu n'étais pas obligée de le faire de cette façon, mais tu vois que c'est plus facile. Il est plus facile de styliser le contenant que dans les éléments individuels, disant souvent avec le rembourrage Regardons notre exemple. Il y a un gros coup de pouce de ce côté. Je pourrais donc appuyer si je ne lui donne pas de nom et que j'en ajoute un peu, disons un peu de rembourrage sur le côté gauche en cliquant, en maintenant le bouton enfoncé et en faisant glisser. Voyez-vous qu'il a instantanément fait quelque chose appelé frapper. Et si j'en fais un autre, il atteindra 2345674. Donc je ne veux pas faire ça. Je vais m'en débarrasser. Supprimez cette classe pour que je puisse la nommer, puis ajoutez le rembourrage, ce qui est légèrement meilleur, mais en fait c'est plus facile. Il suffit d'aller dans la section. OK, donc je clique sur ma section consacrée aux héros. Je vais dire que je veux du rembourrage pour tout ce qui s'y trouve. Cliquez dessus et faites-le glisser, et tout est prêt pour le trajet. Il en va de même pour le haut . Penny, du haut vers celui-ci, c'est un peu délicat. Tu le fais glisser comme tu voulais le pousser. OK, donc je vais annuler ça. Je voulais donc que le chiffre augmente. Alors je l'ai traîné vers le haut. Tu veux le faire glisser vers le bas ? On y va. Quelle quantité de rembourrage est-ce que je veux ? Et nous allons juste le deviner pour le moment. Je vais regarder en arrière et dire quelque chose à ce sujet. Ça a l'air bien. Je veux un peu de rembourrage en bas. Combien de rembourrage y a-t-il ici ? À peu près le même que le haut. Je vais donc dire votre 23 pour pouvoir cliquer sur le bas et dire 23. Maintenant, j'ai quelques problèmes avec les chiffres. Je me rends compte que dans 23, c'est 53. Je suis quoi, Wade Quick ? Vous le verrez probablement de nouveau au cours. Mes yeux, mon cerveau et ma bouche. Ils ne l'appellent pas parfois. Bref, nous avons créé notre section à dessein. Nous lui avons donné une couleur de fond. OK. Ou est-ce la couleur de fond ? Je fais défiler la page vers le bas. Y a-t-il. Et nous avons vu que tout ce qui se trouve à l'intérieur est composé d' un texte de couleur blanche et d'un peu de rembourrage. Probablement un peu de rembourrage de ce côté également. Faites-le glisser comme vous le souhaitez. Tu y vas. Regardez l'exemple jusqu'ici. En fait, il n'en a pas vraiment besoin. Je voudrais que ce paragraphe figure un peu là, mais je veux qu'il y en ait un autre ici. Donc maintenant, c'est un très bon exemple où en fait, si je fais le rembourrage pour tout, nous sommes sur les prises de paragraphes, disons , allons-y , allons jusqu'au bout. On y va. La frappe ne sera pas assez longue. L'ego, donc c' est là que le rembourrage du contenant n' est pas très utile. Donc, ce que vous pouvez dire, c'est Allez-y, vous, en fait, je vais avoir tendance à le compléter parce que vous allez juste le désactiver pour la section. À toi de l'éteindre. Vous pouvez simplement appuyer de plusieurs manières. Zero fonctionne en quelque sorte. OK ? Alors en retirant quelque chose, il voit du bleu et celui-ci n'est pas bleu. Le bleu signifie que j'ai fait en sorte que ce soit zéro. J'ai dit « soyez zéro ». C'est grisé parce que c'est comme si je ne faisais que deviner. Tout ce qui n'est pas réglé à zéro se trouve être zéro. Je suis très précis ici. Vous pouvez donc maintenir la touche Option enfoncée sur un Mac, la touche Alt sur un PC et cliquer sur quelque chose. Vous voyez, quand le gris dit simplement que c'est, je ne dis pas être zéro, soyez juste ce que vous voulez par défaut, vaquez à vos occupations quotidiennes. Et maintenant, ce que je veux faire, c'est dire ce texte de paragraphe ici. Je vais dire que tu es mon paragraphe. Je vais utiliser le mot, je vais utiliser la lettre P, k, puis un espace parce que j'ai probablement plus de texte de paragraphe dans l'ensemble de mon document. Donc ça va dire un paragraphe pour le héros, petite classe spéciale que nous allons créer. OK, créez-le. Vous pouvez appuyer sur Entrée ou cliquer dessus. Je voudrais qu'il y ait un peu de rembourrage ici, ce qui est différent du type de section. Et que s'est-il passé là-bas ? Pourquoi n' écoute-t-il pas la section ? Cette section ressemble un peu à un parent. OK. Il dit, très bien, faites ces choses que les enfants d'ici peuvent ignorer et c'est ce qu' on appelle la spécificité. Nous en parlerons, c'est plus précis. Ce paragraphe revient donc à obtenir vagues instructions venant d'en haut. S'il reçoit des instructions plus spécifiques, il les remplacera et dira, hé, oui, mais je voulais faire autre chose pour mettre le contenu générique dans l'emballage extérieur. Maintenant, c'est ce qu'on appelle Section hero. Et ensuite, si vous voulez faire des choses un peu plus spécifiques à l'intérieur, donnez-leur leur propre nom de classe. Et dans notre cas, nous ne faisons que du rembourrage. Maintenant, le nom des classes inquiète tout le monde. Et même si tu es le meilleur plus assidu, je te le dis moi-même. Vous ne pouvez pas le voir, mais je suis plutôt assidu, j'aime toutes ces choses et je les comprends. Tu finis toujours par atteindre 17. Je ne m'en souviens pas, peut-être pas si mal. Vous vous retrouverez avec des cours que vous commencerez avec les meilleures intentions et vous finirez par les faire fonctionner, mais peut-être pas aussi organisés que vous l'espériez, mais vous vous améliorerez. Et dans ce cours, vous remarquerez qu' il y a en quelque sorte trois sections pour le CSS, juste une introduction suffisante pour nous aider à démarrer. Et puis plus tard, nous ferons un niveau deux et le niveau trois sera un code CSS de haut En parlant de code, jetons un coup d' œil à deux choses que je veux faire. Je veux voir le code et le panneau de navigation. n'y a pas de panneau de kit parce que c'est rapide et c'est comme si vous cliquiez dessus et que vous vous disiez, disons que je veux le faire glisser dans la section suivante, je peux probablement le faire parce que ce n'est pas le cas si dur que ça. Oh, très bien. Point. J'ai trois choses à te dire. La première est que le panneau est pratique lorsqu' il est toujours ouvert. Donc, cela signifie que lorsque vous faites des choses dans le panneau de navigation et que vous vous dites J'ai envie de le faire glisser ». Vous voyez qu'il ne disparaît pas, qu'il y reste tout le temps et qu'il est facile de s'y plonger directement. Vous pouvez dire que je veux aller à l'intérieur de la section, plutôt que d'essayer de la faire glisser sur la page, vous pouvez le faire. Il n'y a rien de mal à cela. Et annulez le panneau de navigation si vous y accédez. OK. Parce que sinon, il se ferme automatiquement et c'est super pratique d' être ouvert tout le temps. Pour faire ça avec moi, tu t'y habitueras. Et cette option, ici, dit épinglez le navigateur, ne le fermez pas. C'était pour les choses. Quels étaient les deux autres ? Tu attends là-bas ? Oh, ouais. Je m'en souviens Jetons donc un coup d'œil parce que j'ai dit que vous écriviez du code, exécutiez du code. Comment le sais-tu ? Vous pouvez monter ici et c'est une option qui indique Exporter le code. Vous pouvez cliquer dessus pour exporter tout ce que vous devez payer pour compter. Mais vous pouvez en voir une partie ici. Il charge le code. Allez. Chargement du code. Je ne suis pas sûr que je charge toujours normalement. Fermons-le et essayons à nouveau. Oui. OK. Alors, quel code avons-nous écrit ? Nous avons écrit du HTML, du CSS et du JavaScript HTML. Nous avons donc ajouté que nous savions qu' il y avait une plaque corporelle. Regarde ça. C'est ce que c'est. Donc, si vous le faisiez, j'ai essentiel de la conception de sites Web. Nous écririons ce code et prononcerions body dans une classe div appelée container. À l'intérieur se trouve ce qu'on appelle une section. Nous écrivons du code et il est beau, joli et bien présenté. C'est facile à lire, mais nous le faisons manière plus visuelle. Tu n'as jamais besoin de regarder de ce côté. C'est juste intéressant. Je pense que ça l'est de toute façon. plongées ne sont que des conteneurs génériques, des divisions divisées en tags. Nous avons un conteneur qui permet de garder les heures au milieu. OK, je vais passer à la section et nous lui avons donné nom de classe de la section ici. Nous avons une autre section ici où nous avons donné un nom de classe, d'accord, donc divisez la classe de sections, les sponsors. Ce n'est donc pas le code HTML. Nous l'avons un peu dit, voici une boîte, elle s'appelle les sponsors de section. Ici, dans mon CSS, nous l'avons stylisé. Nous avons dit, d'accord, où sont les sponsors de ma section, elle est là. Et c'est ce que je veux que tu lui donnes. Il s'agit de la classe CSS que vous avez créée. Cette classe est appelée sponsors de sections CSS. Et cette couleur de fond, c'est ce que nous avons fait. Nous avons fait un peu plus à la section intitulée Hero. Nous ajoutons un peu de rembourrage, de couleur d' arrière-plan et de couleur de police. N'oubliez pas que Dan est en train de frapper dedans Nous n'en avons plus besoin, mais cela a réglé la couleur sur FFF, qui est le blanc. Et nous en avons fait une au hasard . OK, donc nous écrivons du HTML, CSS et du JavaScript. Nous ne le touchons pas vraiment pour le moment, mais il est produit pour nous. Votre Coda. C'est pourquoi c'est comme si vous n'aviez aucun code à coder. L'autre chose que je mentionnerai pendant que nous sommes ici, pouvez-vous voir que les noms de classe ont Si vous faites mon autre cours de conception Web, nous utilisons du code VS, vous devez savoir qu'un nom de classe commence par un point, puis doit être écrit, doit être en minuscules. Vous pouvez avoir des espaces, toutes sortes de choses. Alors que Webflow le dit, nous ne voulons pas apprendre aux gens qu' faut taper quoi que ce soit dedans. Et nous allons vous le convertir avec la bonne syntaxe, c' est-à-dire qu'il n'y a pas d'espaces, donc ils ont juste mis des traits d'union là où j'ai mis des espaces et ils ont automatiquement mis tout en espaces et ils ont automatiquement mis tout minuscules pour nous. Nous n'avons jamais besoin de venir ici. Je pense que c'est utile. Bref. Jetez un œil à votre code, voyez ce que vous avez créé. Maintenant, j'ai dit qu'il n'y avait que deux choses, puis qu' il n'y avait qu'une chose. C'est ce que tu as vu. Je l'ai ignoré. Donc, c'est un bon exemple, d'accord, c' est qu' on dit un certain nombre de choses à ce sujet ici. On dit que c'est ce paragraphe que j'ai nommé. Et qu'est-ce que cela nous dit de faire ? Cela nous dit qu'il veut tout ce qu'il nous dit d' être, c'est que nous ne voyons que ce qu'il était, rembourrage, c'est la seule chose que nous avons faite à ce truc. Tout ce qui le rend blanc, qui le pousse de ce côté vient. D'où est-ce que ça vient ? C'est exact. Il vient de cette section à section dit B, ceci par le haut, ceci par le côté, et être un texte de couleur blanche. touches sont bleues lorsque les choses sont terminées et tout est blanc ou gris lorsque vous n'avez pas dit de faire quoi que ce soit, nous discuterons des couleurs du MBA plus tard. Mais cette balise, ce texte de paragraphe, reçoit des commandes. Il est connecté à une commande spécifique, disant « be padding » de ce côté. Donc, quand je le fais glisser ici, c'est tout ce qui l' accompagne, c'est ce truc là parce que accompagne, c'est ce truc là parce tout le reste qui le rend blanc et le pousse vers le bas par la gauche. Maintenant, nous partons du haut et la gauche vient de ce type, de cette section. C'est donc une chose intéressante à comprendre. Cela contribue-t-il à rendre les choses plus confuses si tôt ? Pourquoi ne pas simplement l'appliquer à tout pour que lorsque vous le faites glisser ici, il soit blanc et que vous le collez dessus. Tu peux le faire. C'est juste très répétitif, surtout si je dis ensuite que je crée un site de blog et que j'ai mes blogs, probablement seulement quatre articles parce que c'est tout ce que je peux faire avant de perdre tout intérêt. Mais j'adore faire des vidéos. Mais supposons que vous soyez un rédacteur de blog passionné ou que votre client l'est, et que vous créez 1 000 pages. Et vous en avez appliqué un à chaque bout de texte de paragraphe et ils disent : « Pouvez-vous agrandir la police ? Tu peux dire non, parce que tu vas devoir trouver chacun d'eux, cliquer dessus et les changer tous pour un autre style. Alors que si vous vous contentez de le faire aux conteneurs, c'est relativement facile car tout ce qui se trouve à l'intérieur vient de la droite. Vous dites qu'en fait, je voulais nous amener maintenant à être un contraste de lecture horrible, facile. Et s'il y avait 1 000 bits de texte dans cette section, cela pourrait ressembler à la section article. Eh bien, dans la section des articles de blog, tout est prévu pour le trajet. accord, il y en avait un long, mais il est assez fondamental pour le reste de ce cours, comprendre les cours, de savoir comment ils s'appliquent et un peu de spécificité. La spécificité est un mot difficile à dire, d'accord ? Et c'est une façon de dire que je vais être très précis pour cette partie, mais tout le reste est juste générique. Suivez-moi à moins que je ne vous dise de faire autrement. C'est bon, ça y est. Passons à la vidéo suivante. 11. Comment ajouter des images avec une marge dans le flux Web: Bonjour tout le monde. Dans cette vidéo, je vais vous montrer comment intégrer une image. Nous allons examiner le panneau des actifs y ajouter une classe et expérimenter les différences entre la marge et le remplissage. Très bien, allons-y. Oh, et je vais également vous montrer un moyen d'obtenir images gratuites à usage commercial pour votre projet. C'est un bonus. Très bien, maintenant allons-y, d'accord, premier arrêt. Faites-vous une image de marque et quel est le club pour lequel vous le faites. Et vous pouvez accéder à quelque chose comme unsplash.com. Unsplash est juste une excellente image gratuite à usage commercial. OK, c'est assez incroyable. Je vais cliquer ici et saisir la liste de jonglerie. Je suppose juste que vos clubbers jonglent et trouvent l'une de ces images ici et qu'ils cliquent sur cette petite option qui indique les téléchargements pour trouver quelque chose pour votre club. Vous pourriez, je ne sais pas, coudre ou continuer à jongler avec ce que c'est. Trouvez votre image, téléchargez-la et préparez-vous. J'ai donc déjà mon image, elle se trouve dans les fichiers d'exercices. Donc, tout d'abord, nous devons ajouter une image, d'accord, alors ajoutez ce premier petit onglet ici, d'accord, et en bas , il y en a un qui s'appelle Media et son image. Cliquez dessus et faites-les glisser et placez-les là où vous devez les placer. possible, mais au-dessus d'une petite ligne bleue. OK, j'ai une image. Allons choisir l'image. Cette petite séance surgit et tu peux faire des choses de base. Je vais utiliser Choose Image. Et ce qu'il a fait, c'est qu'il a ouvert cet onglet ici, l'onglet de vos actifs. Nous étions sur l' onglet Ajouter et sur ce navigateur, mais maintenant nous avons cet onglet Ressources. C'est ici que nous conservons toutes nos images. Vous pouvez soit télécharger votre image. Nous allons le faire, aller le parcourir et le trouver. Ce que je trouve super utile, c'est de l'y glisser. Alors, où sont mes fichiers d'exercices ? Alors, voici le mien. Je suis dans le club de la perspicacité. J'ai une image ici. Et c'est vraiment cool parce que si vous en avez 20, il vous suffit de les cliquer et de les faire glisser. On y va. Voici mon image, elle a été téléchargée, d'accord, et maintenant ce que je peux faire, c'est parce que nous avons sélectionné la photo. Si je clique dessus et que je le jette un peu dedans. OK, donc mon petit porte-monnaie a été sélectionné, juste cliqué dessus et il s'est en quelque sorte injecté dedans. Joli Et elle est bien trop grande. Vous pouvez simplement en saisir le bord. Voyez ce petit point d'ancrage en bas. Cliquez sur Maintenir, faites glisser. Vous n'avez rien à maintenir enfoncé, il suffit de le faire glisser vers le haut et il sera redimensionné en ligne. Ce genre de taille. Je regarde ma maquette que j'ai faite, quelque chose comme ça. On y va. Donc, en termes de paramètres d'image, vous pouvez avoir un peu plus de menu et accéder aux paramètres à partir de celui-ci. Parce que pour le moment, c'est très bien de traîner. Vous pouvez voir les chiffres là-bas, mais dites qu'il faut que ce soit exactement 50. Vous pouvez soit accéder à ce petit rouage ici, paramètres de l' image , soit il y a un onglet ici, donc je vais le fermer. Fermez-le. La même chose apparaît. Vous pouvez voir ce rouage ici. C'est la même chose, deux manières différentes d' arriver à la même chose. Ce rouage, ce rouage. La différence entre ce rouage, c'est qu'il a un peu plus de réglages, un peu plus avancés. Donc, les bases, ont remplacé l'image ici et vous pouvez saisir la taille. Donc je vais dire, et cela doit être 50 et je laisse la hauteur à automatique. Si je tape la hauteur, nous allons la faire 20 pixels. Il l'écrase. Vous souhaitez donc le laisser automatique en le supprimant. Donc, il n'y a rien là-dedans. On y va. Eh bien, fais-en 50. On y va. Bien, nous parlerons plus en détail des images plus tard, mais c'est tout pour le moment. J'ai promis que nous parlerons de rembourrage par rapport à la marge. OK ? Je veux donc ajouter un peu d'espace entre mes paragraphes qui sont très serrés. Donc, ce que je veux faire, c'est ajouter une classe CSS , d' accord, et comment faire ? Je l'ai sélectionné. Je pourrais juste aller dans Styles et commencer à faire glisser des choses. Quel va être le problème ? C'est vrai, cela va me créer automatiquement une classe que je pourrai renommer plus tard, ce qui est très bien. Mais ce que je veux faire, c'est être spécial et dire que je veux passer à l'image. Et celui-ci va faire froid. Première majuscule. Ce n'est pas nécessaire. Je sais juste que c'est une tique. J'ai Image Hero. Donc je l'ai mis à l'envers parce qu'il y aura une image qui se trouvera peut-être dans le pied de page ou dans la section des sponsors. Je place donc toujours l'image d'abord puis les autres éléments ensuite, juste pour qu'elle soit plus facile à retrouver plus tard, ou mon image de salsa ensemble plutôt que de héros au premier plan. On y va. ce que je vais faire. Appuyez sur Entrée sur mon clavier. Et je vais dire que je vais ajouter un peu de rembourrage ou marge maintenant avec un remplissage d'image et que la marge n'a pas d'importance. Je vais donc le faire glisser vers le bas de celui-ci. J'ai donc un peu d' espace. Joli Vous remarquerez que si je l'annule, si je l'annule, vous maintenez enfoncée l' option sur un Mac, Alt sur un PC et cliquez sur OK, et il s'en supprimera. Vous remarquerez une marge si je le fais glisser vers le haut. Ok, mais visuellement, ça ne ressemble pas à ça. Rien d'autre ? OK, donc le remplissage et la marge d' une image ne nécessitent pratiquement pas de soucis. Tu peux faire l'un ou l'autre OK, là où ça change, c' est de dire cette section ici, donc je clique simplement sur cette zone ici. Nous avons déjà fait du rembourrage. Disons que j'en veux plus mais que je vais simplement utiliser la marge parce que cela n'a pas d'importance. Dan a dit qu'avant la section, examinez-la. Si je fais glisser la marge vers le bas. OK, bon, vous voyez la différence entre la marge et le rembourrage. rembourrage est la limite interne de ce qui est considéré comme cette section. La marge l'éloigne de son élément suivant. Cela ajoute donc de l'espace entre eux. Même si, disons que si je le fais à cette balise p, elle fait toujours la même chose. Il va soit s'ouvrir soit le rembourrage le pousser depuis l'intérieur de la balise p. Et la marge va éloigner l'extérieur de la balise p de l'élément suivant. Ça va avoir la même apparence, donc si je le fais glisser vers le haut, je gagne de la place. Amende. Fais-le Si j'utilise du rembourrage, faites-le glisser vers le bas. C'est bizarre, non ? Vous le faites glisser vers le haut pour noyer le rembourrage interne. Vous pouvez en quelque sorte voir sur ces boîtes l'aperçu qui se trouve à l'extérieur. Mais ce que tu peux voir, c'est vraiment la même chose ? si je clique dessus, il y a la même quantité d'espace , j'utilise une marge ou un rembourrage, donc ça n'a pas vraiment d'importance ici ou pour une image, mais certaines choses fonctionnent comme ça. Je veux que tu aies de la place en haut, d'accord ? Ou un peu de rembourrage à l'intérieur. Tu as compris l'idée. Nous le ferons encore quelques fois ici. Mais dans ce cas, si vous recherchez un rôle, d'accord, il vaut mieux utiliser des marges que du rembourrage parce que vous pouvez voir cette boîte se trouve tout haut. Il n'y a rien de mal à cela. Je vais me souvenir de Option ou Alt, cliquez dessus. Il vaut mieux le repousser avec une marge. La balise p est donc séparée de ce bit ici. Il y a un écart entre les deux. Cela prend plus de sens plus tard lorsque nous rendons les choses cliquables. Si je veux que ce soit cliquable, je ne veux pas que tout cela soit cliquable également. Je veux juste que la balise p soit cliquable. On y va. Alors je vais voir Qu'ai-je fait ? Je vais annuler ce que je suis en train de faire. Donc, votre Command Z ou Control Z sur un PC. Et j'ai une marge, dans ce cas, en haut de mon image. J'ai ajouté une classe appelée Image Hero, ai vérifié une image, et c'est génial. Nous pouvons accéder aux paramètres en cliquant dessus ou en dessus avec sa sélection en allant ici. Pareil, pareil. C'était un truc en plus. Très bien, importation d'images dans le flux de travail. 12. Images de fond comment superposer le texte sur le flux de l'image: Bonjour à tous. Dans cette vidéo, je vais vous montrer comment ajouter une image de fond qui le remplit un peu pour que les textes puissent être placés au-dessus. Je vais également vous montrer comment assombrir l'image afin avoir des textes lisibles sur le dessus. Très bien, allons-y. Bien, pour ajouter l'image d' arrière-plan, vous devez d'abord choisir une image d'arrière-plan. OK, encore une fois, si vous voulez une image gratuite pour votre arrière-plan, pour le club que vous créez. Accédez à unsplash.com, saisissez et trouvez quelque chose. C'est mieux s'il a un fond sombre. Waouh, ça n'a pas à l'être. Si vous voulez avoir un arrière-plan clair comme celui-ci, vous devrez probablement avoir du texte foncé dessus. Et j'ai cherché quelque chose pour moi avec un fond sombre, comme si ça serait bien parce que le texte apparaîtrait bien. Pour ajouter votre image d'arrière-plan, il est préférable de l'ajouter d'abord aux ressources, accord, donc je vais les avoir dans l'onglet Ressources ici. Et tu cliques sur le téléchargement et tu le ou tu le fais, je le trouve. Et l'image 2 ici, je vais simplement la faire glisser. Il va se télécharger tout seul là-haut. C'est vraiment un gros dossier. Je vais vous montrer comment les obtenir plus petits plus tard, mais beaux fichiers volumineux. Et ce que nous allons faire, c'est ajouter le graphisme de fond. Remarquez qu'il s'agit d'une unité, ce n'est pas comme une image que l' on met derrière tout comme dans d'autres programmes de design. Ce que nous faisons, c'est que cette section est petite section utile que nous avons nommée héros. Nous allons dire que vous avez une formation, nous l'avons déjà fait. Regardez en bas, voici une couleur de fond grise. En fait, ce que je veux, c'est que tu peux voir ça dit image et dégradé. Donc, ceci en plus, en arrière-plan, je voudrais ajouter notre image, ce qui est cool. Quel dégradé ? Ok, si tu veux le faire et où il y a des images, il choisit l'image et je clique dessus. Cela ouvre le panneau des actifs et vous devez dire celui-ci, s'il vous plaît. Tu vas y donner une seconde et ça va être énorme. Le vôtre peut être petit, cela dépend de la taille. Ok, donc pour commencer avec les pensées personnalisées, d'accord. qui signifie vraiment que c'est la largeur accrue que ai téléchargée. C'est énorme. Celui que vous voulez probablement, c'est une couverture. Il existe une personnalisation que vous pouvez saisir dans n'importe quelle ancienne taille. Vous pouvez dire que je veux que ce soit 30 pixels sur 30 pixels. Tu ne pouvais pas faire ça. C'est très courant, mais juste pour couvrir la couleur, c'est étirer l'image pour l' adapter à la taille de la section. Si c'est ce que je décide, je vais ajouter deux balises P, qui indique que si je copie cette balise p par la commande C sur un Mac, contrôle C sur un PC, puis que je colle la commande ou le contrôle V que j'ai créé en plus. Mais dans ce contexte, je suis plus grand. Je vais donc en montrer plus. Et je le colle à nouveau parce qu'il continue de remplir l'arrière-plan. Ça le couvre. Je ne vois rien de ce côté de l'image maintenant, ce qui est un peu pénible, vous pourriez être. La partie centrale de ce dessin est cette jolie rivière. Je veux qu'il soit au milieu et que vous puissiez y apporter quelques modifications. Souvenez-vous donc de la section la plus lourde sélectionnée, car c'est là que l'arrière-plan est appliqué. Et en entendant et en arrière-plan, je vais cliquer sur mon image. Et tu as quelques options. Donc, vous pouvez dire, pouvez-vous voir le positionner en disant, je vais commencer par le haut à gauche et m'étendre, vous pouvez dire qu'en fait, il a juste grandi à partir du milieu. Ainsi, lorsqu'elle sera redimensionnée, le centre de l'image se trouvera au milieu. Supprimons ceci. Maintenant, un petit peu. Le bas a un peu disparu de partie supérieure des côtés, quel cartilage. Donc c'est le genre de compromis et vous seriez du genre, hé, je veux que ce soit parfait au pixel près. Cette image est parfaite. Sa photo de produit, elle doit fonctionner parfaitement. Maintenant, le problème avec la conception de sites Web, c'est le nombre d'appareils sur lesquels vous devez le montrer. Le design réactif est un terme utilisé pour désigner l'affichage sur le bureau. Et elle a trouvé celui-ci ici. À quoi cela ressemble-t-il sur une tablette ? C'est une taille complètement différente. Le format étant différent, le contenu est redimensionné et réajusté pour s'adapter à cette taille. Et l'image aussi. Donc, si vous l'obtenez parfaitement et sur un ordinateur de bureau, il n'aura pas l'air parfait. Sur tablette. Vous ne serez pas capable de voir chaque pixel et de le cadrer parfaitement. Contrairement à la conception imprimée où vous pouvez être vraiment parfait. Vous devez l'être, vous devez malheureusement être bon en matière de conception Web à 90%. Alors allez jusqu'ici, vous en montrerez un tout petit bout. Je vais vous montrer comment corriger tous ces différents points de rupture au fur et à mesure. Mais c'est juste une chose à laquelle il faut faire attention lorsque vous concevez des choses. Et surtout, les couvertures d'images d'arrière-plan sont bonnes car elles s'adaptent à toutes ces tailles d'appareils différentes que nous ne concevons que pour un ordinateur de bureau générique. Vous avez vu combien d'ordinateurs portables grands écrans et d'écrans sont disponibles. Il y en a tellement que votre site doit être réactif à tous. Cliquons donc à nouveau sur notre section consacrée aux héros et examinons quelques autres points. Avant de partir, je vais à nouveau cliquer sur mon image. La contrainte de couverture est donc plus comme elle montrerait l'image complètement, la roche en bas ici. Il va le presser dans l'épice fournie si je le fais sur mobile maintenant, il se pressera puis carrelera. Je ne l'utilise pas beaucoup. OK. Si vous n'aimez pas le carrelage, vous pouvez le désactiver pour faire en sorte qu'il s'adapte à tout dans la fenêtre et vous pouvez dire en fait que je veux qu'il ne soit pas carrelé sorte qu'il s'adapte à tout dans la fenêtre et vous pouvez dire en fait que , carrelé pour toujours. Vous pouvez le nommer à gauche et à droite, de haut en bas, sans carrelage, mais ce n'est pas ce que je veux. Je veux que ça couvre. Merci. Housse. La prochaine chose que je veux faire c'est assombrir au moment où il fait un peu clair. Vous pouvez assombrir vos images avec du CSS avec ces styles. Vous pouvez accéder à Photoshop, Figma ou XD ou illustrer ce que vous utilisez pour concevoir Canva, quel qu'il soit, Microsoft Paint. Vous ne pouvez certainement pas vous y attarder et Microsoft Paint, mais nous devons l'assombrir. Il y a donc une petite astuce que vous pouvez faire. Je vais vous montrer que nous avons une image en arrière-plan. Vous pouvez en fait avoir plus d'une chose en arrière-plan. Pour le moment, j'ai une image en arrière-plan, mais passons à autre chose. C'est pourquoi il y a un avantage. Vous pouvez dire que je ne veux ajouter personne, mais vous voulez ajouter, je veux ajouter une image parce que j'en ai déjà une. Ni un dégradé ni un dégradé linéaire, ni un dégradé radial. Je veux celui-ci. Je veux une couleur unie, s'il vous plaît. OK. Et cette couleur unie va cliquer dessus. Et je ne sais pas si cette chambre a été visitée depuis la dernière fois que je l'ai faite ou si c'est la valeur par défaut. Mais de toute façon, je veux choisir une couleur foncée. C'est peut-être un noir teinté. Ce que je vais faire, c'est le glisser directement dans le coin, d'accord, zéros noirs 00000 sont la couleur CSS pour le noir. Si, si, si, si c'était blanc, souvenez-vous. Et ce que nous pouvons faire, c'est utiliser celui-ci appelé Alpha. Pour le moment, c'est 50 %. C'est la transparence du curseur. Nikola Alpha, du web design pour être chic. Mais nous savons que c'est de l' opacité ou de la transparence, d' accord, vous pouvez décider de la manière dont je choisis par rapport à la transparence. Je vais donc trouver quelque chose où je peux lire mon texte car nous voulons un bon contraste entre le texte et l'arrière-plan. D'accord, ça me suffit. Je vais cliquer dessus. Si vous êtes du genre, cela n'a pas fonctionné pour moi, ce qui aurait pu se passer, c'est que je vais à nouveau cliquer sur ma section. Est-ce que vous pouvez voir qu'il y a réellement un ordre des couches ici. vôtre est peut-être en dessous, peut-être en haut. Vous voulez vraiment qu'il soit au top avec un peu de transparence. Et l'image ci-dessous, vous allez, eh bien, une dernière chose que j'ai noté ici pour vous montrer c'est que j'utilise la commande Annuler Z. Je suis allé directement aux raccourcis. Voici une méthode manuelle. Regardez, annulez, refaites. Si vous fermez le flux de travail et que vous y revenez, ces annulations seront vouées à la spéléologie. Vous pouvez annuler, rétablir à l'aide des boutons. C'est bon, ça y est. Passons à la vidéo suivante. 13. Boutons avec une couleur de survol dans Webflow: Bonjour tout le monde. Dans cette vidéo, nous allons voir comment ajouter un bouton et le faire apparaître quelque part ajouterons également cette couleur de survol ici ainsi que quelques éléments liés à un bouton. Si vous êtes venu ici uniquement pour la couleur du couvre-lit, faites-la sélectionner. Et elle est là. Ce petit menu déroulant. Passez le curseur et stylez cela, choisissez un arrière-plan, couleur d'arrière-plan différente, et vous ajouterez le survol. Je connais le titre de la vidéo, Promises rollover color and bought. J'ai fini par le faire environ cinq minutes. Alors, tu y vas. C'est le code de triche pour le reste d'entre nous qui veulent tout savoir sur les boutons. Continuons. Très bien, ajouter un bouton, c'est facile. Va voir Ed. Et en bas, il y a un bouton appelé « Basic ». Et cliquez sur Maintenir et faites-le glisser. Et ça ne va pas tomber en dessous. Il va vouloir accéder au site d'une image. Il sera placé sous ce texte par des balises de paragraphe. Mais voyons pourquoi je vais m'en prendre à ce bouton. Vous le verrez dans mon panneau de navigation ici. N'oubliez pas que si vous ne l'avez pas bloqué, allez dans le navigateur, autocollant sur le bord, très pratique. Vous pouvez voir qu'il est dans cette boîte de section et qu'il est ce qu'on appelle un frère ou une sœur parce qu'il est avec ses autres frères et sœurs. Il est tous parmi ces gars qui sont tous dans cette section. Il est le parent dont les enfants ont besoin et aussi les frères et sœurs de ces gars. Quoi qu'il en soit, un peu de langue pour toi. Mais il n'est pas en dessous. Pourquoi est-ce en dessous ? C'est parce que cette image fait quelque chose d'un peu bizarre. Ce hit tag ici, nous avons un texte de paragraphe. Ok, tu peux voir quand je le survole, tu peux voir que Trisha est allumée à l'infini, d'accord ? C'est ce qu'on appelle un élément au niveau du bloc. Et ce qui se passe, c'est qu'à moins que tu ne dises que c'est une largeur, ça passe à 0 autant que je peux par rapport à l'âge. Pareil pour le texte du paragraphe, je vais faire tout le chemin ici et je le remplis. Personne d'autre ne peut être ici. C'est la valeur par défaut. Vous pouvez voir une image ici, il ne se précipite pas sur les bords. Il dit que je suis là. Il est ce que l'on appelle les « inline block level », « inline », changez-les. Voici donc ce type qui a cette option. Nous allons donc aborder la mise en page plus en détail au fur et à mesure, mais passons à celle-ci maintenant. Donc, une fois sélectionné, je suis dans mon style. Je vais passer à cette première option, dit Layout. Il a déplacé le réglage est réglé sur quelque chose appelé en ligne. En ligne, tu veux juste dire qu'il fait la queue. Ce type fait la queue lui aussi. Tu vois qu'il fait la queue ? Regardons la différence entre celui-ci de cette façon. Il est affiché et il est réglé pour bloquer un et il se remplira, vous pouvez même le voir. Merci Mais à flot dit qu'il remplira toute la largeur disponible. Ou est-ce que c'est ce type ? Il ne le fera pas. Il pouvait s'empiler l'un à côté de l'autre. Les boutons sont donc vraiment bons lorsqu'ils sont alignés. Parce que si je veux plein de boutons, un peu comme dans ce navigateur et en haut , nous n'avons pas encore. C'est vraiment bien. Et en tant qu'image, vous voulez parfois que les images s' empilent les unes à côté des autres. Mais dans ce cas, nous ne voulons pas vous dire, mon ami est déjà allé voir celui-ci ici. Regarde ça. Il dit : Personne ne peut être à côté de moi, pas du tout amical. Le bouton, cependant, est enfoncé et pressé vers le bas. Très bien. Je vais donc les boutons de son propre chef. Allons-y et faisons quelques changements. Donc celui-ci s' appellera « Détails de l'événement ». OK, regardons quelques styles afin que vous puissiez tous les sélectionner ici. Je peux y faire des bols et tout ça. Et ce que je veux faire, c' est qu'une fois sélectionnée, je vais vous montrer une topographie avancée. Topographie. Il y en a un ici. Cela dit, nous allons taper plus d'options de saisie, prêt ? Il y en a un ici qui dit de faire des casquettes. Je ne sais pas pourquoi cela vous y a amené. Bref. Nous y sommes allés. Je veux dire, il suffit de taper en majuscules. Gagnez du temps. Très bien, mettons-le. Maintenant. Que se passera-t-il si j'y vais et si je le fais ? Eh bien, en fait, je l'ai déjà stylisé. Je ne le savais pas. J'ai fait toutes les casquettes. Que s'est-il passé ? Vous l'avez vu un style a été créé appelé bouton. Je ne l'ai pas fait. Il n'était pas là quand je l'ai sorti pour la première fois. Regarde ça. Si je fais glisser un bouton maintenant tout seul, vous verrez qu' aucune classe n'est appliquée à lui. D'accord, mais quand j'ai ajouté ce style, faisant semblant de le faire exprès, mais en oubliant de le nommer parce que nous le faisons tous , j'ai créé ce truc appelé bouton. Et cela peut être déroutant quand vous êtes nouveau et que vous vous demandez, oh, est-ce que c' est quelque chose qui a déjà été fait parce que c'est une note spéciale, vous l'avez fait par accident. Appelons donc ce bouton et nous allons appeler celui-ci ici. OK, juste parce que c'est une boîte d'héritage, je vais créer un style que je n'utiliserai nulle part ailleurs sur le site Web, juste dans cette boîte à héros. C'est pourquoi je l'appelle Button Hero. Vous pourriez vous retrouver par un bouton de navigation ou un bouton de bas de page, un bouton Page de contact. OK, donc nous avons trouvé ce qu'il faut. Et je vais faire un peu de style. Je vais choisir une couleur. Donc, sous l' arrière-plan de ce bouton, je vais choisir juste un vert dans mon design. Vous pouvez choisir les couleurs de votre choix. OK, et qu'est-ce que je veux faire d'autre ? Je vais bien choisir certaines zones topographiques. Nous allons utiliser les nouvelles zones. Open Sans est un mot vraiment joli, joli, assez fort pour cela. C'est une police de texte très sensée, vraiment lisible, gratuite à utiliser, et j'aime bien, mais je vais passer au gras en termes de taille. Oui, 14 pixels me conviennent. La seule autre chose que je veux faire est d'ajouter des coins arrondis. Maintenant, dans ce panneau, je voudrais vous donner un petit conseil sur l'utilisation du panneau des styles. C'est grand et déroutant. Pas grand et déroutant. Il y a juste beaucoup de choses comme où se trouve tout ce que vous pouvez faire défiler vers le bas et vous finissez par le trouver. Ce que j'aime faire, vous n'aimerez peut-être pas, c'est que vous pouvez voir ces petites flèches ici. Vous pouvez simplement cliquer dessus pour les réduire et ouvrir celui que vous voulez. OK, alors je veux faire quoi ? Les bordures sont excellentes, il suffit de l'ouvrir, travailler dessus, de la refermer. Ça se sent un peu plus. Libère-moi. Une autre astuce intéressante est avec eux. Vous pouvez maintenir la touche Option enfoncée sur un Mac, la touche Alt sur un PC, la maintenir enfoncée, puis cliquer sur l'une d'entre elles, et toutes s'ouvrent et maintiennent la même touche enfoncée. Ils ferment tous. Ces petits points bleus qui vous indiquent que quelque part ici vous avez fait un changement. Vous n'avez apporté aucune modification à la bordure. Il ne se passe donc rien. Donc, bouton Hero, Nothing. Tu n'as rien changé de tout ça. Vous avez fait de la topographie. Tu te souviens de ce que c'était ? C'est juste Nous avons tout fait en majuscules et nous avons créé quelques informations de base. Donc, si je fais des frontières maintenant et que je dis vraiment que je veux que ce rayon de frontière soit quelque chose. Je le fais glisser ici. Je suis en train de le regarder ici. OK. Tu choisis quelque chose et tu t'en vas. Maintenant, je le fais tourner vers le bas. Tu vois, oh, c'est un point bleu. point signifie que j'ai changé quelque chose, que je vais le faire, mais plus tard, cela signifie que quelque chose d'autre s' applique à cela. Ce n'est pas quelque chose que vous y avez fait directement, ce qui est important, mais nous y reviendrons. Je sais que tu vas me le demander. J'ai des coins arrondis. Regardons le rembourrage et la marge. En fait, non, faisons en sorte que ça fonctionne. Nous n'avons pas arrondi les coins, mais nous n'avons créé ce lien nulle part. Un bouton a donc des éléments par défaut. Maintenant, comme avant les réglages depuis ce rouage ici ou avec celui-ci sélectionné, nous pouvons passer à la cargaison par ici. Ça n'a pas d'importance. Beaucoup d' options, juste quelques options. Utilisons uniquement les quelques blessures par défaut ici, nous allons utiliser cette première. Ainsi, lorsque vous cliquez sur ce bouton, il va accéder à l'URL. Vous pouvez choisir l'URL de votre choix. Ok, et ça va s' ouvrir et maintenant l'étui se trouve dans un autre onglet, d'accord ? Cela signifie simplement que lorsque vous cliquez sur le bouton, le site Web reste ouvert, un nouvel onglet s'ouvre en haut dans le navigateur et accédez à celui-ci. deux sont donc ouverts s'il s'agit d'un lien interne vers une autre page de votre site ou si vous souhaitez qu'il le remplace, vous pouvez inverser ce décalage. Le site Web sera transféré à l'endroit où cela vous sera demandé. OK, faisons-le et faisons-le un test, ouvrons un nouvel onglet et fermons-le. Je vais passer à mon avant-première. Nous n'avons pas fait beaucoup de prévisualisation de toute façon, parce que c'est joli, c'est plutôt bon pour vous montrer exactement à quoi cela va ressembler dans un navigateur sans que vous ne le prévisualisiez. Prévisualisez, il ferme tous vos panneaux et se débarrasse de tout cela, un peu comme des lignes bleues étranges, que ces étranges lignes bleues ont disparu et regardez ça, je peux cliquer dessus et magie, je suis arrivé à un incroyable site Web. OK, donc revenons ici, éteignons le globe oculaire. autre chose que je veux vous montrer à faire avec le bouton, c'est de passer en revue ces autres boutons. Vous entrez donc dans une URL. Cela ira sur un site Web externe comme Hey, allez consulter cet excellent tutoriel Webflow que vous devriez consulter d'ici cette somme. Mais ici, mec, tu pourrais faire un lien vers ça. Et une autre est que vous pouvez créer un lien vers un lien sur cette page. Nous n'avons qu'une page. Donc, si vous continuez à créer un lien vers une page de ce site Web, Oh, je ne peux revenir à l'accueil que parce que nous n'avons qu'une seule page. Vous pouvez créer des liens vers une section. Nous allons donc le faire dans un moment. Sur notre page, nous allons ajouter une navigation pour parcourir les différentes sections. Cela ne fonctionne pas encore tout à fait, mais nous allons le faire. Lorsque vous cliquez sur ce bouton, vous pouvez accéder à l'adresse e-mail de quelqu'un. OK. Ou lorsque vous cliquez dessus sur un appareil mobile, commencez à sonner. Vous pouvez donc l'avoir comme un numéro Colas. Cela ne fonctionne que très bien. Non, cela fonctionne dans mon navigateur. Si je le mets dans un numéro de téléphone ici et que je clique dessus, il essaiera de lancer Google Voice ou quelque chose comme ça de toute façon. Mais sur un téléphone portable, il clique et précharge en quelque sorte le téléphone. Ce sont donc ces options. Pour le moment, nous allons simplement utiliser notre URL NEO simplement parce qu' il s'agit d'un espace réservé. Jusqu'à ce que plus tard, nous puissions sauter dans nos sections de notre côté. Ce sont donc les différents liens. Et l'autre chose que nous pouvons faire est de changer le survol, car au moment où vous souhaitez changer la couleur du survol. Regardons donc cela. Donc, une fois sélectionné, je vais vous emmener dans un lieu secret. Nous allons donc passer à mes styles. Donc, dès que nous regardons le bouton ici, je veux personnaliser le survol. Ainsi, lorsque vous placez votre souris dessus, cela fonctionne. Il est caché ici avec le bouton sélectionné. Webflow sait qu'il y a des choses spéciales avec les boutons que nous aimerions mettre ici pour le moment. Comment va le sol quelque part ici ? Cela dit que les boutons de hauteur ont des caractéristiques spéciales. Ils sont là. Il y a le survol, le survol cliqué, le survol visité. Vous pouvez voir qu' une classe spéciale a été ajoutée, vert signifie Figma, désolé, Figma. Width Flow sait déjà de quoi vous parlez. Un peu comme une version pré-écrite. Il existe déjà un cours appelé Hover. Vous n'avez pas eu à le nommer et vous vous dites : « Ce sont des choses spéciales que possèdent les boutons, nous les avons créés. Vous pouvez simplement les sélectionner dans la liste déroulante KU. Maintenant, vous pouvez dire que je veux que ce style de fond change pour autre chose. Choisissez une autre couleur, d'accord ? Parce que nous descendons et nous y allons. Donnons-lui un aperçu. D'accord, si vous cliquez sur Désactiver, l'aperçu affichera sans passer en mode aperçu complet. ce que font certains d'entre eux. Nous allons planer. Nous sommes moins des superstars de la CSA. Nous avons donc un vol stationnaire. Tout ce que je veux vous montrer d'autre k. Si je l'ai sélectionné, si je veux revenir au survol parce que je veux le styliser, je dois revenir ici parce que c'est par défaut. Une fois que j'ai cliqué, j'ai cliqué, cliqué à nouveau et vous pouvez voir que c'est passé au bouton ici, mais où est-ce que cela s'est passé ? Si tu veux changer de couleur à nouveau, passe au survol et aux récits. C'est une sorte de sauvegarde chargée et vous pouvez modifier celle-ci. Vous pouvez décider de faire l' une des autres. Les autres ne le font pas, ils n'ont pas fonctionné. Mais des choses comme appuyer dessus, c'est quand quelqu'un clique dessus, ce qui se passe, mais personne ne voit le clic. C'est mon opinion. Quoi qu'il en soit, rendons-le vif et rouge, jaune vif, jaune vif. Alors jetons un coup d'œil. Vous devez passer en mode Aperçu pour cocher la case enfoncée. Regarde ça. Lorsque vous cliquez dessus, vous allez voler après une autre page. Mais tu l'as vu ? Tu peux, c'est très rapide, mais tu peux le voir quand il est jaune. Vous pouvez donc appuyer sur pour avoir l' impression que cela se concentre sur quelque chose d'autre que Google a à voir avec la tabulation notre site Web et l'accessibilité et le mauvais. est hors de portée pour celui-ci. Jetons un coup d'œil. Sur quoi d'autre nous avons attiré leur attention. Si vous êtes déjà allé sur ce lien, les gens ne l'utilisent plus vraiment. Il changera de couleur si quelqu'un a cliqué dessus une fois, vous vous souvenez de ces liens bleus, ils deviennent violets. C'est parce que vous y êtes déjà allé, pas vraiment utilisé comme bouton à mon avis. Très bien, cool. Et secrètement, vous avez créé votre première classe de combo, dont nous parlerons dans un instant. Mais oui, c'est un bouton qui le met en forme. Oh, l'autre point, c'est que je viens de vérifier mes notes là-bas. Survolez. Passez la souris sur votre téléphone pour vous rendre au travail. Ça ne l'est pas. Vous ne pouvez pas survoler votre téléphone. Vous pouvez passer votre doigt sur l'écran de votre téléphone portable et il a changé de couleur. Donc, la seule chose de bureau. Donc oui, oh, l'autre chose que nous devons faire est de remplir et de laisser une marge pendant que nous sommes ici. J'ai donc sélectionné mes boutons, je peux voir ce style ici. Je vais passer à mon espacement et est-ce que je veux un rembourrage ou une marge ? Vous devez réfléchir avant que je ne dise que quelque chose est tordu comme un pédicule. Si vous avez choisi le rembourrage, vous vous êtes trompé. Regardez, cliquez sur Maintenir. Je peux donc y mettre du rembourrage et ça le déplace vers le bas. Mais évidemment, le paiement se fait à l'intérieur de la boîte. Et une marge. Cliquez, faites-le glisser vers le haut. Comme ça. Tu y vas. D'accord, c'était un pare-chocs. Nous avons appris que les boutons survolent. Nous vous avons montré les différentes manières de procéder. Je vous ai montré comment les fermer, Option ou Alt pour les ouvrir toutes. Cliquez sur l'un d'entre eux. Nous avons visité le Comic Sans Appreciation Club et nous avons trouvé les ingrédients secrets de ces boutons ici. n'y a pas que des boutons. Nous avons trouvé des choses ici. D'autres éléments de ce cours et du flux de travail peuvent avoir cette liste déroulante pour afficher les éléments liés à cet élément en particulier. Très bien, cool. Donc, une chose est que si vous suivez, je vais vous définir un projet de classe à soumettre et un petit peu. Et en gros, il s'agira de s'assurer que tu es à la hauteur de moi. Si vous êtes en train de suivre et de regarder, je ne sais pas, c'est vraiment bien de s'entraîner, mais nous voulons aussi faire le projet de classe. Vous aurez presque terminé et prêt à soumettre. Oui, fais les exercices pendant que nous avançons. C'est bon C'est une bonne façon d'apprendre et cela fera du projet de classe une petite chose à ajouter de toute façon, d'accord, à la vidéo suivante. 14. Créer notre propre nav sur mesure dans Webflow: Bonjour à tous. Nous allons créer cette navigation en haut de la page ici. Nous allons le construire ensemble afin comprendre certains des principes. Vous remarquerez que je n'ai pas fini par trop styliser ces boutons. Pourquoi ? Parce que nous allons en fait y remédier à la fin. Alors fais-le, suis-moi, construis-le avec moi, mais n' y mettez pas trop de style. Ne passez pas une demi-heure à obtenir le bon Kooning et à faire pivoter la taille de la police, car nous allons le plier. Nous devons savoir comment cette chose est créée sous une forme simple afin que lorsque nous ajouterons la solution la plus facile depuis Webflow, nous puissions l'ajuster en sachant que nous allons couvrir des éléments tels que float, éléments en ligne et en blocs. Alors allons-y. OK, pour faire notre menu, nous allons d'abord mettre une section, parce que nous avons une section héros, nous avons notre section ennuyeuse de petits sponsors. Ajoutons-en un autre pour notre section de navigation et faisons-le glisser. N'oubliez pas que je peux le faire glisser sur la page ou ici. OK. Ici, mettez-vous au bon endroit, probablement pas à l'intérieur du conteneur. Donc je l'ai raté. Vous pouvez régler cela par la suite. Alors, consultez ma section ici. En fait, je veux entrer dans le conteneur juste au-dessus du héros. Regardez-nous. D'accord, je vais lui donner un nom. D'accord, tant que je m'en souvienne, d'accord, vous allez appeler cette section. Celui-ci s' appellera mon système de navigation, entrez sur le clavier. Parce que nous allons recréer cela sur ma maquette ici. Vous pouvez peut-être choisir vos propres couleurs dans les styles d'urine, dans vos propres polices. Faisons donc cette couleur de fond, commençons par là. Alors n'oubliez pas que je me suis fait tuer en ligne. Peut-être que c'est Option ou Alt sur un PC, option sur Mac. Je vais dire qu' avec cette option sélectionnée, j'ai mon navigateur de sélection, l' arrière-plan sera une sorte de gris foncé. Excellente. Ajoutons une image pour le logo. Alors allons-y. Passons à l'image, d' accord, et faisons-la glisser à l'intérieur. Parfait. Maintenant, en ce qui concerne le logo ici, je vais cliquer sur Choisir une image. Et allons-y et téléchargeons-en un. Maintenant, j'en ai un que je vais utiliser et j'en ai un générique que vous pouvez utiliser. Donc, sous le site de l'événement du club, accédez aux icônes. Et je l'ai fait, je vais utiliser le clic sur l'icône. Ok, ça ressemble à ça. Vous pouvez utiliser Go get your own icon, essayer quelque chose comme icon finder.com et y rechercher les icônes gratuites. Vous pouvez trouver votre propre logo que vous pouvez utiliser pour le moment. Nous pourrions en dessiner un dans Illustrator. Nous déterminerons où x, t, ou utiliserons simplement l'une de ces deux icônes de club génériques. Une autre icône de club générique pour le moment, il suffit d'utiliser la petite icône de 64 pixels . Mais je vais utiliser ce kayak visuel parce que c'est celui que je suis en train de construire. Nous insérons le logo Kayak. J'ai dû changer de couleur. Quelque part le long de la ligne. Nos billets sont payables dès maintenant, en termes de taille. D'accord, c'est bizarre, mais parfois on ne peut pas le faire glisser et lister. C'est fermé. Cela semble être intermittent. Et ce que nous allons faire, c'est ajouter une classe à cette image. Je vais donc dire que c'est mon image. Je vais utiliser le I, l'image, le logo en majuscules. Et je vais dire que cela en a un peu, qu'est-ce que le rembourrage et la marge ne définiront pas l'espacement. Il fera la même chose. OK, donc le rembourrage et la marge auront la même apparence. Je suis en train de défaire. OK, donc je vais utiliser la marge. Très bien, à peu près. Je suis désolée pour ça. J'aimerais ajouter mes petits boutons ici. Passons donc à ajouter, ajoutons quelques boutons. Allons-y sur un bouton, mets-le dedans. Tu te demandes, comment l' a-t-on fait ici ? Ok, donc le moyen de le faire ici est ce qu' on appelle le flotteur. Le bouton sélectionné. Je vais dire que vous, sous Position, utilisez ce truc appelé flotteur. Je vais le faire flotter vers la droite. OK, comme écrire une ligne, mais pour les objets, ça va le faire flotter vers la droite. Que s'est-il passé ? J'ai ajouté un style à ce bouton et j'ai oublié d' ajouter une classe exprès. J'ai oublié. Que pouvons-nous faire ? Il a déjà créé celui-ci pour nous. Ça va. Je peux vivre avec ça. Je vais appeler Button une fois une société appelée Space Nav. Maintenant, quels étaient mes tics et celui-ci, je vais avoir des événements passés, des événements de sponsors. Donc celui-ci est mon plus gros. Évènements. Allons voir Vince. J'en veux un autre. Ce que nous pouvons faire, c'est simplement copier et coller. Je l'ai donc sélectionné. Commande C V sur un Mac, Control C V sur un PC. Vous pouvez en fait maintenir la touche Option ou la touche Alt enfoncée sur un PC et simplement les faire glisser vers l'extérieur. En fait, ça fait deux doublons, c'est un peu chic. Donc, à trois boutons, celui-ci, je ne m'en souviens pas, était un sponsor. Sponsors. Encore une fois, il s'agissait d'événements passés. Son nom est probablement trop proche. Quoi qu'il en soit, nous construisons notre système de navigation. Prévisualisons-le au fur et à mesure. Alors jette un coup d'œil. D'accord, ça ne va nulle part encore parce que je n' ai pas ces sections, mais je vais le faire. Oui, faisons l' espacement à ce sujet. C'est un globe oculaire. Je vais donc le dire en second lieu sur l'un d'eux. Et parce que c'est appliqué, c'est sur tout cela parce que j'ai copié et collé un bouton, bouton de navigation, un navigateur, un bouton, zone de navigation, toutes ces choses. Si j'avais un bouton maintenant, j'en aurais un nouveau dedans. Voyez-vous qu'il n'est pas appliqué de la même manière ? Et tu aimes, en fait, si je vais ici et que j'applique le bouton de navigation ? Donc, vous pouvez voir ici, si je cliquais ici, je peux taper button nav et ça marchera. Je dois être exactement pareil. Mais maintenant, oui, ça marche. Mais c'est plus facile, il suffit de cliquer dessus , de cliquer ici et vous verrez, hé, ces classes existantes, Dan, voulez-vous utiliser l'une d'entre elles ? Comme je le fais. Je souhaite utiliser le bouton de navigation. Et si vous en avez 1 000 , ce que vous pourriez faire à la fin, vous pouvez commencer à les taper, mais l'image que vous venez montrer est votre logo d'image immatériel. C'est la convention de dénomination que j'aime parce qu' elle facilite les choses. Mais j'ai un bouton. Je n'en ai que deux, mais au moins ça se réduit à ces deux-là. Joli. OK, donc je vais me débarrasser de lui. Je vais coiffer ces gars n'en ont besoin que d'un seul. Je les ai donc sélectionnés, peu importe lequel. OK, je vais entrer dans mon espace et je veux le pousser vers le bas depuis le retour sur investissement, le pousser vers le bas depuis le haut et loin l'un de l'autre. Ok, alors comment puis-je faire ça ? S'agit-il d'une marge ou d'un rembourrage ? Faites simplement glisser les deux. Alors ? Il va y avoir un peu de ça. Je veux une marge sur les côtés. Maintenant, si vous voulez plus d'espace à l'intérieur du bouton, disons que vous voyez que mon bouton ici contient un espace assez négatif. Celui-ci est très proche, donc je clique dessus, peu importe sur lequel vous cliquez. Maintenant, est-ce que ce sera la Patagonie ? Faut-il qu'on rembourre Dan, allez. Tu peux voir ça ? Le gris, il y en a 15. Tu ne l'as pas ajouté. Elle est grisée parce que c'est la valeur par défaut. C'est ce que Webflow, Web et Jim auront ajouté. Celles qui sont bleues sont celles que nous avons faites. Je vais le faire glisser vers le haut depuis le côté et 32 de ce côté également. Maintenant, une petite astuce pour styliser ces choses vont être annulées, annulées à nouveau. Il revient aux valeurs par défaut. Si vous maintenez la touche Option enfoncée sur un Mac et que vous faites glisser un côté, vous pouvez voir qu'ils apparaissent tous les deux parce que cela fonctionne à gauche et à droite en même temps. C'est donc une option sur un Mac, alternative sur un PC. Même chose pour le haut et le bas. Toute personne qui a un haut et un bas. Si c'est le cas, tu peux le faire. C'est à toi de décider. Vous maintenez enfoncée, vous maintenez la touche commande, la touche Shift, la touche Alt Shift enfoncée. Je m'en souviendrai toujours. Vous maintenez la touche Shift enfoncée. Il les fait toutes en même temps. Tous en même temps. OK, donc voici un peu l' option Alt, le fait maintenir la touche Maj enfoncée, un peu de claquement de clavier. Mais quoi qu'il en soit, nous y sommes. Maintenant. Je devrais les parcourir et les coiffer complètement. En fait, il y a encore une chose avant de passer à autre chose, parce que c'est ce que nous aurons fait, tu te souviens ? Je voudrais donc ajouter du texte. Je voudrais donc ajouter du texte ici. Je veux vous montrer comment vous le construisez. Tu le sais déjà. J'ai parlé au début, mais je veux vous montrer comment il a été construit vous-même, de sorte que lorsque vous recevez le, on l'appelle l'élément qui est un composant prêt à être intégré et comment pour l'ajuster. Ajoutons donc un peu de texte et ça va être intéressant. Nous avons ajouté des titres et des paragraphes qui avaient du sens auparavant. Je veux un logo, il n'y a pas d'option de ticks de logo similaire. Si vous n'êtes pas sûr, si c'est le cas, si ce n'est rien de tout cela, There's this one takes block est un bloc de texte générique. Cela ne veut vraiment rien dire. Ce n'est pas le cas, le navigateur ne pense pas qu'il clique sur spécial ou sur tout. Salut, c'est l'article et le paragraphe très spéciaux. Eh bien, l'essentiel. D'accord, si ce ne sont que des tiques de soutien et que vous ne savez pas comment l'appeler. Ce n'est pas tout cela de le faire glisser et simplement de faire comme un bloc de texte sans style vraiment basique. Et saisissons votre look dans votre brief. Et comment s'appelait le mien ? J'ai mis les miens en casquettes. Chère. King Club. Il met le tien. Que faisons-nous ici ? Réfléchissez-y un peu, faites-le comme si vous alliez faire ? quoi commenceriez-vous à cliquer ? Quels termes me viennent à l'esprit. Nous l'avons déjà examiné et cela avait trait à la mise en page. Je vais donc cliquer dessus et il est le nom, il est caché dans le bloc de texte du nom. Bloquer signifie qu'il va jusqu'au bout, se libère un espace. Personne d'autre ne peut être sur la même ligne qu'eux. Mais on peut dire : « Hé mon pote, sous la mise en page, je ne veux pas que tu sois bloqué, je veux que tu sois bloquant en ligne. Faites la queue. OK ? Et il lui a donné une classe parce que je lui ai ajouté un style qui est l' affichage de la mise en page, le bloc en ligne. Salut Kate, je ne veux pas ça. Ce que je veux, c'est que je vais appeler ça un texto. Je vais l'appeler logo. Et je dois dire que vous utilisez le bon endroit, c'est fait. Je vais juste les styliser maintenant. Je vais faire de l'espacement. Je vais ajouter une marge le côté, c'était dans le mauvais sens. OK, je vais passer à ma typographie. OK ? Et je vais voir qu' est-ce que j'utilise ? ne me souviens pas de Roboto, je pense que non, nous utilisons Open Sans ou est-ce que c'est le cas ? Ça y est. OK. Je vais utiliser le gras. Je vais utiliser la couleur blanche. vais faire le rouge un peu, mais c'est un peu la bonne taille aussi, après ma maquette, mais nous pourrions changer cela. Cool. Donc parfois, la valeur par défaut est correcte, d' accord, comme cette image ici, juste un peu, eh bien, en fait, cette zone de texte est réglée bloc d'affichage et nous avions besoin d' appuyer sur le prochain gars et puis nous voulions ça. Mais parfois, tu te dis : « Non, nous ne voulons pas ça. Nous avions l'image. N'oubliez pas que c'était dans la file, mais ce n'était pas là où nous le voulions. Donc vous poussez vers le bas, dégagez un espace, vous poussez ce type vers le bas. Très bien, tout ce travail. Et tu m'as dit au début que nous allions le supprimer. Pourquoi ? Eh bien, c'est parce que vous n'êtes pas obligé, mais nous avons travaillé sur un ordinateur de bureau et nous avons simplement fait allusion à ces autres écrans différents. Mais si je passe aux mouvements mobiles et que je ne rentre pas tout à fait et que vous voulez le petit sandwich de navigation, les trois petites lignes sur lesquelles vous pouvez cliquer et déposer. Tout le monde aime ça et fait avancer les choses. Il y a un peu de JavaScript. C'est, ce sont des points d'arrêt. Ce n'est pas difficile, mais c'est beaucoup plus facile de laisser Webflow le faire en moi, même en tant qu'utilisateur avancé, j'utiliserais toujours le logiciel prédéfini dans Webflow, mais c'est super pratique de savoir comment des choses comme float et inline-block fonctionnent d'abord lorsque vous commencez à modifier parce que vous le videz et vous vous dites : « Je veux tout changer ». Et tout s'écroule et tu ne sais pas pourquoi. Nous savons maintenant comment fonctionne une partie de la structure. Nous pouvons utiliser avec un peu d'autorité, nous pouvons utiliser ce composant de navigation. Alors allons-y en affaires et faisons-le. Maintenant, on se voit là-bas. Je te verrai dans la prochaine vidéo. 15. Comment créer un menu de burger convivial sur les mobiles barre de nav dans Webflow: Bonjour tout le monde. Nous allons reconstruire cette navigation en haut de la page. Nous allons utiliser le composant intégré du flux de travail pour vous faciliter la tâche. Nous allons le styliser comme nous le voulons. Et ce sera bien , quand nous passerons au mobile, qu'il passera à ce menu de hamburgers avec une liste déroulante sans que nous fassions quoi que ce soit. Très bien, allons-y et créons-le dans Webflow. Est-ce qu'il ignore à quel point ça a l'air mauvais ? Totalement, nous y reviendrons. Nous le ferons. OK, que faisons-nous ? Dans cette ancienne version, nous pouvions sélectionner notre navigation de section. On pourrait dire qu'en fait, cela me donne une excuse pour vous montrer cela. Nous avons examiné l'affichage, le bloc et l'intégration. Regarde celui-ci, ne dit rien, OK, et clique dessus et ne dis rien, et il s'en va. C'est toujours là dans le code. OK, c'est juste que le navigateur ne peut plus le voir non plus. Donc ça ne sert à rien d' avoir le droit de le rallumer. Ce que vous voulez vraiment faire, c'est cliquer dessus ou cela ne fonctionne pas, vous devez revenir à la position d'affichage que vous voulez, d' accord, qui est maintenant un bloc de cases. Donc ça pousse son pote en dessous. Très bien, donc je vais juste le supprimer, sélectionner Section nav et partir. J'ai besoin d'un lien vers cette page et ajouter ma barre de navigation ou est-ce ma barre de navigation ? Et ce sera plutôt bien si je modifie au-dessus de mon héros de section. Je dois entrer dans ma section ici. OK, ne dépasse jamais la section ici. Ça marchera très bien. Il vaut mieux que cela se trouve dans une section, pas 100 % essentielle, mais le navigateur et les moteurs de recherche veulent voir vos différentes sections. Et cela signifie que nous pouvons naviguer beaucoup plus facilement. C'est beaucoup plus facile. Parce que pas un mot. Mais vous avez vu ces sites Web où il y a une erreur qui indique de revenir en haut de la page. Vous pouvez cliquer sur le bouton et enregistrer. Allez dans quelle section nous pouvons dire la section de navigation. Allez. Mettons-le donc à l'intérieur d'une section. Nous allons donc ajouter une section, votre section. Je vais le mettre juste au-dessus de ma barre de navigation et ensuite je vais mettre mon système de navigation. Mais à côté. y est, rien n' a changé, sauf que j' ai cette section. Et la section que je vais appeler section nav. Tu es du genre, hé, mais on l'a déjà fait. Et oui, nous utilisons simplement la navigation par section. On pourrait, si c'est la première fois que tu le fais, tu vas devoir le faire. Mais comme nous l'avons déjà fait, vous y êtes. Mais il y a déjà quelque chose qu'on appelle une section à parcourir. Vous remarquerez que la section a désormais une couleur de fond. Ça ne fait rien. Pourquoi ne fait-il rien ? C'est parce que la barre de navigation a sa propre couleur et qu' elle la remplace parce qu'elle est plus spécifique ou parce qu'elle est au-dessus de celle-ci. OK. Il est en fait gris en arrière-plan, mais nous ne pouvons pas le voir à cause des barres de navigation sur le dessus. Nous pouvons donc sélectionner notre barre de navigation et soit aller à la barre de navigation. Vous êtes totalement transparent, celui-ci ici. Je peux donc accéder à la navigation de mes sections ou nous nous retrouvons dans les mauvaises herbes, n'est-ce pas ? Nous sommes en train d'apprendre. Tout ce que nous pouvons, c' est personnaliser la barre de navigation. n'y a pas vraiment de différence ici parce que j'ai déjà commencé. Je vais rendre ma barre de navigation transparente et ma section va faire passer ma couleur, qui est mon gris foncé. Très bien, voyons ce qu'il y a de spécial à ce sujet. spécial, c'est qu'il y a deux grandes choses spéciales. Premièrement, c'est déjà fait. Je peux mettre mon logo ici. J'ai déjà quelques boutons à utiliser. Net me fait gagner du temps en ajoutant des boutons qui le font flotter à gauche, flottant à droite. Et ça aussi quand je passe à la version mobile, je regarde, y a déjà un peu de il y a déjà un peu de JavaScript qui l'éteint et le change. Jetons un coup d'œil à l' aperçu qui indique que je peux cliquer dessus. Ou ce genre de choses est fait pour nous. Css change cela pour cette petite icône. Et puis du JavaScript crée cette jolie liste déroulante, mais tout est fait. OK, je vais retourner au bureau et je vais passer à mon aperçu. Faisons une petite déconstruction. Nous avons donc ce premier élément qui s'appelle simplement marque. Tout ce que c'est, c'est un conteneur qu' ils ont appelé Brand Webflow et qu'ils l'ont rendu connectable. Donc, si je mets une image ici, ce sera l'un de ces liens qui renverra à la page d'accueil. Merci beaucoup pour votre flux de travail. Ce qu'ils ont également fait, c'est qu'ils ont un tas de boutons. OK. Donc le bouton, le bouton, le bouton. Et nous savons comment ils les ont mis sur le côté droit, vous êtes comme, je sais, les mains en l'air, vous savez, le dos. C'était quoi ? Flotter, non ? Génial. Donc, cela va dire que vous en faites flotter deux, ou est-ce que c'est en position ? Ça y est. Flotter jusqu' à ce qu'il ne fasse aucun flottement. Ne flottez pas. Pourquoi ne flotte-t-il pas, Dan ? Tu nous as promis que le flotteur fonctionnerait. Ce qu'ils ont fait ici, c'est que ce contenant emballe le tout. Donc ces boutons doux. OK. C'est ce que j'ai fait aussi. J'ai demandé à flotter sur ces boutons. Ce qu'ils ont fait, c'est juste pour être plus intelligents, c' est qu'au lieu de les faire tous les trois temps, dans l'emballage, nous avons mis cet emballage à l'extérieur, accord, et dans ce cas, c' est qu'au lieu de les faire tous les trois en même temps, dans l'emballage, nous avons mis cet emballage à l'extérieur, d' accord, et dans ce cas, Le charbon est-il fabriqué à l'aide de ce qu'on appelle un dibloc, qui ressemble à un emballage générique, qui fera cette maison en morceaux. Mais pour y jeter un œil, revenons ici. Ils ont ce truc générique, ils l'ont appelé et ils l'ont acheté et je vous ai vu flotter dans le bon look et tout ce qu'il contient fonctionne. Nous allons basculer vers la droite, je suppose, parce que nous n'avons pas le choix. La barre de navigation vole vers la droite, traînant ces gars à l'intérieur pendant le trajet. Ils sont donc préfabriqués. Mais nous pouvons comprendre comment cela se fait un peu. Nous pouvons en créer de nouveaux en les copiant et en les collant. Super, ok, je n'en ai pas besoin. La dernière chose que je veux te montrer, c'est cette marque plus épaisse. Il s'agit d'un conteneur auquel est appliqué un lien. Merci beaucoup. Flux de travail. Et que fait-il ? J'ai dit que le rouage, pourquoi ne fonctionne-t-il pas ? Cela ne fonctionne pas parce qu' il y a tellement de choses qui devraient en découler qui seraient énormes. Donc, ce qu'ils font, c'est que mon hypothèse est peut-être fausse. Mais si vous voyez le rouage ici, je l'ai sélectionné. Il y a tellement de choses qu'ils ont fait pour ce menu qu'ils. Ce n'est pas vraiment une liste déroulante facile. Ils n'ont donc rien fait. Vous devez cliquer sur le rouage ici et vous pouvez voir les paramètres de mes liens. Le moment est un lien vers une URL. Ce que je pourrais faire maintenant parce que c'est moi qui ai mis mon logo dedans. Je vais vous dire d'aller sur une page. Quelle page ? Je n' ai qu'une page d'accueil. Et c'est bien parce que lorsque je duplique ensemble de ce site Web pour faire différentes pages, cela signifie qu'il va toujours, chaque fois que vous cuisinez le logo, il reviendra sur la page d'accueil, ce qui est assez typique des sites Web. Bien, je veux quand même un logo dedans. Ce n'est pas particulièrement difficile. Nous avons déjà un logo de tout à l'heure. OK. Quels que soient vos gagnants. Donc, mon panneau des actifs clique sur Maintenir, faites-le glisser à l'intérieur, vérifiez-le. À l'intérieur, je vais ajuster ma taille, ce qui ne fonctionne pas lorsqu'il sera ouvert une autre fois. OK. Et voilà mon petit logo. Je vais juste commencer à coiffer des trucs. Alors c'est ça. Si tu veux continuer, je vais essentiellement faire ce que nous avons déjà fait, d'accord, dans la dernière vidéo. Je vais donc le parcourir et le placer sur le texte de mon logo, sur mes boutons. C'est pourquoi cette vidéo est si longue qu' il s' agit d'un petit bout de choses. Si tu n'as rien d'autre à faire ou si tu n' arrives pas à atteindre le bouton Skip, tu pourras me regarder bien. Faisons-le ensemble. Donc, à mon image, j'ai tous mes styles. Parfois, tu te demandes : « Où sont passés tous ces trucs ? Ça y est. Je veux le recouvrir d'un peu de rembourrage. Mais j'espère, souvenez-vous que j'ai créé un logo de la dernière fois, ce qui vous a fait gagner du temps. Pareil pour ces boutons. Mais est-ce que ce sont des boutons ? Ils ne le sont pas. Puis-je leur appliquer ce style ? Bouton Allons-y. Navire. Nous le pouvons totalement. Cela n'a pas fait passer la couleur, mais nous ne l'avons pas ajoutée la dernière fois. Génial. OK, donc nous pouvons toujours réutiliser ce bouton de navigation même si nous avons supprimé la dernière navigation. Et c'est un point important, car si vous créez des styles et qu'ils les ont utilisés , ils se contenteront de traîner. Nous devrons les nettoyer vers la fin du projet, mais ils ne disparaîtront pas. The Persistent, qu'est-ce que je veux faire ? Je veux que celui-ci soit vert et en fait je veux que l'espacement soit plus grand. Plus grand. Des deux côtés, Haïti des deux côtés. la même heure. Oui, c'est exact. Tenez bon. La touche Option sur un Mac, la touche Alt sur un PC. Quelque chose comme ça. Je veux que ma couleur de fond ne soit pas de la typographie. Le fond va être ce genre de couleur verte. Tu choisis le tien. Je veux que le bouton soit coché. C'est bon. Cela n'a pas fonctionné. Ce que j'ai sélectionné, j'ai fait sélectionner le copain. Ce n'est pas ce que je veux sur ce bouton, ce bouton de navigation ici. Je veux que la couleur de la typographie soit blanche. On y va. Et est-ce que c'est un peu ce que je veux voir ? Je voulais être casquettes. Nous savons que nous pouvons le faire. Alors attachez le travail, les pieds et plus d'options de type, de casquettes. Je veux que ce soit aussi un hibou, pas une bonne ambiance ou un impact. Impact : les Comic Sans de Webflow ne l'utilisent-ils pas ? Tu peux t'en servir. Ça, c'est très bien. Nous n'utilisons aucune zone, nous utilisons un Open Sans. Laisse-moi partir On y va. OK, donc maintenant je veux l'appliquer à chacun d'entre eux. Vous avez donc un style appelé navigation par boutons. Tu as un style qui ne s'appelle rien. C'est donc le bouton GO. Mais le bouton Nav U2. On y va. Je veux changer les couleurs de celles-ci. Cela va nécessiter une classe de combo, ce que nous ferons dans un petit moment, mais laissons-les pour le moment. Je ne vais pas faire le vol stationnaire. Je vais ajouter les hérétiques ici. Nous l'avons donc déjà fait. Toi. Quand je dis hérétiques, je veux dire le texte du logo. Je vais donc utiliser un bloc de texte, aucun de ces autres parce que c'est peu du texte générique. Et j'espère que c'est passé où ? C'est ce que nous ne voulons pas faire, je le veux comme ça. La marque qui l' a intégré. Ensuite, à l'intérieur de cette marque, il y a une image, puis est-ce que je l'ai ensuite ? Ok, qu'est-ce qui est un peu flippant ou dois-je le mettre après l'image ? Je n'en suis pas sûr. Je vais juste voir à quoi ça ressemble. C'est un peu dans la marque. C'est donc la marque in the box. Tu vois, mais ça fait quelque chose d'un peu bizarre. Comment résoudre ce problème ? Nous allons examiner notre position. Nous allons donc dire que le logo laisse pas jouer, ou que le bloc de texte ne le fait pas l'un ou l'autre. Il a essayé de prendre place parce que je suppose et je suis presque sûr que c'est en dessous ou que c'est sa taille ? Non, nous ne l'afficherons pas alors que je vais devoir faire défiler la page vers le haut. Affichage. Je ne veux pas être bloquée en ligne, je veux que ce soit le cas, je ne veux pas être bloquée, bloquée en ligne. Ça y est. Cool. Nous pouvons maintenant personnaliser le logo pour qu'il y ait plus de rembourrage sur le côté ou ce bout de texte qui indique club de kayak. Et je pense que nous avons déjà fait du style. Il a créé un stock avec textblock. Et celui-ci est intéressant parce qu'il l'a créé pour moi parce que je ne l'étais pas, parce que j'ai changé d'écran. Alors j'ai dit : D'accord, tu n'as pas fait de cours. Je suis en train d'en créer une pour vous maintenant dans la position où la dernière vidéo en a réellement fait une. Je veux donc y appliquer cela, mais je veux m'en débarrasser. Qu'est-ce que je fais ? OK ? Je veux supprimer cette classe, d'accord ? Parce que je n'en veux pas deux. Je veux que celui que j'ai déjà créé s'appelle comment s'appelait-il ? C'est ce qu'on appelle un logo textuel Nous l'avons déjà fait avec le blocage en ligne, n'est-ce pas ? Nous avons donc supprimé le vin automatique et avons en quelque sorte reculé d'une étape. J'ai trouvé celui que nous voulions et il a fait tout ce dont nous avions besoin. Happy Days, cool. Très bien, magnifique. Ish. Ça se rapproche. Je veux prendre celui-ci et jouer avec la marge. Jeep. En haut, soyez le haut et le bas de celui-ci. Très bien, donc c'est suffisant pour le moment et ça va arriver. Nous avons ajouté la navigation. Nous apprenions que des termes venaient de plus en plus de concepteurs de sites Web, vous savez, des termes comme bloc d'affichage, bloc en ligne, flottant. Fantaisie. Très bien, chic. Passons à la vidéo suivante. 16. Vidéo de production 1 - Soutien de la construction et sections d'événements suivantes: Bonjour tout le monde. Bienvenue sur la vidéo de protection. Qu'est-ce qu'une vidéo de production ? Eh bien, c'est à un moment du cours que je dois remplir certains des détails ici pour créer un site Web, mais je n'utilise rien de nouveau. J'utilise des techniques existantes que nous connaissons tous et je les mets simplement en pratique pour faire des choses répétables Je vais commencer quelques balises, mettre des images dans des balises de style, insérer des images. Et il y a juste beaucoup de répétitions dans celui-ci. Pas beaucoup de répétitions, mais plutôt de mise en pratique de nos compétences que nous connaissons. Maintenant, je pourrais le faire sans enregistrer et simplement vous en faire une surprise. Et certaines personnes seraient satisfaites de cela. Et certaines personnes se sont dites : « Je veux savoir comment il a fait , même si c'est ce que nous avons déjà fait. Alors regardez cette vidéo si vous le souhaitez. C'est ce que proposent ces vidéos de production ou ignorez-les. Si vous avez essayé de vous assurer qu'il n'y a pas de nouvelles techniques dans ce cas, vous ne manquerez pas une occasion si vous l'ignorez, accord, donc je ne serais pas fâchée si vous l'ignorez. Mais mon conseil serait de regarder, voir comment je crée ces problèmes que je rencontre et comment je les règle. C'est pourquoi celui-ci est un peu long car nous fabriquons quelques boîtes différentes. On y va. OK. Et copiez ces deux choses. Donc oui, vidéo de production. Suivez-moi OK, alors commençons. Ce que je vais faire, c'est avoir cette démo, ce truc, je travaille sur un exemple. Donc, ce que je vais faire c'est que tu peux évidemment créer ton propre style. Et ce que je vais faire, c'est une copie de mon dessin. Nous verrons comment le sortir exactement de certains autres programmes de conception qui ne vont pas avec le moment, en faisant juste quelques copies. Et je vais déplacer le mien pour voir un peu des deux. La seule chose que vous pourriez être sur un écran plus petit et vous pourriez vous je ne peux pas l'utiliser complètement correctement, c'est pourquoi il revient automatiquement. Si tu es du genre, oui, tu mets ça et ça couvre juste trop de choses. Oui, désolée. Vous avez besoin d'un écran plus grand. Vous pouvez contourner ce problème en montant ici et en disant que cela ne réduit pas la taille de votre site Web, mais qu'il réduit votre vision de celui-ci à 70 % pour que vous puissiez en voir plus, d' accord, et ensuite vous pouvez utiliser ceci truc pour qu'il reste dehors. Ou est-ce celui-ci ? Oui. Non Pourquoi es-tu restée dehors ? Élargir votre navigateur ? Il ne restera pas dedans. est parti Je ne savais pas que si vous y alliez, nous avons tous appris quelque chose. navigateur doit avoir une certaine largeur pour que ce truc puisse être épinglé sur le côté parce qu' il n'y a pas assez de place, d'accord ? Mais vous pouvez également le baisser si vous avez besoin de l'intégrer. D'accord, vous êtes peut-être en train de concevoir sur un très petit écran et vous avez juste besoin de le réduire. Je vais réduire la mienne. Cela ne change pas l'aperçu, ce qui signifie que lorsque j' arrive à prévisualiser, il prend la bonne taille, sort de l'aperçu. Heureusement, il y retourne. Désolé, c'est du style Dwell. Alors, la prochaine chose que nous voulons faire est de travailler sur ces sponsors. La première chose à faire est donc changer la couleur de notre arrière-plan car c'est juste un peu gris foncé ici. Donc, ce que nous faisons, c'est démarrer notre corps, qui est tout. Et on dit que le corps a une classe, mon pote. OK, je vais dire que ce corps a une classe appelée body et qu'il aura une couleur de fond de, je vais travailler dur pour ralentir une couleur de fond qui n'est pas blanche. Je vais l'utiliser, je suis juste en train de le regarder. C'est un peu gris bleuté. On y va. Couleur gris bleu. On y va. Pour que mes sponsors puissent faire un certain nombre de choses. Il peut avoir une couleur de fond blanche. Et je vais ajouter de l'espacement. Je vais ajouter une marge. On y va. Je vais y ajouter du texte soutenu par, d'accord, donc je vais prendre mon avantage, je vais ajouter, ça va être un succès. Je vais les utiliser comme de petits appareils de chauffage tout au long. Maintenant, si l'on regarde ma hiérarchie des rubriques, celle-ci est la plus importante. C'est mon, ce qu'on appelle un H1. H1, le plus important, en touchant mon H2. Je devrais probablement le faire, parce que c'est la prochaine chose que je vais faire. Je dis qu'Alice sera mon H2, mais ce n'est pas la deuxième information la plus importante sur ma page. L'algorithme de Google l' examinera et se dira : « Hé, quel est le plus important ? Si votre chose la plus importante est cela, que vous êtes malade et le plus important est prochain événement qui n'est pas particulièrement utile pour les moteurs de recherche. La deuxième information la plus importante en tant que titre est en fait cet événement fluvial. OK, donc je vais sauter H2 parce que je vais le faire dans un petit moment. Et je vais dire que je veux frapper, n'a aucun sens en tête. Je suis en train de faire un tube ici. Ça va être h trois, même si je suis un peu nul comme H2, mais je veux vraiment garder celui-ci parce que c'est le cas, ce truc ici est plus important. Je vais donc utiliser H3. Il a un style par défaut. Je vais vous dire, mon ami, que je vais appeler ça trois. Je vais faire certaines choses. Je vais choisir un peu de typographie. La typographie va être amusante. X0, taille de police , soit environ 26 poissons. OK. Sa couleur sera ce type de couleur 3D. C'est une sorte de plat rouge rosé. Comme les réfrigérateurs Nuclear Red, pas rose. On y va. Et nous avons besoin d'un peu de rembourrage. C'est changé, le texte double-clique dessus. Et celui-ci est froid, froid, soutenu, soutenu par je veux un peu de rembourrage tout autour. Donc, ce que nous faisons aussi, c'est que nous pouvons le faire jusqu'à la frappe, mais quelle est la meilleure façon de le faire ? C'est exact. Faites-le à la section dans laquelle il se trouve. Parce qu'il y a beaucoup de choses dans cette section qui doivent respecter les règles d'espacement. Donc je vais mettre ce que fait celui-ci, accord, je veux le même espacement. Passons donc à cela. Héros de section. Je suis 73 de ce côté, et 53 du haut. Voyons ce que nous voulons copier dans ma section. Je voulais faire des marges, en fait du rembourrage. Et pour ce qui est de la marge, je voulais que la marge 30 soit parfaite pour moi. Faisons un peu de rembourrage. Faisons quelque chose comme ça. Je suis juste en train de le regarder à partir de la maquette que j'ai. Et le fond sera le même. Souvenez-vous, marge, repoussez-la. cap pousse l'intérieur. J'ai probablement besoin d'un peu plus de rembourrage inférieur. Maintenant, comment pouvez-vous faire le haut et le bas en même temps ? D'accord, vous vous souvenez, maintenez la touche Option sur un Mac, touche Alt sur un PC et elles correspondront. Et vous remarquerez peut-être qu'en fait, ce n' est pas parfaitement au centre, parce que ce H trois possède sa propre petite marge. Il voit, il vient avec juste sa propre marge sans demander certains des éléments que vous insérez à partir d'ici. Ils ont leurs propres paramètres, comme un bouton, un bouton qui fait certaines choses est bleu. Je n'ai pas dit qu'il soit bleu, mais il est livré avec des éléments par défaut que nous pouvons remplacer. Donc, nous pouvons dire que cela frappe trois, nous pouvons dire que je veux que ce soit zéro, pas 20. Je veux que le bas soit zéro. Maintenant, c'est plutôt parfaitement au milieu. Maintenant, ça m'a détruit les yeux. C'est comme cliquer sur cette section. Nous allons dire qu'en maintenant ma touche Option ou Alt enfoncée, faites glisser l'une d'entre elles. Assez bien. Maintenant, j'ai besoin de quelques images en dessous. Reprenons donc nos images maintenant. Nous en avons quelques-uns à apporter. Faisons donc les quelques méthodes pour apporter n'importe quelle méthode de poussin. J'ai cliqué sur mes ressources dans mes fichiers d'exercices. J'en ai dans vos dossiers d'exercices concernant les événements du club. Ils ne sont pas vraiment là. Donnons-leur un nom. À l'intérieur d'ici. Il y a un sponsor 12.3. Donc, ce qu'il peut faire, c' est simplement les intégrer tous les quatre. Vous pouvez tous utiliser ces sponsors. OK ? Ensuite, ce que nous avons fait dans le passé, c'est que nous avons dit d'ajouter une image, faire glisser, puis de la sélectionner à partir d'ici. Et cela fonctionne totalement. Mais je vais vous montrer qu'il est en fait plus facile d'aller directement le panneau Actifs et de dire qu'il s'agit simplement de celui-ci au mauvais endroit. C'est bon. Laisse-moi partir. Le suivant That's UA est le suivant. Un petit peu gros. Ce n'est pas grave quand vous les faites glisser et que vous vous demandez pourquoi, pourquoi est-ce que ça va au-dessus ? Ed est bizarre. C'est simplement la façon dont fonctionne le flux de code. Parfois, il suffit de le jeter et de le déplacer par la suite ou de le maintenir sur cette ligne bleue parce qu'il saute juste autour de l'endroit. Théories. Ensuite, ajoutons Who's Next. Celle-là. Ce ne sont que différents logos créés à partir de divers projets. Et vous pouvez voir qu'il est en fait assez facile de le faire ici aussi. Faisons-le donc sur celui-ci plutôt que sur le document. C'est le dernier qui concerne les bases CSS. C'est le gag de ce t-shirt que je porte c'est que nous colorions. C'est ce que j'ai l' impression de faire. Bref. Je prends mon design et j'utilise CSS pour le colorier avec des crayons. C'est comme un gros coloriage pour adultes dans la version, mais vous faites de l'encodage ou du moins du flux de travail. Faire face. J'ai donc mes images, réduisons-les. Je vais donc simplement cliquer sur celui-ci. Vous êtes un peu plus petit pour les avoir tous de la bonne taille. On y va. Cela semble à peu près juste. Par défaut, le fait de toucher trois est bloqué, donc il les pousse tous vers le bas. Et par défaut, les images des membres sont intégrées, elles resteront donc côte à côte. Ce que j'aimerais faire, c'est les espacer un peu. Je vais donc ajouter une classe à cette image. Il n'y a rien Ok, donc je vais t' appeler image. Je vais vous appeler sponsor de l'image. Et il y aura juste une liste de toutes. Je vais l'ajouter à celui-ci. Où est-il typé ? Est-ce que vous pouvez le voir sur n'importe quel cours existant ? Ça ne me laisse que quelques jours si j'y vais. Je le suis. OK. Salut, sponsor d'Angular. Tu y vas. Sponsor. Vous sponsorisez. On y va. Peu importe celui que j'ai sélectionné. Je peux dire que je veux qu' ils aient tous une petite marge de manœuvre des deux côtés. Il s'agit de maintenir ma touche Alt ou Option enfoncée pour l'obtenir afin qu'il ne passe pas à la ligne suivante. Oui, ça a l'air bien. Ensuite, j'ai besoin d' une autre section. Donc je vais dire nouvelle section, section, section. Vas-y, ça va te passer beaucoup en dessous. Il doit entrer dans mon pot, entrer dans celui des sponsors, mais il doit entrer dans mon contenant, ce qui est difficile à faire, n'est-ce pas ? Par ici. C'est à l'extérieur. Là-haut. C'est maintenant parti de mes sponsors. Tu peux voir ? C'est toujours dans mes sponsors, mais si je le fais glisser vers la gauche, tu vois que c'est un peu, l'indentation change et tu peux voir par-dessus sur la droite, tellement faux, rouge ici, ça va entrer dans mon récipient. Je vais un peu plus loin. Ça va pénétrer dans le corps, pas ce que je veux. Quelque part là-dedans. On y va. Dans mon contenant. Donnons-lui un nom. Appelons-la section, et celle-ci s' appelle l'événement suivant. Prochain événement, des informations sur mon clavier. Je vais rendre le fond vert maintenant. Tout d'abord, rendons le fond vert. Je veux te montrer quelque chose. L'arrière-plan va être, il va être de couleur verte. Maintenant, ce que tu peux faire, c'est parce que tu peux voir, je peux voir les deux. Je peux, ce n'est pas pour être plus tard dans le cours, mais bon. Utilisez la pipette. Regarde ça. Je peux choisir n'importe quelle couleur d'ici, ou je peux aller ici, regarder, acier de cette couleur. On y va. J'ai donc cette section. Prévisualisons-le. C'est ce qui arrive à la sélection. Aperçu. Il a complètement disparu. Il disparaît car il n'a ni hauteur ni largeur. Ce que fait Webflow, parce que nous avons cette section vide, qu' c'est qu'il n'y a pas de hauteur parce que nous n'avons pas ajouté de hauteur. La hauteur est tout simplement magique. Et pourtant, comme Webflow sait que si vous ajoutiez une section et que vous ne pouviez pas la voir avant d'avoir ajouté de la hauteur, vous paniqueriez et vous vous enfuieriez. Donc, ce qu'il fait, c'est qu'il ajoute cela comme une augmentation temporaire ici pour que vous puissiez y ajouter des choses. Et ce n'est pas simplement une boîte vide complète, aucun signe visible. Au cas où si vous codiez ceci, vous ajouteriez cette section et il n'y aurait rien à voir. OK, donc c'est pour ça qu' il n'y a rien à voir. Ce n'est que lorsque vous lui avez donné une hauteur en sélectionnant cette section et en lui disant : jetons un coup d'œil à la taille. On pourrait dire que je veux une hauteur de 30 ou 300. Maintenant, il a une hauteur parce que nous lui avons dit que cette section avait une hauteur. Si vous n'avez rien qui soit soulevé automatiquement , faites-le nettoyer. Vous pouvez faire un clic droit dessus. Pouvez-vous cliquer avec le bouton droit si vous cliquez dessus, mais vous ne pouvez pas. Si vous le supprimez simplement à partir de là et que vous appuyez sur Entrée, il revient à la valeur par défaut, n'est-ce pas ? C'est le cas. OK. Je ne sais pas pourquoi ? Parce que c'est ainsi que je le fais. Maintenez la touche Option enfoncée sur un Mac, touche Alt sur un PC et cliquez dessus, cliquez sur le mot, et il le réinitialise simplement aux valeurs par défaut. Très bien, nous revenons maintenant à une boîte qui n' a ni hauteur ni largeur, mais nous savons que nous pouvons ajouter certains espacements. Nous pouvons donc utiliser le même espacement que celui-ci. Alors jetons un coup d'œil. Nous avons une marge de 3 049,73. Vous supprimez un 73 ? Je me souviendrai de 49 h 30. Très bien. C'était quoi ? 49. C'était 73. Il y en a une dont tu te souviens. Merci Et je ne m'en souviens pas. 49. Très bien. Ça va mal, les gars. D'accord, donc 30, 49 ans, je peux le faire. Où est ma section ? Où est-ce que c'est allé ? C'est tout petit. Jetons un coup d'œil. D'accord, qu'est-ce que j'ai fait ? Je vais le sélectionner. Je lui ai donné une marge, je lui ai donné une largeur. Je n'en ai pas donné. Donc, saisissons-le et voyons s'il se corrige tout seul. Et puis 49. Salut les gars, revenons à la vie. Et en bas, nous en ferons 49 également. Très bien, nous avons donc une sorte de structure en place. Ajoutons ce titre intitulé « prochain événement ». Et ce que nous allons faire ici, c'est réutiliser celui-ci, copier parce que tout le style y est appliqué. C'est le bon âge, le mauvais texte. Je l'ai donc copié et collé pour tous les styles, et celui-ci s'appelle simplement next event. Le seul problème, c'est le type de contraste semblait être une bonne idée ici, mais ça a l'air plutôt mauvais. Bref. va falloir vivre avec les yeux qui brûlent du rouge sur du vert et mélanger. Mais je veux que ce soit peut-être ce que nous avons décidé, je l'ai prévidé étant le H2, donc je l'ai ignoré. Donc je vais y aller, tu vas déjà entrer en dessous ? Ce sera mon H2. Et je vais lui donner une dose de H2. Et nous allons dire, qu'est-ce que c'est ? Ça l'est, faisons de la typographie. Le premier sera Open Sans. Il vous suffit de taper 0. Quand tu l'auras ouvert, il passera aux O. Si c'est audacieux, c'est bon. Du point de vue de la taille, il sera un peu plus grand et il sera blanc. Et ça va dire que vous organisez votre propre événement. Moi, c'est qu'il y a une rivière près de moi. OK. Je ne peux pas prononcer River. Irlandais. Mon gars, mon ego. Si vous êtes irlandais, je suis désolée. Certains noms, c'est juste que je trouve ça très délicat. Mike. Si tu me donnes un nom maori, je serais d'accord. Mais quoi qu'il en soit, passons à la prochaine étape, Elisa, de plus beaux éléments de bloc. Ils sont donc tous empilés les uns sur les autres. Ajoutons une image. En fait, je vais juste tricher. Copiez celui-ci. C'est la même image parce que c'est ce que je veux. Je veux ce genre de détails pour ça se passe ici. Et je vais ajouter un texte de paragraphe. Je vais juste copier ceci. Si je copie ceci, c'est intéressant, donc je pourrais le copier parce que ce sont les tiques blanches que je veux et je les colle. Je vais cliquer ici, le coller. OK, maintenant il y a deux choses à faire. Il est introduit dans le style. Jetez-y un coup d'œil. Ces deux choses ne vont pas. Les textes blancs ne sont pas venus et ce gros rembourrage est arrivé. Qu'est-ce que j'ai mal fait ? Donc, en gros, je ne veux rien. OK, donc si vous avez trouvé une solution, ce texte de héros, désolé, ce héros et les textes de paragraphes que nous avons ajoutés ici sont là. Il n'a qu'un seul travail dans le monde et tout était un peu serré. Tu peux un peu voir ça, n'est-ce pas ici ? Il n'a qu'un travail et c'est ce truc bleu. Et c'est pour cela que nous leur avons donné des rubriques. Alors, partageons-nous tous d'un côté. D'où vient le texte blanc ? Oh, c'est exact. Ça vient d'ici. OK. Cela vient de la section elle-même. La section dit que j' ai une topographie de la lumière. Tu peux y aller. Mais celle-ci, la section des héros, ne dit rien sur la couleur que doit être la typographie. OK. Je sais que ce n'est pas parce qu'il a cette couleur ambrée, qui signifie qu'il est coloré par quelque chose. Mais ce n'est pas quelque chose que j'ai fait. Il serait bleu si je le colorais. Je peux donc faire l'une des deux choses suivantes. En regardant cela, j'ai deux paragraphes et j' ai du texte en haut. Ils sont tous blancs. On va faire ce truc rouge dans un petit moment. Mais ce que je devrais faire, c'est aller au chauffage pour dire qu' il ne faut pas être blanc. Je me souviendrai de maintenir la touche Option ou Alt enfoncée, de cliquer dessus pour m'en débarrasser. Au lieu de dire que c'est blanc, je vais dire que la section je vais dire que la section intitulée section Next Event sera, tout ce qui se trouve à l'intérieur sera blanc sauf si je dis le contraire, qui est ce type, c'est un enfant de ses parents. Le parent dit d'être blanc et l'enfant dit non, je vais être rouge. Cet enfant n'en sait rien de mieux. Personne ne lui a dit qu'il ne voulait pas être lu. Il prend donc ce que disent les parents. Tu vois un peu ce flux. OK. Vous personnalisez ce qui est prêt à l'emploi autant que vous le pouvez, puis vous faites choses individuelles pour le remplacer par des choses un peu plus spécifiques, des spécificités. Je regarde donc toujours ce design quand je travaille, je suis comme la plupart de ses blancs. Faisons la prédiction blanc et nous allons faire un petit peu. Si c'est moitié-moitié, choisissez-en un. C'est mieux que de styliser celui-ci, celui-ci et celui-ci. Donc, ce que je veux faire, c'est supprimer ces textes de héros parce que je ne les ai pas aimés. J'aurais dû simplement faire glisser le texte d'un paragraphe depuis les options de mon annonce. Mais rappelez-vous, menu déroulant, je peux dire qu'il suffit de supprimer cette classe. On y va. Maintenant, j'en veux deux. J'ai reçu mon texto. J'ai mon point de vue sur un autre document. Il vous suffit de taper quelque chose pour votre prochain événement. Vous pouvez le laisser Loren Ipsum dedans si vous n'êtes pas sûr de ce que vous obtenez pour les apprenants et ce genre faux texte qui est apparu, d'accord, vous pouvez simplement le faire glisser si vous ajoutez une balise p, même si vous voulez simplement copier et coller le texte à partir duquel vous entrez dans le paragraphe, vous le faites glisser de n'importe quelle façon, vous obtenez une partie de ce contenu, vous l' utilisez simplement. C'est une copie, puis supprimez-la. Tu n'en as pas besoin. Eh bien, il existe de nombreuses options en ligne. Vous pouvez obtenir le texte de Loren ipsum à partir de. J'ai le mien dans Figma et un fichier XD. Donc je vais juste prendre le mien, coller. OK, je dois rentrer. On y va. Je vais faire des doubles retours et pour le moment, nous ferons l'espace nécessaire après le coiffage des tiques plus tard. L'autre chose que je voudrais probablement faire est que devons-nous faire ? Maintenant, je pourrais ajouter une classe à cela pour dire que les ticks qui se trouvent à l'intérieur de mon événement de section peuvent avoir un rembourrage en haut pour le pousser vers le bas. Et cela crée une nouvelle classe. Ou je regarde le piano, j'ai déjà fait un cours. Un document cité. Et je pourrais juste l'ajouter à cela. Peu importe qu' il s'agisse de pousser vers le bas depuis l'image ou vers le haut depuis le paragraphe. Je peux donc vous dire, mon ami, qu'il va y avoir de l'espacement. Mettons-en 32 au sommet. Allons-y. Faisons les deux en bas. Je clique juste dessus pour y accéder. Eh bien, vous cliquez dessus et vous le faites glisser. On y va, un texto. Et la seule chose en plus celle-ci, c'est comment l'avez-vous trouvée ? Vous pourriez essayer de le diviser en boîtes séparées, mais avec cela, je ne sais pas pourquoi l'éditeur que le Cohen m'a créé, je n'en suis plus fan, mais si vous voulez ajouter ce morceau, donc sélectionnez cette section. Ce que nous pouvons faire, c'est ajouter une bordure. Fermons donc tout cela. Il va y avoir des garçons. Nous avons donc fait des bordures arrondies. Vous pouvez le faire pour les sections ainsi que pour les boutons. Je vais annuler ça. Ce n'est pas ce que je veux. Vous pouvez voir en bas qu'il y a ces options. Bordure. Je veux une frontière, pas de tous les côtés. Faisons donc d'abord tous les côtés. Tout d'abord, mettez une largeur et mettons-la en dix, juste pour que vous puissiez la voir. Donc, par défaut, il est disponible dans toutes les tailles. Vous pouvez choisir différents types de bordures. Je vais avoir une ligne dure. Et ce que je veux faire, c' est dire que je ne le veux pas de toutes parts. Je veux le mettre à zéro et je veux enregistrer que ce côté n'a qu' une bordure d'environ 30, environ 50. Une autre petite astuce pendant que vous travaillez est de cliquer à l'intérieur d'ici et d'utiliser simplement votre flèche vers le haut. Tu vois de haut en haut, de haut en haut. Si vous maintenez la touche Shift enfoncée, elle augmentera par tranches de 109 000, 100,1020. Je l'utilise donc assez souvent. Tu y vas. 50 va fonctionner pour moi et la couleur est choisir une couleur pour l' acier de mon pipette. Cela ne correspond pas exactement instant, mais nous y arrivons. autre point, c'est que j'ai ce rembourrage sur le côté parce qu'il semble juste que nous lisons, c'est très difficile à lire sur l'ensemble du site Web. Je vais donc le réduire. Je pourrais donc créer une classe pour ce paragraphe afin de saisir l'espacement et de dire que la marge va de côté. Comment le faire sur le côté, car il n'y a pas beaucoup de place. glisser un peu, pour que ça marche. Mais j'ai dû créer une classe. Cela s' appelle automatiquement un paragraphe. Je l'appellerais P Next Event. Mais c'est une mauvaise solution. Eh bien, ce n'est pas une mauvaise solution. C'est juste un cours supplémentaire dont vous n'avez pas besoin. Parce que j'ai la section int et je peux simplement l'ajouter à cela. Faites-le glisser, faites glisser. Oh, ne t'imagine pas. C'est le titre. On y va, la peinture entre. Je suis en train de regarder mon truc. C'est bon. Suffisamment bien Très bien, c'est là que nous en sommes actuellement. Il y avait de nouvelles petites choses dedans, mais essentiellement les mêmes que celles que nous utilisions jusqu'à présent, un peu plus dans le cadre d' un projet réel. Et tu peux écrire avec moi et écouter mes divagations de toute façon. C'est donc ça. Passons à la vidéo suivante. 17. Hyperliens et supprimez le soulignement et la couleur du lien dans le flux Web: Bonjour à tous. Je vais vous montrer comment créer cet hyperlien ici. Lorsque vous cliquez dessus, cela charge en quelque sorte un autre site Web. Je vais vous montrer comment vous coiffer d' une façon aussi laide en bleu et en soulignement. Et nous allons le rendre blanc et souligné. Mais je vais également vous montrer comment supprimer le sous-jacent. hyperliens sont donc cliquables et ils sont redirigés vers un site Web et maintenant, au cas où ils renvoient à un lien vers une carte. Laissez-moi donc vous montrer comment le faire terminer par un stylet dans Webflow. Très bien, je suis revenu en plein écran et je peux faire glisser mon navigateur vers l'extérieur. Et parlons des hyperliens. Quels sont-ils ? Ce sont des exemples et donc sur un article de blog, pouvez-vous voir ici et ce petit lien ici dans le texte que l' auteur a décidé qu'il était intéressant de créer un lien vers quelque part d'ici. Si je clique dessus, il sera redirigé vers une autre page. OK, je vais y retourner. Il y en a un tas ici. Ils les utilisent pour proposer des liens d'affiliation. OK, donc il parle de choses comme, Hé, des blocs-notes, totalement hors de propos, mais j'ai décidé que cela fait partie de leur type de monétisation que les blocs-notes, lorsque je clique dessus, passeront à un lien d'affiliation vers Amazon avec blocs-notes. OK. Bloc-notes aléatoire. Je ne pense pas que ce soit ce que cette personne parlait, mais bon, vous pouvez aussi aller chez les bonbons à la menthe et les écouteurs et ils vont tous sur Amazon. Celui-ci va à Muji, ce qui est cool. Avaient-ils un programme d'affiliation ? n'en a pas l'air. Peut-être. J'adore qu'il y ait de la compagnie de toute façon. Ce sont donc des hyperliens. Ce que nous allons faire, c'est sortir pour accéder à une carte Google. Donc, quand quelqu'un vous dit ici, cliquez ici pour accéder à MapLocation. Nous allons le sélectionner. Et ce que vous remarquerez si je mets en évidence n'importe quel type de texte, étant donné ces options, je peux le mettre en gras, en italique. Ce n'est pas ce que je veux faire. Je veux celui-ci ici. Je voulais insérer un lien. Oh, et le bleu sous-jacent que nous adorons. C'est donc le lien. Faisons en sorte qu'il aille quelque part. Je vais donc consulter mes cartes. Je vais trouver ma rivière. OK. Meg, Meg, moi Agriba. Quand on regarde ce club, c'est le début de la rivière. Je veux aller ailleurs, mais bon, c'est bon. OK. Je vais le partager. Je vais juste envoyer ce lien et le copier. Je vais le coller ici. OK, alors voici mon lien. Ça y est. Je vais cliquer sur le petit rouage. Et je vais le récupérer pour emporter le haschich. Le hachage est là comme espace réservé, vous n'avez pas besoin de le laisser là. Il reconnaît simplement qu'il s'agit d'un lien et utilise un hachage. Ce n'est donc pas une flèche lorsque vous cliquez dessus. Mais supprimez le hachage, mettez un Nance. Je vais demander au mien d' ouvrir un nouvel onglet parce que je veux les gens gardent le flux de travail ouvert. Grand saut vers la carte. Il existe un lien interne. Ne portez pas ça. Cool. Alors testons-le. Passons à l'aperçu. Et passons à notre lien. Hey, et ça ouvre Google Maps à L River en cas d'attaque de blocage. Quoi qu'il en soit, stylisons-le. Sortons donc de l'aperçu. Ici, des couvercles, un stylet. Ajoutons-y donc une classe. Alors, allez voir nos styles. Et je l'ai sélectionné. Je vais dire que vous allez être une classe de liens hypertextes. Lien hypertexte. Et je souhaite annuler les valeurs par défaut. Il y a des trucs qui arrivent. Vous voyez tout cela provenir des par défaut d'un lien. C'est pour ça qu'ils disent de la NBA, que je dois être Aereo et peut-être que cette taille, cette hauteur, cette couleur, et ça demande de la décoration. C'est la première chose dont on peut se débarrasser. Il faut que la décoration soit soulignée. Je dois dire que je ne veux pas qu'il soit allumé. Alors désactivons-le en n'utilisant aucune décoration de texte. L'autre chose que je veux faire, c'est changer la couleur pour le blanc, s'il te plaît. OK. Mais je me demande quel est le sous-jacent maintenant, c'est à vous de décider ce que vous voulez faire, d'accord, donc je vais laisser le sous-jacent activé parce que c'est un peu universel, peut-être que c'est un lien hypertexte, il va souligner. Le bleu est évidemment un peu résistant avec notre design. Maintenant, un peu de préfiguration pour la dernière partie du cours lorsque nous parlerons de référencement. Mais l'un des facteurs les plus importants pour obtenir votre classement sur votre site Web est lorsque d'autres personnes créent des liens hypertextes sur leur site Web qui pointent vers vous. D'accord, donc notre lien hypertexte, ou est-ce que ça va, soutient Google Maps, mais disons que c' était pour créer un lien vers un fournisseur de kayaks et dire que vous devriez acheter vos kayaks à cet endroit ici , et voici le lien. Ce sont les types de liens qui sont vraiment importants et qui correspondent à ce que vous recherchez, à votre site Web ou à votre classement. Eh bien, les envoyer n'est donc pas si important pour votre site Web. Mais qui que ce soit qui reçoit ces liens, ces liens entrants, comme la boutique de kayaks, comme dans mon cas ici. Et ils adoreront les liens vers leur site. C'est un peu comme ce qui fait que c'est l'un des indicateurs les plus importants de Google. Donc, une fois que vous avez votre site, l' une des choses que vous pouvez faire est de rechercher des personnes pour créer un lien vers vous en utilisant de bons mots clés. C'est là que je t'ai vendu. Si vous aimez cette vidéo, je l'apprécie, mes cours et c'est ce qui m'aide. Et Michael dit de devenir populaire. Donc, si vous créez un site Web et qu'il est approprié de dire le meilleur cours Webflow sur Internet quelque part en Inde . C'est vrai, Dan, j'en ai fait un hyperlien et j'ai pointé vers ce cours. Oui, c'est ma pâtisserie. Mais donc, les hyperliens, très importants. Il y a un peu plus de navigation pour votre site, mais pour les faire pointer vers votre site, poussière d'or est-elle vraiment utile pour les moteurs de recherche ? C'est bon, ça y est. Passons à la vidéo suivante. 18. Lien d'ancrage vers une autre section de page dans Webflow: Bonjour tout le monde. Dans cette vidéo, nous allons le faire . Je clique sur un bouton et il glisse vers la section différente. C'est une façon de naviguer sur un site Web d'une page où vous ne passez pas à des pages distinctes, vous passez simplement à différentes parties du site. Les identifiants et les ancres des éléments froids, mais en réalité, ce ne sont que des éléments de navigation par diapositives de page sophistiqués Laissez-moi vous montrer comment ils fonctionnent. Pour créer cette navigation. Cela fonctionne un peu à l'envers. C'est pourquoi c'est vraiment difficile à retenir et vous finirez revenir sur cette vidéo ou par l'écrire quelque part. Donc, tu ne commences pas par le bouton, d'accord, ce qui semble naturel si tu commences par où tu veux aller. Je veux que ce bouton descende ici lorsque vous cliquerez dessus. Je vais vous présenter cette section ici. Je voudrais accéder à mon option Paramètres. Je vais lui donner une carte d'identité. C'est ce qu'il utilise. Le bouton permet de savoir où aller. Ok, donc on va lui donner un nom maintenant. Tu dois être raisonnable, eh bien. Il s'agit simplement d'un espacement dans la section appelée « événement suivant ». OK, regarde ça. Si j'appuie sur Entrée, cela la mettra dans les traits d'union car je semble être d'accord avec le haut et le bas, mais ils ont juste certaines choses comme les identifiants, n'aiment pas les espaces. Cela vous oblige donc à mettre de petits traits d'union et à vous refroidir. C'est donc la moitié du travail effectué. Maintenant, nous montons sur le bouton et vous disons, lorsque vous cliquez sur les paramètres de tri. Nous disons que je ne veux pas aller sur notre site Web. Je veux qu'il aille dans cette section de page. Et vous remarquerez que cela n'apparaît que maintenant, même si nous avons des sections froides, cela ne s'en soucie pas. Il veut voir une carte d'identité. Donc ce lien, ok, ça s'appelle une ancre. Il sera envoyé à ce point d'ancrage appelé section Next Event. Lorsque vous cliquez dessus, essayons-le. Prévisualisons-le. Et cliquons dessus. Re, il n'y a pas grand-chose ici. Arrêts. J'en mettrai d'autres sur mon site Web plus tard, mais tout cet assouplissement est déjà effectué automatiquement pour nous par le navigateur et par Webflow, mais nous le faisons à une section. Vous pouvez réellement modifier n'importe quoi. Vous pouvez le sélectionner, y accéder, lui donner un identifiant et dire que lorsqu'il clique, descendez à ce que c'est. Il n'est pas nécessaire que ce soit une section, c'est juste évidemment, probablement utile. Allez dans une section et accédez à un H1 tant qu'il possède un identifiant. Passons donc aux autres étapes. Donc, le contact que nous n'avons pas en ce moment, celui qui nous concerne, nous ne voulons pas vraiment ce que nous voulons, n' est-ce pas, qu'est-ce que L ? Il dit que les événements passés sponsorisent des événements. Nous l'avons déjà fait. Nous l'avons supprimé. N'avons-nous pas vu du poids ? Je vais le taper très vite. Haha. Très bien, nous avons donc nos boutons. OK, donc ce que je veux faire, c'est que lorsque nous allons à des événements, cela va se dérouler dans cette section ici. Et ce qui est cool, c'est que j' ai déjà cet identifiant et que je veux aller au même endroit, ce bouton, et ce bouton va au même endroit. Je peux donc simplement le réutiliser. Alors sélectionnez-le. Je peux accéder à mes paramètres. Je peux dire que ce n'est pas une URL. Je souhaite accéder à une section de page et à des zones. Ils y vont donc tous les deux. Prévisualisons-le. Voilà, les gars. Très bien, éteignons ça. Et que pouvons-nous configurer d'autre ? Nous pouvons créer des sponsors. Alors faisons-le encore une fois. En fait, je vais faire une pause. Tu le fais. Vous y attendez. Tu le fais, mais tu peux le mettre en pause. Bon. Essaie. Très bien, tu es de retour. Tu l'as fait. Comment est-ce que ça s'est passé ? OK. Tu as oublié ? Je vais te montrer si tu l'as fait faire ce que tu veux. Sois fier de toi, génial ta conception web, OK, donc tout d'abord, souviens-toi que c'est là que tu veux aller en premier et les paramètres, je vais appeler celui-ci comme tu veux, je dois l'appeler Une section parmi sera appelée sponsors. Vous avez peut-être appelé vos partisans en étant un peu lâche avec ce que j'appelle le mien. OK, donc je vais y aller, mais c'est fait. Maintenant, je veux dire que vous allez sur la page d' accueil et que vous allez sur une page appelée, vous voulez que nous lui donnions un aperçu. Les sponsors ne vont pas très loin. Mais bon, vous pouvez savoir que lorsque nous créons une page plus longue, lorsque nous n'avons pas plusieurs pages, nous pouvons simplement avoir cette page. Vous pouvez vous déplacer de haut en bas. Nous n'avions pas encore d'événements passés. Ça y est. Là, nous n'en avons pas, il va construire cette section et un peu de temps nous allons créer ces grilles en bas. Mais bon travail. Nous avons fait des hyperliens, du même genre. Ce sont des liens, mais ceux-ci ont des diapositives de page sympas. D'accord, c'est ce que dit la vidéo suivante. 19. Projet de cours 02 - Créez votre page de club: Bonjour, bonnes personnes. C'est l' heure des projets en classe, pas des devoirs. Je veux que vous parcouriez et que vous mettiez votre site Web au point où nous en sommes actuellement et que vous m'envoyiez une capture d'écran. Donc, le brief est d'utiliser votre propre brief si vous suivez celui du kayak, c'est très bien aussi. Mais j'espère que vous avez travaillé sur votre propre brief que vous avez reçu plus tôt et que vous amené là où nous en sommes maintenant. Dans ce cours, vous pouvez le pousser plus loin si vous le souhaitez. Mais ce que je demande, c'est d'en arriver là. Vous pouvez donc choisir vos propres couleurs, vos propres images, vos propres polices, à vous de choisir, d'accord ? Ce sont les prérequis. Vous devez avoir les quatre sections. Donc navigation, le héros, le sponsor et le prochain événement sur les images, sur l' image de fond, d'accord, vous devez appuyer sur la 12.3, vous devez ajouter la navigation en haut. Vous avez besoin de cette classe de survol des boutons. Je sais que je demande une capture d'écran pour que vous ne puissiez pas vraiment vous montrer la classe de survol, mais je saurai si vous ne le faites pas. OK, c'est cet événement de survol sur le bouton, le lien hypertexte, qui est celui-ci ici, membre en bas. OK. On clique dessus et on se dirige vers un autre endroit. Et les liens d'ancrage, c' est-à-dire la navigation, où elle glisse vers le bas. Ok, maintenant, fais-le pendant que tu es en prévisualisation, pour qu'il élimine tous ces déchets partout, d'accord, et aussi si tu fais une capture d'écran, c'est difficile quand tu ne peux pas voir du tout. Donc, ce que tu devrais faire, c'est monter jusqu'ici. Cela change un peu. J'espère donc que c'est le même style, mais si ce n'est pas le cas, vous le trouverez quelque part plus haut où vous pourrez réduire l'échelle. Mon ordinateur portable, je passe à environ 70, peut-être un peu plus, 60. OK. Ensuite, je peux faire une capture d'écran. Maintenant, les captures d'écran sur un PC, vous pouvez les imprimer et les coller. Vous devrez rechercher sur Google que sur un Mac, c'est relativement facile. C'est Command Shift 4. OK, maintenez-les enfoncés. Vous pouvez faire glisser une case sur votre bureau pour faire une capture d'écran. Si vous travaillez sur autre chose, ou si vous devez rechercher sur Google comment prendre une capture d'écran sur votre ordinateur. Mais oui, faites-le et téléchargez-le quelque part. Il y aura une section sur les devoirs, les projets ou les commentaires sur ce site Web. Il y en a un peu différemment d'un pays à l'autre. Alors téléchargez-le ici et j' adorerais voir ce que vous faites. Essayez également de le coller sur les réseaux sociaux. Montre-moi ce que tu as fait. Nous sommes prêts, même si vous êtes du genre, à c'est une question délicate parce que tous ces groupes sont remplis de personnes qui ont eu comme vous et qui ne font que commencer. Donc ne t'inquiète pas, oh mon Dieu, je ne partage pas ce que je fais parce que je suis nouveau. La beauté de ces groupes réside dans le fait que tout le monde est nouveau, téléchargé et invité à faire part de ses commentaires. Ou ne vous contentez pas de poster et de dire C'est là que je me suis rencontré. Il est intéressant de dire que les développements de chacun voient à quel groupe ils appartiennent, quels styles ils proposent. Demandez des commentaires si vous le souhaitez. C'est un excellent moyen de commencer à recueillir des commentaires créatifs. Si vous n'avez peut-être pas l'habitude critiquer le travail de designer ou de vous faire critiquer. La seule chose, c' est que je veux tu le fasses aussi à quelqu'un d'autre. Même si vous ne l'êtes pas, vous ne vous considérez pas comme un concepteur web hardcore. En donnant des commentaires, en regardant travail de quelqu'un et en voyant ce que vous aimez, ce que vous n'aimez pas, ce qu'il pourrait mieux faire , vous pouvez vous améliorer vous-même parce que vous commencez à vous-même parce que vous commencez analyser d'autres le travail et les déplacements des gens, j'aime ça à cause de ça. Et tu ranges ça et tu t'en vas, je déteste ça à cause de ça. N'utilisez pas le mot haine. Un peu plus doux, mais disons, je n'aime pas, c'est quelque chose dont tout fonctionne grâce à X, Y et Z. Vous pouvez aussi le ranger. Donc, lorsque vous réaliserez votre prochain projet Web, vous vous dites  : « Ah oui, ce sont les choses que j'aime et que je n' aime pas dans la conception de sites Web. Quoi qu'il en soit, vous n'êtes pas obligé de partager sur les réseaux sociaux. Mais ce sont les principaux groupes alimentaires. Le groupe Facebook est super génial, les groupes LinkedIn vraiment géniaux. Ceux-là, Instagram et Twitter, sont un peu plus à sens unique, mais c'est cool de voir ce que vous faites. Ces groupes ici, un peu plus de groupe, mais j'adorerais voir ce que vous ferez une fois que vous m'aurez dit ce que vous ressentez. Maintenant, plus tôt dans le cours, je vous ai demandé de me dire c' était du nez et de l'engouement ? Comment te sens-tu maintenant ? Plus nerveux, deux fois dépassé, un peu plus confiant. Quoi qu'il en soit, fais-moi savoir. J'aimerais faire défiler mes réseaux sociaux et voir où tout le monde est à high five et où tout le monde est chaud quand c'est nécessaire et faire des câlins aux gens qui trouvent les choses difficiles. D'accord, c'est un projet de classe d'aller le faire, d'en profiter. Je te verrai dans la prochaine vidéo une fois que tu auras fait tes devoirs. C'est bon. 20. Comprendre les cours de Combo de flux Web: Bonjour tout le monde. Dans cette vidéo, nous allons voir ce qu' est une classe combinée. Permettez-moi de le démontrer un peu avant de le faire. Nous avons donc ces boutons en haut de mon design ici. En fait, je veux juste que celui-ci soit vert et que ceux-ci ne le soient pas. Donc, ce que je peux faire, c'est appliquer plus d'un cours, accord, pour le mettre à jour. Cela reprend un peu le style de l'original, mais la seule chose qui change, c'est que l'arrière-plan est clair. Il en va de même pour ce texte ici. Je veux qu'une partie soit rouge, pour pouvoir cliquer ici, et je les ai déjà créés. Ok, donc nous allons le faire dans cette vidéo. Mais je peux dire que je veux que ce petit morceau prenne du rouge. Si je clique dessus, deux classes s'y appliquent, mon bouton de navigation et mon arrière-plan sont clairs. C'est ce qui en fait un combo. Très bien, des combinaisons, des classes combinées. Allons-y. Très bien, parlons de cours combinés. Quels sont-ils ? Ils le sont pour le moment, nous avons comme notre bouton ici. Il n'y a qu'un cours. Si nous y ajoutons une seconde, ces deux combinaisons, Let's combo class, accord, alors nous, pourquoi l' utiliserions-nous ? Bonne question. Parce que allons-y, par exemple, supposons que notre design comporte un bouton vert, mais que certains d'entre eux n'en ont pas. Nous en voulons donc un peu. Nous voulons conserver la même couleur de police, la taille de police, l'espacement. Nous voulons juste changer l'arrière-plan. Ce que je pourrais faire, c'est vous y aller, je pourrais y aller, supprimons celle-ci et créons une toute nouvelle classe ou à partir de zéro, et créons une toute nouvelle classe ou à partir de zéro, la faire flotter à droite, la mettre en majuscules et en blanc et ajouter le rembourrage Pauvre, quelle douleur dans les fesses. Et puis si je change la police, je dois la changer en plus de cette nouvelle classe que j'ai créée. Ces classes combinées étranges sont utiles. Donc, ce que je peux dire, c'est que je veux tout garder, mais je voulais y ajouter quelque chose de plus précis. Donc, je vais dire que vous pouvez utiliser Button Nav, mais je veux ajouter une autre classe appelée background red que je suis en train de créer. Et le pétrole veut faire, c'est dire, tout cela va dire juste, c'est ce qu'il va dire maintenant. En fait, vous êtes cette couleur rouge de ce texte, vous y allez. D'accord, donc cette classe de combo est juste un peu plus spécifique à l'or. Je pense que j'aime juste dire le mot spécificité de toute façon. Donc oui, nous venons de passer en revue les choses et un seul travail de conception de tâches est de passer à la fréquence de fond. Nous pouvons l'appliquer à plus de choses, nous pouvons dire que vous avez aussi une classe de combo préexistante, elle est là, je peux l'appliquer à cela. On y va. Maintenant, je veux que le mien soit transparent, donc je vais probablement renommer le mien et l'appeler clair ou transparent selon vous. Et je vais dire qu' en fait, soyez complètement transparent comme une fermeture éclair jusqu'ici. Ou parfois, il y a un échantillon prêt à être utilisé. Ils s'en vont et ils ont tous deux changé. Tu vois ça, génial. L'avantage de la classe combo est que maintenant, si le client revient et dit : «  Hé, cette police doit être en gras, vous ne verrez aucun problème. J'ai des cours combinés. Donc je peux dire, cliquez sur celui-ci, d' accord, mon bouton de navigation. Et je vais dire, en fait, qu' est-ce que nous sommes en train de changer ? La topographie va maintenant être la clé. Les voyez-vous tous changer de façon ? Parce qu'ils utilisent tous des boutons de navigation. Et la seule chose qui change sur les deux, c'est que l'arrière-plan a été rendu transparent. C'est en quelque sorte pourquoi ils l' appellent les feuilles de style en cascade , les cascades CSS. Vous commencez par le corps et il indique au site Web faire quelque chose à moins que quelque chose de plus précis ne se produise, comme s'il y avait des navigations au milieu. Et puis il y a la navigation qui dit, je me souviens de ce que c'est, mais elle peut dire que tout le texte est blanc à moins que quelque chose à l' intérieur ne tombe en cascade et ne dise : « Je suis plus précis, comme si je voulais qu'il soit en gras ». Il va passer outre et dire « Bolt ». Et puis, quelque chose d'encore plus précis dit : je veux que ce bouton ne soit pas vert, qu'il soit clair. Donc, pouvez-vous voir la hiérarchie commencer juste en haut, les éléments génériques et vous devenir plus précis et votre site Web fonctionnera totalement si vous avez 1 000 classes, essayer de faire des choses rend tâche difficile mise à jour plus tard. Donc, c'est juste une bonne pratique et c'est intéressant. Quoi qu'il en soit, je pense qu'il faut faire un autre projet dans le cadre duquel nous allons améliorer le taux d'imposition. Jetons donc un coup d'œil à notre design. Je vois que j'ai fait une partie des tiques en rouge là-bas et le coffre ou le taux d'imposition là. Donc, ce que nous allons faire , c' est aller un peu plus loin. Je veux donc ce mot kayak. Tout d'abord, je pense que nous avons un style pour le titre. Si je clique dessus, il n' y a pas de style. Maintenant, je veux faire du style, donc je vais créer un accord qui en frappe un. Et je veux faire un certain nombre de choses. Je vais en faire le XO, je vais tout faire en majuscules. Nous l'avons déjà fait, non ? Et je vais en faire la version allégée. Nous pensons en avoir un pour le chauffage. Je ne peux donc pas en faire lire une partie pour moi. Je ne peux pas dire un, tu es rouge parce que tout se trouve le long de ce bloc géant. Cela s'applique à tout. Comment appliquer quelque chose ? Fais juste un petit bout de texte. Donc, vous sélectionnez ce morceau de texte et cela apparaît. Donc vous voulez un peu qui dise celui-ci, il a de la réputation avec une envergure. Tu vois un petit pinceau. C'est parce que je veux simplement styliser cela qu' on appelle une balise span. Vous n'avez pas besoin de vous en souvenir, mais dans le code HTML, il faut mettre quelques éléments autour de cela afin que vous puissiez ajouter une classe juste à ce bit. Donc, il clique dessus. Rien ne change vraiment , sauf que nous allons regarder cela. Nous devons prendre le nom de Span. Appelons celui-ci. Il faut du rouge. Parce que pourquoi il faut du blanc et du bleu, ça s'appelle TTX, Fred et son travail vont passer outre à ce qui existe actuellement. Quelque part dans la feuille de style, on dit qu'il est blanc. C'est pourquoi c'est un MBA, mais pas ce cours, mais quelque part là-bas. Je vais dire qu'il faut aller plus loin. Je veux rompre avec la norme. Je veux être un rebelle. Les enfants n' écoutent pas leurs parents. Je vais devenir nucléaire. Lis, vas-y. Très bien, nous avons donc créé ce petit tag span pour donner du style à ce petit bout. Et comme nous l'avons fait auparavant, si nous changeons de frappe, j'ai donc cliqué sur ce point ici en appuyant sur un. En fait, je veux que tu ne sois pas là maintenant. Je veux que vous soyez l'impact de ces autres fonds. Voyez-vous qu'à cause de cette cascade ou cette spécificité, ou je dis simplement que vous avez simplement agité du bois design. Vous pourriez dire : « Je sais ce que c'est ». Si vous êtes nouveau, j' essaie juste de m'habituer à certaines de ces choses parce que cela les rend utiles pour la santé. Tu as un problème. Vous pouvez rechercher sur Google les termes que vous avez appris, alors que le flux de travail aime les masquer un peu pour rendre les choses plus conviviales et utiliser le langage humain de toute façon. Vous pouvez donc les voir suivre et devenir rouges. Joli. Très bien, refaisons-le. Ce qui est bien, c'est qu' une fois que vous l'avez fait une fois et que vous avez plein de pages, pouvez-vous dire que vous vous souvenez vraiment de notre design ici, alors que le 8 juin était rouge. Même chose ici. Tu peux le dire, mon ami en un clin d'œil. OK, et je vais ajouter la classe de ticks de texte juste là où elle est. Hé, nous devons peut-être concevoir. C'est l'idée d'une classe combinée. Vous pouvez en ajouter plusieurs à un élément pour l'aider ou faire autre chose. Donc, oui, d'accord, je pense que nous avons obtenu des classes combinées, plus d'une classe appliquée à un élément en particulier, d'accord, une fois dans la vidéo suivante. 21. Grille de flux Web: Bonjour à tous. Il est temps de créer une grille et nous allons construire ce type de disposition à trois colonnes. Mais vous pouvez facilement les parcourir, ajuster l'espacement, leur largeur, leur nombre de colonnes au fur et à mesure qu'il y nombre de colonnes au fur et à mesure qu' rangées, tout cela est très intéressant. Les grilles sont géniales. Laissez-moi vous montrer comment ils fonctionnent. Annuler, annuler, annuler, c'est fait. Maintenant, laisse-moi te montrer. Très bien, bonjour. Ce n'est peut-être pas ton nouveau matin, mais c'est le mien. Je suis prêt à passer à l'action pour vous expliquer les grilles. Mettons donc en place un réseau. Nous voulons mettre ça, donc ces petites boîtes ici, un peu de cartes d'événement. Ok, donc ce que nous allons faire, c'est le donner. Vous vous souvenez peut-être que nous avons notre conteneur, nous pourrions simplement y déverser une marchandise directement. n'y a rien de vraiment mal à cela. Mais il est pratique de le mettre dans quelque chose de poing parce que nous l'avons fait pour tout le reste. Nous allons passer à la section pour les prochains événements. Nous avons une section pour les sponsors. Nous avons une scission. Nous allons ajouter une section pour les événements passés. Donc, nouvelle section publicitaire. OK. Je vais le mettre ici pour me retrouver au bon endroit. Ouaip. Suspendu par le bas. Qu'est-ce qui pousse cela vers le bas ? Il y a une grande marge ici. Je l'ai déjà fait parce que c'était péniblement près du fond. Je vais l'enlever. Vous pouvez maintenant cliquer dessus et le supprimer. Souvenez-vous de l'option sur Mac, Alt sur un PC pour vous en débarrasser, et nous allons travailler dessus ici. Cette section va donc être froide. Donnons-lui un nom. Nous allons lui donner un cours, au moins une section. Et celui-ci va être un moyen positif. Vous pouvez commencer à voir mes conventions de dénomination Miss et certaines d' entre elles avaient regardé une section, d' autres ont des traits d'union, d' autres n'ont pas couché. OK. Très bien, remettons-le dans leur section. Eh bien, pour ce qui est des événements passés, je suis arrivée là pour dire que j' aimerais encore ajouter de la marge pour le haut et le bas, juste pendant que je travaille, juste pour que ça pousse de haut en bas. Donc, ici, je vais passer à la section vide. Ajoutons une grille. La grille est celle-ci et c' est cette dernière option ici. Cliquez sur Maintenir, faites-le glisser. Joli. Les grilles sont géniales et ont l'air un peu effrayantes, mais ce n'est pas le cas. Donc, en gros, l'une des choses est que lorsque vous modifiez votre grille, pouvez-vous voir autre chose passer en gris pendant ce temps , comme le mode d'édition Magic Grid, vous pouvez en sortir en appuyant OK et retournez-y en cliquant dessus sur la grille ou en faisant cuire à l'intérieur. Accédez à vos styles et dites ci-dessous, sous Disposition, Grille de toute façon. Nous sommes donc en main, à quoi sert un réseau ? Cela nous permet de diviser les zones. C'est très pratique parce que nous pouvons dire que nous allons utiliser les avantages aux extrémités ici et ici, pas ceux à l'intérieur des cellules. Ce sont des machines à calculer bien, plus hardcore, et nous le ferons plus tard pour le moment. Ajoutons maintenant une nouvelle colonne. Génial, d'accord, vous pouvez en ajouter autant que vous le souhaitez. Vous pouvez ajouter quelques lignes supplémentaires en fonction de ce que vous créez. Nous utiliserons également cette option de grille pour notre portfolio plus tard dans le notre portfolio plus tard dans le cours pour les supprimer Il y a peut-être un moyen, je n'arrive pas à le comprendre à l'écran. OK, donc je dois le faire ici. Alors, faites-le sélectionner. Tu dois être en mode édition. Cliquez dessus. Ce morceau apparaît en quelque sorte ici. Vous pouvez dire « Actually columns ». Je ne les veux pas tous les quatre. Je n'en veux que trois. Et ici, avec des rangées, je vais me débarrasser de The Rose qui tombe dans la petite poubelle. ce que je viens de recevoir. C'est ce dont j'ai besoin. Maintenant, nous allons faire des colonnes paires, d'accord, mais voyez ce chiffre ici. Par exemple, qu'est-ce qu'un FR ? Et c'est une fraction. C'est très pratique, un peu comme les pourcentages. C'est, ce pour quoi c'est vraiment pratique, c'est de regarder ça. Je peux cliquer dessus et dire que je veux vraiment que ce soit deux fractions. OK, alors divise l'espace en deux. C'est deux et c' est l'une d'entre elles, l' une des deux fractions, d'accord, donc vous pouvez voir cette division là. Je peux dire qu'en fait, c'est la moitié d'une fraction et cela la divise. OK ? Il occupe toujours tout l'espace, d'accord, dans notre cas, il est contenu dans notre conteneur. dit : « Ne soyez pas plus large que cela ». OK, remarquez que je n'ai pas pu cliquer dessus parce que nous sommes en mode édition. Vous devez cliquer sur Terminé. Je peux choisir Il y a mon contenant. C'est ce qui lui donne sa largeur. Pouvons-nous revenir sur le réseau ? Retournez ici. Vous pouvez donc le diviser en toutes sortes de fractions froides. Vous pouvez dire que c'est trois et cela se répartira pour vous. Très bien, je vais retourner au 111111. Ajoutons-y quelque chose parce que c'est un peu étrange. Regarde ça. Je vais ajouter une image. Si vous suivez votre propre projet, trouvez trois images et si vous savez comment les recadrer pour obtenir le même rapport hauteur/largeur, faites-le. Et comme Photoshop , Figma ou XD. Mais je savais que si vous êtes du genre, qu'est-ce qu'un rapport hauteur/largeur, si je vide une image ici de tailles différentes, disons celles-ci en mettant celle-ci, puis celle-ci, et ensuite celle-ci sur le même grille qui ne correspond pas parce que je veux qu'elles aient toutes le même type de largeur accrue. Nous le ferons plus tard. Une image, une image. Il y a une section intitulée Images level, où nous allons un peu plus hardcore avec les images et les forçons à avoir la bonne taille. Mais pour le moment, va les recadrer. Ou j'ai créé quelques événements liés à l'image par le passé, 123, je me suis assuré qu' ils soient tous identiques. Hauteur par rapport à la largeur. OK. Créez les vôtres ou utilisez-les. J'ai essayé de les rendre génériques. Je vais te montrer un coup d'État. Un autre truc, c'est que j'ai un flux Je vais le fermer. Je vais me débarrasser de mon image. Parce que ce que je vais faire, c'est vous montrer un moyen très rapide d'ajouter des images. Vous n'avez même pas besoin d'ouvrir votre panneau de ressources. Il suffit de voir Webflow et de fermer tout cela. Je vais juste dire : « Hé, peux-tu aller regarder, déposer ici, il y aura une édition sur Asset Manager. En les cherchant, ils se disent : «  D'accord, un moyen simple et agréable d'ajouter des images. Revenons donc dans ma grille. Et rappelez-vous que je ne vais pas le faire, je vais ignorer l'ensemble en ajoutant une image, puis en la connectant. Je vais juste passer au panneau S8. Tu vas là-dedans. Ensuite, je veux mettre mon titre sous mon image avec le titre de l'événement. C'est là que ça devient bizarre. Je vais ajouter mon chauffage. Vous. Je vais y aller. Où est-ce que tu te trouves ou la topographie ? Fais-le glisser dedans. Génial. Je l'ai repoussée. C'est bon. Mets-le en dessous. Je peux utiliser mon navigateur Dandy très pratique. Pas de problème. Donc, ma frappe va passer sous mes images. Même si c'est pareil. Ils sont au même niveau. Ce sont des frères et sœurs, ils devraient donc être dans la même grille. Ce qui se passe avec une grille, c'est qu'elle examine unités individuelles ici et là, je vais les placer facilement pour vous dans différentes cellules, ce qui est bien lorsque vous n'avez affaire qu'à des images. OK, alors débarrassons-nous de ça. Frappant. Cela signifie que je peux y aller, d'accord, où sont mes affaires ? Est-ce que celui-ci aussi ? Ensuite, je vais en prendre une autre. Je vais t'y rendre aussi et peux juste les mettre dans de nouveaux. Et puis pareil, ajoutons-en un autre. Je vais répéter le processus. Vous pouvez voir si vous continuez à les ajouter. Il va simplement continuer à les ajouter dans la grille suivante. Merci. Grilles CSS. Mais maintenant, nous voulons en avoir plus qu'un par unité. Je vais donc annuler cela. Je vais les laisser tous les trois dedans. Ce que nous devons faire, c'est que ça doit être dans un rappeur, OK, quelque chose qui le contient et qui frappe ensemble. Et qu'est-ce que cela pourrait être ? D'accord, tu peux faire une section. Nous savons que ces sections ne peuvent pas vivre les unes dans les autres. Alors, qu'utilisons-nous ? C'est celui-ci ici. C'est ce qu'on appelle un diblock. Div block est juste votre wrapper générique qui a reçu un style. Tout est là, un peu comme un élastique pour tout garder en place. La section est en fait une balise div. Division. C'est une plongée, ce sont leurs anciennes plongées. Mais ceux-ci ont commencé par celui-ci ici ne fait rien. Il a juste ça comme un emballage vide. C'est aussi un div, mais un lien y est appliqué. Div est le genre de chose sous-jacente, division de l'espace k ou division ou bloc divisé. Je vais l'ajouter au hasard. OK ? Donc, voici ce bloc div. OK ? Je vais y mettre mon image , ce qui est un peu délicat. Tu dois l'obtenir. Alors n'oubliez pas que c'est un peu comme ça, c'est un peu comme à l'intérieur et ce sera un peu tabulé. C'est difficile Vous ne pouvez pas vraiment le faire glisser ici sur la toile. Hé, tu dois le faire ici et ensuite le navigateur, j'ai un bloc div avec une image dedans. Et maintenant, je peux dire que, parce que cela ne fait rien, il sait simplement qu'il est enroulé autour de mon image en ce moment. Mais si j'ajoute quelque chose d'autre à l'intérieur, pour que je frappe, OK, je comprends bien. Je suis au moins, ils sont dans la même cellule. Vous pouvez voir mon chauffage en dessous. Et nous avons donné trop souvent pour cela, eh bien, ils ont appelé des cartes. Ces petites unités peuvent être des fonctionnalités, des événements passés ou des articles de blog récents. Ce sont comme de petites cartes unitaires. Si vous voulez l'utiliser dans une grille, vous devez les mettre dans un rappeur. Dans ce cas, le blocage les a maintenus ensemble. Alors, où allons-nous à partir d'ici ? Supprimez-les et dupliquez toutes les décisions. Faisons les blocs div que je viens de sélectionner ici, copiez-collez. J'en ai un nouveau et je vais le faire, tu y vas. Tu vas par ici. Tu vas là-dedans. C'est difficile de le faire avec une grille ici. Donc tu n'as pas vraiment le droit de le faire. J'ai donc un bloc div avec une image et un résultat. OK, j'ai une image qui traîne toute seule. Supprimez-le. J'ai maintenant un div avec une image dedans sans frappe. Cela peut devenir confus. Je vais laisser ça dedans parce que tu te perdras trop haut. Il est facile de se débarrasser de ces images et de copier et coller ce bloc d'adresses IP. On y va. Échangeons les images. Moyen simple, il suffit de double-cliquer dessus. Remplacez l'image. Je vais choisir celle-là. Celle-là. C'est un peu générique de toute façon. Nous avons donc ces gars qui sont maintenant quadrillés dans leur propre petite boîte de rangement pour les garder bien rangés. Donc, qu'est-ce que nous avons ajouté d'autre à propos des grilles, c' était très utile et nous avons décidé, euh, vous ajoutez de la grille. Vous pouvez réellement transformer quelque chose en grille parce que je tiens à reconnaître qu'il ne s'agit en fait que d'un paramètre d'affichage et d'affichage fort. Revenons donc à L. Donc, nous avons cette grille, non ? Et pouvez-vous voir que c'est réglé sur cette base que nous avons appris, souvenez-vous du bloc d'affichage. Tu te souviens de ce que ça fait ? N'oubliez pas que cela ne fait que tout faire baisser. C'est la valeur par défaut pour beaucoup de choses. Et puis nous avons appris celui-ci ici, en ligne, où nous l'avons fait. Où faisons-nous cela avec ces images ou nous engageons-nous lorsque nous l'avons fait ? Pour ces gars-là, de toute façon, ils finissent par suivre la même ligne. OK, bonne semaine alors. C'est l'autre grille d'options, d' accord, donc c'est une autre option de mise en page. Je pourrais donc aller jusqu'ici et dire en fait le contenant pour cela. Donc, les sections appelées sponsor, je pourrais dire, au lieu de. En utilisant ce bloc, j'ai pu voir votre grille et il transforme simplement en une grille dans chaque unité. Et puis cliquons sur OK, c'est, vous savez, que c'était quelque chose, il y avait un élément, c' était un élément. Tous ces différents éléments se sont enfoncés dans ces différentes cellules comme une grille , comme auparavant. n'y a pas vraiment de différence ici. Je peux ajouter une autre ligne et commencer à jouer avec. Si vous arrivez à un point, que vous l'avez mis dans Diblock et que vous essayez de tout exposer et que vous vous dites, en fait, je veux simplement les séparer. Vous pouvez simplement le transformer en grille. Et de la même manière, vous pouvez dire qu'il faut réellement se débarrasser du bien et revenir à l' élément bloc, celui-ci ici, d'accord, retour au bloc. D'autres choses que je voudrais vous montrer à propos des grilles. Et le fait est qu'un style a été créé dans cette grille, fois que vous vous êtes habitué à essayer capturer ces styles au fur et à mesure qu'ils sont créés afin de pouvoir les nommer. Nous avons donc créé cette grille, nous avons commencé à changer et nous nous sommes dit : «  OK, il y en a trois. Pas trop. Et dès que vous faites cela, il est écrit : « Hé, je le stylise parce que je fais des choses dans le panneau Styles ». Nous faisons des choses ici. Et il est dit : Très bien, nous allons vous créer un style parce que vous n'en avez pas écrit un. Nous l'appellerons réseau. Tu peux dire de le laisser. Le problème, c'est que si je fais une autre grille et que tu te retrouves avec la grille 1, 234-567-8910. Et c'est très bien, ce que l' on nous donne. Bon. Ce sera ma grille pour, dans ce cas, les événements passés. Et je suis très précis ici. Si vous avez l'impression d'avoir une grille, vous pouvez utiliser de nombreuses pages différentes, c'est ce qu'on appelle une grille. C'est très bien Vous pourriez tout réutiliser. Mais dans ce cas, il y aura trois points de travers. Je vais peut-être en trouver un autre qui fait deux de l'autre côté. Et regardons également l'écart entre. Vous pouvez donc jouer avec l'écart. Vous pouvez modifier la grille. Je l'ai donc sélectionné. Sortons. Je l'ai sélectionné. Je vais changer de style. En fait, j'ai sélectionné mon image. Je vais cliquer sur ma grille. Et je vais soit le modifier ici , soit dire Modifier la grille. Et je peux jouer avec un écart entre les deux. Vous pouvez donc le faire manuellement. OK. Et je peux utiliser mes flèches vers le haut et vers le bas. Voyez-vous l' espacement qui les sépare ? Changements liés. OK. Je peux aussi le faire sur la toile. OK. Pour être un peu visuel, il suffit de le faire. Ça a l'air bien Cliquez sur OK. Les grilles sont géniales si vous l' avez en tête maintenant, par exemple, qu'en est-il de Flexbox ? Et si vous n'avez aucune idée de ce qu'est Flexbox, ne vous inquiétez pas, nous y reviendrons plus tard dans le cours. Il y a une section appelée mise en page, niveau de mise en page trois, K. Et en règle générale , si vous l'avez cachée, vous dites : « Hé, qu'en est-il de Flexbox là-bas tout le temps, c'est qu'ils font un Beaucoup des mêmes emplois. Ils font 70 % des emplois. Le même. Flexbox est un peu difficile à comprendre lorsque vous êtes nouveau et le réseau est plus facile à comprendre lorsque vous le saviez. Donc, ma règle pour quiconque commence par moi-même est de faire une mise en page en grille. Et si vous ne pouvez pas créer de réseau, faites ce que vous voulez. cherchent Flexbox, mais ils ne sont pas vraiment compétitifs. Ils font à peu près les mêmes choses. Quoi qu'il en soit, je sais que tu vas te poser cette question. Maintenant. C'est tout ce que j'ai pour les grilles. Et vous remarquerez que la vidéo est plus longue parce que je vais passer en revue et styliser le reste des boîtes. Dans notre maquette, il y a de la couleur et la police doit être modifiée et ajoutez ceci chauffage par le haut ici. Tu peux sauter. Je ne vais pas faire quelque chose que nous n'avons pas encore appris, mais parfois c'est amusant de suivre et de me regarder le faire. Oui, les grilles sont terminées. Nous allons maintenant styliser ces éléments à l'intérieur de cette grille. Très bien, alors commençons par personnaliser les boîtes. Je veux cette couleur de fond. Je vais donc récupérer mon contenant. J'ai bloqué. OK, je vais y ajouter une classe. Parce que si je ne le fais pas, il y aura un retard de toute façon. Donc je vais appeler ça un div et ça fait quatre, comment s'appelle-t-il ? Évènements passés. Et je vais dire que vous avez à propos Option ou Alt, cliquez pour les fermer toutes. Retrouvez-le pour vous. Et je vais choisir la couleur de notre police comme je l'ai fait plus tôt. Maintenant, pour ce qui est de cette frappe, j'aimerais me souvenir que cela s'appelle frapper. Eh bien, j'ai atteint quatre points. Désolée, il en touche un. Je ne veux pas que ça en touche un. Pourquoi ? Parce que c'est ma cible la plus importante et j'aimerais que Google et les autres moteurs de recherche disparaissent. C'est le plus important, pas ça. OK. C'est ce que je préfère. J'ai décidé que c'était mon top deux, unique, c'est bien. Ce sont mes trois points forts. Ensuite, l'élément le plus important. Et puis, en appuyant sur celui-ci, je vais l'utiliser ici. Je vais dire KG. Vous êtes 4.4 par défaut, c'est plus petit, ce qui me convient un peu de toute façon. Et je vais y ajouter une classe parce qu'elle le fera de toute façon. Laisse-moi passer à quatre. Je vais dire toi, mon ami, typographie, blanc. Je voudrais ajouter un peu de rembourrage. Nous allons donc passer à Espacement et faire glisser la souris vers l'extérieur pour obtenir un rembourrage ou une marge. Cela ne va pas avoir d' importance dans ce cas. Il est Margin. Je vais probablement le faire des deux côtés. Je vais maintenir la touche Option enfoncée sur un Mac, touche Alt sur un PC pour obtenir les deux côtés au cas où l'échantillon arriverait. Laissez-moi penser à quelque chose qui va arriver. Bref. J'ai donc mon échantillon en l'air. Je veux un peu de rembourrage sur le site en cas de briques sur deux lignes. Bien, maintenant je veux l' appliquer à tous. Donc je vais vous dire, mon ami, que je vais avoir une classe de div dans ce diblock. Évènements passés. Celle-là. Non, pas l' image. Je veux le diblock. OK. Je vais suivre les événements passés en direct. Et il en va de même pour les chauffages. Je dois dire que vous êtes un festival à succès. Je frappe à fond. Je pourrais le laisser comme si c'était le cas. Et est-ce qu'il semble que si je fais du chauffage, est-ce que nous pouvons dire frapper, nous pouvons dire que c'est frapper, frapper quatre, même si nous avons dit que le fait d'être H1 toujours la valeur par défaut par rapport à celui qui frappe, le une grande taille de police persiste. Donc je vais dire que vous êtes vraiment un rouage, H4 disant avec vous, je vais ajouter celui-ci appelé blague. Quatre. Suivant. D'accord, voilà mon style. Maintenant, je veux ajouter le chauffage, d'accord, c'est là. Maintenant, nous n'allons pas utiliser la grille car elle couvre des colonnes et le plus possible. Mais c'est juste parce que cela va demander beaucoup de travail lorsque nous pouvons simplement vider un H, frapper juste au-dessus de celui-ci. Alors fermez tout ça. Voilà mon réseau. Je vais fermer ça pour frapper et voir si nous pouvons sortir en frappant au bon endroit. OK. Je regarde un peu mon navigateur là-bas, il n'est pas au bon endroit. Je vais juste le faire glisser ici. Et celui-ci va l'être, il doit vraiment me donner la même chose que ceux-ci. En fait, je n'ai pas eu besoin de le glisser et je le supprime. Je vais le saisir parce que c'est la bonne frappe, la bonne classe est déjà appliquée. Copie. Et je vais dire qu'il suffit d'aller ici, ce qui n'est pas bien, puis d'essayer de le faire traîner , ce qui est faux. Laisse-moi juste utiliser ça. Nous entrons dans ma section, mais elle atteint trois. Maintenant, l'astuce ici aussi est que je veux sembler aussi, cela peut ajouter un peu de rembourrage et je pourrais faire en appuyant sur trois classes et en disant simplement, accord, passons à cocher la ligne, la topographie, le texte aligner le centre. Le problème, c'est de savoir quel sera le problème auquel vous pensez. Tu peux y penser ? C'est exact. Ce type utilise la même classe. Je devais donc être un peu plus précis. Qu'est-ce que je pouvais faire ? Tu as raison, classe combinée. Donc, en appuyant sur trois et plus, je vais y ajouter un point central. Parce que je voulais m' asseoir et prendre du rembourrage ou de la marge. Donc je ne veux pas l' appeler centre de ticks. Donc, en fait, je vais juste appeler celui-ci. L'événement passé frappe plus l'événement passé et il sera centré. Et je vais utiliser l' espacement et je vais utiliser le haut et le bas. Je vais probablement juste utiliser le fond. Ça va bien se passer. J'ai des marges géantes en haut parce que je voulais juste avancer la page. Je vais donc donner la section de mon prochain événement et lui dire, d'où vient-il réellement ? Ils viennent de ceci vient de la section. Non. Où est mon rembourrage géant, c'est la marge adjointe. OK, donc je vais poser ça. Qu'est-ce que j'ai fait par le passé ? Jetons un coup d'œil. J'essaie de comprendre ce que c'est. Je clique dessus. Il est 30. Est-ce là ? Elle est là. Donc je vais dire section événements passés, vous avez également 30 ans. Laisse le résultat net allumé jusqu'à ce que je fasse une photo plus tard. Mais cela fonctionne pour moi pour le moment. Rien d'autre ? Je pense que c'est ça. Vous modifiez le texte. Évènements passés. Bon travail, Dan, belle façon de faire. Q2. Alors stylez le vôtre. Faites-moi savoir dans les commentaires si vous rencontrez des problèmes, mais pour l'instant, restons-en là. Jolies grilles de travail. Les grilles sont géniales, super pratiques. Il y aura des limites aux grilles que vous finirez par trouver. Et nous les corrigerons avec quelque chose appelé Flexbox, qui fonctionnera un peu plus tard. Très bien, à partir de maintenant. 22. Ce qui est un design réactif dans le Webflow: Bonjour à tous. Dans cette vidéo, nous allons parler de la conception Web réactive. Nous parlerons de ce que c'est et manière dont Webflow y fait face. Alors d'abord, c'est quoi ? Il s' agit essentiellement du moment où un site Web répond à la taille du navigateur ou à la taille de l'appareil. Je suis sur grand écran ici quand j'enregistre. Mais disons que je regarde mon iPad. Je réduis ça. OK. Voyez-vous qu'il change en fonction de la taille ? Donc, si je l'ouvre sur un écran qui est peut-être un ordinateur portable plus petit, pouvez-vous voir que Dribble a décidé de le faire pour un grand écran, accord, et ils ont décidé de le réduire à trois pour un écran moyen. Et nous allons passer à quelque chose comme peut-être une tablette de portrait. Je consulte ce site Web, dribble.com sur un, sur une tablette. Ça va le réduire à seulement deux assiettes. Ils ajustent donc la disposition en fonction de l'appareil sur lequel elle se trouve. Conception Web réactive. C'est la mise en page, les polices, les images. Il y a toutes sortes de choses que vous pouvez régler. Ils ont un petit coup d'œil, passez au mobile. Vous pouvez voir que cela se résume à une colonne. Regarde encore une pomme. Donc, sur un écran moyen, d'accord, c'est sur la gauche et le MacBook Air sur la droite. Et ensuite, si on le regarde de plus près, ils en modifient la structure. Ensuite, ici, vous pouvez voir un grand saut. Découvrez la modification des polices pour MacBook Air. Et il en va de même pour le logo de l' association ici. Tout se présente un peu différemment selon les différentes options. Alors, comment s'y applique-t-il ? Workflow s' y attaque donc en utilisant un ordinateur de bureau. Tout d'abord, vous concevez sur un ordinateur de bureau, puis vous concevez pour ces autres styles. Donc, ce qui se passe, c'est que vous concevez sur le bureau , puis vous vous adaptez à ces différents éléments. C'est ta tablette. C'est un téléphone paysage et c'est un téléphone portrait. Vous pouvez également le regarder dans l'option d' aperçu, d'accord. Assurez-vous que tout fonctionne correctement. Donc, sur le bureau, vous pouvez voir à quoi il va ressembler et comment il se décompose assez mal entre eux à cause du rembourrage sur lequel nous avons collé. Nous allons donc ajuster cela dans les prochaines vidéos. Si vous voulez une taille spécifique, vous pouvez la faire glisser et vous pouvez voir 360, vous pouvez la saisir ici, quelle que soit la taille que vous souhaitez regarder. Vous travaillez peut-être sur un appareil que votre appareil, j'ai un Google Pixel. Je peux taper n'importe quelle largeur, afin de pouvoir la prévisualiser sur mon écran ici ou simplement faire glisser et voir comment elle se décompose. Et maintenant, c'est plutôt mal pour commencer. Si vous vous posez la question suivante : pourquoi puis-je concevoir ou puis-je concevoir d'abord le mobile ? Vous ne pouvez pas le faire dans Webflow, le flux de travail est d'abord un bureau, le design et puis le modifier pour les autres. Y a-t-il un moyen de le changer ? Non. Pas pour le moment en tout cas, je doute qu'ils en aient l'intention. Ils se basent sur la conception d'ordinateurs de bureau, puis se tournent vers ces mobiles. Il est donc préférable de concevoir d'abord un ordinateur de bureau, y intégrer tout ce dont vous avez besoin, puis de travailler sur le mobile par la suite. Il s'agit donc d'un design réactif répond à la taille de l'appareil. Allons-y et commençons à travailler là-dessus dans Webflow dans la vidéo suivante. 23. Comment rendre le flux Web réactif: Bonjour à tous, il est temps de rendre Webflow réactif. Regardez ce titre, regardez ce rembourrage sur le côté ici comme, par exemple, c' est ma vue de bureau. Ça a l'air bien. Mais quand je passe à, disons, à la tablette, attendons le point de rupture. Voyez-vous que cela a changé ? Le rembourrage est devenu plus petit. Jetons un coup d'œil au rembourrage, rembourrage massif sur la tablette, plus petit et à la taille de police. Regardons à nouveau. Passons à un autre point critique, K2, notre prochaine plus petite taille. Allons chercher ça. La police est plus grande, plus petite. OK, donc c'est la réactivité. Nous changeons les choses en fonction la taille de l'appareil, passons au mobile et regardons ce qui se passe. La police s'agrandit, pas question. Et nous le centrons. Nous allons le faire également avec les images, que ces images peuvent suivre sur différentes lignes. Nous jouerons également ici lors de ce prochain événement. Finalement, une perspective mobile. suffit de s'en débarrasser car c'était un bel élément de design qui fonctionnait sur des tailles plus grandes, mais mobile, nous nous en sommes débarrassés. Très bien, conception Web réactive dans Webflow. Allons-y, d'accord ? Tout d'abord, voyons dans quelle mesure notre réactivité est bonne. Ce n'est ni bon, ni mauvais, ni réactivité pour le moment. Donc, comme cela fonctionne et Webflow l'est, ce n'est tout simplement pas juste. Vous allez donc commencer ici. N'ajustez pas les données de votre téléphone et ne le préparez pas ici. Parce qu'il y a ce qu' on appelle le flux des décaissements. Ce qui se passe, c'est qu'on appelle des points de rupture. Ils sont appelés points d'arrêt en tant que bureau, pouvez-vous le voir dit base. Je ne peux pas le pointer du doigt, mais vous pouvez voir juste sous mon curseur que c'est le point d'arrêt de base. Il y en a pour cette taille. On dit tablette, mais ce n'est pas vraiment pour une tablette, c'est juste pour une taille d'écran qui s'affiche à 991 et moins. Et puis vous pouvez voir toutes les tailles ici pour différents téléphones ou appareils ou tout ce qui se trouve entre les deux. Donc, ce qui se passe avec ce flux , c' est que si vous faites quelque chose sur un ordinateur de bureau , il traverse tout cela, ce nous savons parce que nous avons ce rembourrage, ce qui est le plus étrange. Nous l'avons ajouté, ainsi que le bureau, il était logique d'avoir cette énorme marge ici, mais cela n'a aucun sens. De toute évidence, sur mobile, cela ne convient même pas. Nous ne passons donc pas au mobile fixe. Nous devons corriger ces quatre points de rupture. Donc, nous allons y aller parce que je ne veux pas vous montrer que si je change, nous allons simplement le faire. Appuyer sur des tiques fera quelque chose de simple. Donc j'ai ce truc qui s'appelle frapper un, pas mal aimé Little Span Tag. Prends-en une grande partie. Nous en touchons donc un. Sur ordinateur de bureau. Il convient. Il y a beaucoup de place. C'est très beau ici. Ça devient un peu serré. Donc, ce que je vais faire, c'est juste pour une très petite taille de police, changer Vertigo en classe qui lui est appliquée. Pratique. OK, et je vais dire que je vais fermer tout ça. typographie va me manquer . Typographie, vous voyez ces choses que Amber, cela signifie que le style vient d'ailleurs. Cela vient en fait de. Si je clique dessus, il est écrit : « Hé, je trouve mes valeurs ailleurs. Je crois que c'est grâce à cette petite icône. Je le reçois de mon tag H1, mais je le reçois de, voyez que la petite icône correspond à cette icône là-haut. OK, donc c'est de là qu'il tire son style. C'est pourquoi il n'est pas bleu. De retour ici, sur le bureau. Ce n'est pas bleu. Ce n'était pas un bleu. Bref. D'où est-ce que ça commence ? Il l'obtient à partir du tag H1, un tag générique. Ignorez cela. Cela deviendra plus clair plus tard. Il s'agit donc de l'obtenir depuis le bureau. Je vais donc passer outre à cela et dire un peu plus petit. J'utilise mes touches fléchées, en cliquant simplement vers le bas jusqu'à ce que je sois satisfait de cette taille de tablette. Maintenant, regardons le téléphone à l'horizontale ou il ne tient même pas en deux lignes, tant pis. Je vais donc dire ici, survolons-le. Cela va avoir plus de sens parce que c'est Amber. Il tire son style de la rubrique 1 de la tablette. Laisse-toi partir. C'est de là qu'il tire son origine. Je vais donc dire que tu vas être encore plus petit. J'utilise ma flèche vers le bas. Et puis, qui visite mon site Web horizontalement sur un téléphone ? Ne pensez pas qu'il existe des tailles d' écran qui ne correspondent qu'à la taille. Et regardons le portrait mobile. OK, et je vais le faire, je vais vraiment l' agrandir. Tu es du genre « Quoi » ? Plus gros ? faut que je l'agrandisse. OK. Parce que je dois me contenter de deux lignes. Je vais donc m'approprier ces deux lignes et les rendre belles et grandes. Faisons donc un petit aperçu. Passons à notre petit mode de prévisualisation et jetons un coup d'œil. Donc ordinateur de bureau, d'accord, c'est la taille d'une tablette. Il saute, réduit et regarde ça. Je vais juste le traîner parce que c'est amusant et plus intéressant de voir les points d'arrêt. Donc, qu'est-ce que c'est que c'est un traîne-le plus grand. Il va revenir sur le bureau, faites-le glisser pour accéder à la tablette. Et finalement, je vais arriver à, c'est pourquoi ils les appellent points de rupture, ils vont arriver ici et aller vite. OK. Donc ça va, vous pouvez le voir changer ici. Quand je fais glisser les diapositives, tu peux voir que le changement devient encore plus petit, mais que c'est essayer d'occuper, il y a une grande marge de manœuvre. Tu vois que ça n'a pas l' air vraiment bien, ils sont juste de plus en plus petits. Mais il occupe cette plage de pixels entre ces deux limites différentes. Il y a donc toutes sortes d'écrans. C'est pourquoi la conception Web réactive est délicate si vous voulez être parfait au pixel près, ce n'est pas possible. Ok, donc ça descend ici et finalement ça explose sur les téléphones portables et un énorme, ok, et tous ces appareils mobiles différents, c'est assez intéressant aussi de regarder les différents appareils qui vous donnent quelques suggestions. Regarde ça. Désactivons cette option d'aperçu si vous faites glisser ce curseur ici. Alors passe à l'une de ces autres. N'importe qui ? Et faites glisser cette diapositive différemment de la précédente. Nous n'en sommes qu'à la conception et voyons maintenant ce qui se passe. Tu peux le voir en bas ? Il y a tout ça comme une montre, je vais le faire glisser. Tu gardes un œil là-bas. Tu peux le voir ? Il vous montrera tous ces différents points d'arrêt et les atteindra un peu en un clin d'œil. Donc le Kindle Fire. Donc, si vous développez quelque chose spécialement pour le Kindle Fire, c'est parti. OK, passons à une taille plus grande que la Surface Pro. Chez Microsoft. Vous pouvez descendre vers ces différents sites et vous pouvez aller encore plus petit. Passons au téléphone, par exemple. Jetons un coup d'œil aux différents éléments qui se trouvent ici. Vous pouvez voir, vous pouvez planifier votre téléphone ou vos clients trouveront que c'est probablement plus important, juste pour s' assurer qu'il convient à la personne qui va le vérifier. OK, alors jetons un petit coup d'œil. Ce que nous avons obtenu, c'est le mien, pixel trois, je vais le pixel quatre. Tu t'en souviens ? C'est ancien de toute façon ? Alors, tu y vas. C'est ce à quoi ça ressemble sur mon téléphone. OK. Ça sur les plus gros iPhones, les gros maximes, et vous vous retrouvez à aimer la NES. Je ne croyais pas que j'étais du genre « Pas question que j' aie une NES ou du moins qu' un ami en ait une ». ai cherché sur Google et pourtant , il faisait 256 pixels. Et c'est la résolution qui était très bonne. Bonne console de jeu. Quoi qu'il en soit, j'étais plutôt un gars du genre Sega Master System. Bref. C'est donc notre réactivité. Nous l'avons fait pour le titre. Vous pouvez le faire pour tout type de rembourrage, de couleur, de taille. Donc c'est en quelque sorte ça. Je vais parcourir et personnaliser mon site. Je ne vais pas toucher la grille en bas avant la prochaine vidéo. Donc, si vous voulez juste passer à cela, pour le reste, je vais juste passer en revue et résoudre certains problèmes et la navigation semble correcte, mais je vais ajuster cela parce que vous ne l' avez peut-être pas le luxe ou le vôtre peuvent être légèrement problématiques. Je vais travailler sur le rembourrage. Faisons tout cela. Prends-toi ça si tu veux. Très bien, n'oubliez pas que vous ne le stylez pas ici, dans espoir de donner du style aux choses le long de la chaîne parce que regardez ça. Si je passe en revue et que je corrige ce rembourrage, j'y vais, d'accord , sur la mise en page, je veux l'espacement et je vais l'ajuster ici. Celui-ci, je veux le conteneur ou la section. Et je vais retirer le rembourrage ici, directement comme ça. Si je passe à la suivante, je reviens à la plus grande. C'est de retour au plus grand, de retour au plus grand. Meilleur. Sinon, je dois le changer à chaque fois. Alors que si je l'annule, passez à la version tablette et réduisez-la beaucoup plus petite. Peux-tu voir les flux vers celui-ci et celui-là. Il est donc préférable de commencer gros, réduire au fur et à mesure, même si vous voulez vraiment personnaliser le mobile, assurez-vous de le parcourir systématiquement. Je vais annuler cela parce que nous allons travailler sur celui-ci. Il y a donc un look. Oui, ça a l'air bien. Je vais le réduire. Mon rembourrage ici n'a évidemment plus de sens. Je ne peux pas vraiment le faire glisser très bien vers la droite. Comme ramer le bateau ou simplement le taper en Dan. Allez-y. C'est suffisant. 149. OK. Alors, que dois-je changer d'autre sur celui-ci ? En fait, faisons ce rembourrage, puis nous allons l'examiner, tout le reste. Donc tu vas bien. J'aimerais que vous fassiez ce que nous avons du rembourrage sur celui-ci, on suppose que 50 vont droit au bord. Qu'avons-nous de ce côté ? Cela en a obtenu 35. Je vais en faire 35 de l'autre côté. Donc, en fait, je vais passer à mon paragraphe ici et dire qu'en fait, il faut le clarifier. Qui se souvient comment le nettoyer ? Il y a l' option de réinitialisation ou l'option. Cliquez sur un Mac, cliquez sur Alt sur un PC. Je vais m'en débarrasser. En fait, non, je ne le suis pas. C'est un bon point. J'étais comme si j'allais l' effacer en revenant à zéro. En fait, je suis en train de le nettoyer. Et ça va dire que je vais regarder en arrière, quel que soit le paragraphe dit. Désolé, paragraphe, quelles que soient les tablettes la tablette disait 149. Alors ce type comprend. Je ne peux donc pas simplement le supprimer ou le réinitialiser. En fait, je dois dire que tu es à zéro. Parce que ce que je vais faire à partir de maintenant c'est que cette section va prendre le contrôle. Pourquoi faisons-nous cela pour vous embrouiller, principalement pour que je ne sache pas, je ne sais pas ce que je fais. Donc ça fait 35 de chaque côté. Ça fait du bien ici, ok, pareil, il fait 35 de chaque côté. Et ce paragraphe est réglé sur le bouton zéro ici. C'est probablement trop large. Donc 35, nous allons maintenir ma touche Option enfoncée sur un Mac. Touche 0 sur un PC, donnez-la assez proche. Selon le sommet, il y en a beaucoup trop. Donc, je vais passer à un appareil mobile, je vais le faire descendre, quelque chose comme ça. Ou c'est encore trop proche. N'ayez pas peur non plus de parcourir et de vérifier les différentes tailles. N'oubliez pas de le faire glisser vers le haut, de le réduire légèrement. Nintendo NES. Juste pour voir ce que ça va faire. Je pense que le rembourrage est probablement encore trop petit sur cet appareil mobile. On y va. Il n'est pas nécessaire que ce soit égal. J'ai fait un égal, mais regardons , alors jetons un petit coup d'œil. Toi, toi, toi, toi. Une chose que je pourrais faire pour cela est y aller et d'être centré. Et je vais en fait jeter un coup d'œil ici. Je ne veux pas que ça soit fritté, probablement pas juste ici. Je vais t'aider à te recentrer. Regardons un peu plus grand. Mais en fait, quand on est dans cette vision, c'est un peu différent, non ? Si vous êtes en mode aperçu, vous pouvez en fait faire glisser le pointeur au-delà des points d'arrêt. Écoutez, je peux l' agrandir et passer à téléphone, une tablette, un ordinateur de bureau. D'accord, quand vous n'êtes pas en mode aperçu, vous et le designer ne pouvez travailler que dans le cadre de can you see I can't get any bigger. Je peux dépasser ce point d'arrêt. Je ne sais pas pourquoi. OK. Alors jetons un coup d'œil. Oui, j'aime ça. Et nous allons devoir faire quelque chose avec l' arrière-plan et l'assombrir parce que ce fond rouge et vert ne marchera pas. Il se peut que je doive abandonner complètement cette lecture parce que ça a l'air cool ici. Mais sur cet appareil, c'est oui. Douleur. Que suis-je en train de faire ? Voyons voir si nous pouvons y remédier. Je vais, je vais provoquer une boîte de vers ici. Je vais y aller, réglons ça même si je ne l'avais pas prévu. OK, donc l'image d' arrière-plan ici, je pourrais la parcourir et le membre du document a obtenu deux arrière-plans. Donc, sur celui-ci, que ça va changer juste dans celui-ci ? C'est une bonne question. Je ne connais même pas la transparence fixée à 0,24. Jetons-y donc un coup d'œil. Allons-y ici. Faisons en sorte que ce soit plus sombre ici. n'affectera que le mobile qu'il devrait faire. On y va. Alors jette un coup d'œil. Donc image de fond sur cette section, image de fond du héros. Est-ce que tout est arrivé pour le trajet ? Tu y vas. Contexte. Il est toujours à 42. Sur ce coup-là. Il est de 0,7 à 72 %. Cela a fonctionné. Je le savais depuis le début. OK, donc il fait plus sombre sur le mobile. D'accord, j'ai d'autres choses à faire. Regardons donc l'image. Des images, de belles images, très bien sur celui-ci, c'est juste un peu bizarre que ça ne passe pas complètement. J'ai un héros de l'image. Et ce que je pourrais faire, c'est que nous allons sauter un peu sur le pistolet et dire en termes de taille, nous l'avons réglée pour qu'elle soit nous n'avons pas choisi une taille, nous l'avons juste traînée, n' avons-nous pas simplement réussi, d'accord, Ce que nous allons faire, c'est dire que tu dois avoir une largeur de 100, et nous utiliserons le pourcentage. 100 % fera des propriétés Unités et incréments plus tard et examinera toutes les propriétés différentes parce qu'il est chargé. Mais allons-y et disons-le. Ces autres versions ont une largeur spécifique, accord, mais dans cette dernière, elle passe à 100 %. Joli. Et ce que cela signifie, c'est regarder dans différentes tailles, d'accord, si je passe en mode Aperçu, regarde ça, ce sera un bon test. Ça devient assez gros. Mais lorsqu'il passe au portrait, il revient à une taille précise. Joli. Très bien, prévisualisez. Ce que S, ce que je veux faire. C'est très loin. ai tellement aimé cet endroit. Est-ce que je me plais ici ? On est comme ça là-bas. C'est bon Qu'est-ce qui lui donne son rembourrage ? C'est aussi un jeu amusant à jouer comme d'où ça vient ? Donc, une fois que c'est sélectionné, je vais ouvrir mon espace et il en tire une partie de celui-ci et probablement un peu de l'image. Et vous pouvez voir si je passe au-dessus, si vous voyez un petit truc en damier pour qu'il puisse l' obtenir à partir de là. Et d'où vient-il ? Si je clique dessus depuis la version de bureau du bouton Hero sur mobile, je vais annuler cela. Et je vais le mettre à zéro. Et c'est probablement très bien en fait. Suffisamment bien Tout ce bordel. Regarde ce bordel torride. Alors jette un coup d'œil. Très bien. Oui. Tu sais, c'est bon ici. Comment résoudre ce problème ? Eh bien, je vais jouer avec la taille et nous allons jouer avec, Regardons le sponsor de la section. OK. Disons que tout ce qui s'y trouve est aligné au centre, mais uniquement sur tablette. OK. Donc, vous pouvez voir que j'utilise l'alignement et la topographie. C'est un modèle pesé. Vous remarquerez que nous utilisons le centre de topographie plutôt que n'importe quelle taille et les centres d' espacement le feront plus tard lorsque nous examinerons la grille et la grille flexible. Mais souvent, vous pouvez vous en tirer en centrant simplement le texte d'une balise div entière ou, dans notre cas, de cette section, et elle suivra. Et avons-nous une image, donc nous avons quelque chose autour de cela, n'est-ce pas ? Nous avons un wrapper appelé image sponsor. Et ce que je veux faire, c'est probablement le bureau de rembourrage. Je peux donc trouver ici qu'il passe au centre et je veux ajouter un peu de rembourrage autour de lui. Je vais donc dire qui se souvient de ce que vous maintenez enfoncé pour que tous les côtés soient rembourrés. Parce que je vais maintenir touche Shift enfoncée et je vais dire remplissage et marge. Vous pourriez donc toutes les faire. Passez sur tablette. Il y a un peu plus de rembourrage autour. L'autre point, c'est que tout est en quelque sorte mis de côté. Pourquoi ? Parce que ma section a un peu de rembourrage et qu'elle était appropriée sur le bureau, mais pas si appropriée ici. Donc je vais dire : «  Va-t'en, zéro. Il y aura toujours un petit saut entre les différentes tailles. Jetons un coup d'œil en fait, passons à l'aperçu. Ok, donc les ordinateurs de bureau, les ordinateurs de bureau où ça se résume à ça, vont devenir plus petits. OK, c'est un peu réactif. Ensuite, vous optez pour une taille un peu plus grande pour trois. Si tu es entré dans celui-ci, tu descends plus petit. Et comment se décompose-t-il ? En fait, je suis d'accord avec la façon dont c'est à partir de maintenant. Je ne vais rien changer d'autre. Nous pourrons nous familiariser avec Flexbox plus tard, mais en fait, cela fonctionne plutôt bien, étant donné qu'il y a un peu de rembourrage autour des images. Et ils semblent juste tomber en panne ou ce que l'on appelle membre de bloc en ligne. Ils s'alignent donc. S'il n'y a pas assez de place, ils se décomposent sur la ligne suivante, un peu comme le fait la topographie. D'accord, je pensais que ça allait être beaucoup plus difficile que ça ne l'était. Allons-y avec ça. Qu'est-ce que nous avons d'autre sur Desktop ? Alors, qu'est-ce qui donne de l'espace à cela ? Découvrons donc ce qui motive tout cela. Qu'est-ce que c'est comme ça u, euh, jetons un coup d'œil. Alors, est-ce juste tout ce qui se trouve dans cette section ? Elle est là. Quel est leur vieux rembourrage dessus ? Donc sur celui-ci, je vais juste le raccourcir beaucoup ou me traverser, ce qui doit probablement aussi être réduit sur cette taille d'appareil. Ça a l'air bien Celui-ci, il hérite de tout ce qui vient de la dernière, est suffisant. Ça l'est. Parce que je n'aime pas ton appareil mobile en mode portrait ou paysage. Je passe un peu à la tablette, c'est lourd. Regardez ça, assurez-vous que ce n'est pas trop mal, puis passez au mobile. C'est vraiment important. Tu ne devrais pas faire ça, d' accord, celui-ci, ce que je pourrais faire, c'est en fait ce petit choix de design que je vais faire ici. Il ne fonctionne pas vraiment sur mobile, doit disparaître ou devenir très petit. Débarrassons-nous de cela. Donc, une fois cette section sélectionnée, je me rappelle que c'est sous les frontières qu'elle est là. Il y a donc une bordure sur le côté gauche. Si je clique sur 50, ça ira à zéro, sur mobile. Alors, prévisualisons-le. Sur ordinateur de bureau. Il y est. Sur tablette, elle est là, mais quand elle devient de plus en plus petite, elle disparaît. OK. Tu vois ce que tu fais ici. Et frayez-vous un chemin à travers tous les éléments. En commençant par le haut, vous pouvez vous frayer un chemin. Ne sautez pas les téléphones portables paysagés. Et si on déplace cette dernière, je vais passer à la section suivante, je dirais que tout cela sera beaucoup plus petit et que je maintiens la touche Shift enfoncée. Faites-les tous glisser. Assez bien pour que tout ce que nous avons, nous ferons des grilles dans la prochaine. Mais je suis content de la façon dont ça se passe. Parce que vous faites quelque chose par vous-même, vous aurez probablement faites quelque chose par vous-même, quelques autres éléments qui ne fonctionnent peut-être pas ou qui ne se passent pas exactement comme miens parce que nous utilisons des tailles différentes et des images différentes et des longueurs de texte différentes s'il y a quelque chose qui demande des commentaires. Mais sachez aussi qu'il nous reste une partie du parcours que nous finirons par terminer. L'autre chose que vous pourriez faire est la taille de votre logo. Als fonctionne bien sur ces différents appareils. Sur ce point, vous pouvez décider que vous voulez qu'il soit plus petit et que ce texte soit plus petit, d' accord, à vous de le faire rentrer. Et peut-être que le rembourrage devient un peu plus petit. Marque : est-ce de là qu'il tire son rembourrage ? D'où cela nous tire-t-il du rembourrage ? L'image ? Oui, il y avait juste des piqûres là-bas. Excellent travail sur les rendements et voyez ce que vous pouvez faire. Vous pouvez donc le comprendre alors, mais en commençant par ici et en descendant , d'accord, voilà comment rendre Webflow réactif. 24. Grilles réactives dans le flux Web: Bonjour tout le monde. Nous allons concevoir cette grille de manière réactive ici sur le bureau. C'est trois par trois. Il devient plus petit à la taille de la tablette. Et en fait, j'ai juste choisi un modèle trois par trois parce qu'ils ont l'air bien. Ensuite, je suis deux par deux sur le paysage, mobiles, puis je passe au mobile et je regarde ce qui se passe. Elle est là. Tellement plus grand. Et j'y suis allée, j'ai poussé tout le bord et je suis restée à une colonne de haut. Laissez-moi vous montrer comment procéder maintenant dans Webflow. OK, rendons notre réseau réactif. Le moment n'est ni réactif ni aperçu. Vous passez simplement à la tablette et vous écrasez dedans et vous finissez par être poussé sur le côté pour réparer. C'est assez simple quand ils ont démarré le bureau. Ok, ça a l'air bien. Nous allons regarder la tablette et elle est probablement de bonne taille. Je vais donc en rester là. Et sur le paysage mobile, d'accord, ça devient trop serré, donc je vais le diviser en différentes colonnes. Donc, ce que nous faisons, c'est cliquer sur la grille. Donc, si je clique à l'intérieur, une fois, il y a ma grille et ma mise en page, je vais modifier ma grille ou simplement cliquer sur l' option dans le coin. Et ce que nous allons dire, c'est qu'ici, sur cette vue, je ne veux pas qu'il y ait trois colonnes. 123, je vais juste dire supprimez-en un. Et cela ne supprime pas le contenu réel des colonnes, les colonnes disponibles dans lesquelles les éléments doivent être placés, c'est logique. Il a donc fini par pousser vers le bas jusqu'à la suivante, créant une ligne automatique. OK, je voulais juste pousser vers le bas d'une autre rangée. C'est dû à une tablette. Allons jusqu'ici. Le problème avec ma mise en page, c' est qu'elle ne semble pas très belle à deux par un homme. C'est un choix de conception qui, la prochaine fois que je concevrai quelque chose, je pourrai décider que cette première est peut-être préférable avoir quatre colonnes pour commencer, parce qu'ensuite elle se décompose bien, pour les créer décisions vous-même. Parfois, vous devez vivre avec des mises en page étranges avec réactivité. Et vous remarquerez aussi que si vous changez de point d'arrêt, ce que je fais tout le temps, le truc des colonnes flippe comme vous aimeriez quoi ? Je ne l'ai jamais vu là-bas auparavant, mais ça ne lui plaît tout simplement pas. OK. Alors éteins ça. OK. Et si j' y retourne, tout ira bien. Mais si tu essaies de le changer pendant que tu es ici, ça flippe un peu. Mais éteignez-le, revenez. Et c'est très bien. Sur celui-ci, ici, sur mon portable. Et je vais juste les empiler les uns sur les autres. Donc, ce que je vais faire, c'est me débarrasser de toutes les colonnes. Vous devez avoir une colonne, une colonne, puis elle remplira autant de lignes que nécessaire. Les codes ont un coup d'œil. Passons à l'aperçu. Dépensons-le pour qu'il soit parfait sur mobile. Finalement, j'arrive à un point d'arrêt et je passe à ma mise en page laide , puis je reviens à trois. Et puis les trois grands. Je veux dire, j'aime que c'est agréable et facile. Rangeons-le. Et juste en jouant avec un peu d'espacement sur un mobile en particulier. Et il y a de grandes lacunes ici. Est-ce que je veux des centimètres dessus ? Vous pourriez penser que sur mobile, c'est agréable de courir parfois jusqu'aux limites. Donc je vais dire mobile, je vais changer, changer cet espacement. Dans ce cas, cela concerne les lignes ou les colonnes. La ligne a une hauteur de 60 Omo, mais commençons par ici. Faisons en sorte que nous ne nous contentions pas d'arrêter. J'ai bien aimé l'espacement ici. Ici. Trop gros. OK, donc ce que je vais faire, c'est dire sur le paysage mobile, je vais dire que la grille, et je vais dire la hauteur des lignes. Et je clique dessus et je vais appuyer de haut en bas, la tête vers le bas, maintenir la touche Shift et la maintenir enfoncée. Il sautera dans de petites boîtes. Et je vais en faire 30, peut-être 20. Et je vais probablement devoir faire le Gap pour ça comme 20 pour les colonnes, sinon ça a l'air bizarre. Est-ce que je veux du rembourrage à l'extérieur ? Je pense que oui. Donc je vais t'y aller parce que ça pousse à bout, ça ne convient pas à cette taille d'appareil. Je vais donc dire qu'il faut examiner l'espacement et procéder des deux côtés. Et imaginez, maintenant je sélectionne ma grille, sur laquelle elle fonctionnera, ou je pourrais créer ma section. Les deux fonctionneront. Faisons celui-ci et faisons-le entrer. Maintenez l'option enfoncée, faites-la glisser dans le bon sens. Et 30 ans, ce sera probablement bien parce que ça ira avec tout le reste. Au contraire, cela ne correspond pas à 30. Là-bas. Jetez un coup d'œil. Pourquoi une stabilité plus grande que ces 30. Tu sais pourquoi tu dis : « Hé, ce truc, je n'arrive pas à m'arranger pour que ça ressemble à l'intérieur. C'est parce qu'il y a 20 Dan. Dan est un idiot. Cela fait 20 des deux côtés, 20,20. C'est bon. Allons passer au mobile. C'est pourquoi nous l'avons fait là-haut. Et pas seulement en main, car en fait, ça a l'air bien ici. Non, je veux aller jusqu'au bout, donc je veux me débarrasser de ces 20 points. Donc 0,0. Je suis un homme heureux, on y va. Notre réseau est aménagé. Si réactif que ça. C'est lui donner un avant-goût. Petit. Gênant. Trouvez mieux. Eh bien, en fait, disons que c'est le mieux. Très bien, c'est-à-dire la réactivité du réseau dans Webflow. 25. Projet de cours 03 - Projet de cours sur la grille et le site Web de la réponse Projet de cours 03 - Site Web de la grille et du site Web de la réponse: Bonjour, C'est l'heure du projet de classe. OK, projet de classe numéro trois, je veux que vous ajoutiez votre grille et que vous rendiez le site réactif. OK, alors voyons ce que nous devons faire. Donc, sur le bureau, la seule différence par rapport à la précédente est que nous avons ajouté cette grille en bas. Il veut que tu l'ajoutes. Ensuite, je veux que vous travailliez sur tous les points critiques et que vous décidiez, que vous preniez des décisions de conception. Tailles de police, rembourrage, k, comme nous l'avons fait dans les deux dernières vidéos. Je veux les voir tous maintenant être téléchargés pour des captures d'écran des quatre points d'arrêt différents. Le problème, c'est qu'on ne peut pas les voir tous les quatre. Je pense que plus tôt dans le cours que j'ai dit, vous pouvez aller ici et nous pouvons dire qu'il a réellement montré cela à 80 % ou prendre une capture d'écran de tout. Cela ne semble pas fonctionner sur tablette. Vous pourriez faire fonctionner le vôtre. Je ne peux pas le forcer à 100 %. Donc, ce que je t'ai demandé de faire c'est de prendre tout ce que tu peux voir, l'emmener jusqu'ici. Le minimum est donc la navigation et le tableau des héros. Si vous pouvez trouver des moyens de tout faire, en réduisant le navigateur, c'est un peu fantaisiste. S'il te plaît, Sinon, il suffit de prendre toutes les mesures nécessaires pour prendre des captures d'écran de tout ce que vous pouvez voir. Pour y jeter un coup d'œil, téléchargez-le dans les devoirs commentaires des projets en fonction de l'endroit où vous regardez ce film et partagez-le également sur les réseaux sociaux. J'adorerais voir ce que tu fais si tu ne peux pas supporter les quatre par quatre, d'accord. Je suis d'accord pour que tu y ailles et que tu dises : « En fait, Dan, ajoutez-en un quatrième pour qu'il se décompose bien sur ces autres appareils. Fais-le, d'accord, c'est le projet de classe numéro trois. Allez-y, profitez-en. Je vous verrai dans la prochaine vidéo. 26. Animation de survol de bouton de flux Web à l'aide d'Element Trigger: Bonjour à tous, C'est l' heure de l'animation, donc nous allons le faire avec ces boutons. Je n'arrive pas à croire que je sois arrivé aussi loin dans la classe Webflow. Eh bien, tu ne peux pas y croire. Vous vous demandez : « Pourquoi avons-nous animé des choses ? C'est pourquoi je me suis inscrit à Workflow parce que ça a l'air cool quand les choses bougent. Nous allons examiner cela. Je vais commencer par deux boutons. On va lui demander de faire l'élastique. Celui-ci est plutôt cool. Pop, prêt pour toutes les gelées, que ce soit pour voler à bord ou pour les faire tomber du ciel. Floppy Doodles et mon jigger préféré, GIGO. Très bien, apprenons à les faire dans Webflow. OK, faisons de cette magie. Vous remarquerez peut-être que si vous revenez à cette vidéo, j' ai déjà cette animation. D'où est-ce que ça vient ? N'oubliez pas que sur un bouton, vous pouvez entrer ici et modifier le survol. OK, donc où est ma couleur de fond est le vert pour commencer, mais je peux passer à la souris et changer pour ce type de rouge rose. OK, donc c'est cette animation. Ce n'est pas ce que je veux désactiver, cliquer à nouveau. Je vais ajouter quelque chose de plus. Qu'est-ce que je vais faire ? Je vais faire l'une de ces choses dès le début. Alors allons-y. ce panneau est là, sélectionnez l' élément que vous souhaitez. Maintenant, appuyez sur notre bouton. Cliquez sur les interactions, d'accord, et nous allons nous occuper de ce déclencheur d'élément, pas de déclencheurs de page, de déclencheurs d' éléments. Nous allons dire head plus. Donc, quand cet élément, OK, le bouton Donc est survolé. Oui, quand, quand je le survole, d'accord ? Ça va faire quelque chose, pas juste changer de couleur. Non, on va le faire bouger ou quoi que ce soit d'autre. Sur Hover, effectuez cette action. OK, donc nous allons faire certains des modèles prédéfinis parce qu'ils sont sympas faciles et qu'ils sont plutôt bien chronométrés. Donc on va faire quelque chose, Faisons du pop. Ils sont donc un peu cambriolés. Cela va probablement changer. Ils semblent y ajouter ou supprimer des choses. Il y a donc un peu comme si des mouvements apparaissaient et disparaissaient. Et puis il y a des choses qui retiennent leur attention, leur emphase, nous allons opter pour la pop K. Alors faisons de la pop, allons en avant-première, vous êtes prêt. Et c'est du travail et essayez-le. Alors prévisualisons et regardons. Quand je le survole, il change de couleur et fait un petit effet pop. Belle facilité, flux de travail bien fait, cool. Vous pouvez tous les jouer. Ainsi, avec ses interactions sélectionnées, vous verrez tout cela. Et au lieu de pop, on peut le faire. Maintenant, avant de passer à autre chose avec un grand pouvoir d'interaction, nous devons assumer de grandes responsabilités. Je veux trouver votre site Web. Google était amusant, mais je ne veux pas aller sur votre site Web et avoir 1 000 choses qui me tourmentent dessus. OK. Même si c'est très cool à regarder, c'est bien, d'accord, mais c'est comme apprendre. N'oubliez pas que lorsque vous avez appris le reflet de l'objectif dans Photoshop K et que tout avait un reflet d'objectif, soyez prudent. Je vous préviens, vous savez, tout ce qui se trouve sur votre page doit être animé, même si cela me fait clairement plaisir. Ce que vous devez remarquer lorsque vous ajoutez ces éléments se déclenche. Cet élément déclenche donc quelque chose. Ok, est-ce qu'il y a un petit éclair ? Génial, parce que tout Harry Potter, juste une indication visuelle que si je clique ici et que je clique dessus, disons qu'il y a une interaction sur celui-ci, et je ne peux la voir que lors de la prévisualisation. Il apparaît également ici. Juste un signal visuel indiquant que cet éclair, tel que nous attendons de partir, si vous avez besoin de l'ajuster , sélectionnez-le. Et juste ici, vous pouvez cliquer dessus et il s'ouvrira. Fermez-le. Tu y vas. Faisons-en quelques unes, un peu plus. Débarrassons-nous de Jiggle. Aussi beau soit-il. Faisons une autre chose terrible. C'est comme les portes Bond des diapositives PowerPoint. C'est comme notre transition, mais c'est cool. Bref. Nous avons donc éteint notre vol stationnaire. Donc, en ce moment, nous faisons quelque chose et ne faisons rien quand nous sommes vraiment, donc nous pouvons dire que lorsque cela plane , nous pouvons faire autre chose. Je vais le laisser clignoter. Donnez-lui un aperçu. Vous pouvez le prévisualiser ici, mais il vaut mieux l'utiliser indirectement, je suppose. Oh, ça flippe. Où est ta journée. C'est étrange. Je n'ai jamais fait cette combinaison auparavant. C'est parce que je suppose que c'est parce qu'il bouge. Il essaie donc de clignoter. Si je le suis, il ne le fera pas. Ça fera l'équilibre. Regarde si je peux garder le doigt dessus. Je l'ai trouvé parce qu'il se déplace vers le haut, donc il fait basculer la souris. Est-ce que cela a du sens ? Il rebondit vers le haut puis active le déploiement , donc il clignote et ça flippe. Ne faisons donc pas d'équilibre. Il y a juste du fondu. Essayez-le. Faites chauffer le feu et sortez. OK. Ah, je vais laisser ça ici parce que les problèmes que nous rencontrons, ces problèmes sont en vol stationnaire , probablement pas un bon problème. Faisons en sorte qu'il apparaisse à nouveau. Et quand il plane , il clignote un peu. Et voyons si cela résout le problème. Clignote. Hé, vas-y. Il y a des combinaisons qui ne lui plaisent tout simplement pas. OK, donc c'est bon. N'utilisez pas le clignotement, je pense que c'est la règle et je vous laisserai jouer avec eux. D'autres choses que tu peux faire, tu peux en ajouter plus d'une, d'accord, alors débarrassons-nous du survol juste parce que ça me tue et je peux te montrer comment t'en débarrasser. OK ? Alors, comment s'en débarrasser ? Action. Sélectionnez une action. Cela doit être une option nonne, mais revenons à la sélection d'une action. Ok, alors débarrasse-toi de ça. Prévisualisons-le. Il va faire éclater le pop et autre chose, donc vous pouvez en ajouter un de plus. Fermons donc ça. Donc, il y a en quelque sorte deux parties, non ? Vous êtes à ce type de niveau de déclenchement d'éléments et vous y entrez pour travailler sur notre souris, puis vous en revenez. Je peux ajouter qu' un deuxième est un petit plus. Je peux dire que j'en veux un autre. Ça indique que notre souris survole. Je veux faire deux choses. Je voulais qu'il fasse ça et je vais le faire ou j' essaie de trouver faire ou j' essaie une combinaison qui ne va pas tout enregistrer. Nous l'avons à faire éclater. Pouvons-nous le faire tourner ? J'aurais dû tester ça avant d'enregistrer cette vidéo. À quoi sert-il ? Ça n'éclate pas et ça le fait, n'est-ce pas ? Essayons-y. C'est simple de faire les deux. Il y a une touche et une touche d'originalité. Tu es prêt ? Ça l'est. Ça éclate. C'est facile C'est une autre question difficile. Il entre et sort pendant qu'il tourne. Glorieux Dan. OK, tu peux les activer. Une vidéo qui est terrible, mais nous allons la laisser là parce que parfois, parfois, c'est agréable de voir les problèmes ainsi que choses qui fonctionnent complètement au cas où vous tomberiez dans le terrier du lapin de Chine, ajoutez-en beaucoup trop. D'accord, en fait, que devons-nous faire ? Finissons-en. Oui, parcourez-les toutes vous-même. En fait, nous ne les passerons pas en revue. Jiggle. Jiggle. Est-ce que quelqu'un peut dire le mot jugar sans que la chanson de Louis pour la gorge entre et la tête ? Quoi qu'il en soit, si vous n'avez pas entendu parler de Google it, tant mieux. Bref. Nous allons donc le laisser sur Jiggle parce que c'est que je veux commencer avec cette intro. Tout autre point important à retenir est que nous planons, nous en avons parlé plus tôt. survol ne fonctionne pas sur une tablette ou téléphone car vous pouvez surfer avec votre doigt, vous pouvez le faire avec une souris. Donc, ce que nous allons faire dans la prochaine vidéo, nous allons faire quelque chose d'un peu plus, comme l' animation de chargement de page. Ce serait cool. Alors allons-y maintenant. 27. Fade sur le défilement dans le flux Web: Bonjour à tous. On va le faire, regarder ça. Je vais faire défiler l'écran vers le bas et encore une fois, un fondu, beaucoup de ligand dans lequel ils s'estompent pendant que vous faites défiler vers le haut. Nous allons le faire dans son ensemble , puis je vous montrerai comment les compenser également. Encore une fois. Jetons un coup d'œil. Magique. Laissez-moi vous montrer comment faire de la magie. Très bien, créons d'autres éclairs. Ce sont donc ces éléments que je veux intégrer. Je ne veux donc pas faire ça à l'image. Je veux le faire à ce qui entoure l'image. Dans ce cas, j' ai un div auquel est appliquée une classe appelée div class of int. Alors donnez-vous des cours si vous ne l'avez pas, accord, c'est un bon moyen de les réutiliser plus tard. Passons donc aux interactions. Maintenant que je l' ai sélectionné, nous utilisons toujours cet élément déclencheurs. Nous disons cet élément ici. J'aimerais faire quelque chose de différent de ce qu' il était avant de faire le survol de la souris. Nous allons utiliser celui-ci appelé scroll into view. Lorsque cette chose est affichée, rien à voir avec la souris. OK, c'est dû au défilement de page et il suffit de le suivre. Vous dites simplement, d'accord, quand vous les faites défiler pour voir ce que vous voulez faire une fois que vous les voyez. Peux-tu faire l'action de, je vais juste faire en sorte que le mien s' estompe, entre et disparaisse. Je veux que ça disparaisse. Passons à l'aperçu et faisons un test. Maintenant, lorsque vous testez, si je teste ici, chargez tout de suite. Ok, donc ce que tu dois faire c'est un peu monter au sommet. Vous avez donc un peu de défilement à faire. Maintenant, prévisualisez-le et nous sommes prêts pour le défilement. Le défilement ne se charge pas une seule fois, il ne se réinitialise pas à chaque fois. Allons-y encore. Du haut. Ça y est. Voilà mon parchemin de paie. Pouvons-nous les utiliser ? OK, regardons autre chose parce que dès une grande partie de l' animation se produit, elle commence à se produire comme si c'était la seconde. On dirait que tout à l'heure, il est en train de disparaître et qu'il peut être terminé au moment où la personne y arrive. Donc, ce qui est plutôt sympa, c'est que mon wrapper div est sélectionné, je veux utiliser ce décalage et cela est dû à la fenêtre d'affichage. La fenêtre d'affichage est comme tout ce que la personne peut voir de haut en bas. Et je veux le compenser pour qu'il se charge soit un pourcentage après le, après le début de la page. Donc ça va probablement charger, disons que c'est mon 100%. Il va charger 17 % à peu près là. Ça va commencer à activer K. Si je le mets à l'état « J'aime  », c'est difficile à expliquer. Jusqu'à 40 %. Il ne commencera à s'activer qu'une fois qu'il aura atteint son 100%, il attendra qu'il atteigne 40% tout en haut de la page, puis il s'activera. Ça va être un peu bizarre. C'est un peu trop. Alors essayons-y. Vous allez être activé après 20 heures, nous vous l'avons envoyé. N'oubliez pas de commencer par le haut. Donnez-lui un aperçu. Faites défiler la page. Et pouvez-vous voir que cela a commencé assez haut sur la page. Éteignez-le et rallumez-le. Tu y vas. Alors, que pouvez-vous faire d'autre ? Vous pouvez effectuer un délai au lieu d'un décalage. Offset va attendre la partie physique de la quantité de défilement effectuée. Vous pouvez le remettre à zéro et dire que je veux retarder, ou nous aimerions que cela retarde pendant ces mini-millisecondes, 000 millisecondes c'est 1 s, d'accord ? Ce qui prend beaucoup trop de temps. Ok, donc la moitié c'est 500 millisecondes. Vas-y, allons-y. Alors, prévisualisons. Nous allons faire une chose similaire. Regarde ça. Si je fais défiler l'écran vers le bas, il faudra juste une demi-seconde avant qu'il ne se charge, vous de décider de ce que vous voulez faire. Il est probablement préférable d'utiliser le décalage, car il faudra attendre un physique, comme sa hauteur. Alors que le chronomètre, regardez ça, je peux en quelque sorte tromper le chronomètre si je vais ici et que j'attends, et je vais juste ne pas le laisser faire. OK, allons-y encore une fois lentement avec ma souris. Allez. Tu le vois chargé ? Je l'ai vu atteindre un sommet puis j'ai commencé. C'est un petit compte à rebours, peu importe ce qui vous convient. n'y a pas vraiment de bien ou de mal. Maintenant, allons-y un peu plus loin car je voulais les traiter tous. Donc, ce que nous pouvons faire, c'est passer en revue et modifier chacun d'entre eux, faire exactement le même processus. Ce sera pratique parce que tu deviendrais bon dans ce domaine. Mais disons que j'ai ceci, j'ai cette interaction. En bas, il est écrit, hé, les paramètres du déclencheur. C'est vrai, j'aimerais qu' il ne s'agisse pas de l'élément. Maintenant, c'est à ce moment-là que je fais ce truc physique que je voulais faire à tout ce qui porte le même nom de classe. Souvenez-vous que nous l'avions fait, nous avons ces événements de classe div et vous pouvez voir qu'ils sont appliqués à celui-ci et à celui-ci. Donc nous disons classe, bien, bien, tous, s'il vous plaît, regardez, ils ont tous des éclairs. Et c'est un aperçu. On y va. Faites donc défiler l'écran vers le haut. Allons-y. Et vous pouvez faire plusieurs éléments. Pourriez-vous le faire à toute la section ? Vous pourriez probablement facilement faire la section alors. Vous auriez pu faire exactement la même chose à la section et cela se ferait beaucoup plus facilement que ce que je viens de faire. Bref. Ce qui est bien, c'est qu'il est réutilisable si je l'utilisais , alors qu'il divise les éléments. Si j'ai autre chose, passons en revue. Dans une division. Dois-je l'envelopper dans un div ? Je pense que je peux juste lui donner le nom de classe des éléments d'analyse div. Cela va fonctionner. Je devrais m'entraîner à faire ces choses avant de vous les montrer. Essayons-le au sommet, cela ne marchera probablement pas s'il fonctionne totalement. Ayez confiance en vous, alors cette chose est réutilisable tant que vous utilisez le même nom de classe. La prochaine chose que je veux faire, c'est de compenser le moment présent, non ? Ils apparaissent tous en même temps. J'aimerais que l'un passe en fondu et le suivant, le suivant. Vous ne pouvez donc pas le faire avec ce type de structure que nous avons maintenant, où nous allons appliquer la même chose à toutes les classes parce qu'elles s'appliquaient juste un peu. Et je dirais appliqué à nouveau à l'élément. Et ça va me répéter. Je vais dire, d'accord, donc nous avons compensé le fondu de 20 %. Nous pouvons le faire, mais de façon répétitive. Donc, ce suivant, ce prochain div passe div les événements passés. Nous allons dire, ajoutons un élément déclencheur de l. Faites défiler la page vers la vue. Quelle action aimerions-nous envisager ? Je veux qu'il disparaisse et que je veux le compenser de 20 %. En fait, nous pourrions avoir besoin de celui-ci pour passer à 30 %. Il y en a un peu plus haut avant qu'il ne commence réellement à s'activer. C'est donc une sorte de chronométrage. Nous pourrions également le faire avec le délai réel, comme nous l'avons fait auparavant. À vous de décider, essayons-y. Vous disposez d'un déclencheur qui vous permet de faire défiler la page L'action s'estompe. Je veux qu'il disparaisse après une adaptation de Woody. Je ne sais pas combien de temps ça va durer ? Ça ne va probablement pas très bien se passer. Les pourcentages sont probablement un peu élevés. Commencez par le haut. Donnez-lui un aperçu. Allons-y. Hé, j'avais raison. Et je pense que j'ai essayé de retarder moi aussi. Essayons de retarder parce que c'était un peu nerveux. Donc, votre décalage de page, nous le maintiendrons à 20 %. Alors allez-y. Je vais envoyer zéro pour celui-ci. La prochaine fois, nous allons y aller et dire « restez 20 » parce que je ne veux pas que cela se produise trop tôt. Mais prenons un délai, disons, un quart de seconde, 250 millisecondes. On y va. Le suivant, c'est le même genre de choses. Remettez-le à 20 %, 20  % de réduction sur la page. Bartlett a une demi-seconde, donc 500 millisecondes. Très bien, donnons-lui l'un des meilleurs. Ah oui. Qu'est-ce que tu en penses ? S'agit-il d'une cohorte ou fera-t-il des animations personnalisées plus tard dans le cours ? Mais pour le moment et la plupart du temps, ils ont très bien fait leur travail sur ces éléments prédéfinis et ces éléments déclencheurs. Très bien, mes amis, c' est un fondu lorsque vous faites défiler une page dans Webflow. 28. Projet de cours 04 - Interactions: Bonjour à tous, projet de classe numéro quatre. Celui-ci vise à créer vos propres interactions. Vous souhaitez en créer deux, comme nous l'avons fait dans ce cours. Un pour le bouton et quelque chose qui se trouve sur le défilement de la page, par exemple, membre, c'est le bouton qui se trouve sur le curseur. Ok, tu peux faire ce que tu veux. Et le défilement des pages, dans mes cas, s'estompe, mais tu peux faire ce que tu veux. La meilleure façon de le partager avec moi est de le faire par vidéo. Donc je suis sur un Mac. Je sais que vous pouvez appuyer sur Command Shift F5 et enregistrer une section de votre écran, puis la télécharger dans les devoirs, projets ou les commentaires en fonction de l' endroit où vous la regardez. Et parfois, il est plus facile de le télécharger sur Vimeo ou YouTube abord sur Vimeo ou YouTube et de simplement publier le lien sur un PC. Je ne sais pas exactement comment vous pourriez le faire sur votre PC. Il suffit donc de rechercher sur Google comment le faire sur votre PC. Ce logiciel d'enregistrement d'écran sur Mac et PC. J'ai expliqué à Google comment procéder. Si vous ne pouvez pas, écoutez, tout le monde ne peut pas enregistrer son propre écran. Si vous ne pouvez pas, je n' accepterai que des captures d'écran. Ok, alors vois si tu peux faire la vidéo. J'adore voir ce que c'est. Pratiquez, amusez-vous, profitez-en, et je vous verrai dans la prochaine vidéo. 29. Partage avec votre design avec votre client: Bonjour à tous. Dans cette vidéo, nous allons découvrir ce que nous avons fait avec notre client. Comment faisons-nous cela ? Nous prétendons maintenant qu'il s' agit d'un travail en cours. C'est un travail en cours, mais c'est ce que nous faisons actuellement. Nous voulons partager avec le client une partie de la grande finale finale. L'annoncer au monde entier. C'est comme, Hey Jeff ou Ginny, et c'est là que je suis en train de faire. Qu'est-ce que tu en penses ? Eh bien, peut-être qu' il s'agit de le soumettre à des tests pour que les gens puissent y remédier, trouver des erreurs ou tout ce qui manque. Comment le faisons-nous ? Super facile. Avec votre site Web ouvert, accédez à Publier, et cela devrait déjà être coché et cliquez simplement sur Publier comme pour les domaines. Allons-y rapidement, puis je vais revenir en arrière et vous montrer d'autres choses. Il est donc en ligne sur Internet maintenant. C'est très excitant d'y arriver. Cliquez sur cette petite flèche ici, ou vous pouvez la copier et la coller, ou elle devrait s'ouvrir et indiquer que mes amis sont votre site Web sur Internet . Il est entièrement réalisable. Ok, on y va. Et vous pouvez le copier et le coller, envoyer à votre client et lui dire : « Hé, jetez un œil. C'est très intéressant, si vous débutez dans la conception Web diffuser vos contenus et de les diffuser en ligne, plutôt que de vous retrouver piégés dans Webflow, Photoshop , Figma ou XD où que vous soyez. Faites une étape importante. Hourra. Jetons un petit coup d'œil en arrière. Voici donc le domaine que vous allez utiliser. Considérez-le comme un domaine de mise en scène. C'est tellement bizarre. Un peu utilisé dans la conception Web , car une partie provisoire du site Web est entièrement réalisable. n'y a rien de mal à cela. C'est juste sur ce que l' on appelle un sous-domaine. Le domaine principal ici est donc le workflow point io. Cette autre idée, flux de travail des points du club de kayak vers IO, le sous-domaine du domaine principal. Quoi qu'il en soit, certaines personnes l'appellent domaine de mise en scène et c'est juste une bonne chose, nous sommes un travail en cours. Vous allez éventuellement ajouter votre propre domaine personnalisé, ce que nous ferons ensemble. Et ce sera sur un site Web. Il peut vivre sur celui-ci. Ce n'est tout simplement pas une jolie URL. C'est un peu peu peu professionnel. Mais si vous avez un site Web très peu professionnel, faites attention, utilisez ce sous-domaine. Maintenant, si vous voulez le vérifier puis le désactiver à nouveau, si vous l'avez dépublié, il sera retiré d'Internet. Le seul problème, c'est que si je vais ici et que je rafraîchis ma page, vous obtenez un gros vieux pour quatre époques les Araméens, le site Web est introuvable. OK. Donc, si je le rallume, il sera retrouvé. Donc c'est un peu comme allumer et éteindre. Et une chose que vous vous demandez peut-être ici, c'est qu'il y a certaines choses que vous voudrez peut-être activer. OK, donc je vais accéder aux paramètres de mon projet. Qui se souvient où c'était ? Nous l'avons fait au début, c'était quatre places. Nous avons examiné trois d'entre eux. Le designer, il y avait l'éditeur, ce que nous ferons plus tard. Puis les paramètres du projet et le tableau de bord. Ils étaient tous cachés. Tu t'en souviens, pars. OK, Paramètres du projet. Paramètres du projet pour le club de kayak à cerfs Maintenant, je vais vous montrer certaines choses que vous ne pouvez probablement pas encore faire si vous êtes sur le plan gratuit. Nous n'avons encore rien fait. OK ? Et si c'est le cas, je vais vous les montrer parce que vous voulez y jeter un œil, mais ils ont besoin d'une version payante de Webflow. Donc, en général, un mot de passe de site Web que les gens aiment activer quand ils sont un peu comme s'il s'agissait simplement d'un nouveau mot de passe et je ne m'inquiète pas pour ça. Avant, parce que personne ne peut deviner que comme dans un club de kayak à cerfs, il , comme dans un club de kayak à cerfs, il n' y a aucun moyen de le trouver. C'est difficile à trouver, mais vous pouvez l'activer, mais vous devez mettre à jour votre hébergement. Je vous expliquerai cela plus tard également. Si vous ne vous en souvenez pas déjà, si vous souhaitez passer à l'hébergement, vous pouvez utiliser mon lien ici à l'écran. Une autre chose que vous voudrez peut-être faire c' est que si cela doit rester là-haut pendant longtemps, c'est sous l'onglet SEO. Il y en a une ici qui s'appelle l'indexation. Si vous l'activez, cela signifie simplement que Google ne va pas l'indexer. Et ce qu'ils veulent dire par indexation, c'est simplement l'ajouter aux résultats de recherche, car il s'agit simplement d'un travail en cours qui n' est pas tout à fait terminé. Ce n'est pas le bon sous-domaine, peut s'agir de tics réservés comme un ALS. Donc, nous disons simplement qu'ils disent Google, n'entrez pas dans mon site, ne l'ajoutez pas à vos vastes résultats de recherche. Merci beaucoup. Mais encore une fois, si vous cliquez sur Enregistrer les modifications, cela indiquera que vous devez mettre à jour votre hébergement. Donc pour le moment, et ce n'est pas ce que nous voulons faire. OK, donc je vais passer du référencement au référencement. Vous voudrez peut-être activer ces éléments ou vous pourriez simplement avoir ces questions en tête. Oui, tu peux les faire. Oui, vous avez besoin d'un plan d'hébergement payant, mais pour le moment, ne vous inquiétez pas. Comme si je ne m'inquiétais pas pour ça. Voici ce que j' essaie de transmettre. peut-être comme s'il avait besoin d'un mot de passe. Tu peux tout à fait y aller. Mais il suffit de partager ce lien là-bas. Évidemment, lorsqu'il est allumé, vous pouvez en fait publier une autre astuce à partir des séances. Non pas que vous ne le fassiez jamais d'ici, mais vous pouvez modifier le site à partir d'ici. Vous pouvez le dépublier depuis les paramètres du projet du site Web. Mais je trouve que c'est plus facile de travailler comme ça. Et si vous souhaitez l' activer et le désactiver, informez simplement le client qu'il y a une journée de test et que vous allez désactiver l'URL. Très bien, c'est tout pour celui-ci. Passons à la vidéo suivante. Je t'y verrai. 30. Combien coûte le site d'hébergement de flux Web vs l'espace de travail: Bonjour à tous. Dans cette vidéo, nous allons examiner l' hébergement sur Webflow, ses avantages et ses inconvénients. Nous verrons également quelle est la différence entre un site et un plan d'espace de travail. Il saute. C'est bon. La première chose , c'est que quand flow, je parie que je suis à leur bureau en ce moment à attendre que je finisse cette vidéo pour qu'ils puissent mettre à jour la langue les prix et les fonctionnalités que vous obtenez. Donc, assurez-vous que je vais le parcourir maintenant, mais cela peut changer, la langue peut changer, mais cela vous donnera un bon aperçu général. Je suis donc sur mon tableau de bord ici. Vous verrez que c'est le site sur lequel nous travaillons. C'est ce qu'on appelle le site d'état Il y a cette autre chose qui s'appelle Démarrer un lieu de travail. C'était probablement la chose la plus à comprendre quand j'ai commencé. Alors discutons-en. Et je vais accéder à cette page ici. C'est le prix réduit de webflow.com, et c'est probablement pareil. Je ne veux pas discuter des deux options différentes ici. Il y a ce qu'on appelle des plans de site et en bas , des plans d'espace de travail. Où se situe la différence ? En bref, un plan de site est de l'hébergement, c'est ce qu'on appelle des plans de site froid et des plans d'économie. Ces choses sont les mêmes, juste des niveaux différents ici, mais il s'agit d'héberger votre site Web quelque part sur Internet où il peut vivre où les gens peuvent le visiter. Quelqu'un doit l'héberger. C'est donc ce qu'est cette malle. Le plan d'espace de travail, c'est vous en tant que designer, c'est comme si nous l' utilisions gratuitement en ce moment. Mais disons que je souhaite créer plus que cela sur des sites hébergés. J'en ai besoin de dix. Je dois exporter le code. Je dois ajouter une protection par mot de passe. C'est là que vous, en tant que designer, améliorez cela. Vous allez personnellement le mettre à jour et payer 19$ par mois, puis chaque site aura besoin d'un hébergement. Donc, si vous avez dix sites, c'est dix fois 12. Chaque site a besoin d'un hébergement, mais vous , en tant que concepteur , en tant que concepteur, pouvez essayer de vous en tirer gratuitement, mais vous devrez peut-être passer à celui-ci ici si vous souhaitez créer plus d'un site Web car il débloque de nombreuses fonctionnalités. Alors c'est ça. Vous pouvez vous en tirer avec un seul paiement. Vous pourriez avoir besoin des deux si vous voulez entrer sérieusement dans Webflow, c'est la version allégée. Examinons un peu plus en profondeur les plans de site, ce plan de commerce électronique, donc nous sommes sur ce plan de données. Le gros inconvénient, c'est que vous n'avez pas de domaine personnalisé, d'accord, tout le monde voudra Daniel scott.com, pas un trait d'union de cerf, largeur de point de club de kayak, une charge Io. OK. Donc, si vous avez besoin de le mettre à niveau, c'est tout ce que vous faites. Disons que ce site Web est votre site Web. C'est statique. Cela ne fait pas grand-chose et vous voulez juste le nom de domaine. C'est tout ce que vous avez pour récupérer le domaine de base pour obtenir le domaine personnalisé et c'est tout. Le prochain saut est un CMS. Nous allons donc créer un CMS lorsque nous créerons son propre blog. C'est quand il y aura un tas d'objets et que tu me verras. C'est comme des articles de blog ou cela peut être éléments de portfolio ou un CMS, un système de gestion de contenu. Si vous avez besoin de tout cela, vous voulez que le client puisse mettre à jour des articles ou des articles de blog. Vous allez devoir vous rendre sur celui-ci ici et il y a juste une restriction sur les éléments du CMS, accord, si vous en avez plus de 2 000, vous devez vous rendre ici. Pareil pour la bande passante. 50 Go, c'est beaucoup pour un petit site à 200, c'est beaucoup. Et puis tu commences à te lancer dans 400 concerts. Mais c'est comme les tendances, quantité d'informations que votre hôte transmet aux clients. En gros, cela dépend de la quantité d'images et de vidéos dont ils disposent réellement pour télécharger des images, des vidéos et toutes sortes d'autres choses. Et en fait, tout dépend de la quantité de trafic que vous avez. Très souvent, lorsque vous atteignez ces prix plus élevés, vous générez plus de revenus et c'est traduisible. Payez moins pour moins de trafic, payez plus pour plus de trafic. Le grand saut ici réside dans les plans du site de commerce électronique ici. CMS, sites statiques, parfait. Lorsque vous voulez commencer à accepter des paiements, d'accord, vous allez devoir passer à l'essentiel de celui-ci au début. C'est là que We've Flow commencera à vous aider avec les paiements, les paniers d'achat commandes, l'expédition et toutes ces activités amusantes qui sont incroyables, vraiment utiles sur Webflow, mais qui coûtent un peu plus cher. Ce sont donc exactement la même chose mais avec des niveaux différents. Comment un club de kayak se débrouillera probablement bien par jour parce que je veux un nom de domaine supplémentaire et qu'il ne fera probablement pas plus de 50 Go. dit que je veux commencer à vendre des trucs à partir de ce produit. Je vais devoir passer à un minimum de cela. Et encore une fois, cela s'améliore légèrement en fonction de votre niveau, nombre de produits dans votre boutique et de votre volume de ventes. Vous pouvez y jeter un œil. Ils ont un peu comme voir toutes les fonctionnalités prévues. Et vous pouvez faire défiler l'écran vers le bas et voir ce qui fonctionnera pour vous dans ce que vous pouvez faire pour vous en sortir et vous pouvez effectuer une mise à niveau si nécessaire. Très bien, ça va être ma version maigre. Je ne veux pas passer en revue toutes les fonctionnalités car elles vont changer. Je sais que c'est le cas, mais passez à la tarification, affichage ou aux fonctionnalités du plan pour l'hébergement k, qui est le site ou les plans de commerce électronique. Ensuite, jetez un œil à Workspace et voyez simplement ce qui fonctionnera pour vous. Si vous êtes nouveau, créez peut-être un compte mensuel et vous pourrez passer à annuel si vous souhaitez économiser de l'argent le long terme, en fait avant de partir. Avantages et inconvénients pour moi, les inconvénients sont que c'est un peu cher par rapport à l'hébergement. L'hébergement doit être payé, quelqu'un doit le payer quelque part. Après les jours de gratuité des géo-cités, mains en l'air. Qui se souvient de ceux où ils le finançaient à partir de publicités, je pense qu'il faut payer pour l'hébergement quelque part. Mais l'inconvénient, c'est que c'est un peu plus cher que d'autres endroits. Si vous avez déjà fait ce genre de choses auparavant, ce n'est pas scandaleux, mais cela mène à des pros et vous vous sentez à l'aise avec votre propre hôte qu'une chose. Si ce n'est pas le cas, je peux créer un domaine. Je peux configurer, configurer une base de données et configurer mon hébergeur ailleurs. Et, mais j'aime ça parce que c'est quelqu'un qui s'en occupe. Les correctifs de sécurité sont tous exécutés par quelqu'un d'autre. Pour moi, certains des plus importants sont prêts à ce que le client puisse le mettre à jour afin qu'il puisse se connecter à l'éditeur et faire mises à jour pour ajouter nos propres articles de blog, ajouter ses propres articles à la boutique, organisent leurs propres commandes. Le formulaire qui est en quelque sorte externalisé que géré par eux. C'est bon, c'est ça. Les plans du site et le commerce électronique sont hébergés Et celui-ci ici est essentiellement ou est-ce un espace de travail ? Payez-vous pour utiliser le logiciel ? J'utilise des citations aériennes parce que c'est une sorte de site Web, mais un logiciel en tant que service. On y va. Très bien. J'étais probablement en train d'énoncer une évidence, mais de toute façon, j'espère que cela m'a été utile si ce n'est pas le cas. Je suis désolée. Quoi qu'il en soit, je te verrai dans la prochaine vidéo. Nous allons commencer à rendre notre portefeuille passionnant. 31. Les meilleurs raccourcis de flux Web et astuces et astuces de vitesse: Tu es prêt ? C'est passionnant, des trucs, des astuces, des raccourcis. Maintenant que nous avons quelques compétences en matière de Webflow à votre actif, je vais partager avec vous certaines des choses qui vous aideront à accélérer votre journée. Faites également de vous un look impressionnant devant vos collègues. Reste jusqu'au bout. J'ai des œufs de Pâques spéciaux qui coulent par le vent , cachés là au bout. D'accord, le plus couramment utilisé, ou du moins pour moi, est probablement sur Mac, c'est Command Shift P. Sur un PC, c'est Control Shift P, appuyez dessus et il bascule entre les deux. Vous pouvez simplement continuer à appuyer sur ces boutons et activer et désactiver le mode aperçu, au lieu d'essayer de cliquer sur cette diffamation plus haut. OK, donc c'est Command Shift P sur Mac, contrôlez Shift P sur PC, cela permet à l'enchérisseur de passer en mode aperçu et vous pouvez, sur votre clavier, regarder votre clavier, les chiffres qui se trouvent au-dessus de l'en-tête des lettres 12345, argile. Vous pouvez en quelque sorte sauter entre les différentes vues. 123455 n'est pas celui que vous voulez. Il s'ouvre simplement en faisant 1234 ou vous pouvez même le faire à la fois en mode aperçu et dans le concepteur. Un, deux, trois, quatre, je me souviens de Command Shift P ou Control Shift P sur un PC, vous pouvez regarder le mode aperçu. Le prochain super génial est B retour dans votre designer en avant-première. Et sur votre clavier, vous avez a, S, D et Z. Ils sont tous regroupés sur un clavier anglais. Ils sont tous très pratiques. Ce sont ceux que j'utilise le plus. Si vous utilisez beaucoup les interactions, pouvez-vous voir si vous passez la souris au-dessus, c'est H. Je ne me souviens jamais du raccourci pour les interactions parce que je ne suis pas là tout le temps. Celles que M est là tout le temps. Notre ASD Z a est Ed. C'est logique. A pour Ed. Je vais toujours dans l'annonce, puis je reviens au Navigator, qui est z a z, a z. L'autre est S pour les styles. Regardez ceci si vous êtes ici et que vous êtes sur autre chose, appuyez sur S pour trouver des styles qui ont du sens. A pour ED, S pour les styles. Et quelles seraient les séances. D n'a aucun sens. Cela a du sens car il se trouve à côté des autres éléments utiles de votre clavier. Mais tu y vas. En tant que charges D, j'utilise des charges et Z pour le navigateur. N'oubliez pas qu'il y en a beaucoup d'autres. Tu dois juste planer au-dessus d'eux. Et si vous utilisez le gestionnaire de styles, vous serez probablement le seul, mais c'est G. Bon, d'accord, ASD z. Le suivant est super génial, c'est le raccourci « find everything ». Donc, je suis là et je veux ajouter quelque chose au lieu d'aller dans mon a, puis de faire défiler et de comprendre en tant que composant, peut-être que c'est sous les mises en page. Ce que vous pouvez faire est d'aller droit au but, de cliquer à l' endroit où vous voulez qu'il aille et d'appuyer sur la commande E de votre clavier. Tu peux voir ça ? quelque chose apparaît, il suffit de savoir quoi taper. Et si je veux une autre image, je commence simplement à taper image. Tu y vas. Il ajoute une image prête à l'emploi. Je voudrais donc ajouter un autre titre sous le texte de ce paragraphe. Donc, le Commandement D et moi allons juste frapper, parti. Appuyez sur Entrée. J'ai juste tapé les premières lettres appuyé sur Entrée et j'ai commencé à appuyer, si vous vous souvenez vaguement de son nom, Commande E. Oh, c'est Commande D sur Mac, contrôle E sur PC. Désolé, les gars de PC, j'ai oublié. Oui, OK, donc Command E sur un PC, puis cliquez sur Pied de page. Regarde ça. Il y a un pied de page, un pied géant en l'air. Je ne peux pas y ajouter de pied de page. Quoi qu'il en soit, tu comprends l'idée. La commande K fonctionne également. Est-ce que Control K est également disponible sur un PC. Si certains de ces raccourcis ne fonctionnent pas ou ne changent pas, vous pouvez aller voir ce petit point d'interrogation vers le bas aide Hugo et les raccourcis clavier. Et tu y trouveras la liste des taupes que je t'offre, les bonnes. Vous pouvez voir que sur un Mac, il s'agit de la commande E et de la commande K. À l'époque, il n'y avait que la commande K, mais la touche Commande d'un Mac s'ouvre. Je ne m'en souviens pas. Est-ce que cette patrouille du Michigan est autre chose ? Ils l'ont donc changé mais ils ont retiré l'ancien, ce qui est confus de toute façon. Donc c'est Control ou Command E, trouvez n'importe quoi. Maintenant, ça va mieux. Comment mieux utiliser, hé, quand vous pouvez ajouter une classe automatiquement ? Eh bien, il suffit de regarder ça. Disons que j' ai ce style ici. Je vais ajouter une classe quand nous irons ici et que nous aurons parcouru tout cela et que nous pourrons choisir parmi celles qui existent déjà ou nous pouvons les taper pour les ajouter. Regarde ça. Si je pouvais simplement utiliser mon clavier, cliquer dessus et appuyer sur Commande ou Contrôle, Retourner sur les touches de mon clavier, il a sauté ici. Je suis là Je peux taper sur le chauffage parce que j'ai assez bien nommé le mien. On y va. Passons à cette commande Return ou Control Return. Et je vais juste taper le paragraphe d'un instinct. J'ai un texto. Tu y vas. J'utilise mes flèches pour descendre. Voici ma grille de blocs de texte. On y va où ça fait cool c' est Festival et on annule le mien. Commande ou Contrôle Z. Pour revenir en arrière laissez-moi vous montrer un peu plus d' un flux combinant deux d'entre eux. Donc, en dessous de ce paragraphe, j'ai besoin d'un, disons un autre coup. Je vais donc passer à la commande E pour recharger le site. Sur quel raccourci j'ai cliqué, je ne suis pas sûr. C'est encore ça. Donc, ici, nous allons appuyer sur la commande E. Je vais taper hit, appuyer sur Return, command return pour ajouter la classe. Et je vais aller de l' un à l'autre. Vous pouvez donc ajouter des éléments et les personnaliser sans passer par tous les menus. Vous ajoutez la commande ou le contrôle E, ainsi que la commande ou le contrôle Retour. Celui-ci, ici, bouton, je vais passer à Command Return. Qu'est-ce que j'ai oublié d'autre ? Plus de styles de boutons. Je n'ai qu'un seul bouton de navigation. Vous pouvez les ajouter. Disons que je veux juste en ajouter un. Je veux ajouter un caillot et je veux ajouter une nouvelle classe ici. Donc je vais juste l'appeler bouton et je vais appeler celui-ci « retour violet ». Cela a créé une classe. Au lieu d'en sélectionner un, il s'agit du même raccourci Commande ou Contrôle Retour. Ensuite, je peux aller ici et dire qu'en fait, l'arrière-plan de celui-ci sera désormais violet. On y va. D'accord, le suivant est plutôt cool. C'est celui-ci ici. Cela s'appelle le mode X-Ray. C'est le raccourci Command Shift X ou PC. Ce sera Control Shift X. quoi sert-il ? Cela rend tout noir et blanc, ce qui n'est pas très utile. Ce qui est utile, c'est que lorsque je suis dans ce mode, je regarde quand je passe la souris dessus, que vous voyez que je ne fais rien, je suis juste en train de survoler et que cela me montre tout le rembourrage et où il se trouve venant de. Tu peux voir ça ? Pourquoi est-ce ici ? C'est parce qu' il y a un rembourrage qui est vert. Qu'est-ce qui fait baisser un peu les choses ? C'est parce qu'il y a du bleu qui est une marge, pareil. Si je clique vers le haut, je ne clique même pas sur cette section ici. Il y a du rembourrage dessus. C'est ce qui pousse tout cela à prendre de l'ampleur. Ce n'est pas une marge par rapport au titre. C'est un passage de la section héros. C'est donc un moyen très pratique de se déplacer et de partir, qu'est-ce qui en fait ? Fais-le. Très bien, c'est Command Shift X ou Control Shift X pour activer et désactiver et il suffit de vous déplacer pour voir ce qui est affecté. Génial. Si vous travaillez sur le projet de quelqu'un d'autre et que vous ne pouvez pas le faire ou sur le vôtre il y a longtemps et que vous ne vous souvenez pas de ce qui fait réellement que les choses font ce qu'elles sont censées faire. Le suivant est ici dans mes styles, qui est S pour styles. Je suis dans le panneau Styles. Et si vous maintenez la touche Option sur un Mac, touche 0 sur un PC et que vous cliquez sur l'une de ces petites flèches ou chevrons. Ils ont tous fermé et c'est une façon agréable et ordonnée de travailler, d'entrer et de sortir plutôt que de les avoir tous ouverts, même touche, Alt ou Option, et le défilement à travers eux et en essayant de savoir où ils se trouvent. L'autre avantage de cette option est que vous pouvez commencer à voir si je l' ai sélectionnée. Cela me montre que cette image, cette classe, moins que j' ai sélectionnée ici, fait des choses sur la mise en page et l'espacement, mais rien d'autre. n'y a pas de points bleus. Cela signifie que quelque chose fait réellement quelque chose dans cette classe. Et dans ce cas, c'est l'affichage configuré pour bloquer. La taille a une certaine marge. Ceux-là, cette classe ne fait rien avec la position, absolument rien, pas de points. Les couleurs ambrées ici disent simplement qu'il y a en fait une largeur maximale provenant d'un autre endroit. Et c'est pourquoi c'est Amber. Comment savoir ce qui en fait 100 % ? Vous maintenez enfoncée la touche Option sur un Mac, la touche Alt sur un PC et cliquez dessus. Utilise réellement la touche Commande ou la touche Contrôle sur un PC. Et il indique les valeurs provenant de toutes les balises d'images. Nous examinerons cette étiquette plus tard. Mais il y a des moments où jetons un coup d' œil à cette typographie de texte. n'y a rien à faire ici. Beaucoup, beaucoup de trucs de MBA. Survolons, survolons ça. Regardons la couleur, alors que la couleur provient du fait de maintenir la touche Commande sur un Mac enfoncée et la touche Ctrl sur un PC. Ça dit, bonjour, ça vient de la section intitulée Hero. C'est donc de là qu' il tire sa couleur. Je pourrais donc cliquer sur cette section ici et dire : Oui, elle est là, elle est bleue, elle est blanche. Cela affecte tout ce qui s'y trouve. Bien, la prochaine étape consiste à sélectionner des unités. Donc disons qu'en frappant ici, nous voulons y aller. En fait, oui, allons-y. Faisons la topographie. Et disons que nous ne voulons pas que ce soit des pixels. Nous allons utiliser des objectifs, d'accord, vous n'avez pas à le laisser tomber et à dire que je veux des buts ou des jantes. Je peux juste annuler ça. Je vais simplement taper, je veux que ce soit dans la RAM et appuyer sur Entrée. Vous voyez, il vient de le mettre à jour et de l'ajuster. Dans n'importe lequel de ces champs, vous pouvez saisir des mesures et dire que je veux que l'espacement soit une marge de 50, mais que je voulais être un pourcentage. Au lieu de le remplacer par des pixels, je peux simplement taper en pourcentage et cela le fera 50 %. Très bien, annulez, annulez. Les choses se compliquent et on va se débarrasser de lui. Le suivant, d'accord, le suivant est plus utile lorsque vous avez des sites plus complexes, ferai un plus tard. Mais pour mettre tout cela dans cette vidéo , cliquez sur cette image ici. Et si j'utilise mes flèches gauche et droite, vous pouvez voir qu'elle traverse tout ce qui est considéré comme un frère ou une sœur ? Tout ce qui se trouve dans cette section appelé héros ou ces gars-là, ce sont tous des amis. Ils sont tous frères et sœurs. Ils sont tous au même niveau. Vous pouvez cliquer ici et utiliser votre gauche et droite pour sélectionner les différents. Il peut être difficile de sélectionner ces éléments. Il y a beaucoup de données sur la page et peut-être qu' elle n'est pas très volumineuse. Donc, à gauche et à droite, il y a des frères et sœurs de Je peux donc utiliser ma flèche vers le haut pour sélectionner le parent. Dans ce cas, il s'agit du héros de la section. On y va. C'est donc la distinction qui s'y trouve. Parfois, vous pouvez même cliquer sur la section ci-dessous. Vous cliquez donc sur l'enfant et vous appuyez simplement sur la flèche vers le haut et cela sélectionnera tout ce qui se trouve à l'extérieur peut être très pratique lorsqu'il n'y a pas de place. Peut-être que ces boutons recouvrent l'arrière-plan. Nous ne pouvons pas le sélectionner. Nous pouvons donc simplement vous dire flèche vers le haut, sélectionner le parent qui fonctionne ici. Parce que rappelez-vous qu'il y a des balises div ici. Nous pouvons utiliser le navigateur bien sûr, mais il suffit de cliquer sur cette image, d'appuyer sur la flèche vers le haut, et nous allons sélectionner la division parent vers le bas, commencer à sélectionner les enfants. Donc je peux dire Section des événements passés, je peux aller vers le bas, la flèche vers le bas et aller plus profondément à l'intérieur de celle-ci, ce que je ne fais jamais. Mais la flèche vers le haut est vraiment bonne. En choisissant le parent, continuez. Finalement, tu as le corps jusqu'au sommet, le grand-parent, personne ne l'appelle comme Bowie. Très bien, le suivant. Ensuite, je vais cliquer sur les balises de ce paragraphe ici. Je veux changer la taille. Si je clique ici, je peux utiliser ma flèche vers le haut. Voyez-vous qu'il se déplace à travers 16, 17, 18, 19, de bas en haut et en bas ? Il suffit d'appuyer sur les touches fléchées de l'un de ces petits champs pour passer au suivant, qui correspond à la hauteur. Ok, donc vous pouvez jouer avec ces boutons de changement de vitesse en arrière. Cool Je m'en sers tout le temps. Mais je vais ajouter vous pouvez maintenir la touche Shift enfoncée et utiliser la flèche vers le haut. Vous voyez qu'il est vendu en lots et en boîte ? D'accord, et c'est vrai pour pratiquement toutes ces options. Supposons que je veuille que l' espacement au-dessus de la marge commence à un. Je peux cliquer ici et utiliser ma flèche vers le haut pour y aller individuellement, maintenir la touche Shift enfoncée pour passer en revue les gros morceaux. Tu peux le voir se déplacer vers Patria ? D'accord, comment le réinitialisez-vous ? Vous pouvez appuyer sur le bouton de réinitialisation sur la plupart d' eux ou maintenir la touche Option ou Alt enfoncée entre eux ou maintenir la touche Option ou Alt enfoncée et cliquer dessus pour rétablir la valeur par défaut. Souvenez-vous du zéro. Rappelez-vous que la valeur par défaut ne l'est pas parfois Dans ce cas, si je le réinitialise à la, si je le mets à zéro pour revenir à la valeur par défaut, pas à la valeur par défaut. La valeur par défaut est probablement 16. Maintenez l'option, cliquez dessus et elle le fera en fait, 14 est la valeur par défaut. N'oubliez donc pas qu'il est préférable de cliquer sur Option ou Alt pour le réinitialiser et le sortir de là. Ne revenez pas à ce qu'il était par défaut. Tu as compris l'idée. N'ayez pas peur de faire glisser les choses sur Alt. Maintenez donc la touche Alt enfoncée sur un PC sur un Mac et regardez ceci. Je peux en glisser un autre et regarder, j'en ai deux. Vous savez, le titre ici, maintenez la touche Alt ou Option enfoncée et faites-le simplement glisser et il le dupliquera pendant que vous faites glisser. L'autre chose utile est que vous pouvez cliquer avec le bouton droit sur des objets dans Webflow. Je peux cliquer dessus avec le bouton droit, entrer dans différentes choses. Copier, dupliquer. Je peux ajouter une classe à, renommer la classe qui se trouve ici, ajouter un déclencheur. Regardez ça ici, plutôt que de passer à cette option ici, je pourrais en faire un symbole. Je peux le déplacer de haut en bas jusqu'au parent. Je suis juste en train de les lire à haute voix maintenant. Et c'est un peu bizarre parce que dans une application Web comme celle-ci, vous pensez que le clic droit fera toutes sortes de choses comme Googly, pas l'application elle-même, mais d'une manière ou d'une autre, nous avons du flux de prendre le contrôle de la souris et parfois ça ne marche pas ici. Pouvez-vous voir que c'est ce que vous voyez normalement dans le navigateur Chrome ici pour obtenir des informations Webflow. Une autre chose que vous pouvez faire est d'utiliser certains de ces champs, en particulier ceux qui ressemblent à des champs singuliers qui ont des limpets. Vous pouvez maintenir la touche Option sur un Mac, touche Alt sur un PC et simplement les faire glisser. Pouvez-vous voir la petite flèche modifiée dans mon Option sur un Mac, Alt sur un PC, et faites simplement glisser ces éléments de haut en bas à nouveau. Il suffit de les amener visuellement où vous le souhaitez, certains d'entre eux aiment cette marge ici, vous n'avez pas à maintenir quoi que ce soit enfoncé . Il suffit de les faire glisser. Tu t'habitues à qui font quoi ? Ceux-ci ressemblent à ceux de style infographique, vous pouvez simplement les faire glisser. Mais n'importe lequel de ces champs que vous allez saisir, vous pouvez maintenir la touche Option sur un Mac enfoncée , la touche Alt sur un PC, juste pour cliquer et faire glisser, bien. En parlant de glisser ici, nous l'avons déjà examiné, mais si vous maintenez la touche Option enfoncée et que vous faites glisser la souris, vous remarquerez que même en cliquant simplement sur la touche vers le bas, vous pouvez voir cela mais que vous le surlignez. te montrer que je vais faire, les deux côtés se ressemblent. Ils ont tous les deux 98 ans. Si vous maintenez la touche Shift ou Commande enfoncée, la touche Shift. Et faites-les glisser, ils feront le haut, le bas et le soulèveront. Idéal pour les sections où vous souhaitez qu'elles aient toutes une certaine marge ou dans ce cas, un rembourrage identique. Maintenez la touche Shift enfoncée et faites glisser l'une d'entre elles. Ils viennent tous pour le trajet. Et l'option Alt est de chaque côté, en haut ou en bas. Ça gâche celui-ci. De plus, pendant que nous sommes ici, n'oubliez pas que vous pouvez épingler le Navigateur si votre écran est suffisamment grand. C'est cette option ici, ce qui signifie qu'elle ne disparaît tout simplement pas. Sinon, le navigateur est très utile et vous devez l'ouvrir à chaque fois. Restez là, s'il vous plaît. Merci Enfin et surtout, le plus excitant de tous, c'est l'œuf de Pâques contenu dans Webflow. En tant que designer, ne faites rien d'autre. En fait. Disons que je l'ai. Je suis genre, tu sais, quoi ? doit y avoir quelque chose de mieux qu'un impact. Vous ne voulez rien de mieux que de l'impact. C'est ce que vous êtes prêt à saisir IDD, QD, puis à y revenir. Et les jours heureux, regardez, bande dessinée Sans est apparue. Je te déteste, Comic Sans. Mais c'est leur haine qui est un mot fort. Désolé, amateurs de Comic Sans, amateurs de Comic Sans. Quel était encore ce raccourci, c'est IDD, QD. Tu obtiens des points supplémentaires. Si tu sais ce que c'est. Quelqu'un se souvient de quoi ça vient ? Faites-le moi savoir dans les commentaires. Si tu fais ça dans Estelle, blague pour ceux d'un certain millésime, non ? Ce sont tous les raccourcis que j'aime utiliser. Vous avez peut-être le vôtre, si vous en avez un que vous souhaitez partager, qui a menacé les commentaires. Et si tu te demandes, je n' arrive pas non plus à trouver un moyen de l' éteindre. Bienvenue. Une fois qu'il est activé pour un projet, je n'arrive pas à le désactiver. Je suis désolée pour ça. On y va. Passons à la vidéo suivante. 32. Comment modifier les styles par défaut dans Webflow: Bonjour à tous. Dans cette vidéo, nous allons voir comment modifier les paramètres par défaut des sites Web Webflow. Au lieu d'ajouter des classes à tout ce que nous allons parcourir et de dire ceci en frappant, nous allons dire « tout frapper » sur toutes les pages. J'aimerais que vous ayez une taille de police différente. Vous pouvez voir que cela changera toutes les instances de ce hit sans avoir à créer de classe. Il existe certaines balises sous-jacentes par défaut que nous pouvons utiliser. Nous pouvons aller encore plus loin et saisir le corps entier et dire que tout ce qui se trouve sur ce corps de ce site sera une nouvelle police, Comic Sans. On y va. Nous allons nous retrouver dans une position de conception très mauvaise, mais avec une très bonne compréhension du CSS. Donc, le simple fait de vouloir le design devient mauvais, mais les connaissances deviennent bonnes. Très bien, plongeons-nous dans le vif du sujet et changeons toutes les valeurs par défaut. Pour cet exemple, j'ai créé un site, un tout nouveau site ne contient rien. Si vous voulez suivre, créez simplement site vierge et un flux de travail. Et ce que j'ai fait ici pour le designer c'est que j'ai simplement ajouté un tas d'éléments différents. OK, désolé, je l' ai jeté dans un conteneur et une section avec des titres et des paragraphes, des liens, des boutons et des images juste pour que nous puissions montrer la modification des paramètres par défaut. Et ce que je vais faire pour que cela soit évident également. Et je vais coller toute la section copier et la coller. J'en ai donc deux qui vont également créer une autre page et la leur lancer. Juste pour vous montrer que lorsque vous en mettez un à jour, il est renvoyé à toutes les pages ou à tout ce qui se trouve sur ce site Web. Tu pourrais plonger. OK, tu es de retour. Eh bien, j'ai créé une nouvelle page, donc j'ai la page d'accueil et la deuxième page, donc nous allons commencer par la maison. Supposons que je souhaite personnaliser mes titres pour toutes les pages. Je sais ce que ça doit être. Donc, au lieu de créer un style et l' appliquer à chaque fois comme nous l'avons fait, nous sommes allés jusqu'ici et nous avons dit : créons un nouveau style appelé hit one. Nous n'allons pas faire ça. Ce que nous allons faire, c'est ne rien y taper. suffit de cliquer là-dedans et ces balises roses ici, accord, cette balise HTML, ces énormes balises globales, existent déjà, elles existent déjà, k ce sont des balises au niveau des blocs. Ils indiquent toutes les rubriques H1 de l'ensemble de mon document. Ce style, celui-là, cool. Et vous pouvez voir par défaut certaines de ces valeurs par défaut que nous avons vues plus tôt dans le cours. Regarde, c'est de là que ça vient. Vous dites qu'en fait, je ne veux pas de valeurs différentes de zéro. Pour moi, ça s'est égaré. Et je veux ma typographie, le héros ultime. Je veux que ma valeur par défaut soit, nous allons l'utiliser, je ne sais pas. Quel âge voyez-vous celui-ci mis à jour et celui-ci. Passons à la page deux. Tu sais ce qui va se passer ? Deuxième page. La deuxième page l'a fait également. Si vous désactivez ces balises au niveau des blocs, That's what the coal, elles seront mises à jour sur toutes les pages. Vous pouvez toujours y ajouter des classes combinées, d'accord, pour le changer. Il se peut que vous ne lui donniez pas la couleur car elle apparaîtra dans différentes couleurs sur différentes pages. Blanc sur noir, noir sur blanc. Vous pourriez juste dire que ce sera la bonne police. C'est un peu se débarrasser des marges, les conserver ou les modifier. Et vous pouvez jouer avec la taille de la police, d'accord ? On pourrait dire que ma taille par défaut pour un H1, plutôt que de la changer à chaque fois, sera de 24. Ok, c'est ce que tu as décidé dans ce cas, ça n'a absolument pas marché. Cela a créé une classe parce que cette balise globale au niveau des blocs n'était pas sélectionnée. Alors maintenant, annulez cela. Retournez là où elle était. OK, et si je clique dessus, vous remarquerez qu'il n'y est pas. Quand je fais un changement, il va créer une classe appelée hit. Ce n'est pas ce que je veux. Je vais donc annuler, cliquer dessus à nouveau, cliquer ici, cliquer sur celui-ci, puis dire que ce sera 24. Et j'espère que si j'ai changé ce type de page globale, je pourrai revenir à ma première page et ils les auront tous changés 24. Alors, comment savoir ce qu'il faut changer ? Si je clique sur celui-ci ici, encore une fois, ne tapez rien et cliquez simplement. Vous pouvez voir qu'il y a de vieux paragraphes et je pourrais décider que tous les paragraphes vont à nouveau créer une bonne ambiance, terrible. Ensuite, il y aura de l'espace après tous ces paragraphes, mais ils seront disponibles, et vous passerez du temps à travailler dessus dès le début d'un projet. Ensuite, vous pouvez ajouter des classes combinées par la suite et plus tard, si vous avez besoin d'apporter ce type de modifications, comme par défaut, revenez à ces balises roses, assurez-vous simplement qu'elles sont sélectionnées avant vous y allez et apportez des modifications. Pareil pour cette image. Vous pouvez le voir ici, il y a quelques paramètres par défaut. Si vous ne savez pas quelles sont les valeurs par défaut, nous connaissons les couleurs bleues grâce à ce bleu. Donc, souvenez-vous si je maintenais la touche Option ou Alt Option enfoncée sur un Mac, Alt sur un PC, et j' ai ce type de paramètre par défaut. Pouvez-vous voir que les éléments bleus sont les valeurs par défaut qui proviennent de Webflow ou s'agit-il simplement de la conception Web en général ? Il s'agit donc d'une disposition d'affichage. C'est le membre par défaut. Nous l'avons modifié très tôt pour qu'il soit bloqué. Vous pouvez décider, je veux juste que toutes mes images soient bloquées. Espacement. Il y a de l'espace à Haven. Tu te dis : « Hé, c'est bleu. Il dit qu'il fait quelque chose. Il est en fait mis à zéro, ce qui n'est pas levé par défaut, il est en fait mis à zéro par Webflow. Pareil ici. Des tailles dont la largeur maximale est égale 100 % de la taille réelle, afin qu'elles ne soient pas toutes étirées et pixelisées. Ce n'est pas activé par défaut, Webflow l'a fait pour nous comme une balise toutes les images, rien n'y est appliqué à toutes les autres. Et celui-ci reprend des styles venus d'ailleurs. D'où le tire-t-il ? C'est une excellente séquence, mais je n'avais pas prévu. Mais je vais quand même en parler dans cette vidéo. Donc, ce que je peux faire, c'est qui sont les membres, comment savoir ce qui leur donne ça ? Et la couleur. D'où vient le stock ? Ok, ce n'est pas du blues, ça ne vient pas de ce bloc HTML d'images réelles. Ça vient d'ailleurs. Comment l'obtenez-vous ? Maintenez l'option enfoncée, cliquez dessus. Cette commande d'option. Commande sur un Mac Contrôle sur un PC. Et ça dit, hé, ça vient du poids du corps. Qu'est-ce que celui-ci est désolé ? Nous avons stylisé ça, cette frappe, d'accord, et nous sommes passés aux anciens tags et nous sommes allés tous les titres à Homer. Ce que nous pouvons faire, c'est que nous pouvons styliser même un pas plus haut que de frapper pour pouvoir atteindre le corps. Le corps, c'est tout sur la page. Donc, ce que nous pourrions faire, c'est voir que nous avons délibérément stylé frappe et que nous avons délibérément stylé paragraphe par paragraphe. Mais quand même les autres, j'ai toujours un Aereo. Donc, ce que vous pouvez faire, c'est d'abord coiffer le corps. C'est probablement le tout premier à être stylé. Ok, donc tu cliques sur Buddy. Pareil ici. Je vois qu'il y a un corps ou des pages. Donc ce que vous pouvez dire, c'est qu' en fait, tout ça va devenir fou. Nous pouvons donc tout voir IDD, QD. Cela ne fonctionne pas lorsque vous avez cliqué dessus. Mon père, D, Q, D. Look Comic Sans. La valeur par défaut est désormais Comic Sans et Joy huge. S'il ne demande rien. S'il ne dit pas spécifiquement être quelque chose comme deux homers, ce sera Comic Sans et mes 16 par défaut. OK, alors coiffez d'abord votre corps. C'est également utile pour la couleur de fond. OK, donc je vais y aller, ma couleur de fond sera cette couleur. prix du design est décerné à la danse, au corps qui prend soin la couleur de fond et de tout ce qui s'y trouve. Ça dit : « Hé, vous tous, vous pouvez passer en revue et dire, je veux que toutes les polices soient de cette taille et de cette taille. À moins que je ne l'annule parce que le chauffage est un peu plus spécifique que le vieux copain générique. Donc, la spécificité entre en jeu et dit que je ne vais pas être Comic Sans. Je vais être pareil avec le paragraphe si on le supprime. Si je vais ici et que je dis « vraiment  », passons à l'ensemble de mes paragraphes, passons à la typographie et disons : comment puis-je l'effacer ? Parce que je peux le changer, mais je ne veux pas le changer. Je veux l' effacer. C'est exact. Maintenez la touche Option sur un Mac, touche Alt sur un PC, tout va , d'accord, je ne vais pas lui dire quoi faire. Je vais utiliser par défaut la valeur par défaut d'un micro cases maintenant Comic Sans parce que ça vient du pote, Oh mon Dieu, les listes arrivent k. Donc il y a plein de choses. style ici est assez important modifier par défaut parce que je sais que chaque fois que vous faites quelque chose comme ça, c'est un sous-jacent. Pouvez-vous voir le soulignement ? Il y a une couleur bleue un peu étrange. Vous pouvez décider maintenant que je vais être des liens. Je vais donc le supprimer. OK, essayons comment j' ai organisé ce cours. Je crois que j'étais en train de m'embêter, mais je vais dire que tous les liens maintenant j'ai une décoration de texte, topographie de, je ne veux pas qu'il soit souligné. Je veux qu'il n'en soit rien. Merci beaucoup. Et je ne veux pas être de cette couleur bleue. Je veux que ce soit juste la couleur de texte normale que j'utilise. Je ne suis même pas sûr de la couleur du texte que j'utilise. Vous pouvez y laisser le soulignement que vous sachiez qu'il s'agit d'un lien cliquable. Eh bien, peut-être que le bleu a disparu. OK, pareil pour les boutons. Cliquez dessus. Il y a un vieux lien. Donc, tous les liens sont un peu étranges car tous les liens sont très similaires à celui-ci, que devons-nous décider ? Les maillons à billes sont les mêmes. Ainsi, lorsque vous demandez le style, en particulier pour tous les liens, un bouton est un lien stylisé, cela prend le même lien et pareil lorsque vous avez affaire ce que l' on appelle un bloc de liens, il est toujours considéré comme un clic dessus ou s' agit-il d'un bloc lié ? Tous les liens sont toujours pris en compte. C'est l'un des rares à avoir une apparence polyvalente. Mais si vous vous retrouvez à coiffer la même chose encore et encore, jetez un coup d'œil à son niveau de base. Passez un peu en revue. Il y a un cours là-dessus. OK, supprimez la classe et voyez, supprimez, sélectionnez-la, cliquez dessus pour voir ce qui apparaît dans cette balise HTML ici, et peut-être que vous pouvez toutes les mettre en forme même temps sur toutes les pages. Eh bien, je ne pensais pas que cela finirait ici. Alors, l'incroyable designer, vous êtes le bienvenu. Nous avons appris quels sont ces types de balises HTML ou ce sont des sortes de balises par défaut pour la page, le style des balises au niveau du bloc d'appels, puis vous pouvez tout styliser sur l'ensemble d'un site Web en même temps. Et si vous voulez ajouter des classes par-dessus pour de petites modifications uniques, d'accord, c'est tout. Je te verrai dans la prochaine vidéo. 33. Les cours combinés vs globaux dans le Webflow: Bonjour tout le monde. Ce vieux design laid est là pour nous apprendre la différence entre les classes globales et les classes combinées dans Webflow. Plongeons dans une note rapide avant de commencer c'est relativement délicat. Il y aura certains d'entre vous dehors, ils vont hocher la tête et continuer. C'est tout à fait logique. Et certains d'entre vous vont se dire  : « Oh mon Dieu, mon cerveau a explosé. Ça va. J'ai essayé de l'introduire très tôt dans le cours afin que nous puissions le découvrir tout au long du cours. Ce n'est donc pas une surprise à la fin, mais si vous avez un peu de mal, ce n'est pas grave. Ce sont des choses délicates. Vous pouvez être un peu confus et j'espère que d'ici la fin du cours, nous y arriverons mieux et que vous pourrez peut-être revenir sur cette vidéo. Très bien, allons-y. N'explosez pas votre cerveau. Bien, pour comprendre une classe globale, nous allons ignorer uniquement pour cette vidéo, les balises HTML, comme celles par défaut. Nous allons examiner les classes combinées par rapport aux classes globales parce que cela ne fait qu'éliminer une partie de la complexité. Examinons une classe combinée car comprendre où cela se termine est un bon point de départ pour comprendre la classe globale. Je veux donc créer une classe ici appelée hit. OK, et je veux que ce titre soit une police de Mary avec un, je ne veux pas que ce soit une couleur de police rouge. Et c'est ce que je veux. Maintenant. J'ai besoin de deux d'entre eux. Il y a d'autres attaques ici. Celui-ci doit être bleu. Donc, ce que je peux faire, c'est y ajouter une classe combinée parce que j'ai changé celle d'origine. Cela va les changer tous les deux. Donc je vais suivre un cours combiné. Et ça va être réglé à froid. Remarque, appelons-le bleu. Je peux donc dire qu'avec le bleu, vous allez être bleu ou violet. Tu comprends et c'est bleu. C'est une excellente utilisation d'une classe combinée. D'accord, il est construit sur l' original et vous y ajoutez un petit plus. La prochaine étape est de savoir où il va tomber en panne. Je veux ajouter que la classe de combo n' a rien de mal à la troisième classe de combo, mais disons que c'est quelque chose que vous voulez utiliser un peu plus que la marge de frappe gauche. Et c'est un raccourci pour « marge gauche ». Et je vais faire sortir un x, qui est vraiment très gros. Au lieu de dire 64 pixels au cas où je le changerais, je vais juste l'appeler Excel, bon, une sorte de taille générique. Je viens de l'inventer. J'appuie sur Entrée sur mon clavier et je vais dire que je veux une marge de 64 pixels, une bonne taille Excel. J'ai donc cette petite combinaison. Maintenant, mais plus tard dans le cours ou le prêteur sur votre site Web, vous vous dites : « D'accord, j'ai besoin, prenons une image ou est-ce qu'il a raté l'image ? Edom est là ? Il n'est pas dans mon contenant. Il va entrer dans mon contenant. Et je dois lui faire subir exactement le même match. Donc je vais aller à droite, je vais l'utiliser. Même chose à L. Il n'y a pas mon e-mail. Ce qui se passe dans Webflow, et la façon dont ils structurent ces classes combinées, c'est qu'en fait, vous ne pouvez pas envoyer d'e-mail Excel de manière globale. Il est rattaché à ce type de structure ici. Jetons un coup d' œil à ce truc ici. C'est ce qu'on appelle le Stone Manager, ce qui vous montre que nous ne pouvons laisser qu'une marge de ML ou de ML très grande. Vous passez la souris au-dessus. Ça dit six pixels égaux seulement après le bleu, accord, et seulement après avoir touché, ils sont tous attachés. C'est une bonne façon de les regrouper. Sinon, vous finissez par des cours partout où ils ont du mal, c' est que si je dois frapper maintenant et que je dis, d'accord, frapper, j'aimerais être, quand je suis devenu bleu c'est ML, je ne peux pas utiliser cet espacement globalement. C'est donc là que se trouve la solution globale. Comment le faites-vous ? Ce que vous faites, c'est ajouter du diblock. Le livre a un joli côté générique. Il s'agit simplement d'un conteneur vide n'importe où sur votre document sous forme de méta. Et si vous y ajoutez une classe à la racine, vous ne la construisez pas par-dessus quoi que ce soit d'autre. C'est le néant. Nous allons cliquer dessus et nous allons vous dire ML, Excel, medium, lift, extra-large. Je vais appuyer sur Entrée non, ne cliquez pas simplement ici pour que vous rencontriez peut-être le problème que j'aurais dû mentionner plus tôt. Appuyez sur Entrée pour vous assurer qu'il y a un, j'ai dit Oui, je vais créer un sélecteur. Et je vais dire que tu fais 64 pixels, d'accord ? Parce que je l'ai fait à ce niveau, un peu comme à la racine, d'accord ? Je n'en ai plus vraiment besoin. C'est créé. Si je le supprime, c'est toujours Leah dans mon gestionnaire de style, mais tu peux voir que c'est au niveau de base ici. Maintenant, c'est un style mondial. Maintenant, je peux vous dire que mes amis sont ML Excel. Tu vas le pousser. Ce gars-là. Vous voulez être MLA d' Excel à Excel, c'est un style global. Regardons un autre bon exemple de combo et de global, et nous pouvons tous deux vivre en harmonie. Ajoutons donc un bouton. Je vais donc ajouter un bouton ici. Et disons que c'est ce que je veux changer par défaut. Je vais donc ajouter une classe appelée button. Vous remarquerez qu'il n'y a pas de vieux liens, mais qu'il n'y a pas de balises HTML pour le bouton J'aime. Les boutons ne sont donc que des liens stylisés avec du rembourrage et cliquables. OK, donc nous allons créer une balise de bouton, désolé, une classe de boutons est peut-être revenue pour la créer. Je vais dire que les angles arrondis seront vraiment grands et évidents. Il va y avoir une police de caractères. devrais probablement changer ça avec ma plaque corporelle, mais on va juste le faire pour ce type. Je vais donc dire que cela va avoir un impact. Faisons remarquer à Homer quelque chose de plus évident ? Choisissons celui-là. OK, donc mon bouton, ce sont ces deux choses. Disons que je veux un gros bouton. OK, donc je vais créer une grande classe de combo et appuyer sur Entrée sur mon clavier. Ce que je vais faire, c'est dire que vous avez un rembourrage supplémentaire en haut. Donc, maintenez l'option sur un Mac, alt sur un PC. OK, je veux être quelque chose comme ça pour les plus grands, peut-être même pour les plus grands. Et je vais changer la taille de ma police. Je vais le déplacer un peu plus haut. Ok, donc c'est une classe combinée, une bonne classe. OK, donc j'ai un bouton qui fait les choses génériques. Donc ça veut dire que je peux avoir un bouton ou est-ce que tu es un bouton ? Un bouton et cette classe de boutons. Et il a des coins arrondis, mais il y a aussi une option pour un gros bouton, que je peux activer et désactiver. Et je peux en créer une petite ou moyenne. Vous pouvez avoir un bouton carré et non un bouton carré, où la classe globale serait utile maintenant est de colorier à k. Donc je pourrais l'appeler le bouton, mais il y aura des cas où je besoin d'un bouton lumineux sur fond sombre et vice versa. Donc, le problème avec la façon dont Webflow fait la façon dont Webflow fait ces classes combinées, c'est que je devrais créer tellement de classes de combinaisons différentes, d' accord, je n'ai pas à créer un autre primaire. Disons que la couleur passe au jaune. Je créerais une classe jaune. Le problème est que je devrais également créer une petite classe jaune de boutons. Ce n'est pas une sorte de croisement. Une classe globale serait utile car je peux l'utiliser sur plus d'une chose. Créons donc un div. Chance. OK, appelons cela un arrière-plan. Donc bg est un très bon raccourci pour le contexte. Et je vais créer le primaire. Il est utile de passer à la couleur primaire, secondaire, primaire, secondaire à la troisième secondaire, plutôt que le nom de la couleur au cas où la couleur changerait, quelqu'un changerait la couleur principale d'une marque. Nous sommes coincés avec un fond rouge, tu dois innover. Rid pourrait finir par devenir un étui bleu. Donc, primary est un joli nom d'espace réservé. Et tout ce que je vais faire, c'est faire tourner tout ça vers le bas. Je vais vous expliquer le contexte. Disons que ma couleur principale sera cette couleur, comme le violet. Parfait. OK, et je vais en créer un autre. Donc je vais y aller, utilisons certains de nos raccourcis. N'oubliez pas les commandes E, div, diblock, appuyez sur return. Je pense que mon diblock est à l'intérieur de ma prise de différence. Ils l'ont fait. Ne fais pas ça. Allez, sortez. Tu vas le faire. Je vais donc laisser cela dans le cours. Débloquer en dehors des autres éléments est un raccourci. Ensuite, celui-ci s'appellera BG, et celui-ci s' appellera le secondaire. Ces couleurs, ma couleur secondaire sera mon marron. Ensuite, je pourrai supprimer ces deux-là. Je n'en ai plus besoin. Il y en a toujours dans mes styles. Ils sont là. Cela signifie ce bouton ici. Ce bouton que je pourrais choisir est le suivant. De plus, je vais taper BG et voici ma couleur principale. Mais celui-ci, ici, j'ai besoin que ce soit ma grosse clé secondaire. voyez un peu comme si ceux de haut niveau étaient très utiles parce que je peux les utiliser pour ces boutons, mais ça va ici, celui-ci, en fait, qu'est-ce qui a besoin d'un arrière-plan ? La frappe n'a pas vraiment besoin d'un arrière-plan. Mais bon, vas-y quand même. Allons-y, secondaire. Ce n'est pas vraiment bien, mais tu comprends ce que je représente pour toi. C'est quelque chose qui a besoin d'un arrière-plan. Ajoutons une section. La section ici a besoin d'un BG d' arrière-plan principal. truc de Nicole, c'est que si tu changes, ce client principal revient et dit  : « Oh, Jushi ne suffit pas. Vous voulez l'assombrir ou l'éclaircir. Pouvez-vous voir tout ce qui a été modifié par cette classe globale ? C'est vraiment bien à ce stade initial. C'est une bonne pratique d' utiliser des styles globaux pour des éléments tels que la couleur d'arrière-plan ou l'espacement. Ok, on dirait que c'est fait ici. Souvenez-vous de l'e-mail Excel et d'autres utilisations utiles, car il s'agit peut-être d'une ombre portée, d'accord, si vous utilisez des ombres tombantes encore et encore sur un document et que vous pensez que c'est bien, mais que vous réveillez le Le lendemain, c'est horrible. Vous pouvez tous les changer tant que vous venez de le faire un peu comme au niveau racine et ne pas les combiner tous. Rien de mal à cela parce que c'est logique, mais agrandissez. Mais nous avons ensuite ajouté ces programmes mondiaux auxquels nous pouvons également postuler . Est-ce que cela a du sens ? Si c'est un peu confus, ne vous inquiétez pas. Il suffit de parcourir et de commencer à ajouter vos propres classes, peut-être des classes combinées pour vous y habituer. J'espère que cela vous a été utile. Cours mondiaux. On y va. Nous le referons au fur et à mesure, mais c'est tout pour cette vidéo. Je te verrai dans la prochaine. 34. Les conventions de nommage de cours dans le Webflow: Bonjour tout le monde. Dans cette vidéo, nous allons examiner conventions de dénomination des classes dans Webflow afin que vous puissiez également disposer d'une structure qui fonctionne. Donc tu sais, il ne nomme pas tout, tout. Nous examinerons également le Beam BEM, système de convention de dénomination également, d'accord, allons-y. Tout d'abord, c'est un art et non une science. n'y a pas de tel en particulier. C'est exactement comme cela que vous devez procéder. Et s'il ne l'avait pas fait de cette façon, c'est cassé. Tu peux le nommer comme tu veux. Tu termines juste par un petit échec. Si vous n'avez pas de règles de base à suivre. Et en disant que même si vous allez vous retrouver avec des noms de classe désordonnés, cela arrive, nous le faisons tous. Et il a très bien commencé son projet. Et puis à la fin, vous avez la version finale, finale et finale de toutes ces conventions de dénomination délirantes. Mais passons en revue quelques directives générales pour que vous puissiez le faire bien. La première est celle que je vous ai déjà racontée au début du cours, j'appelle ce texte lu. Au début de ce cours, il était facile de nous aider à démarrer et de comprendre ce que nous faisons ici. Le problème avec le rouge est que le nom de la classe est rouge. Si quelqu'un passe et dit «  En fait » , ce sera maintenant du jaune ou d'une autre couleur. Vous pouvez voir que le nom de la classe est toujours rouge. Ne lui donnez donc pas de noms littéraux, donnez-lui un peu plus de noms génériques. Donc les tiques, les couleurs sont bonnes, d'accord, en termes de dénomination des couleurs, souvent les gens ne disent pas ça. Vous pouvez dire couleur 1, couleur à couleur 3 pour les différentes couleurs de texte que vous avez. Mais il est très courant d'utiliser primaire pour le principal type de couleur de votre marque. Vous aurez une couleur secondaire, sorte de couleur supplémentaire que vous pourriez utiliser. Vous pouvez avoir une couleur d'accent. Si tu as besoin d'une troisième couleur. Vous pouvez le mélanger. Il s'agit donc d'une convention de dénomination courante pour les couleurs, primaires, secondaires et de sortie. N'oubliez donc pas de ne pas l'appeler rouge, donnez-lui un nom un peu plus générique afin de pouvoir le changer plus tard. C'est donc le conseil numéro un. Le conseil numéro deux est d'être gentil avec vous-même. Ne l'appelez pas comme vous pourriez l'appeler btn, soulignez 01. C'est plutôt utile. C'est de la manière. Il sera beaucoup plus utile de l'appeler bouton. Et c'est peut-être mon appel à l'action. Un appel à l'action. Vous pouvez être CTA, il faut beaucoup de dactylographie. C'est très bruyant. Vous pouvez vous en tirer avec des noms courts, mais n'oubliez pas que quelqu'un d'autre devra peut-être travailler sur ce projet. Futur. Sur ce projet, vous pourriez vous demander : « Qu'est-ce que c'est ? Cela fonctionne ? Je sais que c'est un bouton la couleur de fond et la marge à gauche, mais ils vont faire leurs dents. Tu peux. OK. Et les gens le font mais l'écrivent de manière descriptive. Ça ne fait pas mal. Conseil numéro deux. Eh bien, conseil numéro trois, c'est 2,5 et vous n'avez pas à vous soucier de la façon dont vous le tapez. Vous pouvez utiliser des espaces ou des traits d'union. Beaucoup de personnes utiliseront le bouton soulignement et ils l'utiliseront comme bouton principal. OK, c'est bon. Vous pouvez utiliser des espaces. Vous pouvez utiliser n'importe quel étui. Vous pouvez être un bouton et un espace, un. Parce que vous ne voulez pas vous le montrer, ajoutez-y celui-ci. Regardons le CSS de celui-ci. Nous pouvons donc vérifier cette thèse en descendant jusqu' au petit point d'interrogation et en accédant à l'aperçu CSS. Vous pouvez voir tout ce que vous tapez dans Webflow, le flux de travail devient stupide. Humain. Il doit s' agir d'une classe CSS, doit pas contenir d'espaces. Vous voyez donc où il est écrit espace un par ici, en zoomant sur ici, en arrière, cela met un trait d'union. Et qu'en est-il des traits de soulignement ? Vous pouvez utiliser des traits de soulignement si vous le souhaitez. Ça n'a pas d'importance. La seule chose à faire est de ne pas commencer votre cours par un chiffre. Ça n'aime pas ça, mais vous pouvez utiliser le haut ou le bas. Vous pouvez utiliser CamelCase. Camelcase est passionnant. Bouton Primaire, d'accord. À vous de décider, peu importe ce que vous voulez, ou peut-être que vous venez du monde du développement, vous pouvez donc utiliser les styles de dénomination de vos classes à partir de cela. Conseil numéro trois, espacement. L'espacement est très courant si j'en ai besoin. Et supprimons celui-ci en classe. Si j'ai besoin que ça bouge de côté, j'ai besoin d'ajouter une marge. Je vais en faire une marge globale, d'accord, donc je vais m'assurer de ne pas m'appuyer sur un combo parce que je vais réutiliser cette marge ailleurs. Vous pouvez soit faire glisser une balise div dessus et l'y appliquer. Ou parce qu'aucun autre style ne s' applique à mon bouton, je pourrais l'appliquer à cela, mais faisons-le simplement en bloquant une marge. Il est très courant d'utiliser des choses comme très petit, correct, petit ou moyen. Bourgogne, ces tailles dans Excel, vous pouvez utiliser ce type de tailles abrégées. C'est mieux que d'utiliser 64 pixels parce que vous pourriez décider que plus tard, il faut que ce soit 63 , d' accord, et vous allez changer de nom à nouveau. Il serait donc très courant d' utiliser un médium. Une autre chose avec l'espacement est que vous les ferez souvent séparément. Donc on va faire de la marge et on va faire de la gauche. D'abord, je suis parti, je vais abréger. Et puis je vais dire qu'il faut rester moyen. Je vais appuyer sur Entrée et mon espacement sera de 24. Vous remarquerez que j'utilise beaucoup de nombres étranges, pas des nombres entiers typiques, vous pouvez utiliser 10203040. Les utilisateurs utiliseront et créeront des multiples de huit pour la conception Web. Il est basé sur une grille à huit points. Vous avez créé de nombreux frameworks de développement. Non, vous n'êtes pas obligé d'utiliser ces tailles. C'est vraiment très pratique. Cela correspond à la taille de la police. Vous remarquerez beaucoup de polices, 816-20-4302, je peux ajouter. Je vais donner là-bas. Mais vous constaterez que de nombreuses tailles sont basées sur ces multiples de huit. Ils sont facilement divisibles, ce qui est pratique, et cela vous donne également une bonne portée. Huit assez petits. 16 c'est bien, peu de taille moyenne que 24 c'est un bon saut là, là, là, un bon espacement. Vous utilisez donc des multiples de huit ou non. Tu peux devenir encore plus petit. Cela dépend totalement de vous. Vous pourriez faire ce MD à marge gauche. Je vais probablement en venir à ce petit pour ces éléments, comme les marges et le rembourrage laissés avec juste b, P, L, MD. De mon rembourrage à gauche, ils sont appliqués à quelque chose qui est un espace moyen de 24. La question pourrait être la suivante : si vous commencez un document, parcourez et créez d'abord un tas de classes globales comme celle-ci, vous pourriez, je les passe simplement en revue et je les construis selon mes besoins. Et au fur et à mesure que je poursuis le cours, pendant la conception de mon site Web, j'ai de moins en moins besoin de créer des cours. Mais vous pourriez le faire au début au centre commercial, mais vous n'utiliserez probablement jamais, je ne sais pas, un haut rembourré, très grand. Vous ne créerez que ceux dont vous avez besoin. Crédit à l'échelle mondiale Ensuite, allez dire, vous avez besoin d'un cap d'ascenseur, moyen, pour l'obtenir aussi. Rembourrage gauche moyen, style global réutilisable. La prochaine chose que je veux te montrer, c'est Beam. Vous allez tomber sur Beam parce que vous allez sur Google quelle est la convention de dénomination la mieux classée. Et ce faisceau est utilisé de manière stupide. J'en utilise une saveur et je l'ai déjà utilisée dans ce cours. Alors discutons-en parce que ça revient un peu. C'est le, le sauveur des conventions de dénomination. Le seul problème, est que cela fonctionne très bien pour les très grands sites, utiliserons un peu pour notre site plus petit ici. Et c'est aussi un peu plus utile lorsque vous codez réellement votre site Web. Nous utilisons Webflow pour coder à notre place, d'accord, donc une grande partie du faisceau de syntaxe est utile pour des choses comme où ils se trouvent ? Ils ont ces doubles traits d'union , puis ils ont des traits de soulignement. Et il existe ce type de syntaxe intéressant pour aider ceux qui consultent le code à comprendre ce que vous avez fait. Mais comme nous ne regardons pas le code ici, il est créé, mais nous ne le saisissons pas à la main, mais cela signifie qu' il est toujours utile. Qu'est-ce que Beam ? La poutre est un élément de bloc et un modificateur. OK. Où sont-ils ? Modificateur d'élément de bloc. Quels sont-ils ? Et le plus simple, la façon dont je l' explique comme une chose générique, chose spécifique, une variante de la chose. Voici un exemple. Bouton, tarification, bouton, bouton jaune de tarification. Ils deviennent de plus en plus profonds en termes de nuances. Donc, si vous faites des trucs génériques, vous diriez, OK, mes boutons ont des coins arrondis. Ils le sont, c'est une police de cette police que j'utilise une taille de celle-ci et ils ont un rembourrage autour de celle-ci. C'est ce que contiennent tous les boutons de mon site, c'est le bouton générique, mais il y a un bouton spécifique. D'accord, cela doit être plus grand parce que c'est sur la page de tarification, le bouton d'appel à l'action ou sur le bouton CTA. Il faut qu'il soit grand. Il leur faut un rembourrage plus important, mais c'est seulement, donc vous pouvez faire des choses génériques. OK, donc c'est le bouton général de blocage, le bouton spécifique, le bouton de tarification. se peut que vous en ayez une version plus petite que la version générique. Un tout petit qui continue. envoi du formulaire, d'accord, utilise toujours coins arrondis et la même police, mais il se trouve qu'il est plus petit que le modificateur. Il peut s'agir d'un bouton jaune ou d'un mode sombre. Le mode sombre se produit lorsqu'il s'agit d'un bouton sur un fond sombre. Il doit donc s'agir d'un bouton blanc avec du texte noir ou d'un bouton de mode avion. C'est ce que signifie ce faisceau. C'est une bonne règle générale à suivre. Prenons donc un exemple de faisceau, car il peut être déroutant lorsque vous l'avez entendu pour la première fois. Je vais me débarrasser de tout ce que j'ai appliqué. Déplacez la classe. Ce que j'aimerais faire, c'est faire le bouton générique. Donc je regarde mon fichier Figma, XD ou Photoshop et j'y vais, mon bouton doit ressembler à mon bouton. Ignorez les classes existantes. Si vous avez des cours que vous ne voulez pas, vous pouvez accéder à vos styles et nettoyer deux styles. Il indique tous les styles suivants. Ils n'avaient pas été utilisés de toute façon, disant que vous vouliez les nettoyer et dites Oui, s'il vous plaît, parce que je ne les ai pas utilisés. Je reviens donc à mes styles. Cliquez sur mon bouton, je vais créer un bouton d'arrêt. Je vais juste faire des trucs génériques, les blocs, le B dans le faisceau. Et dans ce cas, je dois l'être, il faut qu'il y ait de la typographie. J'utilise une chaise. Qu'est-ce que nous utilisons ? Oswald, disons. D'accord, et c'est le cas de manière générique, la taille de police, générique, la taille de police générique est petite. Disons que c'est 13. a décidé qu'il aurait des frontières arrondies. Donc je vais dire que tu as, je ne sais pas, cinq ans, pas assez grand. Et en utilisant ma flèche vers le haut, juste pour être évident, les choses sont un peu molles. Bref. Donc c'est mon générique, sois mon faisceau, mon générique au niveau des blocs. Maintenant, mon bouton spécifique que je vais copier et coller celui-ci fera partie de la page de tarification. Et c'est un peu tout ça, sauf que c'est un peu plus. C'est donc mon élément, le E et la poutre, que j'appelle spécifique à cause de ce pli unique spécifique. Tout d'abord, qu' est-ce que je veux dire ? Quel est le prix ? Cta, mon bouton d'appel à l'action. OK. C'est sur ma page de héros, quel que soit le nom que tu veux. conventions de dénomination sont donc déjà tombées du chariot. D'accord, donc c'est mon CTA et tout ce que c'est, ça va avoir une taille de police de 16, ok, ça va être plus grand. Tout sera en majuscules. Et il y aura un peu plus de rembourrage. N'oubliez pas de maintenir la touche Option ou la touche Alt enfoncée sur un PC et de faire les deux côtés. Ça va être un peu plus grand comme ça. Et de cette façon. Il peut être grand ou autre chose. Bouton un peu amer, le CTA n'est probablement pas génial. L'école comme une grande, puis la suivante, que faisons-nous ? OK. Je souhaite ajouter la couleur primaire. OK ? Dans cette couleur principale, ce sera Alt ou Option. Cliquez sur les chevrons, fermez-le. L'arrière-plan sera la couleur principale qui convient à mon design. Quand je l'utilise encore et encore, on y va. Je vais donc utiliser celui-ci le plus car c'est le plus générique. Celui-ci est utilisé une seule fois sur la page d'accueil et peut-être une fois sur la page de tarification où vous souhaitez l'utiliser et ils disent qu'il existe une version avec bouton d' envoi , d' accord, donc je vais faire la même chose, Prends un autre bouton, je vais utiliser ma douleur pour aller voir Ed. Je vais aller sur le bouton. Tu peux entrer dans le gang. Donc c'est à peu près pareil, sauf que je veux que celui-ci soit un bouton. Je veux qu'il soit grand. Je ne veux pas qu'il soit grand et qu'il soit retiré. Je vais faire en sorte que celui-ci soit petit. OK ? Et celui-ci va utiliser mes mousses. Donc, pour créer le petit, il ne suffit pas de cliquer. En fait, vous pouvez soit cliquer sur Créer soit appuyer sur Entrée sur votre clavier. Ici, la taille de la police sera inférieure à la normale. C'est bien de changer de graphique. Moins que petit. Ce sera Oswald très léger, un peu adapté à la taille du bouton. Je suis juste en train de me balader, tu as compris l'idée, non ? Plus petit, plus petit. Et peut-être que les coins arrondis doivent être ajustés car ils sont un peu grands pour ce cas d'utilisation particulier. Donc ça va faire cinq. Alors c'est ça, c'est le faisceau. Prenons un autre exemple , puis je vais vous montrer l'un des problèmes que vous avez peut-être remarqué et que j'ignore parce que j'essaie d'expliquer le faisceau. Alors faisons-en une de plus. Donc, appuyer sur le bloc sera, dans ce cas, nous allons utiliser le bloc HTML, tous les en-têtes. Nous pourrions créer des titres à un accord, mais il y a déjà celui-ci qui figure sur chacun d'eux. Nous avons examiné cela plus tôt lors de la modification de la valeur par défaut. Nous allons donc utiliser ce bouton n' a pas son bouton de maquillage. Quand il n'y a pas de balises de boutons « J'aime », les liens ne font qu'un mais que les liens font trop de choses différentes, donc nous évaluons autour d'une. Celui-ci a un titre HTML générique, une balise, super, donc c' est mon b, mon bloc. Ce que je veux faire, c'est m' assurer que j'utilise cette excellente police Vibes. OK ? Et ce sera cette taille de frappe Shift enfoncée et en utilisant simplement ma flèche vers le haut. J'ai décidé que c'est ce que j'utilisais. OK. Je ne sais peut-être pas pourquoi je le stylise. Et oui, c'est ce que je vais faire, taille et police. Et puis mes amis pourraient être ça, ça pourrait être votre faisceau. Vous venez de créer la poutre, la poutre parce que les titres sont les mêmes sur chaque page. Mais il y a cette fois plus tard dans le projet où vous vous dites  : « Oh, en fait, sur cette page de blog, j'aimerais qu'elle soit vraiment grande parce qu'ils ont beaucoup d' espace de travail pour donner il y a beaucoup d'espace négatif qu'il peut combler. Super, donc je vais y aller, d'accord, donc j'ai fait ces titres. J'ai fait mon bloc. Maintenant, plus précisément, je vais faire un élément. Et je vais dire que celui-ci est le H1, d' accord, pour mes pages de blog. Donc, mon truc précis, d'accord. ce cas d'utilisation spécifique, il s'agit en quelque sorte de le faire. Vous remarquerez qu'il n'avait pas la même structure que le bouton là où vous pouvez l'avoir parce que nous avons dû inventer notre premier B. Alors qu'en cliquant sur le bouton, il y a déjà toutes les balises HTML, mais nous en sommes maintenant à la deuxième partie sur mon blog. La seule chose que je vais changer, c'est que la taille est vraiment grande. Parce que j'ai changé de taille. Il va falloir que je joue avec mes marges. OK, supposons que nous travaillions sur la page de publication de mon blog parce qu'il y a de gros descendants ici, il va falloir le sortir. Donc mon élément est comme ça, super, non ? Mais ensuite, sur certains articles de blog, je vais avoir une image en arrière-plan. Et certaines images sont claires, ce qui nécessite des coches sombres lorsque tout ira bien. Mais il y en a un autre que je vais copier et coller. Il y a cet autre article de blog qui a un fond très sombre. Donc, ce que je vais faire c'est mon M pour mon modificateur, tu comprends bien l'idée ? Ce sera donc ma vision en mode sombre. OK, mode Doc, appuyez sur Entrée et je dirais que le seul changement dans celui-ci sera un peu blanc cassé. Donc, vous pouvez toujours le voir et ça a l'air plutôt joli dans ce contexte. C'est donc notre faisceau sous une forme simplifiée. Cela vous donne au moins une structure sur la façon de procéder, comme quantité de détails à entrer dans une variante générique spécifique. Cela vous a-t-il été utile ? Je sais que l'être m'embrouillait. Va le comprendre. Donc oui, vous allez le rencontrer. Les gens se demandaient : « Pourquoi utilises-tu une veine ? » Tu te demanderais quel genre de lui ? En morceaux ? Et quand je dis m bits, il y a une syntaxe similaire à celle qui s'applique ici, et elle devient de plus en plus utile au fur et à mesure que le projet prend de l'ampleur. Et notre projet n'est pas très vaste pour le moment . Donc, c'est Beam. Permettez-moi de parler du problème que nous avons pu rencontrer ou nous avons, c'est de savoir où des faisceaux, compréhensibles puis des classes combinées et globales, apparaissent compréhensibles puis des classes combinées et globales, apparaissent parce qu'il aimait bien celle-ci ici. Nous avons ceci, désolé, le premier ici, le B de la poutre, le bloc. Encore une fois, nous avons un bouton et qu'avons-nous fait à ce truc, nous avons choisi une police parce qu'elle est bleue, d'une taille parfaite, et nous avons choisi des coins arrondis. Cool. Alors c'est ce que nous avons fait. Et puis celui-ci ici, nous avons ajouté une grande option. Ensuite, en plus de cela, je vais modifier sa couleur primaire. Le problème avec le fait de le faire ici en tant que classe combinée, que je suis dans mon gestionnaire de styles. Donc, la classe de combinaison s'affiche comme ceci. La couleur primaire ne peut être vue qu'après une taille plus grande, car c'est la combinaison. Cela se voit aussi ici après une petite taille, je ne peux pas choisir cette couleur primaire. Essayons-le. Donc, allons-y, bouton. Retournez à ici. Je vais dire qu'après petit, je voudrais que la couleur primaire ne soit pas là. Je dois donc en faire un autre. Tu le fais si ce doit être une classe combinée. Donc ce que je vais faire c'est m'en débarrasser à partir d'ici. Tu supprimes, je vais revenir à mes styles. Elle y est toujours. Je vais nettoyer les styles, supprimer une couleur primaire. Cool. Donc, ce que je veux faire est créé tout seul. Donc, je vais dire que le bloc u div sera notre arrière-plan. En fait, je vais d'abord créer la classe. On va l' appeler couleur primaire. Et ça va être comme ça tu te souviens de la couleur que j'ai choisie ? C'était quoi ? C'est assez proche. Assez près. Quel homme, peu importe ce que c'est. OK. Je vais donc l'utiliser là-bas et je vais en choisir six comme couleur globale. Je vais dire que tu l'es maintenant. N'oubliez pas que la main principale doit apparaître. Tu vois ce qui s'est mal passé. C'est bon. Tu attends là, je vais aller vérifier. C'est bon. Oublie ça. C'est parce que j'ai nommé ce truc, mais que je n'ai pas appuyé sur Entrée sur mon clavier. Je clique simplement ailleurs, ce que j'ai l'habitude de faire. Et il a dit : Oh, vous allez juste l'appeler un diblock au lieu de leur nom que vous lui avez donné. C'est pourquoi nous nous sommes trompés. Je n'ai tout simplement pas cliqué sur Retour. Je vais donc dire couleur primaire. Je préfère bien mettre le genre de pot générique, plus vous avez de pot réutilisable au début de mon nom, d' accord, pour que je puisse avoir de la couleur, de la couleur secondaire. Et celui-ci peut être BG, couleur de fond primaire, car vous aurez également des prises de couleur primaires. Tu y vas. Je pense que ça va marcher. Alors maintenant je peux dire Button Lodge et je peux dire que tu vas l'être, je peux commencer à taper de la couleur. Ça y est. qui est cool, c' est que ce petit bouton peut également faire référence à celui-ci pour dire couleur, arrière-plan, couleur, primaire, cool. Tu y vas. Ainsi, lorsque vous construisez vos poutres, vous les faites parfois sous forme globales et parfois sous forme de classes combinées car il ne sert à rien d'avoir une grande comme une classe globale. Pas besoin car il n'y a pas de grand. Je dis un peu, Oh, en frappant, j'aimerais appliquer deux grands, qui vont appliquer du rembourrage de chaque côté et à gauche et à droite. C'est uniquement pour les classes de combinaisons de boutons. Génial. La couleur de fond est géniale. Parce qu'alors disons que la section dans laquelle il se trouve, disons qu'il s'agit réellement de l'ensemble du copain. Buddy peut avoir une couleur de fond, du foin primaire. Et puis je peux dire que j' allais laisser les choses comme ça parce que je peux maintenant changer mon arrière-plan Primaire, faire n'importe quoi d'autre, et tous les boutons apparaissent pour le voyage. Si je change la couleur de fond, vous ne pouvez pas les voir, n'est-ce pas ? Parce qu'ils sont au top. Et comment vais-je m'y prendre ? Venez le jour même. Ce n'est pas faire ça. Ajoutons un div. C'est dans une section située en dessous de celle-ci que la couleur d'arrière-plan est la couleur principale. Maintenant, si on le change, ils vont tous venir faire le trajet, se faire une idée. Pareil pour la couleur des tics, tout ce genre de produit générique est bon parce qu'il est réutilisable. Et cela signifie que je n' ai pas besoin de changer de bouton, la couleur de fond pour quelque chose de nouveau. Et la section et la frappe que j' utilise ne fonctionneront pas. Si j'essaie de faire du Biji, que va-t-il se passer ? Ça va marcher. C'est peut-être un design sympa que vous recherchez, mais c'est en fait un peu comme n, mais ce n'est pas ce que cela signifie. Je vais devoir créer un autre style global appelé couleur du texte, primaire et secondaire. Un excellent, d'accord, nous nous sommes trop attaqués aux mauvaises herbes. Nous avons eu quelques problèmes avec les conventions de dénomination de Dan ou nous avons oublié d'appuyer sur Entrée. N'oubliez donc pas quand vous nommez quelque chose et que vous souhaitez le modifier. J'ai l'habitude de le faire. Donnez-lui un nom, puis partez et cliquez dessus. Et ce qui se passe, c'est que ça n'a tout simplement pas créé, ça n'était pas là du tout. Appuyez sur Entrée sur votre clavier. Maintenant, ce sont les conventions de dénomination qui ont fonctionné pour moi. Il y avait d'autres variantes. C'est peut-être quelque chose que vous utilisez et que vous pensez vraiment que d'autres personnes trouveront utile. Alors jetez-le dans les commentaires ici. J'adorerais que vous preniez le temps si vous le souhaitez, oubliant toujours celle-là ou c' est une autre bonne façon de le faire ou une autre bonne façon de le faire ou ce sont les problèmes et les solutions. Ajoutez-le dans les commentaires parce que ce serait très pratique pour vous maintenant, en tant que spectateur, d'aller les lire et de dire, je préfère cette façon parce qu'il n'y a pas de vraie règle tant que le site Web s'affiche bien dans le navigateur, vous pouvez avoir la version finale et finale version 2 si vous le souhaitez. Très bien, c'est le guide de Dan pour les conventions de dénomination, pas la science. C'est plus de l'art et ne soyez pas trop dur envers vous-même à mi-chemin d'un projet. Et tout est comme par bribes parce que vous avez une terrible convention de dénomination. Vous continuez et continuez suivre ce que je veux faire chaque fois que je quelque chose et quand le flux recommence pour restructurer nom de ma classe, les choses parce que vous vous retrouvez parfois avec juste des choses que tu n'avais pas l'intention de faire. Mais soit nous essayons d'être rapides, soit vous ne pouviez pas vraiment y penser à moment-là et vous vous retrouvez avec un petit désordre. C'est bon Sois gentil avec toi-même. C'est normal d'être désordonné. Et si vous êtes un développeur qui suit ce cours, vous vous dites que non, ce n'est pas normal d'être désordonné. Ça va aussi. Vous pouvez être super légitime, mais cela demande un peu de pratique lorsque vous verrouillez tout et que vous obtenez ces noms. Parfait D'accord, ça y est, mais c'est une question délirante, mais j'espère que cela a été utile. Passons à la vidéo suivante. 35. Comment utiliser le flux de Web de gestionnaire de style: Bonjour à tous. Dans cette vidéo, nous allons regarder ce truc, ce gestionnaire de style, je l'ai évoqué dans une vidéo précédente. Passons en revue tout cela et ce qu'il fait probablement dans cette vidéo maintenant, accord, Style Manager, celle-ci ici. Alors, à quoi sert-il ? Vous permet de rechercher des classes, des noms. Disons que je dois trouver tout ce qui fonctionne. OK, ça y est. Il y a ces rubriques ici. Vous pouvez voir, oh, regardez, il y en a un générique. Il y a une danse aléatoire. J'ai fait un, deux, trois, quatre et tu peux les survoler. Il vous montrera la syntaxe et vous montrera ce qu'elle fait. Celui-ci atteint trois, dit que la marge supérieure de 0 % de marge inférieure z représente une famille de polices, une couleur et une taille de police. Il y en aura d'autres. C'est donc une chose qui fonctionne. une chose que tu trouveras qui te plait, oh, et ensuite elle pourra le faire. Non, il a fait des choses de base. J'espère que le gestionnaire de style fera un peu comme Find and Replace à l'avenir. Il est peut-être là maintenant parce que vous êtes dans le futur. Mais il ne fait pas grand-chose de ce que je pensais qu'il ferait. OK. L'une des choses intéressantes que cela fait, c'est de dire que le client revient et dit que nous allons changer cette couleur primaire. Il doit être plus clair, plus foncé ou vert. OK. Ce que tu peux faire, c'est le saisir parce que disons que tu as été plutôt mauvais avec ton nom, d'accord. Ou vous regardez la purge de quelqu'un d'autre et je sais qu'il l' a utilisée parce que je peux la voir là, là, là, là. Vous devez faire attention parce que vous aimez, je veux m'assurer que j'ai tout compris, car il se peut que ce ne soit qu'un petit changement de teinte et que vous vous trompez peut-être . Donc, ce que vous pouvez faire, c'est l'installer , le gérer et simplement coller cette couleur. OK, c'est le nombre hexadécimal pour ça. Hache cinq, si cinq, si 5D, tu peux lire. Mais au moins, pouvez-vous voir ici qu'il a passé en revue tous les attributs et tous les ensembles. Celui-ci l'utilise, celui-ci l'utilise, cette classe, utilise-la. Vous pouvez donc les parcourir et les trouver toutes. Maintenant, il ne trouve pas et ne change plus. Une voiture. peux entrer ici et partir, Oh, suffit de cliquer dessus et de le changer. Mais oui, il espère que cette fonctionnalité arrivera. Mais ce que vous pouvez faire, c'est l'empiler prendre de la couleur. Regardons ça. Ensuite, je vous montrerai tous les endroits utilisés, éléments concernés sur cette page ou sur toute autre page. Maintenant, on n'a qu'une page. Je peux en quelque sorte le voir. Tu peux le voir ? Vous pouvez cliquer dessus et vous serez redirigé vers ces deux endroits. Je l'ai utilisé. Du moins, tu sais, c'est là que ça se trouve. Je connais le nom de la classe pour pouvoir le changer. Je ne peux pas entrer ici pour le moment et le changer. Je peux en changer le nom. OK. Ce n'est pas ce que je veux, mais je sais que la couleur des tiques doit être changée pour que je puisse parcourir, trouver la couleur du texte ici, entrer et la modifier pour que je sache qu'elle est là. Je sais que c'est Eros qui était là. Et maintenant, je peux le changer car elles ont la même couleur de tiques. Changeons-le. Quelque chose d'évident. Ces deux éléments vont changer. J'ai juste besoin d' trouver un et de le changer. Et je peux me frayer un chemin en suivant cette vieille couleur. C'est donc la prochaine à changer. C'est où ? Ça y est. Je peux le trouver ici, en appuyant sur trois et en le remplaçant par un nouveau. Donc c'est plutôt utile. D'autres choses qu'il peut faire, vous pouvez taper pour les polices. Je sais donc que j'utilise X0 plusieurs fois. Je sais que c'est en atteignant 1.2, qui est celui-ci ici. OK. Il n'est pas utilisé en appuyant sur trois pour une raison quelconque, j' utilise autre chose. D'accord, mais vous pouvez saisir n'importe quel type d'attribut, en dimensionnant le nom réel , le code couleur, il le trouvera . L'autre chose, c' est le nettoyage. Nettoyage. Je vais vous montrer ici parce que nous sommes dans le style manager. Souvent, je ne fais pas le ménage avant d'avoir avancé dans le projet car il y a quatre styles qui ne sont pas du tout utilisés dans le projet. Allons nettoyer le cas où un hit de danse ne serait utilisé nulle part. Il y en a un qui s' appelle frapper n'est pas utilisé. Il existe une classe de combo qui n'est pas utilisée appelée Image Hero Div Past Events. Et il y en a un qui s'appelle le bloc de texte J. Je peux donc les nettoyer. Et dans ce cas, je sais que tout ira bien. Mais disons plus tard, à la page suivante, que je suis en train de dire que j'ai vraiment besoin de danser et que c'est fini. OK, alors range-le à la fin. Tu peux le faire pendant que tu travailles. C'est bon. Par exemple, je suis sûr maintenant que je ne vais utiliser aucun de ces flux de travail finaux en me disant qu'ils ne sont réellement appliqués à rien. Donc, même si je le fais, ça ne l'est pas, ça ne va pas se casser. Cela signifie simplement que je n'y aurai pas accès plus tard. Alors, nettoyez-les, Vega, on va les ranger. petit avantage que je voudrais ajouter à la fin, c'est que je ne l'ai pas encore mentionné, mais je pensais que cela arriverait maintenant. Mais disons que je l'ai frappé et que je copie parce que je ne l'utilise que pour autre chose, pas pour un titre deux, je vais dire que je te veux, je vais l'utiliser après ça moins. Oui, collez-le dans un endroit aléatoire et vous voulez, en fait, je vais juste l'utiliser pour autre chose. Je ne vais plus appeler ça frapper deux. Et je crée un nouveau style qui s'appelle, je ne sais pas, en appuyant sur cinq et je vais le changer. Donc le problème, c'est que nous la changeons et que nous avons changé la couleur pour autre chose parce que je l'utilise pour cela. Vous n'avez pas réellement créé de nouvelle classe, vous renommez simplement l'ancienne. Cela arrive assez souvent pour moi. Au moins, je vais copier et coller quelque chose qui me ressemble, OK, je vais le changer et en créer un nouveau. Je l'ai donc dupliquée en pensant que j'avais créé une nouvelle classe et que je pouvais la renommer, mais en fait, nous renommons simplement celle-ci aussi. C'est presque cinq maintenant. Nous voulons donc le dupliquer et créer quelque chose de nouveau. Donc, sans l'utiliser, ils vont la supprimer ou supprimer ou supprimer la classe et lui donnent un nouveau nom pour appuyer sur F5 et commencent à travailler dessus. Ou vous pouvez dire que c'était assez proche pour que je puisse dupliquer le cours. Et ça équivaudra à la rubrique 5. Et je vais le réduire un peu. Et vous remarquerez maintenant qu'il n'est pas connecté à celui-ci. Donc, sachez simplement que si vous voulez un doublon, élément qui contient déjà une classe, n' allez pas le renommer. Supprimez-la, créez-en une nouvelle ou dupliquez la classe. C'est logique. Ce n' est pas vraiment un bonus. J'appelle ça un bonus. Très bien, c'est le gestionnaire de styles de Webflow. J'ai hâte de le mettre à jour. J'ai l'impression que ça pourrait être cool. Des trucs comme trouver et remplacer ici. Pouvons-nous ajouter des groupes similaires afin de pouvoir intégrer les cours au personnel ? J'ai l'impression que l' avenir de Webflow s'y trouve peut-être. Quoi qu'il en soit, c'est le Style Manager. 36. Vidéo de production 2 - Nouveau portefeuille: Bonjour tout le monde. Cette vidéo est une vidéo de production. Nous devons créer un nouveau site car nous allons commencer dès maintenant à développer notre portefeuille. Maintenant que nous avons quelques compétences en Ned CSS derrière nous, nous allons arrêter de créer choses et de les mettre en action, donc je vais faire les miennes. C'est pourquoi cette vidéo est relativement courte. Ça va créer un nouveau site. Je vais devoir mettre à jour mon espace de travail vers une version payante. Je vais vous expliquer ce que j'ai fait. Mais oui, alors créez un nouveau site si vous pouvez l' intégrer à votre compte gratuit, faites-le. Mais c'est à peu près à ce moment-là que je dois améliorer mon espace de travail. Je vais choisir tous les mois de toute façon. Faisons-le et vous le ferez. Très bien, donc la première chose que nous allons rencontrer est que si vous avez un compte gratuit, nous allons devoir mettre à jour ou supprimer l'un des deux. Je vais effectuer une mise à niveau parce que si je veux ajouter une troisième face à mon portefeuille maintenant, et qu'elle indique que vous avez atteint votre limite, vous devez passer à la mise à niveau. Donc je vais le faire et je reviendrai dans une seconde. En fait, je vais passer à Call juste pour que vous sachiez qu'ils pourraient changer le nom de celui-ci, mais j'en ai juste besoin de plus de deux sur des sites hébergés. Et ces sites ont besoin de plus que deux pages. Alors faisons-le. Je reviens tout de suite. Très bien, donc je suis de retour à mon tableau de bord en haut, et je peux ajouter un nouveau site maintenant, n'importe quel drame, d'accord, donc je vais ajouter un site vierge. Et ce sera l'incroyable portfolio de danse de Daniel . Et vous pouvez appeler le vôtre avec votre nom, accord, alors créez votre propre portfolio pour celui-ci. Vous n'allez pas vous donner de brief car considérez-le simplement comme votre portefeuille. Même si vous n'avez pas de contenu pour votre portefeuille maintenant, ils en rejoindront un avec votre propre nom. Nous pouvons mettre en place un porte-documents, des trucs, une porte. Alors vas-y et crée ton propre site vierge sur lequel tu pourras me rejoindre. Nous allons définir des projets de classe appropriés plus tard, mais pour le moment je ne vais pas vérifier celui-ci. Allez-y pour que nous puissions commencer à créer notre portfolio et apprendre plus sur Webflow dans la prochaine vidéo. 37. Hauteur minimale vs hauteur de ViewPort dans le flux Web: Bonjour à tous. Dans cette vidéo, nous allons regarder ce groupe ici, largeurs minimale et maximale, hauteur minimale, hauteur maximale. Que font-ils ? Pourquoi n'utilisons-nous pas simplement la hauteur et la largeur ? À quoi sert ce bouton Overflow ? Tout sera dévoilé dans cette vidéo. Très bien, la première chose à noter est que si j'ajoute, disons, un conteneur, une section clé, d'accord, et je donne un nom à cette section. Cette section va être une section froide. Faisons du héros pour le moment. Je vais juste donner des exemples génériques ici et nous les utiliserons tout au long du cours au fur et à mesure. Et donc le héros de la section, Il va avoir, si je lui donne un arrière-plan de quelque chose, je choisis cette couleur. Si j'obtiens un aperçu, cliquez dessus. Nous n'y sommes pas allés. N'oubliez pas que la commande de raccourci Shift P. Control Shift P pour l' aperçu disparaît. Donc, par défaut, ajouter n'importe quoi, n'importe lequel de ces éléments, comme des dibs qui n'avaient pas de hauteur par défaut, donc ils s'effondrent et disparaissent. Workflow le sait. C'est un peu bizarre si vous essayez d'utiliser ce design. Si vous avez ajouté quelque chose et qu'il ne pouvait pas le voir, ce ne serait pas une bonne expérience utilisateur. Donc, ils ajoutent juste un faux accentué ici qui n'existe pas quand il sort et publie le site Web cependant. Nous devons ajouter de la hauteur. C'est donc une chose. Il n'y a pas de hauteur. Prends la matrice. Bref. Mais on peut lui donner de la hauteur. Nous pouvons lui donner une certaine hauteur physique. On peut dire qu'en fait, c'est la hauteur de ma boîte de héros que je voulais faire de 500 pixels et c'est très bien. Ok, le problème avec ce genre de hauteur absolue, 500 pixels, c'est que ce n'est pas très flexible. Les gens utiliseront donc une hauteur minimale. hauteur minimale est probablement la plus couramment utilisée de toutes ces options. Min-max est, accord pour moi au moins, cela signifie que je peux saisir quelque chose comme le texte de mon paragraphe. Ok, donc un, alors que ça, je vais ajouter un paragraphe. Mettons-le à l'intérieur et saisissons-le tout. Et je vais le copier et le coller parce que c' est cette hauteur fixe. Nous allons avoir un problème parce que ça va arriver ici et ça va disparaître, que faisons-nous ? K cette hauteur fixe pose problème. OK, donc je voulais m'étendre. Donc, tout ce qu'ils font est de le changer, débarrassons-nous d'une partie de cette section grattée que le héros utilisera simplement à la place de la hauteur, utilisera la hauteur minimale dans les deux, déclarons qu'il maintient la touche Option ou la touche Alt sur un PC, vous pouvez le laisser comme ceci et il se développera et se contractera. Mais pour mon design, accord, bonjour la première fois que tu les as vus. Quoi qu'il en soit, j'ai la hauteur que je veux. OK, donc je sais à peu près quelle hauteur il est. Donc ce que je veux faire, c'est que ça ne sera jamais aussi petit. D'accord, je voulais dire qu' il suffit de lui donner une hauteur minimale de pixels Foner. Elle avait donc la même apparence que la précédente. La différence, c'est que maintenant, quand je le copie et que je le colle, je colle, je colle, je colle, je colle. Il y en a un minimum de 500, mais s'il faut, il s'agrandira un peu. C'est donc très courant. Utilisez simplement la hauteur minimale plutôt que hauteur, car vous aurez un peu de flexibilité. La hauteur minimale devient très utile si nous examinons certains de ces éléments, nous les avons créés plus tôt, et par défaut, ils fonctionnaient simplement avec la bonne hauteur ici. C'est parce que la grille est vraiment géniale. Et si l'une d'entre elles passe à trois, suivons trois lignes. Ils viennent tous pour le trajet. Ce n'est pas toujours vrai. Regarde ça. Si je saisis ma grille avec ma grille, là, est-ce que ça va ? Si je dis que vous n' êtes que deux, cela générera automatiquement une autre ligne. Jetons un coup d'œil. Tu vois, ça fait deux, maintenant c'est juste un. Pourquoi sont-ils pareils ? Et le concepteur de TOC et vous êtes du genre, je veux qu'ils correspondent. Pourquoi, sur la métrique, vous pouvez leur donner une hauteur minimale. Passons donc à celui-ci ici. Il y a un div ou une classe juste autour du membre extérieur. Nous l'avons inscrit tout à l'heure. Il y a quelque chose qui contrôle l'un d'entre eux tous les trois. Donc je vais le faire à tous les trois. Je vais dire qu'en fait, pour le dimensionnement et la densité, nous pourrions lui donner une hauteur, donnons-lui simplement une hauteur minimale au cas où il aurait besoin de s'étendre. OK. Mais je vais lui donner une hauteur minimale de, je vais juste deviner 500 pixels. Cela signifie qu'ils peuvent être plus grands, mais ils ne peuvent pas être plus petits que cela. OK, donc je pourrais, si j'ai cette très grosse carte trois lignes ou dans mon cas, cinq lignes, elle grossira si nécessaire. Mais il y a une hauteur minimale qui est très pratique pour ce genre de choses, comme ces cartes ou peut-être que c'est un prix inférieur. Une image de la tarification peut être sous-titrée, ce qui vous donne la flexibilité de la hauteur, mais en réglant le tout de la même manière. C'est donc la hauteur minimale à utiliser, vous l' utiliserez simplement à la place de la hauteur la plupart du temps, sautez parce que je me suis perdu. Et vous avez peut-être remarqué que je n'ai pas réglé la hauteur minimale de la section comme je l'avais prévu. J'ai fini par le faire au paragraphe. Ce n'est pas un problème dans ce cas , sauf si je veux utiliser le paragraphe ailleurs. J'ai donc fait la hauteur minimale là-dessus. Je voulais vraiment le faire sur cette section, d'une hauteur minimale de 500 pixels. Vous obtenez donc la hauteur minimale. Débarrassons-nous de lui maintenant. Effacons-le. N'oubliez pas, Alt Option, cliquez sur Instagram, hauteur maximale. Je n'utilise pas beaucoup la hauteur maximale. Vous y trouverez peut-être une bonne utilité. n'y en a qu'une à laquelle je puisse penser, même sur Google, comme d'autres bonnes utilisations de la hauteur maximale, je n'en ai pas trouvé de bonnes. Laissez dans les commentaires si vous avez un bon exemple meilleur que le mien K. Je vais donc avoir reçu ce texte. Et c'est dans une boîte qui dit que c'est peut-être descriptif sous une image, mais vous ne voulez pas que cela dure éternellement. Vous voulez que ces petites barres de défilement apparaissent. Donc, ce que vous pouvez faire, c'est dire que je veux que ce héros de section ait une hauteur maximale de 300 pixels. Ok, qu'est-ce que ça veut dire ? Cela signifie que regardez ça. Si j'ajoute du texte, copier-coller, coller finit par atteindre une hauteur maximale. Tu fais un coup de plus que ça. Si vous injectez tout un tas de données CMS, il peut s'agir descriptions de produits, d'articles de blog ou de quelque chose comme ça. En fait, vous n'en voulez pas parce que pour le moment , il déborde, ça n'a tout simplement pas l'air bien, c'est bon. Tu peux toujours le lire. Mais supposons que vous vouliez ces barres de défilement. Ce que vous pouvez faire, c'est vous assurer de vous rendre dans la section héros sélectionnée. Vous pouvez utiliser cette option de débordement. Le moment est encore visible, vous pouvez le rendre invisible, ce qui n'est pas très utile car vous voulez que les barres de défilement soient placées ici. OK ? Vous pouvez donc faire défiler l'écran vers le bas et vérifier ce qu'il contient. Cela signifie que vous avez au moins une partie de l' espace d'écran utilisé, c'est seulement 300 pixels, mais vous pouvez réellement intégrer beaucoup plus de contenu si la personne veut vraiment creuser dans sa hauteur maximale, ne l'utilisez pas très souvent. Ils reviendront et regarderont les commentaires sur cette vidéo parce que je suis sûr qu'il y a plein d'autres raisons pour lesquelles vous utiliseriez la hauteur maximale, mais n'arrivez tout simplement pas à les comprendre pour le moment. Eh bien, une chose que vous pouvez faire avec hauteur maximale est surtout de faire ce débordement. Cliquez sur l'étiquette de la section. Le héros, c'est que nous avons opté pour celui-ci. Cela les oblige à toujours afficher celui-ci ici de manière automatique. Ça ne change pas vraiment, sauf si ça va moins, regarde ça. Puis-je prendre des remontées mécaniques ? C'est qu'ils finissent par disparaître parce qu'il ne déborde pas. Il n'y a plus de barres de défilement. La force venant de B tout le temps. Débordement. OK, donc c'est automatique. Il s'allume et s'éteint selon besoins ou vous pouvez les forcer à être allumés tout le temps. Très bien, c'est certainement la hauteur maximale au-dessus de la largeur maximale et minimale. Donc, pour comprendre cela, utilise l'exemple que nous avons fait auparavant. Nous pouvons faire la même chose. Ce que nous avons fait dans celui-ci est ici, comme nous l'avons dit, le paragraphe du texte du héros avait un gros rembourrage sur le côté. Tu peux voir ça ? Ce que nous avons fait plus tôt, nous pouvons faire quelque chose de similaire. Je vais l'éteindre. Souvenez-vous de Alt ou d' Option, cliquez dessus pour vous en débarrasser . Je vais dire que ce héros de balise p sera avec ma taille aura une largeur maximale. On y va. De quelle distance tu veux qu'il soit. Vous pouvez le faire, disons que 500 pixels ressemblent à, encore une fois, vous pouvez décider que c'est tout. OK, donc la largeur maximale est idéale pour les titres que vous souhaitez diviser en deux parties. Nous allons le faire dans un petit moment. Pour celui-ci, vous avez un très grand écran s'étend sur toute la longueur. Vous pouvez dire qu'il suffit de le forcer à s'arrêter parce que j' aime ce genre d'espace négatif ici. Donc, celui-ci aussi, on pourrait dire que nous allons avoir une largeur maximale de 600 pixels. OK ? Ça veut juste dire, oh, en fait c'est 500, ça veut dire que ça va le casser là-bas. Si vous injectez des titres différents pour différents blog, par exemple, ils ne resteront éternellement sur le côté. Ils vont se donner un peu de piquant, comme vous pouvez le faire avec de la marge. Ou dans ce cas, nous faisons de la largeur maximale. Ce que vous pourriez faire aussi, c'est tisser à l'aide de pixels faire une vidéo complète en un peu plus sur toutes ces choses différentes . Il y en a plein. Mais en termes de pourcentage, vous pouvez décider, en fait, je veux juste qu'il soit à 80 %. Que font 80 % de son espace parent, 80 % de son espace parent, k de l'espace parents, qui dans notre cas, le parent ici est la section ici, d'accord ? 80 % plus loin dans le corps, c'est beaucoup plus large. Et cela vous donne un meilleur exemple. On en prend un en chauffant, il le copierait. Mettons-le dans quelque chose. Mettons-le dedans. OK. Donc je vais le mettre au chauffage pour qu'il y aille ? Impossible de lire les données natives du presse-papiers, n'aime pas ça parce qu'il y en a dedans. Il y a le texte de la plage et je vais le récupérer et le coller. Je peux en quelque sorte. Essayons-le à nouveau. Allons ici après avoir chauffé pour la pâte. Maintenant, c'est 80 % de cet espace parce qu'il est un peu piégé dans cette classe d'événements passés de div que j'ai mise ici. Si je dis 50 % ici, ce sera 50 % qui pèseront d'une taille différente de 50 % ici. OK. Parce que c'est 50 % de ce grand contenant. Est-ce que cela a du sens ? Tu peux les changer. Donc, un ordinateur de bureau, vous pourriez décider que 50 est une bonne chose. Tu voulais faire une pause parce que tu aimais cet espace négatif, mais sur tablette, tu pourrais y aller, je n'aime pas ça. 50 aussi. pris dans un coin et peut-être qu'il le divise en trois lignes. Vous allez dire qu' en fait sur tablette, je vais dire que vous pouvez être un peu plus, 70 % ou 8 %, d'accord ? Et quand on en arrive à ces derniers, 80 % ne suffisent toujours pas. Donc, vous pourriez simplement passer à cent pour cent sur tout cela à partir de ce moment-là. D'accord, donc c'est la largeur maximale. Nous l'avons fait pour nos en-têtes, mais vous pouvez le faire avec deux balises div, vous pouvez le faire à votre guise. OK, alors regardons la largeur minimale. Exemple de largeur minimale. J'essaie d'en trouver un. Ne l'utilisez pas trop souvent, comme une taille minimale. Mais une largeur minimale peut être utile. Vous comprenez probablement ce que cela va faire, mais faisons-le ensemble de toute façon. Je vais devoir le faire, ces boutons vont les copier et les coller. Donc deux d'entre eux. Et disons qu'il y en a réellement, faisons-en trois. Ce bouton ici, si je fais comme ça, et l'un des boutons qui contient un point d'interrogation, les boutons sont trop petits. Imaginez s'il avait une largeur minimale. Tu l'as eu. Donc Button Hero aura une largeur minimale pour deviner la taille de 100, d'accord ? Cela signifie que je vais faire en le texte de remplissage soit centré sur chacun d'eux. Cela signifie simplement que celui-ci, si cela se résume à un très petit mot, comme Dan, voyez-vous qu'il ne dépassera toujours pas la taille minimale. C'est en fait un bon exemple. J'ai eu du mal à y arriver pendant une seconde. D'accord ? Vous utilisez donc beaucoup la hauteur minimale et vous utilisez beaucoup la largeur maximale. Au moins, je m'occupe des deux autres. Je n'en utilise pas très souvent, mais tu sais ce qu'ils font. Ils sont à l'opposé des autres que vous utilisez beaucoup. Serait-ce la pire vidéo réalisée dans ce cours à ce jour ? Je pense que oui. J'y suis depuis plus d' une heure et c'est tout ce que j'ai pu faire. Je dois passer à autre chose. J'espère que vous aurez compris l'idée. N'utilisez pas de hauteurs absolues, utilisez des minimums et des maximums pour vous donner un peu de flexibilité. Avant de partir, appliquons notre minimum, bonté et corrigeons les mythes que j'ai inventés ici. Donc je l' ai fait, je vais copier celui-ci. Je vais avoir une navigation blanche en haut. En fait, il vous suffit de naviguer dans la section Hero. Passons à la commande E ou au contrôle E sur un PC et passons à la section. OK. Je l'ai fait pour les sections. Ils ne peuvent pas entrer l'un dans l' autre et il ne pense pas simplement à le mettre après. J'espère que vous pourrez le faire en créant d'abord un conteneur, puis en accédant à la commande D et à la section Go. Et ensuite, il devrait aller au bon endroit. Ou appuyez sur un et faites-le glisser vers l'extérieur. J'ai donc ma section, donnons-lui un nom. Cool, cette section. Ok, c'est blanc par défaut, c'est bon. Et rappelez-vous que si je vais le prévisualiser et revenir en arrière avec Shift P, Control Shift P sur un PC, c'est fini. Où est-ce que c'est allé ? C'est présent dans leur concepteur, pas dans le site Web lui-même. Pourquoi ? Parce que Webflow nous a peut-être donné notre fausse taille . Donnons-lui une hauteur réelle. Donnons-lui une hauteur minimale de 80 pixels. OK ? Juste pour ajouter, permettez une certaine flexibilité. Et prévisualisons-le. Commande Shift P. Cela n'a pas fonctionné quand je suis ici, voyez-vous que je tape à moitié cet AD. Donc, la marchandise de p dans n'importe quel smash mon clavier, puis travaillez. Je vais cliquer sur ce type de canevas ici, puis sur Command Shift P. Je vais laisser cet espace ouvert. Très bien, ce truc qu'il a besoin de corriger, tout d'abord, c'est un peu de tics de paragraphe dont je n'ai pas besoin. Alors adieu au texte du paragraphe, cliquez ici. Il y a d'autres choses que j'ai faites, mais pour le trop-plein, je le remets à visible, ce qui est le cas par défaut. Et je n'aurai pas de hauteur maximale. N'oubliez pas, facultatif Cliquez sur celui-ci. Je vais avoir une hauteur minimale de 400 pixels. Et la couleur, je ne m' inquiète pas trop pour le moment. Nous vous montrerons très bientôt comment extraire des couleurs de Figma, XD ou de Photoshop. Mais au moins, mes structures ont mon héros de section de navigation. Ce n'est qu'un petit conduit. Très bien, j'ai Wow, ce sera tout pour cette vidéo et la suivante. 38. Convertir Figma en flux Web: Bonjour tout le monde. Dans cette vidéo, nous allons intégrer des éléments de notre design figma à Webflow. Je vais vous montrer comment vous pouvez travailler entre les deux parties du logiciel. Maintenant, nous avons brièvement expliqué pourquoi vous utiliseriez quelque chose comme Figma et pas seulement du design dans Webflow, vous en avez une assez bonne idée maintenant, n'est-ce pas ? Parce que si nous devons prendre des décisions de conception ici dans Webflow, déplacez les choses. C'est assez délicat parce que nous devons considérer des éléments tels l'espacement et la marge comme un remplissage ou comme un n, quelque chose comme Figma ou XD, qui est un concurrent, ou le faire dans Photoshop ou Adobe Illustratrice. Le design ici, vous n' avez pas à vous en soucier. Tu veux juste que le bouton soit là parce qu' il a l'air bien. Ok, tu dois trouver comment tu vas découper cette boîte ici. Tu vas faire en sorte que ça chevauche ce truc. Comment faites-vous pour qu'il passe derrière tout ça ? Figma, déplace-le ici. Dans. Désolé, oui, Figma se déplace avec. Dans Webflow, nous devons prendre des décisions sur la façon dont le code va le rendre. Cela prend donc beaucoup plus de temps dans Webflow. C'est tellement plus facile. Concevez, faites-le tester dans Figma, demandez au client de signer, puis commencez à créer et à flux de travail. n'y aura donc pas de cours complet dans Figma qui vous montrera simplement comment extraire les éléments vous avez besoin pour créer un flux de travail. Si tu veux apprendre Figma, j'ai un cours à ce sujet. Ok, va voir ça. Cela s'appelle Figma essentials. Et donc, oui, faisons notre première étape. Regardons les images. Disons que nous avons besoin de sortir de ce type, ce beau gosse. Ne demandez pas. Donc, ici, dans Figma, sous Design, vous pouvez en bas, cliquer sur Exporter, cliquer dessus. Faites défiler vers le bas, vous pouvez décider quel type de format d' image je veux qu'il y ait un arrière-plan transparent. Donc, un PNG est génial. Un JPEG va l'exporter, et vous ne pourrez pas voir les bords du carré. Le PNG est donc génial et je vais l'exporter. Et vers où vais-je l'exporter ? Je vais le mettre n'importe où. Et il le placera dans Webflow k. Alors mettez-le là où vous en avez besoin. Je vais mettre le mien dans les dossiers d'exercices , d'accord, après ça. Vous pouvez donc intégrer ces images si vous voulez une belle chenille dans votre portfolio, mais sinon vous fabriqueriez la vôtre. OK, donc je vais jeter le mien sur mon bureau juste pour le jeter là. Allons-y Photo de Dan. On y va. Sur mon bureau, il est écrit que si vous voulez en récupérer plus d'une boîte, vous pouvez faire le tour et marquer toutes ces choses pour l'exportation. Exportez celui-ci ici, ou double-cliquez dessus ici. Je vais l'exporter au format JPEG parce qu'il est carré, qu' il contient beaucoup de couleurs et qu'il n'a pas besoin de transparence. Excellente. OK, tu passes par là, leur fais tout ce que tu veux pour l'exporter. Et puis d'un seul coup, vous pouvez vous rendre ici, accéder à File Export, et nous explorerons toutes ces images d'un seul coup. Ainsi, au lieu de récupérer des images et de les intégrer Webflow, il suffit de les faire glisser sur le bureau, au milieu du concepteur. Ou utilisez cette option ici et faites-les glisser dedans, ou cliquez sur celle-ci pour les télécharger. Passons donc à Webflow des images de Figma. Parlons des couleurs, d'accord, donc cela peut être aussi simple que de double-cliquer dessus. Voyez-vous que c'est là ? Il suffit de le copier et de le coller. Je veux que ce soit un bouton. Où est mon bouton ? Ou je peux passer à autre chose. OK, donc j'ai un bouton ici. J'ai besoin que ce soit de cette couleur. OK, tu y vas. Ainsi, en tirant les couleurs de Figma, vous pouvez être un peu plus chic et passer à cette option Inspect. Vous pouvez sélectionner les options très bien, car cela signifie que vous pouvez simplement vous déplacer et cliquer sur des éléments pour voir Inspect. Il fait un certain nombre de choses. Cela ne me donne pas seulement mes couleurs, accord, dès que cela me donne une teinte, une saturation, une luminosité et un alpha k, vous pouvez simplement aller sur Hicks, copier et les coller dessus. Vous pouvez voir qu'ils partagent la même sortie CSS. Nous n'allons pas l'utiliser à Figma. Nous allons simplement récupérer les pièces individuelles afin que vous puissiez saisir les couleurs de cette façon. Et l'autre avantage inspecteurs, c'est l'espacement. Vous pouvez donc voir ici que je suis juste en vol stationnaire, sans rien faire. Ça va me dire que je suis à 21 pixels du bas, à 16 pixels de côté, j'égaliserais probablement les deux à 21 pixels. Mais disons la hauteur de ma navigation que j'ai été invitée avant. OK, si je le survole, où est-il ? Ça me dit qu' il y a un rectangle d'une hauteur de 86 pixels. Revenez à Webflow et dites « Hé, navigation », que j'ai dit être un minimum de quoi s'agissait-il ? Peut-être six. On y va. J'ai dit AT Je me suis rapproché, c'est assez proche. Je peux donc arrêter de faire correspondre mon design maintenant, dans Figma, cette option Inspect peut être très pratique si vous travaillez avec quelqu'un qui possède le fichier Figma et qui l'a conçu et que vous êtes l'utilisateur Webflow. Vous leur demanderez d'accéder à Partager et vous pourrez leur demander de partager cette vue, car elle avait cette option d'affichage. Et cela signifie que vous n'avez pas besoin d'une version payante de Figma. Cela signifie simplement que vous finissez par utiliser cette vue d'inspection par défaut. Et vous pouvez contourner le problème et vérifier tous les espacements et obtenir les couleurs. Et vous pouvez diffuser les images tant qu' elles les ont chargées pour l'exportation, les marquer comme étant exportées. Donc, selon que vous êtes la personne à Figma qui crée des objets ou que vous les construisiez pour un autre designer qui est heureux et confiant en Figma mais qui ne veut pas s'occuper de l'intégralité de Flow. partie, c'est possible, vous êtes peut-être dans cette position. C'est donc la version allégée de la façon d' utiliser Figma et de préparer des contenus pour Webflow. Et évidemment, j' ai un cours complet et pour Figma si tu veux t'y intéresser. Mais oui, de Figma à Webflow, c'est fait. 39. Convertir XD en flux Web: Bonjour. Dans cette vidéo, nous allons prendre notre design Adobe XD, puis le convertir en Webflow. Je vais vous montrer comment extraire les différentes parties dont vous avez besoin pour créer votre projet Webflow à partir d'un fichier Adobe XD. Si vous pensez qu' Adobe XD ressemble beaucoup à Figma, d'accord, il ressemble de la même manière. C'est un outil de conception. Cliquez, faites glisser le curseur, demandez au client de le déconnecter, demandez à vos utilisateurs de le tester ici. Commencez ensuite à créer dans Webflow. Maintenant, lequel devriez-vous utiliser ? Webflow ou, désolé, Figma ou XD ? Peu importe ce qui est très comparable. Ils poursuivent le même public. Pour moi, en tant que designer UX, cela ne me dérange pas. Je les utilise tous les deux tout le temps. J'ai construit celui-ci dans XD aussi rapidement que j'ai construit l'autre dans Figma. OK ? C'est à vous décider, je sais que c'est un peu une échappatoire. Je vais peut-être expliquer un peu plus la fin de cette vidéo simplement parce que les gens me le demandaient tout le temps. Mais tout d'abord, il est plein, contient des informations d'extraction depuis XD. En quoi était-ce différent de Figma ? Eh bien, c'est très similaire. Disons que nous voulons des images. Vous pouvez donc cliquer sur eux ici. Et ensuite, ce que vous voulez faire, c'est voir ici, vous avez ces trois onglets différents. Où en sommes-nous sur les onglets de vos actifs ? Notez votre onglet de couche, votre onglet de couches immergées. Je ne m'en souviendrais pas aussi bien Si vous n'avez pas sélectionné ici, pouvez-vous voir qu'il est surligné  ? Vous pouvez cliquer dessus avec le bouton droit de la souris et dire Exporter la sélection. Cette façon de procéder semble légèrement différente de celle de Figma. Vous pouvez dire que je veux que ce soit un PNG, donnez-lui une étiquette nominative sur votre bureau. Cliquez dessus. Je vais double-cliquer pour entrer dans l'image. Je vais aller ici et dire à ce petit groupe que j'ai envie d' exporter que vous pouvez faire une grande exportation en vrac. Mais pour ce faire, vous devez vous asseoir sur les choses que vous voulez faire et dire, Marquez pour l'exportation, celui-ci à emporter également. Je veux que celui-ci disparaisse, il est déjà marqué. Ensuite, vous pouvez effectuer l' exportation par lots, cliquer sur l'un d'entre eux et accéder au lot d'exportation. Et nous explorerons tous les éléments que vous avez marqués k ou Exportation de fichiers, lots, exportations, tout ce que vous avez marqué pour exportation. Et vous avez une pile d'images à glisser dans Webflow. Ensuite, pour le flux de travail, le panneau des ressources, et il suffit de les faire glisser ici depuis votre navigateur, vous cliquerez sur celui-ci pour les télécharger. Ce sont donc des images de XD. Regardons quoi d'autre ? Couleurs. Il suffit de cliquer dessus. OK, celui-ci est un groupe. Je vais double-cliquer dessus pour entrer à l'intérieur. Voilà mon Fill. Cliquez dessus, vous y allez, je peux copier et coller ce code sur Figma. Dans ce cas, c' est exactement la même chose que s'il s'agissait de majuscules. Pareil, pareil. Comme Figma. Vous pouvez en faire une version d'inspection. Et donc dans XD, supposons que vous vouliez comprendre, et faisons l'espacement maintenant parce que c'est plutôt cool. Dans XD, vous pouvez maintenir enfoncée la touche Option sur un Mac et la touche Alt sur un PC. Et disons que vous voulez connaître la distance entre les deux, d'accord ? Vous voulez donc savoir si le bouton des distances doit être enfoncé. Si vous maintenez la touche Option enfoncée et que vous sélectionnez un poing, maintenez la touche Option enfoncée sur un Mac, touche Alt sur un PC, puis passez le curseur au-dessus de celle-ci. Vous voyez que c'est comme si l'écart était de neuf pixels. quelle distance ces gars cliquent dessus, maintiennent la touche Option ou Alt enfoncée, puis survolent celle-ci, pouvez-vous voir à 11 pixels l'un de l'autre ? Vous pouvez simplement le faire pendant que vous êtes en option de conception. Tu veux aller un peu plus loin. Tu peux aller partager. Et supposons que vous soyez dans la position où vous le créez dans Webflow, mais que vous n'êtes pas le concepteur. Quelqu'un S est en train de concevoir un jour suivant et veut que vous le construisiez dans Webflow avec vos nouvelles compétences Webflow. Cela vous donnera, c'est qu'ils iront Share et qu'ils vous diront, quelle version voulez-vous. D'accord, sur Share et qu'ils vous diront, quelle version voulez-vous. D'accord, ils leur donnent la possibilité de la mettre développement parce que c'est par défaut la révision de conception. Vous ne faites pas de révision de design. Vous êtes en phase de développement, le développez dans Webflow. Tu le veux pour le web, d'accord ? À moins que vous ne créiez quelque chose pour iOS, ce que vous ne faites pas dans Webflow parce que c'est du Web. OK. Et si vous voulez les ressources téléchargeables, les éléments que nous avons marqués pour exportation maintenant feront partie de ce lien. Ensuite, je dois vous les envoyer séparément , ce qui est vraiment sympa. Je vais donner à tous ceux qui ont l'axe de liaison. Il y aura une option indiquant « Créer un lien », déjà fait. Le passé. Mon cas, je le mets à jour, a exactement la même apparence. Il suffit de dire Créer un lien. OK, je vais cliquer dessus pour le copier ou simplement l'ouvrir. Et c'est ce que vous obtenez en tant que développeur Webflow. Ce sont les images qui ont été marquées. Vous pouvez cliquer dessus. Vous pouvez les télécharger vous-même au format JPEG, PNG ou PDF. Voici les couleurs utilisées dans le document. C'est plutôt mignon. Vous pouvez passer la souris au-dessus, vous pouvez voir que c'est la hauteur. Vous pouvez voir si je clique dessus, c' est 29 depuis le haut, 29 depuis le bas. C'est très agréable. C'est aussi le CSS, que nous n' utiliserons probablement pas parce que nous faisons plutôt du concepteur visuel avec Webflow. Encore une fois, voici une courte version de la façon d' utiliser XD Figma dans votre projet. J'ai un long cours, XD Essentials, donc vous pouvez y jeter un œil si vous voulez apprendre XD. Eh bien, je l'ai promis au début, je vous dirais lequel choisir XD Figma. Ça n'a vraiment pas d' importance, c'est ma réponse. Mais ensuite, les gens s'en vont et nous en disent plus. Suis-je plutôt que Sigma est plus populaire et vous en tant qu' outil de conception UX en ce moment. Donc, si vous recherchez un emploi dans une grande entreprise qui voudra probablement Figma. C'est donc bien d' avoir des compétences Figma. Et si vous êtes indépendant, souvent préférable d'opter pour XD en raison du prix. Keyframe coûte cher et vous le payez séparément. Mais si vous êtes designer indépendant et que vous faites main-d'œuvre une fois que vous avez probablement déjà obtenu une licence Creative Cloud. Et Adobe XD fait partie de cette licence Creative Cloud. Donc, cela ne vous coûte plus cher. Et comme le jeu d'outils est identique, ils traitent différentes choses différemment. Les gens s'y passionnent beaucoup. Je suis plutôt impartial parce que je les aime tous les deux. C'est vraiment bien. Tellement similaire. Il s'agit donc de prix et de candidatures. Donc, si vous regardez votre pays et que vous vous dites : « Hé, regardez les demandes d'emploi pour voir de quoi et de quoi elles ont besoin. Vous recherchez un concepteur UX, génial, qui doit être approvisionné. Et puis s'il est écrit XD, XD, s'ils disent que vous devez connaître gorille Figma et réfléchir à mes conseils. Faites les deux. Si vous suivez l'un de mes cours que n'importe qui, une fois que vous avez terminé le premier, alimentez d'abord XD, puis passez à Figma. Ce n'est pas une grande transition. C'est bon, tu dois juste découvrir ce qu'ils ont en quelque sorte fait bouger les choses. Les choses portent donc un nom légèrement différent, mais il est très facile de choisir le deuxième outil, c'est mon 0,02$. Les deux entreprises travaillent d'arrache-pied pour créer ces outils incroyables, elles ne cessent de devenir de plus en plus incroyables. Mais pour moi, XD, figma ou similaire, je suis sûr que les gens travaillent. Ces deux entreprises sont en désaccord. Mais c'est mon 0,02$. C'est bon, c'est ça. Xd vers Webflow, c'est fait. Vidéo suivante. 40. Comment ajouter des polices à un flux Web: Bonjour tout le monde. Dans cette vidéo, je vais vous montrer comment ajouter des polices personnalisées à Webflow. Dans ce cas, nous allons utiliser Google Fonts. Je vais vous montrer comment les intégrer et les ajouter à votre design. Tu peux les utiliser. Allons-y OK, j'ai donc ajouté un titre et les polices intégrées à Webflow, un type assez limité de génériques pour Internet. Si vous voulez ajouter une police, regardez, vous pouvez ajouter une police. Cliquez dessus, ouvre un onglet séparé K, vous êtes allé sur votre site de portefeuille dense. Et n'oubliez pas, général, nous y sommes allés. Nous avons celui-ci dit polices, qui vous y amène directement. Les deux sont donc ouverts. Nous n'allons donc pas couvrir les polices Adobe. Ce sont des clés d'API assez compliquées. Ensuite, vous devrez peut-être demander à votre client d'acheter une licence pour la police et de la payer, même si vous l' avez choisie votre Adobe Creative Cloud. Oui, c'est désordonné. Une seule application Google. J'ai de la bonne documentation à ce sujet. Nous allons opter pour la plus simple, celle qui permettrait aux utilisateurs d'utiliser le plus de Google Fonts. Vous trouverez votre police sur fonts.google.com. Il existe des polices incroyables à utiliser. Vous pouvez les choisir, les télécharger, utiliser une machine à ammoniac, les utiliser dans votre design Figma ou votre design XD. Mais finalement, vous devez les intégrer à votre projet. Vous les apportez donc séparément de votre bureau. OK, donc même si vous l' avez dans Figma ou XD, cela ne veut pas dire qu'il figurera dans votre projet Webflow. Nous avons besoin de l' enfoncer dedans pour le faire, je vais trouver la police que j'utilise. J'utilise des Sans publics. L'Helvetica a envie d'être une belle ville, j'aime bien. Passons donc au flux de travail. Nous avons cliqué sur les polices des publicités et il nous suffit de dire, eh bien, ZZ aurait dû commencer par cela, ce que l'on appelle le sens public. Un sens public. C'est la partie la plus importante de ces variantes. Le problème avec l'ajout de toutes ces variantes que vous aimez, je vais les prendre toutes. Woohoo. Le problème, c'est que cela dépend de la vitesse du site. Si vous installez toutes ces polices sur votre projet de flux de travail, le chargement de votre site Web prendra beaucoup plus de temps. Et si le chargement de votre site Web prend beaucoup plus de temps, cela ne plaît pas à Google. Ils vous punissent dans les classements de recherche. Ils veulent des sites de qualité, facilement accessibles et qui se chargent rapidement, qui ne prennent pas une éternité, surtout sur mobile, dit attention. Les principaux sont 400, ce qui est normal, 700 900. Si vous venez de Font Land, c'est léger, c'est normal, C'est audacieux comme extra gras. Vous pouvez décider, vous avez besoin de tout cela. Ou tu peux décider que je n'ai pas besoin de lumière. J'ai besoin d'un italique normal, mais d'un italique régulier, qui est celui qui est là. Pour les utiliser, je projette. Vous pouvez les activer et les désactiver à la fin. Nous y reviendrons plus tard lorsque nous examinerons le référencement, optimisation des moteurs de recherche, mais vous pouvez tous les activer pour le moment. Encore une fois, il est logique de s'adresser à ceux sur lesquels vous n' offrez pas de lettre. Je peux le dire à partir de mon design. Je sais que j'ai utilisé ici, qu'est-ce qu'ils sont utilisés ? J'en ai utilisé 400 là-bas. J'ai utilisé celui-ci. Ça ne me dit rien. Tu as 400 ans. Qu'est-ce que je veux dire ? Je suis inspecteur. Il y aura un inspecteur en cours de désignation. Voilà, Dan. J'en ai eu un normal qui fait 400, et celui-ci ici, très audacieux, qui en fait 900. Je sais que certaines parties de cela seront la version légère de l'ego. Je sais déjà, cet homme, que je n'ai pas utilisé l'italique de toute façon. Soyez donc très parcimonieux sur les polices. Cliquez sur Ajouter, et c'est tout. Si vous y allez et que vous décidez ensuite d'utiliser dix autres polices. Et ce sera Lowe's, ils vont s'additionner assez rapidement. Soyez donc vigilant lorsque vous le concevez et que vous le vendez au client. Quelles polices utilisez-vous ? Il suffit de mettre deux, peut-être trois, et juste quelques poids différents, car vous ne voulez pas que votre site se charge très rapidement. C'était une longue explication de l'utilisation d'une police. Pouvons-nous en frapper un, c'est ce que nous ferons, c'est de styliser tous ceux qui frappent et ils seront tous publics. Maintenant, il ne s'est pas chargé. Pourquoi ne l'a-t-il pas chargé ? J'ai probablement besoin de rafraîchir. Rafraîchir ? Oui, vieux, s'il te plaît Voyons maintenant si cela fonctionne. appuyant sur une typographie, poke Sans There it is there. Bienvenue. D'accord, et vous trouverez ici uniquement les polices que vous avez réellement sélectionnées. D'accord ? Et celui-ci doit être noir. On y va. Parce que je tire de ma fermeture, ferme-la. Je tire parti de mon fichier Figma, qui est très gras. C'est bizarre qu'ils leur donnent des noms différents. Et en noir, extra gras ou 900, ils signifient tous la même chose. Grande police épaisse. Je vais copier et coller les tiques qui sont les suivantes. Et c'est ainsi que vous ajoutez des polices. D'accord ? C'est l'ajout de polices à Webflow. Et je vais le construire pour qu'il ressemble beaucoup plus à ceci dans la prochaine vidéo. Mais pour l'instant, nous avons ajouté des polices, c'est fait. 41. Vidéo de production 3 - Texte du héros: Bonjour tout le monde. Il s'agit d'une vidéo de production. Ça l'est. Nous devons partir ici et c'est là que nous avons terminé la dernière vidéo. Mais notre design, regardons notre design. C'est un peu comme ça, où il y a en quelque sorte deux colonnes et celles-ci sont alignées à droite. Il y a un peu de texte bleu. Donc, ce que j'ai essayé de faire dans ces vidéos de production, j'essaie de ne pas introduire de nouveaux concepts. Je les sépare pour des vidéos similaires. Et puis je l'ai simplement mis en pratique pendant que je les fais. Et tu peux regarder si tu veux, tu peux l'ignorer si tu le souhaites. Mais celui-ci, nous nous sommes retrouvés avec de nombreux problèmes en essayant de terminer ma conception et nous avons trouvé des moyens de le surmonter. Alors sautez ça, mais vous risquez de manquer bon apprentissage pendant que Dan patauge un peu, en essayant de le faire. Je pense que c'est très utile pour les gens de voir, comme si nous pourrions rencontrer des problèmes dans vos propres projets de toute façon, qui consiste simplement à démarrer, n'est-ce pas ? Allons-y. Tout d'abord, le gros problème, c'est que c'est un peu comme deux morceaux, deux colonnes. Nous allons utiliser une grille pour les séparer puis nous allons commencer à les styliser. Ok, donc la première partie, en fait, la première partie ennuyeuse est la couleur de fond. Alors allons-y. OK, la couleur de fond de cette page d'accueil est la couleur de fond de celle-ci. Je vais aller, tu sais, prendre mon tag d'ami et dire que le corps de toutes les pages aura une couleur de fond de cette couleur, je vais le rendre un peu plus sombre. Il suffit de cliquer ici sur le B pour plus de luminosité et d'utiliser ma flèche vers le bas juste pour le rendre un peu plus sombre, cette section de héros ne devrait pas avoir d'arrière-plan. Je vais donc dans Commande ou Contrôle, cliquez dessus. D'accord, et c'est que ma navigation va être blanche. Ok, on y va. Et nous allons, je vous montrerai plus tard comment l'étirer. Voyez-vous que celui-ci s'étend sur tout le pourtour ? Il se peut que vous deviez augmenter le contraste est vraiment faible. Il ne semblait pas que cela semblait assez différent quand je l'ai conçu, mais ce n'est plus le cas maintenant. C'est donc la couleur triée. Réglons cet espacement. Je veux donc un morceau pour ce côté et un morceau pour ce côté. grille serait bien. Alors allons-y. Allons donc regarder la grille. Quel désordre avec ma fenêtre. Donc, tout d'abord, mettons la grille et mettons ce H1 à l'intérieur. Voici donc ma section ici. Ajoutons une grille. On y va et on les vérifie en dessous. Il aura deux colonnes et une seule rangée. OK ? Et j'appuie sur OK en un clic ou double-cliquez pour en sortir. touchant un, tu vas entrer dans la grille. On y va. OK, et cliquons sur une grille pour obtenir le bon espacement. Maintenant, je ne vais pas mesurer cela. Je vais juste regarder ça et dire, oui, c'est à peu près aussi loin. Donc je vais survoler ici. Oui, mais c'est l'écart. Je vais saisir ces petites lignes ici. Sont encore une fois quelque chose comme ça. Vous pouvez cliquer ici et le saisir. Si vous voulez qu'il soit de 0,55, il calculera le reste. OK. Je suis content de 0,5. OK, donc c'est cette partie. Cliquons sur Terminé. Donnons-lui une hauteur minimale car quelle est sa hauteur en général ? Et sur Figma, vous pouvez maintenir la touche Option enfoncée comme vous l'avez fait dans XD. Cliquez simplement sur quelque chose comme ceci, maintenez la touche Option ou Alt enfoncée pour obtenir les mesures de tout ce qui vous entoure. Mais dans ce cas, parce qu'il n'y a pas vraiment de boîte, c'est juste l'arrière-plan. Vous pouvez utiliser des rectangles pour dire « bien carré ». Ce carré est, pouvez-vous voir les chiffres qui apparaissent en bas, d' accord, il mesure 576 pixels de haut. C'est donc ce que je veux que ce soit le minimum. J'aimerais donc que cette section de héros soit composée d'un minimum d'hommes, 556. C'est tellement mauvais. Aucune idée de ce que je viens de mesurer. Assez près. D'accord, alors voilà cette partie. Maintenant, j'ai besoin que ça descende du haut. Jusqu'où je vais cliquer dessus, maintenez mon option enfoncée. Sur un Mac Alt sur PC, il suffit de survoler ce bouton, vous voyez 187. Souvenez-vous de Dan, vous vous souvenez que vous m'avez dit une seconde à 87. Je peux donc pousser cette frappe vers le bas ou faire en sorte que cette section Harris ait une marge ou un rembourrage. Donc, si j'ajoute de la marge, cela augmentera ma taille totale. Voyez-vous que la boîte elle-même se déplace vers le bas ? Donc je vais dire non, ça va être 187. Je me suis souvenu du rembourrage à l'intérieur. Je le veux vraiment parce que ce n'est pas si grand, est-ce pas ? C'est un bon point OK. J'en ai donc besoin juste pour influencer cela. Je pourrais appliquer du style, juste la frappe ou peut-être Merci. Attends-y. OK. Il y a deux choses que je pourrais faire. Donc, ce que je vais faire , c'est appliquer un cours spécial à cela. Je vais le défaire pour me débarrasser du rembourrage qui se trouvait sur la section Harris. Et je vais le faire à cette frappe, je vais dire frapper. Je vais te donner ce qui a déjà fait l'objet d'un cours. Danger, il ne faut pas oublier que nous y avons ajouté celui qui frappe tous. Maintenant, il y a un cours ici. Que fait ce cours ? Donc, pour vérifier, c'est vous, je vais maintenir ma touche Option enfoncée. Cliquez sur ces petits chevrons. Il fait quelque chose de bleu ici. Il fait le poids et la police. J'ai juste supposé l'avoir fait avec la classe. J'ai supposé que je l'avais fait avec le titre 1 tag. Ça ne veut pas dire que tu y vas. Et maintenant, c'est tout ce que j'ai compris. Et je n'ai qu'Aereo, aucun sens public, oh, ok. Nous sommes de retour aux affaires. Du point de vue de la taille, qu' est-ce que j'ai choisi ici ? Je l'ai utilisé à 50 ans. OK, donc ici, ce sera à nouveau toutes mes pages chauffantes sur toutes les pages, soit 50. Mais je dis 51. Cela doit être intolérable pour toi. Utilisez tous les 50. Et la hauteur de ligne k, nous allons utiliser une hauteur de ligne de I, utilisez 95 % ici. Je vais le faire ici aussi. 95 % entreront, mais il existe d'autres moyens de le faire plus tard , mais en suivant le design. OK, donc je commence toujours à avoir mon âge. C'est tout ce que je veux. Celui-ci en a besoin d'un spécial qui k dans un autre mode de classe. C'est un peu comme un bloc, souvenez-vous de notre bloc BEM, des blocs génériques que je vais utiliser et de nombreuses pages. J'ai besoin d'un petit plus ici pour dire frapper le héros, parce que j'avais besoin de faire deux ou trois choses. J'ai besoin qu'il soit bien aligné. OK. Qui ne sont pas tous ceux de mon âge pour être juste celui-ci en particulier. Et en plus, j'ai besoin d'une marge de 187, quelque chose comme ça. Donc, sous l'espacement, je vais avoir du rembourrage ou de la marge, peu importe dans ce cas, ça fait 20 de quelque part. OK. Passons à 187. Saisissons-le. Si vous vous demandez tous où cela provient d' un membre, maintenez la touche Shift enfoncée et cliquez dessus. Et il indique que les valeurs proviennent du H1. Ainsi, le H1 a juste par défaut une marge de remplissage en haut et en bas. Je ne vais pas l' annuler. Calmons-nous aussi loin que nécessaire. En regardant vers la droite. Maintenant. L'autre point, c'est que j'ai aimé cet espace blanc ici comme ça. Il ne correspond pas au bord. Alors, que puis-je faire ? C'est une bonne idée. Qu'est-ce que tu en penses ? Comment puis-je l'obtenir ? Donc c'est un peu par ici. Imaginez si nous pouvions faire une largeur minimale ou maximale. Ok, donc ce que nous allons faire c'est le héros spécial, l'héroïne spéciale, d'accord, ça fait, le héros spécial juste pour cette boîte peut avoir une taille. Oh, c'est un peu à mi-chemin. Nous pouvons avoir une largeur maximale de celui-ci. Pour savoir à quelle distance, excusez encore mon rectangle, je vais dire que je veux qu'il s'agisse de ça, qui est 54550, quelque chose autour de là. Largeur maximale de cinq pixels. Décomposons-le en deux lignes. En suis-je content ? Parfois, il faut en être satisfait. Je n'en suis pas content. J'ai besoin que ce soit le cas. Je vais continuer à monter et utiliser ma touche Shift et flèche vers le haut jusqu'à ce qu'elle se divise en trois lignes. Je fais du bon travail, Dan. Je pense que c'est parce que je l'ai conçu dans Figma beaucoup plus large que ce que l'on trouve par défaut pour le conteneur. Le contenant est l'une de ces choses étranges où je peux saisir mon contenant trop petit. Vous verrez qu'il dit qu'il est verrouillé. Ils font beaucoup de travail et Webflow pour obtenir ces points d'arrêt qui fonctionneront et qui seront tous assez stylés. Le mieux est donc de le laisser maigre. Mais bon, on est arrivés. Je l'ai conçu trop grand. Je vais donc créer une classe à remplacer. Il contenait une largeur. Et il est appliqué au contenant. Et je vais juste dire, ne peux pas utiliser ça, je ne peux pas utiliser ça. Je peux utiliser la largeur maximale. Je pense que je vais dire 1080. OK ? Très bien, nous sommes plus proches du design. Maintenant, la largeur maximale est correcte, sauf que c'est là-bas. Nous avons dit que ce héros qui frappe ici est aussi large, ce qui est de la bonne taille. Mais je veux savoir où ce côté est bien aligné. Le texte à l'intérieur du héros, qui frappe le héros, est aligné à droite, mais la boîte elle-même, d'accord, ce qui s'appelle le H1 ne l'est pas, il se trouve juste par défaut sur la jambe gauche. Tout fonctionne dans la conception de sites Web, comment le transposer ? Vous pouvez le faire sur le réseau. Il y a donc le parent de la grille qui fait choses un peu générales, comme notre espacement, et nous pouvons faire la gouttière ou nous entendons, accord, c'est parti. Laisse-le tomber. Ok, peut-être un peu plus petit. Et toute la gouttière de la gouttière se trouve entre les deux, ces choses traînent les tailles nécessaires entre les deux. Très bien, donc ça suffit pour l'ensemble. Si vous souhaitez accéder à l'enfant, vous pouvez double-cliquer à l'intérieur ou cliquer sur OK , puis double-cliquer sur l'intérieur. Vous remarquerez que si je fais défiler la page vers le haut ou si je double-clique pour y accéder ? Maintenant, cliquez pour accéder à l'intérieur. Il y en a ici, l'enfant de la grille, ouah, je peux vraiment le refaire ? Très bien, pour qu'ils soient plus loin, parent, cliquez sur Terminé. Prenez n'importe quoi à l'intérieur de cette grille et vous verrez l'enfant. Donc voilà, nous examinons cette cellule ici et tout ce qui s'y trouve. Mais on peut dire qu'en fait, dans cet enfant de la grille, d'accord, il y a une cellule. Je veux que tout soit justifié comme il se doit. Hé, oh, c'est bien. Donc la bonne taille. Quoi qu'il en soit, voyons ce que je veux faire d' autre ? Faisons cette couleur. N'oubliez pas que nous avons fait cette découpe surlignée. Nous les avons déjà fait. Tu penses que tu peux le faire. OK. Donc, je veux que tu te souviennes de ce que c'était. Tu aurais probablement terminé. C'est ce qu'on appelle une balise span. C'est ce truc ici. Enveloppez-le dans une poêle. Et la span aura une classe de span que vous pouvez avoir. couleur primaire est la première fois que nous créons une classe globale , d' accord, ce sera une couleur primaire. Et ce sera cette couleur c' est celle que nous utiliserons le plus, n'est-ce pas ? Ce n'est pas une couleur secondaire. Je vais le renommer. C' est ma couleur, secondaire. Je préfère le faire selon la convention de dénomination de cette façon. Et c'est la couleur secondaire, le texte. OK, alors faisons-le pour envoyer un texto. Couleur, typographie secondaire. C'est ma couleur là-bas. Alors on y va. Un ici, celui-ci ici. Maintenant, je ne peux pas vivre avec ça. La Chine était la police. Je pensais que j'utilisais une ampoule supplémentaire, c'était en fait une 900. Ça fait 900. Ça fait 800, Dan. Ok, donc ce que nous allons faire, c'est revenir aux polices et les changer. Donc, oui, on y va. Allons-y ensemble. Nous allons donc accéder aux paramètres de mon projet pour le site. En haut, il y en a une appelée fontes. Ce sont ceux qui ont été installés. Et je suis en quelque sorte ceux-ci, mais j'en ai installé 900, 800. Tu peux les modifier, d'accord. Ce qui est un peu embêtant. Je peux donc les ajouter à nouveau, mais ils ne passent pas Sans publics ou est-ce que c'est juste taper PUB ? Et je peux en ajouter 800 ? Le problème, c'est que je suis presque sûr que ce sera probablement dans le code d' essayer de charger ces polices deux fois, ce qui va ralentir mon site. Donc, tous les deux. Et refais-le, juste au cas où. Si normal que j'en veux 8 000 une fois. Je ne me souviens plus de ce dont j'ai besoin d'autre, je devrais être bien meilleur que cet habitué. Régulier devrait être mieux préparé pour vous. Quoi qu'il en soit, on apprend des choses , d'accord, et ça va suffire. Et je vais retourner à mon designer. Tu peux y aller directement à partir d'ici. Nous pouvons revenir au tableau de bord et espérons-le, à la police ou au chargement, car c'est un peu comme réinitialiser ici. Ça va se passer, alors comment en sommes-nous arrivés là ? Parce que le héros qui frappe le héros n'était que l'élément de R BE. Ce n'est donc pas la première chose que nous avons faite pour bloquer. Ok, donc c'est sous la topographie. Il ne s'agit pas d'appeler la police ici parce qu'il y a tout ça. N'oubliez pas de maintenir la touche Shift enfoncée et de cliquer dessus. Ça vient des anciens. Et c'est une bonne chose, une bonne chose parce que, par exemple, comment puis-je y arriver ? Je n' arrive pas à le faire monter ici. C'est où ? Je peux faire l'une des deux choses suivantes. Je peux supprimer ce que j'ai fait ici ou simplement le supprimer et le rajouter en une seconde. Parce que maintenant, quand je le sélectionne, il n'y a plus d'autres cours. Je devrais être capable de passer à un tag H1 ou vous pourriez, au lieu de le faire, annulons-le. Vous pouvez simplement ajouter et taper ici et ne pas y faire du style Andy. Ensuite, vous pouvez y accéder. Plus tard, je vous montrerai comment ajouter uniquement ces éléments à une page de guide de style afin que vous n'ayez pas à les télécharger sur la page, les modifier, puis à les supprimer à nouveau. C'est bien de les avoir sur une page séparée pour le moment. Je vais le faire de cette façon. Je vais le supprimer. Je vais juste l'enlever. Vous entendez faire appel au bon sens public. Vous voyez, elle ne savait pas quoi faire, voulait avoir 900 ans, mais elle ne peut pas le faire. C'est donc un peu grisé. Je vais donc en faire 800. Maintenant. Je vais à nouveau appliquer mon style. Et comment l'appelle-t-on ? Nous appelons cela les couleurs du texte secondaires. Nous ne l'avons pas fait. Nous l'appelons héros, héros percutant. On y va. C'est mieux. Très bien, content que nous ayons fait bien plus dans leur vidéo que ce que je pensais pouvoir faire. Mais ce sera en direct lorsque vous ferez des choses et Webflow. Je sais même de quoi il parle. C'est là la grande question. Ce que j' aimerais faire, c'est m'entraîner plusieurs fois et vous montrer directement comment le faire jusqu'au bout. Mais je sais qu'il est très important de voir comment vous rencontrez des problèmes et comment vous allez rencontrer des problèmes et comment les résoudre. Maintenant, si vous êtes assis là à penser, hé, je peux trouver deux meilleures façons de faire exactement ce que vous avez fait ici. Il existe de nombreuses façons de faire exactement la même chose. Si tu peux trouver une meilleure solution. C'est un casse-tête cool. C'est un casse-tête sympa. Projets d'achèvement. C'est amusant de trouver les meilleures façons de faire les choses. C'est peut-être un peu plus rapide de le faire à votre façon. C'est peut-être un peu plus rapide de le faire à la manière de l'autre personne. Quoi qu'il en soit, c'est un projet de build et un Webflow amusants , mais c'est tout. Très bien, la vidéo de production est terminée. 42. L'espace de la hauteur de ligne après l'espacement des lettres dans le Webflow: Bonjour. Dans cette vidéo, nous allons examiner quelques points. Nous allons examiner l'espace entre les personnages, le Kooning ou tracking, comment voulez-vous l'appeler ? Nous allons examiner l' espace entre les lignes. K peut être corrélé en fonction de la façon dont vous voulez l'appeler également, la hauteur verticale entre les lignes, puis nous examinerons l'espacement des paragraphes. D'accord, donc si nous avons deux paragraphes, comment ajuster l' espacement entre les espaces informatiques une fois que vous êtes passé d'un arrière-plan d'impression. Oui, abordons ces trois points alors. Je vais faire un gros bordel à la fin et essayer de le réparer. Je vais essayer de faire semblant de l'avoir mis dans le cours parce que c'est utile pour vous de le savoir. C'est aussi parce que je n'ai pas pensé assez loin à l'avance lorsque j'ai conçu mon design et que je me suis conçu dans un trou. Vous allez également vous créer un trou. Couvrez d'abord les éléments les plus simples, puis essayez de résoudre notre problème. K est, commençons par la hauteur de ligne. C'est l'espace entre l'espace vertical entre ces deux lignes. Peut-être que vous pourriez penser que c'est vivant si vous venez d'une autre partie du monde du design. OK, alors ouvrons ça. Tu le fais avec la hauteur. C'est la question la plus simple. Mais la première chose à faire est de savoir où le faire ? D'accord, je pourrais le faire à ce cours que nous avons fait. n'y a rien de mal à ça. Mais dans ma tête, en fait, vous savez quoi, je veux probablement que l' espacement soit le même pour tous les titres de toutes les pages à venir. Il est donc préférable de le faire avec toutes les balises par défaut. Je vais donc supprimer cette classe pendant une seconde, d'accord, puis, une fois sélectionnée, j' aurai accès à ces anciennes balises H1. Et maintenant, je peux dire que je veux une hauteur de et je peux maintenir la touche Option sur un Mac, touche Alt sur un PC et simplement la faire glisser, d' accord pour l'obtenir comme vous le souhaitez. Ou regardons les mesures à partir de celles-ci, à partir de Figma. Examinons également XD, juste pour vous montrer certaines des différences et leur mode de fonctionnement. Donc, la forme physique est que je veux une hauteur de ligne ici, k de 95% ici. Et le flux de travail, on peut dire, je veux que ce soit un pourcentage de 95. On y va. D'accord, si vous l'obtenez depuis XD, XD dira qu'il y sera, qu'il est là. Ça va faire 47 pixels. Ils ne disent pas ça. Mais si vous tapez 47 sur tous ces pixels, alors est-ce que tous ceux qui travaillent, 47 plus 47 dedans, nous y voilà. Tu finis au même endroit. OK, donc c'est le début ou l'espacement des lignes. Regardons le Kooning ou l'espacement des lettres. OK, c'est sous cette option de type plus. Je travaille à nouveau sur mon ancien H1. Et celui-ci, ici, c'est où ? C'est celui-ci, l'espacement des lettres. Donc, nous n' aurons pas de pourcentages ici. Nous allons examiner les jantes et quelques autres plus tard pour obtenir quelque chose de similaire. Mais pour le moment, je vais juste, par défaut, les pixels. Je vais donc maintenir ma touche d'option, la touche Alt enfoncée sur un PC et la faire glisser vers la gauche, là où je le veux. Ça a l'air sympa. Moins de deux pixels. On y va. Minus, d'accord, c'était facile. Ça vient de commencer avec celui-ci. Regardons le suivant qui est un peu un espace entre les paragraphes ou un espace après l'espace entre les paragraphes, car cela va soulever des points intéressants. Tout d'abord, ajoutons cette classe à cela. OK, alors souvenez-vous de notre héros de classe pour le faire pousser vers le bas. Maintenant, nous allons, en fait, avant de faire cela, faisons un rapide OK. Hors contexte avant mon rétablissement. Je sais que je vais tout fabriquer. Donc je vais y aller, je vais être en dehors de cette section de héros. Ce contenant. Je clique sur ce paragraphe sur les produits de base. On y va. J'ai un paragraphe. Je vais ajouter un autre paragraphe, pas imprimer l'écran. Passons à l'ajout d'une autre commande de paragraphe D, Control E. Sur un PC, vous en avez deux. Donc, chaque fois que vous avez besoin de plus d'un paragraphe, vous devez avoir deux de ces blocs de paragraphes, ce qui est vraiment étrange, mais c'est juste un design ondulé comme c'est le cas. Tu pourrais faire semblant en retournant. Le problème, c'est qu'il est très difficile d'espacer cette lacune. Si vous êtes content de le faire, c'est très bien. Je n'aime tout simplement pas ça. Lorsque les sites Web ne l'aiment pas, il est préférable d'avoir des paragraphes tout au long. Donc, dans des paragraphes séparés, avez-vous 100 paragraphes ? Vous avez 100 de ces petits blocs de paragraphes. Maintenant, regardons l' espace qui les sépare, ou l'espace après ou comment les appeler autrement. Il s'agit essentiellement de la marge inférieure. Nous allons dire tous les paragraphes. Faisons tous les paragraphes. Tous les paragraphes. Il va avoir une mise en page. Peut avoir un espacement par défaut, cette boîte, je vais l' ouvrir. OK, donc je vais le faire. Et cela signifie que si je copie et colle ceci, tous les paragraphes que j' ai auront cet espace entre eux. Tout dépend de ce que tu veux faire. Je pourrais faire la même chose et faire la hauteur de la ligne. OK, donc vous, la hauteur de la ligne va être un peu plus grande. Cela dépend de ce que vous voulez faire. C'est l'espace après les paragraphes et l'étrangeté des paragraphes séparés. Chaque morceau doit être dans son propre petit emballage. Vous vous retrouvez avec plein de choses, parce que le web design, maintenant ça va devenir plus bizarre avant qu'il ne soit trop tard. Donc, nous allons rencontrer un problème et ensuite nous allons être presque capables de le résoudre. Nous l'avons déjà appris. Tu te souviens de notre réseau, de ce réseau ici, ou est-ce un réseau ? Grille. Nous avons ces deux sections et nous l'avons appris plus tôt. Souvenez-vous que si je fais glisser ce paragraphe ici, d' accord, ça va, d'accord, CO, deux choses. Ils vont donc entrer dans des grilles différentes. Si je continue à ajouter des éléments à cette grille, il va continuer à ajouter des éléments à la grille et les déplacer vers la cellule suivante. Ce n'est pas ce que nous voulons. Nous voulons les ajouter juste à cette première. Qui se souvient de ce que nous avons fait pour les faire entrer tous les deux ? C'est exact. On aime bien les regrouper. Et cela fonctionnera surtout ici. Ensuite, cela va faire appel à des connaissances futures que je vais simplement apprendre à parcourir rapidement ici et si vous ne le comprenez pas, ce est pas grave parce que cela fait partie du cours ultérieur. Je me suis fait un trou avec cette maquette. Donc, ce que nous voulons, c'est nous rappeler que nous avions une balise div, un bloc div. On le met dedans. Je vais juste le poser ici et ensuite nous allons y mettre la frappe. Et où se trouvent les titres à l'intérieur ? Voilà mon diblock. OK, et je vais y mettre un paragraphe pour les deux ensemble. Donc ils étaient dedans, je vais me débarrasser des autres. Et normalement, si vous placez le diblock dans la grille, d'accord. C'est où ? Je ne vois pas vraiment que c'est ma grille là-bas. OK ? Je vais cliquer sur le diblock entier de grand-mère. En fait, est-ce que je le fais de cette façon ou de cette façon ? Faisons-le ici dans le navigateur. Je vais prendre le diblock, le mettre dans ma grille, et ça ne marchera pas. Ensuite, je vais m' assurer qu'il est légèrement en retrait , pour qu'il soit à l'intérieur. Regarde ça. OK, donc ces deux-là peuvent occuper la même chose, mais vous vous demandez : « Et cet espace ? C'est là le point le plus délicat. Nous allons utiliser quelque chose qui s'appelle Flexbox, auquel j'ai toute une section qui vous mènera. Mais pour le moment, nous pouvons simplement le laisser parce que je viens de découvrir que nous n'avons pas vraiment de texte de paragraphe ici, mais qu'il pourrait y avoir un bouton qui pose le même problème, mais nous l'avons corrigé. Nous les avons réunis dans un bloc div, dans cette grille. Il est assez difficile de le faire passer à travers une grille. Juste parce que j'ai fait quelque chose de drôle, j'ai fait une sorte de largeur maximale et je veux écrire une ligne dessus, mais c' est à l'intérieur d'un bloc div, ce qu'une grille n'aime pas vraiment. Je pourrais donc dire enfant UB, alignement droit, alignement droit. Cela ne fonctionne pas. Je vais cliquer sur cette option. Je vais cliquer dessus pour m'en débarrasser. Et ce que nous pouvons faire ici avec ce double passage à Flexbox. Flexbox doit être verticale et je veux l'aligner à droite. Vous vous demandez : qu'est-ce que Flexbox ? C'est pour plus tard, si tu veux le réparer tout de suite , fais-le. OK. C'est le contraire de la grille. Grid est génial et effectue la plupart des tâches jusqu'à ce que ce ne soit pas le cas, alors vous avez besoin de flexbox. Dans ce cas, c'est assez simple. Il suffit de passer à la verticale et de le changer pour terminer. Il l'aligne donc sur le côté. Mais c'est ce dont nous allons parler de Flexbox pour le moment. Nous y reviendrons dans un moment. Très bien, nous avons donc fait un espace k entre nos lignes verticales. Nous avons fait de l'espace entre les lettres qu' après les paragraphes, copier-coller, d'accord, les membres n'ont fait que de la marge. Ensuite, nous avons découpé le design dans notre grille, mais nous l'avons corrigé en l' enveloppant dans un bloc div. Ensuite, nous avons fait de la magie avec Flexbox, mais c'est pour plus tard. C'est bon, ça y est. Je vous verrai dans la prochaine vidéo. 43. Les ombres de texte et de boutons de boîte dans le flux Web: Bonjour à tous. Nous allons regarder les ombres. Ce texte, gardez-le à l'œil. Nous allons vous montrer comment ajouter une ombre pour pouvoir la retirer de l' arrière-plan avant, après. OK, nous allons devenir un peu fous et entrer directement dans l'ombre complète où il y a plusieurs ombres. Certains d'entre eux étaient blancs, d' autres noirs. Et nous examinerons également les ombres des boîtes. Donc, soit sur les boutons, soit nous l' avons ici aussi. Sur la navigation, vous pouvez à peine le voir. Il y a un broyeur. Laissez-moi vous montrer comment les fabriquer tous les deux. Par les deux, j'entends le texte et les étagères. Ça y arrive. OK, commençons par la texture. C'est facile. Décidez de l'endroit où vous voulez, du cours auquel inscrire , puis cliquez sur le chevron pour les fermer toutes. Je vais bientôt arrêter ce raccourci. Des tas de fois. J'espère qu'il va y entrer. Mais en ce qui concerne la typographie, je vais dire Plus d'options. Et puis en bas, des ombres à cocher, des ombres faciles, horribles, horribles. C'est probablement mieux sur ce design ici, d' accord, que nous l'avons fait plus tôt. Je vais faire la même chose et j'obtiens une ombre de texte. Et ce que je vais faire en fait, c'est laisser cela là parce que nous avons une ombre maintenant, nous sommes capables de faire apparaître une partie de l'obscurité sur cette image arrière. Mais comme ça, nous, il y a très longtemps. Je peux, je vais le cacher parce que je veux le rallumer. Nous allons le supprimer. Mais maintenant, avec un peu d'ombre, nous pouvons en quelque sorte le voir. Maintenant aussi, jetons un coup d'œil à la rubrique Typographie. Maintenant. Si vous souhaitez le modifier à nouveau, il vous suffit de cliquer sur le mot. OK ? Et pour ce qui est de l'essentiel, vous pouvez le faire glisser sur la distance. C'est un peu difficile de zoomer sur les deux. C'est tout ici. Désolé, l' angle, la direction dans laquelle tu veux qu'il entre. OK. Ou vous pouvez l'utiliser pour sauter. Je ne sais pas. J'aime bien ajouter quand AT pointe un peu droit vers le bas. Et je n'aime pas vraiment le moment où les choses ont changé. Supprimez les styles d'ombres. Je n'aime pas le flou trop fort, et j'ai aimé la distance assez faible juste pour donner une ligne vraiment solide à pousser. OK. Et puis le noir ici peut souvent être trop foncé comme une sorte de jambe plus bas pour laisser passer une partie de l'arrière-plan en abaissant le curseur d' opacité ici. D'accord, tu peux aller un peu plus loin. Allons-y, cette horrible histoire. Ce que nous pouvons faire, c'est avoir, et nous allons l'améliorer, vous pouvez avoir plus d'une texture. Donc, tout d'abord, je vais passer à ma distance de 180 à un pixel et le flou à un ou deux selon peut-être deux. Et je vais baisser la couleur mais juste pour avoir un indice, je pourrais me débarrasser de ce bleu. Cliquez sur Désactiver. Cliquez de nouveau ici, cliquez ici. Donc, le vecteur bleu, vous pouvez en ajouter un autre. Je vais donc ajouter une autre ombre de texte pour faire équipe. Et parfois, c'est très agréable d'avoir un tissu interne assez solide, puis un très gros et moelleux. Nous avons une très faible opacité. Continuez à cueillir. Ok, donc il y a celle-là. Celui-ci n'a aucune distance. La distance, c'est la distance. Tu peux décider de ce que tu veux faire, d'accord ? Mais je vais parcourir une distance, encore assez faible. Mais le flou, tu peux commencer à le voir ? est peut-être ce que vous souhaitez, mais avec les ombres doubles, vous pouvez obtenir la coupe dont vous avez besoin, mais ensuite vous pouvez la retirer un peu plus de l'arrière-plan. Je vais réduire l'opacité. Est-ce cool ? N'est-ce pas ? Jetons un coup d'œil. Vas-y avec le néant. Éteignez-le. Je vais l'allumer et l'éteindre. vous suffit d' aller sur Option ou Alt, de cliquer pour Il vous suffit d' aller sur Option ou Alt, de cliquer pour le désactiver, puis d'utiliser votre fonction d'annulation et de rétablissement, qui se trouve sur un Mac Command Shift Z. Mais une gymnastique avec les doigts ou Control Shift C. Il suffit d'utiliser ça alors. OK. Tu y vas. Est-ce que je l'aime ? Oui, faisons les choses correctement. Vous pouvez en ajouter un troisième, allons-y. Puis un autre, et il n'est pas nécessaire qu' soit en noir et blanc. OK ? Et vous pouvez commencer à voir, eh bien, faisons-le et il fait du côté opposé et il suffit de faire glisser l'angle sur ce côté pour améliorer ce côté et le découper de cet arrière-plan flou. Le bleu va également être assez bas. Je veux un peu de brillance de ce côté. Qu'est-ce que tu en penses ? Bon lit. Ça pourrait être mauvais. Maintenant, quand il s'agit de ce type d'ombres, en fait, faisons l' angle de cette façon. Et je pense que je dois le baisser un peu. Je vais le laisser en haut parce que je veux vous montrer quelque chose avec cette option sélectionnée et cet ordre des couches. Donc, on voit ça en premier, ce qui est génial. Vous l'avez peut-être fait plus tôt. Et pouvez-vous voir si c'est le dos couvert par les autres ombres ? Ces deux-là n'ont pas vraiment importance car ils sont tous les deux noirs et ils essaient tous les deux de faire la même chose et le même type de mélange, alors que celui-ci est d'une couleur très différente. Ok, donc je dois m'assurer que c'est en haut. Et je vais réduire l'opacité pour obtenir ce petit indice. Vous l'avez probablement vu en ligne. Tu aimes juste quelque chose d' étrange. Le texte. Je ne suis pas content de l' ombre en dessous, mais je vais la laisser car cela pourrait être dû à la raison pour laquelle il faut faire glisser la moindre ombre de toute façon, c' est-à-dire laisser tomber des ombres sur du texte. Voyons donc comment le faire avec des boîtes. Je le ferai avec un bouton. Pourquoi pas ? Parce que je n'ai pas besoin du texte de ce paragraphe. Mais j'ai besoin d'un bouton. Donc, avec cette option sélectionnée, je vais passer à la commande E ou commande E sur un bouton enum de type PC. Pour nommer le bouton. Je pense que plus tôt j'ai créé une classe de boutons COMING BY. Nous l'avons fait. Et c'est cette couleur. Est-ce la bonne couleur ? Bref ? Laissons-le. Faisons juste l'ombre. L'ombre n'est pas dans la typographie, elle se trouve sous les effets et les ombres des boîtes. OK, maintenant, est-ce que je veux personnaliser le bouton générique, c'est la question, eh bien, activons-le. Tu vas dans l'ombre. Tout le reste se ressemble. Il y a quelques autres petites options avant de partir et de parler du fait que le nom des classes a la taille k, c' est-à-dire que si vous avez déjà vu de la diffusion sur des éléments tels que Photoshop et Illustrator, le pareil que ça. Donc, la distance, la distance, flou, le flou et la taille. C'est comme tout ça. Est-ce que ça pousse les bords ou est-ce vraiment uniforme ? Vous pouvez en faire des très moelleux ce que vous ne pouvez pas faire avec le texte. Juste quelque chose qui n'est pas utile. Vous pouvez le faire à l'intérieur pour le trouver. OK, donc disons que je veux faire quelque chose de bien. Je vais faire ma marine parce que c'est ce que j'aime. Je vais aller à une distance d'un, une couche et la taille d'une. Et je vais baisser cette couleur juste pour donner un indice. Qu'est-ce qui ne va pas ? Il se passe quelque chose avec ça. Le fait que j'aie une ombre doit peut-être être un peu plus floue. N'ayant pas un bon château de toute façon, je n'aime pas vraiment les ombres. Cent dollars ça ou je ne sais pas si je peux faire un bien. Et parlons-en. Donc c'est comme ça que vous éditez, n'est-ce pas ? Parlons-en, je vais me débarrasser de tout ça. Je vais donc cliquer sur Option ou Alt. OK, où dois-je l'appliquer ? Boîte. Et cette ombre de boîte peut être utilisée encore et encore. C'est donc probablement la meilleure solution à l'échelle mondiale. Je ne vais pas utiliser ce truc fou si ce comme faire du marketing sur ma page d'accueil, d'accord ? Sinon, j'en ferais un style global. Ce que je vais faire, c'est prendre une boîte. Ça va juste être, euh, ça peut être n'importe quoi. OK. Juste un tout petit vieux est en fait un dégroupage ou une œuvre dans ce cas, peu importe, cela s' appellera box-shadow parce que c'est comme ça qu'on l'appelle. Et il devrait être facile de trouver la recherche en utilisant le mot ombre. Cela signifie que je peux l'appliquer bien plus que ce bouton. Je peux l'utiliser pour toutes sortes de choses. Si j'ai besoin de l'ajuster, je peux ajuster celui-ci global et il le fera sur tout le site, d'accord, au cas où je le déciderais, au cas où je le déciderais, parfois tu as choisi une ombre et tu te réveilles le lendemain, Vous vous demandez : « Pourquoi y en a-t-il ? Donc, box-shadow et ensuite arrange-le de cette façon. Ok, donc je vais décider que celui-ci est nul, ça va baisser un peu. Mais si vous le faites de cette façon, cela signifie que je vais le supprimer. Je peux l'appliquer comme si c'était un gang supplémentaire. Donc je peux dire que Shadow Here fait son box-shadow. Si je l'applique à d'autres choses, comme cette ombre de boîte de navigation, on y va, je peux aller l'obtenir. Une fois de plus, pour ajuster la page globale, vous créerez un style sur cette page plus tard, afin qu'ils y soient tous. Pour le moment. On peut juste le saisir, récupérer Box-Shadow. Et si nous y apportons un ajustement, augmentons la distance. Tu peux le remarquer ? Il le fait pour tous, pas seulement pour celui-ci. De bons vieux trucs mondiaux. On y va. Et c'est Texts. C'est bien sur celui-ci. House, pousse-le. Celle-là. Il s'agit de repousser les limites. Et quel bon Drop Shadow devrait être. Ensuite, nous avons examiné Box Shadow. Nous l'avons fait pour un bouton, mais cela fonctionne pour tout type d'élément de boîte. D'accord, c'est ça. Je vous verrai dans la prochaine vidéo. 44. Comment créer des swatches mondiaux dans Webflow: Bonjour tout le monde. Dans cette vidéo, nous allons examiner des échantillons. Vous pouvez voir en bas que j'ai des échantillons préfabriqués prêts à l'emploi, des directives de marque, des couleurs, des couleurs d'entreprise. cool, c' est qu' une fois que vous les avez configurées en tant que couleurs globales, ce qui est très facile, vous pouvez les parcourir et les modifier, ainsi que toutes celles qui y sont connectées. Voyez-vous qu'ils changent tous en même temps ? Super pratique. Très bien, alors allons-y, faisons des échantillons globaux. Et à la fin, nous allons mettre de l'ordre dans certaines de nos polices pour obtenir deux pour une dans cette vidéo. Très bien, allons-y. Bonjour tout le monde. Faisons un échantillon global. le ferais rapidement et ensuite nous le décomposerons un peu plus. Je vais le faire avec Command E ou Control E sur un PC. Et je vais taper div. Je vais juste ajouter un bloc de disque maintenant plutôt que d'ajuster quoi que ce soit ici, accord, alors casse-le avec la sélection. Dans ce cas, je vais faire des arrière-plans et continuer à choisir la couleur de mon entreprise que j'utilise, ou du moins celle du design. OK, et puis cliquez dessus, que mon ami soit un échantillon mondial. Ça finit là. Il y a une petite étiquette dessus. C'est en quelque sorte le symbole universel du monde. Il lui a donné un nom de coup d'État, et c'est ainsi que vous le faites. Cliquons sur Créer. Cela signifie simplement que si je crée autre chose plus tard, comme ce navigateur et que vous vous dites « oh, je veux utiliser ce rose ». Je n'ai pas besoin d'utiliser ma pipette ou de le taper. Je peux simplement cliquer sur cet échantillon réutilisable, l'échantillon global. Refaisons-le, un peu plus lentement, parce que je veux vous faire comprendre ce que tout cela fait. En fait, examinons le point principal d'un échantillon global et pas seulement un échantillon ordinaire. Et un échantillon global signifie que si je clique sur celui-ci en bas et que je saisis ma couleur, je passe à celui-ci qui dit Modifier. Je suis en train de modifier l'échantillon global, qui s'appelle actuellement hot pink. Et regardez ceci quand je le fais glisser et que je le modifie, pouvez-vous voir que cela s'applique à lui ? OK, et c'est connecté, c'est pour ça que c'est mondial. Cela signifie que lorsque je fais un ajustement ici, si le client finit par choisir une couleur légèrement différente, j'ai utilisé cet échantillon global à maintes reprises. Il sera ensuite mis à jour. Il peut également être utilisé dans du texte. Donc ce texte ici, et j'y vais et je vais tout saccager et tout gâcher. Mais l'autre point positif, c'est que la couleur que nous avons faite Background Color Swatch utilise la même couleur. Il s'agit donc de la couleur du texte, mais vous pouvez voir que les échantillons globaux sont toujours là. Et encore une fois, je peux le modifier, peu importe où je ne suis pas vraiment. Vous n'avez pas besoin d'être amené dans cette division d'origine, mais vous pouvez en voir une de modification , elles changent toutes. C'est pourquoi les globals sont pratiques. Il y a des moments où vous ne voulez pas qu'ils soient connectés. Vous souhaitez l'utiliser, mais ils peuvent être ajustés pour le rendre un peu plus sombre. Disons que je vais annuler cela. Disons que c'est étroit en haut ici, il doit être plus sombre car les liens du texte au-dessus doivent être proches, mais je vais juste réduire la luminosité. Donc, ce que vous pouvez faire, c'est appliquer cet échantillon , puis cliquer sur celui-ci pour dire « casse-le » et j' aime juste le déconnecter. Et maintenant, quand je le change et que utilise la luminosité de saturation des teintes, vers le bas, vers le bas, vers le bas, vers le bas, vers le bas, vers le bas, à nouveau vers le bas. Je vais maintenir le quart de travail et le faire baisser. Voyez-vous qu'il n' y a plus globale, juste une couleur autonome. OK, regardons un peu plus. Ajoutons-en un de plus et nous allons le parcourir un peu plus lentement. Ajoutons donc le bleu à partir de cela. Il a été utilisé, encore une fois, vous pouvez simplement le retirer du design. Vous pouvez utiliser ce nombre hexadécimal. Vous pouvez donc passer en revue et dire : « D'accord, je vais rompre le lien sur ce point. Je vais créer un nouvel échantillon en le tapant ici. OK, tabulez. Voilà mon bleu. Si vous avez les nombres H est B, vous pouvez les saisir. La plupart des gens ne les auront pas, mais peut-être que dans les spécifications de votre entreprise ou les directives de votre marque, vous pourriez avoir le RGB. Il vous suffit donc de cliquer sur l'un de ces gars. Vous pouvez voir qu'il bascule entre le RVB et couche de saturation et de luminosité des teintes. Donc tu pourrais le faire. L'autre est peut-être de faire glisser un logo et de le retirer de celui-ci. Alors je vais y aller, qu'est-ce que je vais faire ? Commande ou contrôle E ? Je vais aller à l'image, appuyer sur Entrée, choisir Image. Je vais aller le télécharger. Et c'est juste quelque chose pour mon dernier projet. Il s'agit plutôt, par exemple, où sont mes sponsors ? Tu utilises la mienne. Voici donc mon logo. Et vous pouvez, si elle est sélectionnée. En fait, cliquons sur ce truc. Je vais créer une nouvelle personne que j'ai envie de faire. Oui. OK. Je vais donc utiliser mon pipette, le retirer du logo. OK, maintenant je peux en faire un échantillon global et ce sera mon BYOL. Au vert. Vous pouvez utiliser celui par défaut. C'est incroyable le nom des couleurs qui fonctionne là-bas. n'y a rien de vraiment bon. Chaque fois que je clique sur quelque chose, je me dis : « Ah oui, je trouve que c'est un super nom pour ça. Alors que c'est le cas, j'ajoute du blanc à la fin de mes couleurs. J'y vais. C'est orangé. Pour contourner le fait que je n'ai pas vraiment un bon nom pour moi. Donc workfare, workflow, vous pourriez le tirer de là. OK, l'autre chose que nous pouvons faire est que vous travaillez peut-être à partir d'un document. J'ai ouvert celui-ci dans notre classe de fragments, c'est que selon la personne qui a créé votre projet, c'est à ce moment-là que nous l'avons confié à quelqu'un comme vous tant que concepteur ou développeur de flux de travail, et vous Je peux voir ces couleurs ici. J'ai fait ce petit pas pour leur faciliter la tâche. Pour moi, ce que je peux faire, c'est aller à Inspect comme nous le faisions auparavant. Je peux cliquer dessus et voici le numéro hexadécimal. Hicks est bizarre. Ce n'est pas bizarre. C'est en fait du RGB. Les deux premières lettres représentent les deux secondes lettres G, à côté d'un nombre hexadécimal. C'est une sorte de version Web, bien que les internautes soient RGB maintenant aussi, je l'ai tapée pour la personne qui pourrait l'utiliser. D'accord, vous pouvez le voir ici dans le CSS. Ensuite, prenez l'un de ces conseils sur la diligence de la personne qui réalise le projet avant vous, vous pourriez obtenir un autre grand guide de style. Dans mon cas, c'est assez simple quand nous avons créé, dans le dernier cours, tous les guides ébréchés le rendent un peu pratique en un seul endroit. Vous pouvez le voir ici aussi. Jusqu'à présent, nous n'avons fait que du primaire, secondaire et un accent. Mais vous pouvez voir que vous pouvez avoir la version principale 12.3 pour les différentes nuances. Cela dépendra de la complexité de vos concepteurs. Celui-ci utilise juste ces deux couleurs. Alors, d'accord, retournez à Figma, retournez sur le plancher en bois. Tu peux y aller maintenant, je vais juste ajouter le reste des couleurs pour mon projet parce que je ne veux pas vraiment ce vert. Comment les supprimer ? En fait, avant que tu partes, c'en est une bonne. Ai-je créé celui-ci est déjà créé. Et supprimons celui-ci. Je vais prendre mon bleu, dont je sais déjà qu'il est là-haut. OK, en l'ajoutant, je vais appeler celui-ci et j' appelle le bleu ciel. Super nom. J'ai comme un blanc cassé et le fond ici. OK, donc je vais en créer un autre. Et je vais te faire un saut en hauteur. Et tu peux le voir ? Je l'ai fait dans le mauvais sens. J'ai donc créé cet échantillon , puis je l'ai modifié et il est toujours bleu ciel. Je vais donc annuler ça. Je vais le faire, c'est de cliquer dessus. Ensuite, utilisez la pipette pour obtenir la bonne couleur. Ensuite, appuyez sur plus de fumée blanche, cool, super. Nommez-les facilement impressionnés. Et n'oubliez pas que si vous devez couper pour qu'il ne soit pas connecté au reste du monde, cela ne changera rien d'autre. Fais-le. Et si vous avez besoin de modifier l'option globale, de la sélectionner, de la modifier, puis de cliquer sur cette option et vous pouvez modifier Annuler parce que j'aime bien celles-ci. Je vais ajouter du noir uni et du vieux blanc uni. En fait, faites-le de la bonne façon. Je vais donc y aller et le faire glisser dans les coins. Si, si, à celui-ci on est blancs, alors je vais faire du tout noir. En fait, j'ai quelques autres couleurs ici. C'est celui-ci ici. C'est un peu un gris bleu que j'ai fabriqué. On y va. Je vais aller chercher celle-là. Alors allons-y et cela sélectionné, vous et moi avons un peu tapé pour que cela change réellement. Ils vont te voir. Et un gris ardoise légèrement foncé. Bleu-gris. Merci Figma. Maintenant, ces deux-là sont probablement trop proches. Je vais les réorganiser. Vous ne pouvez pas les réorganiser. Pourriez-vous utiliser pour pouvoir les réorganiser ? Peut-être qu'ils ne le font pas. Ces deux sont très proches. J'ai l'impression que je vais accidentellement cliquer sur les deux. Ce que je veux vraiment faire maintenant, c'est les supprimer tous et les mettre en blanc au début, et laisser un espace entre eux. Et utilisez ce type de blanc fumé un peu plus loin. Mais je vais le laisser pour le moment car il y en a assez. Ok, et la dernière chose que je vais faire, c'est que ça n'a rien à voir avec les couleurs. Il suffit de le faire pour le reste de ce cours. Et à cause de la police, je vais me lancer dans cette bataille qui consiste à changer de police à tout moment. Nous l'avons changé ici pour le titre. Nous l'avons fait pour nos H1, X1. Nous avons fait en sorte que cela soit public, d'accord. Et puis ce bouton à y, puis l'ajouter au bouton également ? Non, car en regardant mon design, je ne fais appel qu' au bon sens public tout au long de ce design. Donc, ce que je vais faire, c'est qui s'en souvient ? Comment puis-je le changer globalement pour tout sur toutes les pages, partout, d'accord, et moins encore et c'est le corps. Cliquez donc en haut ici ou à l'extérieur. Je vais changer d'image. D'où le tire-t-il ? N'oubliez pas Shift, Click, Buddy ou Pages. Donc pas ce corps. Il y a un style ici. Je vais devoir le supprimer et l'ajouter à nouveau. OK, je suis en train de faire cette étude. C'est une bonne chose. J' ai cette classe corporelle ici et tu te demandes : à quoi ça sert ? Eh bien, je ne sais pas. Je n'y arrive pas Je ne l'ai pas fait. Je ne sais tout simplement pas. Il fond cette couleur. Au lieu du problème d'avoir la balise body avec une classe que vous avez nommée, ou du moins Webflow nommée en votre nom appelée body et d'y ajouter cette couleur, c'est très bien. Le problème, c'est qu'à la prochaine page que nous créerons, vous devrez y appliquer ce style. Et en fait, je vais juste supprimer cette classe. Je vais cliquer dessus. Je vais dire que toutes les étiquettes corporelles ont un arrière-plan de cela. C'est bizarre qu'ils aient tous les deux postulé et vous dites que c'était une grosse perte de temps en cours. Et en ce qui concerne la topographie, je vais dire non pas Arial, je vais dire mon sens public, public, public. OK ? Quelle est la valeur par défaut ? Et nous utiliserons le mode normal , puis je vais le remplacer sur tous les autres styles. Cela signifie donc que le texte de mon bouton ici est maintenant difficile à voir, mais si je le parcourt, pouvez-vous voir tout ce qui est du texte dans ce document, sauf indication contraire, pouvez-vous voir tout ce qui est du texte dans ce document, sauf indication contraire, ce sera public Sans normal. Et je vais regarder la taille du corps de la copie que j'utilise. Quelle est la taille la plus courante que j'utilise ? J'essaie de le trouver sur mon design ici, en zoomant. C'est l'application, ce sera la taille de mon corps de copie. Qu'est-ce que j'ai décidé ? Beaucoup de sauts. Je sais que ce sera ma taille la plus courante. Ça va être 16. Donc je dois dire qu'en fait, étiquette de mon ancien pote aura 16 ans. Et la hauteur de ligne, où est la hauteur de ligne, est de 26. Je vais entrer ici et taper 26. Vous remarquez que cela a changé et a changé. Il est donc très important de faire le body tag dès le début car vous finirez par démarrer ce bouton parfaitement. Il utilise sa hauteur de ligne parce que nous utilisons du texte à l'intérieur. Donc, vous avez 24 ans. Faisons en sorte qu'il soit vraiment petit. 12, vous voyez que la taille réelle du bouton change. Donc, commencez par corriger tout cela, en commençant par cette balise corporelle, puis passez à la couleur du texte. Continuez à parler à la mauvaise personne. J'utilise, pas du noir, j'utilise cet A3. A3, A3. Tu vois, je vais dire « body tag » ou « pages de texte  », ça va faire trois. Tu vois, très similaire à ce que nous avions. Et c'est tout. Ou les body tags sont terminés, débarrassés d'une classe. Une autre chose que nous pourrions faire maintenant, juste pendant que nous sommes ici, c'est : devons-nous ou ne devrions-nous pas faire ? Nous avons dit cela par souci de bon sens public. Souvenez-vous très tôt que nous n'en avons plus besoin. Je pourrais donc le parcourir parce que cela vient du fait de maintenir la touche Shift enfoncée et cliquer sur l'enveloppe et de dire que cela provient en-têtes H1 ou H2 H1. Je l'édite là-bas. Je devrais le parcourir et l'enlever. devrais-je pas avoir à le faire. C'est juste comme, je ne sais pas, un trouble obsessionnel-compulsif. Mais j'essaie de vous faire comprendre que ce que vous devez faire et ce que je fais probablement en pratique ne sont pas les mêmes. Je le laisse probablement. D'accord, mais je vais cliquer ici, Commande E, appuyer, lancer. Et vous pouvez voir que je veux que mes titres soient étiquetés et je dirais que c' est vraiment continu aussi. C'est drôle comme si tu voulais appuyer sur Aucun. C'est ma réaction naturelle. Ce n'est pas ce que je veux faire. Je veux l'éteindre. Je me souviens que vous maintenez la touche Alt ou Option enfoncée pour dire « ne faites rien ». Et c'est comme, Hé, mais c'est revenu au bon sens public. Mais ce coup ne signifie pas que c'est public Sans, je maintiens la touche Shift et je clique dessus. Ça vient de l'étiquette de mes anciens potes maintenant, est-ce que ça a du sens ? Cela signifie simplement que plus tard , si quelqu'un y va, d' accord, nous n' utilisons pas de Sans publics, utilisez Arial parce que nous en avons deux vous donne les titres à venir pour le trajet, pas seulement nous devrions le faire séparément. Donc, juste en essayant de vous donner que vous devriez faire quoi, compte tenu moment où vous faites ces choses, vous devez parfois faire marche arrière juste pour nettoyer les choses, faire du bien. D'accord, des échantillons et de la topographie s'y sont faufilés. Très bien, c'est tout pour la vidéo. Je te verrai le prochain. 45. Quel est le ratio de contraste des couleurs dans le Webflow: Bonjour tout le monde. Dans cette vidéo, nous allons examiner le rapport de contraste. En gros, cela signifie à quel point vos textes sont lisibles par rapport à l'arrière-plan. Et cela dépend de la couleur, de la taille de votre police et du poids de votre police. On vous donne un certain nombre et une note de passage. Il a obtenu AAA. Qui, qui ? Laissez-moi vous montrer comment cela fonctionne et ce que cela signifie pour votre site Web de l'ignorer. Très bien, rapport de contraste. Eh bien, commençons par cette rubrique. Je vais donc le sélectionner et vous vous occupez de la radio consciente, typographie et de la couleur k et non des couleurs de fond. J'ai donc sélectionné celui-ci. Je vais cliquer dessus. Cela me montre qu'en utilisant cet échantillon global, je réussis le test. C'est un AAA k. C'est un très bon contraste entre la couleur de premier plan, qui est ma teinte, et la couleur de fond, qui est mon blanc fumé. Vous verrez ces lignes apparaître ici en vous demandant ce qu'elles sont. Ce sont les lignes de ratio conscientes. Vous pouvez donc voir que je suis un AAA. Si je le déplace vers le haut, pouvez-vous voir que je suis dans le WBS et qu'au-dessus , il y a phi. D'accord, donc ce contraste n'est pas considéré comme suffisant pour être lisible en arrière-plan. Nous essayons maintenant de concevoir pour toutes les formes et toutes les tailles et pour différentes capacités de vision. C'est pour cela que cela nous donne un coup de main utile, c'est un peu restrictif en termes de design. Regardons celui-ci rose ici. Donc ce bouton rose ici, ce n'est pas l'arrière-plan. Vous ne trouverez pas le rapport de contraste. Et ici, il s'agit de la typographie. Je dois donc trouver la topographie qui fait face à cela parce que pour le moment, regardez, elle me dit que c'est du gâteau noir qui vient. Si je déplace la souris et que je clique dessus sur tous les corps, on sait qu'elle est blanche. Je peux te voir. Tu es blanc. OK. Donc la façon de le brouiller, c'est que je vais vite le changer en blanc. Maintenant, ajoutez-la à cette classe en tant que classe Bhatia, juste en blanc, juste pour que je puisse voir à quel point elle est mauvaise. Et c'est le plus mauvais de tous les paris contre cette couleur rose, mon rose vif. C'est dire que c'est vraiment un échec et que pour s'en approcher, il faut que ce soit fondamentalement noir. C'est donc le compromis que nous allons devoir faire ici pour ce bouton en particulier, car c'est un bouton très important. va donc falloir le passer à notre noir. Nous allons l'utiliser ou il échoue toujours pour l'instant. Ce n'est pas le cas. C'est un, c'est un système de points. Il y a des A et des doubles A utiles. Il y a eu un WA est AAA utile. Vous allez vraiment regarder ce chiffre ici, quel point il est bon ou mauvais. De toute évidence, quelque chose comme ça va échouer gravement parce que je ne le vois pas. C'est un lit gratuit. OK. Et c'est bon pour celui-ci ici. À quel point est-ce que c'est un échec ? Pas 100. Tu sais, tu n'aimes pas perdre Internet si c'est en dessous de ce seuil. Mais c'est une bonne jauge pour vous aider à vous faire une idée de la distance dont vous vous souvenez Nous pourrions peut-être jouer avec la taille le poids de la police pour modifier le rapport de contraste. C'est intéressant, je pourrais décider lancer les prises de documents et peut-être de faire en sorte que le bouton ait une ligne à l'extérieur plutôt qu'une couleur, comme une bordure à l'extérieur. Mais en disant que cela semble assez limité en termes de type de compression réelle du Caliban que vous pouvez utiliser. De toute évidence, ce seront des cas où l' accessibilité devra être 100 % aussi bonne que possible. Surtout si vous poursuivez ce rêve de moteur de recherche. Et vous avez affaire à un public plus large. Si vous faites quelque chose de beaucoup plus artistique ou créatif et que vous essayez de repousser les limites. Le rapport de contraste est difficile à gérer, juste pour info, il y a des choses que vous pouvez faire pour les sites existants, comme c'est plutôt sympa ici qu'ils aient cette option. Mais vous pouvez aller sur Google, avoir quelques options où, disons, je veux tester cela. Revenons-en à, je vais l'annuler. Je reviens donc à mon texte blanc et à faire, à faire et à faire. OK. Je vais le laisser là. Et je vais publier le site parce que Google a besoin de voir qu'il est publié pour les malades, le domaine. Et ce sont des outils pratiques en général. Il est donc publié. Je vais récupérer le lien, copier, et je vais le coller dans celui-ci ici. La mesure oblique du développement Web est un bon aperçu générique d'un site Web. Nous n'allons pas tout passer en revue ici. Cela sort du cadre de ce cours, mais nous allons examiner l'accessibilité juste pour prouver qu'il ne faut pas ignorer le rapport de contraste, car Google sait que c'est très simple. Il va indexer vos pages et c'est parti, d'accord, vous obtenez moins d'informations et vous ne parvenez pas l'accessibilité comme les rats l' ont fait. Et où se trouve-t-il ? Vous y voilà. Bouton Maintenant. Elle le sait. C'est un faible contraste , vous pouvez donc le parcourir et en savoir plus. Mais c'est le compromis, c' est que vous pouvez voir l'accessibilité. Cela n'en fait qu'une partie. Vous ne l'avez pas placé en bas des classements de recherche. C'est à 84 ans, c'est jaune, ça ne l'est pas. D'accord, mais ce n'est pas vert. Vous devez donc décider de l'objectif de votre projet et de la mesure dans laquelle vous voulez le poursuivre, d'accord ? Tous les rapports de contraste. Parfois, le texte est simplement décoratif et ne représente qu'une petite partie d'une grande page parce que le nôtre est assez bas parce que c' est comme si nous n' avions pas grand-chose sur notre site. Cela occupe une grande partie de ce qui est disponible k. Donc, tous les types d' appels à l'action, tous les boutons importants doivent avoir bons rapports de contraste et certains des plus les objets décoratifs n'en ont peut-être pas besoin comme ça, mais en voici une petite partie. Je n'ai pas aimé ça de toute façon, il fait assez clair maintenant et l'ombre projetée, ça fait un peu couler. Mais vous venez d'y aller, vous pourriez être comme si cela ne valait pas la peine, quels que soient les points de style que vous recherchez. Je suis en train de déambuler bon, ça y est. C'est le rapport de contraste. Je te verrai dans la prochaine vidéo. 46. Fond de géant dans le flux Web: Bonjour tout le monde. Dans cette vidéo, nous allons voir comment insérer ce dégradé en bas. Je vais vous montrer comment l'ajouter. Montrez-vous également des endroits intéressants pour vous renseigner sur d'autres sites et comment les emprunter sites tels que dribble directement depuis Webflow. Très bien, créons des dégradés, d'accord, pour en faire un dégradé de fond, nous allons styliser nos sections. Nous allons donc simplement ajouter une section au mauvais endroit et la modifier. C'est juste en arrière-plan. Nous utilisions la couleur jusqu'à présent, d'accord, mais il y a ce petit avantage  : en fait, utilisons le dégradé de fond. Elle est là, elle est laide en noir et blanc. Pour ajuster les couleurs, il suffit de cliquer sur l'une des extrémités, soit dans, d'accord ? Et puis tu cliques ici, d'accord, pour qu'il soit noir et que tu puisses choisir tes couleurs. Je vais choisir celui-ci et l'autre bout. Ça m'attend un peu, je veux revenir au dégradé de ce truc qui apparaît, tu dois un peu cliquer et puis ça s'en va. Tu y vas. Voilà mon horrible dégradé. Je ne sais pas. Années 1980. En fait, cela grandit sur moi. Bref. Voilà comment procéder, d'accord, à sa boîte annuelle, vous pouvez également le faire sur votre bouton. Ça n'a pas à l'être. Nous avons une couleur ici, mais nous pouvons y ajouter un dégradé. Il y en a une linéaire et notre radio et notre radio, ce qui signifie juste autour de E1, annulent cela. L'autre chose, l'autre chose, c'est de le modifier, il suffit de cliquer dessus. Et tu peux jouer avec l'angle parce que je vais changer le mien dans un moment. Vous pouvez changer ces touches de gauche à droite. Voilà donc les bases. Si vous recherchez de bons dégradés, j'ai aimé les gens. Alors gradient.com, il y a juste quelques jolis dégradés parmi lesquels choisir. Et lorsque vous en trouvez un qui vous plaît, celui-ci ici, vous cliquez dessus. Il y a ce numéro de choix. Revenez à Webflow. Je peux cliquer ici, et au lieu de mon rose vif, je peux simplement coller celui-ci et commencer à créer mes dégradés de cette façon. Vous pouvez ajouter une troisième couleur. Parce que même certaines d'entre elles saisissantes vous pouvez voir qu'il s'agit de trois couleurs. Disons cette couleur centrale ici, je peux cliquer dessus, la copier, entrer ici. Et ce que vous faites, c'est que vous avez ces deux couleurs. Il suffit de cliquer n'importe où ici. Vous pouvez avoir autant de couleurs que vous le souhaitez. Cliquez sur la ligne réelle. Ici, collez-le. Et vous pouvez avoir trois couleurs. En fait, je vais accélérer et le faire. Très bien, on y va. Et d'autres choses que tu pourrais faire. Donc, le dégradé est sympa. Parfois, il est bon de regarder le travail des autres. dribble est donc un excellent endroit pour trouver l'inspiration. Et il y a toujours de jolis dégradés pour stimuler la créativité. Et quelle petite astuce sympa, je vais faire glisser cet onglet pour qu'il soit séparé, qu'il y ait mon Webflow et mon dribble. Donc je vais réduire le dribble. Pour que je puisse le voir. Hé, on y va. Et je vais réduire la taille de Webflow. C'est un peu une gymnastique de fenêtre. Tu ne pourras peut-être pas le faire. Nous trouverons un truc délicat sur votre moniteur de taille, gay. Mais ici, maintenant, je vais aller à mon Gradient. J'ai donc sélectionné ceci. Je vais supprimer cette couleur. vous suffit de cliquer dessus et de faire glisser, glisser, et finalement, il disparaît. Il suffit de cliquer dessus et de le faire glisser pendant un moment. OK, et choisissons nos deux couleurs. Je vais l'utiliser, cliquer sur cette couleur et utiliser l'outil pipette. Et en fait, je dois d'abord trouver quelque chose qui me plaît. Donc, je cherche juste les résultats. Disons que nous avons aimé celui-ci, Eyedropper, choisissez-le. Ensuite, je vais cliquer sur Désactiver, cliquer sur cette extrémité. Là, cliquez dessus. Vous pouvez parcourir et approprier les gradients des autres. Les dégradés ne sont pas des marques déposées. J'en ai volé un à Old Horizons. C'est plutôt sympa. Donc, oui, vous pouvez faire ce genre de gymnastique pour obtenir des couleurs ou du moins des dégradés. D'accord ? Je vais également ajouter une hauteur minimale à la section simplement parce que c'est difficile à voir. Il est difficile de voir ce dégradé quand il est assez serré. Et nous savons que si nous commandons Shift P, Control Shift P pour prévisualiser, vous pouvez le voir disparaître. Donc, à une hauteur minimale, juste pour qu'on ait des trucs dedans. Donc, cette section ici ne sera pas le nom de la section. Je vais renommer celui-ci et celui-ci sera la section froide plus bas parce que je n'arrive pas à trouver comment l' appeler, parce que mon design nous prend ce morceau inférieur. OK, et je vais me démarquer de ce genre de choses et je vais juste avoir un amateur de section terriblement nommé. Et donnons-lui une hauteur minimale. Donc, en dessous de la taille, et n'oubliez pas que nous n'utilisons pas la hauteur parce que nous sommes intelligents. Nous utilisons une hauteur minimale afin qu'il puisse s' agrandir si nécessaire. C'est bon, c'est ça. En fait, je vais y aller maintenant et ouah, je vais te quitter maintenant. Je vais le mettre dans le bon dégradé. OK. Je veux mettre celui-ci dedans, mais oui, tu vas à la vidéo suivante. Je te vois dans une seconde. 47. Navbar conteneur pleine largeur dans Webflow: Bonjour tout le monde. Dans cette vidéo, nous allons sortir cette section de héros ici et agrandir pour qu'elle soit complète. Nous le ferons également sur notre site de portfolio. Nous allons faire en sorte que cette boîte blanche de navigation aille jusqu'aux bords, tout en laissant une section au milieu que nous avons conservée pour la navigation, nous améliorerons également cette partie inférieure pour y avoir une section à l'intérieur, Voyons comment créer toute la largeur les navigations et les boîtes à conteneurs dans Webflow. Très bien, donc d'abord, regardons le projet précédent. J'aimerai un peu le club que nous avons connu. Tout se trouve dans un seul contenant. Je vais l'épingler là. OK. J'ai donc un contenant et tout se trouve à l'intérieur et j' ai l'impression que vous ne devriez avoir qu' un seul contenant. Cela n'est pas vrai. Il peut contenir de nombreux conteneurs selon que vous souhaitez que tout soit restreint dans la partie centrale ou que vous souhaitiez que tout soit restreint dans la partie centrale ou que vous souhaitiez que tout soit limité dans notre conception où le casse-tête se propage Il en va de même pour cette partie inférieure du dégradé. Commençons donc par cette navigation. Ce que je veux surtout faire, c'est supprimer la section de navigation que j'ai créée. Et je veux juste vous montrer sous l' ajout en bas, sous les composants, il y en a une appelée barre de navigation. Si j'ajoute ça à mon design, essaie en quelque sorte de l'obtenir. Que je reçoive le cours n'est pas là. Et si je le fais glisser hors de mon conteneur, regardez ce qui se passe par défaut, c'est en fait structuré avec cette section pleine largeur. Et à l'intérieur se trouve un contenant qui contient le bit pour mon logo et tous mes boutons de texte. C'est donc un peu déjà fait pour nous et pour cette structure. C'est donc ce que nous allons reconstruire. Nous n'utiliserons pas cette barre de navigation par défaut car nous n'avons qu'un seul bouton. Nous n'avons donc pas besoin de toute cette complexité ici. Donc je vais me débarrasser de toi. Je vais annuler jusqu'à ce que ma section de navigation revienne. En gros, tout ce que je veux faire, c'est prendre cette section et la sortir du conteneur, ce qui est génial. Maintenant, il est sur toute la largeur. Il ne se passe vraiment rien avec ce conteneur. Il y a un style de box shadow, mais il ne se passe rien de tel. Maintenant, je veux y mettre un récipient. Donc, je suis d'accord. Pour aller voir Ed Grad le conteneur, voyez si vous pouvez le mettre à l'intérieur. Et puis on y va, on a fait cette section. Je vais ajouter un bouton ici pour le moment. Je vais prendre celui-ci, copier celui-ci, le mettre dedans. Vous pouvez voir qu'il est contenu dans ce contenant, assez curieusement. Cela vous permet donc de pousser, styliser toute cette largeur, c'est-à-dire dans notre cas, juste de la couleur de fond, tout en la conservant au centre du site. conception Web très courante. Celui-ci ici n'a pas vraiment besoin d'être fait parce que je l'ai fait, je n'ai pas de remplissage sur cette section appelée section ici. Il n'y a tout simplement pas de remplissage. Donc, l'arrière-plan apparaît à travers k et c'est la couleur d'arrière-plan que j'utilise. Vous pouvez donc avoir d' abord des sections et des conteneurs à l'intérieur. Vous pouvez avoir de nombreux contenants. Regardons Apple. OK, donc celle-ci serait une section de navigation avec un conteneur à l'intérieur de celle-ci, pareil. Celui-ci ici n'en a probablement pas besoin, mais pourrait tout de même ici, vous pouvez voir qu'ils s'étirent tous sur toute la largeur. Faisons un autre exemple de cette partie en bas, car notre design présente ces gars dans de petites vignettes dans la section centrale. Ok, donc ici, j'ai juste la section la plus basse. Maintenant, cela soulève une bonne question. Je pourrais maintenant juste aller jeter un contenant, hé, pour le conteneur, y entrer. Et je pourrais commencer à créer mes cartes, ce que nous ferons dans une seconde. OK, c'est bon. Le seul problème, c'est que j' appelle cela une section. Et que savons-nous des sections ? Qu'est-ce que c'est l'un des volets pour les sections si j'y vais, parce que pour le moment mon design n'a rien d'autre. Je n'ai pas fait de pied de page sur celui-ci juste pour raccourcir un peu le parcours, mais il y aura probablement un pied de page ici dans cette grande partie. Et si je veux insérer une section, une section, mets-la ici, de grandes lignes rouges. Vous ne pouvez pas placer des sections les unes dans les autres. OK, alors qu'en est-il de tout ça ? Que faisons-nous ? Ce truc ici vaut probablement mieux ne pas l'appeler une section parce que, vu mon design, il s'agit simplement d'un objet ornemental. Ce truc, les vignettes du portfolio sous forme de section. Ensuite, il y a peut-être une section de témoignages , puis une section de photos, le tout ici. Alors, qu'est-ce qu'on en fait ? Ce que je vais faire, c'est le plier. Je vais me souvenir d' avoir renommé cette classe parce que je l'aime bien. Je veux le garder parce qu' il contient mon dégradé, mais il ne s' agit plus d'une section plus basse. Celui-ci s'appellera dégradé de couleur de fond. Et je vais supprimer cette section. Je n'ai pas besoin de toi. Mais j'ai besoin savoir quel est le truc générique ? Que nous pouvons ajouter une boîte générique, une division générique de l'espace ici, dibloquer, essayer de la mettre au bon endroit. J'ai eu de la chance. Donc ce n'est plus le cas, ce n'est pas à l'intérieur de mon conteneur de héros ici. C'est ici Excellente. Donc je vais dire que vous avez maintenant ce diblock, allez juste utiliser mon dégradé de couleurs d' arrière-plan. C'est pareil sauf que maintenant je peux accéder à une section et ajouter une section , puis l'appeler ma section de vignettes. Je peux ajouter une autre section appelée pied de page. Donc oui, parfois vous avez juste une boîte générique, qui n'est qu'un bloc div. Je veux le terminer parce que maintenant, est-ce que cette section passe à la suivante ? Ou le conteneur qui regarde mon design, si j'avais un pied de page ici, d' accord, et il aura la même largeur. J'aurais un conteneur et ma section de vignettes plus mes excuses, mes vignettes, mon pied de page et les témoignages dépendent de la structure que vous essayez d'obtenir. Dans mon cas, un conteneur va être bon. Un conteneur plein. Tu en as marre de ça, mais tu deviens bon dans ce domaine. Mon contenant fonctionne très bien. On a remarqué pourquoi ce conteneur, rappelez-vous que nous l'avons ajouté, nous voulons que notre site Web soit un peu plus large. Nous avons donc ajouté une classe de conteneur de largeur de conteneur. Nous avons fait de même pour le système de navigation d'ici. Donc, la largeur du conteneur, réutilisez-la lorsque les cours vous conviennent. Donc, à l'intérieur, je vais ajouter ma section. Et à l'intérieur de cette section, ce sera ma section pour les vignettes à vie. Et celui-ci en particulier va avoir un certain espacement. Il va y avoir une marge supérieure. Je vais le deviner pour le moment. Et nous allons ajouter une grille à l'intérieur, mais c'est en quelque sorte cette structure. Il y a donc un conteneur interne que nous avons élaboré que parfois nous avons juste une division ornementale à l'extérieur de ce matériel parce qu' à l'avenir, je veux la section et je veux probablement pied de page plus tard pour y entrer également. Donc, vous me donnez deux sections différentes. Allons-y et mettons celui-ci à jour. Je veux vous montrer celui-ci vous puissiez partir maintenant si vous avez le principal, si vous voulez un autre exemple, nous allons le faire sur celui-ci modernisé et nous allons le pousser jusqu'aux bords comme nous l'avons montré lors de l'intro. Celui-ci, ce n'est pas compliqué. Ce ne sont que les navigateurs difficiles à utiliser. Alors, que faisons-nous ? Comment le ferais-tu ? Faites une pause, réfléchissez à la façon dont vous n'y allez pas et faites-le. Revenez-y et voyez si vous y êtes arrivé, si vous voulez juste regarder. Donc ce que je vais faire, c'est que j'ai besoin que ce type ne soit plus dans ce conteneur parce que ce conteneur les contient. Nous voulons que ce soit gratuit. La section doit être gratuite. Alors, comment s'y prendre ? Je vais aller dans une, je vais ajouter en fait, je ne vais pas aller dans une section, je ne vais pas y aller. Je vais juste sortir ce type du conteneur et c'est un peu difficile de les faire sortir. Gauche, droite, gauche, droite. Il est donc dehors et en bas, ici. Il fait déjà toute la largeur. Excellente. Que devons-nous faire maintenant, pendant qu'il est ici, ce que nous pouvons faire, c'est mettre un contenant à l'intérieur et essayer de mettre tout ce contenant en bloc, je vais le mettre là-dedans et je vais pour essayer l'un ou l'autre, nous allons essayer de le faire de cette façon. Cela fonctionne. Cela fonctionne. Type de travail. Ok, donc tu as compris l'idée. Tu peux essayer de le faire en. C'est assez facile quand ils sont tous empilés sur le dessus, mais que vous pouvez simplement vous déplacer directement vers la droite, vous faire glisser vers la droite, vous suivre sur les bons comptes comme plus d'un à la fois sur le moment, pour autant que je sache. Alors on y va. Nous avons cette section, qui est parfaite parce que c'est ma section de héros. Et tout ça se trouve à l'intérieur de ce contenant. On y va. Maintenant, nous devons les déplacer vers le haut de la liste parce qu'il doit encore se trouver entre le NAB et les sponsors. Alors, que faisons-nous de ces gars ? Ce que je vais faire c'est probablement mettre un récipient dedans en premier. Donc je vais aller dans un conteneur et le faire glisser vers le bas. Je ne vais pas l' obtenir. Je vais donc réessayer le conteneur. Vous pouvez placer deux récipients l'un dans l'autre. Alors vas-y, il est en dehors de ce que je veux que les sponsors soient dedans. A travaillé. Si vous trouvez cela difficile à utiliser, c'est totalement délicat à utiliser. Ils s'améliorent à chaque fois que je charge ce truc, les choses fonctionnent un peu mieux ici. Ce contenant qui contient tout cela. Maintenant, il ne s'agit que de l'ordre des couches. Et je pense que j'ai peut-être tout fait accidentellement. J'ai donc ce conteneur supérieur, dans lequel se trouve mon navigateur. Ensuite, j'ai cette section consacrée aux héros, qui s'étend sur toute la largeur. À l'intérieur, j'ai mon contenant qui contient tout ce qu'il y a dedans. Parfois, la section passe à l'intérieur du récipient. Si tu veux qu'il soit à l'intérieur. Parfois, les conteneurs à l'intérieur cette section, c'est comme une création. Tu ne m'aides pas alors. J'espère. Donc. C'est ainsi que nous modernisons ce site. Je n'aime pas ça parce que ça doit probablement être pleine largeur aussi, mais c'est exactement le même prix que pour ce dernier ici. Donc, si tu veux le faire, vas-y. Si vous ne le faites pas, vous voudrez simplement passer à autre chose. Allez, Dan. La prochaine vidéo que vous souhaiterez voir est ma commande. Passons à la vidéo suivante. 48. Disposition de flux Web - Colonnes vs Flex vs Grid vs None vs Inline: Bonjour à tous. Dans cette vidéo, nous allons examiner paramètres d'affichage de la mise en page. Nous allons couvrir le bloc, le blocage en ligne et aucun. Nous les avons abordés en quelques parties tout au long du cours. Nous allons juste les terminer. Nous verrons pourquoi nous n'utilisons pas de colonnes, d'accord, puis dans la vidéo suivante, nous examinerons la grille de combat contre Flexbox. Mais pour l'instant, passons aux premiers. Très bien, commençons par les deux probablement les plus faciles. Ceux que nous avons déjà rencontrés quelques fois, blocs d'affichage et blocs en ligne. Regardons donc les titres. Frapper est notre bloc par défaut. Qu'est-ce que je veux dire par là ? Je vais le copier et le coller. Il y en a deux. Ils ne veulent pas partager le même espace, ou du moins l'espace horizontal. Ils se poussent l'un vers le bas. Ils forment un bloc. Le némésis du bloc est le bloc en ligne. Je peux donc le dire ici. Je vais donner un cours à ce hit. OK ? Je vais dire que vous n'êtes plus verrouillé par défaut, vais vous apprendre à bloquer en ligne. Rien ne s'est vraiment passé parce que ce type est toujours bloqué. Je vais lui jouer la classe aussi, que les deux blocs en ligne, si je continue à les copier et les coller maintenant, ils sont en ligne. Ils sont toujours en boîte, mais ils sont en ligne. OK, vous trouverez donc certains éléments par défaut, notre bloc signifie qu'ils veulent tous s'empiler et certains d'entre eux sont des types d'éléments en ligne. Jetons donc un coup d'œil ici. Les boutons sont alignés. Ils veulent s'en prendre l' un à l'autre. Laisse-moi le mettre dedans. Si je le mets dans un, mets un autre bouton. Comme ça. Ils sont en ligne, collez, collez, collez. Ils voudront se cumuler. Ils sont tous contents d'occuper le même espace horizontal. Je peux les changer. Je peux dire mon bouton, d'accord, il sera le premier bouton. Et je vais dire de supprimer tous ceux-ci parce que la classe n'est pas appliquée à eux. C'est pourquoi celui-ci avec le bouton 1. Par défaut, vous êtes en ligne, plus maintenant. Tu bloques. Il veut remplir tout l' espace, mais ce n'est pas grave. Tu leur as dit de le faire. C'est un peu bizarre qu'un bouton pour l'ego soit plus intéressant de le faire. Et je suis ce que j'aurais dû faire avec une image. Voici donc mon image. Par défaut, l'image veut être intégrée, mais en fait, nous voulons qu'elle reçoive une classe d'image. Et je vais dire qu'en fait, non, tu serais bloqué. Appuyez simplement sur tout, s'il vous plaît. Ce serait sur la même ligne. OK, alors bloquez, bloquez en ligne. Cherchons-en un autre plus simple. en regardons aucune. Aucun ne dit simplement Toute cette image. Quand je passe au mobile, j'aimerais vraiment n'en avoir aucun. J'aimerais que ça disparaisse. Voir sur ordinateur et tablette, paysage mobile. Mais sur celui-ci, éteignez-le, c'est parti. C'est donc un peu comme le supprimer, mais au moins il est disponible sur ces autres points d'arrêt. Vous pouvez le désactiver sur le bureau et revenir sur la tablette. Mais comment le trouvez-vous ? C'est un bon point. Tu peux voir par ici, il y a ça. Je peux toujours le sélectionner ici, même si je ne le vois pas. Je peux donc les sélectionner ici. Il est réglé sur zéro. Donc c'est en fait là, d'accord, ici, revenez pour bloquer ou bloquer en ligne ou ne pas y revenir sur le bureau, apparaît à nouveau sur tablette et devrait être là et recommencer sur mobile. Tu y vas. Ce n'en est rien. Qu'est-ce qu'on a d'autre ? En fait, laissons-le là. Comparons la grille et la flexbox dans leur propre vidéo. Et le suivant. Allons faire cette vidéo pour tomber malades. 49. Disposition de flux Web Flex vs Grid qui devrais-je utiliser: Bonjour tout le monde. Dans cette vidéo, nous allons examiner différences entre la grille, que nous avons déjà fait auparavant, et le flex, qui est cette option. Ici, k, Flexbox ou Flex Layouts, Flex et Grid se font concurrence pour faire beaucoup des mêmes emplois, mais ils présentent certaines différences que je voudrais aborder. Et il est préférable de vraiment comprendre flex par rapport à la grille. Alors allons-y. Très bien, commençons par une grille. OK, nous l'avons fait avant de cliquer sur un conteneur ici, je vais y glisser ma grille et nous obtenons ceci. La première chose que je veux mentionner, c'est que si je l'annule, vous remarquerez que les grilles se trouvent ici. Il y avait donc des colonnes, d'accord, mais ici, où je peux changer les choses pour mon conteneur, je peux simplement créer la grille. Ici. Peu importe vous avez quelque chose sur la page, comme un bloc div vide ou un conteneur, et que vous le convertissez en grille. Ou si vous faites glisser la grille, car elle s'applique plutôt à une balise div. Nous aimons traîner comme des grumeaux sur k, donc nous allons le faire de cette façon. Mais toutes ces choses ici dans cette mise en page ne sont qu'un simple vieux div avec ce conteneur auquel est appliqué un style qui le rend centré. Celui-ci le divise ici en pourcentages pour les colonnes. Celui-ci applique pour nous une mise en page en grille. Bien sûr, la section, ce ne sont que ces blocs div avec un style appliqué. Nous adorons donc les grilles. Grilles très faciles à ajouter des colonnes et des lignes, supprimez-les. L'espacement entre ceux-ci, je vous le montre parce qu'en comparaison, Flexbox est assez difficile à faire pour certaines de ces choses d'espacement que la grille fait très bien. C'est, c'est quelque chose pour notre réseau. OK, donc nous allons ajouter de la topographie. La seule chose que nous savons à propos des grilles, c'est que si je dois maintenant ajouter quelque chose dans l'une de ces cellules, je vais également ajouter une image, accord ? On passe à la suivante. Tu veux qu'ils soient ensemble, mais tu te souviens, il suffit de les mettre dans un rappeur. Et je clique sur un bouton de chargement de mon clavier pour ce cas, je vais passer au bloc div. Et à l'intérieur de ce bloc , il y aura mon image. Venez faire le trajet. On y va. C'est délicat. C'est difficile pour nous tous. Alors maintenant que le bloc div est à l'intérieur d'ici, si je clique dessus ici et que je le copie et que je le colle, d'accord. Je peux le coller à nouveau, trois fois et c'est un autre avantage pour la grille. Vous pouvez simplement continuer et nous allons continuer à ajouter suffisamment de cellules. OK, donc c'est un vrai avantage pour le réseau. Maintenant, la façon dont fonctionne la grille est qu'une grande partie de la structure globale est réalisée avec le parent. Peux-tu dire le parent de toutes ces choses à l'intérieur ? Je peux faire des trucs, moi aussi. Je peux dire qu'en fait, j'aimerais les aligner au centre de leurs cellules. Génial. Alors que disons l'image que nous avons traitée dans la dernière vidéo, je vais mettre ce bouton en bas. Si nous voulons le changer , nous ne le faisons pas, le faisons pas, nous le faisons simplement pour lui. Nous disons que vous êtes maintenant en ligne, bloc ou bloc. Nous le faisons donc à la réalité, alors que grid et flexbox. OK. Nous le faisons au conteneur parent. OK. Mais les parents ont des enfants, ces petits gars. Et tu peux faire des choses individuelles à ces enfants. On peut donc dire qu'ils sont tous centrés à l'exception de ce rebelle qui se trouve en bas. Si vous cliquez sur l' enfant du parent, accord, vous pouvez dire : « Hé, vous êtes bien aligné. Les grilles sont géniales. Les grilles sont géniales pour du contenu vraiment structuré comme les miniatures que nous allons créer pour notre portfolio. Beaucoup de choses répétitives. Il peut s'agir d'articles de votre boutique, d'images ou de votre portfolio. Vraiment bien mais très structuré. C'est tout ce que Samy Flexbox en revanche, que nous allons faire dans un moment, convient aux objets irréguliers. Des trucs un peu étranges, qui besoin de faire des choses étranges. Ce que je veux savoir, c'est que disons cette image, je veux la déplacer sur le côté. Voyez-vous que cette image n'est pas un enfant de notre grille ici. Comme vous le voyez, c'est comme s'il y avait la grille, la grille éprouvée et elle descendait d'un niveau. Il y a donc un diblock : voici l'enfant, les choses intérieures de l'enfant ou des petits-enfants que je fais n'importe quoi. Rien de tel qu'un petit-enfant a fait paraître cette affaire juste. D'accord, mais il n'y a pas de mises en page supplémentaires pour cela. C'est donc une chose à noter et nous allons y retourner parce que nous sommes un peu traverser et parce qu'ils le souhaitent, mais je veux que cela se déplace sur la droite. C'est assez petit et j'ai besoin qu'il soit sur la droite. Dois-je y mettre une grille et y aller directement ? Ce serait ridicule. Tu pourrais le faire. Mais il est beaucoup plus facile d'utiliser Flexbox. OK, donc je vais choisir ce diblock. Oubliez que cela fait partie de tout l'enfant. Il suffit de le fermer. Ignorer ça n'a pas à l'être. Mais disons que maintenant je vais passer à Flex Box. Flexbox propose un grand nombre de ces options, mais n'a pas eu à créer une grille massive en tant que Mike. Et je peux dire qu'en fait, il est empilé verticalement, ce qui est génial. Retournons là où nous étions. Il passe toujours à l' horizontale par défaut , ce qui n'est jamais comme je le souhaite. Et vous pouvez dire qu'en fait, je veux tout cela sur la droite. Maintenant que nous avons combiné la grille et la flexion, j'agite les bras parce que je me sentais bien. Il est difficile de décrire Grid par rapport à Flexbox et de savoir où l'utiliser. Parce que souvent vous utiliserez une combinaison du 21 ou de l'autre, d' accord, il ne s'agit jamais de petites personnes comme Mac ou PC, vous devez vous engager. Je vais le faire devant moi parce que j'aime ça, ça marche vraiment bien. C'est rapide, super cher, mais j'aime ça. Je peux aussi être sur un PC. OK. Je dois détester les PC. C'est moi qui fait partie du contrat que vous signez avec un Mac mais avec Flexbox et Grid, il y a beaucoup de choses comme, Oh, je n' utilise que flexbox ou vous pouvez utiliser grid. Il y a un mélange que tu peux utiliser. Il y a juste des avantages et inconvénients pour les deux. Ce que je vais faire maintenant, c'est nettoyer ma grille juste pour me concentrer un peu plus sur le flex, car nous ne voulons pas les mélanger. C'est comprendre séparément. Et puis dans la vidéo suivante, lorsque nous donnerons quelques exemples supplémentaires, nous les mélangerons à nouveau. J'ai donc ce conteneur et je vais y ajouter un div. OK, donc un grab my div bloc par bloc s'étendra pour remplir l'espace. Et genre, je ne veux pas que ça remplisse l'espace. Je veux que ce soit le cas, je vais lui donner un nom. Je vais appeler ça « ma carte ». OK ? Et je dirais que vous faites 33 %, 33 % du contenant. Tu peux le voir là-bas, YZ si petit que tu es, ok, tu sais, parce qu'il y a besoin d'une hauteur minimale, je vais mettre une hauteur minimale de 500, bien trop grande, 300. Ok, donc je vais lui donner une couleur de fond pour qu'on puisse le voir. Entrer dans Flexbox. Fais-moi confiance, choisis une couleur. Marge a passé trop temps à choisir une couleur et c'est une couleur horrible. OK, donc nous avons une carte, elle a une hauteur minimale, 33 % parce que ce serait génial si je pouvais la copier. En fait, mettons-y d'abord quelques trucs. Donc, nous allons ajouter appuyer sur un, frapper, je vais aller sur une image au-dessus de ma frappe, je vais choisir une image. J'en ai un que je viens de charger à partir du didacticiel précédent. Vous pouvez le récupérer, tout ce que vous voulez. Je veux juste ajouter ceci pour que ça soit beau. Ok, donc on a une image, j'ai ça. Essayons de reconstruire cette grille à l'aide Flexbox et voulons voir certaines de ses limites. C'est bon de le voir car cela vous aidera à comprendre pourquoi vous utiliseriez Grid plutôt que Flexbox. Flexbox est une bonne idée de cette carte. J'en veux 12 et par défaut, d'accord, ma carte, qui est une balise div, est configurée pour bloquer et nous aimerions qu'elle fonctionne en ligne. Faisons des réseaux de blocs en ligne, collons-en, collez, collez un autre. Et c'est peut-être ce que tu veux. Vous pouvez ajouter un espace autour de celui-ci qui fonctionnerait. Maintenant, pourquoi diable utiliseriez-vous Flexbox ? Parce qu'il possède de nombreuses fonctionnalités supplémentaires intéressantes. Je vais cliquer dessus. Mais nous avons tout ce genre de matériel d'alignement. Nous pouvons le justifier. Tout cela est très cool. Mais annulons cela. Parce que comme Grid, tu le fais au parent. Je vais donc le faire revenir en bloc. Et je ne veux pas faire ça à ces objets individuels. Je veux le mettre dans un contenant ou un emballage, puis le transformer en flexbox. Et tous ces gars deviendront des enfants, peut-être mes cartes. Je vais donc ajouter un bloc div. Est-ce que je peux le faire au conteneur ? Je le pourrais totalement. Faisons simplement son contenant. Supposons que le conteneur soit, Flexbox le tiendra à l' horizontale et à la verticale. Nous sommes donc revenus là où nous étions. Mais maintenant, nous avions, qu'avons-nous 33 % ? Faisons en sorte qu'elle soit un peu plus petite. Ma carte a donc un style qui indique que vous êtes 33 %. Faisons en sorte que ce soit 25 pour Google et qu'il soit un peu plus grand. D'accord, mais en espaçant, je peux commencer à faire des pourcentages pour l'espacement, d' accord, mais ça devient délicat. Donc, comme avant, nous pouvions utiliser le bloc en ligne et simplement ajouter un peu d'espacement. Mais c'est là que Flexbox fait ses preuves. Vous pouvez dire qu'en fait, je veux changer l'espacement et je ne vais pas le faire à l'enfant, mais au parent. Et je pourrais dire : «  Hé, tout le monde ici, j'aimerais que vous justifiiez la façon dont celui-ci ressemble à un espace entre eux. C'est fait, au lieu d' essayer de calculer et d'espacer. Ce qui est bien, c'est que lorsque vous arrivez à cette taille, toujours les espacer. OK, donc c'est sympa et réactif. Donc Flexbox, si vous ne voulez faire que cela, accord, cela pourrait suffire. OK, donc ces cartes sont peut-être assez grandes. On peut donc dire qu'ils sont en fait 33,3 %. Ils remplissent le tout pour la plupart. OK. Et vous pouvez dire : « En fait, j'aimerais revenir voir les parents et leur demander de les justifier tous, mais mettons un peu d'écart là-dedans. Mais je mesure dix pixels. Flexbox gagne, mais nous sommes presque arrivés à l'endroit où le réseau fonctionnait. OK, donc c'est là qu'il y a beaucoup de confusion quant à savoir lequel dois-je utiliser ? Si vous vouliez juste une colonne de ces petites cartes ici, cela n'aurait pas d'importance. Flexbox ou grille. Beaucoup de ces trucs sont les mêmes, donc ça n'a pas d'importance. Mon vice, je me souviens d' abord de la grille, utilise Flexbox. Ensuite, si cela ne fonctionne pas avec Flexbox et que Fixed Box est un peu pénible, mais si vous devez en avoir quatre, si je fais du copier-coller pour eux, il essaie de les compresser en une seule ligne. C'est là que je peux dire rap parental. Et c'est là que tout tourne terriblement mal. Et je trouve ça très difficile de faire en sorte que les choses s'alignent en K et en collent une autre. Nous pouvons travailler là-dessus et les aligner et nous pouvons surtout les rendre parfaits. Et le problème se produit avec le PAD. Il est tout simplement beaucoup plus facile de créer des grilles. Nous avons vu à quel point c'était facile de tous ces gars sur une grille sur votre chemin. Mais s'il ne s'agit que d' une seule ligne, Flex Flexbox et Grid, c'est pareil. Nous serions utiles Flexbox , alors sur une grille, ce serait pour cartes inégales ou quoi que ce soit d'autre. Ok, on va faire un peu comme une mosaïque. Donc, si vous vous souvenez, les grilles, c'est bien, tant qu'elles sont assez structurées, alors que ça, si j'y vais, cette taupe et vous, ou même plus grande, d'accord, et vous êtes assez petite. La plus petite, cette rubrique est minuscule dans ce cas précis. Celui-ci est petit à petit plus long. Nous pouvons le faire avec flexbox, nous avons mis le code, nous avons dit : « Vous êtes 33 pour cent, d'accord, juste pour lui donner un peu d'espace, nous avons acheté parce que maintenant nous avons ajouté Flexbox, je peux le dire mais en option, Je vais cliquer, me débarrasser de ça et regarder ça. Ce sera la taille qui doit être. Doit-il être petit, grand ou minuscule ? Ensuite, je peux décider avec le parent, faire des choses comme : qu' est-ce que c'est, à quoi ça sert ? Est-ce qu'ils se sont tous simplement empilés ? Oh, c'est sympa. Grid ne peut pas faire ce genre de Caïn. Mais il faut être très explicite. Vous devez dire que la colonne A est composée de 0,5 fraction, alors que cela, vous pouvez lier le contenu, décider de sa taille. Donc flexbox, super flexible, un peu plus difficile à comprendre. Des grilles, super rigides, mais géniales parce que beaucoup de choses sur les sites Web sont un peu rigides. Devenons fous avec le conteneur Flexbox. On peut dire que tous les enfants sont alignés en même temps au lieu de suivre la ligne supérieure le long du tronçon inférieur pour ajuster la ligne du haut au milieu de leur contenant vers la droite. Beaucoup de ces trucs sont également en grille, mais ils occupent tous leurs propres cellules, les séparent, les poussent sur les bords pour les envelopper. OK, donc voici un aperçu général de Grid par rapport à Flexbox. Passons à quelques exemples supplémentaires dans la vidéo suivante, nous allons simplement créer quelques éléments et voir où nous en sommes. 50. La disposition de la boîte flexibles avec des exemples dans le Webflow: Bonjour à tous. Dans cette vidéo, nous allons vous en montrer quelques-unes, nous, je vais vous montrer quelques exemples. Et ensemble, nous allons comprendre un peu plus la disposition des flexbox. Nous allons donc passer en revue quelques bons cas d'utilisation comme celui-ci ici, la navigation, d'accord, tout est justifié. Donc des trucs sur la gauche, ces trucs sur la droite, je peux ajouter et supprimer des choses. Ici. L'alignement est également très bon pour Flexbox parce que c'est une section et juste au milieu, j'ai ce joli bout qui n'utilise pas de marge comme nous l'avons fait auparavant, il veut juste être au milieu. Et un autre exemple ici où nous avons ces deux options empilées à côté de notre image et nous le ferons avec Flexbox. D'accord, ça ne fabrique pas de trucs. OK, commençons par la navigation. Nous avons construit cette navigation ici, en haut , qui contient ces éléments à l'intérieur. C'est une bonne utilisation de Flexbox. Et je vais le faire isolément. Je ne le fais donc pas sur notre projet principal, je le fais juste sur un projet vide juste pour que nous puissions travailler seuls sur Flexbox. Donc, un conteneur, a, en utilisant un sur le clavier, insère un bloc div à l'intérieur. Notez que vous avez mis une section à l'intérieur , d' accord, parce que ce sera une section de navigation, côté section de mon conteneur appelée Section nav. Je vais y ajouter quelques éléments, comme un a, je vais ajouter notre logo. Je vais ajouter une image. Je vais en choisir un parmi nos fichiers d'exercices. Il y en a un qui s'appelle sponsor. D'accord, alors que s' ils en sponsorisent un, je l'utilise juste comme exemple. Vous pouvez le réduire un peu et ajouter un bouton, un bouton, le presser dedans. Mon navigateur de section s'agrandit pour s'adapter au contenu qu'il contient. Je veux mettre une hauteur minimale. Nous savons tout sur cette section nav. Je vais mettre une taille, je vais mettre une hauteur minimale. Tous les cent cinquante. Non, 100. Ça va faire l'affaire. Maintenant. Je veux qu'il passe au centre, ce qui est délicat. Je pourrais utiliser des marges. OK, et c'est bon. Je pourrais travailler. Il existe de nombreuses façons de faire la même chose, je suppose que l'un des points de cette section de mise en page, mais utilisons flexbox. cool avec Flexbox, c'est de savoir si je le fais aux enfants ou si je le fais à l'emballage, à l'extérieur, mais ça va. Nous le faisons à la partie extérieure des parents, à ces gars-là, nous disons que vous avez fait le travail de Flexbox. L'une des valeurs par défaut est horizontal, ce que je veux, et non vertical ou horizontal. Mais pouvez-vous voir ici que la valeur par défaut est également Stretch. Je veux que ce soit au centre. Allez-y et justifiez. Regarde ça. Il y a un alignement à gauche, une ligne centrée et une ligne droite. Mais regardez celle-là. Eh bien, qui exactement ce que je voulais. OK. Quel que soit celui qui plane au-dessus, l' espacement entre les boîtiers permettra de répartir uniformément l'espace entre Flexbox, très simple dans cette situation. OK, c'est exactement ce que je voulais faire à cause de la facilité de cet alignement et de cette justification. Allons un peu plus loin. Je souhaite ajouter un autre bouton, copier-coller. OK, donc ça les répartit uniformément, ce qui est génial. Aucune de ces autres ne fonctionnera donc pour nous. Ce que nous pouvons faire, c'est pousser Flexbox un peu plus loin. Ces deux-là, si on les met dans leur propre tag div, d'accord ? Cela signifie qu'il y a un logo et une balise div. Il y aura donc encore des choses à les séparer. OK ? Le fait qu' il y ait deux choses dedans n'a pas d'importance. Il ne regarde que le niveau supérieur. On dirait qu'il y a un logo et une balise div et nous allons les séparer. Donc c'est un peu logique. Donc diblock, je dis balise div, ça vient du HTML, ils l'appellent une balise div. Ils appellent cela un bloc ici dans Webflow, ce qui est exact. C'est juste une autre façon de l'appeler. Je vais t'y mettre et t'enfermer dans ce pâté de maisons. Que vient-il de se passer ? OK, j'ai une section et il n'y a que deux choses à l'intérieur. OK. Donc, en divisant l' un vers la gauche, l'autre vers la droite, dans le diblock, il y a deux choses qui se passent, mais ensuite vous devez tout réparer. OK ? Et je peux évidemment parcourir et ajouter autant de boutons que je veux parce que tout est dans ce petit emballage, ce diblock et ça pousse sur le côté. Maintenant, autre chose, un autre niveau dans lequel je pourrais entrer, je pourrais ajouter un peu de rembourrage. Je pourrais créer le texte d'un bouton. Je pourrais utiliser le bouton de navigation et ajouter des marges. OK, on y va pour les espacer. Tout à fait bien. OK. Mais nous explorons Flexbox. Donc, ce que je pourrais faire, c'est pour le moment, nous avons notre emballage, le parent qui a appliqué Flexbox. Et ces deux choses, il y a deux enfants dedans. Je fais ce genre de choses. Eh bien, nous pouvons dire, Hey child, ce que l'on appelle terriblement le bloc DIV. Donnons-lui un nom propre. Appelons ce système de navigation météo. Boutons. Maintenant, bouton rapide, juste pour me faire comprendre plus tard, ce que je peux dire, c'est que je peux dire, je connais votre enfant. Je peux te voir là-bas. Tu peux faire des choses qui ne suffisent pas. Je veux combler l'écart. OK. Et c'est très bien. OK. Ce que je peux faire, c'est dire que je connais votre enfant, mais que vous allez aussi devenir parent ou grand-parent. OK. Maintenant, vous êtes parent, et je peux dire que les gens qui sont en vous, vos enfants, vont avoir un espace de colonnes ou de rangées. Faisons des colonnes. Et allons-y. Je peux juste mettre une marge sur le bouton ? Totalement bon. Si je peux le construire dans une grille. Je le pourrais totalement. Je pourrais aller Votre grille après mon conteneur, après mon dans le conteneur, mais après ça, le problème sera de le faire entrer là-dedans. Mais j'en ai besoin de 123, je peux le faire. Je vais donc prendre ça. Je vais avoir trois colonnes. Une rangée. Je vais faire celui-ci à peu près de cette taille pour le logo. En fait, je vais faire ces deux-là et les faire gros. C'est là que vous rencontrez des problèmes que vous aimeriez, accord, quelle est la taille de ce 1ab ? Mais comme c'est tellement rigide, Mike prend les liens et les boutons de la même taille. Donc, s'ils ne l'étaient pas, ils étaient exactement les mêmes, ce qui n'est jamais le cas, vous pouvez utiliser la grille parce que vous pouvez les faire à la bonne taille et simplement mettre les boutons et ce serait génial et vous pouvez régler le rembourrage. OK, super. Mais c'est problématique. Si votre deuxième bouton contient un texte très long, le numéro dix. Vous pouvez donc voir comment cela les sépare. Et si j'en trouve un autre qui propose déjà Flexbox à la rescousse, des formes inégales, de la flexibilité Flexbox. Très bien, faisons la boîte aux héros. Donc, à l'intérieur de mon conteneur principal, je veux une autre section. Donc je vais aller dans une, je vais aller section et je vais essayer mettre au bon endroit. Il est rentré à l'intérieur. On y va. C'est donc en dessous de celui-ci qu' y aura une section froide ici. Et ce que j'aimerais faire au début, je vais simplement le colorier. Je vais demander à Alt ou Option de cliquer sur l'un des chevrons. Je vais dire que tu vas être de couleur foncée. Génial. Toute la typographie ici sera blanche et ce sera une police aléatoire. OK ? Et je vais faire de la hauteur. La taille ne sera donc pas une hauteur, mais une hauteur minimale de 500 pixels. Maintenant, si je veux ajouter un héros, désolée d'avoir cliqué sur un paragraphe et un bouton comme au début. Si j'en reçois un, ils n'ont pas fonctionné. Ce que tu vois ici, qui arrive, arrive aux meilleurs, ça revient. En fait, cliquez dessus. Maintenant, appuyez sur a et dites, je veux, je veux un peu de texte de paragraphe. Et quand un bouton, OK, je veux que le texte de ce paragraphe soit ici sera mon héros et il aura une taille. Je veux que ce soit le minimum. En fait, nous allons utiliser une largeur maximale de 600 pixels. Ne s'étire pas vers l'extérieur. Et je veux qu'ils soient tous centrés. Je pourrais passer en revue et dire, d'accord, la topographie. Tout ce qui se trouve dans cette section consacrée aux héros est la topographie Alig Et ça marche un peu. OK. Mais à la rescousse en tant que Flexbox, Flexbox va dire, mec, c'est audacieux, ce n'est pas bien. Quoi qu'il en soit, le parent extérieur, d'accord. Je vais dire que la mise en page est flexbox, ce qui ne fonctionne pas. Ça va être vertical. Est-ce que je veux que cela s' étende complètement ? Il suffit d'aller au centre. Hé, regardez-nous et ne vous trompez pas non plus avec Top. Il va l' intégrer à notre Flexbox. Partie inférieure extensible, espacement uniforme. Flexbox offre une grande flexibilité. Et évidemment, une grille ici ne serait pas utile. Il existe d'autres moyens de le faire. Il existe des moyens de faire des choses, comme les marges automatiques, et il existe d'autres moyens de le faire. Vous pourriez tomber sur vous au cours de vos aventures. Et ça peut être aussi juste que celui-ci. P hero a besoin d'être centré. On y va. Et il ne faut pas que ce soit une police géante. Faisons preuve de bon sens. Vous n'avez peut-être pas de sable public. Nous pouvons utiliser un tas de bons exemples d'utilisation de Flexbox, d' accord. Faisons davantage. Disons que nous voulons cette image sur la gauche et que ces deux éléments s'empilent l' un à côté de l'autre. Grid fonctionnerait totalement, mais nous ne ferons que flexbox. OK, alors ce que nous allons faire, c'est comment vous y prendriez-vous ? Asseyez-vous là, faites une pause. Ayez un petit jeu de mémoire comme réfléchir à la façon dont vous le faites, le faire fonctionner. Ok, tout d'abord, nous allons avoir besoin d'un div pour entourer tout ça. OK, donc je vais faire un bloc et un bloc, mettre quelque part, une image dans de l'urine. Et il a dit que c'est ce que nous voulions. Nous voulons que ce soit un peu collé à côté. Tout ce que nous avons besoin de faire, c'est d' aller voir le parent, l'emballage extérieur et de lui dire que vous allez vous emballer dans le mauvais sens. OK. Verticale. L'horizontale est un peu ce que je veux et je veux qu'elle soit alignée au centre. Il se trouve que j'ai eu mon chauffage devant mon image par hasard. Et cela me rappelle que vous pouvez faire des choses étranges où, avec Flexbox, vous pouvez changer de direction pour que vous puissiez créer, créer l'image d'abord dans cette première, puis tout est à l'opposé. Je ne sais pas pourquoi tu voudrais faire ça. Mais c'est possible, mettons-les dans le bon sens et faisons-les aligner sur le bon côté. Souvenez-vous donc de retourner au parent, passer à l'alignement à gauche. Et l'avantage de Flexbox, ce sont les espaces entre les colonnes. Je vais utiliser ma touche Shift Up Arrow, c'est vous de décider. Cool. Donc ça fonctionne. Supposons que je veuille ajouter le bouton ci-dessous. Que faisons-nous ? C'est exact. Si j'essaie de modifier, qu'est-ce qui va se passer, allez-y. Ça les répartit en quelque sorte tous. J'ai donc besoin d'un div autour de tout ça. Donc un diblock, jetez-le là-dedans et là, vous et vous avez failli rater la commande ici. Alors remarquez tout de suite. J'ai donc ce bloc div, c'est un enfant et cette image aussi. Il n'y a que deux choses ici. Maintenant, c'est facile à utiliser. Tout le monde est parent, tout le monde est aligné pour que ça rentre dedans. Maintenant, c'est centré, non ? Mais vous pouvez voir en haut et en bas, il y a tout cet espace entre les deux. Découvrons donc la cause de ce grand écart. C'est une bonne idée de regarder un site que nous avons créé il y a quelque temps et nous ne savons pas d'où vient tout le style et pourquoi y a-t-il un grand écart ici ? Souvenez-vous donc de cette vision aux rayons X , d' accord, elle est cachée ici. Nous pouvons dire que vous passez en mode radiographie, que vous cliquez sur Désactiver, que vous lancez depuis l' arrière-plan et que vous passez simplement la souris et vous pouvez commencer à voir d'où vient tout cet espacement. Il y a donc un peu d'espace provenant du bouton, héros et d'autres de quelque chose appelé H2. C'est une étiquette H2 avec une crosse ou un chauffage à cinq. Alors allons-y et supprimons-les. Nous pouvons le faire en mode radiographie. Alors cliquez dessus et dites « bouton héros ». Ce n'est donc que le bouton d'une page Hara parce que nous l'avons bien nommée. Nous ne l'utilisons nulle part ailleurs. J'espère pouvoir résoudre ce problème. Je vais passer à Option ou Alt sur un PC. Effacez cela. Ai-je besoin du côté droit ? Je n'en ai pas besoin non plus maintenant, ça va payer. Maintenant. Ça a l'air mieux. Je voudrais peut-être clarifier cette question également. Cliquons dessus. Il tire son style de la synthèse. C'est un H2 tags, regardez. Donc, il est H2 pour une raison quelconque. Ce devrait être un H5, ce qui clarifie notre problème. Parce que si c'est du H2 et que je vais nettoyer l'étiquette H2. J'ai utilisé du H2 plusieurs fois. Je pense que c'est un H3, c'est un H2. Je l'ai mal orthographié plus tôt dans le cours. Vous l'avez peut-être remarqué plus tôt dans le cours. Donc, je devrais juste faire un H5 et mes problèmes ont survécu. Très bien, donc je vais désactiver la vue aux rayons X et chercher une autre bonne utilisation de la flexbox parce qu'elle en contient encore plus, disons l'espacement ici, je peux aller dans mon quartier. En fait, je ne vais pas bien le transformer en une autre flexbox et jouer avec l'espace entre les deux, mais ça a l'air bien. Et j'ai déjà ce cours sur le bouton froid ici que je pourrais suivre. Ce n'est donc pas tout. Vous n'avez pas à continuer dans le terrier du lapin, car plus de Flexbox se trouve au-dessus de Flexbox, vous pouvez pas faire de bien ou de mal pour cela. Faisons-en un autre. Très bien, finissons-en avec celui-ci. Nous l'avons fait tout à l'heure. Tu te souviens ? Je le fais juste fléchir. Megan Flexbox, pousse-la vers la droite et j'en reparlerai plus tard. Il est temps d'en parler. Très bien, déconstruisons ce que nous avons fait. Il y avait donc un conteneur à l'intérieur de ce conteneur qui était une section dédiée aux héros. À l'intérieur de cette section, nous avons mis une grille, en quelque sorte l'une d' un côté, l'autre. Parfait. Et puis pour que ces deux éléments appuient sur le bouton Entrée, ils doivent être regroupés dans un div, d'accord, sinon ils finissent par sauter dans la colonne suivante de la grille. C'est ce que nous avons fait. Et ce que nous avons fait, c'est nous avons dit : « Hé, suffit de saisir le div, il suffit de saisir le div, de le faire, eh bien, ça a commencé comme ça, mais c'était notre problème. Nous l'avons fait passer sur le côté droit en termes d'alignement. Mais vous pouvez voir le héros, la boîte H1 qui l'entoure est alignée à gauche et nous n'avons pas pu le faire passer de l'autre côté, le bouton est resté là et celui-ci aussi. Donc ce que j'ai fait, c'est que j'ai dit diblock, s'il te plaît, fais des flicks, sois aligné vers la droite. Ensuite, je fais un signe de la main et on ne se demande pas pourquoi je le fais plus tard. Mais maintenant que vous comprenez le contenant super facile, les parents font des flocons sur la droite. Des jours heureux. Nous avons également appris plus tôt dans cette vidéo qu' il fallait placer cette chose au centre. Nous l'avons truqué avec celui-ci en disant que héros a toute une marge et qu'il fonctionne, il n'y a rien de mal à ça. Ok, alors faisons-le d'une meilleure façon ou d'une autre manière. Juste pour développer nos compétences en matière de films. Alors, comment effacer C'est vrai, option Alt, cliquez dessus. Ok, donc maintenant c'est bloqué en haut. Comment puis-je y aller, c'est là que tu vas. Très bien, cliquez sur le diblock, et il n'y en a qu'un. Boum, boum, boum, boum, boum. Nous avons déjà rencontré ce problème. Je rencontre tous les problèmes tout le temps et je me perds beaucoup. Je me demande comment on va au fond des choses ? C'est parce que ce diblock est, sa hauteur, réglé sur rien n' a pris de hauteur. Donc, il s' enroule un peu sur les hauteurs, en fait, ne venant pas de ce diblock, mais de plus haut dans la liste, assez loin, pas de la grille. La grille ne vous donne pas la hauteur. C'est la section des héros. OK. Vérifions-le, pouvons-nous vérifier avec la vision aux rayons X ? Je ne suis pas sûr qu'il capte ça. Jetons un coup d'œil. Est-ce que ça fait ça ? Non, il ne le capte pas dans celui-ci. Très bien. Mauvaise vision aux rayons X. J'ai gravi les échelons jusqu'à ce que je trouve lequel donne de la hauteur. OK, et je vais l'enlever. Eh bien, je vais vraiment le couper. Remets ça à néant. OK, n'oubliez pas de cliquer sur Alt ou Option. Ensuite, je vais donner la hauteur ou la hauteur minimale au diblock, qu' il sache quelle doit être sa taille. Passons donc à la hauteur minimale, collez-la à cette extrémité car nous l'avons au centre. Il sait qu'il faut aller au centre ou au fond. Eh bien en même temps ou étalez-le uniformément. Ok, donc l'ego, nous sommes revenus, nous avons vécu ce que nous avons fait et nous l'avons amélioré. Ce n'est pas mieux. C'est pareil. C'est dans le même créneau de position, mais d'une manière différente de le faire. Très bien. Je ne sais pas ce que tu ressens. Je vais maintenant continuer avec le fléchisseur, les compétences flexibles. J'ai l'impression que c'est mon nouveau gag pour le reste du cours, Faisons preuve de flexibilité, de compétences flexibles. Et j'ai l'impression que nous avons réalisé quelques petits projets qui se sont heurtés à des problèmes, mais j'ai l'impression que nous avons quelques exemples à notre actif. Passons à la vidéo suivante. Apprenons de nouvelles choses. 51. Cartes de hauteur égales avec bouton sur le bas dans le Webflow: Bonjour à tous. Dans cette vidéo, nous allons placer ce bouton au bas de toutes ces différentes cartes. Si tu reviens du futur et que tu m'as déjà regardée comme si c'était encore une fois ? Vous vous assurez que le parent Rapa est réglé sur une disposition flexible , puis que celle-ci est réglée sur son enfant. OK. Eh bien, elle est réglée sur une marge et la marge supérieure est réglée sur automatique. Il se frayera un chemin jusqu'à la boîte parent. Très bien, allons-y et faisons tout ça. Ça va être marrant. Très bien, nous allons commencer par un problème. Et je me suis dit : « Où est passé mon bouton ? Ça marche à moitié. Je peux un peu m'y retrouver. Et puis, là-haut, je me suis dit : « Bonjour, demande le contrôle de la conception, vous êtes en train de concevoir et un autre onglet. Bon travail, Dan. Je l'ai donc ouvert deux fois. Normalement, je ne l'ouvre pas deux fois parce que je n'en ai pas besoin. Mais quand je fais ces tutoriels, je le fais. Mais bon, vous pourriez rencontrer ce problème. Alors ouvrons l'un d'entre eux et allons-y. OK, donc nous allons ajouter ce morceau en bas à droite. Laisse-moi prendre mon dossier Figma et le joindre là-haut pour que je puisse le voir. Donc, pour construire cette première chose, est si j'ai besoin d'une flexbox ou d'une grille. réseau sera bien plus simple. J'ai donc déjà configuré mon arrière-plan qui va jusqu'aux bords de ce conteneur ici. Je lui ai donné un nom et à l'intérieur, je vais y mettre une grille. Donc je vais y aller, je vais utiliser une méthode légèrement différente plutôt que de cacher un et de le faire glisser dedans. OK, je vais le faire. Mettez-nous simplement à l'aise en utilisant tous les moyens. Ce sera une marchandise. Et je vais passer au réseau. OK ? Et je vais juste y aller parce que c'est le seul disponible. On y va. Nous avons donc une grille et maintenant je veux que ce soit le cas, je vais en faire trois à travers. Je vais supprimer l'un d'entre eux. En fait, ne pas y aller n'a pas d'importance. Il les ajoute au fur et à mesure parce que c'est sa propre commande. D'accord, donc j'ai nos tailles. Maintenant, ce que je veux faire, c'est intégrer ma petite carte à l'intérieur. Je vais donc cliquer sur OK. OK, et ici, je ne vais pas double-cliquer dessus. Je vais y glisser un conteneur et un joli conteneur générique. C'est ce que j'ai sélectionné. Je vais aller à la commande D et taper div, div, div block. Je vais donner un nom à mon quartier, qui va juste s'appeler cod. Cod est un bon nom générique pour ma carte de prix et nos étuis Ces cartes pour les vignettes notre portefeuille peuvent être des cartes montrant différents articles de votre boutique. OK. Donc carte, vignette. Maintenant, je ne vais pas passer trop de temps. Je suppose que je voulais te montrer comment placer le bouton par le bas. Je ne veux pas trop le coiffer. Nous allons simplement ajouter quelques éléments de base. Donc, Commande E dans ce div, je vais mettre une image. Et je vais m'en tenir à cela pour le moment. Je veux juste ajouter , nous allons ajouter un manuel. Il faut que le bloc soit juste générique. Texte. vraiment, ce n'est pas un paragraphe, c'est juste un peu un hibou. Et celui-ci est notre projet de design UX. OK, dans cette division aussi, je vais dire Commande E et je vais y mettre un hit. OK, je vais m' assurer que c'est aussi un chauffage. Et alors, qu'est-ce qu' on ne peut pas y mettre mon bouton ? Bouton de commande D. Et c'est suffisant. La seule chose dont j'ai probablement besoin, c'est mon image pour que cela fonctionne. Je vais accéder à mon panneau d'actifs, et je vais également prendre ceux-ci. J'en choisis des génériques que nous pouvons tous utiliser. C'est donc dans le portfolio et les vignettes de 1 à 6. Alors allez les chercher et déposez-les simplement sur votre page. Je finirai dans le panel des actifs battrai vos propres affaires de portefeuille. Et nous allons commencer par, en fait, je peux supprimer mon image et la faire glisser directement à partir de là. Je suis sûr que ça va dans la balise div. Fais-le ici. On y va. Très bien, tellement génial. J'ai une image. Il ne faut pas un peu de chauffage et un bouton. N'allons pas trop loin. Disons, même si je vais mettre une vignette de carte, mettons-y simplement une couleur de fond. Entré mais Alt ou Option cliquez sur ces chevrons. vais aller voir ma liste. Je vais styliser la biographie du doublage sera assez large. Ce que nous voulons vraiment faire, c'est en avoir quelques-uns avec des rubriques de tailles différentes. Et nous voulons le bouton en bas à droite. Je vais donc prendre quelques textos. Il suffit de le copier et de le coller depuis ce truc. Copier et coller. Je vais le faire, je l'ai copié ici et je l'ai collé. J'en ai donc quelques unes différentes. Et maintenant, je vais zoomer, passer à différentes rubriques et changer ces images. OK, en ignorant les marges extérieures, je vais styliser à la fin de cette vidéo, je veux juste vous amener à un point où je veux que le bouton soit à la fois ici et que je veux tous en bas parce que pour le moment, comme ces rubriques sont différentes, celui-ci n'est pas tout à fait en bas. C'est donc un travail appelé Flexbox. Nous avons donc fait le réseau, c'est génial. Dites cohérent. Mais nous voulons faire des choses amusantes. Nous allons donc utiliser Flexbox. J'ai donc la vignette de ma carte qui enveloppe tout. Je suis un enfant du réseau. OK. Nous allons ignorer cela parce que ce que nous allons faire, c'est aller dans Layout et dire qu' en fait, vous êtes maintenant le parent Flexbox et que vous devez être vertical. Et il ne doit pas s'étirer au moment où il s'étire par défaut. OK, cool. Donc, pour le déplacer vers la droite, nous l'avons fait plus tôt. Alors rappelez-vous que le parent fait des choses assez génériques, mais l'enfant peut être rebelle et dire que vous êtes flexible et vous avez un alignement de droit. On y va. La prochaine chose que nous voulons faire, c'est déménager. Pourquoi celui-ci n'est-il pas déplacé ? Pourquoi celui-ci et pas celui-ci ? Parce que celui-ci a reçu un cours alors que je le changeais. Cette classe n'est pas appliquée à celui-ci. Je vais donc l' appeler carte à boutons. D'accord, et je vais y jouer ici en utilisant mes super raccourcis que nous avons appris tout à l'heure, où vous avez joué plus tôt sur Command and Enter. Vous voyez, c'est juste passé aux styles ici. Et je peux taper le bouton. J'utilise mes touches fléchées pour descendre et l'appliquer à celui-ci. Pareil pour celui-ci. Entrée de commande ou de contrôle. Et nous allons avoir une carte, le bouton que nous voulons. C'est probablement bien, n'est-ce pas ? Ils ont tous appliqué la classe. Nous faisons donc la même chose, cette ligne rouge. Comment se retrouver et se retrouver dans le bas ? le gros problème est qu'il est sélectionné, vous pouvez accéder à votre espacement. Et si vous réglez la marge sur automatique, automatique signifie simplement remplir. L'intellect ne peut plus se remplir. OK. Est-ce qu'il s'étend et pousse jusqu'à ce qu'il ne puisse plus partir ? Donc, au lieu de lui donner une taille réelle, donnez-lui une marge. Cela ne fonctionne que lorsque vous avez défini le parent sur Flexbox et l'enfant également sur Margin Auto. C'est le gros truc pour ça. Maintenant, allons-y et nous allons créer d'autres problèmes, mais apprenez-en plus. C'est ce que nous allons faire. Donc c'est ce que je veux. Également. Je ne l'ai pas vraiment fait de cette façon. Voyons voir le peu, nous allons le faire, nous allons essayer de le faire un peu plus. Au lieu d'utiliser le navigateur, nous allons utiliser la miniature de la carte. Ce que je veux faire, c'est que je veux du rembourrage autour de ces deux choses. Je veux qu'il s'agisse d'une hauteur spécifique ou d'une hauteur minimale, pour qu' elles soient toutes identiques. Donc, la vignette de la carte aura une taille de, je ne vais pas utiliser de hauteur. N'oubliez pas que nous pouvons utiliser une hauteur minimale de 300. Une supposition terrible. Je vais continuer à monter jusqu'à ce que je trouve quelque chose. Je vais laisser de la place pour un troisième, un troisième bout de texte. Et je vais probablement réduire cet espacement, mais je suis allé à une hauteur minimale. Ces gars-là viennent tous pour le trajet aussi, ce qui est cool. Alors Nixon va complètement détruire ce que nous venons de faire. Parce que ce que j' aimerais faire, c'est mettre du rembourrage à l' extérieur maintenant je pourrais mettre une classe autour de ça, classe autour de ça, mais une classe autour de ça. Mais évidemment, il vaut mieux le mettre autour de l'emballage. Le problème, c'est que pour l'image, je veux aller jusqu'au bord. Conception. L'image va jusqu'au bord, mais juste cette partie. OK, donc je pourrais juste passer à la morue, espacement des vignettes, maintenir la touche Maj enfoncée et ne pas regretter, pas au remplissage des marges. OK. Je pourrais le faire si c'est ce que nous voulions. Ce n'est pas ce que je voulais. Parce que ce que je veux, c'est juste m'espacer ici. Je vais donc créer un petit div à l'intérieur de ce, accord, un autre div, y mettre tous ces fichiers indésirables et le faire. Le problème, c'est que je me suis bien débrouillé, pas le problème que j'ai rencontré sur toute la Flexbox sur cet emballage extérieur n'en a cet emballage extérieur n' plus vraiment besoin. Je peux le laisser là. Laissons-le là et je vous montrerai que lorsque nous l'éteindrons, il ne sert à rien. Je vais donc prendre un tag div. Je vais cliquer ici. Je vais passer à la commande D et essayer de taper div autour de mon micro et je , d' accord, je vais tout ajouter. Lucky, mets-y. Ensuite, nous entrerons. Et nous y sommes allés. Maintenant je ne l'ai fait que pour celui-ci. Je vais devoir le répéter pour tous les autres. Je l'aurais fait dès le début, mais je ne voulais pas trop confondre les choses. Donc, nous allons nous embrouiller maintenant parce que ça va être bizarre. Parce que, eh bien, je vais juste essayer de te faire peser ensemble. Donc celui-ci, ici, je vais donner un nom. Je l' appellerai mon rapa inférieur à la morue quand tout ira bien. Et j'aimerais lui donner un peu de rembourrage, maintenir enfoncé, Shift, un effet sonore de drone. OK, et on y va. Donc ça a cessé de fonctionner. Ok, ces cours sont toujours appliqués. Il y a toujours de la voiture en haut. D'accord, mais ça ne fait pas son travail. Eh bien, ça l'est en quelque sorte. Répétons-le sur chacun d'entre eux pour que nous puissions, cela vous montrera plus facilement l' étrangeté. Je vais donc simplement copier et coller ce div dans chacun d'eux. Je vais demander à Jason de passer et de m'accélérer. OK. Donc, quand est-ce que l'emballage des cartes est inférieur, je vais le déplacer et changer de titre. Alors allons-y en excès de vitesse. OK, donc première étape, ça ne colle pas au fond. OK. Comment l'avons-nous fait ? C'est exact. Nous avons pris l'emballage extérieur, qui prend un peu de place, et nous allons le ranger. Regardons, soyons plus beaux. Donc, ma grille découpe les vignettes à l'intérieur de ces cartes, les vignettes fonctionnent simplement sur le tronc le plus bas. OK. Et celui-ci, ici, mon morue Lower Rapid doit déjà être un enfant de films. OK. C'était juste à partir de ce produit original que nous avons fabriqué. Débarrassons-nous de cela parce que nous n'en avons pas besoin parce que cela ne fonctionne pas clairement. Donc, l'emballage extérieur, revenons au bloc. Passons à ce petit emballage autour de ces parties inférieures, d'accord ? Et dites simplement que vous êtes maintenant le parent. Et tu dois être à la verticale. Et il se souvient : «  C'est plutôt cool, comme si je pensais qu' il reculerait vers la gauche. Mais il se souvient qu' il est équipé du top auto. Et il se souvient qu' il est bien aligné. Mais dans le désert, souvenez-vous que cela s'appelle téléobjectif. Il dit que oui. Mais celui-ci ne semble pas être d'accord. Celui-ci non plus. On dirait que c'est le cas, mais c'est juste la plus grande boîte. C'est ça qui le rend encore plus grand. Il a donc saisi la vignette de morue, le tout. Prenons ma taille. Je peux y aller Nous avions une taille minimale. Passons à 600. Vous remarquerez qu'il ne travaille même pas. Donc, ce qui se passe, c'est cet emballage ici. Nous avons parlé de ce petit emballage. OK. Il y a le bas du dos de Cadoret. Vous pouvez voir si vous regardez les dimensions, il fonctionne parfaitement. Regarde celui-ci par ici. D'accord, il est ordonné au fond des choses, mais ça ne grossit tout simplement pas. Tu peux voir ça ? C'est en bas de celui-ci, mais ça ne l'est pas, il n'a aucune idée ce que font ces choses extérieures. Comment l'amener à le reconnaître ? Nous ne le faisons pas. Ce truc ici ne fera pas la taille minimale car il ne peut voir que son parent Rapa. Donc ça ne sert à rien de le faire au grand-père ou à celui qui est très haut placé. Donc, mon minimum de 600 pixels, je vais effacer en maintenant la touche Alt ou Option enfoncée. Et ce sera ça, le rappeur qui me donnera ma taille minimale. Je vais le faire à leurs parents. Donc, saisissons 500 pixels. C'est beaucoup trop pour ça, mais ça marche. OK. Je vais maintenir la touche Shift enfoncée et utiliser ma flèche vers le bas pour l'obtenir . Oui, ce sera ma taille. Maintenant, tout cela peut être un peu confus. Je suppose que ce que je ne veux pas faire, c'est juste faire des exercices, mais tout se passe bien parce que c'était un peu un casse-tête pour moi aussi. Je me suis dit : « Pourquoi ce genou en bas ? » Et ce n'est que lorsque j'ai en quelque sorte déplacé ma souris et que j'ai vu la petite ligne bleue, contrairement à ce que vous dites, il ne fait pas ce que j'ai dit. OK. Il est au fond de la boîte. Je les ai mis chez ses parents, mais il n'a aucune idée plus haut de la chaîne, de ce qui se passe. Vous ne pouvez que reconnaître ce qu'il y a dans son genre de parent à un pas en avant, qui est tout aussi bas qu'un chat maintenant. Nous avons donc simplement changé la hauteur minimale de l'emballage extérieur à l'emballage intérieur. Nous résolvons le problème. Maintenant, je vais quitter le style. Nous le ferons ensemble dans une prochaine vidéo parce que je pense que c'est suffisant, beaucoup de choses ont été faites. Ensuite, j'y pense maintenant, c' est qu'une fois que nous l'avons construit, je peux récupérer ma morue, ma vignette, mon copier-coller par espace , espace, espace, espace, espace. Et on peut avoir beaucoup de ces gars et changer les images. Très bien, la chose importante à retenir, c'est que cet enfant de mes parents Flexbox a besoin d'une marge sur le dessus pour être automatique et nous avons déterminé que la boîte, le parent dans lequel il se trouve doit être assez grand vous pouvez ensuite appuyer vers le bas. Bien, passons à la vidéo suivante. Il y a de l'amer. Devenez plus facile. Cela devient légèrement plus facile. Maintenant, ça devient un peu plus difficile, puis ça devient vraiment facile. Une fois que vous avez compris la structure, choses peuvent se faire un peu. Ensuite, toutes les choses vraiment faciles et amusantes se produisent. Je te le promets C'est bon, merci. Vidéo. 52. Position absolue et relative expliquée dans le flux Web: Bonjour tout le monde. Regarde ce que nous avons. Nous avons un bouton dans le coin supérieur de notre image. C'est exagéré. Ces trucs qui se chevauchent. Il s'agit d'un positionnement métrique ou absolu. Regarde, déplace-le. C'est facile, facile. Laissez-moi intervenir et vous montrer comment procéder. Tout d'abord, je vais ajouter un bouton, alors, fais-le glisser dedans. Je vais le mettre entre ces titres simplement parce que je veux exprimer un peu le positionnement qu'il fait, et cela va être utile pour cela. Je vais donc lui donner un avantage. Je vais aller trop loin. C'est uniquement parce qu'il s' agit d'un enfant d'une Flexbox. Si vous n'avez pas configuré de Flexbox, vous n'êtes pas obligé de le faire, mais je l'ai placée vers la gauche et maintenant je dois la déplacer vers le haut. En fait, ce que je vais faire, c'est en faire deux versions. L'un utilise l'absolu, N1, l'utilisation relative. Donc je vais lui donner des noms. Ce sera mon bouton. Ok, ils existent déjà, ça va être mon bouton plus deux d'entre eux. Mais un bouton plus un. Et je vais le copier et le coller ici. Obtenez-le. J'ai saisi le tout et je l'ai copié et collé. Vous n'avez qu'à copier. Vous collez dans la même position. Maintenant, je vais donner un cours différent à ce sujet. Vous l'avez probablement déjà fait. Si tu y vas, je vais juste le renommer numéro deux. OK. Vous ne l'avez pas renommé. Vous avez renommé toutes les classes en numéro deux. Regarde, le premier est maintenant le numéro deux. Donc, ce que vous devez faire est d'annuler cela et dire «  dupliquons la classe ». Vous pouvez également supprimer la classe et la modifier à nouveau selon vos préférences. D'accord, donc nous en avons deux distincts. Celui-ci s'appelle un. Passons donc à ce bouton en particulier. Vous pouvez utiliser n'importe quel élément, du texte, une balise div. Vous pouvez tout positionner. Regardons la position. Ça va mettre fin à tout ça. Ouvrez la position. La valeur par défaut est statique. OK ? Nous allons regarder un parent. D'accord, puis nous allons cliquer sur Maintenir et faire glisser certains d'entre eux. Montre. Regarde, ça bouge. Maintenant, je monte et je clique et je fais glisser vers la droite. C'est un peu traînant, ça continue. On y va. On l'a dans un coin, a augmenté comme moins 250 et à travers 256, 265, allez sur le cerveau. Excellente. Mais il y a laissé un grand trou. Donc c'est ce que fait un parent si vous devez laisser tout son contenu, ils sont géniaux. Je ne le fais jamais. Ce que je veux faire, c'est te dire que tu vas être absolu. Le cousin d'un parent. Mais regardez ce qui se passe ici quand je passe à l'absolu. Écoute, comble un peu l'écart. Et c'est ce que je veux. Je voudrais monter un peu maintenant, y aller un peu plus loin. On y va. Et tu es du genre « Super ». Mais utilisons simplement l' absolu pour tout. Et ça marchera comme si ça fonctionnait totalement maintenant, tu rencontres un petit problème. Laissez-moi donc vous expliquer ce qui pourrait se passer. Est-ce que c'est pour le moment ? Regardons ce premier bouton, celui-ci ici. C'est relatif à lui-même. Elle sait où elle se trouvait dans le monde. Il peut donc aller jusqu'à 50 et jusqu'à 65. Celui-ci cependant, parce que les lacunes l'ont comblé essentiellement dans la matrice. Il ne sait pas où il se trouvait auparavant. Donc ce qu'il fait, c'est qu'il dit que je suis relatif au dans ce cas, le corps, ce qu'il est, est en fait relatif au parent suivant. OK, donc pour le moment, le prochain parent de ce type est mon emballage de cartes le plus bas. Le parent de celui-ci est la vignette coupée. Il y a un parent qui souhaite aussi ma grille. Il y a beaucoup d' apparence en cours. Ce bouton indique que je vais chercher le prochain parent qui sera assis devant un parent. OK. Nous l'avons déjà fait sur le côté. Mais dès que je n'ai rien trouvé aucun de ces parents n'est proche de moi, donc ça remonte jusqu'au corps. Et ça marche très bien. OK ? Le problème, c'est vous pouvez voir ces chiffres géants ? OK ? C'est environ 700 800. OK. C'est parce que c'est relatif au corps. Le corps commence par ici, donc c'est une croix 800,844 et une descente de 724. OK. Et c'est très bien. Tant que tu ne changes pas de position. Disons que je le réduis beaucoup. Allons mesurer ma taille minimale. Je vais maintenir la touche Shift enfoncée, appuyer sur ma flèche vers le bas. J'ai trouvé mon bouton ici. OK. Eh bien, non. Il déménage. Ce type était relatif à lui-même parce que cette position a changé. Il a déménagé. Ce gars-là. Il est par rapport au coin supérieur gauche du corps et il fait toujours exactement ce que nous leur avons dit. OK. Il a toujours 800,700 points de retard. Peu importe ce qui se passe autour d'eux. OK. Boîte idiote. OK. Donc, ce que nous pouvons faire, c'est déplacer ce que c'était. Et j'ai eu beaucoup de choses à annuler, annuler, annuler, annuler. On y va. D'accord, donc tout ce que nous avons à faire c'est d'asseoir l' un de ses parents à quelque chose qui va bouger avec eux, c'est-à-dire ce truc ou la vignette de la carte va se déplacer complètement. Mais utilisons cet emballage pour fleurs de morue. On va l'asseoir devant un parent et ça va se casser. C'est bon Ton bouton a disparu. OK, donc ce n'est pas pertinent. Mon bouton ne peut que cliquer dessus ici. Il y est toujours. Il est ici. Il est toujours réglé à 700 sur 800. OK, donc il s'en souvient encore. Mais il est maintenant apparenté à ce truc qui est là. Donc il traverse et descend un peu comme tu l'as fait dans le corps pour se faire une idée. Parfois, il se peut que vous soyez hors écran. Il pourrait se demander : « Où est-il ? Il est peut-être tout à fait comme là-bas. Tu ne le reverras plus jamais. L'astuce consiste simplement à les effacer pour vous débarrasser. N'oubliez pas de maintenir la touche Option ou Alt, cliquez, cliquez. Cela remonte à votre point de départ. Et maintenant, on peut les faire glisser. Et il a un lien de parenté avec ce parent qui, dans notre cas, est très proche et qui va monter et descendre. Passez à ce qui est tangent à 100. Et écoutez, c'est parce qu'il est apparenté à ça, pas au corps. Donc, le truc avec Absolute, c' est qu'il fonctionnera pendant un petit moment jusqu'à ce que vous changiez quelque chose et que ce n'est pas le cas Donc, si cela se produit, vous avez simplement oublié de dire que vous êtes parent de quelque chose, d'une sorte de parents, d'autres, vous devrez peut-être l'envelopper dans une balise div qui ne fait rien d'autre. Alors soyez relatif, d'accord, alors attrapez le parent, rendez-le relatif, ne faites rien d'autre. Alors maintenant, il est relatif à l'emballage de mon catalogue. C'est logique. Une dernière chose qui pourrait vous surprendre, mais ce n'est pas le cas pour le moment, c'est parfois de rater le bouton lorsque vous les déplacez. Il disparaît. Ça disparaît, ça disparaît tout simplement. Tout le monde fait semblant pour le moment. C'est ce qu'il fait. Il aime bien, je peux cliquer dessus ici dans mon navigateur ou est-ce qu'il prend un bouton. Mais je ne peux pas le voir. Où est-il ? Est-il vide ? Parce qu'en fait, juste derrière cette image ce qu' on appelle l'index Z. Voici donc mon bouton par défaut. Ok, si je clarifie ça, il va bien. Mais parfois, vous utilisez projet ou le modèle de quelqu'un d'autre et que vous aimez manquer l'index z. Ils ont dit que l' image ici sera une position relative et que je serai l'index z d'un. Pourquoi l'ai-je rendu relatif et absolu ? Parce que je veux qu'ils tiennent cet espace parce que si je passe à l'absolu, ça devient un peu délicat, ça se dégage de l'espace et saute par rapport pour revenir à ta place, tenir ton lieu. Et tout. Ils ont dit que l'indice Z était égal à un. Je peux donc accéder à mon bouton, dire bouton. Tu auras maintenant deux ans, je gagne. Et puis l'image pourrait disparaître, tu attends ces trois-là, d'accord ? Et tu peux t'en sortir. Parfois, si vous trouvez celui de quelqu'un d' autre, un designer intelligent peut choisir ou développer Oh mon Dieu, je vais juste transformer ce 2999999. Et puis tu tournes tout le temps en frappant, où est-ce ? Où se trouve mon bouton ? Et tu passes à trois. Tu pourrais être là pour toujours. OK, donc tu dois être plus intelligent et mettre 99999999. Cela devient délicat. essayez de sauter trop haut, restez dans l'adolescence. Parce que la pauvre personne suivante essaie peut-être de taper autant de neuf. Cela ne fait pas toutes ces choses, mais vous avez l'idée tant que le nombre Z est plus élevé. Ok, celui-ci, je vais juste le nettoyer tant que c'est plus haut, c'est bon. C'est vrai pour tout. Si vous trouvez une autre partie de votre projet avec quelque chose qui se glisse en dessous, voici l'index. C'est la taille, il faut juste qu'elle soit au moins une fois plus haute que la personne. Il glisse en dessous. D'accord, c'était comment ? Il y en a une délicate. Positionnement. Absolute était dans mon plan , puis je me suis dit qu'il faisait trop chaud. Sortons de ses anges, puis revenons et repartons. C'est comme si, maintenant que nous suivons ce cours, j'ai l'impression que nous sommes en train de le maîtriser. Et vous arriverez probablement à la fin de ce cours et partez. Il nous a appris toutes ces choses, sauf pour ce qui est de la position. Pourquoi ne l'a-t-il pas fait ? Parce que c'est délicat et que c'est censé être Essentials. C'est le cours de base le plus long que j'ai créé. Mais bon, le web design est intéressant et il y a beaucoup de choses à comprendre. Donc vous prenez une position absolue, pas si fort ou votre cerveau a fondu. L'une de ces deux choses s'est produite. C'est bon, ça y est. Je vous verrai dans la prochaine vidéo. 53. La position de la ligne de flux de pied de page de navbar collant ne fonctionne pas: Bonjour à vous, vous soutenez cette vidéo que nous allons regarder, voir ce navigateur. Oui, c'est un point fort d' avoir une navigation très minimaliste. Mais l'avantage, c' est qu'il colle en haut et que les objets défilent est qu'il colle en haut et que les objets en dessous et vous pouvez voir qu' ils font de même ici pour cette vidéo en bas, elle est collée en bas. C'est relativement facile à faire. Vous utilisez l'option Sticky en position si vous êtes ici parce que vous l'avez fait et que cela ne fonctionne tout simplement pas. Vous devez placer le premier chiffre à zéro. Et tu seras un moyen. Mais pour ceux qui ne l'ont jamais fait auparavant, allons-y. Très bien, nous allons le couvrir maintenant. Le menu I'll n'est pas très beau, mais nous avons une barre de navigation en haut d'un bouton idéal. Imaginez donc une belle navigation que vous souhaitez conserver en haut de la page. Je le fais dans cette partie du cours même si le nom n'est pas complètement terminé, parce que je veux garder le tout ensemble dans la section de mise en page du cours . Tellement collant c'est bizarre, c'est facile et c'est délicat. D'accord ? J'ai donc tout ce que je veux pour rester au sommet, je me mets en position. Il y a cette option ici, elle indique « collant », puis vous allez prévisualiser et cela ne fonctionne pas. La seule chose que vous devez faire est de dire que le collant doit le faire, il a besoin d'une hauteur. Dans ce cas, je voulais m' en tenir à écrire en haut, donc je vais appuyer sur zéro, sur Entrée. Maintenant, Command Shift P, Control Shift P sur un PC. Regarde ça. Elle est coincée là. Ça va nous attraper. Ce que nous pourrions faire. Si vous voulez faire un NAB autocollant, vous n'avez pas à le faire , car la couleur de fond de la navigation est blanche. Je pourrais réduire un peu l'opacité afin que nous puissions faire un pic en dessous. Donc, regardons maintenant, il fonctionne même en mode affichage. Et vous pouvez le voir ici, le designer, vous n' avez pas besoin de prévisualiser. Vous pouvez décider de la manière de procéder. OK ? J'aime bien, il faut probablement qu'il fasse plus sombre. Je veux juste faire une allusion à ce qu'il y a en dessous. OK, je ne veux pas couvrir toutes les E/S de l'index Z. Je vais faire semblant de l'avoir fait exprès. Pourquoi est-ce au-dessus ? Pourquoi est-ce que tout le reste est en dessous ? Tu te souviens de l'index Z ? Je vais donc dire que cette navigation sera définie sur un index z de 1 000. OK ? Cela m'en donne, sur cette page, un autre aussi. Cela me donne dix ou neuf options. Vous pouvez mettre un z négatif. Connaître les options. Pour l'empilage. vous pouvez faire votre navigation En règle générale, vous pouvez faire votre navigation dans votre propre tête, 100, puis vous aurez 100 bits d'empilement. Mais tu sais que 100 est l' endroit où ton GPS va. Maintenant c'est au-dessus. Tu comprends ? D'accord, il en va de même. Si vous voulez Footer, Footer, vous ne voulez probablement pas être collant. Peut-être que c'est comme un appel à l'action comme une sorte de notification. Donc c'est peut-être quelque chose que tu devrais faire. Ajoutons une section en bas. Je ne peux pas y aller. Rentre là-dedans. Comment trouver le bon endroit ? Je vais appeler cela un pied de page de section. Et tu peux faire la même chose. Je vais ajouter une couleur de fond juste pour que ce soit évident. Et je vais faire de même. Faisons en sorte que ce soit trop collant ni en haut ni en bas, pour le mettre à zéro. OK, et ça devrait marcher. Et ça va fonctionner ici. Tu vois qu'il est un peu coincé là. est à vous de décider si cela vous est utile ou non. Les gens ne le font pas très souvent, mais ils aiment me demander comment le faire. Et vous y voilà. Mais la seule chose à ce sujet, cette section ici, et ce que je vais y aller, qui s'en souvient ? Il n'a pas de hauteur. C'est vraiment un besoin d'une taille minimale. Il a une hauteur minimale. Faisons 50 pixels. y a peut-être juste un petit texte pour expliquer qu'il y a une vente sur ou autre chose. Cliquez ici. D'accord, ça y est, navigation collante, pieds de page collants. N'oubliez pas de mettre le K supérieur à zéro ou une sorte de chiffre pour la navigation , puis quelque chose pour le bas de page. Et vous devrez peut-être jouer avec index z si les choses se passent en dessous ou si vous pouvez vérifier le mien parce que je ne peux pas faire défiler assez haut pour que cela passe en dessous. Jetons un coup d'œil. Peut-être que celui-ci ne peut pas le faire. Ils le sont non plus. D'accord, ça suffit. Je te verrai dans la prochaine vidéo. 54. Projet de cours 05 - Page d'accueil du portefeuille: C'est le temps consacré aux projets de classe et probablement le projet de classe le plus important que nous ayons réalisé jusqu' à présent, nous le ferons probablement pendant tout le cours. Ce que je veux que vous fassiez, c'est utiliser toutes les compétences que nous avons apprises jusqu'à présent dans ce cours. Je les ai tous listés ici titre de référence des choses que vous devriez chercher à faire et à les appliquer pour partir de là où nous en sommes actuellement. Ou si vous n'êtes pas parti de zéro, créez une nouvelle page. Et je veux en arriver à ce stade où vous avez une page d'accueil contenant tout votre portefeuille et des points d'arrêt différents. Je vais donc vous demander de faire du responsive design également. Maintenant, utilisez le vôtre, votre nom, vos propres couleurs, votre propre police, toutes vos images. Si vous voulez en quelque sorte suivre ma structure. J'ai ajouté un dossier qui est une calculatrice à deux des fichiers d'exercices sous portfolio, il y en a un appelé design fini. Je n'ai mis que des captures d'écran de la structure pour que vous sachiez ce qui doit y figurer. OK. J'ai également inclus tous les différents points de rupture. J'ai le fichier Figma dans XD si vous voulez les ouvrir et vous rendre visite, ou simplement regarder leurs captures d'écran. Donc ça a l'air long et ça l'est en quelque sorte, je suppose que vous n'avez encore rien fait. Mais mon conseil est faire une vidéo de solution ensuite et de tout faire moi-même pour que vous puissiez voir comment je suis ensuite et de tout faire moi-même arrivé à mon point de vue. Mais mon conseil est de le faire d'abord vous-même, de résoudre ces problèmes, d' essayer de déterminer ce type d'apprentissage est probablement le meilleur apprentissage que vous puissiez faire dans tout cela. ce qu'il faut faire est bien, mais tu ne peux pas t'y intégrer et te rendre compte que ça va te poser des problèmes. Il y a juste que votre nouveau sera quelque chose de délicat. partie la plus délicate est une ou ma triche sur cette navigation. Donc, sur cette navigation en haut, ici. OK, je veux me faire pousser de ce côté, ceci pour pousser de ce côté. Et nous avons déjà fait des choses similaires. Nous avons fait fléchir le parent. Maintenant, nous l' avons poussé jusqu'aux bords. Le seul problème avec cette structure, si vous me suivez maintenant, c'est que nous avons un conteneur. Vous pouvez appliquer du flex sur ce contenant et le faire sortir. Mais ce conteneur, celui que nous fournit le flux de travail, a en fait un certain style peut poser des problèmes, et c'est le cas dans ce cas. Donc, même si vous avez un contenant, il vaut mieux le mettre à l'intérieur de ce contenant. Mettez un, juste un, juste un vieux div comme celui-ci ici. Et commencez par là. Utilisez-le comme emballage ou non, le contenant, car un certain style est déjà appliqué. Il suffit donc de mettre un autre emballage à l'intérieur. Et ceux-ci, mon logo textuel et mon bouton à l'intérieur. C'est la seule chose qui pourrait te surprendre. Il y a donc une petite astuce, mais tout le reste devrait l'être Vous devez avoir les compétences ou du moins celles que nous avons abordées dans le cours pour voir si vous pouvez vous débrouiller. Allez-y, faites-le. J'ai listé les différents sujets et les éléments qui devraient figurer dans la navigation. Il doit y avoir un logo et un bouton. La boîte à héros doit avoir un héros qui appuie sur un bouton et une image. Si vous voulez savoir ce qui se passe dans quel domaine. Le défi, un petit défi secret que j'ai pour vous, c'est que l'image est dans un cercle. Comment faites-vous cela ? Je veux que tu voies si tu peux t' en sortir par toi-même. Cela comporte deux parties. Il y a les coins arrondis, mais vous constaterez aussi que j'ai utilisé des images carrées. Vous pouvez tricher et faire en sorte que vos images soient carrées. Mais si vous avez votre propre image et qu'elle est rectangulaire, vous rencontrerez un problème. Et c'est un examen à livre ouvert, un projet de recherche. Je vous donnerai un indice lorsque vous chercherez des solutions en ligne. Si quelque chose appelé objet convient, tu obligeras probablement grand-mère à lui dire que j'ai dit bonjour. Si vous n'y arrivez pas, ne vous inquiétez pas, nous y reviendrons plus tard dans le cours lorsque nous créerons des images de niveau 2. OK, je voulais juste voir si tu pouvais comprendre quelque chose, comprendre sur tes propres petits défis à livrer. Prenez une capture d'écran des quatre points d'arrêt différents, ordinateur de bureau, tablette et deux mobiles, puis partagez-la, partagez-la sur la partie devoirs et également sur les réseaux sociaux. J'adorerais voir ce que vous obtenez dans les commentaires. Dites-moi le genre de situation où vous êtes resté bloqué et où vous n'avez tout simplement pas trouvé de solution. Parce que ce serait intéressant de voir ce que d'autres personnes ont à dire. J'ai aussi eu ce problème, mais je l'ai résolu de cette façon. Ou il se peut que 1 000 personnes ne sachent pas comment y remédier à ce stade dans Webflow. Et je serais curieux de voir, peut-être que je dois revenir en arrière et ajouter quelque chose à la classe. Mais si vous avez quelque chose de difficile et que vous ne l'avez peut-être pas réparé, mettez-le là aussi. Il serait intéressant de savoir où se situent tous les problèmes des débutants. C'est bon, c'est ça. Va faire un portfolio. Et comme je l'ai dit, il y a ensuite une vidéo de solution, mais ne la regardez pas tant que vous n'avez pas créé la vôtre. Vous pourriez laisser quelques morceaux parce que vous ne pouvez pas les réparer. Nous les ferons ensemble dans la prochaine vidéo. Mais oui, allez vous amuser, résolvez les problèmes. Je te verrai dans la prochaine vidéo. Combien de temps cela a-t-il pris ? Sûrement dans quelques heures. Ça va être long. Et cela peut même vous prendre quelques jours selon vos capacités. OK. Donc, juste pour que vous sachiez, ce n'est pas une tâche rapide et que vous ne le faites pas mal s'il faut quelques voyelles, d'accord ? Au revoir. 55. Projet de cours 05 - Page d'accueil du portefeuille - Solution Partie 1: Alors, comment ça s'est passé ? Comment avez-vous créé votre version ? Je vais vous montrer maintenant comment j'ai fait le mien. Nous allons passer de, je vais passer de cette version à cette version plus complète. OK, cela fonctionnera sur différents appareils. Et je vais aborder certains des problèmes que j'ai rencontrés et comment je les résoudrai. Et ce serait intéressant, faites d' abord le vôtre pour que vous puissiez venir ici et dire, oh, comme s'il m'avait fait les choses différemment, mais j'en suis arrivée au même point ou je suis restée coincée là et je l'ai simplement ignorée . Je voulais que Haldane le fasse. OK. C'est donc à cela que sert cette vidéo, vous montre ma solution au projet de classe. Allons-y. Hein ? Allons-y. Eh bien, en fait, j'ai commencé, j'ai déjà fait 25 minutes de cette vidéo. Et devinez quoi ? Je branche mon micro. C'est pour ça qu'il est sorti de l'hostilité parce que je dois recommencer, brancher le micro et la prochaine fois que tu me diras que je t'entends. Très bien, alors refaisons-le. Nous allons commencer par le haut, d'accord, donc, hors de cette partie supérieure pour la navigation, d'accord ? Et nous allons avoir ce genre de vilain système de navigation en haut de la page. Qu'est-ce qu'on a ? J'ai donc un bouton. Ajoutons un bout de texte pour le nom, d'accord, si vous avez un logo, ajoutez-le et vous pourrez créer un logo dans un autre programme. Illustratrice. J'ai un cours pour ça. Mais oui, j'ai juste eu ce qu'il fallait. R, je vais aller au bloc de texte. Textblock ne va pas ici être un texte de paragraphe car ce n'est pas du texte de paragraphe et ce n'est pas un titre. Facebook est donc quelque chose de générique. Non, fais-le glisser au-dessus de mon bouton. Je vais saisir mon nom. Daniel Scott. Folio, point final. J'ai besoin de l'une ou l'autre disposition, Alors je vais le faire. Maintenant. Vous avez peut-être rencontré ce problème en premier, le premier, et vous avez déjà jeté votre ordinateur portable par la fenêtre. Et est-ce que vous pouvez fabriquer ce récipient. C'est l'un de ces conteneurs. Nous lui avons donné un cours, mais c'est un conteneur. Vous pouvez créer cette Flexbox, mais cela pose juste des problèmes. Il est donc préférable d'avoir un wrapper div autour de lui. Comment se fait-il que vous demandiez à ce conteneur, ces choses ici ne sont en fait que des balises div que ce flux de travail peut parfois ajouter un tas de styles à ce style, parce que vous ne l'avez pas créé et que vous ne Je ne sais pas ce qui se passe. Peut faire des choses comme des films. Je vais juste installer un diblock pour vélo. Mets mon bouton dedans, mets mes tiques dedans, passe la commande dans le bon sens. Et puis cela a bloqué, que je vais appeler div, nav. Je vais lui faire des films. Et je vais dire qu'il faut aller jusqu'au bout. On y va. Celui du milieu, en hauteur . Nous avons rencontré ce problème plusieurs fois, c'est que la division ne sait pas quelle est sa taille. Cochons, on ne lui a pas donné de hauteur. La hauteur provient de ce système de navigation, qui avait du sens tout à l'heure. OK, donc ce n'est pas l'ombre de la boîte. En fait, je vais garder l'ombre de la boîte. Bref. Cela provient de cette section de navigation, comment le savoir ? Je peux le voir un peu ici sous la taille, la hauteur minimale est fixée à 68. Si je maintiens ma touche de commande enfoncée et que je clique dessus, cela indique que cela vient, donc ce n'est pas d' ici, pas de la boîte où il vient de la section maintenant. Je dois donc aller à la section F et dire que vous n' êtes pas zéro parce que c'est différent de l'effacer. effacer est différent de zéro. Dans ce cas, cela aurait probablement bien fonctionné, mais prenez simplement l'habitude de les effacer, en cliquant sur Option ou Alt. Et je vais l'ajouter à ce div nav maintenant. Et il y a un U, d'une hauteur minimale de 68. Et ça marche un peu. Passons à la mise en page. Et par défaut, il s'étire. Je veux être centré. Et les bords. On y va. Joli. D'accord, la prochaine chose que je veux faire, c'est le styliser. OK, je vais appeler ça un texto. Et cela s'appellera logo. Et je vais le faire, il prend le logo, je vais le vérifier. Ce sera du sable public. Ça dit que c'est 400, mais c'est un peu un mélange là-dedans. Je sais que c'est le plus lourd et qu'il fait 20 pixels. Alors faisons-le. Donc toi, mon ami, tu vas avoir 20 ans. Tu vas faire preuve d'audace. Et je pense qu'il y a un petit point négatif à épicer. Je vais juste le regarder. Ça a l'air bien. Très bien, cette partie, je veux savoir, qui se souvient de la façon dont j'ai changé cela ? Parce que si j'ajoute une classe combinée ici, d'accord, donc ce sera la mienne, je veux que ce soit la couleur du secondaire. Il ne fait pas tout. Qui est venu ? C' était il y a longtemps. OK. Si tu t'en souviens, tu obtiens un point bonus. Vous le sélectionnez et vous l' enveloppez dans cette balise span. Au lieu d'en faire un petit peu, juste ce petit bout. OK. Et je dois dire qu' en fait, j'ai de la chance de m'en souvenir. J'ai créé des couleurs de tiques secondaires pour ici. Tu te souviens que j'en ai fait une classe mondiale laquelle nous utilisons des classes, Happy Dice, d'accord ? Et ce que je ne veux pas faire, c'est fabriquer. Cette tique, les couleurs secondaires, plus le poids est faible, parce que cela fera aussi effet à cela. Ce n'est pas ce que je veux. OK, donc je veux créer une classe combinée. Dois-je en faire une classe mondiale ? Est-ce que je vais l'utiliser à nouveau ailleurs ? Sûrement pas. Peut-être. Ce dont je parle, c'est de le déplacer à l'échelle mondiale. Je peux l'utiliser plusieurs fois. Si j'en fais une classe combinée, textuelle ou irrégulière, je l' utiliserai probablement ailleurs. Alors je vais y aller. Est-ce qu'on a fini ? C'est un texte Span ? Je vais donc en faire un projet mondial. Donc, ce que je vais faire, c'est récupérer un tag div. Vous pouvez l'appliquer à une balise div. Je vais juste modifier un bloc de texte, juste un bloc aléatoire. D'accord, vous allez avoir de la rigueur dans le texte. Et c'est un peu comme si tu étais obligée d'être régulière, de t'en sortir, de te débarrasser de lui. Maintenant, je peux ajouter quelques cours. J'ajouterai du texte normal Next, et j'ajouterai également du texte secondaire. C'est cool. Je ne sais pas. Je me sens très bien web designer quand je commence à avoir des cours et que je peux les réutiliser, regardez-moi réutiliser des cours. Regardons donc cela. Oui. Donc le premier bouton va être intéressant parce que ce bouton, ce bouton est réutilisé. Je ne vais pas juste créer un bouton pour tout le monde. Je vais essayer de les construire en utilisant des classes combinées. OK ? Parce que j'en ai un gros, j'en ai un petit et puis il y en a un ici qui en rencontre un. Celui-ci est en fait un peu plus petit que celui-ci plus grand. Donc, ce que je dois faire, c'est créer une sorte de classe de base, comme la classe la plus basse qui fait plupart du travail comme des coins arrondis. Et peut-être que ça fait aussi la couleur. Ça met toutes les tiques en majuscules parce que tu peux voir qu'elles sont toutes en majuscules et tout ça, d'accord ? Et acheté, je dois le faire au plus générique. Celui-ci ne s'habitue que, le plus gros, et il ne s' utilise qu'une fois sur une page. Ce petit modèle s' habitue ici en haut. n'y a rien d'autre dans mon design. Celui-ci s'utilise plusieurs fois, et je suis plus susceptible de l'utiliser encore et encore. Donc, je vais en fait styliser celui-ci. Et je ne vais pas le styliser ici parce qu'il fait des choses étranges dans le code ici. Donc, si je m'en débarrasse, le toit devient un peu extensible. Je ne veux pas ajouter le positionnement de l'enfant, désolé, des films pour enfants et le faire parce que cela ferait partie du style. Et ce n'est pas vraiment ce que je veux parce que c'est quelque chose d'unique. Je vais donc styliser celui-ci. OK ? Il y a deux choses qui s'appliquent à celui-ci. Je n'aime même pas cette ombre, alors je vais m'en débarrasser. Donc, le bouton fait plusieurs choses. À quoi sert-il ? N'oubliez pas de cliquer sur Option ou Alt Il ne fait que le contexte. C'est son seul travail. Je vais donc continuer à utiliser celui-ci. OK, alors il le fait. Que vouliez-vous faire d'autre ? Je veux que ce soit en majuscules. OK ? Je veux que mes boutons soient en gras parce que c'est ce qui se trouve ici. OK, je veux un peu plus de rembourrage en haut et en bas. Maintenant, il s'agit de rembourrage en haut et en bas. Ce que tu veux vraiment faire, c'est le copier parfaitement, d'accord, parce que fais travailler le rembourrage et le faire calculer à merveille. Le problème, c'est que beaucoup de ces choses sont associées préexistants, comme les marges. si je regarde Hera One en la regardant, où est mon héros caché ? Il y a déjà des choses dessus. Il a une marge de 20 en haut et de dix en bas qui provient de ce coup. Qui l'a créé il y a longtemps quand il a décidé que les H 1 sur Internet auront tous ce type de rembourrage par défaut. OK, donc lorsque vous essayez de mesurer des choses, vous devez prendre en compte certaines tailles par défaut. Il reste donc un peu de temps. En fait, on va juste faire comme si ça avait l'air assez proche. OK, donc je vais m'en approcher suffisamment. Donc, je veux qu'un bouton ait un peu de rembourrage. Voyons voir, je regarde celui-ci. Ça a l'air un peu plus. En fait, le texte du bouton est probablement ce que je dois faire ensuite. Donc ça fait 14. Je pense que c'est probablement 16. Mes boutons auront une valeur par défaut, tous les 14, puis commenceront à faire le rembourrage. Et je pense que c'est peut-être serré. Si je le faisais , je l'aurais sur un autre écran pour pouvoir le voir. Mais ça ne se voit pas à l'écran. Nous devons donc faire cette danse maladroite. Vous pouvez appuyer sur Command 1.2, d'accord, Pour quels onglets, d'accord, nous allons contrôler 1.2 sur un PC. Donc c'est bon, je pense que les rembourrages ou juste en haut et en bas, c'est dû aux bords ici et aux coins arrondis. Je vais faire les coins arrondis par celui-ci intéressant. C'est à lui que je confie cette petite tâche tout à l'heure. La façon de les arrondir fonctionnera à la fois pour les boutons et les images. Alors trouvez la frontière. OK, et augmentez le nombre d'arrondis. Tu peux me voir, je peux aller chercher le mien jusqu'en haut. Parfait. Mais disons que je fais cette hauteur de bouton. Je l'ai donc fait 20 pixels. C'est tout ce que vous pouvez faire glisser dans Webflow. Mais disons que j'en agrandisse la hauteur. Donc je dis que la taille est une hauteur minimale de 100 pixels. Tu vois que 20 ne suffit pas ? Je voulais être parfaitement arrondie si c'est l'objectif ici, les gars, ce que vous pouvez faire, c'est dire que ce rayon frontalier est de 200. Tu peux aller bien au-delà de ce que tu dois faire. Vous pouvez fabriquer ce 2000, 20 000 XD et il ne sera que très pratique. Ok, alors ne le fais pas parfait et fais comme si tout était parfait. Parce que s'il grossit, tu te retrouveras avec de petites coupures, comme une coupure exagérée. Ce n'est peut-être pas exagéré, mais vous pouvez voir ici que je peux m' en approcher de plus en plus. Ok, fais-le juste au lieu de 61, fais-en 100. Dans ce cas, il sera toujours parfaitement rond. Et cela fonctionnera aussi pour cette image , mais nous le ferons ensemble. Et je veux le rayon, le régler à 100. Je vais me débarrasser de cette hauteur minimale, non ? Votre option de hauteur minimale, je cliquerai sur OK. Ça a l'air plutôt beau. Je l'aime bien. Je pense que tu as besoin de plus de rembourrage à l'extérieur. Alors faisons-le. Faites-le glisser dans le mauvais sens d'abord, revenez en arrière dans l'autre sens, dans un délai raisonnable ensuite , d' accord, donc j'ai mon bouton générique. Alors, en bas, nous pouvons dire que c'est le cas, je vais me débarrasser de la carte à boutons, de votre classe. Vous allez commencer par un bouton, un bouton générique. Ensuite, nous avons ajouté cette classe appelée « Button Card ». OK, c'est ce qui l'a complètement inondé vers la droite. Et dans tel ou tel cas précis, souvenez-vous qu'il suffit d' aller voir l'enfant des flicks et de lui dire « alignez au bon endroit ». Merci beaucoup. Très bien, nous avons donc un bouton. Faisons-en un petit et un grand. Alors, commencez par le plus gros. Alors maintenant, nous allons avoir une classe combinée. Cela ne sert à rien d'être une classe globale car elle n'appliquera que deux boutons. Je vais appuyer sur le bouton L-O-G. Vous pouvez l'écrire en grand format si vous le souhaitez. OK, et celui-ci a besoin de plus de rembourrage. Des deux côtés, maintenez la touche Option ou la touche Alt enfoncée pendant que vous faites glisser un peu plus. Et le texte que je connais, c'est parce que je l'ai déjà fait. 16 s'en souviennent d'une partie. Mais ce n'est pas ta faute. Mais je te blâme. C'est donc mon plus gros bouton. OK ? Oui. OK. Regardons celui-ci ici. Doit être un petit bouton et éliminer l'ombre de la boîte. Je vais y aller. Et je vais dire le festival. Le texte est, je crois, je me souviens que c'était de la topographie, disons ce soir. OK. Et le rembourrage va baisser. Et c'est ce qui va arriver. On y va. Je suis heureuse. Une chose que vous constaterez, c'est que vous voyez les tiques ici, elles sont de la bonne taille, mais elles n'ont tout simplement pas la même apparence ici. Il existe des sites Web qui sont amusants, comme les polices, en particulier sont données à l'ordinateur et au logiciel pour le rendu. Ils ne sont pas les mêmes sur tous les ordinateurs. Donc, fondamentalement, votre ordinateur est différent du mien. Chrome est différent de Firefox. Ils rendent tous la police légèrement différemment. Alors ne passez pas trop de temps à essayer de l'obtenir exactement parfait entre ici et ici. Parce que vous constaterez peut-être que lorsqu'il se charge dans Firefox ou dans un autre navigateur, il aura un aspect légèrement différent. La police est rendue par le truc qui essaie de la montrer à l'ordinateur et au bout du logiciel. texte n'a donc pas la même apparence dans Photoshop que dans Illustrator, comme dans Figma, XD ou d'autres navigateurs. Alors approchez-vous, mais faites quelques tests à la fin. Ne soyez pas parfait au pixel près maintenant, brossez les dents et découvrez ce qui ne va pas. Et mets-le près de la fin. Vous vous rapprochez de l'endroit où vous vous trouvez, faites quelques tests et vous voyez où cela va, peut-être que Figma dit qu'il doit être très audacieux. Mais j'ai décidé de passer par là et de tout créer 700 parce que les navigateurs semblent en général les rendre un peu plus petits. Un peu comme ce que tu avais à Figma. Dans les mauvaises herbes, Dan ? Oui. Oui. Revenez sur la bonne voie. Nous avons donc ceci et cela. J'ai besoin d'un peu de rembourrage ici. Donc je vais faire, je vais faire deux ou trois choses. Je ne suis pas satisfait de la hauteur de la ligne, ou est-ce que cela vient ? Je vais maintenir la touche de contrôle de mon singe enfoncée sur un PC, elle vient de tous les 1. Tous les 1 en ont beaucoup trop serrés. Et aussi je vais m'en débarrasser ou je reviens. Où êtes-vous allé ? J'ai disparu. Ce micro fonctionne toujours. Je ne saurais pas être heureuse. Bref. Cela fonctionnait bien. Et ils vont faire une crise de panique là-bas. Et donc parce que c'est à peu près au moment où j'ai découvert que ça ne fonctionnait pas la dernière fois. Donc, ce que je vais faire, c'est me débarrasser de ce héros de la chaleur. Où est-il ? Topographie. Prends des ombres. Au revoir. Prenez des photos. Je l'aime bien et je veux du rembourrage ici. C'est intéressant. Comment puis-je le différencier ? Parce que ce truc est dans une grille. OK. Ce n'est pas dans un c'est dans la Flexbox, n'est-ce pas ? C'est un David Bach. Et vous pourriez ajouter une certaine marge. J'ajouterais une marge au bouton séparément du bouton Lodge, j'appellerais celui-ci. J'ajouterais une classe appelée une classe globale appelée margin top. Et je le ferais grand ou petit, quelle que soit la taille que vous voulez. Et cela fonctionnerait totalement et vous l'auriez peut-être fait . Qu'est-ce que j'ai fait ? Nous y sommes allés et nous avons acheté parce que des flicks sont appliqués à ce type de bloc de div rapide que nous avons ici, que j'ai appelé diblock, ce qui n'est pas génial. Et je vais dire que vous l'êtes, que vont-ils faire ? C'est bon Et les enfants de la grille, pas de mise en page. Il est donc un enfant du réseau, mais il est également le parent de cette Flexbox. Flexbox a des choses intéressantes, comme les lignes vont utiliser ma flèche vers le haut. Oh, regarde ça. Peut-être maintenez Shift et plus haut pour obtenir l' espacement que vous souhaitez. Très bien. Non, je ne vais pas faire ça. Je vais réduire la hauteur de la ligne. Il suffit de passer à l'intérieur. D'accord, la prochaine étape suffira, c'est cette image. Donc, l'image ici montre que vous allez vous régaler. Nous allons apporter les images. J'en ai quelques-uns que vous pouvez utiliser déjà traîné les miens parce que je l'ai déjà fait. Alors, allez dans vos fichiers d'exercices. Vous y mettez votre propre visage pour votre portfolio. Ou peut-être une personne générique d'Unsplash ou l'a mise dedans, peut-être une partie de votre travail dedans, peut-être que vous êtes en retard sur le dernier travail, ou vous pouvez utiliser l'un des masques. Vous pouvez donc utiliser l'un d'entre eux. Je vais ajouter celui-ci. OK. Il s'est trompé d'endroit. Je vais donc le convaincre de rechercher ce diblock. Il passera à l'élément suivant de la grille car il n'y a que deux éléments dans cette grille, même s'il y en a beaucoup ici, ils sont tous enveloppés dans cette balise div qui se cachait dedans. Ce gars-là, c'est super. Et ce qui est cool avec la grille, c'est que vous pouvez faire des choses aux enfants, d'accord, alors cette grille ici, n'importe où à l'intérieur, elle ne se fait pas à l'intérieur. C'est un peu comme l' espacement général, la mise en page et tout le reste. Mais il suffit de sélectionner tout ce qui se trouve à l'intérieur d'ici et de dire grille enfant, que vous vous aligneriez au centre pour moi ? Et faisons les coins arrondis. C'est exactement la même chose que le bouton. Fais juste face. Nous descendons donc ici et nous franchissons les frontières. Tu l'es, tu ne peux en avoir que 20. Mais nous savons que nous pouvons le porter à 200 ou 1 000. Il suffit de vérifier s' il a des bords aplatis. Et si vous êtes un peu paranoïaque, descendez à 100 100,2, bref 5 202, 50, pas de changement. 250-200. Laisse-le à 02h50 alors je ne sais pas pourquoi trouver quelque chose d' assez grand mais pas trop grand. Mais jusqu'à 999, ce serait Mehta. OK. Tellement arrondi. Il doit également être un peu plus petit parce que ce n'est pas, vous savez, que nous pouvons certainement augmenter l'écart. C'est assez facile à faire ou à terminer. Vous pouvez prendre des images, nous l'avons fait plus tôt dans le cours. Vous pouvez simplement les faire glisser, obtenir le genre de pas celui-ci. Celle-là. OK. La flèche là, c'est un peu comme si on y allait, je vais la réduire. Mais ceci, toute chose conflictuelle à l'intérieur de cette cellule de la grille. Et je peux dire qu'en fait , en haut ici, l'enfant de la grille peut être saint de cette façon là-dedans aussi. Et nous y voilà. Ça a l'air assez beau. Très bien, jetons un coup d'œil. Je vais m'en débarrasser. Je ne veux pas qu'il y soit touché plus tôt. Et que pouvons-nous faire d'autre ? Ce que je pourrais faire, c'est que mon instinct à ce moment-là était tellement en bas de page de section. Je n'en ai pas besoin. Je n'utiliserai jamais ce pied de page de section classique CSS, ou ça pourrait l'être, mais ça fait des choses étranges. Donc, comme le voit mon cerveau de conception Web , allez vous en débarrasser maintenant, gardez-le propre. Je peux donc obtenir mon type de gestionnaire de style en pied de page. Et tu peux y aller et ensuite, OK, et je le ferai plus tard parce que je vais l'ajouter, ça va faire des choses bizarres et ça va me faire flipper. Je le connais bien. Très bien, maintenant nous en sommes à ce morceau. Ce que nous devons faire, les choses que nous devons boutonner là-haut, ce qui a déjà besoin de style et de petits détails. Faisons ces petits moments. Et je vais le faire, je vais me débarrasser de tout ça sauf un. C'est celle qui possède le bouton qui fonctionne déjà depuis une vidéo précédente lorsque nous faisions le positionnement absolu. OK. Revenez à celui-ci. Si vous ne l'avez pas fait, si vous avez eu du mal avec celui-ci parce que je vais le réutiliser pour le moment. Je vais te chercher. Et je veux prendre le parent, ce qui est un peu délicat parce qu' il y a toutes ces choses qui me gênent. Je n'arrive pas à accéder à la vignette de la morue, je peux cliquer dessus ici. Il y a donc deux façons de cliquer dessus et de dire, coupez-les maintenant, supprimez ou cliquez sur celui-ci. Et je peux utiliser ma flèche vers le haut pour attraper le parent. N'oubliez pas cette partie du flux de travail. Si je clique dessus et que j'utilise les flèches gauche et droite, il tournera vers la gauche. droite représente les frères et sœurs à l'intérieur, ce qui est plutôt cool. Mais le principal que j'utilise, cliquez à l'intérieur d'ici, appuyez sur la flèche vers le haut, il va attraper le parent, qui est mon emballage inférieur. Ça remonte à nouveau. Il va attraper son parent, qui est ma vignette de morue. Et je vais supprimer, supprimer, supprimer. J'y ai ajouté du plomb. Je vais en faire un, le répéter, puis le changer. Sinon, ils devront continuer à ajouter des classes et d'autres choses. Nous allons donc commencer par celui-ci. Nous allons styliser le moment et il n'a aucune valeur. Je vais donc appeler cela un texte, et je vais appeler ceci un sujet. Vous remarquerez que je mets abord le nom le plus générique, puis la partie la plus descriptive, cela signifie simplement que plus tard, lorsque vous tapez du texte, je trouve que c'est une chose plus facile à regarder. Plutôt que le logo, il faut du texte normal. C'est juste moi. Donc c'est le texte du sujet, je vais dire, qu'allons-nous faire ? J'ai besoin de connaître la taille. C'est 12 parce que le 12, je peux le faire. Le texte du sujet sera donc la topographie 12. Il obtient toutes ses tailles de police par commande ou contrôle, cliquant depuis le corps ou les pages. Je l'ai déjà fait. Et je pense que c'est tout ce dont j'ai besoin pour les faire. Regardons celui-ci ici. Maintenant. Celui-ci est intéressant car l'espacement ici est assez petit. Et celui-ci, par défaut, je n'ai rien fait à ce genre de choses. Je l'ai juste mis sur la page. Aucune classe appliquée dans un espacement déjà assez grand. Il est bon de passer en mode radiographie. OK, et passe en mode radiographie. D'où vient-il ? Passez la souris au-dessus de cela pour voir qu' une grande partie est appliquée à mon H2 et qu'elle provient simplement d'Internet. OK. En avons-nous discuté ici ? Celui en H le fait aussi. Je ne lui ai pas demandé cet espacement. Si je clique dessus, la valeur par défaut est 20.10. Si je commande, cliquez dessus, cela indique que tout H2 est livré avec cela dans l'article, mais ce n'est pas le cas. Une personne, lorsqu'elle invente Internet ou du moins le HTML pour la première fois , décide que les chauffages auront un peu de marge en haut et en bas. Et ce que je suis en train de décider maintenant, probablement à mon grand désarroi futur, c'est de me débarrasser des marges. OK. Je dirais qu' en touchant deux, je vais sortir et passer en mode radiographie. OK. Je vais dire que vous frappez deux qui seront en fait mis à zéro en haut et à zéro en bas. OK ? Et je ne veux pas modifier toi. code HTML historique créera un gars qui ira. Je vais donc le modifier si j'en ai besoin pour le moment, je pense que je n'en ai pas besoin. OK. D'autres choses que je veux faire avec mon générique H2, je vais réduire la taille de police parce que cette guerre peut être la taille de police de 23. OK, je vais probablement faire 24 heures. Type de taille de police courant. Il a créé H2 parce que j'ai cliqué sur Désactivé puis sur Retour. Donc ce que je vais faire, c'est le défaire. Et ce truc, je vais m' assurer de le faire avec les balises H2, toutes. OK, et ça va être 24. Joli. Je vais m'assurer que tout est en majuscules parce que c'est en quelque sorte une règle décidée dans ce design. Et tout ce que je veux faire d'autre. J'ai besoin de n'importe quel rembourrage. Je n'ai pas besoin de rembourrage. Si je devais ajouter du rembourrage, je l'ajouterais probablement au sujet des tiques. J'ai fait une marge en bas. Parce que ce moment est quelque chose de tout à fait pur. Aucun style ne lui est appliqué et c'est plutôt parfait. Je ne veux pas commencer à ajouter du rembourrage maintenant car qui sait si cela sera utile plus tard ? Mais ce truc là, il ne s'habitue que comme sujet de texte pour cette carte en particulier, n' est qu'un travail dans la vie. Pour qu'il puisse être calme, vous pouvez lui ajouter toutes sortes de choses étranges. Ce type va le garder bien rangé. 56. Projet de cours 05 - Page d'accueil du portefeuille - Solution Partie 2: D'accord, la hauteur est trop haute. Faisons les boutons déjà. Donc, ce que nous allons faire, c'est déterminer d'où vient la hauteur . OK. Alors, où se trouve le minimum de randonnées à partir de cette base de morue, j'ai juste cliqué dessus, appelée la bonne. Excellente. OK. Et je vais abaisser la hauteur minimale à, je ne suis pas sûr. Ce que j'aimerais faire, c' est avoir ces deux lignes. Je veux qu'il y ait suffisamment de place pour deux files d'attente. OK ? Donc je vais le styliser, vous savez, baser ma taille minimale sur la hauteur de la ligne, touche Shift enfoncée pour utiliser ma flèche vers le bas, évidemment trop bas, quelque part là-bas. Et comme c'est une hauteur minimale, cela signifie que si j' en ajoute d'autres, vous pouvez voir que cela la pousse vers le bas. OK. Parce que c'est la hauteur minimale, pas la hauteur maximale. Cela lui permettra de grandir s'il le faut. Écrase. tout ce que nous avons besoin de faire, vous avez besoin d'un style pour ce bouton. Faisons ce bouton ici. Donc, votre bouton d'appel plus deux. Et nous nous souviendrons plus tôt que nous avions deux boutons, nous avons ajouté le bouton plus deux et le bouton plus 11. Ce ne sont que des exemples. Celui-ci a été ajouté ici relatif, celui-là ajouté absolu. Donc je n'en ai plus besoin. Donc je vais être de nouveau en ordre. Je vais renommer celui-ci appelé Button Plus, car je n'en ai qu'un seul. Et je vais voir mes styles et dire « bouton plus un ». Je n'ai plus besoin de toi. Un lieu comme notre bien rangé IM you I'm going to style, je pense qu'à l'origine, il devait être noir. Je n'aime plus ça. Je vais donc en faire une couleur secondaire où Button Plus, oui, mais I'm Plus peut prendre tous ces styles. En fait. Il ne fait rien. C'est cette science qui me tient à cœur et parfois je m'y perds. Mais ce que je vais faire, c'est vérifier si j'ai déjà de la couleur, de la couleur d' arrière-plan, ou si nous avons des couleurs de texte secondaires, cela ne fonctionne pas parce que cela prend de l'intérieur. Donc, couleur, dégradé de fond. Maintenant ce que je veux, d'accord. Donc je n'ai pas celui-ci, donc je vais en faire classe globale parce que je serais probablement réutilisé cette couleur de fond, cette couleur d'arrière-plan secondaire. Alors faisons-le. Donc je vais prendre ma clé A, faire glisser un bloc div. Je viens d'y aller. ne m'intéresse pas vraiment, parce que je vais créer ce qu'on appelle la couleur. J'utilise l'orthographe américaine, même si je viens de Nouvelle-Zélande, j'habite en Irlande. Nous l'utilisons partout. Mais c'est surprenant de voir combien de personnes m'écrivent pour me dire que j'ai mal orthographié la couleur. J'ai mal orthographié beaucoup de choses, mais je viens de le comprendre. On y va. D'accord, colorie BG pour arrière-plan et celui-ci va devenir dégradé. On va faire du secondaire. Et je vais dire le contexte, je vais faire la somme de tous les arrière-plans fermés. Tu as eu mes adorables échantillons. Et c'est ce que ce type va faire. Ce que je vais faire maintenant, c'est le dupliquer parce que pendant que je suis ici, je vais en créer un secondaire. Désolé, c'est une question secondaire. Une autre appelée primaire. Et celui-ci va être excellent. Donc je vous ai et je peux soit mettre arrière-plan principal, soit le supprimer et dire arrière-plans de couleur, secondaires, c'est parti. Il était donc juste là pour créer mes petites classes mondiales. Si vous savez, une meilleure façon de le faire, c'est probablement le cas. Si c'est le cas, faites-le moi savoir dans les commentaires. Bref. J'ai donc Button Plus, je vais utiliser la couleur secondaire. La raison en est que le fait de ne pas l'appliquer uniquement à la classe de boutons, c'est si je dois le changer plus tard parce que c'est juste que le rapport de contraste n'est pas bon. J'ai besoin de l'ajuster. Je me réveille le lendemain matin. Je n'aime tout simplement pas ça. Si je change simplement cette classe, le bouton changera, et cela changera tout le reste que je l'ai utilisé. Au moins les arrière-plans de couleur secondaires à appliqués. Même chose avec la rondeur des boutons que nous avons faite ici. Et ce que nous allons faire, c'est dire, je vais, je veux le faire sur le bouton plus, parce que je ne veux pas l'ajouter à cette classe là-bas. bouton plus aura donc des bordures. Montez-le et mettez-le à 50. Il est donc complètement rond. Il n'est pas complètement rond. Tu peux voir ? C'est un peu ovale. Comment le faire rond ? Je vais lui donner une taille. Et la mienne sera de savoir quelle est la taille de ces 3D, d'une largeur de quatre pixels. Je vais donc dire que vous avez une taille de 34. J'ai l'impression que je vais me poser des problèmes ici. Oui. Ça prend le contrôle. Comment le mettre au milieu ? C'était un très bon point. Comment vais-je obtenir des commentaires ? Et c'est une égratignure de tête et le temps. Il y a donc un peu de tiques ici. Il y a quelques styles à venir. Si je le sélectionne, il y a quelques styles. Je pourrais le transformer en graphisme et l'apporter. Si tu n'étais pas là, je le ferais probablement et j'irais à Figma, je le ferais et je le dessinerais, et je le dessinerais apporterais sous forme d' image et je le déplacerais vers le haut. OK. Mais tu es là. Alors, comment vais-je m'y prendre ? Je vais agrandir le festival de topographie parce que j'utilise juste le plus. Et puis, à l'intérieur, je veux le déplacer. Dois-je utiliser la position ? Déplacez-le. Je le fais. J'essaie de jouer avec le rembourrage. Voyons si c'est un schéma à venir ou si je peux le faire. Mon problème maintenant, c'est que je le fais en arrière-plan secondaire. Et moi qui ai gardé l'annulation ? Annulez un tas de fois la mesure du poids de mon clavier parce que je jouais avec la taille lorsque j'étais connecté à cette classe de combo. Donc défait, je vais le faire, je vais juste l'enlever pour le moment, juste au cas où j' y retournerais accidentellement. Je suis sur le bouton et je vais te faire une taille 34. Pourquoi n'ai-je pas utilisé de tailles minimales ? Parce qu'il n'y a aucune évolutivité que je souhaite. Je ne veux pas qu'il s' agrandisse au cas où il ne serait pas autorisé à vous donner une largeur fixe. Et cela aura une taille de police identique à celle que j'ai eue aussi. Ça va faire l'affaire. Et je vais utiliser le rembourrage et la marge qui proviennent de, cela vient de maintenir la touche Shift et la touche Commande enfoncée. Chronométrez vous d' où il vient. Ignorez cela. Je vais donc vous en donner un peu de cette façon. Parfaitement au milieu. Montez encore une fois. Cinq. Nous en sommes contents. J'en suis content. OK. Et nous allons passer au secondaire en arrière-plan. On y va. Il n'est pas dans la bonne position. Nous allons donc revenir à mon bouton , trouver le positionnement et partir. Je traîne un peu ça la dernière fois que je n'étais pas vraiment enthousiaste à l'idée de savoir où cela s'est terminé. Mais maintenant je suis enthousiaste. Je le fais glisser de haut en bas ou de gauche à droite, en le regardant et c'est parti. OK. C'est en quelque sorte ça. Et moi, j'ai besoin de jouer avec ma direction pour ça. J'ai aussi besoin d' un peu d' espace en bas, un peu collé au fond et ça me rend folle. J'ai donc besoin d'un peu de place par la suite. Ok, donc ce que je vais faire c'est trouver où vient cet espacement . OK, la largeur du récipient, donc regarde la taille. Donc, peut-être que les vignettes de la section ont un espace, elles sont là. J'en ai donc 64 au sommet. Et ce que j'ai fait là-bas, c' est comment je décide de ce qui contrôle tout cela. Vous pouvez obtenir un mode radiographie. Ok, donc tu pourrais passer en mode radiographie et qui, où, d'où ça vient ? Ça ne te montre même pas. OK. Donc ça n'a pas marché. Donc, si cela ne fonctionne pas ou si je fais ce que je fais le plus souvent, ils passent en mode radiographie, c'est juste que je retravaille. Je sais que c'est un peu normal. Je passe par les parents. Ce type n'a pas d'espace en haut. Ce type, la grille n' est pas espacée. Miniatures des sections. Il est là. Il en a 64. Je suis content de 64. Mais j'en veux 64 en bas aussi. Qu'est-ce que j'ai fait ? J'en avais 12,3. OK. N'oubliez pas que c'est le raccourci pour parcourir toutes ces tailles différentes, d'accord. Ou les différentes fenêtres d'affichage. C'était un excellent accord. Ce que j'étais censé faire, c'est juste taper un à 64 et appuyer sur Entrée. Maintenant parce que j' espace en bas. Ray. En fait, je veux qu'il soit plus grand. 164. C'est comme ça qu'il a obtenu une certaine marge de manœuvre. Maintenant, je vais prendre cette flèche vers le haut pour saisir le parent, qui est la vignette COD, copiez-la, collez, collez, collez, collez, collez. C'est tellement satisfaisant, quand vous arrivez enfin à un point, que vous vous dites : « Je peux, vous savez, vous avez fait tout ce travail acharné et vous pouvez simplement avancer et répéter. OK, donc maintenant je vais augmenter le rembourrage ici. Je veux donc saisir la flèche vers le haut de la grille jusqu' à ce que je voie l' icône de la grille et l'agrandir. Et est-ce que je fais en sorte que je le fasse même ici ? Je l'ai fait C'était quoi ? Je vais donc cliquer dessus. Maintenez ma touche Option enfoncée. Ça dit 32, mais ça part dans les airs. Ce qui est suspendu au-dessus du bord. Et c'est un vieux groupe important. Dessiner. Cela ne fonctionne pas. Prends un rectangle. Supposons que vous ayez une largeur de 50 pixels. Merci beaucoup. Alors je veux savoir où est-ce ? Ma mise en page ? Tape-le. L'écart sera de 50 par 50. On y va. D'accord, c'est ça. Je vais maintenant passer en revue et modifier le texte et les images ici. Je vais le faire en mode d'avance rapide. Je vais faire une pause s'il y a quelque chose d' intéressant que je trouve. J'en doute. Lorsque vous créez vos propres images, vous avez évidemment vos propres images ou vous pouvez utiliser celles qui se trouvent dans les fichiers d'exercices. Les miens sont déjà là. Ils le sont. Donc oui, je vais passer en mode rapide et le mettre en pause. Si quoi que ce soit génial arrive chaque fois qu'il y en a. Waouh, ouah. OK, arrêtons. Faites d'abord l'espacement. Pourquoi ? Parce que pourquoi c'est là-bas ? OK. C'est parce que jetons un coup d'œil à ce que vous penseriez ? Parce que oui, la pause. Réfléchissez un peu à ce qui aurait pu se passer pour trouver une ou deux idées, puis reprenez une pause, soyez prêt, revenez en arrière. Ok, donc ce bouton ici permet de se positionner à partir de ce parent par rapport à son parent Rapa. Tu te souviens qu'on l'a fait. Le bouton est donc posé plus bas lorsqu'il positionné sur un bouton plus. Donc pas celui-ci. Il l'obtient grâce au Button Plus, pas à la classe combinée. Il se positionne et il les dit de manière absolue par rapport à cet emballage appelé enveloppe inférieure de carte, qui est celle qui se trouve juste à l'extérieur. Et nous avons dit « soyez littéralement ceci ». OK, et maintenant nous avons changé cela. C'est toujours exactement la bonne mesure, mais elle est maintenant suspendue au-dessus des bords. Donc maintenant, ce que nous allons faire, c'est dire «  u » ou « de cette façon ». Et en fait, ce que je pourrais faire, c'est le faire de ce côté plutôt que de partir, voyons si cela fonctionne. C'est ma théorie de toute façon, plutôt que de sortir de ce côté et de monter. Parce que si ça devient plus petit, ça l'est toujours. Mais si je quitte ce côté droit, ce sera toujours un petit moment. Essayons-le. Est-ce que cela a du sens ? Ce n'est pas le cas. Je vais m'en débarrasser et m'en débarrasser, je vais quitter le haut parce que c'est vrai. Mais je vais utiliser ce côté. Je vais dire que tu es de ce côté. J'utilise ce coin comme référence. OK. Donc, en haut et à droite du parent, je l'utilise. Donc je vais devoir me rendre compte que vous devez quelque sorte mélanger, mélanger, mélanger. J'espère maintenant que lorsque je le changerai , cela fonctionnera. Je vais totalement travailler. Allez, travaillez. Grilles. Tu vas t'en emparer. Et quand je le déplace, il fait le trottoir et je dois faire le bas. Je vais faire le fond. Il fait du bon côté. se peut que je doive le faire sur un autre point intéressant. Nous le faisons trop par rapport à cela. Mais même si nous le plaçons au-dessus de cette image. Faisons donc autre chose qui pourrait nous faciliter la tâche. Est-il à la bonne taille, 50 pixels ? Jetons un coup d'œil. Une autre façon de procéder. Je l'ai mis ici juste parce que c'était bien de vous y faire venir et nous l'avons déplacé ici. Il serait préférable que ce bouton se trouve à l'intérieur de l' endroit où vous pouvez voir ces images , cette carte est séparée. Je veux qu'il soit dans le même plan que image parce que c'est ce à quoi il est apparenté. Je veux qu'ils soient relatifs à cette image, notez ce truc en bas qui ne cesse de se déformer et changer à cause de la largeur accrue. Alors que cette image a saisi le bouton. Si vous traînez avec son image ici, j'aimerais que vous soyez relatif à cela. OK. Et il a échappé à ses parents et ses parents étaient de la famille et c'est ce qui l'a fait travailler. Je n'en ai plus besoin. Revenons à ce que je vais réellement supprimer cela. Donc le parent de ce gars est maintenant cette miniature de morue. OK. Faisons donc de ses parents un parent. C'est très bien Ce bouton plus. Et allez sur le bouton plus et dites Vous êtes des zéros, zéro. Faisons en sorte de le faire. Nous utilisons le côté, nous utilisons le bas. Est-ce que ce sera mieux ? Essayons-le. Passons à ces différents styles. Chariot. Allez. Essayons encore une fois avec le truc. Il va bien mieux. OK. Il reste en haut à droite. C'était donc une sorte de travail en cours et je suis reconnaissante qu' il ait fonctionné. Et cela semblait assez concis pour comprendre ce que nous leur avons fait. À l'origine, il était dedans, donc il essayait d'être relatif à ça et c'est très bien. Si vous les vouliez en haut à droite. Ce n'est pas ce que nous voulions. Nous voulons qu'ils traînent avec son image. Il est donc préférable de faire partie de ce genre de groupe, d'être un frère ou une sœur de la personne que vous voulez qu'il suive. OK, donc je veux qu'ils finissent avec cette image. Le problème, c'est que nous avions un parent. Il a besoin de voir quelque chose. Son parent a besoin d'être parent et c'était bien quand il était à l'intérieur parce que nous avons fait de cet emballage un matériau relatif. Mais maintenant, il faut que celui-ci soit relatif, ce que nous avons fait. Est-ce que tu as explosé Brian ? Ça aurait pu. C'est soit très utile, soit très difficile, soit je suppose pour vous montrer que les choses sont un peu délicates et que c'est comme résoudre des problèmes. J'adore la résolution de problèmes. J'ai aimé pareil, ce qui est une bonne idée. Et vous pourriez passer une demi-heure à essayer de le réparer et vous trouverez un nouveau concepteur Web. Je trouve cela passionnant. Mais nous sommes allés dans les mauvaises herbes et U2 va aller dans les mauvaises herbes pour essayer de réparer quelque chose. Ou je respire profondément. Je vais faire une pause pendant une seconde. Très bien, je me suis arrêté. Si vous avez trouvé cela vraiment délicat, ne mettez pas de choses au-dessus des images, du moins pas encore dans votre carrière de concepteur de sites Web. Il suffit de ne pas les concevoir dans Figma, Photoshop ou Illustrator pour que les choses se chevauchent comme ça. Il suffit de les séparer car ils peuvent être délicats. Et la prochaine chose que nous allons faire est de faire preuve de réactivité. Nous l'avons ignoré jusqu'à présent. Voyons donc à quoi ressemble une tablette. Écrase tes doigts. Il n'y a pas trop de travail. Hé, ce n'est pas si mal. Commençons par le haut. OK, jetons un coup d'œil à tout ça. Tu dois travailler sur le suivant. Vous avez en quelque sorte sauté sur un mobile , puis vous avez réparé une tablette parce que peut-être qu'ils descendent en cascade comme celui-ci, et qu'ils descendent en cascade comme celui-ci, celui-ci répare tout ce qui se trouve en dessous. Et si je change celui-ci, cela affectera ceux-ci. Vous devez donc travailler sur le point d'arrêt suivant. Pour moi N'importe quel rembourrage. Alors, où vais-je probablement ajouter le rembourrage aux parents ? Je vais cliquer à l'intérieur, utiliser ma flèche vers le haut plusieurs fois. C'est mon parent parce que c'est de plus en plus compliqué ici. C'est comme si cela devenait un peu difficile à regarder. Donc, div, nav, oui, n'ont pas explosé. Faisons un peu d'espacement entre le rembourrage ou la marge. Dans ce cas, cela n'a pas d'importance car les couleurs proviennent de son parent de la largeur du conteneur. Mais si ce n'était pas le cas, cela venait de lui, il faudrait utiliser du rembourrage. Je vais utiliser ma touche d'option, touche Alt sur un PC, la faire glisser. Parfait, celui-ci ici. Je peux m'en sortir comme ça ? Probablement pas. Ce que j'ai peut-être à faire sur ce point, c'est d'aller voir ma grille et de dire que je vais vraiment resserrer les choses. Cette grille ici va probablement avoir besoin d'une certaine marge. De ce côté. Il n'en a pas vraiment besoin ici parce que pour les allégements fiscaux, vous devriez peut-être le mettre des deux côtés juste qu'au cas où vous auriez une différence me frappe sur le bureau. Il y a, n'oubliez pas, passez à cela si vous voulez les changer. n'y a donc pas de rembourrage ici, d'accord, mais ici, vous pouvez voir la marge monter. n'y en a pas ici. OK. C'était bizarre. Vous pouviez voir 22 Ils l'ont fait. Tu le vois ? Sauter à travers les points de vélo comporte quelques bizarreries de ce genre, mais j'ai un peu cliqué, cliqué de nouveau sur la grille et c' est parti. Mais c'est ici. Il y a une marge. Et je suis plutôt content de tout ça. Ça devient un peu serré là-bas. Je ne suis pas encore prêt à réduire la taille de la police parce que j'aime bien les freins à dessiner sur cette troisième ligne ci-dessous. Ces gars-là. Oui. Nous pouvons probablement jouer avec et en obtenir trois. Et je vais juste descendre à deux par deux et diminuer ce H2 probablement que la grille sera maintenant en haut ici et une mise en page, elle va être. Et tu peux voir que ce n'est plus bleu. C'est parce qu'il s'agit de l' obtenir depuis le bureau pour y jeter un coup d'œil rapide. Il s'agit, ouah, d'une grille pour choisir le style d'où il provient, mais il provient de la version de bureau. Gâteau voit de petites icônes assez importantes. C'est de là que ça vient. Donc, en fait, je vais juste faire deux par deux. Maintenant. ce que nous allons faire. Qu'est-ce que je veux ? J'en veux un peu ou diminuez le rembourrage et mettez-en un peu plus à l'extérieur. Je vais donc dire le style de grille que j'ai appelé grille pour mes vignettes de grille. Et je vais dire qu'il faut une certaine marge de chaque côté, maintenez la touche Alt ou Option. J'en ai marre de ces raccourcis. Et ça fait 33. Je pourrais m'occuper du conteneur. Où est-ce que c'est, je pense , les vignettes de la section. Pour cela, je dis que c'est assez bon pour les égaler. Suis-je content de ça maintenant ? Je le suis. Je dois changer les images. Je sais, et j'en suis assez content. Faut-il le repousser ? Ignore-le. Il y en a un ici. Celle-là. Je déteste très bien les paysages. Qui consulte un site Web ? Paysage très bien. Vous pouvez le faire, mais nous devons au moins y remédier, car ce que je vais probablement faire, c'est faire fonctionner cette grille. Débarrasse-toi de mon 0,5 et fais-le un par un. OK, donc j'ai ceci et cette option de grille ici. Ce que je veux faire, c'est regarder celui-ci ici. Donc, frapper le héros était parfaitement aligné sur le, sur tous les autres. Mais celui-ci, ici, je vais en fait faire de la typographie. A l'envoie à celui-ci, donc tout va bien se passer, non ? Aligné à droite Et ensuite celui-ci sera centré. Ce type, qu'est-ce qui le pousse à droite ? Tu t'en souviens ? OK. Il faisait l'essai du flux, l' obligeait à ne pas le faire du tout. C'est le parent du parent. Le parent dit que ce n'est pas ce que je veux. C'est amusant quand vous avez une grille, c'est le parent et à l'intérieur de la grille, vous avez Flexbox. Bon sang, je les ai trop embrouillés. OK. Donc, j'ai dit que tout le monde à l'intérieur d' eux va vers la droite, mais qu'en fait, tout le monde à l'intérieur doit être vu maintenant. Joli. Et nous avons une hauteur minimale quelque part. Je ne me rappelle pas où on l'a trouvé. Ce qui vous donne tout le rembourrage à l'intérieur, c'est le diblock. Regarde. Regardons la taille de l'espacement. Il y a une hauteur minimale lorsque vous cliquez sur une commande ou un contrôle depuis le diblock , c'est ainsi que j'ai appelé cette chose terriblement nommée. Et comment l'appelle-t-on ? Plongez ici ? J' ai déjà une division, Hera. J'espère que non. Nous allons vous dire de passer outre à cela. J'utilise cette option, maintenez la touche Option ou Alt sur un PC et faites simplement glisser la souris vers la gauche et la droite. Surtout quand tu n'es pas sûre, comme moi, tu ne sais pas quoi taper. Celui-ci sera beaucoup plus petit sur cette option. Est-ce que ça a l'air bien rond ? Vous pouvez tourner le verrou lui-même. Vous pouvez dire que l'image 2 est le style que j' ai appliqué à ce truc ici. Donnez-lui un nom, héros de l'image. Et je dirais que vous obtenez peut-être le rayon d'angle de zéro. Je pense que c'est plus beau. Mais si tu voulais le laisser de côté, tu pourrais bien arrondir. À cause de l'héroïne et ça va être carré. Mais je vais en fait revenir à la ronde. Il a besoin d'une hauteur minimale. Je vais encore plus petit. Option glissez. Ce truc a un trou dans la grille. Je vais juste un peu fermer juste pour ce point d'arrêt et c'est fait. Mais ce que je veux vraiment faire, c'est pour div Hero, ajouter un peu de rembourrage en bas. Alors, où dois-je procéder à des modifications ? Je peux modifier les vignettes de cette section. Je pourrais y ajouter un peu de rembourrage supérieur, désolé, une marge supérieure. Ou je pourrais découvrir le héros de l'image. D'accord, parce que c' est assez unique. Il n'est utilisé que sur cette image. Je pourrais le faire à celui-ci ou à l'autre. Tout à fait bien. serait intéressant de voir ce que vous avez fait ou non. C'est marrant comme s' il n'y en avait aucun à faire. OK. Payez mon téléphone. OK. Je suis content du deux par deux. Passons au mobile. Et je veux changer cela en haut de la page. C'est une question importante. Il y a un truc appelé div nav. Il a un flex appliqué et il est horizontal. Nous allons passer à la verticale. Et on y va. C'est assez intéressant, comme voir ce flip. Cela aurait probablement été utile si nous utilisions Flexbox pour cela et que nous les retournions, peut-être que l'image serait meilleure en haut. Mais le réseau ne l'a pas. Je ne pense pas. Donc. Je vais aller à la verticale. Et je ne veux pas l'utiliser en le poussant vers les bords. Je veux que ce soit juste au milieu de l'air, mais je peux appliquer écart entre les lignes et les colonnes, dans ce cas, il s'agit de rangées. Je vais maintenir la touche Option sur un Mac, la touche 0 sur un PC. Développez-le un peu. D'accord, je serais suffisant. accord, tout le reste ici est correct étant donné cette taille, elle est probablement trop grande, grande, probablement trop grande. Donc mon héros sur téléphone portable, c'est la tomographie. Je vais maintenir ma touche d' option enfoncée et la faire glisser vers le bas. J'aime ça comme ça. Du point de vue de la hauteur, je vais le descendre. Texte du bouton. Cela peut être énorme. Tout le reste. Revenons à l' image parce que c'est bizarre en général, mais ça a l'air encore plus bizarre sur les téléphones portables. Je vais donc dire image de héros. Cette grille va-t-elle se fermer ? C'est une bonne question. Passons donc à notre écran aucun. Et ça l'a fait. Joli. D'accord, ça, mais ça ne va pas ici. Je vais donc récupérer ma grille parentale. Et je vais dire que vous avez défini la grille. Je sais que c'est la grille parce qu' elle contient cette petite icône. Voyez-vous que c'est la grille et que je veux que l'espacement soit Where is it ? Quel genre de spectacle ? Nous sommes sur un réseau, un réseau. C'est pourquoi je vais dire que ce sera un par un. Et ce que je pourrais faire, c'est jouer avec la largeur. C'est complètement celles que nous allons essayer de combler. C'est Dieu. Quelque chose le pousse donc depuis des siècles. Jetons un petit coup d'œil. Sortons de cette grille des vignettes, est-ce que vous le faites ? Et la taille, l'espacement. Maintenez la touche Commande enfoncée. Oui, c'est une grille, les vignettes y donnent toujours. Mais ça vient de la petite icône trapue. Regarde ça. Il est celui de la tablette. Il vient de là. Je vais donc le remplacer et le mettre simple coup d'œil à zéro. Des deux côtés. De quoi ai-je l'air ? Command Shift P, Control Shift P sur un PC. Est-ce que j'aime ça ? J'ai l'impression qu'il a besoin d'un peu de rembourrage à l'extérieur. Command Shift P pour le désactiver, ou Control Shift P. Et je pense que je vais probablement revenir à ma grille, à l'espacement des vignettes. Je vais probablement en mettre un peu des deux côtés en maintenant la touche Alt ou Option enfoncée. Peut-être opter pour le réseau lui-même. Et si j'en choisissais 16 ? Je vais prendre la grille elle-même et la ramener à 16. Cela correspond à Command Shift P. Jetez un coup d'œil à quelques téléphones, comme des téléphones de différentes tailles. Oui. autre chose que tu pourrais changer ? Nous en avons besoin parce que Button le prend. Le bouton prend du sens, non ? Alors, comment les appelle-t-on ? Celui-ci est posé une question et celui-ci s' appelle profondeur appelé Poser une question. Donc, ce que je pourrais faire, c'est retourner au bureau parce que je veux changer cela complètement. Je vais sortir du mode aperçu parce que c'est bloqué dedans. Et celui-ci est froid. Ils m'ont juste ensuite posé une question. Posez une question. Et celui-ci, ici, c'est aussi poser une question. Mais sur le portable 1234, ça avait du sens ici. Mais quand c'est sur la version mobile, cela n'a aucun sens. Il suffit de l'éteindre là. Passons donc à la position, à l'opposition et à l'affichage. Alors que l'affichage, la disposition, l'affichage sont désactivés C'est une version bêta. Ce bouton, ce bouton est peut-être un peu énorme. C'est coché ici. Ces boutons, je veux probablement les transformer en carte à boutons. tout ce que je voulais je veux quand même passer en revue toutes ces choses. Je vais donc dire alignement. Je veux que tu sois au centre. Est-ce que je veux qu'ils soient centrés ? Il va falloir que j'y réfléchisse un peu, mais je pense que nous avons travaillé dur. Je vais probablement faire une pause, revenir, regarder ça. Du poulet sur mon téléphone portable. Alors j'irais le publier. Ensuite, allez vérifier l'URL sur mon téléphone ou ma tablette pour l' avoir vraiment bien vu. Mais je pense que nous sommes là pour cette vidéo de toute façon. Elle est seule de toute façon. Comment l'avez-vous trouvé ? Combien de temps ? C'est ça ? Combien de temps cela m'a pris. J'ai dû m'arrêter là, au milieu, que j'ai découpé lors du montage. Mais c'est relativement le temps que cela m'a pris. Combien de temps vous a-t-il fallu aujourd'hui pour vous emmener à Alice ? Cela vous a-t-il pris 10 minutes ? Probablement pas. Mais faites-le moi savoir, ce serait intéressant de le savoir. Et il serait également intéressant de savoir ce que vous avez fait différemment. OK. Dites-moi le long chemin qui vous a permis de trouver quelque chose à faire et de découvrir qu'il existe une meilleure solution. Ou vous m'avez peut-être vu faire un long moment alors que vous vous demandez pourquoi vous venez de faire ça ? C'est probablement vrai. Et tu es probablement plus douée pour le faire à ta façon. Et il n'y a pas de bons rôles ni de méthodes plus rapides pour tout faire. Vous pouvez obtenir de nombreuses solutions en utilisant différentes méthodes. Alors faites-le moi savoir, ainsi qu'à d'autres personnes , à travers les commentaires vous-même, juste pour voir que vous vous êtes dit  : « Oh oui, alors faites-le de cette façon ». Je l'ai fait de cette façon. Mais regardez Jane ou Dave l'ont fait autrement et c'est plus logique que nous deux. Jetez un œil dans les commentaires. Déposez vos commentaires. Ma méthode n'est pas la meilleure. Je le suis. Raisonnablement, je suis un concepteur Web assez confiant, mais je suis aussi très enthousiaste à l'idée de faire montage vidéo, de la conception graphique, etc. Il y aura donc des gens qui espèrent que tu seras bien meilleur que moi très rapidement. La vague va changer. Il y aura de meilleures façons de faire les choses. Donc oui, je ne sais pas où je veux en venir. Nous ne faisons que déambuler parce que pour terminer, cette fin, je vous verrai dans la prochaine vidéo. 57. Comment utiliser Px Rem & Em's dans le Webflow: Bonjour à tous. Dans cette vidéo, nous allons voir pourquoi nous ne devrions pas vraiment utiliser de pixels pour les polices et nous devrions utiliser des anneaux, regarder les extrémités également, mais les anneaux comme ceux que nous voulons. Pourquoi allons-nous les utiliser ? Comment les faire fonctionner ? C'est le sujet de cette vidéo. Pour commencer à comprendre cela, ajoutons deux paragraphes. Nous allons donc ajouter un paragraphe juste là. Et nous allons en fabriquer deux pour les réparer. Je vais ajouter deux styles différents qui seront mon expérience de texte, l'un, la copie. Et je vais en prendre un autre ici. Et le froid prend deux pour un Spearman, je vais les plier en une seconde. Nous avons donc installé maintenant des polices d'une taille de topographie de 16 pixels. Il suffit de taper 16 pour l'y forcer. OK, ici, ici, nous allons dire que nous allons utiliser des rems. Les chambres sont meilleures que ce que l'on veut dire, vous savez, nous allons les couvrir les deux mais utiliser de la RAM. Ok, Wow, c'est énorme. Alors saisissons dans une pièce. Pourquoi les jantes sont-elles si grandes ? La jante est l'une des dimensions par défaut. La taille par défaut pour la plupart des navigateurs est donc de 16. Donc, si vous tapez 16 jantes, soit 16 fois 16, vous obtenez une police géante. Mais si vous n'avez besoin que d'un journal de 16, vous n'avez besoin que d'une jante. Comment feriez-vous si vous aviez besoin de deux chambres, quelle serait leur taille ? Tu peux faire le calcul ? J'en ai fait 32. 32. Hey, donc vous vous retrouvez avec ce genre de mise à l'échelle si vous voulez 1,5 pièce, quelle est cette taille ? 20 à ? L'éditeur aurait dû le supprimer pour paraître très rapide, mais cela m' a pris un peu de temps. Vous faites donc ce calcul. Pourquoi nous sommes embêtés ? C'est parce que certaines personnes ont besoin de mettre à jour leur navigateur pour que besoin de mettre à jour leur navigateur toutes les polices soient plus grandes. OK, laisse-moi te montrer un exemple. Je vais charger, je vais publier ceci. Et je vais les charger dans un navigateur, vous les avez mangés. D'accord, donc je l' ai sur Internet. Je vais également le vérifier dans Chrome et je vais accéder à mes préférences et sauter avec une taille de police. D'accord, dans Chrome, ils changent tout le temps, mais je suis en apparence et vous pouvez voir la taille de la police. La valeur par défaut est moyenne. Et ce que je vais faire, c'est le faire glisser avec la touche Alt pour que je puisse voir les deux. Tu les écris. OK ? Je peux donc les voir tous les deux. Si maintenant vous, quelqu'un a des problèmes d'accessibilité, il a une déficience visuelle. Ils sont peut-être vieux maintenant, ils portent leurs lunettes. Ou tout simplement comme Giant prend polices comme le téléphone de mon père et les saisit à chaque fois. Il aime la taille supermassive. OK. Donc, lui ou n'importe qui pourrait le changer en grand. OK. Tu peux voir ce qui se passe ici, sur la gauche ? Tu peux voir que celui-ci est assis un Rin augmenté. Celui-ci ne l'a pas fait, ça non plus. Parce que nous les plaçons à des pixels. pixels ne veulent pas changer. Ils vont, ils vont rester 16 ans pour toujours. Alors que la personne qui a besoin de plus d'accessibilité, d' accord, c'est le mot que nous utilisons, k parce que c'est comme ça que Google l'appelle. Il recherche votre site Web pour le voir. Ce site est-il bon, utile pour toutes sortes de personnes, les personnes qui ont besoin de polices de grande taille. Et ce n'est pas grave pour nous de placer des objets sur des jantes au lieu de les placer sur des pixels. Ce n'est pas particulièrement difficile, mais cela signifie que les personnes qui ont besoin peuvent augmenter la taille de police. Maintenant, que vous utilisiez des rems ou des pixels, si vous le faites, la plupart des gens dans le monde ne l'utilisent pas assis là, allez-y, j' aimerais peut-être zoomer. Je sais comment le faire sur mon Mac. C'est Command Plus pour zoomer. OK. C'est probablement Control Plus sur PC, zoom arrière. Peu importe que ce soit des pixels de pièces, cette barre blanche. Google aimerait voir les jantes utilisées. Ce n'est pas énorme. Si vous ne le faites pas, vous pouvez vous en tenir aux pixels pour le moment. Si vous êtes nouveau et que vous aimez trop la peau, vous finirez par passer à une jante parce que ce n'est qu'une petite chose. Ils ont eu une petite marque sur votre site Web. Mais lorsque vous recherchez une domination similaire sur les moteurs de recherche, vous voulez toutes ces petites marques, une coche à côté du nom de votre site Web, pour qu'il soit mieux classé. Vous pouvez simuler cela dans un flux de travail. Je vais te montrer ici. Quand je suis passé à celui-ci, il avait des ticks pour l'aperçu du zoom. C'est 16 par défaut, mais si je le déplace vers 32, pouvez-vous les voir tous monter ? Chrome l'appelle simplement moyen. La valeur moyenne par défaut pour la plupart des choses est 16. OK, donc ici, ils disent simplement, si je le réinitialise, la valeur par défaut est 16, mais si je le fais petit ou grand, il l'affichera ici si vous voulez voir comment il se décompose et change, cochez-le parce que parfois vous avez un titre qui doit être sur deux lignes comme celle-ci. Et il est grand et accessible parce qu'il est énorme, très épais, très bon contraste. Et vous pouvez décider de le laisser sous forme de pixels, car s'il s' agrandit et se contracte suffit de casser la diapositive et c'est pire que d'avoir une police. Peut-être que c'est le cas. Aussi énorme que cela puisse être. OK, alors vérifiez-le. OK, alors comment les examiner et les mettre à jour ? Nous n'avons pas à le faire, mais faisons une astuce facile à faire. Disons que j'ai besoin que ce soit le cas. Et dites celle-ci ici. Je sais que c'est 50. Comment fabriquer les bonnes jantes ? Il suffit de diviser par 16, ce qui est la valeur par défaut, et de taper REM ensuite, et j'espère que cela fera le calcul. Tu y vas. Tu vois, ça n'a pas changé. On a calculé que 15 oh, désolé, 50/16 et les jantes sont 3,125. OK. Vous pourriez juste décider que c'est trois parce que c'est un peu, je n'aime pas les décimales pour les polices. OK. OK, alors divisez-le par 16 et quelle taille de police vous voulez qu'il soit. Nous vous donnerons la taille de la jante. Mais sachez simplement que si quelqu'un change la valeur par défaut, cela perturbera votre mise en page. Ça va. L'autre chose que vous pourriez faire est de faire la même chose avec votre taille, la hauteur de votre ligne. Si je le garde sous forme de pixels, jetons un coup d'œil. Quand je grandis, je m' en tiens aux pixels parce que les pixels ne changent pas. Mais les jantes ont l'air. Voyez-vous qu'il doit augmenter proportionnellement à la taille de la police ? Je vais donc en revenir à trois. Et ici, vous pouvez également utiliser les chambres. Alors je vais faire, c'est quoi 52 ? Pourquoi ne puis-je pas y cliquer ? Parce que ça vient de toutes les rubriques. Je devrais aller changer de cap d'huile. Je ne devrais pas faire ça juste ici. Je devrais donc passer à toutes les rubriques et je devrais le faire ici. Méchant Dan. OK, donc je vais dire que je vais faire un U divisé par 16 RAM, taper sur Nico. Et celui-ci est barré parce que c'est celui qui est sélectionné qui le remplace. Je vais donc commander et cliquer dessus pour m'en débarrasser. Je vais revenir à la mienne. Et vous allez maintenant être 50/16 REM. Pour ajouter un peu de complication supplémentaire. Mais nous rendons notre site plus accessible aux deux utilisateurs. Et parce que le moteur de recherche Google le souhaite, nous voulons être bien classés. Mon conseil est de ne l' utiliser que pour les polices. Ne l'utilisez pas pour l'espacement. Tu peux. Le problème, c'est que si vous décidez d'utiliser mes marges, comme certaines personnes le font, je vois beaucoup de personnes utiliser leur espacement. Où, si j'arrivais, laisse-moi trouver un chemin quelque part. Faisons la hauteur minimale, d'accord, ils peuvent avoir une taille minimale sur cette taille. Trouvez-le la largeur du conteneur, div nab. Voilà, la hauteur minimale. Vous pouvez utiliser des bagues ici. Le problème, c'est que cela monte et descend lorsque les utilisateurs modifient leurs paramètres dans le navigateur, et ce n'est pas ce que nous voulons. Vous pouvez le faire totalement, et cela rend votre site plus flexible, mais les majors finissent par réduire les charges. Et ce n'est pas l'un des éléments sur lesquels Google compte en matière d'accessibilité. Maintenant, c'est mon avis. Google ne dit jamais exactement à personne ce qu'il fait. Mais oui, les jantes, vraiment bonnes pour les polices et les choses liées aux polices. Ensuite, nous allons discuter des objectifs. Toi, Maxine t'envahit. C'est lui, Rim. Je dis « ems » et « rems ». OK. Nous avons donc créé des rampes facilement. Il suffit de les utiliser. N'utilisez pas les Ames. C'est la réponse courte. La réponse longue est : « Vous vous demanderiez, pourquoi ? Je vais te dire pourquoi. Dans un genre assez compliqué, ils sont juste délicats. Je les utilise tout le temps et je m'occupe de la délicatesse jusqu'à ce que j'apprenne à connaître les jantes. Donc j'ai ce bloc de div, je vais le déplacer là-haut. Je vais mettre quelques balises de paragraphe de texte pour y arriver. Je vais être super chic et y aller, d'accord, je vais avoir mon cours de luxe et je vais utiliser Ames. Et je sais que 16 n'est pas ce que je veux parce que c'est 16 fois la valeur par défaut. Les gars veulent l'un d'entre eux, l'un des paramètres par défaut, qui est 16. Cela fonctionne donc exactement comme les jantes dans ce cas. Le problème, c' est qu'il se tourne vers son parent pour vérifier que la valeur par défaut est correcte, alors qu'un root vise, d' accord, c'est pour ça que c'est de la RAM. La racine m la recherche ne se soucie pas de ce que le parent lui dit de faire. Il dit simplement que je vais chercher le navigateur. Et le navigateur dit que j'ai 16 ans, je fais partie de ceux-là. Alors que l'AME le dit, je vais me tourner vers tous ceux qui sont au-dessus de moi, n'importe quel parent. Je vais m'en servir. Donc, si vous avez choisi ce bloc, je vais créer une classe pour celui-ci. Ce sera ma division préférée, ici. Je vais créer la topographie, tout ce qu'elle contient. Nous l'avons déjà fait, non ? Nous avons dit que tout soit public sur un body tag. Nous avons dit que tout devait être blanc, pour ne pas avoir à nous répéter. Donc dans ce cas, disons que quelqu'un a décidé, je vais en faire trois EM. Pourquoi cela a-t-il changé ? C'est réglé sur un. Je peux le voir. Il y a une image qui devrait être 16. Non, non. Elle se tourne vers son parent qui dit : « Je suis trois M, sois l'un d'entre eux ». Ensuite, tu y vas, il fait ce qu'il a dit. C'est pourquoi nous utilisons la racine. La racine remonte au début et regarde simplement le navigateur et dit : Quelle est votre valeur par défaut ? ce que je vais faire. Ou est-ce que ce type s'en va, qu'est-ce que le parent ? Je serai un multiple de ça. Donc, si je disais que je voulais avoir trois objectifs pour ce texte de paragraphe, que va-t-il se passer ? Ce sera trois buts pour les parents et trois équipes à l'intérieur, d' accord, donc c'est pour ça que nous n'utilisons pas de noms. Vous pouvez alors, de temps en temps, ce ne sera que 16. Parfois, vous vous retrouverez avec des multiples, ce que nous ne voulons pas. Je vais donc annuler jusqu'à ce que ça disparaisse. autre chose que je souhaite aborder ? Non, c'est ça. raison pour laquelle ils l'ont appelé objectifs provient d'une topographie plus ancienne et d'une époque pré-numérique. Et en gros, ils ont maintenu que si vous aviez un seul objectif, ce serait la taille du M. C'est ainsi qu'ils prendraient la taille des polices. différentes lettres sont différentes. Ils n'utiliseraient pas la taille de l'œil parce que c'est trop étroit avec un M majuscule, surtout ce serait un très bon type, c'est comme une boîte, n'est-ce pas ? Ils l'utilisent donc. Ils regardent toutes les polices et disent : « D'accord, majuscules finissent ensemble ». Et c'est ce que nous allons utiliser, c'est comme la base de référence pour cette police et nous allons appeler l'EMS parce que c'est juste mais c'est devenu le m. Bref. C'est ce que je comprends. Oui, c'est ça. Utilisez des bagues. N'utilisez pas de n. polices, n'utilisez pas de pixels, utilisez des rems pour l'espacement, utilisez des pixels, c'est clair comme de la boue. Très bien, je te verrai dans la prochaine vidéo. 58. Comment utiliser la hauteur de la visualisation VH dans Webflow: Bonjour tout le monde. Dans cette vidéo, nous allons regarder la hauteur, et nous allons regarder ce chiffre ici, hauteur de la fenêtre d'affichage VH, d'accord, celle-ci est réglée sur 80. Cela signifie que dans cette publication, cette grande boîte grise ne représentera que 80 % de la fenêtre d'affichage. La façon dont on peut le voir. Vous voyez que cela change en fonction de la taille de la fenêtre d'affichage. Et dans ce cas, 80 %. C'est un peu comme des pourcentages, mais c'est basé sur la hauteur du port de vue. Alors allons-y et découvrons ça. Très bien, fenêtre d'affichage. Nous allons faire la hauteur de la fenêtre d'affichage, mais qu'est-ce que la hauteur de la fenêtre d'affichage ? Je prévisualise ceci dans un navigateur. C'est mon point de vue depuis ce coin supérieur pointu, jusqu'ici. Toutes ces mesures. Votre ordinateur est peut-être plus petit, vous êtes peut-être sur celui-ci. largeur de votre fenêtre d'affichage sera donc La largeur de votre fenêtre d'affichage sera donc environ la moitié de la mienne. C'est donc quelque chose à prendre en compte. Cela dépend de la personne qui la consulte et de l'appareil sur lequel elle la consulte. Pareil avec ça. Si je fais la hauteur de la fenêtre et que je regarde un ordinateur comme celui-ci, je ne sais pas. À partir des années 90, tout petit, il va l'utiliser de là à là comme mesures. Si je dis la hauteur de la fenêtre d'affichage B 100, elle sera si grande. Sur ma machine. Il est si grand que ça. Vous pourriez demander à l'un d'entre eux de rejoindre Norma une fois que la largeur de votre fenêtre d'affichage sera incroyablement longue. C'est donc un peu délicat. C'est, certainement, beaucoup plus compatible avec la hauteur. Allons-y Donc, pour le moment, quelque chose garde cela ouvert. Pourquoi est-ce que c' est Div Hero, est-ce qu'il a une hauteur minimale ? Je vais m'en débarrasser. Cliquez sur l'option Alt. Ce que je vais faire, c'est que je ne vais pas utiliser hauteur minimale parce que c' est un peu variable de toute façon, donc je n'ai pas besoin d'utiliser min-max. Donc, je vais juste dire que la hauteur est, disons, de 100 vh. Eh bien, vous pouvez, à partir de ce menu déroulant, 100 vh correspond à 100% de ma fenêtre d'affichage. Je veux que ce héros div atteigne 100% de la hauteur de ma fenêtre d'affichage, ce qui est bien. Jetons un coup d'œil. Prévisualisons-le. Donc, Command Shift P. Maintenant, vous voyez, c'est tout sauf ce qu'il suffit de regarder en bas. Fermons ça. Jetez un œil vers le bas. Il y en a d'autres. Je pensais avoir dit 100 %. Il le fait, ce n'est pas un, il n'essaie pas de remplir l'ascenseur spatial. Ce qu'il fait, c'est qu'il ressemble à votre taille complète. Et puis dites : « Est-ce que cette boîte fait 100, est-ce que c'est cette taille ? C'est donc du haut d'ici vers le haut du bas. Il prend cette mesure et l'applique avec cette boîte grise plus claire qui commence. C'est pourquoi ça continue pendant un petit moment. Est-ce que cela a du sens ? saisit en quelque sorte cette mesure et l'applique ensuite. Très bien, jetons un coup d'œil, faisons juste une hauteur de fenêtre d'affichage, disons 50. Il regarde le complet du haut vers le bas, le divise par deux, puis les pierres précieuses qui mesurent ici. Vous pouvez donc décider si cela fonctionnera pour vous. C'est vraiment sympa sur certains sites où il y a différentes sections. Vous avez dit navigation et elle descend vers eux. Vous pouvez utiliser toute la hauteur du navigateur. Eh bien, la hauteur de la fenêtre d'affichage. Souvent, ce que j'aime faire c' est l'avoir pour qu'il soit encore visible. Je clique ici en maintenant la touche Shift enfoncée. Donc, si je passe à 80 %, ce truc atteint toujours un sommet un peu au-dessus de la ligne de flottaison. C'est juste un coup d'œil quand quelqu'un accède à mon site et qu'il n'utilise pas la navigation, qu'il ne pense pas qu'il n'y a rien d'autre sur cette diapositive, c'est juste un gros vieux gars et un costume de chenille. Oui, ils peuvent voir ce genre de choses se ramasser et c'est une façon de les forcer à le faire. Alors qu'avant, quand nous faisions de la hauteur minimale, espérant, nous espérions que les gens puissent voir. C'est pourquoi je l' ai gardé assez petit. Alors débarrassons-nous de cela. Allons-y un peu si je ne me souviens pas. Donc ça décroche. Mais que se passe-t-il chez quelqu'un d'autre ? Je vais prévisualiser la commande Shift P. Control Shift P. Si quelqu'un a un moniteur de cette taille, il ne fonctionnera pas. Ils vont partir, c'est juste le gars dans le costume de chenille. Alors que si nous le faisions avec la hauteur de la fenêtre d'affichage, revenons en arrière. Tu fais les choses correctement. Faisons-le à nouveau. Je vous garantis que vous faites 80 % de la hauteur de la fenêtre d'affichage. Peu importe l'appareil sur lequel ils regardent. Ce sera toujours 80 %. Tu peux voir ? Il n'était pas possible non plus. Eh bien, Visuellement, ça devient trop petit. Il calcule la hauteur de la fenêtre et en fait 80 % de celle-ci. C'est donc plutôt cool, idéal pour la taille. Maintenant, pour que cela fonctionne vraiment bien, si vous venez de sauter dans cette vidéo, j'ai défini ce div hero comme une mise en page de flexbox parce que cela m'a permis de le faire. Si je l' éteins réellement, cela m'a permis de partir. Vous êtes Flexbox, vous êtes à la verticale et je veux que vous vous alignez au milieu. OK ? Plongez si rapidement autour de lui. Fais-le si tu veux être au milieu de leur fenêtre d'affichage, cet enfant ici, tu peux y aller. Oh, mec, j'ai complètement tout cassé. Vous êtes dans la mise en page de cette façon. Revenez en arrière. C'est la hauteur de la fenêtre d'affichage. La seule chose à prendre en compte est que lorsque vous le prévisualisez, c' est un peu délicat ici, car lorsque vous prévisualisez dans ces options, particulier sur un téléphone portable, vous pouvez voir que c'est faire un pourcentage de la fenêtre d'affichage et faire comme si c'était bizarre. Mais personne ne téléphone aussi longtemps, ou du moins pas pour le moment. Il est donc difficile de le faire ici dans Webflow. De quelle taille cela va-t-il paraître ? Tu vois qu'il utilise le téléphone Viewport Now, mon téléphone a probablement à peu près ce genre de ratio, n'est-ce pas ? Hauteur par rapport au poids, hauteur à la taille, hauteur par rapport à la largeur. OK, le moyen de contourner cela et de le prévisualiser est de publier votre site, le publier, puis de l' ouvrir dans un autre navigateur. Will, en fait, faisons-le de cette façon. D'accord, donc c'est ma fenêtre d'affichage. Je peux simplement faire glisser ma surveillance, ce que je suis, désolé, mon navigateur et ça ne m'arrivera pas. Je peux en quelque sorte faire semblant. Mais je veux voir ce mobile il ne me le montre pas. Donc, ce que vous pouvez faire dans Chrome au moins, et je suis presque sûr qu'ils le comprendront tous . Si vous utilisez autre chose que Google Chrome, vous pouvez cliquer dessus avec le bouton droit de la souris et dire « inspectons ce site Web ». C'est plutôt cool. Et vous, ce que vous recherchez, c'est ce bouton ici. Je pense que le vôtre se trouve du côté droit ou du côté gauche, mais vous recherchez cette icône. Cliquez dessus. Et vous pouvez dire que j' aimerais me montrer ça sur un iPhone Pixel Five, d'accord ? Ce qui est bien, c'est de regarder ça. En fait, c'est couper du bas vers le haut. Voilà à quoi va ressembler mon téléphone. Si j'en avais un nouveau, j'aurais un vieux pixel. Mais à quoi cela va-t-il ressembler sur iPhone SE ? Il aura un aspect différent, un téléphone plus grand, un ratio différent. Mais au moins, le membre de la fenêtre d'affichage correspond à ce à quoi il va ressembler sur ce téléphone. Alors qu'ici, il est très long et extensible. Chicken et Webflow peuvent faire des choses ici où vous pouvez en quelque sorte le moment, vous pouvez calculer la largeur, mais pas la hauteur. Chick a l'impression d'être quelque chose qui pourrait ajouter , d'accord, à cette largeur de fenêtre d'affichage. Je ne m'en sers jamais. C'est faisable. Vous avez peut-être un bon cas d'utilisation pour cela. Et je vais vous montrer quelque chose au hasard parce que je ne vois pas d'utilité. Et je vais récupérer les vignettes de ma grille. Et je vais dire que vos vignettes de grille auront une largeur de, disons 50 %, 50 % de largeur de fenêtre d'affichage, VW. Ou vous pouvez le déposer ici et il suffit de regarder ma fenêtre d'affichage. Le tout a été divisé par deux et a dit, d'accord, c'est cette mesure et je vais l' appliquer ici. Remarquez que ce n'est pas au milieu. Ce n'est pas comme si vous alliez à 50  % du bord de l'écran ou que vous l' empêchiez de dire : quelle est la largeur ? Très bien, je sais quel est ce numéro. Prenez-le et appliquez-le sur cette boîte et il passe au n. C'est pourquoi c'est un peu plus de 50 %. Tu comprends. D'accord, c'est une VH et un peu de VW. Passons à la vidéo suivante. 59. Comment créer un style de composant de la barre de navigation dans Webflow: Bonjour à tous. Dans cette vidéo, nous allons regarder ce type, la barre de navigation. C'est un composant préfabriqué k. Et nous l'avons examiné plus tôt dans le cours, et nous les avons un peu laissés parce que nous avons construit celui-ci très simple mais qui ne possède qu'un seul bouton. Un seul bouton n'est pas drôle. Nous allons avoir plusieurs boutons. Et comme nous utilisons ce composant préfabriqué, lorsque nous passons à, disons, la vue sur un téléphone portable, c'est un menu de hamburgers et son apparence, il glisse vers l'extérieur. Type de. Cette vidéo va être amusante car elle va faire quelque chose qui intégrera toutes les connaissances que nous avons apprises au cours jusqu'à présent. Prenez ici tous les avantages des éléments prédéfinis, comme cette barre de navigation qui composants prédéfinis, mais vous pouvez également les personnaliser, faire faire faire ce que nous voulons, nos incroyables compétences en matière de flux Web. Tu es prêt, je suis prêt. Allons-y. Donc, tout d'abord, j'ai juste un site vierge pour séparer de ce que nous avons fait. Parce que ce que nous faisions auparavant, c'est que notre navigation était correcte. Nous n'avions qu'un seul bouton. Donc, quand nous sommes passés au mobile, tout allait bien. Nous utilisons simplement ce bouton. OK. Ou assez petit pour être mis sur le côté ici. Mais un site Web à bouton unique n'est pas particulièrement amusant. Créons donc un site Web à boutons multiples. Nous allons donc ajouter à ce site vide le composant Navbar, faites-le glisser dessus. Il y a un truc cool, il y a quelques trucs. Il a cette enveloppe extérieure, un peu comme une section. Il est doté d'un récipient qui le maintient dans la bonne largeur. Il y a un espace pour un logo. Il a un emballage autour d'un tas de boutons différents. Ils les ont appelés liens de navigation ici, d'accord, au lieu de boutons. Et puis il y a un bouton de menu que nous pouvons voir parce qu'il est désactivé et qu'il est uniquement appliqué. Vous êtes leur mobile, il y a Hello. C'est pourquoi nous aimons ces composants car ils ont fait beaucoup de choses en allumant, en éteignant et en faisant fonctionner tout l'alignement. Et plus encore, cliquons sur, si vous cliquez sur la petite icône d' accueil ici pour la barre de navigation. Et soit l'option Paramètres ici soit le rouage de réglage ici. Ces choses, ce n'est pas design Web comme celui-ci, ce n'est pas du code que nous essayons de comprendre. Qu'est-ce que le positionnement absolu ? C'est ce que Webflow a fait pour faciliter des choses comme la navigation. Ce qu'ils ont dit, c'est que lorsque vous passez à mobile, que je le prévisualise et que je clique dessus, il y a une liste déroulante. Et si vous vouliez venir de côté, au lieu de tout reconstruire ? Vous pouvez dire navigation. Viens par la droite. Vous allez prévisualiser, il est livré avec un clic droit n'importe où. Ça s'en va. D'autres trucs amusants. OK. Disons que ce qui regarde l'urine n'a pas vraiment d'importance non plus. Je peux accéder à mes paramètres et dire que je souhaite ajouter un autre bouton. Je peux cliquer sur Ajouter un lien et en ajouter un autre. Je vais peut-être appeler ça ma boutique. Tout simplement parce que c'est ce que nous appellerons ma boutique. OK. Ça facilite les choses. Je sais que cela signifie, vous savez, maintenant je peux simplement récupérer cet élément de lien, copier-coller, c'est exactement la même chose, mais le flux de travail l'a rendu encore plus facile. Maintenant, sans compétences vraiment intéressantes, nous savons qu'il y a une division rapide autour de ces gars qui les maintient tous ensemble. Et une autre chose intéressante qu'ils ont intégrée à cela pour nous est de prévisualiser la commande Shift P. Control Shift P c'est quand je descends. Vous pouvez le voir ici, je vais ajouter mon logo dans une seconde. Ok, quand j'arrive ici, on passe au menu des hamburgers, ce qui est un peu tôt. Ok, il y a assez de place pour tout ça. Je n'ai que quatre boutons. Donc, ce que vous pouvez faire, c'est que vous ne pouvez dire que les paramètres de la barre de navigation . Je veux que l'icône du menu s'active pour les flux turbulents. Maintenant, activons-le pour les téléphones en mode paysage et les versions inférieures, ou simplement pour les téléphones mobiles, selon le nombre de boutons dont vous disposez. Ok, alors maintenant, quand je le prévisualise, je passe à la tablette. Il y reste. Mais quand je passe à Landscape Mobile, il s'active. Cool, merci, flux de travail. Il y a d'autres choses que tu peux jouer avec K, jouer avec l'assouplissement. Ne plaisante pas avec l' assouplissement. Il y en a tous. La valeur par défaut était bonne. Expo, c'était juste en faire une pendant que vous êtes ici. Prêt ? OK. On y va. Quoi d'autre ? Le timing ? Si je voulais prendre 2 secondes, combien de temps devrais-je être aussi grand ? Combien de millisecondes te souviens-tu ? Vous avez bien compris ? 2000. OK. Et ça va prendre beaucoup trop de temps. Donnons-lui un aperçu. OK, ajoutez votre propre effet sonore. Alors voyons comment y entrer , le casser, le réparer. Et disons que nous voulons changer le menu plus grand, quelqu'un. C'est une chose intéressante pour cette configuration particulière ici, ce composant, si je le veux et si je veux du style, il peut se résumer à l'un d'entre eux, donc il apparaît réellement. Ensuite, je peux cliquer dessus. Et elle est traitée comme une police. Bizarrement, les icônes sont traitées comme une police. Je peux dire que tu es d'une couleur différente. OK, la couleur de ma marque, qui est toujours une sorte de vert. Il va faire plus sombre ici. Un contraste : gagner l'or. Revenons aux couvercles de bureau. Allons-y un peu. Tout cela est assez rapide et rapide, un peu rapide et je veux le revoir. Mais je vais aller un peu plus lentement maintenant et essayer de retrouver l' apparence de mon dernier projet. OK, c'était où ? Ici ? Il ressemble ici à quelque chose comme ça avec ce genre de boutons. Je vais en faire une version rapide parce que je veux vous montrer maintenant comment nous pouvons adapter nos compétences. Pour faire en sorte que ça ressemble à ça, mais je ne vais pas perdre trop de temps. Donc d'abord, j'ai ce truc de marque, qui est cool. Je peux ajouter un logo. ai donc un qui date de tout à l'heure. Ça y est. C'est dans vos fichiers d'exercices. Vous pouvez mettre le logo de votre choix. D'accord, nous l'utilisons plus tôt pour nos sponsors, pour notre tout premier site Web de flux Web qui s'y trouve. Maintenant, comment puis-je le faire entrer au centre ? Tu pourrais faire du flex. Vous pouvez commencer à fléchir ou vous pouvez simplement dire que le logo a un certain rembourrage. n'y a rien de mal à cela. n'y a rien que vous puissiez faire pour que les enfants soient centrés. Ou vous pouvez simplement le faire parce que, en particulier, ce système de navigation ne sera jamais plus grand ou plus petit. Je ne le veux pas. Je pense que c'est assez grand. Il ne va pas s'étendre ni se contracter. OK, donnons du style à ces boutons. Donc, ce que je vais faire, c'est ajouter une classe appelée button nav. Et je vais faire quoi ? Commençons par la couleur de fond. Je vais choisir une couleur au hasard, peut-être ce vert foncé. Je ne me rappelle pas ce que c'est. Ils le font. Les tiques vont être la topographie qui va être blanche. Je vais choisir une police pour tous mes boutons. Maintenant, je clique toujours, puis je commence à faire des choses et à identifier mon style. Maintenant, j'ai sélectionné le corps et je sais que c'est ce que j' allais justement commencer à faire. Replacez-le sur le bouton. Et tu vas être une police, Droid Sans, pas la réduire. Et je veux jouer avec l'espacement. Je vais un peu vite maintenant parce que nous utilisons des compétences dont nous savons déjà que je vais le faire plus petit. Maintenez la touche Option sur un Mac, touche Alt sur un PC et faites glisser la souris vers le haut, nous pouvons y arriver. Je comprends pourquoi faire ça ? C'est un point intéressant. Pouvez-vous le voir avec la confirmation du 20 2020, d'accord. Cela fait partie de l'accord avec l'utilisation de certains composants, même s'il n'y a aucun moyen que je puisse cliquer sur ce n'est pas le cas. Normalement, je peux cliquer dessus avec la touche Maj et il vous indiquera d'où viennent leurs styles. C'est cacher ces femmes loin de nous. C'est prédire ce truc en le cassant, en disant que je vous ai créé un composant de navigation ou un composant de barre de navigation. Et il y a plein de choses que je ne vais pas te montrer, donc tu ne peux pas les casser. Là-bas. Des choses géniales que nous aimons. Je veux y entrer. Je veux le changer. Eh bien, il va falloir que je l'annule. Je peux l'annuler, ce qui est cool. Je sais qu'avec cette barre de navigation, il y a des choses qui se passent en arrière-plan avec des flotteurs et toutes sortes de bons éléments de positionnement absolu. Mais vous ne pouvez pas le trouver dans Webflow, la sortie à la fin. Mais il suffit de garder les choses simples et simples pour nous. Et je veux y mettre des angles arrondis. Vous. Vous voulez pousser vers le bas depuis le haut. Encore une fois, je pourrais utiliser Flexbox, mais en fait, je vais juste dire tous les boutons. Ayez un top manager. On y va. C'est une modification pour chacun d'entre eux. Utilisons nos raccourcis spéciaux Commande ou Contrôle Retour, puis tapons NAV, en appuyant sur une partie de mon clavier. Maintenant, je dois passer au bouton suivant. Je pourrais aller ici et cliquer dessus. Mais n'oubliez pas qu'il existe un raccourci. Tu te souviens comment choisis-tu des frères et sœurs aussi haut, bas, gauche ou droite ? L'un d'eux les a frappés à droite et à gauche. Je vous ai donné à nouveau Command Return. Je peux dire que la navigation a été coupée de deux, passez à la suivante. Ça fait du bien lorsque vous associez quelques raccourcis. Son nom aussi, il va probablement avoir besoin d'un peu d'espacement. OK. Je vais aller sur la marge sur la gauche. Tu peux y aller. Joli. Au plus fort de tout cela, il s'est avéré que c'est le bouton qui le maintenait ouvert. Donc, ce que je vais dire, c'est que la barre de navigation, vous avez une hauteur minimale, tous les pixels prêts vers le bas, vers le bas. En cliquant dessus, je maintiens la touche Shift enfoncée et j'utilise mes flèches haut et bas. On y va, ça suffira. Ce n'est pas très joli. Nous l'avons donc stylisé, nous utilisons certaines de nos classes. Vous avez peut-être utilisé une classe de combo, et maintenant elle va tomber en panne. Prévisualisons-le. Ok, et je vais m'en tenir à cette vue et mon Dieu, pour pouvoir y aller. Oh, tu es du genre : « Oui, allons-y et c'est bon. OK. Sur le bureau. OK. Ish et ça ici, je ne veux pas faire ça et je n'y suis pas arrivée. Comment les modifiez-vous ? Parce que, vous savez, et je sais que je peux simplement adopter ce point de vue et le changer et cela changera à partir de là. Tu te dis : « Eh bien, pourquoi ne le vois-je pas ? Cliquez sur la barre de navigation et cliquez sur le COG ou accédez à vos paramètres. Et tu peux dire, montre. Ce truc, ici. Je me suis embrouillé pendant un petit moment, je me suis dit : qu'est-ce que ça fait quand on est un ordinateur de bureau ? Ne le fait pas. Oh, en fait, allons-y. Et quand vous êtes sur un ordinateur de bureau, il fait des choses étranges. OK ? Ce qu'il fait, c'est juste vous montrer ici. Il ne l'allume pas éternellement, juste pendant que vous êtes en prévisualisation. Et maintenant, je peux le styliser parce que si je vais prévisualiser le site, il disparaît. Il est là tant que vous pouvez y travailler. Donc c'est un peu juste qu'ils sont temporels. Alors je le montre, mais il va s'éteindre. Donc maintenant, je peux dire que quand je suis dans celui-ci, je vais utiliser les boutons de navigation pour faire d'autres choses. Ça va, ça va rester de la même couleur. Je vais annuler le rembourrage. Tout d'abord, je vais choisir les coins arrondis. Au revoir, zéro. concerne le rembourrage, je vais le configurer pour qu' il soit beau, grand et cliquable sur un appareil mobile, la police devra être plus grande. Ce sera centré, il n'est pas nécessaire que ce soit tout cela, juste ce que j'ai décidé. OK. 13 en haut et 13 en bas. OK. Et c'est moche. Et c'est bon, je pense que c'est bien de concevoir des algorithmes si vous savez, c'est bon. Mais je suppose que le but était de vous montrer comment et à quel point ce composant de navigation est cool. Parce que nous pouvons dire en fait navbar, nous allons le cacher. Et si vous voulez le mettre en forme, le montrer temporairement pendant que je peux le styliser, je vais me débarrasser d'une dernière chose avant de le prévisualiser. Je voulais mettre la marge à zéro. Il y a un peu de marge sur le côté. C'est ce qu'il semble faire. Et maintenant, je vais en avoir un aperçu. Et ça va et vient, dirait qu'il le réinitialise. Maintenant, voici mon magnifique menu. OK, c'était un peu un tourbillon. J'ai eu envie. Mais je suppose que cela vous montre un chemin en arrière au début où nous, pourquoi ne pas simplement tout faire glisser sur la page et créer les composants de l'application. C'est parce que lorsque nous arrivons à des choses où nous devons savoir ce que sont les classes et quels sont tous ces paramètres dans mon style, je veux dire que l'utilisation fait et comment les remplacer. Et ce que signifie le bleu et le jaune signifie rho devient un peu plus naturel. Nous pouvons commencer à utiliser des modèles et d'autres composants prédéfinis et en être les maîtres. Demandez-leur de faire ce que nous voulons. Très bien, il s'agit de styliser le composant Navbar préintégré dans Webflow. 60. Ajout et connexion de pages dans le flux Web: Bonjour tout le monde. Dans cette vidéo, nous allons regarder ce panneau Pages. OK, nous avons une page d'accueil. Je vais vous montrer comment créer de nouvelles pages. Dossiers, créez des pages brouillons afin qu'elles ne soient pas réellement publiées pendant que vous travaillez dessus. Nous discuterons des pages utilitaires, les connecterons avec un peu de navigation. Ça ne va pas être super chic. OK, notre page Contactez-nous revient à la page d'accueil. Et deux sont des pages de portfolio magnifiquement conçues. Très bien, allons-y. Bien, pour créer une page, il y a un onglet Pages, ou vous pouvez cliquer dessus ici. C'est à toi de décider. Ils ouvrent tous les deux la même chose. Toutes les touches P sont activées et désactivées. Et on nous a déjà donné une page, une page statique, ce qui sera important plus tard lorsque nous commencerons à créer des pages CMOS dynamiques. Pour le moment, nous avons besoin d' une autre page statique qui signifie simplement qu'elle ne fait pas grand-chose. Il n'est pas extrait d'une base de données. Et si vous ne voyez toujours pas ce que je veux dire, nous y reviendrons plus tard. J'ai donc besoin d'une autre page. J'ai l'habitude de cliquer d' abord sur ce bouton , pas sur un dossier. Je veux une nouvelle page. Cliquez donc sur celui-ci, donnez notre page et nommé Contactez-nous est un nom très courant pour la page de contact. La limace ici est, je suppose, assez importante. Voyez-vous que ce sera notre domaine slash ? Contactez-nous. Allons-y , ce sera ce qui apparaîtra dans les navigateurs des utilisateurs, couvrira certains de ces paramètres de référencement plus tard et la protection par mot de passe plus tard également. Mais pour l'instant, donnons-lui un nom. Cliquez sur Créer. Et que mon ami est une toute nouvelle page, il ne fait pas grand-chose, qu'il lâche prise et bascule entre notre page d'accueil maintenant. Et je vais nous contacter sur la page. Si je vais sur ma page d'accueil et que je prévisualise ce site, nous n'avons aucun moyen d'y accéder. OK, il n'y a absolument aucun moyen de sortir du mode aperçu et de sortir de notre page d'accueil et de rendre l'un de ces boutons au moins cliquable. Alors allons-y. Faisons ce gros jeu géant ici. Quand on clique sur lui parce que c'est un bouton, il a ce joli petit rouage qui indique les paramètres des liens. Vous pouvez soit cliquer sur celui-ci, soit en le sélectionnant, rendre sur ce rouage assis ici. Il y en a plus dans cette option. Peu importe celui que vous utilisez. Jetons un coup d'œil à celui-ci. C'est beau et bien rangé, donc c'est cette URL par défaut. Ceci est notre lien vers un autre site. Si vous souhaitez accéder à cette page, vous pouvez cliquer sur nous. La suivante s'appelle page. Quelle page ? Bien sûr, c'est déjà là que se trouve notre page Contactez-nous. Très bien, donnons-lui un aperçu maintenant. Donc, Command Shift P ou Control Shift P sur sa page peut poser une question et je passe à la grande page blanche. On y va. Connecte-le. Je vais donc revenir à notre page d'accueil. Je vais faire la même chose pour ce type. Il se connecte également. Alors allez à la page, vous accédez à la page Contactez-nous. Le problème, c'est qu'une fois que je suis arrivé sur la page Contactez-nous, il n'est plus possible de rentrer chez moi. Donc, ce que nous allons faire, c'est déplacer cette navigation pour qu' elle apparaisse sur les deux pages. Nous allons le faire à la manière des hommes des cavernes, puis je vais vous montrer un peu comment créer des symboles. Donc, pour les hommes des cavernes, cliquons sur toute cette section appelée navigation. Copions-le. Il suffit de passer à ma page de contact et de cliquer sur Coller. Cela va dire que vous devez sélectionner un élément. Il ne sait juste pas où aller. Il vous suffit donc de cliquer sur le corps, puis de cliquer sur Coller, et cela fonctionnera. Revenons à notre page d'accueil. Prévisualisons-le. Allons-y. J'ai des trucs. Ce bouton, s'il se connecte à lui-même. OK. Ça va, je vais sur la page Contactez-nous, mais nous n'avons aucun moyen de rentrer chez nous. Nous pourrions ajouter un bouton d'accueil et beaucoup de personnes le feront. Ce que nous allons faire, c'est reconnecter le logo. Et c'est un type de test utilisateur intéressant. Cade, regardez votre audience pour voir, je sais que de nombreux sites Web n'ont plus de bouton d'accueil, mais certains en ont un. Cela dépendra de votre public, s'il a besoin d'informations très explicites, comme la façon de naviguer sur ce site, ou s'il est très averti et sait que vous cliquez sur le logo pour revenir à la page d'accueil. C'est à vous de faire de votre mieux pour commencer , puis de faire quelques tests avec vos utilisateurs pour voir s'ils peuvent être réalisés et ne pas rester bloqués. Revenons donc à l'aperçu. Revenons à notre page d'accueil. En fait, passons à notre page Contactez-nous. Parce que ce que nous voulons faire, c'est que je veux que l'on clique sur ce logo. S'il s'agit simplement d'un vieux logo, comme un JPEG, un PNG ou un SVG. En fait, nous allons le faire de manière cyclique parce que nous avons des tiques. Faisons celui-ci d'abord. Vous avez plusieurs options. Nous allons faire une option pour le moment. Je vais juste tout sélectionner , l' emballer et le déplacer. Nous avons créé des hyperliens bien plus tôt dans le cours. Il va insérer un lien. Le problème, c'est que ça va se passer comme ça. Il est bleu, j'ai besoin de le styliser. Ignorons cela pour le moment. J'ai le trait de soulignement. Ce que je veux faire, c'est aller à la page et je veux retourner à la page d'accueil. OK, et donnons un aperçu maintenant afin que nous puissions simplement prévisualiser cette page maintenant. Donc, Command Shift P, Control Shift P. Mais regardez simplement ce raccourci. Mais il est coincé dedans. Je peux donc revenir à la page d'accueil. Je peux accéder à ma page Poser une question ou ma page Contactez-nous et revenir à nouveau. D'accord, si c'est une image, supposons que c'est un logo comme celui-ci, beaux hommes. Avec une image. Nous devons l'envelopper dans ce qu'on appelle un bloc de liens. Et en fait, faisons-le ensemble dans la prochaine vidéo, je vais en faire une vidéo spéciale car il y a quelques points à aborder. Nous avons une navigation de base. serait peut-être plus facile de simplement copier-coller. Et ajoutez un autre bouton d'accueil. Il faudrait que j'emballe ces gars et qu' ils s'en tiennent à ce côté. Mais tu y vas. Regardons ces pages qui ne sont que plus. Alors celui-ci, créez un nouveau dossier. C'est pour quoi ? C'est lorsque vous souhaitez vous regrouper. exemple, je sais que je vais avoir plein de pages de portfolio, accord, donc j'en ai six pour commencer. Je prévois d'en avoir 50 ou 100. Ok, donc ce que tu fais c'est les mettre dans un dossier pour qu'ils ne soient pas comme cette énorme pile ici. Comme n'importe quel type de gestion de fichiers. Celui-ci s'appellera mon portfolio, Port Folio. Et tout ce que c'est, voyez-vous que c'est un peu comme une petite icône de dossier. Maintenant, je peux en faire une page qui sera la conception de mon site Web pour un club de kayak à cerfs. C'est le projet pour lequel je souhaite afficher mon portfolio. Je veux qu'il aille dans le dossier parent du portfolio. Donc, avant d'aller plus loin, quand je clique sur Créer, je suis prêt. Si je clique sur Créer et que je vais publier dans, disons que je publie la page d'accueil , cette page sera publiée également, même si je ne l'ai pas terminée. Donc, si vous avez un site en ligne, les gens l'utilisent en ce moment. Je publie n' importe quoi parce que personne ne le vérifie. Vous savez, il ne s'est pas bien classé, s'est probablement pas classé du tout. Mais vous avez un site qui fonctionne. Vous devriez probablement accéder à Enregistrer en tant que brouillon. OK. Et comme si j'avais créé une page comme avant. OK. Donc, la différence, c'est que vous pouvez voir là a, c'est dans un dossier, et B, il y a cette petite icône là. Cela signifie que je travaille là-dessus, mais quand je clique sur Publier, cela ne s'affichera pas tant que je ne serai pas sur cette page. Et j'en viens à ce petit rouage et je dis que vous êtes maintenant sur scène pour Publish, d' accord, ça veut juste dire que la prochaine fois, pas maintenant, ce ne sera pas publié. Cela signifie simplement que la prochaine fois que ce sera mis en scène, prêt à être lancé. Et la prochaine fois, j'appuie sur Publier. Ok, ça va être diffusé sur Internet et d'autres personnes pourront le voir. Mais pour le moment, c'est évidemment une mauvaise idée parce qu'il n'y a rien dessus. Peut-être redevenir un brouillon. OK, je vais faire la même chose et demander ma touche P de saisir la page d'accueil, récupérer ce navigateur, de le copier. Je vais avoir mon pic, accéder à mon brouillon, accéder à mon brouillon, cliquer d' abord sur le corps, appuyer sur Coller. Et j'ai une page de portfolio. Il n'y a rien dessus. Nous allons concevoir ces pages au fur et à mesure. Mais étant donné que la structure fonctionne, encore , je vais revenir à la maison. Je recevrai ce bouton quand on cliquera dessus pour y accéder, je sais que ce n'est pas le bon type de projet, mais bon **, quand il ira sur ce brouillon de page ici, qui est mon projet de conception Web. Maintenant, quand je le prévisualise, il passe à cette page. D'accord, toutes les pages. Avant de passer à autre chose, est-ce que cela parle de ces deux là ? Mot de passe Pour votre compte gratuit. Vous n'êtes pas autorisé à utiliser la prédiction de mot de passe. Vous devez mettre à jour votre site pour profiter du moment sur ce compte gratuit que j' utilise pour celui-ci en particulier. Oui, nous ne pouvons pas le faire, mais cette page de protection par mot de passe est en fait laissée vous montrer. Je peux dire cette page ici. En fait, cette page ici. Allez au rouage que je peux protéger par mot de passe. OK. Je peux l'activer si vous voulez accéder à cette page, peut-être qu'il s'agit uniquement de membres, d'une sorte de données sensibles. Je peux l'activer. Mais comme c'est le compte gratuit dont j'avais besoin pour d'abord posséder le plan du site. Alors, que fait cette page ? Ce n'est que l' apparence et la sensation. Si ça ne te plaît pas, vas-y, on peut s'en occuper. Je peux y ajouter un style. OK, donc c'est exactement ce à quoi ça ressemble quand quelqu'un vient sur cette page, vous pouvez la changer pour une autre image. Vous pouvez changer le texte, d'accord, est-ce que cela vous donne juste un endroit pour le mettre en forme. Je vais laisser le mien tel quel avec les quatre pages. Une page de quatre ou quatre est ce qui se passe si quelqu'un, s'il clique sur un lien de votre site et que celui-ci ne mène nulle part, le navigateur cherche une page complète et l' affiche. Et c'est là que vous pourriez aller et changer à nouveau de style. Vous pourriez avoir des informations plus utiles, peut-être un lien vers la page d'accueil. Beaucoup de gens l' installeront pour une page complète pour être un peu amusant et amusant. Mais encore une fois, cette option que nous ne faisons que regarder, nous pouvons la personnaliser. Très bien, page d'accueil. Nous savons ce que c'est. J'ai créé une page de contact. Nous avons un dossier à empiler. se peut que nous ayons dix, 20 ou 30 pages ici pour notre portfolio. Et ce ne sont que des pages utilitaires que nous pourrons mettre en forme plus tard dans le cours. Nous allons créer des pages fluides et nous allons créer des pages de commerce électronique trop sophistiquées pour votre projet. Créez une page Contactez-nous et un dossier de portfolio. Et l'une de vos pages n'a pas d'importance car nous allons commencer à charger avec différents éléments. C'était censé être la fin. Je suis revenu du futur parce que j'ai oublié de te dire quelque chose. Supposons que vous souhaitiez dupliquer une page parce que vous aurez besoin de nombreuses pages de portfolio, ce que j'ai réalisé plus tard dans le cours. Et je ne vous ai pas montré sous les pages comment accéder à Portfolio. Allez sur le petit rouage en haut, pas sur le dossier, désolé, sur la page elle-même que vous souhaitez dupliquer. Ensuite, allez au rouage, puis celui-ci là, dupliquez la page. Tu peux en faire un deuxième. Ok, donc nous allons créer une deuxième page de portfolio appelée deuxième page de portfolio parce que je ne peux penser à rien pour le moment. Tu as compris l'idée. Très bien, c' est aussi dupliquer des pages. Et cela clôturera cette vidéo, toutes sortes de pages entassées ici, en plus d'un petit bonus. On va appeler ça un bonus, juste quelque chose que j'ai oublié. Très bien, vidéo suivante. 62. Créez un symbole et des overrides dans le Webflow: Bonjour tout le monde. Dans cette vidéo, nous allons examiner symboles et les instances, les symboles, comme vous pouvez le faire dans ce petit onglet, nous allons créer une navigation. Nous l'ajoutons simplement à notre page. Et ce qui est cool, c'est que c'est un joli petit bloc réutilisable. Mais si j'y vais et que je supprime des éléments, cela va disparaître de toutes les pages que j'ai, l'instance a l'air, elle est sortie de cette page pour ajouter des éléments, copier-coller. Maintenant, revenez à la page d'accueil. Ils suivent tous. Le leader ira un peu plus loin et créera ces cartes en bas qui seront toutes connectées, mais nous pouvons les rendre uniques en plaçant des superpositions sur vos symboles. C'est super élégant, idéal pour les éléments de votre projet de conception Web que vous pouvez avoir beaucoup de choses comme cette carte ici. Vous pouvez en avoir des centaines, listes de produits, des milliers d'entre elles, toutes contrôlées par un seul symbole. Très bien, laissez-moi vous montrer comment en créer un, accord, pour créer un symbole. Et je vais travailler sur ma page Contactez-nous, ma page d'accueil, parce que c'est celle sur laquelle j'ai passé le plus de temps à résoudre notre problème en ce moment, n'est-ce pas ? Si je copie et colle ce bouton et un autre, j'oublie qu'il se trouve au milieu. Et si je vais sur ma page d'accueil, ils ne sont pas mis à jour. C'est donc ce que je vais faire. Je vais aller sur ma page de contact. Laisse-moi me débarrasser de ce type. Je vais dire toute cette section de navigation. Je vais te convertir. Laissez-moi passer à mon panneau de symboles. Au second, je vais créer un nouveau symbole. Je vais lui donner un nom. Créez le symbole. Et c'est tout. Nous avons créé un symbole. Nous sommes en fait à l'intérieur du symbole en ce moment. Nous pouvons en sortir. OK, c'est maintenant ce qu' on appelle l'instance du symbole. Passons maintenant à ma page d'accueil. OK ? Et cette partie en haut , appelée nerf de la section de navigation, ne sert à rien. OK, je vais le supprimer. Et ce que je veux faire, c'est saisir mon symbole et en faire ressortir une instance ce qui signifie simplement que c'est la personne principale qui les contrôle tous. Et je peux en extraire des copies, les mettre au bon endroit, m'en servir. Il est vert, lui aussi. Et ce qui est cool, c'est que maintenant je vais à l'intérieur et que je modifie mon symbole, d'accord ? Et je dis « vous  », vous êtes deux. Cela revient sur notre page Contactez-nous. Finalement. On y va. Il contrôle donc toutes les instances de ce symbole. Ce langage est très important. Vous pouvez voir ici que les petites icônes sont importantes, le vert est important. Donc, vous savez, vous regardez des symboles. Vous êtes peut-être en train de regarder le document de quelqu' un d'autre ou un modèle que vous avez acheté, cloné, volé ou trouvé dans la rue. Cool. Mettons-le sur notre dernière page. En fait, nous avons les deux. Encore une fois. Tu es devenu symbole. Faites glisser une annonce. On y va. Et j' ai encore une page à faire, ce que je ne ferai pas maintenant, qui reviendra probablement et me hantera plus tard lorsque vous éditerez, assemblez, que tout le reste sera un peu grisé et que vous ajusterez chaque une seule chose. Mais il y a des moments où, jetons un coup d' œil à notre page d'accueil. Comme ces objets, ici, sont assez bons candidats pour un symbole. OK, il n'y en a que six sur la page d'accueil. Est-ce que j'irais le faire ? Je le ferais probablement 50 % du temps. OK. Mais s'il s'agissait d'un article dans un magasin, d'un affichage du prix et des détails du produit, alors oui, car vous pourriez vous retrouver avec des centaines ou des milliers d'articles. Six d'entre eux, ce n'est pas un gros drame de les mettre à jour tous les six jusqu'à ce que je trouve que c'est la malédiction. Je réponds que non, ça n'a pas besoin d'être un symbole. Et cela pousse instantanément l'univers à inventer la raison pour laquelle j'en ai besoin de 1 000. Mais disons que je veux que ce soit notre symbole parce que je veux le réutiliser, mais ils sont tous assez uniques. Au cas où je ne voudrais pas qu'ils soient tous les mêmes que ma navigation. Alors, comment s'y prendre ? Tout d'abord, vous les sélectionnez tous. Je vais donc cliquer à l'intérieur, utiliser ma flèche vers le haut pour récupérer la carte entière. En fait, laquelle devons-nous faire ? Je vais faire celui-ci. OK. Je vais récupérer la vignette complète de la carte que j'ai créée. Accédez à mes symboles. Laissez-moi créer un nouveau symbole. Vous pouvez en fait cliquer avec le bouton droit de la souris, si vous cliquez avec le bouton droit sur ce nom en haut ici, et que vous pouvez le convertir en symbole, vous allez créer un symbole. Je vais lui donner un nom. Ce sera ma carte. C'est une carte Cola, une miniature. Maintenant. D'accord, et ça marche un peu. Je vais le copier, le coller, le coller. Non, je ne le suis pas. Une de mes vignettes découpées contradictoires. Copiez-le, collez-le, collez-le. Pourquoi cela ne fonctionnait-il pas ? C'est parce que j'étais à l' intérieur et que je n'étais pas en train de tout copier. Je crois que je viens de le faire sélectionner. Je vais donc sortir mon montage, le véritable symbole. OK, maintenant j'ai sélectionné l' instance du symbole. Et ce que je veux c'est 123456. OK, et celui-ci , je suis désolée. Est-ce que ça va marcher ? Nous allons vous mettre au rebut. Au revoir. OK. Donc j'ai tout cela et c'est plutôt bien parce que cela signifie que je peux passer en revue et dire, en fait , génial, je vais supprimer ça. Ici. Tu y vas. C'est facile pour mes milliers d'entre eux sur la page, mais je veux rendre ces choses uniques en même temps que le texte. Comment puis-je faire ça ? Donc, la première chose à faire est de trouver votre symbole. C'est le truc vert. Voilà, entrez dedans pour le modifier, double-cliquez dessus pour sélectionner ce que vous souhaitez modifier. Comme si cela devait être unique pour chacun d'entre eux. Et vous pouvez accéder à vos paramètres ici. Donc, les styles ne vont pas dans les paramètres. Et vous pouvez le voir ici, vous recherchez ces choses, les trucs violets. Dans ce cas, je vais dire que vous êtes lié à un champ K, et je vais créer ce champ. Je vais l'appeler ma vignette qui frappe, crée et relie. Que s'est-il passé en violet ? C'est ce qui s'est passé. Que s'est-il passé d'autre ? C'est ce qui en est ressorti. Donc, pas à l'intérieur du si vous voulez tout modifier, vous allez à l'intérieur. Si vous vouliez juste changer de petites parties de ces instances, n'importe laquelle d'entre elles maintenant, parce que ce sont toutes des instances de ce symbole. Si je clique sur celui-ci et que je vais dans les paramètres, vous verrez, pouvez-vous voir des annulations instantanées ? C'est ce truc que je viens de fabriquer. Ce n'était pas là. Il y a quelques secondes, nous l'avons appelé « vignette » et je peux remplacer les ticks ici. Et celui-ci l'était, je ne m'en souviens pas. Il s'agit d'un projet de conception Web coloré. OK, maintenant, je vais que les instances soient uniques, mais si je change quelque chose, je peux entrer dans n'importe laquelle d' entre elles, peu importe laquelle c'est. Mais physiquement, je peux même faire un mouvement et ils changent tous. Gua, les symboles sont géniaux. Faisons de même pour cette image ici. Je vais sélectionner sur cette image et la même chose en cherchant le point violet où qu'il se trouve, accord, garde juste un œil dessus. C'est donc quelque chose qui peut être modifié. Créons un nouveau champ. Celui-ci s'appellera peut-être image image, mais juste image. Après avoir édité mon symbole, revenez à l'instance. Et n'oubliez pas que ce premier est bon. La seconde, désormais située dans les paramètres, comporte deux options de remplacement pour l'image. De plus, la vignette qui apparaît sur deux choses que je peux vous donner, et c'est celle-ci. Faisons encore une chose que nous pourrions faire. Je veux changer ce bouton pour qu' ils n'aillent pas tous au même endroit car au moment où j'en change un, ils vont tous changer. Donc je veux le dire, le symbole se trouve à l'intérieur. Vous remarquez que le retour à l'original efface en quelque sorte les remplacements. Maintenant, ce bouton, c'est pareil. Je clique dessus et je vais dire que vous ajoutez le texte. Faut-il changer ? Peut-être que c'est le cas. Le mien n'est pas parce que je pense que j'utilise simplement la vue des mots, mais le lien le fait certainement. OK, donc je vais ajouter un nouveau champ et j'appelle ça, le lien de mon bouton est correct. Cliquez sur Créer. Et c'est tout. Maintenant, revenez. Je dois m'habituer à aimer ce qui s'y trouve pour changer les choses, toutes puis en sortir et à être invité à changer l'instance de l'ancien mode designer. Donc, dans ce cas, je peux cliquer dessus, juste le tout, d'accord, et j'ai plein de choses. Je peux changer l' image, la vignette et maintenant le lien du bouton. Et ce que je vais dire, c'est une page et celle-ci va vers ma page de portfolio, des symboles. Gardez donc un œil sur les éléments violets, surveillez les éléments verts pour les autres, les symboles que vous pourriez avoir sur le projet de quelqu'un d'autre et il y a un tas de symboles dedans. Vous pouvez dissocier les symboles qui indiquent qu' il y a un moment où vous le souhaitez, comme « Let's where we are on is sur la page d'accueil ». Donc ça va entrer dans notre symbole. OK, je vais changer ce bouton pour dire « Accueil ». Les clients sont revenus et ont dit : «  Nous avons besoin du bouton d'accueil. Personne ne sait comment cliquer dessus. Ou vous êtes en train de tester, vous êtes revenu et vous avez dit : « Oui, personne ne sait comment rentrer chez vous ou au moins la moitié des utilisateurs ne le savent pas ». OK, donc j'ai ce rôle. Et c'est cool parce que sur ces autres pages, il est logique d' avoir le bouton d'accueil et de rentrer chez vous. Toutes ces autres pages. Très pratique pour une page. Je ne l'ai pas collé sur celui-ci. J'ai fait des maisons CC importantes sur toutes ces autres pages. Mais le client revient et demande pourquoi y a-t-il un bouton d'accueil sur la page d'accueil ? Et tu veux, c'est juste parce que ce symboles et toutes les pages, et j'aime débarrasser et me dire : « OK, donc ce que nous allons faire, c'est le détacher. Nous allons donc cliquer dessus avec le bouton droit. Et il y a une option qui indique dissocier l'instance, le vert a disparu. C'est maintenant quelque chose que je peux dire supprimer et cela n'affecte rien d'autre. Je peux revenir à ces autres pages, comme pour nous contacter. C'est toujours là, c'est toujours sur toutes les autres pages. J'ai cette instance. Le seul problème, c'est qu'en tant que designer, je dois maintenant me rappeler que lorsque je modifie la navigation, je dois le faire au symbole lui-même. Et si j'apporte des modifications, disons que je change la couleur, je dois revenir en arrière et mettre à jour la page d'accueil également car elle est séparée de tout le reste. Mais c'est un compromis suffisant, car cela apparaît sur mes milliers de pages. n'y a qu'une seule page d'accueil avec laquelle je peux vivre. Le seul problème avec les symboles, c'est que si je veux changer de texte, d'accord ? Vous double-cliquez dessus. Cliquez dessus. Par exemple, comment puis-je changer le texte ? Parce que nous l'avons fait. Comment les appelle-t-on une dérogation ? Nous pouvons simplement le changer ici. Nous devons sortir et nous devons sélectionner dessus ici. Et nous le changeons ici à partir de maintenant, ce qui est bien tant que vous savez où il se trouve. Mais cela peut être un peu délicat parce que vous vous perdez. Vous pouvez ouvrir le projet de quelqu'un d'autre , double-cliquer sur des éléments et vous demander pourquoi cela change ? Qu'est-ce qui se passe ? Maintenant, tu sais, il y a des parties violettes dans ces parties vertes. bits verts contrôlent tout. Les bits violets sont des substituts et vous le ferez dans les paramètres ici. Génial. Bon, on a quoi d'autre ? Est-ce juste ? C'était une fausse fin. J'ai dit que j'ignorerais cela et que je mettrais tout en ordre. Cela ne fait que le ranger. Vous savez probablement comment je vais intégrer mon montage, mon symbole, d'accord, c'est bon. Je vais le faire pour eux. Ceux-là, qu' est-ce qui le fait passer au centre ? Vous souvenez-vous que vous vous souvenez de notre système de navigation Div, qui résume le tout est configuré pour fléchir. Et nous avons cette option ici, qui fonctionnait très bien quand il n'y a que deux choses, d'accord ? Mais maintenant je ne peux pas vraiment le faire fonctionner pour ce que je veux faire. Alors, comment s'y prendre ? Je vais quand même avoir poussé gauche et à droite. OK. Alors rappelez-vous que cela a très bien fonctionné pour deux choses. Donc, si je mets ces deux choses dans un rappeur, redeviendrai juste deux choses, l'emballage et ce logo ici. Essayons de le faire. Une clé, toute la méchanceté de ma navigation. Tout le reste est grisé. Et je l'ai mis dedans. J'ai une université et je t'y ai envoyé. Maintenant, cela fonctionne facilement. Dois-je le nommer ? Je pourrais probablement, mais je ne vais pas le faire. Faut-il un cours ? Pas pour le moment. Avons-nous besoin d'espace ? Oui, nous le faisons. Comment allons-nous procéder ? Laisse-moi y réfléchir. J'ai un petit bouton. Est-ce qu'il me reste une marge ? Je ne le sais pas. Ai-je une marge, non ? Comment ne pas en avoir ? Je vais faire une marge, non ? Où est-ce que je vais le faire ? Je vais le faire à une balise div à laquelle aucune classe n'est appliquée. Son seul travail est de laisser de la marge. Et je vais faire une petite supposition, j'espère que ce sera juste, parce que ce sera mes 16 ans. C'est super, celui-ci, il va y avoir de la marge gauche, accord, et il va être 16. Et j'espère que nous nous en débarrasserons maintenant. Je vais pouvoir l'appliquer parce que c'est mondial, parce qu'il l' a en quelque sorte créé tout seul. Marge laissée petite, Ron, une, qu'il faut soulever et soulever petit. Ça va faire l'affaire. On y va. Nous pouvons maintenant aller vous voir dans la vidéo suivante. 63. Comment créer un formulaire de contact dans Webflow: Bonjour à tous. Dans cette vidéo, nous allons créer ce formulaire. Il contient des champs nommés, des e-mails, des menus déroulants, ces coches, et je vais vous montrer comment soumettre et ce qu'il advient par la suite. Ou du moins, vous y voilà. Cela se retrouve dans mon e-mail. D'accord, ils sont super faciles à faire. Laissez-moi vous montrer comment en assembler un. Très bien, ajoutons un formulaire. Je vais donc m'en débarrasser. C'est familier. Je vais ajouter un contenant dans lequel ils pourront entrer et je vais ajouter une section dans laquelle ils pourront y entrer. Tu n'es pas obligée d'avoir ça. Sinon, il va juste apparaître sur la gauche. Ce sera ma section et ce sera contact. Et je vais ajouter un peu de marge sur le dessus pour qu'il soit coincé en haut. Et tout ce que nous faisons, c'est d'aller Ajouter, puis de parcourir deux formulaires. Il y a toute une section ici. Tu peux le voir ? OK. Et ce sont tous des composants individuels d'un formulaire. C'est un gros morceau dans l'ensemble, et c'est probablement un bon endroit pour s'arrêter. Je vais le mettre dans ma section et c'est tout. Tu es prêt à partir. Donnons-lui un aperçu. Je peux taper ici. Vous pouvez voir qu'il est en train de le remplir. Mes informations floues, mon nom, e-mail, d'autres informations floues, et je clique sur Soumettre. Maintenant, il est dit « veuillez remplir ce champ obligatoire ». Alors laisse-moi le remplir. D'accord, nous avons donc des formulaires qui fonctionnent encore très bien. Vous devez publier votre site pour que cela fonctionne. Je peux le faire. Ok, c'est sorti d'ici. Je vais publier, domaine publié. Maintenant. Nous pouvons prévisualiser le mode, mais cela fonctionnera si nous passons aux versions live, si nous y jetons un coup d'œil. Très bien, maintenant j'appuie sur Soumettre et les formulaires de Magic Man peignaient un bouton, essayais de les faire dans mon cours de conception Web. Si vous avez fait mes bases du Web, c'est un peu délicat, quelqu'un doit le gérer, et c'est ce que fait Webflow. Alors, que se passe-t-il maintenant ? Où est-ce que ça va ? Jetons un coup d'œil. Donc, de retour dans Webflow, il y a quelques endroits où vous pouvez le trouver. L'un se trouve dans les paramètres du projet pour ce site Web en particulier. OK. Il y a les paramètres du projet. Voici donc le portfolio de Dan. Nous avons visité quelques-unes d'entre elles. OK. C'est celui-ci qui contient beaucoup d'informations ici. L'important ici est de savoir où cette adresse e-mail me vient à l'esprit, entre dans mon adresse e-mail floue. Mais juste en bas, en bas de cette page, vous pouvez voir que mon formulaire est soumis ou ici je peux le lire à partir d'ici. Je peux télécharger un CSV d'une manière ou d'une autre ou y est-il ? Ça l'est. Le gros bouton noir. Mais aussi. Laisse-moi vérifier mes e-mails. Très bien, donc je suis dans mon adresse e-mail et elle est là. J'ai reçu un formulaire envoyé par Jason. À partir du formulaire, il s'agit du nom du formulaire de ce site Web au cas où vous en géreriez plusieurs. Vous remarquerez également qu'il y a une partie de mon site gratuit. Je n'en reçois qu'un sur 50 pour ce mois-ci. OK. Et c'est un peu comme si au début du mois, à la fin du mois, il serait réinitialisé, mais nous devrons passer à un autre plan si vous voulez que ce soit plus élevé. Très cool. Si vous ne saviez pas que cela peut être très délicat si vous devez configurer votre propre serveur de messagerie ou au moins un serveur de transfert, cela peut être délicat. Allons-y et faisons-en un peu plus. Je vais revenir au designer. Je pourrais revenir à mon tableau de bord, puis créer un look directement à partir d'ici. Accédez à ma page de contact. Ajoutons-y quelques autres parties différentes. Allez donc à l'ED, descendez dans les différents formulaires et il vous suffit faire glisser dans ce Form Wrapper. Tu vois qu'ils sont en quelque sorte ********. Je te montrerai dans une seconde. OK, donc c'est tout. Je n'en ai pas besoin d' un autre. Ce que je veux, c'est que je veux un autre domaine. Je vais donc l'y glisser. Et celui-ci servira à peu près à un numéro de téléphone. Donc, ce que je veux faire, c'est lui donner également une étiquette. Il y a en quelque sorte deux parties. Il y a cette étiquette de champ, vous y voyez le nom, et puis il y a le champ de texte réel. J'ai donc édité un autre TextField. Ajoutons-en un autre. Il faut les fermer. Je vais y aller, donc nous n'avons pas eu à continuer à faire défiler cette vidéo vers le bas. Au moins. Je ne veux pas que l'étiquette passe juste au-dessus. Et cette étiquette va dire que vous remarquerez que celui-ci contient du texte d'espace réservé, mais celui-ci ne le désactive pas non plus. Vous pouvez entrer ici et dire « e-mail réservé ». On y va. Celui-ci a besoin d'un meilleur texte d'espace réservé, car il indique simplement un exemple de texte. Vous devriez peut-être faire allusion à un numéro international. OK. Je ne sais pas si c'est un chiffre. Il peut s'agir d'un numéro de téléphone portable en Irlande, comme s'il contenait trop de chiffres et vous avez compris. L'autre chose à retenir lorsque vous ajoutez ces éléments, en particulier ces champs, c' est de vous envoyer un e-mail pour consulter l'e-mail. Voyez-vous ici qu'il est écrit : « Où est ? Ça dit que le nom est égal à Jason Bourne courrier électronique est égal à cela parce que nous l'avons ajouté nous-mêmes, n'a pas été ajouté, est-ce que cela s'appelle un champ. Je vais donc avoir un e-mail qui va arriver et qui dira que le champ est égal au numéro de téléphone. Donc je vais dire téléphone. Quand je recevrai mon e-mail, il sera un peu plus facile à comprendre pour moi en tant que destinataire. L'utilisateur du site ne verra jamais cette petite option ici. L'autre question est de savoir si c' est obligatoire. Ok, tu peux l'activer et le désactiver par défaut. Cette adresse e-mail a été activée par Workflow. Vous pouvez le désactiver si cela ne vous dérange pas. Sais-tu lequel tu auras ? Jetons un coup d'œil à peut-être un ou deux autres. Je vais aller voir Ed, consulter mes formulaires, prendre de l'espace est très utile. Je vais le faire glisser ici. Ce sont des blocs de textes. Il faut donc que le champ soit juste une ligne. Maintenant, il faut prendre en compte la surface, faites-la glisser vers le bas. Il prend de la surface, peut contenir plusieurs lignes. Donc, celui-ci va, je vais également ajouter une étiquette de champ. Donc, si vous posez le livre, voici, et celle-ci sera ma question. Plus d'informations OK ? Je vais dire qu'au lieu de cocher des échantillons, je vais dire quelque chose là-dedans. Je ne veux pas qu'elle réenregistre ça. Prévisualisons-le. Quelqu'un ici peut commencer à taper et appuyer sur le renvoyer au point de fin de base de données, alors que celui-ci n'est qu'un texte mulberry d'une seule ligne. Très bien, faisons-en une de plus ensemble. Voyons donc comment ajouter un formulaire. Regardons la case à cocher. Je vais en faire deux de plus. Deux de plus. peut donc que les cases à cocher indiquent généralement qu'ils nous donnent leur autorisation. Il se peut que nous l'ayons automatiquement. Démarrage vérifié. Il y a toujours le truc. Vous devez sous-coter k. Ajoutons , ah, une liste déroulante, sélectionnez l'option ici, glissez-la dedans. Ok, ça va aller ici et on va dire que celui-ci va être appelé. N'oubliez pas que le nom ne me parviendra pas vraiment en tant que créateur du formulaire. L'utilisateur ne le verra pas. Mais c'est peut-être ma méthode préférée. Et nous avons ces champs ici. Si je les laisse toutes vides, jetons un coup d'œil à un aperçu. Ok, tu as le premier, le deuxième et le troisième choix. Désactivez l'aperçu. Allons-y et changeons-le. Impossible de désactiver l'aperçu. Pour une raison quelconque, on y va. Et qu'est-ce que je veux ? Je vais en sélectionner un qui est intéressant parce que c'est comme par défaut. OK ? C'est celui qui y apparaît. Je vais laisser ça en tant que choix. Et en fait, je vais l' appeler autrement au lieu d'en sélectionner un, je vais dire que ce sera la méthode de contact préférée. Ce que je pourrais faire, c'est aussi l'utiliser comme étiquette. OK, mes options seront de premier choix. Ça va être marrant. La valeur ici, vous, a probablement juste besoin d'être amusante. Nous allons regarder de l'autre côté parce que cela va dire, je préférais que je sois égal à un téléphone, à la valeur du téléphone, ce qui est cool. OK, passons à la dernière. Celui-ci ici est qu'ils peuvent choisir, cela peut être un e-mail. OK. Et ça va juste revenir sous forme d'e-mail. Rien d'autre ? Je veux supprimer le dernier parce que je n'en ai pas besoin, ce n'est pas obligatoire. Donnons-lui un aperçu de la méthode de contact. Nous y voilà, par téléphone ou par e-mail. Il a probablement besoin d'un titre comme les autres parce que ce genre de titre est difficile à connaître. Il semblerait que nous fassions quelque chose avec l'e-mail qui s'y trouve. Mets-le sur l'étiquette. N'oubliez pas que ces étiquettes ne font rien. Ils n'aiment pas les blocs de texte que les gens peuvent lire. Alors vas-y, c'est un titre terrible. est si grand, mais faisons tout un test. Je vais devoir publier le domaine sélectionné. Je pourrais l'ouvrir à nouveau, mais il est déjà ouvert par ici. Donc, ce que nous devons faire, c'est réinitialiser cette page pour obtenir toutes les informations supplémentaires. Je vais le remplir. OK. D'habitude, je ne sais pas si Jason Bourne ne veut pas votre newsletter et je souhaite être contacté par e-mail. Soumettre, veuillez remplir ce champ. J'ai rendu cela obligatoire. Très bien, maintenant nous allons le faire. Très bien, voyons ce qui se passe du côté des e-mails. Très bien, nous avons donc tous nos champs. Le nom est égal à Jason, e-mail, numéro de téléphone, champ, tu vois, j'ai oublié de le nommer. C'est ici que tu dois aller vérifier ça. OK. Donc ça devrait être ce qu'on doit dire ? Plus d'informations ? La case à cocher est fausse. Un autre nom de lit, je fais semblant de le faire. Je fais semblant de le faire exprès, méthode préférée par e-mail. C'est un côté amer. Donc on en a deux, on a ces deux-là. Regardons en arrière. Jetons un coup d'œil à celui-ci. La case à cocher est Qu'est-ce que c'était ? Case à cocher fausse. Il y a donc deux choses. Pas de case à cocher, ce sera une newsletter, une newsletter, une inscription. N'oubliez pas que l'utilisateur ne voit pas cela. C'est exactement ce qui se trouve dans votre e-mail. Et je ne pense pas qu'on puisse changer le faux. Il va dire vrai ou faux. Je suis sûr que nous pouvons changer cela. Tu pourras peut-être aller dans un endroit que je n'ai pas, mais ça va être mieux. Cela indiquera l' inscription à la newsletter, vrai ou faux. OK. Ce n'est toujours ni oui ni non, mais c'est logique. Celui-ci ici, pouvez-vous voir celui-ci ici dit simplement, où est leur méthode préférée ? Notez que celui-ci présente le problème, on l' appelle simplement un champ. Je vais vous donner plus d'informations. On y va. Et cela permettra de résoudre ces deux problèmes. D'accord, c'est tout parce que l'ajout d'un formulaire a l'air un peu ennuyeux. Nous allons donc regarder la vidéo suivante et la styliser. Mais tant que vous continuez à ajouter ces éléments dans le bloc de formulaire, accord, ils seront transmis à Webflow. Qui ? Webflow l'enverra par e-mail, ou vous pouvez y accéder via les paramètres du projet et sous les formulaires. Mais si cela permet un flux de travail agréable et facile, d'accord, passez à la vidéo suivante. 64. Comment créer un formulaire dans le Webflow: Bonjour. Dans cette vidéo, nous allons regarder cette mousse ennuyeuse. Ce Webflow nous en donne deux, ce qui en fait une forme légèrement moins ennuyeuse. Nous allons personnaliser ces champs. Regarde, il y a une doublure noire à l'extérieur, pas de ligne noire, c'est génial. Il est divisé en plusieurs colonnes. Certains d'entre eux se répandent sur eux, d' autres non. Très chic. Oh, regardez notre joli bouton. Nous nous sommes débarrassés des étiquettes. Nous avons un texte d'espace réservé au milieu. Je vais vous montrer comment faire en sorte que cette grille se décompose différemment selon les appareils afin qu'elle s'adapte parfaitement à différentes tailles d' appareils. Et je vais vous montrer comment trouver ce message qui apparaît lorsque quelqu'un a fini de vous envoyer un e-mail, la notification de réussite, et que son style le rend rose. Très bien, allons-y. Donnons-lui un style. OK, la première chose est que je veux, disons que je veux styliser tous ces champs, chacun d'eux. Ils ont donc besoin que la même classe leur soit appliquée. Le moment où aucun cours ne leur est appliqué. Je pourrais donc lui donner un cours. Je pourrais dire que c'est le titre de mon champ qui peut être utilisé et stylé. Une astuce avec Webflow, c'est que nous avons appris par erreur que si j'oublie de lui donner un nom de classe, il lui donnera simplement un nom de classe tout seul. Souvent, il utilise ce qu'il y a dedans. Et en fait, c' est très pratique. Donc, si je ne lui donne pas de nom de classe, il en faut un. Si je dis qu'en fait, j'ai besoin que ce soit le poids de police normal. Vous voyez que tout cela fait automatiquement vous un nom de classe, une étiquette de terrain. Et en fait, pour moi, c'est un bon moyen de revenir en arrière au début du cours. Ce n'était pas pratique parce que nous ne savions pas vraiment que ce que nous faisions dans ces cours serait créé, mais maintenant, je l'utilise à mon plein pouvoir. Maintenant, je peux faire une étiquette de champ. Excellent appliqué à tous, vous utiliserez un raccourci Commande ou Contrôle Retour. J'ai été Field Down Arrow. On y va. N'oubliez pas que les frères et sœurs peuvent utiliser la gauche et la droite même si c'est haut en bas et que le haut revient au parent. Donc, quand je suis ici, je peux simplement utiliser ma flèche droite, descendre en U comme ça. J'aime faire ce genre de choses. Comme si vous n'aviez aucune main sur la souris. Regarde, amigo. OK, cool. Je vais donc l' appliquer à chacun d'entre eux. Et en fait, ce que je vais faire, c'est dire que je veux pas qu'aucun d'entre vous ne fasse des tables qui ne fassent rien d'autre pour le formulaire que d'aider à décrire ce qu'il y a en dessous. Mais je peux le faire beaucoup dans ce texte d'espace réservé. Alors nommez, peut-être que si vous voulez styliser ce qui se trouve dedans, vous pouvez voir la même chose à nouveau. Je veux que cette chose appelée champ de texte, qui est différent d' avant, soit le nom du champ. Encore une fois, je ne vais pas lui donner de nom parce que ça va juste disparaître, je vais l'utiliser pour le nom de classe, ce qui est parfait. Et disons que je veux que le contenu que l' utilisateur tape soit de cette couleur rose vif. Prévisualisez-le. Ok, et maintenant, si je commence à taper, on y va, c'est une banque chaude. Pouvez-vous personnaliser les champs eux-mêmes comme vous le souhaitez ? Parce que mon portfolio est composé lignes sombres à l'extérieur. Si je clique sur ce champ de texte, j'ai déjà appliqué une classe, ce qui est cool. OK, et je vais juste passer à la commande. Je vais cliquer sur les options sur Chevron Alt cliquer sur les bordures d'un PC. Dès qu'il y a un style, c'est juste qu'il nous est caché. Mais on peut dire que je veux ajouter un autre style par-dessus. Et je veux que ce soit le cas, je vais juste vous montrer qu'il peut le rendre grand et épais. Ce n'est pas ce que je veux. Mais vous pouvez décider que c'est ce que vous voulez faire. Coins arrondis. Coins arrondis. Pourquoi cela ne les affecte-t-il pas à tous ? Laisse-moi faire quelque chose de moins laid. Je vais utiliser mon gris. Oh, ouais. Pas très différent. Pourquoi est-ce qu'ils sont tous aveugles ? C'est parce que même s'ils sont appelés champ à ticks, n'ont pas de champ de prise de classe, de champ appliqué. Comment s'appelle-t-il ? Libellé du champ, note coche le champ. Vous pouvez donc saisir le champ Flèche vers le bas, Commande ou Contrôle dans le champ de texte. OK, passons à la dernière. D'accord, et ça l'est, c'est versé sur mon rose vif, ce que je ne voulais pas vraiment. Désolée, je t'aide. Tu vas l'effacer. Très bien, comment pouvons-nous décaler bouton, bouton. Commencez comme tout le monde. J'en ai déjà un que nous avons créé plus tôt. Bouton Membre. On y va. Et comme nous étions super cool tout à l'heure, souvenez-vous que nous avons fait des boutons plus grands ou que nous avons supprimé des boutons plus petits. Regardez S, la conception Web, la création de choses très tôt dans le cours, où cela nous prend une éternité. Mais plus tard, créez un site Web ninjas avec toutes nos classes sympas, ou du moins ces classes combinées. Et ils vont mondialiser les cours parce que n'oubliez pas que nous voulons faire de la couleur secondaire. C'est bon, j'ai porté le bouton. Ça va. Que se passe-t-il lorsque vous le soumettez ? Nous l'avons déjà vu. Quand vous l'avez soumis , vous vous êtes dit : « Hé, merci de l' avoir soumis quand vous y arrivez. Vous devez donc cliquer sur l'un de ces deux éléments, soit sur le bloc de formulaire, soit sur le formulaire qui s'y trouve. Ça n'a pas vraiment d'importance. OK. Et allez dans vos paramètres, il y a une option ici qui indique l' état de ce formulaire, normal. Nous concevons donc tout cela. Le succès est ce qui apparaît une fois que quelqu'un l'a fait et maintenant vous n'avez plus qu'à utiliser un stylet, vous pouvez décider que je vais utiliser ma couleur secondaire. Non, je fais ça tellement de fois. C'est l'identifiant. Nous ne les utilisons pas beaucoup si ce n'est lorsque nous remontions au cours, ces identifiants que nous utilisions lorsque nous remontions au cours, ces identifiants que pour faire de la navigation, où nous sommes passés à des sections à partir de boutons. Et ajoutez notre classe de couleur. Et nous allons utiliser l' arrière-plan du primaire. Celui-ci va être du style tick. Je n'en ai pas. Je pense que l'un d'eux que nous avons fait prend la couleur au second plan, qui sera toujours bon. On y va. Vous pouvez donc résoudre ce problème à nouveau le formulaire dans les paramètres et vous pouvez également faire l'ère. OK, je l'ai installé mais en bas. Mettons tout cela dans une grille parce que pour le moment, je veux ceci, c'est ma maquette Figma où je les ai côte à côte. Comment faisons-nous cela ? Nous allons utiliser une grille parce que les grilles sont bonnes, faciles à utiliser et qu'il y a des k assez régimentés. Donc je vais utiliser une grille. Je vais juste m' assurer que ça rentre quelque part dans mon formulaire de toute façon. OK. Tant que c'est à l'intérieur du formulaire et du bloc de formulaire, d'accord, ça marchera parce que, en gros, la prise formelle, tout ce qui se trouve à l'intérieur de cette mousse, y colle n'importe quoi. Il essaiera de l' envoyer sous forme d'option de formulaire. Alors je colle ma grille ici. Et ça pour le moment, j'ai quoi, deux par deux, ce qui est très bien. Je vais donc prendre le nom. OK. Peux-tu récupérer l'e-mail ? Je vais prendre mon numéro de téléphone numéro un. Et ça va marcher ici pour mon cinquième. Cela va couvrir les deux et cela permettra de les couvrir tous les deux. Ce n'est tout simplement pas dans le réseau. Ça marchera toujours. Les grilles ne descendent ici, le formulaire s'en fout. Mais disons que c'est le cas ici. Mettons donc celui-ci dedans. Et celui-ci s'en prend aussi à ce type. Et il finit ici et tu te dis : « Oh, puis-je les faire traverser à l'intérieur de cette grille ? C'est un peu comme une explication de bonus cred ici dans le cadre des formulaires, il y a une astuce secrète avec les grilles. Si vous cliquez sur l' objet à l'intérieur de la grille, peu importe ce que c' est, vous pouvez le faire glisser pour le dépenser vers l'option de grille. Cela nous causera un peu de peine lorsque nous passerons au mobile, mais nous pouvons y remédier. Ensuite, c'est un «  nous », c'est un bon point. Si j'ai pris mon téléphone parce que je suis en train de concevoir, quelque chose s'est mal passé, que je vais dans les paramètres et que je conçois mon urine normale en installant ce pot. Heureusement, tout ne revient pas à la même disposition. D'accord ? Il y a donc une newsletter ici. C'est une étiquette, mais contrairement aux étiquettes de champs, cette chose doit venir. Pouvez-vous voir le champ, ce champ de case à cocher, c'est une unité. Si vous en supprimez une partie, ça fait flipper un peu . Et je pourrais le laisser comme ça. n'y a rien de mal à cela. Mais si vous le voulez aussi à l' intérieur de la grille, je ne sais pas pourquoi je le donne à la grille. Je n'en ai pas besoin. OK. Maintenant , il fait partie du réseau. On y va. Mets-le dans le réseau. On y va. Et je vais juste laisser le bouton à l'extérieur. Sinon, je vais devoir les mettre dedans , en quelque sorte les faire entrer. Ensuite, il va falloir que je trouve ce type, qu'il se répande et qu'il le fasse tomber. Et puis ce type s' étend trop loin. Ensuite, je peux procéder à une sélection dans cette option de grille. Revenez aux paramètres de ma grille où un enfant arrêtait de faire des choses extensibles et passez sur le côté. Et si on voulait que celui-ci s' enfonce sur sa propre cellule ? Ces deux-là avaient du sens, ça avait du sens en soi, mais celui-ci a un peu pesé ici. Donc, ce que je peux faire, c'est simplement lancer un espace réservé. Je prends donc un tag div. Je vais donc refaire le tour de tout cela. La topographie laissera le joint fermé parce que nous ne le faisons pas. Gardez les formulaires ouverts. Très bien. suffit donc de le mettre dans une balise div. Où est-il là ? Il ne fait rien d'autre que de le garder ouvert et il est un peu haut maintenant et tu te dis : « Oh, la couche ne fonctionne pas ». Tu te souviens de ce qu'il fait quand on les prélève ? OK, il s'en va, il s'effondre. Il vient de s'ouvrir pour que nous puissions cliquer sur Webflow. Donc celui-ci n'a pas besoin d'espace réservé parce que ce type veut parcourir deux de ses cellules de formulaire pour que vous ne puissiez pas y entrer. Nous passons donc à la suivante. Ok, on travaille, on fait des trucs. Ce que je pourrais faire pour mon contact de section, je pourrais styliser ce contact de section et dire en fait l' espacement que je vais mettre des deux côtés. Maintenez la touche Option ou Alt enfoncée. On y va. Joli. Mes options de grille. Je veux être un peu plus grand. D'accord, à part cet étrange problème d' espacement qui s'est produit. Très bien, regardons la vue mobile et nous revenons simplement à la création de grilles. Rien à voir avec les formulaires maintenant. Mais autant le faire parce que ça a l'air bien, qu'il ne fonctionne pas sur celui-ci, mais qu'il est trop petit. Nous travaillons donc sur notre réseau. Cliquez donc sur la grille, entrez ici. Et je vais vous le montrer parce que ce type fait des choses amusantes parce qu'il couvre deux de mes chroniques. Donc, si je dis à ma mise en page pour ma grille, et que je dis en fait, il suffit d'une colonne. Pourquoi ne serais-tu pas une seule colonne ? C'est un peu fatiguant, mais il se bat contre ce type. Donc, ce que vous pouvez faire, c'est cliquer sur OK, sortir de là et partir, vous n'en faites qu'un sur ce point d'arrêt particulier. OK. Maintenant, je peux retourner dans mon réseau. Grille. Pourquoi ça ne marche pas ? J'en ai une. Vous y êtes tous. Ajoutez-en un autre. Passez à autre chose. Qu'est-ce qui s'étend sur tout le monde ? Je ne sais pas. Vous y attendez. Quelqu'un d'autre dépense à travers. J'ai trouvé une solution. Allez, cerveau. Ces gars-là étaient méchants, mais je l'ai fait tout à l'heure aussi. J'ai fait en sorte que la newsletter couvre deux d'entre eux. Ils ont beaucoup de succès. Très bien. Et ce truc ici, c' était une bonne place, R6, il est en bas maintenant sur une colline qui claque, non ? Jetons un coup d'œil. Il a donc terminé sur mobile, prévisualisons-le. Il est en train de s'effondrer, mais il s'en va un petit moment. Comment s'en débarrasser ? On peut dire que Toby est leur tablette, il est là parce qu'il est un bon espace réservé. Que quand on passe au téléphone horizontal en mode paysage, d' accord, je peux dire « affichez ce type », « Aucun ». Oh, nous avons du design. Maintenant, nous allons avoir un aperçu. Bien, j'espère que certaines de ces choses que nous avons faites plus tôt nous font savoir que cela fait longtemps propriétés d'affichage et toutes sortes de blocs en ligne. Une fois que vous aurez compris ces choses, qui sont assez faciles à utiliser mais plus difficiles à adapter si vous ne possédez pas certaines de ces compétences fondamentales, je me sens bien. J'espère que vous aussi. D'accord, la dernière chose que je veux faire est d'ajouter ma frappe. Tu peux sauter le pas maintenant, je vais juste jeter le coup dedans. Tu peux traîner si tu veux, et je le mettrai sur mon bureau. Commencez toujours par le bureau. Et je vais chercher ce qui n' était pas celui qui faisait tout ça. Je pense. Est-ce que je vais tricher et simplement le récupérer sur la page d'accueil ? Probablement. Oh, il y a beaucoup de style dessus, n'est-ce pas ? Est-ce que je le fais quand même ? Essayons de nous connecter. Mettez-le au bon endroit pour placer la section dans laquelle je voulais entrer et appuyer sur Coller. Ensuite, passe du mauvais côté, mets-le en haut. Et je ne veux pas utiliser ce style, alors je vais vous dire de vous débarrasser de cette classe. Et que voulions-nous dire ? Posez une question à Dan. Demandez. Puis Dan. Je veux cette balise span parce que ce n'est pas difficile à appliquer, mais elle va la coller dedans. Fais-le juste sur le long terme. OK. Alors Dan, question, et comment le dépensons-nous ? Tu te souviens, ça y est. Et pourquoi avons-nous dit « Nous avons dit texte, couleur secondaire ». Nous passons à la question standard selon laquelle nous voulions ce q minuscule et nous voulons une marge inférieure, ce que nous n'avons pas. Je ne pense pas que la marge soit en B, mais imaginez le bas. Donc, ce que je vais faire, c'est le jeter sur un bloc div. Et je dirais que tu es NB. Je suppose que j'ai probablement besoin de mon médium parce que mon média que je connais est peut-être le 81624. Donc très petit, petit, moyen. C'est logique. Ce sera donc le plus bas de la marge médiatique. Ça va être mes 24. Voyons si celui-ci fonctionne. Rien ne s'y applique. Je pourrais avoir un crédit pour créer ma classe mondiale ici parce qu' aucune autre classe ne s' y applique, mais nous l'avons fait maintenant. Fond moyen. Oui. Très bien. C'est le style de ma forme. Rien d'autre ? Non, c'est ça. Je te verrai dans la prochaine vidéo. 65. Types d'images dans le flux de Webflow SVG vs PNG vs JPG: Bonjour, mon ami. Nous allons voir quand JPEG un bon moyen en PNG est un bon, plutôt bon. Et nous allons voir quand les SVG sont incroyables dans Webflow. Si vous connaissez déjà les différences, vous pouvez y jeter un œil. Nous abordons certains aspects intéressants de l'exportation à partir de logiciels tels que Photoshop et Adobe Illustrator. Et nous parlons de leur taille. Mais si tu sais tout ça, tu peux l'ignorer. Je ne vais pas être fâchée, mais pour le reste d'entre nous, intervenons. Très bien, commençons par Jpeg. Je suis dans Photoshop. Vous n'avez pas besoin de Photoshop. Je vais juste te le montrer. fichiers JPEG sont donc parfaits pour quelque chose comme ça où il y a beaucoup de détails et où il n'y a aucune transparence. Ils peuvent devenir très petits et avoir une très belle apparence. Ils peuvent atteindre une très petite taille de fichier et avoir une très belle apparence. Quand allons-nous utiliser les PNG ? Si vous voulez jouer un rôle dans les fichiers d'exercices de votre portfolio. existe un appelé SVG, PNG JPEG. J'ai quelques exemples ici. Je vais donc l'ouvrir dans Photoshop. Et comme ça en soi, il devrait toujours s'agir d'un fichier JPEG BOD. Si je dis magie, renommez, supprimez l'arrière-plan. R. Si vous ne l'avez jamais fait auparavant, généralement à jour vos compétences dans Photoshop. Joignez-vous à moi pour mes bases de Photoshop et mon cours avancé, tableaux de vente croisée, peu importe, il y a un arrière-plan transparent. Maintenant, je vais ajuster ça. OK, Return. Et maintenant je l'exporte. Il faut que ce soit un PNG parce que j'ai besoin de le voir. J'ai besoin de sa nouveauté transparente. Et un fichier J peg ne vous permettra pas de le faire lorsque vous exportez à partir de quelque chose comme Photoshop, utilisez celui-ci. C'est la meilleure. Exporter sous forme fichier Exporter car vous n'utilisez plus Enregistrer pour le Web, d'accord ? Parce que cela a une meilleure exportation que ceux qui sont géniaux. Donc, JP. Vous pouvez voir qu'aucune transparence n'est très faible. Eh bien, mes images sont énormes. Dewpoint Three, probablement pas encore bon pour le Web, mais c'est passé au PNG. OK, et recherchez la transparence. Vous optez pour la transparence. Le compromis est la taille massive des fichiers. Donc, les fichiers JPEG, si vous pouvez vous en sortir, les PNG sont parfaits si vous avez besoin de transparence. Et si vous venez de quelque chose comme Photoshop et que vous exportez des choses, vous pouvez à ce stade décider que c'est beaucoup trop gros. Je vais le faire, nous en aurons besoin à 4 000. Vous pourriez décider que je n'en avais besoin que, peut-être 1 200, et obtenir une taille de fichier plus raisonnable, même si c'est assez gros. La limite pour intégrer Webflow à ces 4 Mo pour le moment, cela pourrait vous faire changer d'avis Si vous avez ces images géantes, devez effectuer quelques retouches vous devez effectuer quelques retouches avant de les importer dans Webflow. Encore une fois, même taille, 1 200, mais en JPEG, k passe d'un point à OK, en baisse de 2,3 Ko, enfin, 0,3 Mo. Ok, donc une fraction de la taille, ça va être superbe, mais pas de transparence. Donc JPEG pour les images détaillées qui n'ont pas besoin de transparence, PNG pour ce qu'elles font. Également lorsque vous exportez à partir de quelque chose comme Photoshop. Nous n'avons donc pas besoin de transparence. Nous le réduisons simplement à une petite taille, assurer qu'il est au moins le double de la taille dont vous avez besoin. La plupart des appareils tels que les navigateurs actuels et les téléphones auront besoin d' une résolution deux fois supérieure Ils l'appellent « haute résolution » ou je crois qu'Apple l' appelle Retina K. Donc, si je sais que j'ai besoin d' une largeur d'environ 800 pixels, je devrais vraiment l'exporter au format 1 600. Il a besoin de toute cette résolution supplémentaire pour bien apparaître sur ces écrans très sophistiqués. Vous pouvez le faire facilement ici dans Photoshop. Je peux donc le laisser à 200 et disons, ou à 800 et dire que j'aimerais une taille qui soit les deux. Peut-être que je n'ai même pas besoin que tu puisses en ajouter plus d'un, non ? Vous pouvez dire que je veux que ce soit une taille unique, peut-être que je veux qu'une taille soit le double de la taille également. Vous pouvez les exporter tous les deux, mais nous n'avons pas besoin d'un modèle unique. Et quand je l'exporterai maintenant, ce sera en fait 1 600. D'accord, les fichiers JPEG, PNG, PNG deviennent obscurs lorsque nous abordons des choses comme les logos. Passons donc à Illustrator. Il s'agit d'Adobe Illustrator. Si vous ne l'avez pas utilisé ou si vous souhaitez aller un peu plus loin. Je connais un gars qui a un cours de base et un cours avancé, juste pour dire, mais peu importe, c'est vraiment un bon moyen de vous montrer la comparaison entre PNG et SVG. Parce que ce que nous avons appris de Webflow, c'est que cela ne crée rien, que vous ne pouvez pas créer de logo dans Webflow, que vous pouvez essayer des balises div, ce sera compliqué. Vous devez donc le faire dans quelque chose comme Illustrator ou InDesign, ou Photoshop, Figma ou XD, quelque chose comme ça. OK. Et lorsque vous le faites, vous devez choisir une taille de fichier. Et lorsque vous le faites, vous devez choisir un type de fichier. Illustrator a donc un truc sympa sous Window, Asset Export. Assurez-vous qu'il est groupé. Tu peux le jeter ici, lui donner un nom. Si vous avez essayé d'exporter quelque chose depuis Illustrator et que vous essayez de faire en sorte que le canevas ait la même taille. Ce truc est une bouée de sauvetage. Ce sera mon logo pour ma thèse. Et en bas, comme dans Photoshop, nous pouvons dire en fait, est-ce que je veux que ce soit un JPEG ? Jetons un coup d'œil à J peg. OK. Jetons un coup d'œil à P&G. Souvenons-nous que Dan a dit qu'il doit être deux fois plus grand que moi, à cause de ces écrans haute résolution et de ces écrans rétine, ils sont beaux là-dessus. Et jetons un coup d'œil à la dernière, SVG. OK. Et avez-vous remarqué que tout cela avait disparu ? Pourquoi puis-je faire deux cuisinières ? Bon vieux graphique vectoriel évolutif. C'est ce qu'est le SVG, ce qui signifie qu'il peut être redimensionné à n'importe quelle taille. Donc, si vous avez quelque chose comme ça, Victor, formes simples ont besoin de transparence, passez simplement au format SVG, le PNG fonctionnera, mais le SVG peut être aussi grand ou aussi petit que vous le souhaitez. Je les ai donc tous les trois. Allons exporter. Je vais les mettre dans ce dossier de notre portfolio. Vous pouvez donc aussi y jeter un œil. Jetons un coup d'œil. Donc, on a créé ces deux dossiers, les deux semaines, d'accord ? Et ça va être intéressant. Le jpeg est assez gros et n'a aucune transparence. Ce PNG est beaucoup plus petit, ce qui est cool, et il a un fond transparent, ce qui signifie que je peux l'avoir par-dessus tout. Je te montrerai dans une seconde. Vous devez me faire confiance en toute transparence, mais la taille du fichier est plus petite, ce qui est génial. Mais qu'en est-il du SVG ? Comparons-les au fait que le SVG est encore plus petit, et intégrons-le dans Webflow. OK, je vais apporter ces deux-là. Je vais créer ma page d'accueil ici. Je vais avoir tout ce qu'il faut. Chaque fois que je crée Delez-moi aussi. Je crée ces petits cours Delete Me parce que je sais plus tard que je les ai juste utilisés pour un tutoriel, peut-être pour détruire quelqu'un, peut-être juste pour goûter à quelque chose. Je vais dire que l'arrière-plan sera une couleur. Je vais y ajouter ces deux images. J'ai donc ces deux-là. Regardons P&G. D'accord. Ça s'en vient bien. Mais ça arrive un peu flou. Ne vous inquiétez pas, je vais le copier et le coller, c' est si je le fais la moitié de la taille, vous verrez qu'il deviendra aussi croustillant. Ça va être difficile de voir une autre vidéo. Tu peux le voir ? OK. En fonction de la qualité de la vidéo qui vous parvient. Il arrive donc à cette taille, vous le réduisez d'au moins la moitié qu'il soit parfaitement clair sur ce moniteur sur lequel j'enregistre c'est pour un moniteur k haute résolution. La plupart des choses se passent de nos jours, donc ça doit être beau. Alors les PNG, qu'en est-il du SVG ? OK, alors allons-y et apportons celui-là. Et voici ma version SVG. Regarde, regarde-le. Il est d'une clarté cristalline. Regardez sa taille et la taille du fichier avec des tas plus petits, plus la taille du fichier est petite. Regardez comme il prend de l'ampleur, parce que c'est un vecteur et qu'ils peuvent être aussi grands que vous le souhaiteriez comme une montagne, tout en conservant de beaux bords nets. Donc, les images JPEG pour les images qui n' ont pas besoin de transparence seront souvent plus petites et de très bonne qualité, ont pas besoin de transparence seront souvent plus petites et comme Alfred Back. Maintenant, ce gars-là, si vous avez besoin d'une image détaillée qui a besoin de transparence, le PNG est la solution, car un SVG ne peut pas le faire. Cela ne peut pas fonctionner avec tous ces petits pixels. Elle a besoin d'une géométrie très simple. Toutes ces choses. Il a besoin de lignes et d'ancres, et c'est ce qu' il brille vraiment. Donc, si vous êtes dans cette situation, nœud PNG dit oui au SVG, car il devrait s' agir d'un autocollant pour pare-chocs. Et rapidement, aussi bien dans Figma que dans XD, si vous exportez quelque chose comme celui-ci, souvenez-vous ici où nous les exportons, assurez-vous que c'est de a à x k parce que vous voulez cette taille double , très bien, il s'agit d'examiner les différents formats de fichiers et la taille dont vous avez besoin pour les intégrer à Webflow afin qu'ils soient beaux et nets. Très bien, passons à la vidéo suivante. 66. Quelles sont les images Hi-DPI et réactives dans le flux Web: Bonjour à tous. Parlons de ce qu'est ce truc à haute résolution. Qu'est-ce que c'est que cette image responsive ? Qu'est-ce que cela fait ? Pourquoi Dan a-t-il trois tailles différentes ici ? Je suis vraiment enthousiasmé par celui-ci parce que si vous avez fait d'autres types de conception Web, c'était autrefois une chose très délicate, des images réactives, mais Webflow fait tout pour nous. Tellement bon. Laissez-moi vous montrer la bonté. Très bien, commençons par un truc à haute résolution. OK, donc je vais ajouter ce PNG que j'avais tout à l'heure. Souvenez-vous que nous l'avons apporté et que nous nous sommes rendu compte que si je le copie-colle et que je le crée, nous avons parlé de le réduire de moitié. La taille va être superbe. Un peu floue. La moitié de la taille est jolie. OK ? Ce que vous pouvez faire, c'est ignorer le pot qui traîne et, par exemple, obtenir un DPI élevé, ce ne sont que des coupes de la taille et la moitié étaient auparavant de 701. Maintenant c'est 351. Assez près. OK. Regarde ça. Si je le fais glisser, il explose. Tu peux l'agrandir. Ce n'est pas un DPI élevé, mais regardez ça. Il s' allumera automatiquement lorsque j'aurai atteint la bonne taille Pouvez-vous voir une résolution élevée ? Vous y allez un peu comme un indicateur visuel indiquant qu'il fait la moitié de la taille dont il a besoin. C'est plutôt beau sur ces écrans rétiniens. Et il y a des écrans à haute résolution. D'accord, donc c'est ce moment. Regardons les images réactives. Si vous venez d'un pays de conception Web ou de développement ou si vous êtes ingénieur logiciel, vous vous demandez peut-être à quoi cela fait des images ? OK ? Est-ce juste que si je donne une image géante, est-ce que cela la réduit à ce que je doive le faire ? Ce qui est cool avec Webflow c' est qu'il fait tout pour vous. Donc, ce que je vais faire, c'est te faire venir. n'est pas obligatoire, mais si vous voulez jouer seul dans ce sous-portfolio, SVG est celui-ci appelé exemple réactif. Amène-le. Et ce que je vais faire, c'est le mettre dans un div, j' ai besoin de le mettre dans un conteneur, ne peux pas le laisser traîner, sinon ça ne marchera pas. OK, et je vais y aller, et je vais dire, si tu entres, tu es énorme. Et si votre résolution est élevée, elle reste énorme. Même la moitié de la taille , il remplit l'écran. D'accord, oublions la résolution élevée, mais j'ai cette très, très grande version. OK, je vais le laisser là. Je vais les copier et les coller. J'en ai donc deux. C'est difficile à voir, mais j'ai deux versions. C'est le top ici. Je devrais même faire celui qui se trouve en dessous. Cliquez dessus et essayez de trouver le rouage. Je vais le faire très petit. Je vais dire que vous faites 100 pixels. Il existe une version commune. J'ai obtenu cette petite version, copier-coller. J'ai compris, je vais le faire glisser pour passer à la version plus grande. Copiez-le et collez-le à nouveau. Une grande aversion. Être replacé, vision plus grande. OK, donc toutes ces tailles différentes, cool avec Webflow, c' est que je pense que c'est pendant la publication parce que vous ne pouvez pas prévisualiser et faire en sorte que cela fonctionne. Vous devez réellement publier le site. Voyons voir si cela fonctionne. Ok, en tout cas, j' ai une version plus grande. Alors sauvegardons celui-ci. Je fais juste un clic droit dans mon navigateur. Je vais le sauvegarder ici. Je vais les enregistrer. Vous pouvez donc jeter un œil à cette version gigantesque qui faisait 3 Mo. Il y a cette version, sauf sous, je vais enregistrer celle-là aussi. Enregistrez sous forme de clic droit, enregistrez également. se trouve que j'ai jeté un œil à Webflow. Il disait la grande version géante. Ou est-ce qu'on peut le voir ? On y va. Il s'agit toujours de 3 Mo. Je ne l'ai pas touché, ne vous joignez à rien parce que nous ne lui avons pas donné de taille je dirais simplement d'y aller. Il s'agit donc de la version grande, mais ensuite de la version plus petite. OK. Eh bien, c'est où ? Oui. Celui-ci dit que je suis le réduit. Ok, il y a une version de 1 600 pixels, il y a une version 1081, il y a une version de 500. Et en fait, ces deux derniers, je pense que 500, c'est le plus petit, ça y arrivera. Donc, en fait, il n'en a reçu que deux. Ce sont ces deux-là. OK, donc c'est plutôt intelligent. Vous n'avez rien à faire, il suffit télécharger votre version volumineuse tant qu' elle est inférieure à 4 Mo. Et Webflow ne se contentera pas réduire les boîtes de conserve de taille physique, il utilisera également une certaine compression d'image pour la réduire. Et c'est plutôt bon, plutôt intelligent. Et comme si vous pouviez essayer de les réduire à nouveau avant de les intégrer Webflow, faites quelques expériences. Je trouve que la compression qu'ils utilisent semble bonne. La taille du fichier est très petite, cela dépend du flux de travail. Si tu te demandes ce que c'est que tout ça, bordel ? Ce qu'il faut savoir c'est qu'il n'est pas nécessaire de savoir quoi que ce soit. Il suffit d'apporter des images tant qu'elles ne dépassent pas 4 Mo. Et le flux de largeur les réduira à la bonne taille plutôt que d'essayer de les charger. Sinon, il va essayer de charger ce fichier de trois mégaoctets et de le réduire à sa taille. Il gaspille donc beaucoup de données, n'a pas besoin de 3 Mo de données. Et la qualité signifie simplement que cette version, si vous avez suivi mon cours sur les bases du Web, nous en apprendrons davantage sur le code. Nous avons juste passé beaucoup de temps à essayer de trouver comment changer les images ou les différents points de rupture. Et parce que c'est l' autre point également, c' est que s'il affiche cela sur le bureau, mais qu'il fait froid sur un téléphone portable, il peut être beaucoup plus petit. Donc, ne cherchez que celui de 500 pixels, pas celui-ci rejoint presque un, que vous pourriez avoir beau et grand sur le bureau, mais petit sur le flux de la cabine de téléphonie mobile injecte juste un peu le droit le code de l'appareil peut appeler l'image de la bonne taille. Il a besoin d'être très pratique. Un petit bonus pour arriver au bout se trouve dans Webflow, un peu avec les images sur le panneau des ressources. Il peut y avoir un peu de monde ici. C'est quoi ça ? Vous pouvez en fait juste celui-ci ici, l'agrandir, obtenir un beau et gros foin et vous pouvez décider de les réduire un peu, les rendre minuscules avec la liste, me montrer les images que j'ai les documents ne contiennent aucun document ou fichier. Revenons à l'ensemble des actifs. Vous pouvez chercher, me montrer tout ce qui est un de ces clichés que nous détesterions et vous pouvez les traîner ici. Vous pouvez les commander. Tu peux dire de me montrer le plus vieux qui est arrivé en premier. Montrez-moi ensuite par ordre alphanumérique, puis sélectionnez-les toutes. Supprimez-les de partout. Passionnant. Nous allons donc récupérer cela dans leur bonus pour les personnes qui ont réussi jusqu'au bout. C'est bon, c'est ça. Passons à la vidéo suivante. 67. Comment recadrer des images dans le Webflow à l'aide de l'ajustement de l'objet: Bonjour. Dans cette vidéo, je vais prendre notre image rectangulaire et forcer à prendre une certaine taille, un rectangle plus haut. Ensuite, je vais le mettre en cercle. J'aurais probablement dû le faire plus tôt. Bref. Laissez-moi vous montrer comment recadrer des images dans Webflow. La première chose que je vais dire, c' est que si vous avez la possibilité de recadrer des éléments dans, exemple, dans Photoshop, faites-le parce que si vous recadrez beaucoup, cela signifie simplement qu'il y a, la taille du fichier est élevée. Ce n'est pas nécessaire, mais il existe de nombreux cas d'utilisation où il doit être recadré ici, Webflow. Je vais me débarrasser de ce type et apporter une image rectangulaire. Je vais utiliser celui que nous avons utilisé plus tôt. Si la tienne est bloquée comme moi, je me demande : « Où est mon image ? » Je vais clarifier ça. OK, et je vais retourner au réseau parce que j'aime ça. Et je vais apporter celui-ci ici, clairement rectangulaire. J'ai besoin que ce soit carré. Que dois-je faire ? Ensuite, cela doit être dans une classe, mais je peux le contrôler avec k. Je vais donc appeler celui-ci mon héros de l'image. Je ne vais pas utiliser celui-ci parce que j'ai déjà en quelque sorte fait marche arrière, je l'ai annulé et je l'ai utilisé. Je l'utilise déjà pour les coins arrondis. Je vais donc appeler cela une image. voici deux, très intelligents. Et je vais lui donner une taille et une largeur. Donc je dirais la taille, vous faites des minimums et des maximums. Nous allons dire que vous êtes exactement comme quelque chose qui s'intègre ici. Je vais vous dire 200 x 200. OK ? Et elle l'a écrasée, ce avec quoi nous ne pouvons pas vivre. Donc ce que nous disons, c'est que cette option s'appelle s'asseoir. Nous disons donc que l' objet ne le remplit pas, c' est-à-dire qu'il essaie de remplir la hauteur et la largeur, il suffit de le recouvrir. Il est coupé en haut et en bas si je le fais assez large. Donc, je vais maintenir la touche Option sur un Mac, la touche Alt sur un PC et je la fais glisser de cette façon ou dans la largeur du chemin, puis vous dites que je l'élargis. Pouvez-vous voir qu'il essaiera de tout couvrir, mais il perd une grande partie du haut et du bas. Cela dépend donc de ce que vous devez faire. N'oubliez pas qu'ils descendent en bas avant les transformer en symboles. Nous aurions dû passer cette journée au lit. Mais maintenant, tu sais, je voulais être parfaitement carré. Encore une fois, je vais faire 200 par deux. Ça fait 2 200 sur 200. Et maintenant je peux ajouter ma bordure, faire arrondir un peu et en faire 200. Il fait donc tout le tour car il se trouve à l'intérieur de la grille. C'est un enfant formidable. Je peux dire que vous l'avez envoyé et que vous l'avez ensuite fritté de cette façon. Joli. Nous allons également devoir l'ajuster aux différentes tailles. Cela fonctionne très bien. Cela fonctionne. Je veux qu'il soit plus grand. Je ne veux pas le déplacer. Vous pouvez donc passer en revue et dire qu'en fait, sur cette taille, c'est de la manana, 500 par 500. OK. Et vous pouvez y voir des angles arrondis à des centaines, pas assez. Allons-y. 300. Neo devient un peu ridicule quand on l'éteint. Mais l'idée, c'est que vous pouvez l' ajuster tant qu'ils ont une classe autour de cela. Vous pouvez ajuster les différents points d'arrêt. Et l'astuce, c'est le placer juste pour le couvrir. Vous pouvez le forcer à prendre la taille de votre choix. C'est bon, c'est ça. Je te verrai dans la prochaine vidéo. 68. Ce qui est la charge paresseux dans Webflow: Bonjour à tous. Nous allons examiner cette option ici. Que signifie le paresseux ? Qu'est-ce que c'est que d'être IGA, tout sera révélé. D'accord, donc le chargement différé est activé par défaut dans Webflow, d'accord, j'ai trouvé une image, j'ai cliqué sur le rouage et il est écrit ici, charger. Enfin, le contraire est chargé avec empressement, noms très cool, tant d'autres parties de conception Web ou affiche, je ne sais pas, un bloc ou un bloc en ligne ou un identifiant de classe div zero, noms terribles, paresseux et IGA. C'est logique. Ok , ça veut juste dire ça, et j'en ai fait une version très longue. C'est vraiment difficile, je dois juste le décrire. En gros, ce qui se passe, c'est que lorsque le site Web est chargé, il chargera celui-ci parce que je peux le voir. Il chargera les pointes de celles-ci où il chargera toutes ces images, ces trois-là , parce que je peux les voir. Il ne chargera aucun de ces autres car il ne peut pas le voir. Ce n'est pas dans la fenêtre d'affichage. Donc paresseux signifie simplement que je vais charger celles que je peux voir, mais je ne vais pas faire les autres parce que je suis paresseuse. Pourquoi est-ce bon ? Cela signifie simplement que la page se charge très rapidement. Google va donc regarder cette page, regarder les facettes qui se chargent lorsque la personne y arrive et pendant que le défilement, il peut être pressé d' essayer de rattraper le retard et de charger les images. Cela peut être comme si vous pouviez le forcer à dire ces images ici, je ne veux pas entrer dans mon symbole, je peux toujours voir le COG. Et je peux dire que je veux que tout le monde soit impatient. Vous pouvez le faire pour cela, pour chacun d'entre eux, à condition de le faire à la classe. OK. Il aimera tout autant ces choses. Je ne sais pas pourquoi vous le feriez, vous pouvez le régler par défaut. Vous pouvez donc dire qu'il suffit de laisser le navigateur décider. Et je pense que dans Google Chrome, la valeur par défaut est le chargement différé. Je ne sais pas pour les autres navigateurs, mais voilà. C'est juste une chose intéressante. Je sais que vous allez demander à ce type ici de ne pas se charger paresseusement parce qu'il a vu d'abord, il va, il chargera tout de suite, mais tous ses potes en bas, nous attendrons qu'ils soient bons et vraiment des images paresseuses qui ne fonctionnent que sur les images. J'ai reçu un texte de chargement différé. C'est bon, c'est ça. Passons facilement à la vidéo suivante, dendritique, danger de lit. 69. Comment changer le favicon dans le flux Web: Bonjour à tous. Dans cette vidéo, nous allons regarder ces petits bonshommes en haut ici. Il y a un favicon. Nous allons mettre à jour le nôtre avec cet emoji bizarre , comme Little l'a fait. Tout simplement parce que je vais vous montrer où le faire et quelles sont les règles. Allons-y, d'accord, pour trouver le favicon d'un projet, tu dois aller dans les paramètres du projet. Je suis donc sur mon portfolio et c'est juste dans ce premier onglet général. Vous l'avez probablement vu. C'est probablement pour cela que vous avez cherché sur Google, que fait le favicon ? C'est cette icône là-haut. Tu peux voir le favicon de Figma ? Est-ce que ce petit bonhomme, un peu s'il flotte, que vous voulez créer vous-même. Le problème, c'est qu'il ne suffira pas pour vous. Vous devez télécharger quelque chose qui mesure exactement 32 pixels par 32 pixels. Ça doit être n'importe lequel de ces petits gars. Ce ne peut pas être un SVG, même si c'est de bonne qualité. Ce sera probablement un PNG parce que vous voulez peut-être de la transparence. Celui-ci n'a pas besoin transparence car il s'agit d'un carré plein. C'est un petit rectangle, mais c'est un carré plein. Il existe donc de nombreux créateurs d'icônes de favicon en ligne. J'utilise Photoshop et je n'ai fait que créer un fichier de 32 x 32 pixels. Assurez-vous que c'est RGB. Cliquez sur Créer. Ensuite, j'ai simplement copié et collé des graphismes sur lesquels je travaillais pour autre chose. OK. Je travaillais sur des choses coûteuses de toute façon. Donc oui, mets-le dedans. C'est tout petit. C'est nul. La qualité est terrible, mais Ernie doit être assez petit. D'accord, alors quand vous l'exportez sur un, au moins Photoshop, vous pouvez l'exporter au format PNG, donc vous obtenez cette transparence, accord, et vous l'exportez. Donc ça ne peut pas être 32, ça ne peut pas être 31 par 30 pour le compte B, 33 par trois, c'est très strict. Donc, une fois que vous l'avez, vous pouvez le télécharger. J'en ai quelques-uns. J'ai ces deux-là dans tes dossiers d'exercices, si tu les veux. Je vais télécharger dans mon portfolio, dans les fichiers d' exercices, ce favicon, je vais renommer en un par seconde. Mais vous voulez en choisir un, cliquez sur Ouvrir et attendez. Une fois déjà mis à jour, je n'ai même pas eu besoin de cliquer sur Enregistrer les modifications Maintenant, comment allez-vous le voir chez le designer ? Tu ne vas pas le voir regarder. Ce sera toujours Webflow. En avant-première. Ça ne s'affichera toujours pas. Vous devez donc publier le site. Je vais le publier. Je vais le voir et me préparer. Parce que le nouveau favicon, évidemment squelettique, contenait des emoji, probablement pas adaptés à mon portfolio. Mais bon, tu choisis ce que tu veux. L'égalité, c'est terrible. Vous pouvez utiliser des couleurs. La seule chose qui se produit avec le favicon, si vous le mettez à jour, il se charge parfois, le navigateur conserve le favicon et ne le modifie pas. Donc, parfois, si vous allez le mettre à jour ici dans le flux de travail, il se mettra à jour. Mais parfois, le navigateur doit l'être, vous devez vider la cage, être en mode privé, quelque chose parce que parfois il conserve ce favicon trop longtemps et qu'il ne se met pas à jour. Même si vous l'avez mis à jour. Il stocke simplement l'aversion ne la montre pas et ne va pas chercher la nouvelle icône très souvent car qui met à jour le favicon très souvent, il montre un designer et vous faites tout il est temps d'essayer d'obtenir un pixel parfait là-dedans. Très bien, quelques inconvénients dans Webflow. 70. Bâton de pied à bas dans le Webflow: Bonjour tout le monde. C'est mon pied de page. C'était bien sur les autres pages, mais sur cette page, parce que c'est vraiment court, reste en haut de la page. Je veux que tu t'en tenes au fond de l'affaire Deborah. Très bien, nous l'avons déjà fait. Il suffit de réutiliser une compétence familière. Laissez-moi vous montrer comment procéder. Tout d'abord, ce n'est pas la même chose que la frappe que nous avons faite. Nous l'avons rendu collant avec cette position. OK. Cela lui a fait travailler le pied. C'est légèrement différent et nous l'avons déjà fait auparavant. Nous l'avons fait ici. D'accord, souvenez-vous que ce double-clic pour entrer dans mon symbole m' a permis de pousser vers le bas sur toutes ces tailles différentes. OK. Nous avons créé la Flexbox mère et nous avons créé l'enfant. Nous avions une marge en haut de la commande. Ce que nous allons refaire, mais encore une fois, c'est le parent qui sera le body tag et le pied de page qui va pousser depuis le haut en utilisant l'ordre. Allons-y. Je vais y aller, ça ne sert à rien de le faire sur cette page parce que ça va être forcé vers le bas. Il est très pratique de le voir en action lorsque vous êtes sur la page Portfolio. Comme si j'ajoutais un pied de page ici, ton pied de page. Il est collé en haut car il ne s'agit pas d'un contenu sur la page. Il se peut que nous ayons déjà une courte page. Je vais donc ajouter un style super basique. Nous allons donc le mettre dans quelque chose appelé section, et je vais le mettre dans le pied de page de la section. Mais en fait, ce n'est pas le cas, ça vient du fait que je l'ai déjà enregistré une fois et que ça a mal tourné. Je vais vous montrer comment en supprimer un dont vous n'avez plus besoin. OK, donc j'ai revu mes styles. Je l'ai trouvé en le cherchant et je vais le plier. OK, j'ai oublié de te dire quelque chose dans le premier sujet de cette vidéo, donc je recommence. revenus là où nous étions. Je vais créer une classe pour celle-ci appelée section. Et je vais juste ajouter deux choses. Je vais sur Option ou Alt, cliquez sur les chevrons pour le fermer. Je vais dire que le contexte est cette ardoise. Et je vais lui donner une taille minimale de peut-être 100. Cool, comment le mettre au fond ? La première chose, c'est que ça doit être parce que nous fabriquons le corps. Ce sera le parent. OK. C'est l'enfant. Je ne peux pas cacher cela dans aucune de ces autres balises div. Je ne peux pas le placer à l'intérieur d' une section à l'intérieur d'un récipient qui doit être parallèle au corps pour que cela fonctionne. Ok, donc quand je dis en parallèle, ça doit être comme un pas en avant. Le parent est l' enfant qui erre dans le corps a besoin d'être changé. Maintenant, je veux que cela se produise sur toutes les pages. Donc je ne veux pas le faire juste à ce corps parce que si j'entre et que je le change pour qu'il surveille ici, si je le change, il dit : «  Hé, crée une classe appelée body two ». Ensuite, vous devrez accéder à chaque page et l'appliquer. Donc ce que je veux faire, c'est revenir ici et dire Buddy, clique ici. Je veux que toutes les pages de mes anciens amis soient mises à jour avec Flexbox. Vous voulez dire que la direction est verticale, puis elle revient à ce qu'elle était. Maintenant, je peux dire que toi, mon ami, mon enfant de mon flex, c'est bizarre. Nous pouvons passer à Spacing et nous pouvons dire que le haut est automatique. Nous l'avons fait. C'est à peu près ça. Je vais passer en revue maintenant et personnaliser ma photo. Tu peux traîner et me regarder en train de créer un pied de page, être trié au début. Ce n'est pas particulièrement chic. Vous pouvez être renvoyé. Sinon, traînez. Je vais en faire un symbole et le mettre sur toutes les pages. D'accord, donc ce que je veux, c'est que je ne veux pas le mettre dans un conteneur, un Keegan, et je veux mettre un lien texte. Je vais juste en faire une toute simple. Je vais placer ce lien texte dans un éditeur de texte. Ok, ça prend, qu' est-ce que ça a du sens ? Oui, je sais que la topographie va être blanche. Je vais le relier quelque part. D'accord, mais je vais d'abord changer le texte. OK, donc j'ai un texto. Je ne vais pas m' inquiéter de le centrer pour l' instant. Nous ajoutons le lien. En fait, j'ai envie de le faire, il s'agit de le styliser. Pour que je puisse pousser le tableau vers le bas. Je peux jouer avec les marges. En fait, je vais vous montrer un autre moyen parce que le moyen le plus simple, eh bien, le nôtre est de saisir le contenant. J'ai dit, ne fabriquez pas le contenant de Flexbox. Est-ce que ça va marcher ? Faisons un chèque que vous avez centré et l' enverra-t-il de cette façon ? Ce que vous faites, c'est pourquoi nous ne le faisons pas. OK. Donc je vais mettre ça dans l'impasse et y mettre tout ça. OK, voici mon texte et mon bloc récapitulatif. Ce n'est pas dans mon contenant. On y va. Non, ça ne l'est pas. On y va. Maintenant, je peux dire que diblock, accord, va s'appeler div. Division. Tellement de pieds de page. Et je vais dire que tu es flexible. Vous allez être centré et vous allez être centré là-dedans. Oh, ça ne marche toujours pas. Oh, je sais pourquoi. Sais-tu pourquoi ? Pause. Pense pourquoi ? Pourquoi est-ce que je peux le voir là ? Tu peux le voir courir sur mes yeux. n'y a pas de hauteur. La hauteur provient de la section. Un ***** du conteneur se serait très bien converti si je lui avais donné la hauteur. Donc je vais dire que je vais me débarrasser de celui-ci. Cela a donc une hauteur minimale de 100. Je vais l'effacer en maintenant touche Option ou la touche Alt enfoncée sur un PC. Et je vais te le donner. Vous allez avoir la taille minimale. Maintenant, c'est dans le pré ou une entreprise de conception Web de danse super incroyable sait un peu ce qu'il fait. Elle est bien trop grande. Ils sont en flèche vers le bas. On y va. Très bien. Je vais en faire, je vais en faire un symbole. C'est ce que nous allons faire. Vous pouvez cliquer dessus avec le bouton droit de la souris et le transformer en symbole à partir duquel vous pouvez accéder au panneau Symboles et dire Créer un symbole. Ce sera mon pied de page. J'en ai déjà un . Je ne le sais pas. Regarde mes symboles, non. Bien, il n'y a qu'un seul exemple sur cette page. Mettons-le sur toutes les pages. Je vais donc le copier. Passons aux pages. Il y a une page d'accueil et faites défiler la page vers le bas. Passons à mes symboles. Ajusteur. Cela peut être difficile à ajouter. C'est fait le fond. Joli. Mais bien sûr, comme c'est un symbole, je peux y aller, le changer et dire qu'en fait, nous ne sommes pas des TTY comme l'Australie. Nous sommes limités comme la Nouvelle-Zélande ou .co. Je ne sais pas ce que c'est, mais cela signifie qu'il sera mis à jour sur les autres pages comme celle-ci. La voici : .co, l'entreprise. Et nous allons le parcourir et l'ajouter à toutes les autres pages. Je vais t'épargner ça parce que tu l'as vu. Très bien, c'est comme ça que votre pied de page soit collant. Collez-le en bas. Vous utilisez réellement la flexbox et vous utilisez l'enfant pour qu'il soit commandé en haut, c'est étrange mais vrai. Très bien, passons à la vidéo suivante. 71. Comment créer une animation de chargement de page dans Webflow: Bonjour tout le monde. Dans cette vidéo, nous allons faire une animation de chargement de page. Nous pouvons faire apparaître ce texte lors du chargement de la page. OK, donc la page se charge qui apparaît. Nous allons couvrir ce panneau d'interactions. Nous allons examiner l'assouplissement. Et nous allons créer notre première animation personnalisée, sans utiliser certains préréglages. Très bien, allons-y. OK, donc pour la section suivante consacrée à l'indirection et aux animations, j'ai créé un tout nouveau site juste pour le séparer de notre portfolio et du site Web du club que nous avons créé. Juste pour que les choses restent claires, pour être en mesure de voir ce que nous faisons sans 1 000 cours. Mais bien sûr, cela peut fonctionner dans ceux-ci. Donc, ce que j'ai fait ici, c'est que j'ai édité l'arrière-plan. J'ai ajouté un navigateur simplement parce que conteneur est animé et la section Harris, qui est juste la structure normale du site. Je pense que je regrette déjà le dégradé. C'est tout à fait un effet sur les yeux. Il y a donc un logo. Donc, pour commencer, c'est assez pratique , parce que nous ne voulons pas vraiment trop styliser la section et y coller ce diblock. Et il ne fait rien si ce n'est qu'il va accepter les choses que nous allons animer. Vous pouvez animer n'importe quoi, une image, un bouton, des listes. Je vais apporter juste des blocs de texte, comme un peu le début. Celui-ci va faire froid. Danse. Et puis j'en aurai un autre, quelques portefeuilles pour 30 personnes. Très bien, je vais les coiffer très rapidement. Je crée mes propres cours. C'est donc très important. Ainsi, vous n' animez pas réellement l'élément, vous éliminez la classe que vous lui appliquez. Donc, juste ce que vous voulez animer et auquel vous allez ajouter une classe. Et vous remarquerez que j'ai mis deux zones de texte distinctes Ce n'est pas difficile de les animer ou si elles se trouvent toutes dans la même zone de texte parce que je voulais elles s'animent séparément. Donc, vous allez être appelé texte , puis utilisez peut-être des majuscules juste pour le rendre plus clair afin que vous puissiez voir ce que je fais. Le panneau d'animation est un peu, un peu délicat. Eh bien, non, mais ça l'est, il le faut, et ce sera un gros portefeuille. Très bien, donc j' ai ces deux-là, donc je vais animer ces deux cours. Comment puis-je le faire ? En fait, je vais les coiffer très rapidement. Vous y attendez. Très bien, je les ai coiffés. Vous n'êtes pas obligé de les animer tous les deux. Vous pouvez les animer de n'importe quelle façon pour commencer Avez-vous sélectionné votre classe pour l'étendre ? On va aller voir le petit éclair ici. Et celui-ci va être un déclencheur de page au moment du poids. Plus tôt dans le cours, nous avons fait Ellen and Triggers et nous allons faire plein de choses. Vous finirez par avoir beaucoup plus de déclencheurs d'éléments. Nous utilisons un déclencheur de page juste pour vous montrer ce qu'elle fait et il est approprié ici que nous voulons quand la page est chargée, car regardez ceci. Si je passe au déclencheur de page, il y a un déclencheur vraiment cool. C'est à ce moment que la page se charge. Tellement sain. Tu dois un peu lire ça. Je l'ai lu parce que c'est le cas, je trouve cela délicat. Et si je trouve une chose délicate, tu la trouveras délicate. Ils sont très explicites sur ce que vous devez faire et c'est plutôt bien si vous les lisez. Lorsque la page se charge, sélectionnez une action, nous n'avons pas d'action. Nous allons commencer notre première action personnalisée avant d' utiliser une action prédéfinie. Nous avons donc lancé une action, lancé une animation pour qu'une nouvelle, mais que nous n'en avons toujours pas, aille vraiment à une sorte de création. Nous devons maintenant ajouter à cette période l'animation. Nous allons vous dire d'en ajouter deux ici. Et ce truc de p va lui donner un nom. Nous allons l'appeler ici une animation textuelle. Et nous allons y ajouter quelques éléments avec votre classe. Maintenant, comme vous auriez pu en arriver là sans rien avoir sélectionné, vous devez vous assurer que votre classe est terminée. Parce que ce que ça fait, c'est que je vais bouger. Vous pouvez faire n'importe lequel d'entre eux. Je ferais un geste. Pouvez-vous le voir amené par le texte du nom de classe par lequel Dan Capital et l' a acheté. Et chaque fois que vous faites des animations, gardez un œil sur ces gars. Ils sont très utiles. D'accord, cela indique que cette action de déplacement n'a pas de valeur. Ok, alors fais-le. Donc, ce que je vais dire, c'est que j'aimerais le déplacer et vous pouvez le voir apparaître tout en bas ici. Ignorez le timing pour le moment. Regardons simplement cette action ici. Regardons les paramètres ci-dessous et vous pouvez voir X, Y et Z. Cela ne me dérangera pas de parcourir les miens assez loin. Je vais donc m'en tenir à des lois qui semblent un peu sortir de zéro. Mais peu importe, appuyez sur Play, ce n'est pas la bonne solution. Cela arrive donc souvent. Donc ce que tu dis, c'est à zéro K ici, je veux que ce soit en bas. En fait, je veux que ce soit l'état initial. Je ne veux pas y aller. Je veux que ça commence ici. C'est donc l'état initial. Le problème maintenant, c'est qu' il n'y a pas d'autre état. D'accord, vous devez donc dire qu'il faut ajouter une autre action toujours avec une action sélectionnée. C'est drôle comme si vous pouviez animer 1 million de choses différentes ici. En cliquant dessus, vous vous assurez simplement de la chose que vous souhaitez animer, d'accord ? Je souhaite y ajouter une action. Je veux faire un autre mouvement. OK, et que dit cette décision ? Il revient à 0 et le remet à zéro. Vous pouvez voir qu'il est écrit zéro. Ça y est. Pourquoi il est écrit zéro. Vous avez vraiment fait passer le saké à zéro, s'il vous plaît. Donc, il regarde celui-ci en premier, d'accord ? Celui-ci est réglé sur, l'initiale est réglée sur, je le mets sur 234. Ensuite, l'autre est mis à zéro. Ensuite, on va chercher son assiette. Hey, nous animons. Ignorez ce truc. Je trouve cela très délicat. Et cela se passe réellement sur 5 s. Comment savoir si c'est la durée là-bas ? Donc, ce top 1 perd tout ce timing parce que j'ai dit être l'état initial, donc ça ne sert à rien. Le second, cependant, contient beaucoup d'informations. Les deux déplacent les deux pour le texte. Celui-ci dit : Oh, je veux que la durée soit de 5 s. Je suppose que ce serait à 5 s. Je ne sais pas pourquoi ce n'est pas le cas. Donc je ne vois même pas que ce sont des protéines, elles n'existent pas. Ils peuvent le changer. Cela a changé cette interface utilisateur ici, cette option ici, se charge pour essayer de l'améliorer. D'accord, donc ça va un peu augmenter. Avant de passer à la seconde, examinons quelques points. Souvenez-vous de cette première option ici, l'état initial n'a pas beaucoup d'options. La seconde pour les malades est savoir combien de temps cela va-t-il prendre 1 s, appuyons sur Play. Cela prend plus de temps qu'autrement. Mais le meilleur, c'est ce truc ici. L'assouplissement, l'assouplissement est lié au moment, c'est assez linéaire, non ? Eh bien, c'est linéaire, ça devient ennuyeux. Animation Powerpoint. Eh bien, je veux que première chose la plus agréable soit probablement d'entrer et de sortir facilement. Ça va aller lentement au début, lentement à la fin, comme dans la vraie vie, mais la gravité, la friction, je ne sais pas, il se passe quelque chose qui va vite au milieu, a ralenti le début et la fin . beaucoup mieux. Il y en a de très jolis. Ça va dépendre. Des esprits qui viennent du bas. Le tien vient peut-être d'en haut. Voyons donc souvent ne pas utiliser la facilité d'entrée et de sortie. J'utiliserai In-N-Out ensemble. OK, quelqu'un qui est à la fois. Donc, si je dois dire facilité d'entrée, en fait sauté pour rebondir, le rebond fonctionne de cette façon. See Bounce ne fonctionne pas parce que ça vient, il venait du haut rebond avec so work. Mais parce que ça vient de dessous, ça peut te plaire, mais c'est un peu bizarre, non ? C'est le texte anti-gravité. Cela dépendra donc de la façon dont vous le faites. Donc ce que je veux faire, c'est que j' aimerais que celui-ci soit plutôt beau. N'oubliez donc pas que toutes ces entrées et sorties peuvent être très bonnes. Dans une boîte d'envoi. Très belle pièce. Voyez-vous qu'il s'en va, va un peu dans le sens inverse il va un peu dans le sens inverse avant de suivre le chemin de Ford. Ça s'appelle l'anticipation. Ça va un peu en arrière puis en haut. C'est plutôt sympa. Et la durée joue un rôle important à cet égard. Et la façon dont ça a l'air, ça a l'air un peu stupide. Et ce 2 s semble bien trop long. Il y a donc beaucoup de choses à jouer avec elle. Mais disons cela, disons 2 secondes, mais il le fait pour l'un de ces autres. Parfois c'est possible, nous sommes parfaits pendant 2 secondes car il se passe beaucoup plus de choses. Passons à l'élastique. Vous voyez que 2 s est en fait très bien pour l'élastique. D'accord ? Donc, tout d'abord, beaucoup d'options. Durée du deuxième mois d'assouplissement, jouez avec les différents. Bounce Past est plutôt cool. Il y a celui-là. C'est celui qui vient du sol. C'est un peu, un peu levé et sautant par-dessus. Mais les durées sont trop longues, donc je vais m'en tenir là. C'est plutôt cool. Très bien, alors laissons-le là pour le moment. Appuyons sur Enregistrer si vous en êtes sorti. D'accord, disons que vous en êtes sorti et que vous voulez vous y remettre, d'accord ? Vous ne faites rien, avez pas à cliquer sur quoi que ce soit car il s'agit d'une animation de page ou de déclencheurs de page. Vous allez donc entendre tous les déclencheurs de votre page. Une partie de la page, pas une partie d'un quelconque élément. Vous n'êtes pas obligé de cliquer dessus au préalable. Donc je peux dire que tu es un vieux truc. OK, c'est par là que nous avons commencé, mais nous avons ajouté une animation. OK, nous avons ajouté la sienne. Nous l'avons appelé texte de héros. Nous l'avons nommé en quelque sorte dans cette partie. Pour y retourner. N'oubliez pas de lancer le chargement de la page, et c'est là que la magie opère ici. Vous pouvez le prévisualiser ici. Je peux aller à celui-ci et dire, est-ce que je le fais à la première ? OK, il ne se passe pas grand-chose ici. Mais pour la seconde, je peux dire qu'en fait, j'aimerais bien, je n'aime plus la passe rebondissante. Je pense que j'aime bien celui qui est élastique. Cela doit être plus long. Bien, encore une fois, je vais le sauver. Vous pouvez simplement le prévisualiser ici ou simplement passer à votre mode de prévisualisation. Il sera prévisualisé. La prochaine chose que je veux faire avant de commencer à animer la seconde, c'est que j'ai beaucoup aimé quand elle est arrivée, comme sauter du sol plutôt que de la voir en bas. En fait, faisons d' abord un Pasadena parce qu'avant de le couper, et parce que c' est utile à voir en action, je vais aller ici et le mettre à l'intérieur, et vous ne le faites pas séparément, ils vont tous ici. Nous allons donc animer le texte et encore une fois, mais pour jouer avec l'opacité. Et en gros, il répète cela. Et cela va faire ressortir des choses intéressantes. Je vais donc appuyer sur Plus, accord, je veux que celui-ci soit opacité. Je veux de l'opacité. N'oubliez pas qu'il apparaît juste en bas ici. Le mouvement par paires est nul. Mais je veux que ce soit l'état initial. Il va commencer à avoir une opacité complètement transparente à zéro. Super, cliquez sur Play. Rien ne va se passer parce que nous ne pouvons pas le voir. C'est en train de le faire. Nous ne pouvons tout simplement pas le voir. Il nous en faut un deuxième, je vais te le voir, j'en veux un autre, l'opacité. Et je veux cette opacité. Un gros truc avec ça est de regarder, de voir 100 comme la taille et ça marchera probablement. Ok, ça marche un peu. Il est préférable de vous assurer que vous êtes vraiment explicite. Dites-le, je veux que ce soit 100. OK. Et jusqu'où je veux qu'il soit au bout d'une demi-seconde. Et regarde ce que ça va faire. Que je vais d'abord faire Opacity , puis faire ce que vous voulez. OK, je ne sais pas. Ce qui finit par se passer, c'est que vous pouvez voir ici où il est écrit : «  Alors, que faisons-nous ? Il fait donc d'abord l'opacité, puis passe à celle-ci. Donc, si nous cliquons sur ce dernier, le mouvement k, on lui dit, OK , il a dit, Ce type va commencer après la section précédente, la section précédente comme celle-ci. Donc, ça va commencer après . Ce n'est pas ce que je veux. Je veux passer à la section précédente. On y va, il y a beaucoup de lecture dans Webflow pour vous faire une idée. On y va. Ils font les deux en même temps. Vous pouvez voir aussi bien ici, voyez-vous qu'il y a un petit liner à l'extérieur ? Ils sont regroupés au début. Ils sont regroupés, alors que si je l'annule, d'accord, pouvez-vous voir qu'ils sont séparés ? Ils sont un peu comme s' il y avait une sorte de limite entre eux pour dire «  fais celui-ci, puis celui-là ». OK, donc nous allons voir quel mouvement. Et je tiens à vous dire de commencer par là, non ? Les miens sont un peu bizarres. C'est à cause du fait que l'on continue à s'estomper ici. C'est parce que tu sais pourquoi ? Ça n'attend pas ? En fait, il s'agit simplement de passer beaucoup de temps à faire de l'animation. Donc, dans l'animation de déplacement, celle-ci est appelée élastique. Je vais juste m'en débarrasser. Plus bas. Et j'espère que nous y voilà. Ça s'estompe en quelque sorte au fur et à mesure. Même alors, ce n'est toujours pas le cas. Ce que nous pouvons faire avec les capacités. On peut dire que cela a été un peu retardé. OK, retardons-le d'une demi-seconde pour qu'il commence à faire son travail une demi-seconde après cette petite animation. Vous devrez peut-être jouer avec les retards. Cela pourrait suffire. Je vais me débarrasser du mien. Comment les supprimer ? Tu vas ici et tu dis que tu es dans le pistolet passif, tu sais ce que c'était. Assassiné, l'un d'eux a disparu aussi parce que je vais le faire sauter du sol. Sauvegardez-le. Comment puis-je le faire sauter du sol ? Nous allons donc revenir aux styles. Cela n'a rien à voir avec les interactions, tout a à voir avec son contenant. Il y a donc un diblock enroulé à l'extérieur. Ça y est. Je veux dire, même en lui donnant un nom, appelons cela une animation de héros de division. Tout ce que nous avons à faire, c'est regarder celui-ci appelé overflow. OK ? À l'instant, tout ce qui se trouve en dehors de ce div visible ou vous pouvez dire que tout ce qui se trouve en dehors de ce div est invisible. C'est un peu découpé sur les bords. Parce que j'étais la police. Je pense que j'ai une très grande hauteur de ligne dessus. Donc, ce que je vais faire, c'est juste l'agrandir un peu, tu sais, en le rembourrant un peu pour que je puisse voir la partie inférieure. On y va. D'accord ? Très bien, maintenant jouons à l'animation. Je vais passer à Command Shift P pour accéder à l'aperçu. Tu peux le voir sauter du sol maintenant ? Vous pouvez voir sauter par le haut aussi, ce qui n'est peut-être pas ce que je veux. Je vais donc ajouter un peu de rembourrage sur le dessus également. Donc, vous rembourrez, rembourrez là. Regarde, ça s'accroche tout le temps. Très bien, passons à la seconde. Encore une fois, je n' ai rien à sélectionner. Je peux aller sur celui-ci et dire, voici le chargement de ma page. C'est ce qu'il fait. Le héros prend de l'animation, d' accord, manteau, cliquez dessus. J'ai un texto à faire juste pour bouger. Je vais maintenant cliquer sur celui-ci appelé Takes Portfolio. Je vais faire la même chose. Je vais lui ajouter un mouvement. Je veux qu' soit là où il doit être en tant qu' état initial parce que c'est là que je veux qu'ils finissent. Faire face. Encore une fois, il y a ce petit bonhomme, surveillez-les. Vous n'avez pas d'autre valeur. Il s'agit donc d'en faire une valeur. Disons que je veux bouger pour le portefeuille de ticks. Et je veux qu'il fasse quelque chose. Encore une fois, il y en a un autre qui dit : « Hé, tu n'as même pas changé les valeurs, comme Okey-Dokey ». Je peux le faire. Je veux le démarrer hors écran, qui se trouve en dehors de ce div avec ensembles de débordement, ce qui signifie qu'il saute et que le travail sera mal fait. OK. Donc il commence leur cœur dans le mauvais sens, non ? OK. Je l'ai mal fait. Mais ils ont du mal avec ça, je sais. Démontons-le, faisons-le et faisons-le. Tu peux voir l'Undo ? Pour le moment, si j'annule parce que je faisais glisser, cela affichera tous mes annulations ou j' entrerai dans cette diapositive. J'aimerais qu'ils les regroupent. Cela pourrait être vrai à l'avenir. Workflow si vous regardez, je pense que l'annulation devrait être comme tout le cas parce que j'ai glissé aussi longtemps. Il a donc compté chaque petit chiffre comme Undo. Ok, donc ce premier n' est pas l'état initial. L'état initial va s'effondrer. Ensuite, celui-ci sera configuré pour taper explicitement zéro. Maintenant, je vais appuyer sur Play. Celui-ci est l'état initial. On y va. Vous pouvez voir qu'ils sont regroupés Maintenant, c'est l'état initial et ça va fonctionner. Qui se souvient pourquoi l' un part et l'autre ? Vous aimerez peut-être que ce travail soit fait. Comme je l'ai dit, c'est la raison pour laquelle il est là parce que n'oubliez pas qu'ils ne le font pas en même temps. C'est à vous de décider si vous voulez que cela se produise, l'un se produise et que l' autre apparaisse. Ce que je vais faire, c'est les combiner, d'accord ? Et vous pouvez procéder de plusieurs manières. Je peux le dire ici. N'attendez pas ce type. Je veux que tu y ailles avec lui. Ok, je veux que tu commences par la section précédente et ils se sont un peu mélangés. Tu peux voir ce petit groupe autour d'eux ? Je vais annuler ça. Annule-le à nouveau. En fait, vous pouvez simplement le faire glisser dedans. Tu ne l'as pas fait. Tu y vas. Des copains. Et l'autre chose, quand ils sont là-dedans, parce que c'est son portefeuille de taniers et son portefeuille, alors mon TOC, c'est comme les déplacer pour les mettre dans le bon ordre. Tu vois que c'est un peu délicat ? Vous pouvez en fait les réorganiser, cela ne fait rien parce qu'ils sont dans le même petit groupe. Cela les réorganiserait. Si vous les faites glisser lorsqu' ils étaient séparés, l'un se produirait avant l'autre. OK. Quelle est la différence entre les deux ? Pourquoi l'un est-il heureux et plein de vie et l'autre ? L'autre est un peu Palpatine, désolé, PowerPoint, tu es génial, mais je t'utilise comme horrible animation. Alors que Webflow, vous pouvez aller ici et dire que je vais utiliser le même. Je vais utiliser la densité entrante et sortante et annoncer. Bon. Nous pourrions nous en sortir simplement ici, mais comme nous sommes nouveaux, mets-le à l'intérieur et à l'extérieur. Et la seule autre chose, c'est que y va vite. Le chronométrage, voyez-vous, prend 1 s, celui-ci prend une demi-seconde. Faisons en sorte qu'ils soient identiques et voyons, maintenant il y a juste beaucoup de choses à jouer, comme « qu'en penses-tu ? C'est plutôt cool ? Parce que Dan doit aller beaucoup plus vite, plus loin. Il se déplace à une vitesse différente. Ok, c'est plutôt cool. Mais peut-être que je pourrais faire en sorte Dan ait un petit peu de retard. Dan est retardé. On y va. Trop long. OK. Si nous faisons des secondes, donc 0,25, quart de seconde. Oui, le truc, c' est que je le retarde d'autant, ce qui signifie que la génération totale est en fait assez petite. Ce qui indique si je peux avoir 0,99495 ou paniquer. Désolé, ordinateur. Regarde. Tu peux voir le retard ? Oh non, ça prend encore 1 seconde, Dulles moi. Allez. Et 0,25 l'a déjà fait. Ayez également un point de retard de 9,5. Parce que je veux en quelque sorte que ça sorte avec. D'accord, c'est plutôt sympa. Maintenant, nous venons de faire deux mouvements. Souvenez-vous qu'il fallait du texte et des opacités. Tu peux en avoir autant. Vous pourriez faire 14 choses différentes pour prendre Stan, puis il est passé au portfolio. Le réglage de l'état initial est très important. Et puis pour le second, pour vous assurer que vous êtes vraiment assez explicite sur ce que c'est, même si c'est un peu, pouvez-vous le voir ? Il est effacé et indique que c'est zéro. Il ne présumera pas toujours qu'il dira, eh bien, vous n'avez rien dit et que c'est juste une place. C'est en fait dire que je voulais aller à zéro, qui était sa base d'origine. Vous pouvez les réorganiser, assurez-vous de les nommer. D'accord, on ne vous appellera nouvelle animation, je vais le nommer. N'oubliez pas de donner un nom à vos classes car ce n'est pas le cas si vous faites glisser une image et que vous commencez à essayer de l'appliquer. Et il faut que ce soit une classe appliquée à cette image ou qu'elle touche ce qu'elle est. Et même si cela n'a pas beaucoup de sens maintenant, et lorsque nous utilisons des déclencheurs de page, nous le faisons à l'élément lui-même que nous animons. Alors que le, mais nous l'avons fait avant et plus tard, nous le faisons au parent. Pouvons-nous ajouter l'animation à la div parent, ce qui aura plus de sens dans la prochaine vidéo. C'est juste une chose à retenir. Pates déclenche le truc. Et lorsque nous utilisons plus de déclencheurs d' éléments, vous le faites au parent. Très bien, sauvegardez-le. Faisons un petit aperçu. Très bien, ça y est, animation de chargement de page dans Webflow. 72. L'image s'estompe et devient plus grande sur le roulement sur le Webflow: Bonjour tout le monde. Dans cette vidéo, nous allons faire en sorte que ces petites cartes grossissent petites cartes grossissent et qu'elles s'estompent lorsque vous les retournez. OK ? Oui, laissez-moi vous montrer comment créer cela et Webflow. OK, pour commencer, nous allons utiliser cette carte que nous avons créée plus tôt dans le symbole du cours. Actuellement, ce que je veux faire, c'est que je viens créer une nouvelle page sur mon site web, appelée animation, alors que pour le test d'animation, juste pour la séparer de tout le reste, je vais ajoute une grille pour que mes cartes arrivent à un endroit où aller. Il y aura trois colonnes, une rangée. Et je vais récupérer ce symbole. OK, cool. C'est une vignette froide, elle va entrer ici. Et parce que je ne veux pas non plus le mélanger à des choses comme nous, est-ce que ce doit être un symbole ? Non, nous allons juste dire « cliquez avec le bouton droit » et disons « Dissocier l'instance ». Elle n'est donc plus connectée à ce symbole, n'a pas à l' être, mais elle peut l'être. OK. Ce que nous allons faire aussi, c'est que je veux tout le COD. J'ai une carte de code DIV, une vignette, qui résume tout, tout se cache dedans. Cool. Donc, ce que nous allons faire avec cette sélection, nous allons passer à nos interactions avec des éclairs et nous allons actionner un déclencheur. Dernière vidéo que nous avons faite sur la page. Ce truc a à voir avec un élément. Vous devez interagir avec lui ou l'élément doit faire quelque chose. Au cas où, notre élément va avoir un survol de la souris. OK ? Nous allons dire qu'en vol stationnaire, l'action va se dérouler, et nous avons joué avec un tas de ces jeux, mais ce n'est pas comme s'il y en avait quelques-uns ici qui seraient alors rapprochez-vous. Aperçu. C'est un peu ce que je veux. Ce n'est pas ce que je veux. n'y en a pas vraiment de préfabriqués que je veux. Nous allons donc créer une animation personnalisée. OK, super, ça n'a rien fait comme avant. Nous allons dire, d' accord, ajoutons-en un. Cette animation que nous allons appeler cette fille, quel COD ? Grandir. Et appuyez sur Entrée et, comme avant, obtenez ce que vous souhaitez animer. Et je vais dire en plus, j'aimerais que celui-ci soit mis à l'échelle. Celui-ci est un peu bizarre. Je ne suis pas vraiment bizarre. Avant de déplacer ce texte, pouvons-nous commencer par le bas et le déplacer vers le haut. Tout a donc commencé là où je n'étais pas déjà. Nous avons donc dû faire cet état initial. Celui-ci commence exactement où je le veux. Je n'ai pas besoin d'un état initial. Donc, ce qui finit par arriver, c'est tout ce que j'ai à faire c'est une échelle miniature de morue. Pendant un certain temps. Je vais le faire dans une certaine mesure en fonction de votre taille. Je vais y aller un point , c'est probablement un peu gros, mais je n'ai jamais été dans le showmanship ici. n'y a donc pas de vue initiale juste pour avoir la deuxième vue, vous pouvez y jouer. C'est un peu plus simple si c'est déjà le cas, s'il est là où il doit être, vous n' avez pas besoin d'avoir un état initial modifier et le faire pour le modifier et le faire revenir au second. Celui-ci est déjà là où il doit être. Je vais donc juste le changer pour qu'il soit un peu plus grand. Mes x et Y sont liés, donc ça va être 1.2 pour chacun. Et c'est en gros ça. J'espère que nous allons le sauver. Donnons-lui un aperçu. Et je vais survoler la moitié des œuvres. OK, donc c'est devenu plus gros. Et le truc, c'est de regarder ça. Encore une fois. Si je clique sur Désactiver, cliquez sur mon conteneur. J'ai ce déclencheur, déclencheur d' élément et il est dit sur Hover, est-ce que cette morue pousse, puis en planant, ne fait rien. C'est oubliable. Il suffit de le ranger lorsque vous passez la souris. Je dois faire la même chose. Je vais dire, début et animation. Je ne veux pas qu'il fasse pousser de la morue parce qu'ils ne le feront que deux fois. Je ne sais même pas ce qui s'est passé là-bas. Ajoutons une autre animation appelée card and grow. Très intelligent, Dan. Et je vais le dire avec ce que je veux faire aussi. Je vais ajouter plus et je voudrais le ramener à un. Ça a commencé à une heure. Certains d'entre eux sont nuls. C'est confus. OK. Celui-ci a commencé tout de suite. Je veux en revenir à un et je peux le laisser comme ça. Je devais dire, en fait, numéro un. Et c'est tout. Je n'ai pas à m'asseoir sur le statut initial , disons revenez à un, s'il vous plaît, au survol, enregistrez-le, prévisualisons-le. Survolez. Survolez. Même si c'est cool. C'est un peu lent. Il s'agit donc d'un aperçu du moment choisi, mais ce sont là les bases. OK. Faisons quelques-uns d'entre eux. Passons à la vignette de la carte, copiez-collez, collez et passons à l' aperçu de celle-ci. Et celui-ci en fait un. Très bien, alors allons-y, faisons-le paraître joli et ce genre de noirceur. Je travaille donc sur ce premier point ici. OK. Et examinons l' assouplissement de la croissance de la morue. Donc, quand il sera en vol stationnaire, je vais faire celui-ci appelé Cargo. OK, j'ai sélectionné celui-ci et j' aimerais que la durée soit plus rapide. Sûrement pas. Je veux juste que l'assouplissement soit différent. Facilité d'entrée et de sortie de certains d'entre eux. J'utiliserai un quadrilatère, juste la forme du Ys. Ils ont des noms bizarres. Des noms. Donnons-lui un aperçu. Très bien. Oui, c'est là que Dan passe trop de temps à jouer. Je vais accélérer les choses. Vas-y un peu comme celui-là. Je suis allé avec in-out, attrapé. Et le moment était bien choisi. Je dois faire de même pour le groupe COD. OK. Je vais faire de même. Maintenant, le truc, c'est que quand ça s'estompe, même si je fais la même chose, c'était quoi ? OK et sauvegardez ça. Et joue-le. Enregistrons-le et prévisualisons-le. Je clique donc ici sur la commande Shift P, Control Shift P. Vous constaterez que cela prend trop de temps, vous aurez l'impression que cela sort plutôt bien, mais ensuite il faut trop de temps pour revenir en arrière. C'est mon expérience en tant qu'animatrice de longue date. OK. Moyen à long terme. Et il y a que, si je clique sur la carte et que je passe la souris dessus, peu importe ce que c'est. Comme, le premier cas, quand il recule et que mes coûts oscillent. Ok, fais-le environ la moitié du temps. Si cela prend 1 s pour apparaître, je trouve que s'il faut une demi-seconde pour apparaître, je pense qu'environ un quart de seconde est généralement une bonne règle pour savoir comment le robinet doit revenir en arrière. Mais la moitié du temps qu'il faut pour y arriver , c'est plutôt agréable d'y retourner. Ça l'a été de toute façon. C'est cette partie-là. Faisons comme une autre partie d'une animation. Contrairement à la vidéo précédente, nous devons faire attention, mais ici, nous devons ajouter plus de choses. Nous allons donc en venir là où il va modifier son état initial. D'accord, j'aimerais que ce soit un peu plus foncé ou transparent ou quelque chose comme ça. Je vais donc cliquer sur Plus, et il y a un tas de choses que vous pouvez faire. Il y en a quelques autres cachés sous le filtre. Le filtre a celui-ci ici, en bas, je veux faire quelque chose avec le filtre. Et tu peux prendre un peu de flou. Le contraste de luminosité est un tas de choses ici. Amusez-vous avec eux. Ok, ce que je vais faire, Crease Cow pourrait être cool. Et je le vois souvent. Je vais utiliser juste la luminosité. Et la luminosité est pesée 200 %, c'est deux fois plus brillant, cent c'est normal, et vous pouvez passer en dessous de 100 et devenir plus sombre. Ce que je veux, c'est que je vais probablement faire plus sombre que je ne le souhaite juste pour m' assurer que c'est très visible dans ce didacticiel vidéo jusqu'à 50 %. C'est par là que je voulais commencer. Parce que si je le joue, c'est de l'autre côté, du mauvais côté, il fait de plus en plus sombre à la sortie. Donc, ce que je veux faire, c'est dire qu'en fait, c'est mon état initial. C'est l'une de ces périodes où, lors d'une visite de l' échelle, il suffisait d'en avoir un parce que l' état initial était déjà là. C'est la bonne taille. Celui-ci ne l'est pas, la taille initiale doit être plus foncée, et maintenant je peux en créer une autre, créer un filtre. Je vais te montrer une petite astuce. Je pourrais faire le long chemin que nous avons fait dans la dernière vidéo. Remplissez pour emporter, trouvez-le, allez le modifier, ajoutez la luminosité et remettez-la à 100. OK, et ça marche. Mais ce que je veux faire pour vous montrer une petite astuce, c'est celle-ci. Vous pouvez cliquer dessus avec le bouton droit et simplement le dupliquer. Le bon, pas un filtre à échelle. Dupliquons-le. Il n'est déjà pas vérifié que je ne suis plus dans l'état initial. C'est l'état initial. N'y a-t-il aucun réglage ? Celui-ci n'est pas coché et j'ai un tas de paramètres. Et ce que je vais faire, c'est faire passer la luminosité à partir de là, à 100, ce qui est normal. Rien ne s'appliquait vraiment. Sauvegardez-le. Prévisualisons-le. Ils vont poser des problèmes. Ils ont donc l'air bien. Oh, ça ne marche pas. Si l'estomper a pris une éternité, il y a deux choses qui ne vont pas. Optons pour la taille. Montre. Qu'est-ce qui se passe. Pourquoi cela prend-il autant de temps ? Des idées ? Tout, faites une petite pause ici, se demandera pourquoi le chargement prend une éternité, réinitialisons-le et donnons-lui un avant-goût. Ces ténèbres, alors c'est tout. Il s'estompe puis grossit, nous devons y remédier. Donc, vous cliquez sur le parent extérieur, vous dites que la morue pousse. Tu peux les voir. Il y a un petit écart entre les deux. Je voulais faire ces choses en même temps, avoir le même groupe, les gars, on y va. Accédez maintenant à l'aperçu. Tout le monde regarde ça. C'est la moitié de notre problème. Faisons l'autre. Pourquoi ? Ne revient-il pas à la couleur foncée ? pourrait te plaire comme ça. C'est peut-être l' excellent effet de design que vous aimez. Mais disons que je veux qu'il revienne. Que faisons-nous ? Tu l'as eu. Mon groupe doit donc le faire également parce que , pour le moment, Outgrow a ces éléments supplémentaires. Ok, il y a la balance et le filtre, mais mon inconnu grandit ou n'importe qui a la balance. Je vais faire la même chose ici, où que ce soit maintenant, c' est-à-dire 100 % de luminosité. J'aimerais en faire un autre pour le filtre. En bas, ici. J'aimerais que ce soit de la luminosité. Et qui se souvient à quel point je l'ai fait sombre ? Je ne m'en souviens pas. C'était environ 50 %, non ? Je devrais aller vérifier. Je vais le faire, allons-y, parce que ça a commencé sa vie à 100 ans. OK. De mon renversement ou de ma croissance. Et maintenant je dis «  Retournez à 50 ans ». Ils seront géniaux. Après tout ce temps. Du point de vue du calendrier, il devra le tester. Je sais que ça parle de noyau. Je dis toujours environ un quart du temps. C'est généralement pour les mouvements d'échelle, parfois en termes de capacité et de luminosité. Ce n'est pas parce que c'est un peu plus une sorte de vérification. Sauvegardons-le. Jetons un coup d'œil. Hubba. Hubba. Oui. Je pense, je pense que c'est bon. Mais c'est plutôt cool. Je l'adore. D'accord, donc ça aurait déjà pu être un symbole. Je peux le transformer en symbole maintenant en cliquant dessus avec le bouton droit de la souris et en disant, eh bien, faisons-le ici. Nous pourrions créer un nouveau symbole à partir de celui-ci et lui donner un nom pour le réutiliser. Mais je l'ai déjà reçu tout à l' heure et je ne veux pas le confondre. Et en fait, une autre chose que je veux vous montrer, c'est que les parents sont sélectionnés, allez-y. Et je vais dire, allons-y si tu trouves de drôles de problèmes, d'accord. Il se peut que celui-ci, qui affecte le déclencheur d' indirection, fonctionne parfaitement pour R1. Celui qui le déclenche, k, quel que soit le déclencheur d'action, c'est-à-dire l'emballage extérieur qui est passé à ces choses, s'appliquera à lui. se peut que vous souhaitiez simplement Il se peut que vous souhaitiez simplement qu'il le fasse aux éléments sélectionnés. Pas tous. OK ? Parfois, la classe fonctionne. Je veux que cela s'applique à tous les cours. OK, alors allons-y , allons-y. Ce ne sera pas une étape où cela fonctionnera pour vous. Mais pour le moment, jetez un coup d'œil. Si je passe la souris au-dessus, pouvez-vous voir qu'ils le font tous, au moins, la croissance de k arrive à toutes les classes. Je n'en veux pas dans ce cas, il y a peut-être une chance que nous, vous le fassiez. Donc s'il y a un point zéro que nous aimons , ce n'est pas faire ce que je veux. Jouez avec eux à travers ces trois. Juste celui que j'ai sélectionné et qui ne s'applique pas. Cet effet ne joue aucun des autres et ne s'applique pas à tous en même temps. Ou celui-ci le déclenche. Fais ces choses. Bref. C'est bon, ça y est. C'est notre image qui s'estompe et s' agrandit lors du rollover dans Webflow with Dan. C'est bon, ça y est. Je vous verrai dans la prochaine vidéo. 73. Mouvement d'image de défilement de fond de Parallax dans Webflow: Bonjour à tous. Dans cette vidéo, nous allons faire en sorte que cela ressemble à un défilement par parallaxe. Je fais défiler la page de haut en bas et regarde, on dirait qu'il y a un peu de flou sur les premiers. Je vais vous montrer comment procéder. C'est ce qu'on appelle la parallaxe. Ça va être amusant parce que tout est un peu lié, non seulement aux compétences d'animation que nous avons apprises dans les dernières vidéos, mais aussi à certaines autres compétences que nous avons apprises tout au long de cours. Nous allons examiner le positionnement et débordement, l'indice Z et d'autres choses. Toutes ces connaissances préalables vont nous permettre de le faire relativement facilement. Très bien, allons-y. Laissez-moi vous montrer comment procéder. D'accord, tout d'abord, j'ai créé une nouvelle page juste pour que tout soit séparé. J'ai ajouté un navigateur parce que j'ai l' impression qu'une page a besoin d'un EV. Et ils nous aident également à nous donner une sorte de contexte sur l'endroit où nous faisons défiler la page. Donc, pour que cela fonctionne, nous allons ajouter notre section, accord, je vais donner un nom à cette section. Je vais l'appeler des nuages de section. Je vais lui donner de la hauteur. Je ne vais pas lui donner de hauteur. Je peux le laisser tel quel. C'est dans un container. Et puis, bien que nous puissions le faire au conteneur, il vaut mieux y mettre un div et y ajouter toute notre animation. Donnons un nom à notre division afin que nous puissions la retrouver facilement , des nuages de divisions cliniques. Très bien, ajoutons nos différents éléments dans votre panneau de ressources. J'ai déjà importé le mien, mais vous trouverez dans les fichiers d'exercices de votre portfolio un intitulé Cloud recto and back. Apportez-les tous les deux, puis amenez-les tous les deux. OK. Il y a donc un autre gars là, il est là. Il y a donc des SVG, ce qui est plutôt bien. Eh bien, c'est génial. Le commentaire est vraiment de grande taille cependant. Par défaut, les images, pouvez-vous voir 100 % de la largeur dans laquelle elles peuvent se trouver ? Parce qu'en SVG, il peut être de n'importe quelle taille ou simplement énorme. Donc ça va défiler. Faites-le glisser jusqu'à la taille appropriée. Quelle est la taille appropriée ? C'est juste que j'en ai fait un Illustrator, ai trouvé un style de nuages, puis je les ai exportés au format SVG pour vous, pour que vous puissiez utiliser n'importe quoi. La prochaine chose dont j'ai besoin, c'est ce bout de texte. J'aurais pu l'exporter ici. D'accord, je l'ai fait, mais j'ai pensé qu'il valait mieux avoir du texte modifiable. Vous pouvez le changer et ce n'est pas comme si c'était réparé pour toujours. Ajoutons donc cela. Donc je vais te donner un bloc de texte, je t'avais trouvé de quelque façon que ce soit. Et je vais aller le styliser. Je vais accélérer les choses parce que nous avons stylisé nombreux textes et leur avons donné un cours et je suis en fait avant que vous ne partiez. Il y aura donc mon texte, les nuages, et je vais aller le mettre en forme. Vous y attendez. Ok, alors que faisons-nous maintenant ? Et nous en avons deux, il faut que ce soit là-dessus. Cela ne fonctionne pas. Comment puis-je ajouter ça à ça ? Parce que c'est ce que je veux, n'est-ce pas ? Je veux que ce soit au-dessus de tout ça. Comment le faisons-nous ? Tu te souviens que tu l'as déjà fait ? Paula, tu auras droit à un séjour en or si tu te souviens au moins du terme chiffre pair, tu n'as même pas besoin de savoir où il se trouve, d'accord, si tu t'en souviens, c'est cette personne ici qui a besoin de se positionner, réglé sur absolu, puis je peux le déplacer. Ce que je vais faire, c'est lui donner un nom de classe ou nous pouvons le faire plus tard. Si vous dites position absolue, cela lui donne une image classique. Je vais appeler cette image un front de nuages. Excellente. OK, il est dans une position absolue pour que je puisse les déplacer. Quelle est la chose dont je dois me souvenir que Dan a dit quelque chose quand nous avons fait de l'absolu, il y avait autre chose à retenir. Si tu te souviens du moment où il utilise le corps. OK, et c'est bon. Tant que vous n' ajoutez rien au-dessus ces nuages, sinon, tout sera enregistré. Donc, ce que vous dites, c'est le parent, ce qui est mon cas, la division vous obscurcit, j'ai dit à un parent. OK, maintenant cette personne est apparentée à cet emballage. Cette référence viendra toujours, donc c'est sympa et utile. Maintenant, nous pouvons simplement jouer avec cela pour le mettre dans la bonne position. Maintenant, ne passez pas trop de temps ici rendre parfait parce qu'il y a un tel truc de poussin qui répète les tests quand vous faites cela et que vous les obtenez grossièrement, nous avons besoin qu'ils soient à peu près de la bonne taille, faites quelques expériences , puis ajustez ensuite. Il va y être. Je ne vais pas déplacer celui-ci. Je pourrais, je vais avoir un arrière-plan, un juste milieu et un premier plan. Le juste milieu est généralement de ne pas toucher. C'est ainsi qu'il devient un juste milieu. Donc, celui-ci, ici, je vais faire la même chose pour un nom de classe, une image, Cloud, Beck. Cliquez. D'accord, et je dois dire que vous êtes une position d'une sorte absolue de Rix mon texte un peu. OK, je vais le baisser un peu. Je pourrais aussi rendre mon texte absolu, ou je pourrais simplement y ajouter un peu de rembourrage selon ce que vous voulez faire. Hum, c'est un peu, un peu comme si on le poussait par le haut, ça suffirait. Peu importe dans ce cas, Qu, à peu près quelque chose comme ça. D'accord, si vous avez tout, tout le monde a un ClassName, qui est l'une des lignes. Il doit se trouver dans un conteneur que nous pouvons utiliser car, dans les précédents, nous avons ajouté l'animation à chacun d'entre eux. Ce que nous allons faire, c'est l'ajouter aux parents maintenant, accord, donc nous allons sélectionner le parent qui s'appelle def clouds. Je vais dire que dans les directions, je veux déclencher un élément. Celui que je veux est celui qui dit, en faisant défiler la vue, que c'est plutôt cool. Pendant que vous faites défiler la vue, s'il vous plaît. Peux-tu faire quelque chose pour moi ? Ok, le problème , c'est qu' y a pas de défilement pour le moment. Si je prévisualise, je ne peux rien faire défiler car il n'y en a pas, ce n'est pas assez long. Donc ce que nous allons faire, c'est faire semblant pour le moment. OK, je vais te montrer comment le faire fonctionner quand c'est comme ici. Mais pour le moment, je vais juste le baisser. Ils ont donc des nuages et disent que les nuages de division auront une partie de marge. OK ? C'est hors écran en bas et j'y ajoute un morceau, pas des négatifs et des positifs que je puisse faire défiler ce truc pour le rendre cool. Lorsque vous travaillez sur votre propre site, vous aurez plus de contenu à parcourir simulant pour le moment avec des mitogènes géants qui défilent. Génial. Ainsi, les nuages et les directions ont déjà commencé chanter, ce qui disait que pendant le défilement, ou nous allons faire sur le parchemin, nous allons faire une action de sélection. Nous n'avons rien. OK, nous allons donc créer une animation personnalisée. Ignorez cela, mais pour le moment nous allons examiner les limites. Ce n'est pas censé être là. J'ai enregistré cette vidéo environ trois fois maintenant, pour essayer de la simplifier. Ce n'est pas simple. C'est donc la solution la plus simple. Ça se passe plutôt bien. Je me suis accroché aux tangentes pour que ça soit génial. Il va faire en sorte que ça paraisse bien. Le principe est omniprésent. Vous n'avez rien non plus. Nous allons donc dire que nous allons en ajouter un. Je vais lui donner un nom. Je vais l'appeler Cloud Scroll. Excellente. Et ce qui va se passer, c'est qu'il y aura 0 % et 100 %. Ce qui finit par se produire, c'est l'animation démarre ici quand 0 % signifie juste moment où je vois où vous en êtes juste avant qu'elle n'apparaisse à l'écran. Et quand il passe cette boîte, les mâchoires s'affichent ici. OK, c'est là que 100 % se termine. Si tu ne comprends pas, allons-y. Ok, donc ça veut dire que si je l'ai fait, si je veux que ces nuages se déplacent, ok. Maintenant, on s' éloigne de tout ça. Nous disons que je veux que ce cloud ait une action. Tout va bouger à 0 %, ce qui est le cas ici. C'est où ? J'aimerais qu'il baisse. Ceux qui sont les plus proches de vous devraient commencer. OK, je vais déplacer le mien un peu plus bas. Jusqu'où allez-vous le goûter aujourd'hui ? Il va y avoir de la baisse et puis à 100 % des mains m'en ont déjà donné une, je veux qu'elle soit en hausse. Et si vous le déplacez assez loin, cela donne le bon type de plongeon devant. Il se déplace probablement plus rapidement sur la caméra. Eh bien, s'ils peuvent libérer Co, faisons-le un test. Vous pouvez le prévisualiser ici. Cliquez donc dessus. Donc, quand il vient juste d'apparaître à l'écran, c'est là où je le mets. On ne peut pas vraiment le voir. peu importe où vous le placez à 0 %, il faut juste qu'il soit proche de l'endroit où vous le souhaitez, car il ne peut même pas le voir. Mais finalement, quand il passe à travers le parchemin, je peux en voir 35, 35, 31 %. Tu vois que ça va passer. Maintenant. Ça marche, je vois que ça saute. C'est marrant sur ma molette de défilement. OK, j'ai une souris. J'utilise une molette de défilement Logitech. Je l'adore la plupart du temps, non ? Mais dans ce cas, il fait ces sauts et ça a l'air dégoûtant. Mais mon trackpad sur mon Mac, regardez ça. Je n'ai rien fait d' autre que mon trackpad. Ça a l'air sympa. Regarde ça et regarde ma molette de défilement. Baba, Baba utilise un peu de nervosité. Cela sera vrai lorsque les gens utiliseront également votre site. C'est donc un peu dommage. Parfois, ce n'est pas aussi beau sur les ordinateurs de certaines personnes, mais mon trackpad est sympa. Donc c'est en quelque sorte ça, non ? Nous allons faire davantage. Mais en gros, tu l'as. C'est plus proche, donc ça commence vers le bas et se déplace vers le haut. Faisons le contexte. Nous quittons ce type parce qu'il est le juste milieu. On dirait qu'il fait quelque chose, même s'il ne fait pas grand-chose. Celui-ci parce qu'il va être plus loin, ce qui n'est pas le cas actuellement. Devons-nous régler ça d'abord ? Oui, réglons ça d'abord. C'est en haut de cette image. Qui se souvient de la façon dont j'ai fait monter les choses les unes sur les autres ? Tu te souviens qu'il existe un index Z. Alors allons-y. Donc, cette image est de retour dans le cloud, assurez-vous qu'elle doit en ressortir, enregistrez-la, revenez à mes styles. Ok, ça n'a rien à voir avec l'animation. Je vais cliquer sur ce type ici, image appelée Beck. Il est déjà absolu, ce qui me donne accès à l'index Z. Donc je vais dire que tu as 11 ans. Celui-ci prend ici Cloud. Je ne vois pas cet index. Je vais donc utiliser le relatif parce que relatif signifie simplement qu'il vous donne ces options. Mais il tient sa place, sa place dans le code. Et je vais dire que vous le souhaitez, ce qui est au-dessus de celui-ci. Ce type, ici, peut déjà voir l'index Z parce que nous l'avons rendu absolu. Il va avoir trois ans. D'accord, voilà ma superposition. Maintenant, cette personne, où vient le Cloud ? Faisons en sorte qu'il anime. Donc, si je le fais sélectionner et que je vais ici, rien de tel, c'est parce que peut-être le parent commence, il est le déclencheur. Il contrôle en quelque sorte tout. Ensuite, lorsque vous entrez dans Cloud, faites défiler la page. OK, maintenant nous pouvons regarder les différentes parties maintenant, cette personne ou mon nuage de tics et celui-ci ici, il était plus facile de les sélectionner ici dans le navigateur. Je vais l'ajouter, je vais devoir le déplacer de 0 % là où je veux qu'ils soient. Si vous voulez qu'ils aient l' air d'être en arrière-plan, vous les démarrez en haut et vous les déplacez vers le bas. Alors que ce type, vous avez commencé plus bas et les avez déplacés vers le haut. C'est tout le contraire. Donc je vais dire que tu es un peu plus haut et que tu ne ressens pas autant d'émotions. Cela doit aller vite et on dirait que c'est proche. Cela doit paraître lent, tenir dans le dos. Beaucoup de tests. Il est donc là. Je vais en ajouter un autre à la fin. Il ne me l'a pas donné automatiquement. Je vais donc dire plus d'un coup parce que je l' ai sélectionné, Cloud est de retour. OK. Et je vais le déplacer vers moi en descendant. Alors, numéro où se trouve-t-il, devant ou derrière en haut ? Il est un peu plus haut et nous avions besoin du fond. Il est un peu plus bas. Est-ce que ça va marcher ? Essayons-y. Activons l'aperçu en direct. Peut-être n'utilisez pas ce tapis de souris, ce traceur de souris. Ils regardent, ils ont tous timing différent, la parallaxe est faite. Nous allons faire d'autres choses juste pour mettre de l'ordre, mais tu peux aller en ville avec nous avec ton z-index. Vous pourriez vous retrouver avec dix couches différentes. Et vous aurez dix choses différentes ici. Et les choses qui se trouvent plus en arrière doivent se déplacer plus lentement et du haut vers le bas. Et les objets qui se trouvent à l'avant doivent se déplacer plus rapidement à toutes les vitesses. Amine, celui-ci ici à l'avant commence ici et finit là. Si vous voulez que quelque chose soit plus proche de l'écran et du phosphate, il suffit qu'il finisse plus haut. Il se déplacerait plus vite dans le z et x doit être plus élevé. Qu'en pensons-nous ? OK, il ne s'agit pas de prévisualiser deux en aperçu en utilisant la molette de défilement et en utilisant ma main gauche. C'est plutôt cool. Il s'agit d'un mode de prévisualisation car il permet de supprimer les cases. Hey, la parallaxe est géniale. Mon problème. Je vais vous montrer quelques exemples de l'Inde. Mais je sais que j'ai l' impression que tout le monde vient de découvrir ça et j'adore les plus subtils comme celui-ci. Il y a quelque chose qui bouge, mais ceux de parallaxe où c'est comme je ne savais même pas comment cliquer sur des objets, faire défiler les pages et c'est très confus. Les gens peuvent devenir un peu fous parallaxe si vous y êtes autorisé, comme lorsque vous apprenez Lynn Sphere dans Photoshop et que vous mettez simplement des fusées éclairantes sur tout. C'est bon. Vous pouvez tout mettre en parallaxe, mais sachez qu'au bout d'un moment, assurez-vous de faire des tests utilisateur pour vous assurer que les utilisateurs peuvent réellement fonctionner. Votre site n'est pas comme si My God se produisait. Tout est perplexe. Très bien, faisons-en un peu plus. Je veux juste, en quelque sorte, je ne sais pas si tu es avec moi et tu te dis «  Cela semblait logique et tu l'as pratiqué. Faites une pause maintenant, allez vous entraîner. La vidéo à quelques reprises. Cela prend un peu de temps. Je veux que tu sois heureuse. High-Five. High-Five. OK. Allons plus loin parce que vous aurez probablement d'autres questions et d'autres choses que je voudrais vous montrer, mais je veux avoir d'autres questions et autres choses que je voudrais vous montrer, l'impression d'être un point final. C'est terminé. Il y avait du bon, ça a marché. Regardons d'autres choses. Vous pouvez faire des choses intéressantes avec Physical, vous devez le modifier. Donc, tu dois te souvenir de toi quand tu es ici, tu vas aller dans les nuages de division. Vous pouvez voir le petit bonhomme, le petit éclair qui y pénètre, sinon vous ne le trouverez pas. OK. Les déclencheurs de page sont plus faciles à trouver lorsque je suis ici. Nous ignorons tout cela et c' est la partie que nous avons nommée go inside. Et maintenant, nous en sommes à la partie animation. Ce que nous pouvons faire aussi pour vous aider, aider à améliorer la profondeur, c'est que vous pouvez jouer avec. Donc, en dehors de l'animation, nous ne faisons pas d'animation pour le moment. Nous allons juste revivre ici, dans mes styles. Je suis en fait ce nuage de façade. Je vais faire comme s' il y avait un peu de profondeur de champ floue. Je vais dire que certains filtres ont un effet et que l'un d'entre eux est bleu. Je peux donc le refuser. Le truc, c'est que tu obtiens ce que j'essaie de faire. J'essaie de faire en sorte que ce soit déconcentré. C'est probablement mieux quand vous avez quelques éléments de plus et que la course à pied en a quelques-uns. Mais oui, ça a l'air un peu cool alors déclenchez celui-ci, c'est bon. Est-ce qu'il semble que c'est peut-être de mauvaise qualité ? Je veux être évidemment floue sans que ce soit un flou fou. Vous pouvez jouer avec ces deux-là. Deux, c'est bien pour moi. Et ça veut juste dire que quand je prévisualise, j'ai l'impression que c'est un peu flou. Certains éléments sont focalisés. Tu vois que c'est un peu flou à l'extérieur ? Est-ce que tu aimes ça ? Tu peux regarder vers le haut. D'autres choses que je voudrais te montrer. Ce n'est pas le cas dans ce cas, mais vous pouvez définir les nuages de division à créer, mais pas dans l'animation. Et ici, nous pouvons définir le trop-plein sur masqué afin que vous ne puissiez voir que ce qui se trouve à l'intérieur. Tu peux jouer avec sa taille. Vous pourriez avoir besoin de le clipser car disons que les gros nuages se refroidissent, mais c'est le cas, vous en avez une partie en dessous. Une autre section qui n'a pas besoin d'être affectée car elle couvre tout. Tu peux l'enfermer dans une petite limite comme la mienne. La molette de défilement ne fonctionne pas vraiment, mais mon trackpad le fait. C'est magnifique. Comment le rendre plus beau ? Le lissage, le lissage, je pense que c'est activé par défaut. Maintenant, jetons un coup d'œil. Cliquez sur la division parent. Reprenons l'animation. Allons ici. choses se passent tellement bien. Maintenant, il est allumé à 50 % avec l'appareil éteint, allons-le complètement. En fait, c'est probablement le meilleur exemple. Et ce n'est probablement pas vraiment ce que nous voulons, mais cela nous donne un exemple. Tu vois que tout est si ralenti ? Regarde ça. Si je fais défiler la page. Tu peux voir si je fais défiler la page très vite ? Rien ne se passe vraiment jusqu'à ce que je dise que si je fais défiler la page, il faut du temps pour rattraper le retard OK, c'est le lissage ou, quand c'est un peu, ça donne juste un peu plus de réalisme, comme si ce n'était pas mécanique. Je peux y aller. Vous voyez qu'il rattrape lentement son retard ? Où si je l'ai à zéro, ce sera juste très mécanique et nous serons où que je sois. n'y a donc aucun amortissement. amortissement est ce que je veux. OK. C'est ce qu'on appelle le lissage. Qu'est-ce qui est bon ? Tout est bon. J'ai une pièce de théâtre quelque part, peu dans la partie supérieure. Les 70 % de poissons les plus élevés sont plutôt beaux. C'est quoi, un saut ? C'est parce que personne ne charge un site Web à mi-chemin. Vous chargez normalement un site Web ici. Il passe donc au mode aperçu. Et c'est ainsi que nous sommes habitués à amener les nuages là où ils doivent être. Est-ce que cela a du sens ? Personne ne verra ce saut. Je vais me débarrasser de mon autre truc. On va faire la dernière chose. Comment puis-je le faire fonctionner quand il est au sommet ? Alors faisons-le maintenant, cassons-le. Passons donc à la définition des nuages. Supprimons la marge. Nous avons toujours besoin d'une marge en bas parce que si nous ne pouvons pas faire défiler, nous ne pouvons pas faire fonctionner l' animation du défilement et elle fonctionne un peu, non ? Voyez-vous ici ? Passons à mes œuvres. Et ce que vous pourriez faire ici, c'est oublier la prochaine étape jouer avec votre animation et jouer ici jusqu'à ce que l'avant et l'arrière soient déplacés aux bons endroits. Ou ce que vous pouvez faire, c'est qu'ils vous permettent de faire celui-ci ici, les limites de l'animation. Vous pouvez donc cliquer sur n'importe lequel d'entre eux. Et ce qu'il fait, c'est qu'il dit : lancez l'animation, zéros se terminent à 100 % dans les animations. Voyons rapidement ce qu'ils entendent par là. Donc c'est ça, parler cet espace par rapport à cet espace, que faisons-nous ? Donc, il est dit qu'à ce zéro pour cent, appliquez-le lorsque vous commencez à saisir, ce qui ne fonctionne pas parce que cela fonctionnait avant parce que nous avons commencé à entrer, nous faisons défiler la page vers le bas. C'est déjà là, c'est entièrement visible. Il est entièrement visible. Je lance l'animation lorsqu'elle est entièrement visible. Maintenant, celui-ci m'a attrapé et tu te dis : « Oh, je vais changer l'envenimation pour qu'elle soit arrêtée quand elle sortira. Sachez que nous n'allons pas nous arrêter à la sortie parce qu'il va sortir tout de suite. Ce qui sera terminé à 100 % quand il commencera à sortir. Désolé, j'ai eu du mal à le laisser sur celui-ci. Voyez-vous qu'il est écrit « invisible » ? C'est pour moi, je ne sais pas. Je ne veux pas l'appeler mais je ne l'ai pas lu. Arrêté quand il est complètement visible, ce qui est le cas, et je veux qu'il soit dans l'animation, arrive au point de 100 % lorsqu' il est complètement invisible. Invisible, ce qui signifie qu' il faut y jeter un œil. Entièrement invisible signifie que lorsqu'il est complètement éteint, vous allez, passons à mon joli parchemin. On y va. Nous l'avons également au sommet. OK. Donc, la seule chose à faire, c' est que je ne vais pas trop m'y attarder, mais ici, tu peux jouer avec l'offset. Le décalage que cela signifie ici est en fait entièrement visible, mais il l'est déjà depuis un bon moment. Comme s'il y en avait déjà une partie au sommet. Pareil lorsque c'est totalement invisible. D'accord, vous pouvez décider que vous voulez terminer juste un peu avant. Il est totalement invisible. Et vous pouvez voir ce décalage à différents pourcentages. Amuse-toi avec ça. Ça devient assez ringard, mais vous obtiendrez la plupart de ce dont vous avez besoin sans rien de tout cela. Mais vous devrez peut-être modifier le décalage, il suffit de le faire glisser jusqu'à la valeur actuelle de 80 % pour voir quels sont les résultats. Vous avez une idée de la façon dont cela fonctionne ou ignorez et vous jouez ici. Ce que je finis par faire, c'est passer plus de temps ici à jouer avec les différents horaires de l'endroit où il se trouve réellement, à l'avant. Maintenant, quand c'est fini, si ça ressemble à ça ? Et puis allez voir un aperçu de ce à quoi cela ressemble ici. Prévisualisez à quoi cela ressemble. C'est par ici. Aperçu. C'est ce que je trouve plus utile. Encore une fois, si vous annulez , d' accord, après avoir fait glisser ces choses, si je les fais glisser, elles comptaient toutes ces petites étapes comme s'il y avait environ 1 000 petites annulations. Je vais juste le régler sur, je vais juste le faire glisser vers l'arrière. On peut probablement recturer. C'est bon, ça y est. C'est de la parallaxe. Dernier petit aperçu. En utilisant ma barre de défilement, en utilisant mon trackpad. Moi aussi, je l'aime bien. Ce sont les fondamentaux. Nous avons différentes couches, différents indices SI, et nous avons joué avec Al. Et que faisons-nous ? Nous avons fait un élément déclencheur. C'est en faisant défiler l'interview nous éditons notre animation. Avec ces outils, vous pouvez maintenant l' appliquer à d'autres choses. Donc, pour obtenir de bons exemples de ceux d'autres personnes, Workflow propose une fonctionnalité intéressante appelée Made in Webflow. Et vous pouvez saisir de la parallaxe. Parallax ne peut pas s'épeler autrement, mais parallaxe, c'est le mot que vous voulez. Et allez-y et regardez les exemples des autres. OK, alors jetons un coup d' œil à quelques-unes d'entre elles. Il y a juste des exemples incroyables ici, d'accord ? Et ils prennent en quelque sorte ce que nous avons fait et en ajoutent plus, plus M0 plus huit de plus. OK, maintenant j'espère que vous avez les outils nécessaires pour suivre ce genre de didacticiels. Hall, c'est une souris. Je l'adore. Nous en examinons donc un autre. Celle-là. J'adore celui-ci. Regarde les nuages bouger. Et il y a de la parallaxe. parallaxe et les nuages en mouvement doublent. Donc parce que celui-ci, oh, 3D et la parallaxe aussi. Parce que les routes peuvent être planes. Il y a des super cool. Quand tu le feras avec nous, Dan. Le parcours est déjà loin et ce sont ces anges. Je pense que nous avons fait beaucoup de choses. Bref. Vous devriez maintenant avoir certaines des compétences nécessaires pour pouvoir créer certains de ces éléments en suivant d'autres tutoriels. C'était amusant, surtout celui-ci, nous avons intégré des choses comme le débordement. Nous avons intégré des éléments tels que, rappelez-vous que nous avons fait de la position relative, l'index z absolu est une sorte de trucs intéressants pour que cette parallaxe fonctionne. D'accord, ça y est, la parallaxe dans Webflow est vue dans la vidéo suivante. 74. Le flux de Web est bon pour le référencement: Bonjour, je n'ai plus d' enregistreur d'écran dans la vraie vie. La vraie vie. Dans cette vidéo, nous allons parler de la Webflow est-il bon pour le référencement ? Et dans cette vidéo, nous allons parler de ce qu' est plutôt le référencement sur les pages et de ce dont vous êtes responsable en tant que concepteur de flux de travail ? C'est hors page. Et qui en est responsable ? Oui, faisons les deux. C'est donc une bonne chose pour le référencement. Je suis vraiment surpris. Je suis une personne relativement compétente en matière d'ACO, donc mon travail à plein temps, mais j'ai bâti quelques entreprises autour de moi. Oui. En gros, il s'agit de très bien se classer sur les moteurs OK, donc oui, j'ai été surpris quand je suis entré dans Webflow pour la première fois et de voir à quel point ils ont développé depuis qu'ils commencé sur ce que vous pouvez faire en tant qu'anomalie, c'est juste un truc un peu basique. Mais c'est le cas si vous avez expérience raisonnable en matière d'optimisation pour les moteurs de recherche, ou si vous voulez vous améliorer et vous assurer que les flux de travail en sont capables. La profondeur qu'ils vous permettent d'atteindre est surprenante. J'ai été surpris, alors oui, c'est bon. Nous vous montrerons dans les prochaines vidéos, comme certains éléments de base sur la page, mais oui, non, non je suis particulièrement impressionné par capacités de référencement du flux de travail. Tout d'abord, parlons du référencement sur page et hors page. Seo, optimisation pour les moteurs de recherche. Vous savez probablement ce que c'est, eh bien, le classement de votre site Web dans les moteurs de recherche. Nous devons optimiser pour cela. OK, et il y a en quelque sorte deux parties. Il y a sur page et hors page. En tant que concepteur de site Web utilisant Webflow, vous êtes entièrement responsable du référencement sur la page qui peut et doit faire partie de votre travail lorsque vous travaillez sur votre site. Le hors-page est quelque chose que vous pouvez faire, mais c'est souvent au client de décider. La différence, c'est que sur les pages , sur les éléments qui se trouvent sur la page, nous allons examiner des éléments tels que les méta-titres, les mots clés , le texte alternatif, des éléments relativement faciles à faire. Et puis les éléments hors page sont des choses comme des liens vers votre site. Je vous ai demandé, je crois, plus tôt dans le cours, si vous aimez ce cours, un lien vers mon cours Webflow, parce que ceux-ci sont difficiles à obtenir, vraiment difficiles à obtenir, mais ils sont vraiment précieux pour notre portfolio. Si quelqu'un y accède depuis un autre site, blog de quelqu'un d' autre ou un autre site Web de confiance qui dit : « Hé, ce type est vraiment doué en design UX ». Allez les consulter et il y a un lien vers ce site qui est incroyable, hors page. Ainsi, quelqu'un d'autre sur votre site Web est lié à vous. C'est un exemple de référencement hors page. Il y en a beaucoup plus, d'accord, et c'est un gros trou à ver, un trou noir, l'un des trous à explorer. Et cela devrait être l'une des choses que vous ferez fois que vous aurez acquis vos compétences en matière de flux obtenu votre Galen sur la page. K consiste à explorer le référencement hors page. Et oui, c'est un peu que vous pouvez faire de mieux, mais c'est assez, oui, c'est super précieux pour faire fonctionner un site, mais il y a potentiellement beaucoup de choses à faire. Je l'adore. Je vais suivre un cours complet sur le référencement hors page. Je le fais tout le temps à partir de mes affaires pour classer les puits où tu l'as trouvé ? Oui. Le référencement hors page que nous allons faire sur vous devez y aller et faire hors page est simplement de vous y mettre et je vais vous montrer où il se trouve et où cela doit être dans tous les flux de travail. 75. Les balises de titre de la méta description robots et la carte de site expliqués Webflow: Bonjour à tous. Dans cette vidéo, nous allons aborder référencement de haut niveau pour le site, d' accord, juste quelques choses à faire. Et nous examinerons également les balises de titre SEO et les méta-descriptions pour vos pages. Très bien, commençons par le référencement à l'échelle du site. Nous allons donc accéder à tous les sites Web que vous pouvez accéder aux paramètres de votre projet, comme une sorte d'onglet global de référencement de site Web. La seule chose que nous allons aborder ici est celle-ci. Assez important. En gros, au moment où nous sommes sur ce membre qui, sur ce type de site de développement, ressemble à un site Web de test avant qu'il n'obtienne son propre nom de domaine. Ce qui peut arriver, c'est que Google, Yahoo ou Bing ou tout autre moteur de recherche peut apparaître et indexer le site et potentiellement le classer. Le problème maintenant, est-ce que c' est encore en morceaux ? Ce n'est pas prêt pour les heures de grande écoute et je ne veux pas que Google pense que c'est le nom de domaine. Donc, quand je sortirai l'autre version, il y aura deux versions , et voici l'original. Donc, ce que vous pouvez faire, c' est dire Désactiver. Et ils parlent de flux de travail, de sous-domaines. Webflow nous donne donc ce site Web, le domaine, nous, le sous-domaine de celui-ci. Vous pouvez donc simplement dire Google, ne cochez pas ce bloqueur de site s'il vous plaît. Et cela ajoute un peu de choses au site Web de dire : «  Ne venez pas ici ». Il peut cependant être ignoré, car Google pourrait encore l'appeler, mais ils ne vous ajouteront pas au classement des moteurs de recherche. Lorsque vous obtenez votre domaine complet. Ça n'a pas d'importance. Vous pouvez le laisser allumé et le désactiver. Cela ne permettra tout simplement pas de rechercher ce type de site de développement. C'est pour ça que ce truc de robot est fait. Il va créer automatiquement un robots.txt et pour dire User-Agent, Google autorise l' accès à mon site. C'est possible, mais c'est juste pratique parce que vous ne voulez pas classer, je suppose, le site et ensuite rivaliser avec lui quand il sortira sur sa super URL dans le futur, je vais courir ici, je n'allais pas passer par trop de ça. Faisons-en une de plus. Activez cette option, d'accord, il suffit de générer un plan de site pour le rendre clair pour le moment, et votre site est assez petit. Ainsi, un moteur de recherche comme Google sera capable de l' indexer assez rapidement par index et moyen, par exemple, de le parcourir , de le consulter et de décider ce qu'il y a sur quelles pages, ce qui est important, de quoi il s'agit. D'accord, vous pouvez le rendre plus facile en générant un plan de site. Elles deviennent de plus en plus importantes lorsque le site devient énorme, d'accord ? Et vous pouvez vous assurer que les moteurs de recherche savent où tout se trouve et comment ils sont tous interconnectés. Mais pour le moment, un plan de site automatique est parfait. De plus, il existe de nombreuses listes de contrôle en ligne pour dire : est-ce que mon site Web est bon ? Et cela indiquera que vous n'aviez pas de plan de site. Vous pouvez simplement cliquer dessus et dire, maintenant je le sais. Très bien, donc c'est une sorte d'ensemble pour la page. Passons à des sujets plus spécifiques à la page. Revenez donc au designer. Très bien, chaque page contient des méta-informations que vous devez ajouter pour qu'elles puissent être aussi complètes qu'elles peuvent être lorsqu' elle est classée dans des moteurs de recherche tels que Google. Nous devons donc aller jusqu'ici pour accéder à nos pages ou à celle-ci. Tu peux aller dans les deux. Bref. Nous allons d' abord le faire sur la page d'accueil et commencer par ce petit rouage. Ce nom en haut. Vous n'avez pas à vous inquiéter de la façon dont vous le référencez dans Webflow. L'important est celui-ci, les paramètres SEO, il y a des balises de titre et une méta-description. Ils sont très importants car si vous ne les avez pas sur votre page, est peu probable que vous les classiez tous. Et une fois que vous les aurez remplis, ce n'est pas comme si, absolument, vous alliez commencer à vous classer numéro un, mais c'est l'une de ces choses où vous pouvez vous classer 1000000e. Si vous ne les mettez pas dedans, que font-ils ? Vous verrez une sorte de résultat de recherche ici. Ils apparaissent en fait dans les classements de recherche Google. Alors jetons un coup d'œil. Disons que j'essaie, que j'essaie, que j' essaie de me classer pour ça. C'est ce que les gens vont rechercher dans Google et c'est ce que je veux voir apparaître. Je veux donc que cela figure sur ma page d'accueil. C'est mon ensemble de mots clés le plus important. C'est local pour moi et c'est ce que je suis peut-être en train de faire. Je vais ajouter mon nom. OK ? Parce que quelqu'un cherche peut-être aussi mon nom à cause de mon portfolio. Je l'ai peut-être vu quand ils ont retiré mon portfolio. Je veux que mon nom sonne aussi. Tu peux y voir ? C'est ce que font nos pairs. J'ai fait une recherche ici dans Google, d'accord, pour le design Web Limerick, il y a quelques cartes. Je devrais donc aller m' assurer que mon bureau dispose d'un endroit précis. Assurez-vous que mon bureau est bien enregistré dans Google Business, d' accord, et vous verrez tous ces résultats en bas. Ces personnes peuvent vous voir une sorte de conception Web, de conception de sites Web, de limerick, de WebAssign, de limerick. Mais design Limerick, peux-tu voir à quel point cette balise de titre est importante ? Comme celui-ci, Web Design Ireland, d'accord ? Toutes les meilleures entreprises sûres à Limerick. C'est donc la balise de titre dont vous avez besoin pour être unique pour chaque page. Donc, si je vais vous parler mon portfolio pour le club de kayak de l' ADEA, je l'appellerais le projet de conception Web de kayak de l'ADEA à Limerick. Il est donc unique, mais il contient également mes mots clés. Cela peut donc être délicat si vous avez des centaines de pages, mais c'est très important car ne sert à rien d'avoir cela sur chaque page. Cela ne rendra pas votre site plus limerick en matière de conception Web, les moteurs de recherche ne savent tout simplement pas ce qu'il y a sur cette page ou ce qui est unique. Je pourrais donc avoir des pages où il s'agit d'UX, interface utilisateur ou de design graphique. Donc, d'une manière générale, tout tourne autour du design. Et tout tourne autour de Limerick. J'ai peut-être quelques domaines différents. Je suis dans le comté de Limerick, mais je suis dans une autre ville, peut-être un village. OK. Voilà donc le titre. Vous pouvez le voir là-bas. La description est tout aussi importante. Est-ce que ce morceau en bas est coupé pour que vous ne puissiez avoir qu' un certain nombre de caractères. Je ne me rappelle pas exactement ce que c'était. Est-ce que cela vous dit, si la longueur est de 155 à 300, cela décide que vous ne pouvez pas décider de la quantité coupée. Il suffit de le couper s'il le faut. Voici donc une description un peu plus longue. Encore une fois, je trouve que c'est difficile quand on est au début. Il suffit d'y jeter un œil, de saisir les mots clés que vous savez, s'il s'agit d'un secteur dont vous ne faites pas partie et que vous êtes responsable de cela. Sortez, faites une recherche, puis voyez ce que font les autres. OK, comment voyez-vous que nous avons conçu Limerick apparaît également dans la description, alors assurez-vous que cela se répète dedans. Mais c'est plus de la cellule. Ça fait monter les gens comme ça. C'est là que je dois être. Et c'est là que les gens confirment que c' est exactement ce que je recherche. J'ai besoin d'un site Web de commerce électronique ou d'un site Web exceptionnel. Alors allez y jeter un coup d'œil, surtout s'il s'agit d'un secteur d'activité, c' est plus facile pour moi parce que je m'intéresse à la conception de sites Web. Mais si je faisais un site web pour une fromagerie , ce serait difficile. Vous devez aller chercher des articles de fromagerie et vous aider à rédiger les descriptions émises. Maintenant, même si, disons que je le faisais pour la fromagerie, j'allais les voir et leur dire : OK, j'ai besoin de descriptions de ces pages principales. sont peut-être les cinq pages de haut niveau, et j'en ai besoin pour les écrire. Compte tenu des mots clés dont j'ai besoin. Ils doivent être uniques ou de la longueur dont j'ai besoin et je leur demande de les écrire, peut-être de leur envoyer un article la façon d'écrire une bonne méta-description, ou je peux l'écrire parce que c' est juste quelques clients que nous aimons. Je vais juste écrire ceci sur le site web d'un père. Je vais l'écrire moi-même. OK, alors écris ça, assure-toi qu'il y a de bons mots clés dedans. Ici, en bas. Les moteurs de recherche ou celui-ci ici, vous pouvez simplement utiliser la même balise de titre et la même description SEO que ACO, ce graphique ouvert est ce qui apparaît dans des choses comme Facebook et Twitter. Les avez-vous vus ? Et il y a un lien vers un site Web, il s'affichera. Ils l'appellent Open Graph ou est-ce que ce type de méta-titre et méta-description vous rend unique sur chaque page que vous créez. Si vous rédigez des articles de blog, assurez-vous qu'il s'agit d'un extrait de celui-ci. Il peut s'agir d'un extrait de celui-ci. C'est très bien L'un d'eux était unique tant qu'il s' agissait de votre tag titre et de votre méta-description. Très bien, je vais l'enregistrer et fermer l'EBIT, c'est vrai, c' est-à-dire Meta title et Meta description. Assurez-vous qu'il figure sur chaque page. 76. Qu'est-ce que le texte d'image Alt dans le flux Web: Bonjour tout le monde. Dans cette vidéo, nous allons parler du référencement des images. OK, ça s'appelle le texte alternatif. Cela suppose que vous pouvez ajouter pour aider à décrire l'image. Les moteurs de recherche l'apprécient. Nous discuterons également du texte décoratif. De plus, pouvez-vous ajouter du texte alternatif aux images d'arrière-plan ? Maintenant tu peux, il y a un moyen de le contourner. Très bien, parlons de ce que c'est, ce que vous devez y mettre , d'accord, du texte alternatif, vous éditez deux images. Pourquoi modifiez-vous l'image ? Est-ce qu'ils l'appellent alt parce que c'est un texte alternatif. C'est ce qui va charger, qu'est-ce qui va s'afficher ici ? L'image ne se charge pas, d'accord, c'est le texte alternatif, donc nous l'appelons texte alternatif. Plus important encore, c'est pour les personnes qui ne peuvent pas voir l'image. Ils ont des lecteurs d'écran et ils les liront. Il peut lire cela très facilement. Il est dit que frapper c'est je suis Daniel, concepteur de développement UX et Web à service complet. Mieux encore, on va arriver ici et tourner en rond. Il ne saura pas ce qu'il contient. D'accord, donc ce que nous devons faire pour aider ces personnes, et aussi pour les moteurs de recherche, les moteurs de recherche veulent s'assurer que votre site est accessible aux personnes malvoyantes. Et cela leur donne également un indice sur le sujet du site. Si c'est le seul texte de la page qui se trouve actuellement. OK, tout va bien, qu'y a-t-il d'autre à propos de cette page ? Et si c'est un designer qui travaille chez Lepto, accord, cela aide à combler le trou pour que le navigateur sache de quoi parle cette page. Donc, pour le modifier, vous pouvez le sélectionner ici dans les images, ou vous pouvez le faire dans votre panneau de ressources. Vous pouvez voir qu'il y a la même image. Je peux aller au COG et ajouter mon texte ici, ou je peux le faire ici. D'une manière très similaire. Vous pouvez dire « utilisez-le à partir de l'acide » ou je peux en ajouter un personnalisé ici. Pouvez-vous simplement l'écrire d'une bonne manière pour savoir quoi écrire ? Ne mettez pas simplement quelques mots clés ici, comme s'il n'y avait aucun mal. Je suis designer. C'est ce que je fais. Je suis un designer travaillant sur un ordinateur portable, je dois peut-être dire vêtu d'un costume. Il porte un costume. Oui. Cela m'aidera à le décrire comme si je le fais La meilleure méthode est de fermer les yeux et d'essayer décrire à quelqu'un qui vous a décrit que vous pouvez le voir. Fermez les yeux et essayez vous décrire à haute voix ce que c'est. Il y a Daniel Scott qui travaille et un ordinateur portable. Je suis en train de le faire. Ferme les yeux. Il travaille sur un ordinateur portable Mac vêtu d'un costume de chenille avec des arcs-en-ciel. C'est un texte alternatif utile car il aide en quelque sorte les gens à comprendre ce qui se passe sur le site. Vous vous demandez peut-être pourquoi. Peut-être que ce n'est pas vraiment approprié de porter ce costume. C'est peut-être tout à fait exact, mais nous le faisons parce que cela aide les malvoyants. Google aime aider les malvoyants et nous voulons être bien classés. Assurez-vous donc qu' il y a des mots clés. Tout ne va pas bien ? Limerick, n' écris pas de web design. Peut-être qu'il peut être conçu dans une conception Web sur un ordinateur portable. Oui, cela devient un peu délicat lorsque vous en êtes à votre 50e image, mais ne sautez aucune image, parcourez, ajoutez du texte alternatif au centre commercial. Il y a un moment où nous allons y jeter un œil et vous n' avez pas à le faire si cela n'apporte aucune valeur au lecteur d'écran. Jetons un petit coup d'œil. Nous avons des goûts en matière d'animation. Ce n'est pas dans celui-ci. Tu es juste là. Très bien, cette image ici fait cette image en discutant de ce qu'elle est et de ce qu'elle fait. Pourquoi est-ce à quoi ça ressemble ? Nuage flou orange. Est-ce que cela va ajouter de la valeur au site ou est-ce juste là pour la décoration ? Les nuages, c'est un peu un ion parce que c'est une sorte de nuage et je peux l'expliquer. C'est très facile à expliquer. Mais disons que c'est juste un graphisme de star, juste un peu chic ou quelque chose comme ça. Ce que tu peux faire c'est dire, en fait, c'est juste décoratif, d'accord ? Cela signifie simplement que vous pouvez voir a une valeur informative limitée. Cela signifie simplement qu' il peut être ignoré. Il suffit de le décrire comme une image décorative sans avoir à faire comme s'il s'agissait d'un nuage orange, comme le fait d'expliquer tout cela à quelqu'un qui est payé. Cela ne va pas être ajouté au site, aidez à l'expliquer. Et clairement des nuages et comment puis-je aider mon entreprise de conception Web à bien se classer, conception Web basée sur le cloud, ou peut-être que c'est le cas, mais c'est l'alternative. Vous pouvez soit l'écrire dans une description appropriée soit sur l'élément, soit le déposer, l' écrire vous-même sur la page, soit simplement le marquer comme décoratif. Et encore une fois, parcourez et faites sur chaque image que je fais pendant que je l'ajoute. Parce que sinon, si vous attendez jusqu' au bout, vous ne le faites tout simplement pas. Une question que je reçois beaucoup est due. Je n'ai pas deux images de fond. Pouvez-vous même le faire sur des images de fond ? Tu ne peux pas dire celui-ci. Il est en fait un élément de fond pour savoir où se trouve-t-il ? Hum, je ne m'en souviens pas. Est-ce que c'était une section dédiée aux héros ? C'était le contexte, il y en a un. Ce n'est pas quelque chose que vous pouvez ajouter du texte alternatif aussi, en redéfinissant l'écran, il le saute juste un peu. Si vous vous asseyez et que beaucoup d' entre eux servent de toile de fond, disons ici, disons que vous avez opté pour cela. Nous l'avons ajouté exprès en tant qu'image parce que je veux qu' il y ait un bon texte Alt. Je vais parcourir et ajouter un excellent vieux texte expliquant de quoi il s'agit parce que je voulais qu'il fasse partie de la structure du site Web. Je veux que les gens puissent le lire à l'aide de ces lecteurs d'écran. Et je veux que Google voie, comme toutes ces images ou liées au design, ce site Web doit porter sur le design. Donc, si vous l'avez défini comme graphique d'arrière-plan ici, car cela permet de le placer plus facilement par-dessus. C'est délicat. Et inversement, si vous voulez quelque chose qui soit une image d'arrière-plan, mais que vous voulez qu'elle soit lue par le lecteur d'écran et par les moteurs de recherche, vous pouvez le faire là où elle se trouve réellement un truc et tu as parfaitement positionné les choses au-dessus. Vous devez choisir l'importance de ces images pour les classements de recherche. Vous en avez beaucoup parce que dans ce cas, je l'ai en quelque sorte défini comme un symbole afin de pouvoir faire le dur labeur pour que ce soit exagéré et que je puisse le recadrer. Mais nous apprenons à recadrer des images parce que je veux qu'elles soient classées et qu'elles se trouvent dans le flux du texte et non pas masquées en tant qu'image d'arrière-plan. D'accord, c'est du texte alternatif pour les images. 77. Mots clés de référencement dans les titres et les URL dans le flux Web: Bonjour. Dans cette vidéo, nous allons parler des mots clés dans le référencement. Je vais vous montrer où ils doivent aller et quelques outils pour en choisir de bons. Très bien, allons-y. Ok, alors où sont-ils allés ? C'est facile dans les titres, accord, il faut de bons mots clés dedans. Mais sur la page, les navigateurs et autres bons endroits, en fait, la connaissance des mots clés est très utile pour les mettre dans vos anciens textes, vous assurant simplement d'utiliser les bons mots et de trouver d'autres mots que vous pourriez utiliser parce que vous pourriez en avoir assez de la conception Web Limerick, d' accord, donc des pages, et regardons ce que nous avons. Nous contacter. C'est délicat, ce n'est rien de plus qu'une page Contactez-nous, mais sur ces autres pages, je peux regarder de bons mots clés. La première est que j'ai un peu un sous-dossier appelé portfolio. Portfolio est un bon nom pour cela. N'oubliez pas que ce sera l'incroyable barre oblique du portfolio Slash de Dan sur le site Website.com. Dans ce cas, nous avons conçu un portefeuille de clubs de kayak pour une journée qui pourrait convenir. Est-ce que quelqu'un va rechercher portfolio de conception Web ? Peut-être. OK. Je pense que j'aime bien l' idée du slug K, parce que c'est ce qui se passe. C'est le nom que les utilisateurs de Webflow utilisent. Donc ça n'a pas vraiment d'importance. C'est ce qui sera diffusé sur Internet et ce que Google utilisera pour vous aider à comprendre votre site Web. Alors, qu'y a-t-il dans ce dossier ? Je vais dire conception de sites Web. Ce sera l'URL qui s'y trouve. Et puis il y aura toutes les autres pages qui suivront. C'est donc un bon endroit pour mettre des mots clés. Il veut que je dise que si cela est publié et que des personnes y renvoient des liens et que je modifie, cela brisera les liens. Tout va bien à ce stade, car personne ne crée de lien vers le site. Je ne fais pas de lien vers ça. personne d'autre. Il est donc facile de le modifier, de le sauvegarder. Jetons un coup d' œil aux autres. Regardons donc ces pages ici. En fait, passons à la page et au rouage. Encore une fois, c'est le slug k, donc c'est le nom de la page dans le flux de travail. C'est ici que les bons mots clés peuvent aller. Vous voyez que c'est en cours de conception Web ? Et puis je me répète nous avons conçu, alors peut-être que je ne devrais pas faire ça. Et cela, même si c'est le but du site, il n'est pas particulièrement bon. Les gens ne vont pas chercher des kayaks pour une journée. Je ne veux pas être classé pour les kayaks d'une journée. Je ne veux pas que quelqu'un qui cherche à faire kayak vienne me chercher. Donc c'est probablement trop long. Mais quelque chose comme ça est beaucoup plus utile pour décrire ce que je fais ici. Je ne crée pas de club pour un cerf kx, ou du moins je ne suis pas un endroit pour faire du kayak, mais je suis certainement un endroit pour les petites entreprises et Limerick pour faire de la conception Web, j'ai probablement besoin de couper quelques des mots qui sont là. Cela semble assez long, mais savoir ce que signifie q entrer ici, y dans la balise de titre et la description, peut être difficile. Alors, de quoi obtenez-vous les informations sur les mots clés ? Je vais te montrer ce que je fais. J'utilise le service payant. Vous pourrez peut-être en trouver des gratuits. Je sais que, surtout comme celui-ci, SEM Rush, vous pouvez faire un essai de sept jours. Il se peut donc que vous ayez un petit projet, que vous utilisiez la version d'essai et que vous en quittiez. Mais pour la conception Web à long terme, vous aurez besoin de quelque chose comme ça. Il y a un lien sur l'écran. Si vous voulez vous inscrire à ACM Rush, c'est celui que j'adore. C'est un lien d'affiliation, donc je reçois une commission si vous vous inscrivez mettez également le lien dans les projets de classe en bas. Elle est utile, entre autres, pour la recherche de mots clés. Donc, lorsque j'écris ce cours, nous sommes d'accord pour Webflow. J'espère toujours que lorsque je déciderai comment appeler le site Web, je pense que je vais l' appeler Webflow. Et disons que j' ai une vidéo à faire sur les images, sur les images d'arrière-plan. Donc je vais juste le taper dans quelque chose comme ça. Et j'y jette un petit coup d'œil. Et je pourrais appeler cela des images de fond. Mais pouvez-vous voir ici l'image de fond ne le sait pas, c'est tout. Il y a des vues 3D, 30 recherches par mois, ce qui ne semble pas très élevé, mais c'est un peu pour ce genre de choses comme si le flux sanguin obscur en lui-même n'était pas obscur, mais si ce n'est pas une voiture assurance ou quoi que ce soit de ce genre. Mais vous pouvez voir ici si je nomme cette chose appelée Comment ajouter une image de fond à la circulation sanguine, il n'y a pas tout à fait le double du volume de recherche. Donc je l'appelle aussi comme ça. Si je cherche juste des suggestions pour mémoriser notre fromagerie, vous pouvez commencer à taper des mots clés ici et à vous faire une idée de ce que les gens recherchent , car cela ne sert à rien en le mettant dans quelque chose qui ne va pas, que les gens ne recherchent tout simplement pas. C'est peut-être comme ça que tu l'appelles. J'appelle le salon. Ma femme et mes enfants ne savent pas de quoi je parle. Le salon. Tu veux dire le salon, comme si c'était le cas. Donc, si je fais des rénovations ici en Irlande, je ne vais pas l' appeler le salon. Et ça me dit aussi des choses intéressantes, comme ça, c'est que c'est facile de se classer de cette façon parce qu' il n'y a pas beaucoup de concurrence, juste d'autres choses super utiles. J'aime donc beaucoup quelque chose comme ça et cela m' aide vraiment, lorsque je crée des pages, à utiliser le bon langage et à obtenir les bons mots clés. abord, comme je crée de nombreux cours sur Adobe Photoshop, c'est l' une de mes activités. Faisons une formation sur Photoshop. Parce que quand j'ai commencé, c'est comme ça que je l'appelais parce que c'est ce que j'ai fait et c'est ce que j'ai mis sur mes pages. Tu es du genre, Super, Shake it out. Très bien, pour la formation Photoshop, cent 70 personnes la recherchent. Cool. Jetons un coup d'œil. Quand j'ai enfin comparé Adobe Photoshop, les cours vont provoquer un boom. Les gens utilisent le mot « coût » bien plus que la formation. Mais si je dis mon cours InDesign et ma formation InDesign, ils sont fondamentalement les mêmes. Certains d'entre eux se retournent. Certains d'entre eux sont plus enclins à utiliser la formation que les cours. Des choses étranges que vous pouvez découvrir grâce à des outils comme celui-ci. Et c'est incroyable de pouvoir aller voir un client, de commencer comprendre ces choses et de l'aider à créer les bonnes pages pour son site. Il leur manque peut-être de bonnes pages qui les aident. Ils sont très bien recherchés et ils devraient avoir une page dédiée sur ce site pour l'expliquer. Très bien, alors lorsque vous travaillez sur votre propre projet ou sur vos clients, faites-vous une idée des mots clés que vous pourriez utiliser et assurez-vous de les utiliser sur tout ce site avec votre texte alternatif, vos balises de titre ou vos méta-descriptions et dans les slugs de ces URL dans les en-têtes. Et pour ne pas réutiliser le même produit encore et encore, vous en utilisez des variantes. C'est aussi pour cela que c'est bon. Très bien, mes amis, c'est ma diatribe à propos des mots clés. J'ai adoré ce truc. Très bien, passons à la vidéo suivante. 78. Pouvez-vous exporter un flux Web auto-hébergé de code: Bonjour tout le monde. Nous allons discuter de cette vidéo, pouvez-vous exporter du code depuis Webflow ? Vous pouvez tout à fait, et c'est vraiment utilisable. Il exportera tous les fichiers, le CSS, le JavaScript, tout. Vous devez faire en sorte que cela fonctionne sur votre propre hébergeur, ou peut-être le confier à un développeur qui pourra pousser votre site Web un peu plus loin. Très bien, allons-y et jetons un coup d'œil, d'accord, à x quel est le code là-haut. Il y a un petit code d'exportation. J'ai ouvert mon site Web et le concepteur, je peux exporter le code, lui donner une seconde et vous pourrez voir le HTML et le CSS en fonction de ce que vous devez faire, vous pouvez simplement copier le code HTML et CSS et JavaScript dans votre propre fichier. D'accord, parce que tout est là. La seule chose, c' est que si vous n' avez pas de compte Workspace mis à niveau, vous n'en verrez qu'une partie et vous ne pourrez pas l'exporter. Je vais vous montrer où cela se trouve dans une seconde. Mais disons que c'est le cas, je travaille dans le noyau. Ils l'appellent l'espace de travail principal. Donc, un en partant du bas, je peux préparer un zip, lui donner un téléchargement malade. Très bien, j'ai un dossier. Je vais y enregistrer le zip. Voici le fichier zip et le dossier. Et tu verras que c'est très beau. Vous pouvez voir toutes nos pages sur ma page d'accueil, qui est la page d'index. Vous pouvez voir ma page de contact, l'animation que nous avons créée, les pages d'erreur. Et vous pouvez voir ce sous-domaine, alors que le dossier que nous avons créé s'appelait autrefois portfolio, nous l'avons changé dans la dernière vidéo pour devenir web design. Et voici ces deux-là. Vous remarquerez que les brouillons se trouvent également ici. Donc, quelque chose dont il faut être conscient. Vous pouvez maintenant copier et coller tout cela sur votre propre serveur d'hébergement. Pourquoi le ferais-tu ? Il est moins cher le faire sur votre propre serveur d'hébergement. Les inconvénients sont cependant que si vous entrez et que vous l'ouvrez dans un éditeur de texte, par exemple VS Code, Sublime ou Dreamweaver, et que vous commencez à le modifier. Vous ne pouvez pas le remettre dans Webflow. C'est une rue à sens unique. Mais si le client revient et souhaite une modification, vous pouvez revenir ici, apporter une modification, puis l'exporter à nouveau et le télécharger sur votre serveur tant que vous payez toujours pour cet espace comptes qui en appellent un, je te le montrerai dans une seconde. Maintenant, pour entrer dans un peu plus de détails, le problème avec ce site en particulier. Vous pouvez le voir ici quand il se chargera , cela vous avertira. D'accord, dans ce cas, tout fonctionnerait ici à l'exception du formulaire sur la page de contact. Les formulaires Webflow sont un peu difficiles à créer en ligne par vous-même. Elles semblent simples, mais il y a quelques vérifications et Malfoy note que cela doit continuer. Comme vous pouvez le voir ici, les exportations indiquent inclusion de fonctionnalités de formulaire natives. Vous pouvez utiliser le formulaire si vous savez comment le configurer vous-même. Les bribes que je t'ai données, ou tu pourrais les remplacer par quelque chose. Il existe d'autres services comme MailChimp ou d'autres services que vous pouvez mettre sur la page. Il y a peut-être un moyen, le plus important sera si vous pouvez le voir ici ? Nous aborderons les CMS et le commerce électronique dans les sections suivantes de ce cours. Mais ils ne fonctionneront pas si vous exportez le code et que vous les hébergez vous-même. Il y a beaucoup de contrôles, de bases de données et de validations qui doivent être pour que cela fonctionne. Donc, pour un site esthétique, des formes parfaites, nous pouvons contourner cela. Mais lorsque nous commençons à faire des choses qui sont espacées entre les CMA, comme un blog avec un client peut le télécharger avec un client ou un client peut commencer à travailler dessus. Ou si vous souhaitez commencer à travailler avec le commerce électronique, vous devez utiliser l'hébergement de Webflow, le code d'exploit. Jetons un coup d'œil. Je vais revenir à mon tableau de bord. Donc, pour moi, j'ai l'espace de travail principal. Vous êtes peut-être sur le Stata, qui est gratuit. Il se peut que vous deviez passer à celui-ci de base. Cela signifie que si vous voulez passer du temps dans Webflow, vous aurez besoin de celui-ci, car vous aurez besoin de plus deux sites hébergés sur lesquels vous travaillez potentiellement plus tout le reste. Et l'un d'eux est l'exportation de code. Une autre bonne utilisation de l'option d'exportation de code est même si vous n'allez pas être la personne qui l'hébergera parce que vous ne savez pas ce que cela fait, comment le faire. Vous travaillez peut-être avec un développeur qui le fait. Vous pouvez donc concevoir une grande partie du front-end, y compris low, le JavaScript, en faire un Webflow vivant, le faire pour vous. Ce serait quelque chose de tout à fait approprié à confier à un développeur pour ajouter cette base de données ou cette fonctionnalité de commerce électronique. Cela vous permet d'assumer une plus grande partie du travail. Et si tu es comme moi, tu as un trouble obsessionnel-compulsif à l'idée de tout aligner et d'être parfait, et de ne pas simplement laisser à quelqu'un d'autre le soin de faire le bien, espérons-le. Vous pouvez effectuer une grande partie de ce travail frontal pour le projet, puis transmettre ce dossier à un développeur. Vous trouverez également des développeurs spécifiques à Webflow . Maintenant, c'est devenu un peu une industrie où il y a des plongées qui aideront les gens qui sont comme moi à faire ces choses frontales, mais qui ne savent vraiment pas comment faire choses et les besoins de la base de données principale support parce que nous voulons prendre ce design et faire quelque chose que Flow ne peut peut-être pas faire juste avant de partir. C'est intéressant si vous n'y avez pas jeté un coup d'œil, vous pouvez voir ici que nous avons créé ce div avec la classe qui lui est appliquée appelée text logo. Autrement dit, pouvons-nous le voir ? Comme je l'ai vu, ce n' est nulle part. Regardons celui-ci. Nous avons un H1 appelé Hero. Il y a un tag span dedans. Jetons un coup d'œil au code d'exploit. Très bien, jetons un coup d'œil. Voici mon div pour la navigation et vous pouvez voir s'ouvre leur fermeture ici. OK, et alors où est mon héros ? Ça y est. C'est l'ouverture et la clôture de cet héritage que j'ai fait de l'ouverture et de la clôture. Et à l'intérieur, il y a quelque chose qui s'appelle Who's my heating ? Ça y est. Voilà mon H1. Il y a aussi un tas d'autres choses ici. Ceci est édité par Webflow. Fondamentalement, ils ajoutent tout. C'est le début. Je m'en souviendrai toujours. Ils ont mis un fanon W Hi. C'est quelque chose que vous n'avez pas créé, qu'ils ont ajouté pour que cela fonctionne. Et voici mon cours que j'ai créé intitulé Hitting here. Ça y est. Voilà mon texto. J'ai ajouté cette petite classe de span. C'est donc intéressant. La classe Span ne fait que faire tourner ce petit truc appelé designer. C'est toujours dans le H1. Tu peux voir ? Mais il tourne autour du designer et applique cette classe appelée secondaire. Si vous connaissez un peu le HTML et le CSS, c'est facile. Si vous êtes nouveau dans ce domaine, c'est vraiment intéressant et de voir comment tout cela se déroule, et j'aurais aimé écrire, c'est bien rangé. Html, est-ce. Regarde tout ça si beau. Pareil avec le CSS. Vous verrez qu' il y a un mélange de, voyez celle-ci ici, cette case à cocher. Je n'ai pas écrit celui-ci parce que c'est un trait d'union W gay, mais vous trouverez plein de choses que vous avez écrites et éditées. OK. Jetons un coup d'œil. Tu y vas. J'ai stylisé le paragraphe et j'ai fait ces choses. Je donne du style à mon a, qui correspond en fait aux anciens liens. J'ai créé cette section appelée section des héros et j'ai rendu Overflow visible. Je ne suis pas sûr de ce que je faisais là-bas. La navigation est ma section. OK. Pour la navigation et tout ce que j'ai fait c'est en faire une couleur de fond blanche, fff, jette un petit coup d'œil. Regardez, il y a mon bouton et tout le code que j'utilise pour le rendre aussi génial qu'il l'est, pour jeter un coup d' œil à l'export également. C'est juste intéressant. Voici donc la page d'accueil de la version 4.4. Je veux juste des pages d'erreur. Regardez le CSS, il est bien décomposé. C'est celui que j'ai fabriqué. Ceci est normalisé, ce qui l'aide simplement à fonctionner très bien sur différents navigateurs. Et c'est le Webflow qu'ils ont écrit pour nous lorsque nous glissons dans une navigation et qu'il fonctionne comme par magie. C'est parce qu'ils y ont appliqué un tas de classes pour que cela fonctionne et que nous n'avons pas eu à diffuser des images. Vous pouvez voir toutes les tailles grandes, petites et moyennes dans notre adorable favicon. Javascript. Javascript est utile pour le front end et les instructions. Ainsi, toutes les tâches de navigation mobile, type de menu déroulant sur ce type d' interaction pour les utilisateurs se font avec le JavaScript. Et c'est mon sous-dossier. Très bien, c'est ça, c'est exporter du code hors du flux de travail. 79. Ce qui est lu uniquement des liens dans Webflow pour: Bonjour tout le monde. Dans cette vidéo, nous allons regarder ce lien partagé en lecture seule ou partager un lien en lecture seule. Vous pouvez même créer cette copie. Il semblerait que les gens disent que j'ai besoin de votre aide, qu'ils obtiennent un lien, qu'il est en lecture seule. Ils ont une version complète de Webflow à utiliser. Ils peuvent consulter votre site Web, votre code effronté, vérifier ce qui se passe, vous donner des commentaires. Je vais te dire ce qui ne va pas. Totalement une raquette. Déplacez-le, mais il est en lecture seule. Donc, quand ils fermeront ça, ça ne cassera pas votre original. C'est pourquoi il s'agit du lien partagé en lecture seule. C'est super sympa. Oui, laissez-moi vous montrer comment le faire démarrer et vous montrer un peu plus de détails à ce sujet. Est-ce que je viens de vous montrer tout cela dans l'intro ? Je pense que je viens de le faire. Il y a encore un tout petit peu pour en discuter un peu plus, mais oui, c'est parti discuter un peu plus, . Tu es le bienvenu. Ok, donc pour avoir le lien, tu vas jusqu'ici. Donc, projet partagé et il y en a deux millions cette année, lien en lecture seule. Copions-le. Regardons un peu ce qui est fabriqué. Je vais envoyer ça à quelqu'un d'autre. OK. Donc je leur fais semblant de quelqu'un d'autre. Je m'appelle Jane. Et Dan m'a envoyé le lien en lecture seule parce qu'il a besoin d'aide. OK. Il dit qu'il demande : « Hé, regardez cette image ici ». Je ne sais pas comment les coins arrondis sont appliqués. Il faut que je les éteigne. Peux-tu aider Jane ? Et Jane a obtenu ce lien ? Et voyez-vous que nous sommes réellement dans Webflow, ce qui est cool. Jane n'a pas besoin d'être connectée Webflow ou d'avoir un compte. Ok, Jane peut juste rentrer chez elle. Jetons un coup d'œil. Je peux le faire en mode aperçu, off and look, c'est une version fonctionnelle complète du flux de travail. La lecture seule signifie simplement que si j'apporte des modifications ici, l'original ne sera pas mis à jour, ce qui est super cool. OK, je peux entrer ici et dire, d' accord, regardez ce qui se passe. Je peux fermer tout ça et dire : qu' est-ce qui est bleu ? C'est bleu. Très bien Dan, il existe une classe appelée Image Hero dont vous définissez le rayon sur 200, soit vous le remettez à mort, soit vous le définissez sur 100. D'accord, il n'y a tout simplement aucun moyen de l'enregistrer, mais il s'agit d'une version entièrement fonctionnelle du flux de travail qui permet aux utilisateurs de vous aider. Vous pouvez poser des questions sur des groupes et des forums, Webflow en a un également, d' accord, il s'appelle discourse.workflow.com. Publiez dans les commentaires de cette affiche vidéo sur l' un des groupes Bring Your Own Laptop. Et même si je ne peux pas tous les consulter moi-même, j'ai des centaines de milliers d'étudiants maintenant. Les forums qui regroupent Les personnes pleines d'ego qui sont à la fois en train d'apprendre et qui ont suivi le cours. Donc, en disant cela aussi, si vous voyez une question qui vous semble, je pourrais probablement la résoudre ou ce serait amusant de la comprendre, de vérifier, demander le lien en lecture seule et de jeter un œil et voyez si vous pouvez aider les autres à s'entraider. C'est bon, c'est ça. En fait, l'un des endroits où vous pouvez y accéder par ici. Vous pouvez également l'obtenir depuis votre tableau de bord. Vous pouvez entrer ici et dire que le cisaillement n'a pas importance sur la façon dont j'active le lien en lecture seule sur le partage, pour obtenir de l'aide, pour aider d'autres personnes. C'est un monde magnifique. C'est bon, c'est ça. Je te verrai dans la prochaine vidéo. 80. Cours de gestion de style et de nettoyage: Bonjour tout le monde. Dans cette vidéo, je vais vous montrer comment ranger toutes vos classes, tous les styles que vous avez créés dans ce cours, d'accord, j'en ai 13 qui n'ont tout simplement pas été utilisés nulle part. Je peux m'en débarrasser de toutes. Nous sommes dans ce gestionnaire de style. C'est utile lorsque vous finalisez un site qui passe au domaine ou que vous l'envoyez à un développeur. Et vous devez vous assurer qu'il est aussi propre et bien rangé que possible. Parlons-en plus facilement en vous donnant les bases. Mais parlons-en un peu plus en détail. C'est bon, il faut les nettoyer. C'est le Style Manager. Nous sommes venus ici un petit moment. D'accord, cela va me montrer tout ce que j'ai créé sur ce site ou que le flux de travail est créé en mon nom parce que j'ai oublié de le nommer. Et vous pouvez voir comment j'en ai 11 en direct qui n'ont été utilisés nulle part sur le site Web. Je vais donc cliquer sur Nettoyer. Et le seul problème, c'est que cela dépend de la façon dont vous travaillez. Vous êtes peut-être en train de créer styles que vous pourriez utiliser à l'avenir. Souvenez-vous de la marge gauche, marge de droite, de la marge inférieure, du haut. Cela pourrait passer et tuer tous ceux et vous pourriez les utiliser plus tard pour moi. Je ne l'ai pas fait. J'ai des textes de ce paragraphe qui n'ont pas été utilisés. J'ai cette classe de combo appelée button box-shadow qui n'a jamais été utilisée. Des tas de trucs. Donc je peux maintenant les passer en revue. Accroche-toi. Tu es mon pote. Je n'ai pas utilisé Buddy. Eh bien, ces trucs qu'on m'a fait, beaucoup de choses comme le hit et le corps, je n'ai tout simplement pas utilisé et je ne les ai même pas créés Webflow les a créés en mon nom parce que je changeais quelque chose. Ensuite, soit j'ai cliqué sur Annuler, soit j'ai décidé de récupérer la balise titre. Ce sera, désolé, la balise HTML qui les contient, je l'ai probablement fait au corps. OK, et puis j'ai juste oublié de supprimer la classe selon laquelle je suis un corps froid. Tu fais toutes sortes de bêtises. Il l'a nettoyé, et il ne fait rien d'autre que d'être plus propre. Et ici, il ne va pas commencer à essayer de suggérer des classes qui n'ont été utilisées nulle part et pendant cette phase d'exportation , d' accord, disons que je exporte pour l'héberger ailleurs. n'y a pas un tas de classes là-dedans que les développeurs aiment se gratter la tête, décider où c'était utilisé ou ils commencent à l'utiliser parce qu'ils se disent  : « Oh, tu l'as écrit, ça doit être utile » . Et ce n'était pas non plus pendant que nous étions ici. Le gestionnaire de styles est vraiment utile pour effectuer des recherches. Nous avons en quelque sorte examiné cela. C'est pourquoi j'aime utiliser le mot « dire texte » avant de commencer à décrire ce que c'est. Parce qu'il me montre les différentes classes de textes que j'ai créées pour mes cours de peinture. Pas beaucoup. OK, c'est très pratique de pouvoir les rechercher. L'autre point, c' est que vous avez peut-être quelque chose ici qui vous plaît, quand est-ce que je l'ai écrit ou est-ce que je ne sais pas ? Je vais trouver quelque chose. champ à tiques, c'est un nom terrible, qu'est-ce que j'ai fait ? Eh bien, peut-être que ce n'est pas un nom d'erreur. Il se passe beaucoup de choses avec ça. Qu'est-ce que j'ai fait pour que le formulaire trouve quelque chose , pas en attendant la grille trois, bon sang. Alors jette un coup d'œil. Où l'ai-je utilisé ? Vous pouvez voir que c'est sur une page appelée tests d'animation qui est utilisée. Alors jette un coup d'œil. Grille 3 qui entre ici. Elle va revenir ici, cliquer dessus, alors que sur la grille 3, tu es là. Ça y est. Trois bons. Et qu'est-ce que la grille 3 pour la fermer , elle ne fait pas grand-chose. C'est appliqué. Qu'est-ce qu'il fait ? Cela fait en sorte que ma grille ait trois colonnes large et seulement zéro ligne. Donc, si je supprime la classe supprimée, elle reviendra à la valeur par défaut. Ce n'est pas ce que je veux. Oui, bien, Three doit rester, mais je pourrais l'appeler page de test d'animation de grille. Ok, alors tu y vas. Le gestionnaire de styles, je vais annuler avant le nettoyage. Oh, je ne peux pas annuler un lien vers la page. Si je change de page, les annulations sont effacées. OK. Donc je vais y retourner. Revenez en arrière. OK, c'est fait pour toujours. Allons créer une classe et la supprimer. Je vais donc créer une classe appelée axes. Faites-le simplement pour diviser une classe globale appelée chose. OK, je dois le faire. Je suis du genre, Oh oui, ça va être génial. Ce sera une largeur de 100. OK, et c'est ce que ça va faire. Et puis plus tard, je me suis dit que je n'avais vraiment pas besoin de ce truc. Donc je vais être supprimé. Vous pouvez entrer dans les styles et cela doit être fait en bas plutôt que de manière alphanumérique. Tu peux les commander comme ça, là où elle le peut. Mais ils se trouvent dans la liste de la cascade, la feuille de style en cascade. La dernière chose que j'ai faite, c'est que vous remarquez que c'est la seule qui ne comporte pas de petite ligne parce que ces petites lignes vous indiquent simplement où elle est appliquée et sur quelles autres pages elle est appliquée. Donc celui-ci, ici, ne s'applique à rien car je l'ai supprimé. Donc, je peux juste aller ici et supprimer. Alors que vous remarquerez que dans la grille 3, il est indiqué de cliquer dessus. Je ne peux pas supprimer, est-ce que cela fonctionne ? Alors que celui-ci dit que vous avez été bon, nettoyé, d'accord, donc c'est quelque chose que vous devriez faire avant de terminer un site, envoyer au client, télécharger sur son hébergeur principal, que ce soit Webflow ou sur votre propre domaine, ou avant que vous ne le remettiez à un développeur. D'accord, ça y est, c'est le gestionnaire de styles et le nettoyage des styles. 81. L'utilisation de votre propre nom de domaine sur votre site Web sur le Webflow: Bonjour à tous. Dans cette vidéo, nous allons publier quelque chose sur notre propre nom de domaine. C'est la partie la plus excitante. C'est ici. Daniel Scott, webdesign.com. C'est en direct, les gens peuvent le voir. It's got a good 60 URL est de loin la partie la plus excitante de tout ce processus pour moi. Comme si c'était en direct, les gens peuvent le voir. C'est incroyable quand c'est la première fois, quand vous créez des tas de sites, c'est quand même assez excitant. Dans cette vidéo en particulier, je vais vous montrer comment le faire automatiquement en utilisant quelque chose comme GoDaddy ou exactement comme en utilisant GoDaddy. Et dans la vidéo suivante, je vais vous montrer comment configurer manuellement votre domaine personnalisé en utilisant quelqu'un d'autre. Mais la version automatique de Webflow est assez astucieuse. Très bien, allons acheter un nom de domaine et le connecter à notre flux de travail. Tout d'abord, vous allez dans Publier et personnaliser le domaine. Cliquez sur le lien qui se trouve en dessous. Et l'une des deux choses suivantes va se produire. Si vous avez toujours un compte gratuit pour votre site. Ces données, vous devrez au moins passer à la base, car c'est à ce moment-là qu'ils autorisent les domaines personnalisés. Sinon, vous êtes coincé avec celui-ci. Tu peux totalement utiliser celui-ci. C'est juste un peu étrange, d'accord, donc une fois que vous l'aurez mis à jour, il ressemblera un peu plus à ceci. Je vais te montrer, d' accord, la même chose. Cliquez sur le bouton. Et cela vous amènera aux paramètres du projet, auxquels vous pouvez accéder si vous le souhaitez. Tu peux le voir là-bas ? C'est sous Publishing. Je suis dans mon portefeuille. Je vais ajouter un domaine personnalisé. Et c'est un peu permis maintenant parce que j'ai ce plan de site. Maintenant, si vous avez arrêté un domaine existant, vous avez peut-être déjà votre dub, dub, dub point Dan is awesome.com et vous devrez prendre une longueur d'avance dans la vidéo pour les personnes qui Je n' ai pas de nom de domaine. Je vais d'abord le parcourir avant de l'ajouter ici. Maintenant, en achetant un nom de domaine, il existe des versions automatiques via Workflow, et c'est totalement cool. Gu ne travaille pas et mon pays pour une raison ou une autre, tout comme il ne le fait pas. Je vais donc utiliser GoDaddy. Vous verrez maintenant un lien sur l'écran qui est mon lien d'affiliation avec GoDaddy. Donc, si vous vous inscrivez auprès d' eux et que vous utilisez mon lien, ils me donnent des frais de recherche, aident à me soutenir et à soutenir ce que je fais. Sinon, vous pouvez accéder directement à GoDaddy. Je ne serai pas offensé et n'utiliserai pas Google. Cela peut fonctionner dans votre pays, mais je vais suivre la voie GoDaddy. Maintenant, quel métal allez-vous l'acheter ? Si vous avez déjà un compte ailleurs, vous pouvez l'acheter à partir de là, puis passer à la vidéo où nous ajoutons le domaine existant, mais nous devons Achetez-le d'abord. Je vais acheter le mien rapidement. Nous le ferons ensemble car c'est amusant de choisir des noms de domaine. D'accord, donc je vais aller à papa et en haut, ça me permet de choisir et de rechercher un nom de domaine. Le site Web change. Il devrait être assez facile de trouver comment choisir un nom de domaine. Vous devrez peut-être vous connecter ou créer un compte, puis être déçu parce que quelqu'un a déjà le .com et papa vous proposera un tas d' alternatives pour les noms de domaine is.co, OK ? De toute évidence, les dot-coms sont les meilleurs. Les bons sont souvent partis. Donc, une diode ou co, pourrait être une bonne deuxième meilleure solution. Il existe de nombreux générateurs de noms de domaine, et ils peuvent vous donner des suggestions sur ce que vous pourriez considérer naturellement comme un bon père, il est plutôt doué noms de domaine, et ils peuvent vous donner des suggestions sur ce que vous pourriez considérer naturellement comme un bon père, pour le faire fonctionner différents types d' extinctions ici. La seule chose à laquelle il faut faire attention est que pour la première année, allez vérifier parce que parfois, celles-ci sont comme si la technologie par points pouvait être géniale pour la première année, mais ensuite vous pouvez voir que tous les deux ans coûtent 70 dollars, ce qui peut convenir selon ce que vous voulez. Mais il y a toujours un peu comme, oh, vous l'obtenez pour 0,01$, à condition de le faire la première année, pour une inscription de deux ans. Il suffit de faire attention à cela. Et il y a plein de trucs sympas. Cela passera et vous donnera en quelque sorte différentes options. De toute évidence, il faut faire attention à ceux qui sont promus. Vous n'êtes pas obligé, mais sachez simplement que les gens payent pour vous les montrer. D'accord, donc je vais aller le payer dans les informations de ma carte de crédit. Je ne vais pas enregistrer cela. Je reviens dans une seconde en fait, avant que tu n'achètes. Je voulais juste passer en revue un certain nombre de choses. Peu importe le bureau d'enregistrement que vous allez utiliser pour enregistrer votre nom de domaine, il essaiera de vous vendre d'autres produits et vous les voudrez peut-être. D'après mon expérience et vos propres recherches, toute cette protection complète et tout ce qui concerne votre nom de domaine ne font rien. C'est toujours Nita. Qui l'est ? Vous devez toujours communiquer vos informations sur ce qu'est le pli. Il pourrait être partiellement masqué et tout cela pourrait empêcher les pirates informatiques. Pour moi, j'ai l'impression que c'est peut-être un peu alarmiste. Vous pouvez passer en revue et activer votre propre authentification à deux facteurs pour vous assurer que personne ne peut effectuer de modifications. Mais ce n'est pas si cher, si tu veux, je ne sais pas. Il suffit de tout allumer. La seule chose que nous voulons faire ici est nous ne voulons pas arrêter de facturer le site Web. Nous avons une sorte de drame. C'est gratuit, ça ne règle vraiment rien. Et ici, avez-vous besoin d'adresses e-mail à votre hauteur ? J' utiliserais probablement quelque chose comme Google pour gérer les e-mails. Je n'utiliserais donc pas Go Daddy, vous pouvez, mais Google propose un hébergement de messagerie Web professionnel. Le flux Web ne le fait pas. Ou vous pouvez simplement utiliser votre adresse Hotmail ou Gmail Yahoo actuelle et ne pas utiliser une adresse e-mail professionnelle. Donc je vais y aller, non merci. Ensuite, je vais continuer à couper. Ensuite, je vais passer à avoir un tableau, d'accord, donc vous avez et acheté un nom de domaine ou un nom de domaine vertical, allez d' abord papa parce que c'est rapide et facile. Ensuite, je vais vous montrer comment le configurer manuellement si vous utilisez un autre fournisseur d' hébergement de domaine. Nous allons donc ajouter notre domaine personnalisé. Nous en avons acheté un. Et maintenant, je vais saisir le mien. Il va ajouter un domaine. Ça va, mon étui reconnu que je l' ai acheté via GoDaddy, ce qui le rend super facile. Je le ferai manuellement dans la seconde. Très bien, il vous sera peut-être demandé de vous connecter à votre compte. Ça va expliquer ce que ça va faire. Je vais cliquer sur Connecter. Connexion manuelle. Il ne s'agit pas simplement de faire le truc automatique. Donnons-y une seconde. Très bien, cela apparaît. Nous avons examiné cette question plus tôt. N'oubliez pas que nous avons activé et désactivé l'indexation du site intermédiaire. OK, laissez-le faire son travail et nous y serons partiellement. C'est connecté. Mon problème est que je n'ai pas publié le site. Et en fait, avant de partir, nous devons définir une valeur par défaut. Donc, pour le moment, il existe en fait deux versions de votre site Web. Il y a une largeur, dub, dub, dub, dub, et une sans rien, même en faire une par défaut, ce qu'elle va faire , c'est rediriger. Quand quelqu'un tape juste ceci, il va rediriger vers celui-ci. Sinon, nous nous sommes retrouvés avec deux sites. C'est bizarre, je sais, mais fais celui-ci la valeur par défaut avec le dub, le dub, le dub. Et nous pouvons aller à Publish. Maintenant, nous pouvons retourner dans notre concepteur et le publier, ou nous pouvons le faire à partir d'ici. Bon, revenons au designer parce que c'est là que nous sommes le plus à l'aise en ce moment. C'est ce que nous savons. OK. Nous sommes dans un endroit confortable, nous pourrions porter des pantalons confortables. Je vais aller à Publish. Nous n'avons eu que cette option à partir de maintenant, d' accord, maintenant nous avons celle-ci. Nous pouvons les publier tous les deux. Tu es prêt ? J'utilise City. Vous allez publier votre tout premier site Web. Peut-être. C'est un moment très excitant ne marchera probablement pas. Pourquoi ? Parce que j'ai acheté le nom de domaine il y a environ 5 minutes. Parfois, ces noms de domaine peuvent mettre un peu de temps à disparaître et à être présents. Très bien, nous sommes prêts à partir. Découvrez-le. Voyons voir si cela fonctionne. 321. C'est La Hey, tout de suite. Cela n'arrive jamais normalement quand je fais ça. Cela peut prendre quelques heures pour que la DNase se remplisse et toutes sortes de choses doivent être magiques entre Webflow et Go Daddy, j'adore. C'est donc en ligne maintenant. C'est mon propre site Web. Cela semble plus réel, n'est-ce pas ? Maintenant ? Allez consulter le site maintenant vous-même. OK, Daniel Scott web design.com. Je vais y ajouter un petit œuf de Pâques . Tu es le bienvenu. D'accord, mais si ça ne fonctionne pas, contactez Webflow, contactez Go Daddy, ils sont tous les deux très utiles pour faire avancer ces choses parce qu'ils veulent que vous viviez une expérience formidable pour ce que vous payez sur Webflow et GoDaddy, ils y ont l'air favorable. La seule chose que vous pourriez faire maintenant, c'est que vous pourriez revenir ici et vous pourriez même vous dire, comme ces deux-là, si j'ai encore besoin de celui-ci ? Vous pouvez simplement continuer à publier directement, apporter des modifications directement sur le site Web principal. Mais ce que vous pourriez faire, c'est apporter des modifications et les publier sur le site Web de mise en scène pour que les clients puissent modifications et les publier sur les vérifier, quelqu'un d'autre pour vérifier avant de partir et de partir. OK. Je vais m' engager à le mettre également sur le site principal. OK, donc c'est un peu comme si votre travail était en cours. Et voici la dernière diapositive. C'est très excitant. D'accord, c'est la façon super automatique de le faire. Nous avons acheté un nom de domaine et en gros, nous avons laissé Webflow se connecter à Go Daddy, ce qui est super utile. Dans la vidéo suivante, nous allons le faire manuellement. Allons-y. 82. Connectez manuellement votre propre nom de domaine personnalisé dans Webflow: Bonjour tout le monde. Dans cette vidéo, nous allons voir comment configurer un nom de domaine qui existe déjà. Ce n'est pas ce que nous avons fait automatiquement dans la dernière vidéo via Go Daddy ou Google Domains Nous allons examiner quelques fournisseurs d' hébergement auxquels j'ai accès, Bluehost et GoDaddy. De plus, je vais vous montrer où vous pouvez obtenir de la documentation pour tous les différents hôtes Si vous utilisez l'un d'entre eux, vous devriez être en mesure de trouver où mettre à jour les enregistrements DNS manuellement. Pour accéder à la bonne zone de configuration de votre nom de domaine, vous devez vous rendre à l'endroit où vous avez acheté votre nom de domaine. Je vais vous montrer Go Daddy et Bluehost. En gros, ce que vous recherchez où que se trouve votre domaine, il y aura quelque chose à voir avec le DNS. C'est ce que vous recherchez, vos serveurs de noms de domaine, accord, les voici également sur GoDaddy. Il y en aura à différents endroits, mais vous vous retrouverez à un endroit très similaire. Alors vérifions-le. Ensuite, trouvez votre site et vous souhaitez accéder à cet onglet de publication. Ils ont été renommés comme dans la possibilité de publication ou d'hébergement. Et nous allons ajouter un domaine personnalisé. Nous allons modifier un domaine existant. Je vais configurer celui-ci ici avec le pluriel et ajouter le domaine. Et ça va me donner quelques options. Cela change également. OK, donc si vous n'êtes pas sûr, passez à la commande Il y aura un lien sur la page ici où vous pourrez obtenir aide directe de Webflow s'ils mis à jour ou s'ils pensent que cela ne fonctionne pas, allez consultez-le et n'hésitez pas à contacter Webflow ou votre DNS à qui vous avez acheté votre nom de domaine et expliquez-lui ce que vous essayez de faire. Ce que vous essayez de faire, c'est de mettre à jour les enregistrements, l'enregistrement A et en bas, l'enregistrement CNAME. Et c'est un record ici. Donc, ce premier ici a deux options. Utilisez simplement celui qui est recommandé, pour ne pas entrer trop dans les détails sur les redirections et tout le reste, mais faisons celui-ci. Nous devons ajouter deux enregistrements DNS K pour ce type et ajouter ce que vous recherchez. Laissez-moi vous montrer à quoi ils ressemblent dans les deux sociétés de noms de domaine auxquelles j'ai accès, GoDaddy, c'est assez simple. Je cherche le type qui est un, et le nom qui se trouve dans le nom d'hôte est Ed, et c'est un enregistrement. Je dois supprimer ces deux éléments pour, avant de le faire, prendre une capture d'écran de tout ce que vous allez changer, coller une capture d'écran de tout ce qui se trouve sur ces pages afin que, en cas de problème, vous ne Fais-le correctement. Tu peux au moins le remettre là où il était. Supprimez-les tous les deux. Si vous ne pouvez pas les supprimer pour quelque raison que ce soit, ou si votre hébergeur n'y a tout simplement pas accès , contactez-le, demandez-lui, car s' ils sont bloqués, cela peut signifier que vous payez pour un autre service qui exige qu'ils ne soient jamais modifiés. se peut donc que vous deviez le déverrouiller. D'accord, donc je les supprime tous les deux dans les dossiers, rien d'autre. OK. Et je suis Bluehost. Ils le font légèrement différemment. Si je mets à jour ce DNS , j'ai conservé tous les enregistrements dans leur propre petit groupe. Donc je n'en ai qu' un dans ce cas, vous n'avez peut-être rien ici. Va supprimer celui-ci. Et nous allons ajouter deux enregistrements. Rappelez-vous de faire une capture d'écran avant de partir et d'apporter des modifications. OK, donc je vais entrer, supprimer ces actions ne peuvent pas être annulées. Je viens de le copier parce que c'est une sorte de démo pour cette classe. Je vais le recoller dans une seconde. OK, donc c'est parti, mon site web ne fonctionnera pas pendant un petit moment. Je vais donc ajouter mon dossier. Et cette affaire, c'est un peu bizarre. Le record, cela suppose que vous voulez dire un enregistrement. Il se peut que vous deviez être un peu plus explicite. Il suppose donc que vous allez créer un code d'erreur. Il est hébergé à. Et pointe vers. C'est là que vous avez récupéré les éléments du flux de travail. Donc, dans ce cas, je le veux. Si vous cliquez dessus, il le copie dans le presse-papiers, ce qui est cool. OK, donc tapez le nom, passons à Bluehost. Entrez l'enregistrement. Ils ont différentes manières de le nommer. Ça aura plus de sens dans une seconde. Je vais quitter la planche TTL. Cliquons sur Enregistrer le mien. On dirait que cela n' apparaissait pas dans celui-ci. Tout afficher ou est-ce que c'est, hé, c'est en bas. Donc, vu la façon dont ces hôtes travaillent, ce qu'ils aiment faire, c'est m'embêter. Ils les déplacent sur différents hôtes et à différents endroits. Si vous rencontrez des problèmes, vous pouvez. Il y a ce site Web ici ou cette page Web que Webflow a créé, d'accord, et c'est vraiment un excellent moyen parce qu'ils ont parcouru un tas de domaines, ou du moins des fournisseurs de DNS, que faites-vous Tu veux les appeler ? Et ils vous montreront comment y accéder. D'accord, puis j' ai fait de la documentation. Je vais l'ajouter aux projets de classe. Il y aura une option de lien que vous pourrez sauter vers le bas et le tour est joué. Cela pourrait également changer. Alors allez y jeter un coup d'œil. S'il s'agit d'une erreur, faites-le moi savoir et je pourrai mettre à jour ce lien. Oui, c'est un peu embêtant d' essayer de faire en sorte que cela se produise. Pareil. Je vais ajouter mon deuxième disque. OK. Dans celui-ci, il y avait toujours un at et je vais le copier dans Bluehost. Vous êtes donc à zéro point et cliquez sur Enregistrer. C'est donc la moitié du temps. Dans GoDaddy, c'est un peu plus facile. Je ne vais pas les supprimer, mais disons, faisons semblant de les avoir, si je les ajoute, c'est un peu d' options, plus de menu déroulant. Et ce sera à, puis collez-les tous les deux ici et laissez le TTL par défaut. Donc vous vous retrouverez avec ceux-là, votre hôte sera différent, n'est-ce pas ? Que devons-nous faire d'autre ? Eh bien, vous pouvez maintenant cliquer sur Vérifier le statut. Il va aller vérifier. Tu l'as bien fait et tu reviens. Parfois, le remplissage des enregistrements DNS sur Internet peut prendre quelques heures . Alors fais un test maintenant, pour voir si ça marche. Je vais fermer ça. Et le bit suivant est le nom C et les coches recoder, du même genre. Donc, en fonction de votre hébergeur, trouvez et supprimez ce que vous recherchez, le nom C avec un dub, dub, dub, dub, là, supprimez celui-ci et ajoutez-le à nouveau. OK, Bluehost les sépare, ou est-ce que c'est un nom en C ? J'ai donc celui-ci dont je veux me débarrasser. OK. Je vais t'en aller et m'en aller. Je n'ai pas à m' inquiéter pour les autres. Juste ce dub, dub, dub recode comme avant. Faisons comme si je l'avais supprimé. Et je vais ajouter un nouveau record. C'était du dub, du dub, du dub. Et cela indique, allons saisir cette option ici, copier face, et nous allons l'éditer. Je ne vais pas le faire ici parce que je veux le faire plus que je ne l'ai fait. Et voici mes records de tics. J'en ai donc un que je dois supprimer. N'oubliez pas de prendre des captures d'écran tout et de les copier et de les coller , car certaines des informations que vous ne voulez pas saisir ne seront pas supprimées, mais je veux supprimer cet enregistrement k et remplacez-le par un nouveau. Ce flux me dit comment il s'appelle. Super facile. Encore une fois, vous allez vérifier le statut et j'espère qu'il finira par dire : « Tout va bien ». Et la dernière chose que vous devez faire est, comme nous l'avons fait dans la dernière vidéo, faire de l'une d' entre elles la valeur par défaut. Et pour nous, nous allons faire du dub, dub, dub une valeur par défaut. C'est important ici car nous avons dit que nous utilisions cette option qui indique que nous voulons notre domaine redirige tout vers cette option. Le dub, dub, dub. est , si vous ne le voulez pas, vous voulez que tout soit redirigé vers le non dub, dub, dub, dub, dub, dub, make default. Maintenant, si vous avez déjà configuré quelque chose sur votre hébergeur ou si vous accédez à des sous-domaines, vous pourriez aimer beaucoup d'autres choses. C'est un peu délicat. Assurez-vous de contacter votre fournisseur de DNS en fonction de la qualité de son service. Je vais juste prendre une capture d'écran de ce que vous essayez de faire, expliquez simplement que Webflow m' a demandé de le faire. Pouvez-vous m'aider à y arriver parce qu'il est verrouillé ou parce que je ne le trouve pas. N'oubliez pas que Webflow dispose d'une très bonne connexion avec les côtés droits des documents ces sites pour y remédier. Mais n'ayez pas peur de demander. Ensuite, vous finirez avoir un site Web qui fonctionne, Daniel. Ceci. Vous finirez par vous retrouver sur un site Web qui fonctionne sur votre propre nom de domaine. Très bien, une petite rente. Celui-ci, configurant manuellement les enregistrements DNS pour votre site Web, conception Web hardcore. C'est bon, ça y est. Passons à la vidéo suivante. 83. Tests sur votre téléphone mobile réel: Bonjour. Dans cette vidéo, je vais vous montrer quelques méthodes de test sur un appareil mobile. Nous allons tester et utiliser une fausse méthode. Et nous allons tester d'une manière réelle la fausse méthode consiste simplement faire dans le navigateur assez facile, bon sur un mobile. Et vous pouvez le faire glisser et vous pouvez voir les petits points d'arrêt en bas. Nous en avons parlé. OK, c'est un moyen. Un autre moyen intéressant est de publier le site. Publiez donc un domaine. Et puis dans le navigateur, en particulier Chrome, d'accord, si vous n'avez pas Chrome et que vous êtes un concepteur Web, vous l'installez probablement parce que c'est le navigateur le plus populaire et vous devez vous assurer qu'il fonctionne sur ça. Cependant, dans Chrome, vous pouvez accéder à Inspect et il y a une option en bas. Tu peux voir cette petite icône ici ? Parfois, c'est par défaut à droite ou à gauche. Je pense que c'est par le bas, normalement. Mais jetons un coup d'œil. Vous recherchez cette icône et vous pouvez cliquer dessus. Et vous pouvez dire réactif. Je voulais parler des différentes tailles et comparer cinq K à la 12e Pro ou à la dernière version. Pouvez-vous avoir une idée de Pouvez-vous le voir se réduire afin que vous puissiez voir à quoi il ressemble sur cette taille réelle. Vous pouvez voir que j'ai besoin de m'occuper de mon bouton. Donc, c'est une chose. Une autre bonne façon de le faire est de le publier tout même, de me voir un e-mail avec ça et de l'ouvrir sur le téléphone, mon téléphone dans Chrome parce que je suis un utilisateur de Google. Vous verrez peut-être si cela fonctionne pour vous. Je peux cliquer dessus dans Chrome et dire que je peux partager sur mes appareils, je peux partager sur mes appareils je peux simplement l' ouvrir et l'envoyer sur mon téléphone. C'est un peu plus rapide. Et ensuite, ouvre-le les mains sur mon téléphone. OK. Et je vois ça. Tu peux le voir ? Et je peux interagir avec elle. Ce qui est bien, c'est je peux voir que les boutons sont cassés, mais cela me permet d' appuyer sur tous les boutons. Sont-ils assez grands pour cliquer, ce qui est une chose. Google testera votre site pour voir si vous pouvez réellement le faire physiquement, si vous avez de minuscules boutons. Donc ça ne va pas me plaire. Vous pouvez donc faire un test, car parfois, il a l'air bien à l'écran et votre jambe a l'air bizarre. Et personne. C'est le mien. En plus, c'est amusant. C'est amusant de voir votre site Web sur Internet, sur votre téléphone. Il suffit de le coller sur le produit, de publier d'abord, puis de l' ouvrir dans votre navigateur. C'est assez simple. D'accord, des tests sur un vrai téléphone. Votre projet de flux de travail. La vidéo suivante. 84. Projet de cours 06 - Portfolio complet: C'est le moment du projet de classe pour mettre à l'épreuve toutes les connaissances que nous avons apprises dans cette dernière partie Vous pouvez utiliser vos propres images. Si vous créez votre propre livre, c'est un bon point de départ, accord, utilisez vos propres images. Vous êtes dans la tête, ce genre de choses. Si ce n'est pas ce que vous voulez faire, vous pouvez trouver des images d'espace réservé sur Unsplash ou Pixels PEX ELS k, et vous pourriez obtenir des dommages et intérêts pour le portfolio à partir de là. Que faites-vous ? Il reste trois pages à terminer : la page d'accueil, la page Contactez-nous et une, au moins une page de portfolio. OK, voici mon lien vers mon design ici. OK, prenons juste quelques images de remplacement pour le moment, mais c'est ce que j' allais faire pour les miennes. Je vais partir et le construire dans un moment. Mais celui-ci, ici, dépend de vous. L' apparence que vous souhaitez lui donner peut être simple, elle peut être un peu plus avancée. Vous pouvez passer du temps à le concevoir. C'est à toi de décider. Il s'agit principalement de s'entraîner et Webflow n'a pas besoin d'être la meilleure solution. Vous pouvez copier ce que j'ai, du maquillage, quelque chose qui vous est propre, faire recherches sur ce que d' autres personnes ont fait, laissez-vous inspirer. OK, donc ce sont les trois pages. Assurez-vous qu'ils fonctionnent également sur mobile. OK. Tous les différents points d'arrêt. Telles sont les exigences. Ce sont les points que nous avons abordés depuis le dernier cycle de projets, assurez-vous simplement que votre typographie remonte à la dernière minute. Vous devrez peut-être le refaire et vous assurer qu'il est sur des jantes. Les boutons doivent fonctionner sur toutes les pages de contenu. Case, c'est juste la navigation qui fonctionne. Symboles. Il devrait y avoir un symbole pour le système de navigation, probablement pour la carte et le pied de page pour vous entraîner à créer un symbole. Il doit s'agir d'un formulaire sur la page de contact. Je veux que vous vous entraîniez à recadrer une image en utilisant l'ajustement des objets Peut-être que nous l'avons juste apporté avec des images préfabriquées et prêtes à l'emploi. Vous n'allez pas avoir ce genre de ratios faciles. Des images où tu reçois des trucs de ma part à Unsplash ou des trucs d'urine. Alors, pour faire ce recadrage CSS, vous devrez peut-être revenir à cette vidéo, nous créer un favicon. Regardez tous ce type. La photo doit être collante, c' est-à-dire qu'elle est simplement poussée vers le bas, au moins une animation de page d'accueil. Cela peut être super simple, quelque chose de subtil ne doit pas nécessairement être de la parallaxe ou quoi que ce soit d'autre. C'est possible, ça peut être super fou. C'est à vous de décider, lorsque vous partagez l'animation, de couper le lien de mise en scène, non le lien en lecture seule. lien de mise en scène est celui-ci ici, à sens unique. Allons voir le designer. C'est celui-ci, le haut. Donc, il suffit de le pousser, il n'est pas nécessaire que ce soit un domaine personnalisé et qu'il suffit de le copier et de le coller, mais sur la page d'accueil pour que nous puissions voir ce que vous faites, assurez-vous qu'il y a un titre et une description au milieu ou au moins la page d'accueil, et je dois le faire pour eux. Assurez-vous qu'ils fonctionnent tous sur mobile. Cela peut devenir un peu délicat avec l'animation. Sur le plus petit mobile. Vous êtes autorisé à le désactiver pour la version mobile car il est peut-être trop important pour l'espace d'écran dont vous disposez, mais il peut être détenu pour les livrables sur ordinateur de bureau et tablette. Prenez une capture d'écran des trois pages autant que vous pouvez le voir dans le navigateur, téléchargez-les et partagez également le lien de mise en scène. Celle-là. Téléchargez-les sur le site, partagez-les sur les réseaux sociaux, en particulier ce lien ici, si vous êtes prêt à les partager sur les groupes, même s'il ne s'agit que de captures d'écran, j'adore voir ce que vous obtenez avec votre portefeuille. Mais une chose à noter est de savoir s'il s'agit votre propre travail ou d'un travail provenant d'un site de bibliothèque. Juste pour éviter toute confusion entre les gens qui pensent : « Oh mec, tu es génial, est-ce que je peux t'engager et tu te dis  : « Oui, mais je viens de voler tout ça ». donc très évident de dire que c'est tout . J'utilise le travail de quelqu'un d'autre comme espace réservé pour mettre en pratique mes compétences en matière de flux Web et même créditer les images si vous le souhaitez. Et c'est toujours une bonne idée de créditer les images. Vous remarquerez un Unsplash lorsque vous le téléchargerez, il vous donne le nom. Vous pouvez dire « Merci Carol, quelqu'un pour les images ou images fournies par et énumérer les personnes que vous avez utilisées ». Très bien, elle est assez importante, surtout si vous n'avez pas encore terminé cette section supérieure. Vous l'avez fait, il n'y a que quelques petites choses à faire. Je dis qu'il faut aller au design, c'est vraiment facile. Encore une fois, il ne s'agit pas qualité des couleurs de votre portfolio. Vous utilisez les polices, la mise en page, etc. Ce cours vise à prendre confiance en Webflow. N'ayez pas peur, si vous le souhaitez, je ne suis pas le meilleur designer, mais j'apprends le flux de travail. Je ne vais pas le partager. Partager cela explique que vous êtes nouveau dans le domaine du design, peut-être que vous apprenez les fonctions de Webflow et nous aimerions avoir vos commentaires. D'accord, c'est le projet de classe, jamais le portfolio sexuel, complet. Allez-y et ensuite nous pourrons commencer un autre projet. Très bien, je vous y verrai dans un moment. En fait, tu vas passer du temps à le faire. Je te verrai dans peu de temps. Je vais vous aider à démarrer la prochaine vidéo. Maintenant. 85. Ce qui est la collection de CMS statique vs dynamique dans le Webflow: Hey, de quoi discutons-nous ? Nous discutons de deux choses. Qu'est-ce qu'un CMS et qu'est-ce qu'un site statique ou dynamique ? Jusqu'à présent, nous avons créé des sites Web statiques, même si nous avons toujours été des animations sympas considérées comme des sites Web statiques. Qu'est-ce qui en fait un site Web dynamique ? Tout d'abord, parlons d'un CMS, car c'est l'ingrédient clé pour en faire un site Web dynamique. CMS, système de gestion de contenu ou base de données. Il s'agit d'un ensemble d' informations que vous pouvez extraire sur votre site Web, charger et montrer aux gens. Vous ne pouvez pas le faire glisser lorsque vous le copiez et le collez en mode statique. Tu fais tout le travail. Ce que vous pouvez faire, c'est disposer de cette base de données transparente. Bonjour, appelez ça une collection. Et tu y mets tout un tas d'informations. Et vous dites, mettez toutes les informations sur ma page, sur mon site Web sous forme de pages et tout y est mis en ligne. OK. C'est un site dynamique, disons un article de blog, très bon exemple de celui-ci et de ce que nous allons créer dans peu de temps. OK, si quelqu'un te disait qu' Anna a reçu trois articles de blog sur mon site web, continue, ça pourrait être comme, bien sûr, ne t'inquiète pas. Construisez le premier, dupliquez-le, puis faites le suivant copier-coller tout ce que je n'ai pas eu l'air beau quand il était bon et puis génial, cool. J'adore ces trois-là. Peux-tu en faire 300 de plus ? Bien sûr. OK. Et tu t'es enfuie ? Un site dynamique. Ce qui se passe, c'est que vous pouvez dire : « Oui, je peux en faire 300. Mais ce que je vais faire pour toi c'est juste du style. Je vais créer une base de données de collection, un CMS, à peu près la même chose, choses légèrement différentes, mais la même chose dans ce contexte. Je vais le construire pour toi. Je vais rédiger un article de blog. La frappe ressemble à ceci, le paragraphe ressemble à ceci. Les images se trouvent ici. OK ? Tout cela ressemble à ça. Vous dites : « Hé, client, faites-en autant que vous le souhaitez. Génial. Ils entrent simplement des informations dans la base de données et elle commence à cracher des pages. C'est une bonne chose, c' est aussi dynamique. Donc, un autre bon exemple pourrait être que vous avez une liste du personnel, d'accord ? Et vous en avez un CSV provenant de votre CRM ou de tout autre élément d'où il provient, et vous en avez des dizaines, des centaines, des milliers. Tu peux en styliser un. Consultez-les tous et consultez le site Web. OK. Il les charge tous, comme vous le souhaitez. D'accord, il se peut que ce soit des événements à venir que vous ayez une longue liste pour la base de données, collecte, d'autres bonnes utilisations, recettes, les menus, tout ce que vous avez. J'ai eu quelques autres exemples. Je ne me souviens pas d'eux. Auteurs, clients, membres de l'équipe, listes, chansons, émissions, recettes. Ce sont tous de bons cas d'utilisation où il y a en grande partie la même chose. Donc oui, c'est ça. Nous allons commencer à créer notre site dynamique qui nécessite une collection CMS Slash. OK, et ensuite je vais vous montrer comment tout cela fonctionne et en créer un, c'est amusant. Nous allons faire, nous allons faire quelques témoignages. D'abord. Gay, ils se chargent sur un site et ensuite nous allons commencer à créer des pages avec un blog. Très bien, allons-y pour nous raser ce matin. Je ne l'ai absolument pas fait Comme si tu ne le remarquerais pas. Rejouer la vidéo, comme si vous pouviez lire l'avis, mais devinez quoi ? Tu n'es pas ma mère. Je suis Dan. 86. Créer une collection de CMS dans le Webflow: Bonjour tout le monde. Dans cette vidéo, nous allons créer un nouveau site. Ce sera pour tous les futurs blogs k. Nous allons également créer notre toute première collection de CMS. C'est pour cela que nous sommes là. Nous allons créer une connexion à notre base de données. C'est ce qui rend notre site Web dynamique. Ensuite, nous allons ajouter manuellement un seul élément à cette base de données. Dans notre cas, ce sera un témoignage de Sarah Smith, il y aura un témoignage, il y aura une photo de la tête et quelques autres détails, d'accord, pour commencer à créer une marque nouveau site. OK, juste un blanc. Maintenant, c'est un peu bizarre. Nous allons commencer à créer une collection dans une seconde et nous pouvons en créer une sur le site gratuit. Génial. Rien à voir avec mon espace de travail, mais sur ce site en lui-même, vous pouvez avoir jusqu'à 50 éléments dans votre CMS, ce qui est pratique pour commencer. Le problème, c'est que pour le moment, vous pouvez avoir des éléments CMS qui peuvent être un alcane, 50 témoignages. Mais dès que vous passez au compte de base, vous obtenez à nouveau zéro Si vous avez besoin d'un domaine personnalisé, vous devez passer à l'un de ces deux comptes. Et malgré tout, 50 disques, ce n'est pas tant que ça, donc nous allons avoir besoin de beaucoup plus, potentiellement beaucoup plus. Donc des articles EMS des années 2000. Parfait. Je vais donc mettre à jour mon site et à la seconde où nous n'en aurons pas besoin pour le moment, nous verrons juste jusqu'où nous en sommes avec le site gratuit. Très bien, alors regardons comment créer cette collection. Créons donc une collection. Ils les appellent les collections CMS think database. Ok, ça me donne un joli nom. OK, donc vous créez cette collection globale. Vous pouvez avoir plusieurs collections en une seule chose, vous pouvez avoir des témoignages sous forme de collection. Vous avez peut-être une collection de prix. Vous avez peut-être une collection de produits avec des prix et des photos de produits. Vous pouvez avoir de nombreuses collections sur un site. Nous allons commencer par celui-ci. Ce seront des témoignages. Très bien, ignorez le reste pour le moment et regardez nos informations de base. Deux options s'offrent à nous. Par défaut, juste quelque chose pour la liste k. Nous allons donc lui donner un nom, ce qui est parfait pour nous. Nous allons avoir le nom de la personne qui nous a donné le témoignage et ignorer la balle pour le moment. Nous en parlerons dans la prochaine vidéo lorsque nous publierons des articles de blog Jetons un coup d' œil à l'ajout de champs. Ajoutons un champ personnalisé. Et le plus important est probablement un champ de texte brut. C'est l'étiquette car cela va être appelé témoignage. Témoignage. OK, donc l'étiquette est que vous pouvez voir un aperçu ici, mon éditeur, d'accord, d'accord, la personne qui va télécharger ce contenu, c'est peut-être un employé, peut-être le client, peut-être vous. Ils vont avoir ce joli petit truc interactif à remplir et tout ça. Ils vont pouvoir le saisir. OK. Tapez le nom de la personne sur laquelle elle va témoigner dans le champ du témoignage. Vous pouvez ajouter de l'aide sous forme de texte si vous le souhaitez. Il y a quelque chose de bizarre comme ce chiffre asymétrique. Vous aimez, vous savez que la personne qui le remplit comme suit, vous devez expliquer que le numéro SKU se trouve sur la gauche pour l' expliquer un peu plus. Je n'en ai pas besoin car l' ammonium est assez simple. Qu'est-ce qu'il y a dedans ? Le mien sera multiligne dans ce cas. Limites de caractères. Probablement. Je ne sais pas ce que ça va être. Je vais taper 500 et le tester car je ne veux pas que mon témoignage soit trop long. Est-ce obligatoire ? Non OK. Eh bien, c' est probablement le cas. Je ne veux pas être honnête. Ça ne sert à rien. Je veux dire, un témoignage. Il n'y a pas de témoignage. Que voulons-nous faire d'autre au nom de l'autre personne, le testament de l'écrit. Ajoutons ceci. Il suffit de jeter un coup d' œil, non ? prises de vue riches expliqueront en un peu, image, géniale, plusieurs images. Tu peux avoir ça, celui-ci va être génial parce que nous allons faire une photo, laisser celui-ci sur place, plusieurs images signifient qu' il y aura beaucoup de choix. OK, c'est bien pour un article de blog. Téléchargez un tas d'images dans un article de blog afin que la personne puisse choisir entre elles. Est-ce que ce sera un lien vidéo, un lien, un e-mail, numéro de téléphone, k, juste un ancien numéro ordinaire. Date/heure. Nous allons le faire tout de suite. Nous parlerons de ses commutateurs plus tard, et nous examinerons les options plus tard. Existe-t-il une option de téléchargement de fichiers ? Maintenant, n'oubliez pas que ce n'est pas le cas, vous ajoutez un fichier en ce moment. Cela leur donne la possibilité plus tard, lors du téléchargement, de joindre un fichier, un document Word, un PDF, peut-être, je dirais que nous créons quelque chose pour notre boutique. L'avantage de notre boutique est d' indiquer le prix tel qu'il est, et peut-être que vous pouvez télécharger quelques spécifications à ce sujet. Je ne veux pas ça sans économiser. Je veux donc une image. Et cette image va être compliquée. OK. C'est peut-être le logo d'une entreprise. Si c'est ce témoignage, je vais ajouter quelques autres éléments, comme un sélecteur de dates. Je vais dire que c' est la date du témoignage. Je les ai aimés sur mon site où vous pouvez voir qu' ils datent d'il y a cinq ans mais qu'ils datent de ce mois-ci ou du mois dernier. OK. Vous n'avez donc pas besoin d'aide ou de texto. Pas besoin de sélecteur de temps. Et cela n'a pas besoin d'être exigé. Je vais le faire. Ajoutons-en un de plus. Juste un champ de texte brut. En fait, non, nous n'établissons pas de liens. OK, quittez sans enregistrer, ajoutons notre lien cliquable. Donc ça va être comme Instagram, un lien Instagram. Ils peuvent donc le coller dedans lorsqu'ils le téléchargent afin que les utilisateurs puissent se rendre à leur entreprise ou quoi que ce soit d'autre. Principalement parce que je voulais juste inclure un lien. D'accord, nous avons donc quelques trucs de base. Qu'est-ce qui finit par se passer ? Créons la collection. Et maintenant, nous avons ça comme des espaces réservés. Nous n'avons pas encore de témoignages. Nous avons juste trouvé un moyen de les intégrer sur le site Web. D'accord, si vous avez besoin de le modifier ici, sous les témoignages, vous pouvez voir que ce sont les choses que je vais demander. Alors annulons ça. Je n'ai aucun article dans ma collection. Vous pouvez simplement aller me donner quelques exemples d'articles et il suffirait de mettre quelques trucs. Nous allons le faire étape par étape. Que font les premiers ensemble ? Ensuite, je vais vous montrer comment les importer à l'aide d'un fichier CSV. J'ai donc dans vos fichiers d'exercices sous Blog, il y en a un témoignage. OK. Et j'ai juste quelques trucs de base pour ça. Tu n'es pas obligée de l'utiliser. J' utilise de vrais témoignages, mais j'ai changé les noms pour des raisons de confidentialité. Sarah Smith, un témoignage, est donc requis à cause des astérisques rouges qui collent pour écouter. Elle a un problème. OK. Laquelle est la dame ? OK. Allez-y, ce ne sont que des espaces réservés aussi. Ils se trouvent sur votre blog. Vous verrez des photos et j'en ai quatre dedans. Tu peux utiliser quoi d'autre je veux faire ? La date du témoignage, cliquez dessus, choisissez une date dans le passé et un lien Instagram. Je ne sais pas ce qu'est cette fausse personne. Je vais utiliser le mien. Viens me suivre là-bas. OK, et je vais cliquer sur Créer. On y va. J'ai donc une collection parfaite. Je verrais la base de données Miss et elle contient un élément. OK. D'après un témoignage de Sarah Smith. Très bien, assez de temps pour cette vidéo, passons à la vidéo suivante et nous téléchargerons un fichier CSV pour le remplir en quelque sorte. Nous ne faisons donc pas qu'un à la fois. Très bien, on se voit là-bas. 87. Ajout de la liste de collecte de CMS via CSV Webflow: Bonjour à tous. Dans cette vidéo, je vais vous montrer comment l'intégrer dans un fichier CSV produit soit à partir de votre CMS, soit à partir de votre propre CMS, votre propre CMS, peut-être d'un système de gestion des clients, CMS, peut-être que c'est votre un logiciel de comptabilité qui produit cela. Tous vos logiciels de gestion de produits, peut-être , ou comme nous ici, nous allons simplement le faire à partir d'une feuille Google. Je vais l'intégrer dans Webflow et le placer automatiquement en tant qu'éléments dans les collections How. Faisons-le un par un, c'est faisable, fastidieux. Et il y aura de nombreuses situations où vous importez à partir d'une base de données qui existe déjà. Vous travaillez peut-être avec un CRM, comme un logiciel de gestion des clients ou une sorte de progiciel de comptabilité ou de gestion des stocks. Ce que vous recherchez, c'est de pouvoir importer un fichier CSV, d'accord ? Donc, vous saurez que si vous savez, si vous ne le faites pas, vous pourriez le faire comme je l'ai fait, c' est que je viens de créer une feuille Google, gay, et que j'ai demandé à mon client de les remplir. Par mon client, je veux dire, je le fais manuellement de cette façon. Et ici, dans Google Sheets, je suis allé Fichier et je suis allé télécharger. Et nous recherchons ces valeurs séparées par des virgules, CSV. J'en ai un pour toi. OK, tu peux aller dans tes dossiers d'exercices. Il y en a un appelé des témoignages qui demandent maintenant c' est la première rangée. En gros, ce qu'il demande, c'est devrions-nous ignorer la première ligne ? Ici ? Au premier rang, il n'y a pas réellement de noms de personnes et le titre n'est pas ajusté. Donc oui, ça l'est. Et ce qu'il fera, c' est essayer de faire correspondre ce que vous avez écrit. Nous avons dit que nous avions levé son nom. C'est ainsi que le membre Webflow a appelé ce premier champ, que nous avons rempli. Et celui-ci s'appelle aussi nom. Ainsi, vous pouvez gagner du temps si vous produisez la base de données ou le CSV, vous pouvez utiliser le même nom car les témoignages sont les mêmes et il y est automatiquement mappé. Donc, le nom est égal au nom, le témoignage est égal au témoignage. Le logiciel n'a pas réellement ajouté celui-ci aujourd'hui. Je vais l'importer et créer un nouveau champ. Et c'est ce que nous ferons également. Faisons-le en option. OK, le nouveau champ appelé Software Help Texas est en fait un logiciel utilisé. Peut-être que c'est plus logique pour l'utilisateur. Et cela va créer les options suivantes parmi lesquelles nous pourrons choisir. C'est un petit menu déroulant, pas de bonus. Et voilà que je faisais ce rendez-vous. Je n'ai pas de rendez-vous. Je vais devoir les ajouter manuellement. Cette date. Date, je l'ai appelée date et ici elle s'appelle Date. Pourquoi ça ne correspondait pas ? Et puis, si ce n'est pas le cas, vous pouvez accéder à la cartographie d'un champ existant que j' ai appelé témoignage de données. C'est pourquoi Instagram. Je n'ai pas mis ça dedans. Je l'ai cartographié sur un champ. Tous ces trucs que j'ai oubliés, j'ai ajouté un lien Instagram, les ai mentionnés puis ça me facilite la vie. Je n'avais pas de portrait parce que vous pouvez obtenir une base de données pour relier deux images et deux fichiers. Et cela dépendra de l'endroit où ils se trouvent s'ils sont en ligne et cela facilitera les choses. D'accord, et vous pouvez les mettre comme des chemins absolus et ici, pour un chemin défini mais hors du cadre de celui-ci, nous allons simplement les télécharger, les ajouter nous-mêmes. Nous nous préparons donc à importer neuf peut être 900, accord, c'est moins satisfaisant avec ses neuf seuls. D'accord, mais quand il y en a 9 000, regardez ça. Très bien. C'est important, pas important pour le moment. , je n'ai pas l'intention de les publier comme le mentionnent leurs propres pages, ce sont des articles de blog. Je pourrais donc republier la scène, ils ne le sont pas et je suis heureuse de les laisser tels quels. J'aime bien au début, c'est un peu plus tôt que je vous ai montré les témoignages. C'est ce que je vais juste faire sur la page d'accueil. Ils n'auront pas leurs propres pages séparées. Maintenant, ici, nous pouvons voir des choses comme le nom et les choses que nous avons utilisées. Il manque des éléments. Vous pouvez aller ici parce que c'est un petit stylo et dire « montrez-moi réellement le témoignage lui-même et indiquez-moi la date du témoignage ». Mais je n'ai pas besoin de lien Instagram créé, modifié ou publié, ce que vous pourriez faire. C'est à vous de décider ce que vous voulez voir sur cette liste, d'accord, alors souvenez-vous de ces articles de ma liste, c'est ma collection. Si je veux modifier la collection, je dois revenir ici et cliquer sur le petit rouage. Ça y est. Cela modifiera ma collection globale. Si je veux entrer dans la collection. Si je veux entrer dans les éléments édités, annulez-le et je les examinerai individuellement. Je peux aller les ajuster. Et ce que nous allons faire, c'est choisir les quatre premiers et ajouter une image. En fait, Sarah Smith en a déjà un. Alors allons-y, choisissons au hasard parce que cela aidera plus tard. Je vais choisir cette personne qui avait un emploi. Ce type, ce type n'est pas du genre, c'est une photo de graphique. Je pense à lui. Je pense que c'est peut-être Joseph, mais il est utilisé sur les maquettes de tout le monde. C'est un excellent endroit pour y tenir une place. Tu es beau, mec, Joseph. Jetons un coup d'œil. Je vais juste en choisir deux . En fait, j' attends le téléchargement. Sauvez. Génial. Choisissons-en un autre. Je vais accélérer. Très bien, Don, ils sont tous sauvés. Pouvez-vous dire que j'ai utilisé un générateur de noms aléatoires ? Ce ne sont presque pas des noms. OK ? est ainsi que vous pouvez télécharger un fichier CSV. Et en fait, ce que nous pourrions avoir à voir avec Syriza ici qui n'existait pas auparavant. Je vais donc devoir choisir et dire que c'est un témoignage d'elle qui suivait un cours, peut-être que c'est Sigma. Sauve-la. Et passons à la vidéo suivante. 88. Ajouter la liste de la collection de CMS à la page Web de Figma: Bonjour tout le monde. Dans cette vidéo, nous allons prendre cette liste de témoignages de notre collection. Et nous allons le mettre sur la page, et il va automatiquement commencer à remplir comme un site Web dynamique. Très bien, allons-y et je vais vous montrer comment faire. D'accord, donc j' ai des sites vierges, donc juste un petit peu de ménage. Je vais ajouter un contenant à l'intérieur de ce contenant qui ne mangera rien. C'est toujours agréable d'avoir un diblock à l'intérieur du contenant parce que je vais juste le pousser par le haut. Je ne suis pas sûr de ne pas pouvoir le supporter collé au sommet. Très bien, alors allons-y et ajoutons-le. C'est sous notre direction. Vous l'avez peut-être rencontrée. Ça y est. Cms, pour le moment il n'y a qu'un seul objet dans ce petit groupe. C'est la liste des collections. Nous connaissons la liste. Nous l'avons déjà vu. OK, c'est cette partie de la collection et voici la liste des collections. Alors on y va, allons-y et éditons. C'est un peu difficile de s'en sortir. Cela ressemble à quelque chose de nouveau. Mais pouvez-vous voir le crossover ici ? Tu peux tout fermer. C'est donc juste une chose géante qui s'ouvre. Alors allons-y et ajoutons notre liste de collection dans ma division. On y va. Il ne fait rien tant que vous ne le connectez pas à une source car vous pouvez avoir plus d'un CMS sur notre site Web, nous faisons des témoignages. Il peut également s'agir de vos produits. Peut-être des membres du personnel, des déménagements d'affaires, des témoignages et regardez ça. Cela fonctionne un peu à moitié, au moins c'est de faire passer les noms. Mais il n'y a rien d'autre à regarder si je le prévisualise, pas beaucoup de choses. Ce sont juste des choses fantômes. Ils t'aideraient à te faire une idée de ce que sont toutes ces différentes cellules. Et ça a l'air bien mieux quand on passe à cette mise en page différente. Il comporte trois colonnes parce que c'est la moitié de ce à quoi nous voulons qu'il ressemble. Commençons donc à ajouter des bits. Donc, ce que je vais faire, c'est ajouter n'importe quoi maintenant, n'importe laquelle de ces options et la connecter à notre liste. Ajoutons donc le témoignage. C'est le plus important. Mettons donc un bloc de texte. Cela pourrait-il être un paragraphe ? Je pourrais probablement. OK. Et vous pouvez voir qu'il se trouve à l'intérieur de mon objet de collection. Ce que je veux faire, c'est même le mettre ici. Cela dit, j' aimerais obtenir le texte de ce bloc de texte à partir de témoignages. Il le sait parce que nous avons relié la liste au témoignage. Donc ça va, Hey, tu veux recevoir le texto de quelque part ? Où aimeriez-vous vous le procurer ? Quatre. Allons-y et allons-y directement à partir d' un témoignage. Ce sont des textes simples. Génial. Vous pouvez accéder au logo de ma zone de texte brut bordé. C'est un peu difficile à lire, mais vous pouvez voir qu'il y en a 12. Combien en avons-nous fait ? Est-ce qu'on en fait neuf ou dix ? Je ne sais pas combien nous en avons fait, mais tout est plein à l'intérieur. Mettons en forme non pas le bloc de texte, mais l'élément de collection. Je vais lui donner un nom de classe d'ammonium. Je l'appelle témoignage ou emballage. Je vais juste ajouter un tas de marges et de rembourrage juste pour pouvoir le déplacer. Et disons que ce sont des imagines. En fait, je vais utiliser un rembourrage qui ne casse pas mes petites boîtes. Puissant. Payer les deux côtés en haut et en bas. Juste pour que je puisse les séparer. Très bien. Nous nous sommes donc inspirés de LC-MS, regardez-nous, nous avons créé une base de données appelée collection. Ensuite, nous avons ajouté cette enveloppe de liste à l'intérieur de la liste. Nous avons commencé à ajouter des éléments et connecter à la liste. Ajoutons-en un autre. Alors voyons ce dont nous avons besoin d'autre : le nom de la personne. C'est un autre bloc de texte. OK, vieux manuel ennuyeux. Je vais relier celui-ci à la personne qui porte un nom et je vais lui donner un peu de style. Ok, ça va être un témoignage. Copiez ce code et utilisez-le pour le charger. Et c'est le formatage du nom. Je vais juste faire un peu de style de base. Nous passons en mode rapide. C'est tout ce que j'ai fait. J'ai demandé à l'éditeur de l'accélérer, mais je suis sûr que vous me donnerez 2 secondes. Donc, je pourrais commencer par la zone de texte. Je vais faire l'emballage complet des tiques, nombre de témoignages supplémentaires ou l' emballage de tout cela. Et je vais entrer toutes les polices ici en fait , maintenant nous pouvons l'accélérer parce que je peux faire certaines choses. Votre poids, là. D'accord, c'est tout ce que j'ai fait aussi. Pas d'accélération. Maintient la police de caractères de tout ce qu'elle contient. OK, et peut-être ce manuel, donc je vais appeler celui-ci un témoignage, et celui-ci s'appellera texte. que je vais appeler. J'allais ajouter un peu de rembourrage en bas. Donc, vous espacer. Très bien, continuons à ajouter des choses. Allons-y, je vais ajouter un autre bloc de texte. OK ? Et ça va être, en fait, ça va être un manuel, oui. Il y aura donc un manuel à partir de témoignages. Qu'est-ce que ça va être ? Ce sera le logiciel qui sera utilisé. Même s'il s'agissait d'une liste déroulante sur le côté de la saisie où ils pouvaient choisir. En fait, tu n'as pas vraiment vu ce chiffre. Allons-y. C'est là que se trouve le texte. Jetons un coup d'œil à la collection elle-même. Parce que souvenez-vous que nous avons créé une liste déroulante En fait, je ne l'ai pas beaucoup regardé. OK. Ça y est. Cela signifie que lorsque quelqu'un ajoute, disons qu'il ajoute ceci et qu'il s'y met. Mais tu peux voir ? Ils doivent ajouter, choisir le nôtre sur Figma ou est-ce Photoshop, puis enregistrer et revenir dans mon document maintenant, vous pouvez voir qu'il est passé de Photoshop à XD et c'est un très bon exemple d'utilisation de cette base de données. Je peux le changer là-dedans, peut-être importer un tout nouveau CSV. Il les examinera et les mettra à jour. Ce n'est donc pas quelque chose que je copie et que je colle. Peut-être que ce sont des témoignages, vous n'en avez que trois sur la page d'accueil. Et tu ne les as jamais changés. Vous n'avez pas besoin d'un CMS. Donc, beaucoup de drame pour y parvenir. C'est pour ce genre de choses répétitives qui arrivent tout le temps. Comme pour mes témoignages, j'aime le mettre à jour chaque semaine de nouveaux éléments de logiciel. Je vais donc aller les coiffer en une seconde. Voyons ce que nous pouvons ajouter d'autre . Parce qu' est-ce qui a été demandé ? Ma liste, je me souviens qu'il y avait une image ou si nous devions faire l'image maintenant, nous allons la faire, je vais la modifier, mais elle va être cassée parce que seules quelques-unes d'entre elles contiennent des images. Ajoutons donc une image à l'intérieur d'ici. D'accord, tu peux monter au sommet. Bien sûr. Je peux choisir une image ou je peux dire l'obtenir réellement à partir des témoignages. Tu vois, réduis-le comme s'il n'y avait qu'une seule chose qui soit une image, super. Et seulement quelques-unes d'entre elles, bon sang, vont casser mon plan. Je vais l' éteindre pour le moment parce que je vais vous le montrer dans une seconde. Si vous souhaitez simplement supprimer un élément que vous avez connecté , cliquez simplement sur Supprimer. Cela me rappelle un point intéressant. Disons que je les laisse là-dedans. Et disons que je ne veux pas celui du milieu, comme si j'allais m'en débarrasser. Je pourrais parcourir ma liste et dire simplement de les supprimer toutes. Ou je peux aller voir ma collection qui ressemble un peu à l'ensemble, c'est le compte du boss qui a donné tous ces objets. Et je peux dire qu'en fait, débarrassons-nous de cela. Je ne veux pas de photos dans la tête , ça me cause des problèmes. Je vais aller ici et je vais le supprimer. Il dira que vous ne pouvez pas, car il est utilisé sur la page. Où est-il connecté ? OK. Il me dit que c'est sa propre page d'accueil. Il y a une image. Allons le voir. Dire que c'est ici. Je ne peux pas le supprimer de la base de données car il est utilisé. Donc très bien. Merci Mais je peux maintenant aller le supprimer. Et comme il n'est pas utilisé sur la page, cela me permettra de le supprimer de la base de données ou ils l' appellent la collection. Bonne petite note d'accompagnement. Très bien, c'est l' essentiel de cette vidéo. Si vous voulez continuer, je vais les styliser et en ajouter quelques autres, mais c'est pareil. Peu importe ce que tu as dans cette liste, tu peux aller vérifier. J'ai un bloc de liens. Je vais donc ajouter le bloc de liens. Je vais obtenir l'URL à partir de mon lien Instagram. En fait, je pense que les blocs de liens ne fonctionneront clairement pas. Allons-y Ce que nous pourrions faire d'autre, ce sont deux choses que nous pourrions faire. Je pense que les textes contiennent des liens ou que nous pourrions simplement ajouter un manuel ordinaire et ajouter cela, le lien hypertexte que nous avons fait plus tôt. Mais ajoutons simplement un lien texte. C'est connecté. Obtenez-le sur Instagram. Maintenant, qu'est-ce que ça donne à Fromm, il dit qu'il obtient l'URL à partir de là pour la mettre à la fin, mais ça ne l'obtient pas, vous recevez un texte à partir de là aussi. OK, lien Instagram. Je ne veux pas vraiment ce texto. Ok, ce que je veux faire c' est juste l'écrire dedans et dire lien Instagram. Lien Instagram. OK, et va installer ça. L'excitation sera unique sauf que je les ai toutes faites de la même manière. Ok, alors qu'est-ce que je veux d'autre ? Qu'avons-nous d' autre dans cette liste ? Nous allons ignorer les tirs dans la tête pour le moment. Je ne me souviens pas de ce qu'il y a sur ma liste pour y attendre. D'accord, et c'était la date. Donc, un autre manuel. OK, tu vas au chanvre. Je ne reçois des coches que par les témoignages et ce sera la date à laquelle vous aurez les autres. Nous avons donc la date du témoignage. Il y en a d'autres qui ont été créés, publiés et mis à jour. Celles-ci sont générées automatiquement, par exemple lors de la création de la liste , lors de sa publication. Cela n'a pas encore été publié, donc il y aura une heure associée et s'il a été mis à jour, je n'en veux aucun pour le moment. Ils seront utiles plus tard, mais la date du témoignage. Parfait Très bien. Vous pouvez donc traîner si vous le souhaitez. En fait, je l'ai déjà dit, n'est-ce pas ? Je vais juste le parcourir et le styliser. Je vais donc le faire en mode Vitesse, mode vitesse réelle cette fois. D'accord, ce n'est pas très sexy, mais je l'ai fait, d'accord. Allons-y et jouons un peu plus avec cette liste dans la vidéo suivante. 89. Réorganisation de ce qui est montré à partir de la liste de collecte de Webflow: Bonjour tout le monde. Dans cette vidéo, nous allons prendre cette liste et nous allons être en mesure de réorganiser les informations affichées. Nous pouvons décider de ne montrer que ceux qui sont des témoignages pour le logiciel Photoshop, ou de ne me montrer que ceux qui contiennent des images, ou de ne me montrer que les trois premiers puis les autres derniers témoignages. Trouvons notre liste pour répondre à nos enchères. Laisse-moi te montrer comment faire. Faisons une réorganisation. Et pour le moment, cela me montre trop d'options. Je voulais peut-être juste montrer les six ou trois premiers. Donc, ce que nous pouvons faire, c'est ce qui finit par se produire, c'est la liste. Si je clique n'importe où ici, je devrais être capable d'accéder à ce rouage et cela me montre des informations sur celui-ci en particulier. Montons d'un niveau. Allons voir les parents et ça me donnera plus de choses. OK, et je peux revenir en arrière et dire que je veux que ce soit deux colonnes pour k ou trois, vous pouvez limiter les éléments. Je dirais que je ne veux en montrer que trois, s'il vous plaît, ou six. Revenons à trois. filtrage peut être une bonne chose parce que pour le moment, il s'agit simplement me montrer une commande k. Disons donc que ce sont les témoignages pour une page en particulier qui disent qu' il s'agit de la page Figma avec la page Photoshop. Ce que je peux faire, c'est dire qu'en fait, je veux seulement vous montrer dans cette liste. Je voudrais montrer uniquement le nom qui est pas égal au nom que je veux. Ça va être facile. Le nom que je peux commencer à taper, je peux dire aux gens que ce nom est Pam. Et je l'ai mal orthographié. Il n'y aura donc pas de nom. Ce que je veux faire, c'est probablement plus facile de ne pas être nommé, mais peut-être que je veux montrer à ceux qui utilisent le logiciel que Figma est égal à Figma. Parfait Donc, cela ne fera que me montrer les résultats de Figma. Il peut donc s'agir de produits économiques pour vos étiquettes. Quels produits économiques apparaissent non seulement sur cette page, ou peut-être que c'est sur une page de votre portfolio qui vous présente des témoignages Wix. Il ne vous montre donc que des témoignages d'expérience utilisateur. Nico, tu comprends ? Supposons que je le veuille parce que ces images, disons si j'ajoute l'image. Donc, ici, je vais aller de l'avant et aller à Image. D'accord, il y a beaucoup d'autres pages qui ne contiennent pas d'images, mais disons sur la page d'accueil et en particulier, je veux que les portraits soient comme si toutes n'avaient pas de headshots. Ce que vous pouvez faire, c'est le retirer, retourner à l' emballage extérieur et dire, montrez-moi trois, mais pas l'utilisation du logiciel. Je veux filtrer par ceux qui ont des images, des photos de nous, des images que j'ai dites et des personnes qui ne veulent pas vérifier, voilà. J'ai besoin de les styliser, je les ferai dans la prochaine vidéo. C'est vraiment une façon très efficace de trier ces informations. Encore une fois, rappelez-vous que vous pouvez saisir ceci un par un sans utiliser de CMS. Mais vous pouvez commencer à voir à quel point il est utile et puissant lorsque vous arrêtez de filtrer et de trier. OK, transpirer pourrait aussi être utile. Jetons un coup d'œil, disons que je vais trier par nom, mais je vais dire la date à laquelle le témoignage a été créé, la date du témoignage. Du plus ancien au plus récent. Du plus récent au plus ancien. OK. Ou peut-être que cela s'y au lieu de la date des témoignages, que seules les données ont réellement été créées ou quand elles ont été mises à jour ? Oui. Du plus récent au plus ancien. Sauvez. Vous y allez parce que j'y édite des images qui ont mis à jour ces éléments de liste. Ils sont donc arrivés au sommet. La dernière chose que je n'ai pas encore mentionnée, tu peux déconnecter ça. Vous pouvez dire En fait, ce truc ici, ce petit rouage, vous pouvez dire qu'en fait ce n'est pas un témoignage, c'est censé être un logiciel utilisé. Vous pouvez les réattribuer si vous le souhaitez. Ce n'est pas ce que je veux faire. Mais j'ai oublié de mentionner tout à l'heure que l' une des choses avec le CMS et la liste est que s'il affiche mon portfolio, j'ai une liste. Vous devriez le faire simplement parce que cela fonctionne, c' est une bonne pratique, mais cela dépend de la quantité de mises à jour que vous allez effectuer. Par exemple, si vous êtes une personne, aucun portfolio, que vous le mettez à jour chaque semaine, peut-être que vous faites un 1 et que vous le quittez. Comme beaucoup d'entre nous , peut-être qu'un CMS représente un petit travail supplémentaire dont vous n'avez pas besoin. Mais peut-être pour une agence plus grande où vous avez de nombreux témoignages et où il existe de nombreux types de catégories pour le travail que vous avez effectué. Il est logique d'avoir un CMS. Je me souviens que c'était mon travail, une grande agence où nous n'avions aucun travail à faire pour créer des pièces de portfolio parce que nous n'avions rien d'autre à faire. Ok, et on passe en revue, on trouve de bonnes images, on leur donne un aspect cool, on fait quelques articles. Quelqu'un devrait vérifier ma rédaction, orthographe et ma grammaire, et les télécharger sur le site. Cms serait parfait pour cela. OK, donc ça réorganise les données de nos listes. Très puissant. Allons le styliser dans la vidéo suivante. 90. La création de notre liste de collection avec la grille et le flex dans le Webflow: Bonjour à tous. Nous allons revenir un peu là où nous avons terminé la dernière vidéo et nous allons personnaliser nos témoignages. La principale nouveauté dans celle-ci est que j'ai converti cette liste en grille, qui n'est pas le paramètre naturel et d'affichage de ces listes de collection, il y a des colonnes par défaut, mais très souvent Je veux les convertir en grilles et je vais vous montrer comment. De plus, nous allons faire du style. Nous faisons en sorte que tout soit aligné de la même manière le long des têtes arrondies en bas, car d'une manière ou d'une autre, toutes les personnes qui ont une tête doivent C'est comme la règle d'Internet. Très bien, allons-y. Très bien, nous allons arrêter ce que vous n'avez jamais fait auparavant. Et puis une grande partie des autres styles ne sont que des choses que nous avons faites. Nous allons nous en remettre parce que c'est bon de s'en souvenir. La première est qu'à l'heure actuelle, une liste de collections apparaît par défaut dans l'affichage appelé colonnes. Nous l'avons déjà examiné et j'ai dit : « N'utilisez pas de colonnes ». Nous allons utiliser la grille. Les colonnes sont bonnes, les plus belles, il n'y a rien de mal à elles. Je les trouve difficiles quand vous avez plus que trois objets quand il y a une autre rangée et six d'entre eux, vous perdez simplement beaucoup de contrôle. C'est comment se diviser. Ce ne sont que d'autres problèmes. Vous faites peut-être la même chose et vous vous demandez comment le convertir ? Eh bien, si je vais dans mes paramètres d'affichage et que je reviens en arrière, pour y avoir mon emballage, je le déplace pour le bloquer. Je vais aller un peu plus haut. L'espace du bloc, aucun d'entre eux n'est-il composé de deux colonnes ? En tant que Wade, ce qui finit par se produire c' est que c'est contrôlé ici, dans le panneau des paramètres. C'est la seule fois où cela se produit. D'accord, c'est avec cet élément de liste de collection particulier que nous avons ajouté. Ils le retirent en quelque sorte de cette page et le mettent ici. Nous voudrions : Qui le faites-vous aussi ? Il y en a un peu deux. Ce sont des rappeurs à l'extérieur pour dire de quelle liste il provient. Il y a ce parent Rapa, puis il y a un autre wrapper, et puis il y a ma véritable option de liste. Je vais le faire pour celui-ci parce que même si nous ne pouvons pas voir les trois éléments, c'est ce que c'est. Il y en a un et il se répète quelques fois. Donc, le parent, je veux diviser tous ces gars en une grille, accord, donc tu dois être une grille et ça va tomber en panne. Et je vais cliquer sur OK. Tu aimes ce qui s'est passé ici. Vous pouvez même voir le flux de travail dire : « Hé, si vous souhaitez utiliser cette grille, vous devez désactiver les colonnes et vous pouvez même cliquer sur le bouton ou aller ici. Même, même, même endroit par ici. Et même là, il y a un petit avertissement disant que vous devez désactiver cela en cliquant sur ce bouton ou en cliquant sur le même bouton, pareil, vous y allez et cela fonctionne. On dirait que ça ne marche pas. Celui qui a cette image géante détruit ma mise en page, mais il fonctionne. Jetons un coup d'œil. ai pris la liste, allez ici, disons uniquement le filtre. Laissez-moi vous montrer des photos que je vous ai faites ou non. Donc ça me montre cet acide à mes trois. Je vais désactiver la limite. Tu y vas. Ce sont les dates et les dates d'accouchement de mon mec. OK. Je vais faire le contraire. Montrez-moi ceux qui sont assis. Si vous souhaitez transformer l'un de ces éléments en grille, cliquez sur la liste des parents, non sur le parent du parent. OK, mettez-le en grille et désactivez les colonnes dans les paramètres, ce qui est un endroit étrange. Très bien, regardons d'abord ces images car cela aidera également à la mise en page avec une grille. Je vais le passer à, j'ai ajouté mes chroniques ici tout au long du cours. Vous pouvez les ajouter ici. Je ne trouve jamais de raison, rien de mal à cela. OK. Je vais en faire un complet, oui, ça a augmenté. OK, cliquons sur OK et corrigeons ces images. C'était la tâche tout à l'heure. Peut-être que tu ne l'as pas compris, peut-être que tu l'as fait. Si c'est le cas, tu sauras que je dois en définir la taille. Disons que je veux les faire 200 par 200. C'est probablement que je n' aime pas que cette chronique complète soit trop petite. Grand-mère, père, ça va être trois. C'est bon, encore une fois. Donc 200 par 200, c'est probablement encore trop gros. Maintenant, je n'ai pas ajouté de classe pour ceux-ci. Je vais appeler cette image, la renommer. Ce sera 15150. J'aimerais passer à la tabulation et ce sera juste sur votre clavier, il y avait une tabulation pour passer à la suivante. Ensuite, nous disons « en forme  », nous allons dire « peut couvrir ». Ensuite, dans le cava, vous pouvez accéder à ces options ici et décider où il s'étend depuis le centre pour un tir dans la tête. Ça ne marche évidemment pas pour moi, donc je vais probablement devoir aller chercher le top près de chez toi. C'est un peu la plus constante. Le menton de tout le monde. Nous allons le faire. Co et tout ce que nous voulons faire d'autre. Cela a ajouté les coins arrondis. Donc, en bas, aux coins arrondis, dites simplement que Beat 200 est grand. Maintenant, je veux tout mettre en place. Et je l'ai déjà fait avec ça avant, juste avec un membre de texte, j'ai juste créé un style et j'ai couru à droite Ally, SRE, right align. Et cela fonctionne facilement pour les textes. Mais parfois, s'il y a beaucoup de choses à manquer, comment pouvons-nous tout faire pour que tout soit un peu au centre de la ligne ? Comment feriez-vous, si vous le deviniez, saisissiez l'emballage et que vous le régliez sur Non. C'est un enfant de la grille, nous le savons, mais il peut aussi être le parent de films, ce qui ne fonctionne pas parce qu' il doit être vertical. De toute façon, le flux de travail par défaut devrait être vertical Donc, nous allons dire : Oh, il semblerait que c'est un peu ce que je veux. Tu vois, ça a un peu dépassé mon alignement droit. Je dois entrer ici individuellement et dire que vous êtes l'enfant de la flexbox et que vous pouvez établir vos propres règles. Mais je suis content de savoir où c'était. Tout d'abord, très important. Il est en italique, ce qui signifie qu'il s'agit d'une expression orale. Mais j'ai l'impression que si ce doit être comme une police empatante pour servir de miroir avec un bon, d'accord, où vais-je ajouter mon rembourrage à faire ? Je veux juste faire tous les espacements. C'est ici que je vais appuyer sur ma flèche vers le haut pour attraper le parent. Je vais regarder mes jambes. Hé, peut-être que je peux tout faire ici avec les rangées. Excusez. Non. Je ne peux certainement pas le faire car il y en a deux distincts. Donc, je vais juste dire que vous pouvez faire soit l'une des images avec un peu de bas dessus, soit les textes des témoignages peuvent avoir un peu de jambon dessus. Donc oui, je le fais sur celui-ci parce que je pense juste que s'il doit y avoir des moments où il n'y a peut-être pas d'image et où ils n'en auront pas besoin, il n'y aura d'image et où ils n'en auront pas besoin, pas besoin de rembourrage au-dessus ou de marge. Donc, vous espacez. La prochaine chose que je veux faire, c'est voir qu'ils ne s'alignent pas en bas. OK ? Pour ce faire, la taille réelle des mots est très proche, comme s'ils étaient presque sur les mêmes lignes. Est-ce que celui-ci se casse ? Oui, celui-ci passe à une autre ligne. Donc, ce que nous allons faire, c'est que je veux que tous les noms soient sur la même ligne. Comment puis-je faire ça ? Tu te souviens que tu l'as fait plusieurs fois maintenant ? Tu t'en souviens ? C'est bon, oui. Je vais te chercher. Je n' ai pas à le faire à l'un d'entre eux. Ça peut être n'importe lequel d'entre eux. Et je vais te dire, tu t'en souviens ? Nous disons simplement que vous avez une marge d'erreur. N'oubliez pas que le flux est déjà appliqué à l' emballage parent, puis à l'enfant, vous dites simplement être automatique en haut et nous le pousserons vers le bas. Joli. C'est bon, ça y est. Transformer votre liste de collections en grille. Il suffit de désactiver les colonnes dans les paramètres, qui est étrange, mais tout reste est meilleur. C'est bon, ça y est. Je vous verrai dans la prochaine vidéo. 91. Projet de cours 07 - Collection de cuisine: Bonjour à tous. Ça doit être l'heure du projet de classe. Celui-ci est facile. C'est un joli petit projet autonome compact. Donc, dans ce cas, créez vous-même une nouvelle page ou un nouveau site complet à votre guise. Il ne sera pas utilisé plus loin dans le cours. C'est donc un peu comme un petit projet autonome. ai donc donné vous ai donc donné quelques données pour cette collection de cuisine. Processus similaire à celui des témoignages. OK, je vous donne juste de nouvelles données à utiliser pour que vous puissiez créer les vôtres. Il y a donc un fichier CSV. Il se trouve dans les fichiers d'exercices sous blog. Même si nous n'avons pas créé de blog, c'est la section blog de mes notes de toute façon. OK. Et il y en a une ici qui s'appelle Kitchen collection. Il existe donc un fichier CSV qui contient le nom du concepteur, son emplacement et son site Web. Et il y a une image correspondante, le studio de design C JJ. Il y a ici une image qui va avec. Vous serez donc en mesure d'importer les données CSV, puis d'ajouter manuellement l'image. Je veux que l'image fasse partie de la base de données, pas simplement en l'ajoutant séparément en tant qu'image, mais je ne serai pas en mesure de le dire. Jetons-y donc un petit coup d'œil. Alors Ed et stylez la collection. Super. C'est là que se trouvent les fichiers, toutes les données, toutes les images de la liste. Et celui-ci, je voulais voir si vous pouviez créer l'URL, qui est ici, le profil. Pouvez-vous en faire un bouton au lieu d'un lien texte ? Je ne vous ai pas montré comment faire cela, voyez si vous pouvez y arriver. Il y a deux façons dont je peux penser à deux, si vous êtes vraiment bloqué, les commentaires, posez une question, répondez à une question. Rien d'autre ? Nan. Une fois que vous avez terminé, prenez une capture d'écran. Maintenant, je vous ai donné des images si vous voulez utiliser les données CSV avec les noms et tout le reste, puis chercher d'autres images de cuisines juste pour que la vôtre soit un peu différente. Vous avez de meilleures cuisines. C'est peut-être moi, j'en doute fort. Mais au moins, si vous choisissiez vos propres images, elles seraient toutes très différentes au lieu que tout le monde soit un peu pareil. Une fois que vous l'avez fait, prenez une capture d'écran téléchargée les devoirs et partagez-la également avec moi sur les réseaux sociaux. Je veux voir ce que tu fais. Partagez avec les autres si vous rencontrez des problèmes et comment vous les avez résolus, partager c'est prendre soin. Très bien, va faire ton projet et une fois que tu auras terminé, je te verrai dans la prochaine vidéo. 92. Permettre à votre client de mettre à jour le site Web dans l'éditeur de flux Web: Bonjour, Cette vidéo, nous allons regarder l'éditeur. J'ai beaucoup parlé de l'éditeur, mais nous ne l'avons pas fait. Nous travaillons chez le designer depuis longtemps. L'éditeur est la capacité de trouver votre client ou client, votre membre du personnel, votre mère ou votre père qui a créé un site Web pour. Cela leur permet de passer en revue et d'apporter des modifications. Ils peuvent parcourir le site, le site en direct ici, vous pouvez voir que je peux réellement parcourir et apporter des modifications. Je peux choisir une nouvelle image, d' accord. Ils peuvent publier. Le site sera mis à jour. Ils peuvent consulter les formulaires qui auraient pu être remplis sur le site. tout sans avoir à revenir vers vous. Ils peuvent apporter des modifications et publier à partir du site Web. Ils peuvent également commencer à ajouter des éléments à notre CMS, ajouter un nouveau témoignage. Pas de problème Écoutez, nous avons des témoignages ici. Ajoutez un nouveau témoignage depuis le site Web sans avoir à revenir vers vous ou via Webflow, pouvez tout faire dans le navigateur. Super chic, je l'adore. C'est probablement l'une de mes fonctionnalités préférées de Webflow. Nous n'avons rien à faire, il suffit de commencer à l'utiliser. Très bien, allons-y. Commençons à l'utiliser. Le premier que nous allons faire est juste un site Web statique. Nous voulons que le client puisse entrer et modifier les ticks, modifier les boutons, prendre des modifications, changer les images. Juste des choses qui n' avaient pas à nous revenir car aucun CMS n'était impliqué. Les règles sont qu'il doit être publié soit sur votre domaine intermédiaire, soit je vais utiliser le domaine principal. D'accord, et ensuite vous pouvez aller ici et dire, ou est-ce un projet partagé ? Nous n'avons examiné le cisaillement que plus tôt, pour le partager avec d'autres designers. Celui-ci est ce dont vous avez besoin pour permettre aux gens d'accéder au site Web sans venir vous voir ni passer par Webflow. Une chose à noter à ce sujet est que vous avez besoin d'un plan minimum pour le moment. Est-ce que c'est le même S1 ? OK, vous avez donc droit trois éditeurs invités avec celui-ci, vous pouvez le parcourir et voir les différences. OK, donc j'ai déjà amélioré le mien, je pense que je ne me souviens pas de ce que nous allons découvrir. Si je clique dessus, les membres s'en aperçoivent, accord, et je vais ajouter un éditeur invité. Vous pouvez accéder directement aux paramètres de votre projet et accéder aux membres. OK, je vais aller voir le rédacteur en chef invité. Le liquide de refroidissement reçoit un éditeur, nom étrange. J'aime l'appeler éditeur client, rédacteur client, rédacteur membre du personnel, je fais des conjectures, je mets une adresse e-mail, décide s'ils peuvent modifier ou modifier et publier. Ce qui peut arriver, c'est que vous pouvez autoriser les utilisateurs à le modifier et à l'obtenir déjà en tant que brouillons. Et puis quelqu'un d'autre doit être l'éditeur, créer du contenu, mais ne pas être capable de le publier. Vous pouvez donc faire les deux, s'il vous plaît. Merci Très bien, je vais saisir une adresse e-mail et appuyer sur Envoyer. Ils recevront un e-mail et nous passerons à l' ouvrir, d'accord, ils peuvent soit cliquer sur le lien que vous leur envoyez par e-mail, soit au bout d'un moment, ils apprendront que vous pouvez simplement taper un point d'interrogation et tapez et modifiez sur n'importe quel site Webflow. Et là, et si vous connaissez le nom d'utilisateur et le mot de passe en bas, mettez-les dedans et vous pouvez commencer à modifier le site, et je mettrai le mien dedans. Bien, une fois connecté, vous obtenez cette petite barre en bas. Et c'est cool. Vous pouvez accéder à différentes pages de votre site et les modifier. Ils peuvent décider, d'accord, ils doivent passer et dire, d' accord, ce n'est pas demander à Dan et Cushion, nous avons plus d' un membre de l'équipe. C'est nous Une question maintenant. OK, et ici, je peux cliquer sur Publier, d'accord ? Parce qu'on m'a donné la possibilité de modifier et de publier et de regarder ce qui se passe. Très bien, c' est donc le site en direct mis à jour et nous pouvons revenir au site en direct, mais cela supprime un peu nos capacités d'édition. Et cela a changé pour toujours sur ce site Web , et également sur Webflow. Ce qui est le cas, si je me lance en tant que designer, je n'ai pas à aimer accepté ou à avoir une version différente d'un accès à la page Contactez-nous. Tu vois que c'est incroyable. Ils ont été mis à jour sur le site, alors vous pouvez le mettre à jour ici. C'est pourquoi vous pourriez avoir besoin de cela. Ils peuvent modifier mais peut-être pas publier juste au cas où ils loueraient l'endroit maintenant pour rendre les choses modifiables, d' accord, peut-être que les éléments non édités diront comme arrêter de changer le bouton Soumettre. Si vous le sélectionnez ici et votre option Paramètres en bas, il y a une option qui indique que le bouton ne peut pas être modifié par le bouton OK, nous changeons des vies en cliquant sur ce texte ici. Passons aux paramètres et aux paramètres, les collaborateurs peuvent modifier cet élément. Je ne sais pas pourquoi les boutons ne le sont pas. Tu y vas. Passons à la page d'accueil. Vous pouvez modifier des images, regardez ça. Vous pouvez décider s' ils le font ou non. Voyons ce qui se passe avec les images sur leur site et leurs formulaires et quelques autres choses. Je vais donc revenir à l'éditeur. Tu peux le faire toi-même comme si je faisais semblant d' être le client. Vous pouvez vous faire passer pour le client vous-même et vous adresser à l' éditeur de ce projet. OK, donc c'est le designer que nous avons suivi pendant tout ce cours. Maintenant, c'est l'éditeur, et je n'ai pas besoin de me connecter car je suis déjà connecté. Je peux donc aller ici, cliquer sur l'image et en choisir une autre. Très bien, cliquons sur Ouvrir. Il va être téléchargé. Vous n'avez qu'à vous souvenir de publier. C'est plutôt sympa. Je vais là-bas pour m' imaginer. L'autre chose à examiner se fait ici sous forme de formulaires. Nous avons un formulaire et le site K, et le client peut parcourir et vérifier ces formulaires maintenant ici, les exporter au format CSV. OK, s'il y a des données qui ne s'affichent pas ici ou s'il y a juste des choses que vous ne voulez tout simplement pas savoir. Vous pouvez dire de désactiver peut-être le courrier électronique et simplement me montrer parce que vous êtes peut-être en train de recueillir des tas d'informations différentes. Mais cela signifie que le client se regarde un peu sur cette page. Regardons la mise à jour du CMS comme avant. Assurez-vous qu'il est publié. Vous pouvez aller les inviter, venus mais inviter un éditeur invité à l'adresse e-mail. Et puis, d'accord, maintenant on y est et on a juste eu un petit problème. Et en bas, la différence, c'est que nous avons collections et des témoignages, des collections de codes. Vous pouvez avoir de nombreuses collections différentes ici, des blog, des témoignages, des membres du personnel. Et vous pouvez soit cliquer dessus soit cliquer sur ce petit onglet ici. Vous pouvez voir le même type de liste, mais elle est blanche. Et vous pouvez dire que je peux ajouter un témoignage qui complétera tout cela. Très bien, ajoutez une image. Ok, War, lesquels sont ces délicieux ? Nous n'avons pas utilisé le kiwi depuis un petit moment. Et un témoignage de données à six reprises pour moi. Donc c'est le mois, c'est le jour où nous ferions l'année. Lien Instagram. Très bien, et le logiciel que nous utilisons est Adobe XD. Supposons que nous cliquions sur Créer ou sur Enregistrer en tant que brouillon. OK. Il est destiné à être publié. Publiez-le. Oui, s'il te plaît. Allons voir le site ici. Eh bien, il y pense, à mes publications. Eh bien, cela fonctionne depuis qu'il est encore en cours de publication, mais voilà. A travaillé. OK. Cela peut ne pas apparaître selon les règles que vous avez pour votre liste en ce moment, j'ai d' abord le plus récent, j'en suis presque sûr, mais c'est une bouée de sauvetage de pouvoir le donner au client que vous avez configuré. Vous n'avez pas à les faire entrer dans la page et à la modifier à chaque fois, il suffit de leur demander d'en ajouter d'autres, s' assurer qu'ils sentent que tous les champs peuvent apparaître sur cette page. Il se peut qu'il apparaisse sur 20 000 autres pages parce que vous les avez toutes connectées. Vous avez cette liste à de nombreux endroits différents. Super pratique, d'accord, cela permet à votre client de mettre à jour le site Web. Ils peuvent soit utiliser le lien que vous leur envoyez à tout moment. Mais souvenez-vous d' abord d'un point d'interrogation, puis saisissez Modifier. Nous l'afficherons en bas, où ils pourront saisir les détails et commencer à les modifier. Et je vais te bousculer. Très bien, on se voit dans la prochaine vidéo. 93. Comment créer un blog à l'aide de pages de collection de CMS dans le Webflow: Bonjour tout le monde. Nous allons prendre notre collection fluide comme nous l'avons fait plus tôt, mais en fait, la transformer , dans ce cas, blog en pages, en pages laides. Nous ne les avons pas encore stylisés. Nous allons le faire dans un moment. Mais écoutez, je n'ai pas vraiment créé toutes ces pages. Ils ont été générés pour moi par flow sur la base de cette liste. Mais le tendon, deux pages, des pages laides et décoiffées. C'est à peu près à cette époque du cours où nous sommes et vous allez probablement commencer à vous sentir comme des concepteurs Web forts et confiants où nous produisons beaucoup de choses avec peu d'effort. Allons-y et je vais vous montrer comment, si vous suivez, j'ai relancé mes témoignages que nous avons faits dans le dernier, pour réaliser que je l' ai mal orthographié. C'est mon témoignage. Ongles. C'est sur sa propre page, donc je suis retour à la page d'accueil fraîche et prête à passer entre celles qui n'existent pas. Ils n'en avaient pas le cœur. Supprimez-les. Alors, comment créez-vous la page ? Le début commence de la même manière pour créer une collection. Nous allons donc en créer un nouveau. Nous avons tous nos témoignages. Nous allons écrire un article de blog. Maintenant, il existe des modèles. Regarde ça, je vais cliquer sur quelques-unes d'entre elles, en fait un article de blog et il est juste prérempli et le contenu en bas ici, vous pouvez un peu voir le post buddy, le résumé du post, l'image, l'image miniature, juste des trucs pratiques pour commencer et vous donner quelques idées sur les pour lesquelles vous pourriez également utiliser les collections. Donc, les membres de l'équipe, leur titre de poste bio. Vous pouvez le voir, nous allons commencer par les articles de blog. Tout le monde fait ça. Vous voyez en bas, quelque chose d'autre à ajouter ? Tout va bien. D'accord, pour celui-ci, nous allons créer la collection. Que se passera-t-il alors ? Nous n'avons aucune donnée. OK, donc au lieu de vous en donner quelques-unes, je vais vous montrer que vous pouvez parcourir et ajouter des exemples de données. C'est juste de la foutaise que Webflow, celle d' Ed, c'est un peu nul aussi. Destiné aux articles de blog. Parce que si tu fais une recette, elle portera exactement les mêmes noms. Il contiendra une recette de l' histoire historique de la conception Web. Et il n'y aura aucun contenu. Donc ça va marcher pour celui-ci, blog parce qu'ils sont un peu comme titres d'articles de blog. Jetons un coup d'œil. Ils nous ont indiqué le nom de la limace, ce qui est plus logique maintenant, juste avant que ces témoignages ne soient publiés sur leur propre page, donc peu importe la nature de la limace. Maintenant, pouvez-vous voir mon site Web sous le message, couper le nom de l'article, qui devrait être de bons mots clés. OK, c'est quelque chose vers lequel quelqu'un peut établir un lien. Il est inséré dans un corps de texte de base. Ça s'appelle Rich Text, ce truc. Et il permet de modifier une image, à la fois une image principale et une image miniature. Et nous allons examiner cette option en vedette. Il y a une couleur associée à cet élément de liste, ce qui est plutôt cool. Très bien, ce sont donc les éléments de ma liste. Que se passe-t-il maintenant ? Je vais dire : Eh bien, cela n'a pas changé les choses aujourd'hui. Bref. C'est le fermer. Vous vous demandez : « Waouh, comment puis-je créer toutes les pages avant de passer à Plus et simplement faire glisser l'élément de la liste ». Mais ce n'est pas tout ce que nous allons faire pages avec ce genre de choses. Ok, ce qui se passe, c'est le genre déjà fait, ce qui est cool ici, pas de pages. Les pages statiques ont donc plus de sens maintenant, non ? Et ce sont des pages pour vos pages dynamiques, vous verrez Miss Collection Pages. Et ça y est. Voici mon cas de modèle d' articles de blog. Si on entre ici, on a une page blanche. Hey, c'est le modèle que tous ces éléments de liste connaissent, tous les hommes. Combien en avons-nous demandé 510 ? Quoi qu'il en soit, nous avons reçu de nombreux articles de blog différents. Tout ce que nous avons à faire est de styliser l'un d'entre eux. Faisons donc quelques trucs de base. Donc je suis dans le modèle, d'accord, assurez-vous que vous êtes dans le modèle. Je vais passer à mon, je vais utiliser une méthode légèrement différente. Je vais utiliser le Control E pour PC ou le Command E sur Mac. Et je vais dire que je veux à nouveau un conteneur Command T. Et je vais dire que j'ai envie de frapper. Je veux donc Command ou Control E. Je veux une image. Commande et contrôle E, et je veux un texte. Je veux, je veux un bloc de texte qui portera la date de création de ce blog. Ensuite, un autre sera celui des tics. Maintenant, vous avez une zone de texte, que vous pourriez penser : « Oh, vous pouvez l' utiliser ici parce que c'est comme dans les formulaires, peut-être, mais c'est une zone assez grande. Je t'ai fait ajouter ça. Cela dit, non, c'est juste de la performance, trouvez autre chose. Tu peux le faire. Texte. Nous allons examiner le texte enrichi. Nous examinerons les riches prises d'une vidéo à venir très bientôt. Mais en gros, cela vous permet d'avoir un manuel contenant des titres et toutes sortes de choses. Ok, est-ce que c'est fini ? Non Ce ne sont que des espaces réservés. Vous pouvez voir qu'il est écrit «  frapper avec moi ». C'était mon image. Donc, ce que vous devez faire, comme nous l'avons fait précédemment avec la liste, nous les relions à la base de données. Nous disons que vous n' avez pas à les mettre dans un rappeur comme avant. Vous dites simplement que vous vous connectez à lequel ? Connectez-vous à l'article de blog, s'il vous plaît. Il le sait parce que, comme nous sommes dans le modèle de billet de blog, le représentant est déjà là. D'accord, et qu'est-ce que ça fait d'utiliser le nom du blog ? Je l'ai connecté. OK, et maintenant, en gros, je vais connecter tout cela. Mais ce qui s'est passé maintenant toutes vos pages ont été créées, en fait seulement cinq ou six. Je vais passer à l'autre page, accord, cinq blocs de conception Web. Regarde ça. La page est terminée. Ce n'est pas très bien stylé. Mais c'est ça. Vous avez créé toutes ces pages qui seront liées à elles en une seconde depuis la page d'accueil, mais toutes les pages sont créées. Passons en revue et connectons quelques éléments. Allons-y et connectons les articles du blog. Et je veux que vous l' obteniez à partir de mon image principale. Tu y vas, d'accord, celui-ci, lui en fait, je veux ça en dessous, celui-ci ici. OK, cette zone de texte va en fait provenir du, nous n'avons pas créé ou publié cette seule date. Mais ceux-ci sont là automatiquement parce qu'il sait quel jour vous les avez publiés. Je peux cliquer dessus. Le mien n'est pas encore publié parce que je ne l' ai pas publié. Il ne le sait donc pas encore vraiment. La mienne a fini comme elle l'a fait. C'était bizarre. C'est bon Ça prend des poches ici pour une raison ou une autre. Pendant que je savais pourquoi ne pas publier sur, il suffit de faire un article CreateDon ici. Il apparaîtrait ici pour y être publié s'il avait été publié. Le moment est donc vide parce qu'il n'a pas été publié, ce qui est un peu étrange. Nous pouvons vivre avec ça. Maintenant, le texte enrichi, que vous voulez saisir, le parent Rapa, non les éléments intermédiaires ne sont pas ce qui se trouve ici, le bloc de texte enrichi. Et je veux l'attacher au corps du poteau, qui n'est pour le moment que Loren ipsum. Et c'est tout. Nous avons toutes nos pages. Vous avez toutes des images différentes, toutes des rubriques différentes, toutes à la même date car elles sont toutes téléchargées en même temps. Tu y vas. C'est une bonne chose lorsque vous travaillez sur la page sur laquelle vous souhaitez travailler, vous décidez simplement de la page sur laquelle il s'agit, puis vous commencez à travailler sur vos styles. Mais vous devriez probablement simplement les parcourir ou voir ce qui se passe un titre très long et un titre court, grande image, une image courte. Et sur un Mac, maintenez la touche Shift et touche Option enfoncées et utilisez les flèches gauche et droite. à jour des images prend un certain temps. Sur Mac, utilisez les touches Shift et Alt et utilisez les flèches gauche et droite. Il suffit de passer en revue et de dire, oui, ça correspond. Celui-ci, ici, se divise en deux lignes. Je vais devoir m' occuper de ça. Tu y vas et tu le styles, avec des styles. Très bien, cela rend les pages vraiment bonnes, vraiment rapides et faciles. Bien sûr que tu peux. C'est quelque chose que l'éditeur peut faire comme nous l'avons fait plus tôt. Ils peuvent y accéder, ils pourront trouver la liste ou la collection, désolé, et parcourir et ajouter leurs propres éléments de liste. J'ai cliqué sur le rouage, j'ai cliqué sur le rouage, j'ai cliqué sur l'objet réel. Vous pourrez ajouter de nouveaux articles de blog ou vous pouvez le faire, de Wind Flow à vous. Nous allons le styliser un peu. Passons à la section suivante où nous allons y accéder depuis la page d'accueil. C'était un peu difficile à comprendre pour moi, alors je vais le mettre dans une autre vidéo pour vous. 94. Lien vers une page de collecte de la page d'accueil de Webflow: Hey, dans cette vidéo, nous avons des pages d'articles de blog. Comment y accéder depuis d'autres pages ? Déterminez si nous avions une page d'accueil et que nous voulons savoir si cela y est lié ? On y va. Nous établissons une liste de collection et nous pouvons ensuite cliquer sur ces éléments. Nous avons créé une liste de collections pour nos témoignages, mais elle ne renvoyait à aucun lien. Nous avons simplement affiché des informations. Vous pouvez faire exactement la même chose, mais créer un lien vers l'élément de liste tel qu'il est affiché ici, comme nous sur sa propre page. Laissez-moi vous montrer comment faire. Très bien, nous avons donc nos pages. Comment nous connectons-nous à eux ? Allons-y, nous allons le faire sur notre page d'accueil. J'y vais toujours. Tu peux y aller. Peu importe. Page d'accueil. Et nous allons simplement ajouter une liste de collection comme nous le faisions auparavant. C'est un peu divisé parce que parfois vous voulez juste une liste de collection part entière, comme leurs témoignages, et vous n'avez pas besoin de pages, et c'est un peu plus facile à comprendre que en les faisant tous les deux en même temps. Mais on sait ce qu'est ce type. Nous vous connaissons dans mon contenant, dans mes objets de collection. Je vais les connecter à la collection. Donc, les articles de blog et vous pouvez le voir, n'oubliez pas que ce ne sont que des espaces réservés temporaires. Tu peux dire, qu' est-ce que je veux ici ? Eh bien, pour le moment, je suis content qu'ils s'étendent parce que je vais ajouter un bouton. Je vais cliquer sur Commande ou Contrôle E. Je vais taper le bouton. Où va aller ce bouton ? Maintenant, celui-ci violet apparaît comme un lien vers des sites statiques. Rien n'est lié à la page de collection Purple One. Lequel en particulier ? On ne choisit pas vraiment dans une liste. Vous dites simplement que, parce que nous les mettons à jour , regardez ce qui se passe. Blog actuel. Nous avons toutes ces pages il y a une seconde, j' en ai eu le titre, donc nous savions en quelque sorte de ce que c'était. N'oubliez pas d'annuler, d'annuler avant d'y ajouter le bouton. Il sait donc que la boîte sait ce qu'elle doit faire. Et si nous y ajoutons un bouton et que nous refaisons, refaisons, refaisons, OK. Le bouton peut accéder à l'article de blog pour qu'il sache quoi il s'agit et qu'il y aille. devient plus facile si vous dites simplement obtenir le texte du nom de l'article de blog, et que vous le faites correctement. Tu y vas. Est-ce que cela rend les choses plus claires ? Lorsque vous cliquez sur ce bouton, vous y accéderez. Très bien, je vais également ajouter une petite image, juste pour faciliter la navigation la page d'accueil et pour savoir où vous allez. Donc, l'emballage, vous, nous l'avons fait avant moi. Allons-y pour eux. Pourquoi pas ? Ajoutons une image à n'importe laquelle d'entre elles. OK, ce sera au-dessus de mon bouton pour l'obtenir dans les articles de blog à partir de ce qui a alimenté mon image miniature. Excellente. Et ce que je vais faire, c'est ajouter un peu de texte. Je vais dire manuel. Allez-y, s'il vous plaît. OK. Et celui-ci sera lié au titre, au nom. Et il y a un bouton qui va obtenir le texte pour dire qu'il s'agit de textes de boutons. Et celui-ci va vous dire en savoir plus. Très bien, on peut y aller et le styliser davantage. D'accord, mais nous les avons tous là et vous vous dites  : « Ouah, c' est la page d'accueil ». Je ne veux pas toutes les montrer. Comment puis-je n'en montrer que quelques-unes ? Vous souvenez-vous comment le filtrer ? Tu l'as eu. Vous le filtrez avec un filtre froid ou triez k. Faisons surface. Encore une fois, en reprenant ma liste de collections, je vais dire qu' il faut les trier par nom, mais par les nom, mais données qui ont été publiées ou ne l'ont pas encore été. Je vais donc laisser celui-ci. C'est probablement le meilleur, mais aucun d'entre eux n'a été publié, donc ça ne fera rien. Je vais donc dire la date à laquelle ils ont été créés de la plus récente à la plus ancienne et appuyer sur Enregistrer. Je vais dire, montrez-moi les quatre premiers D go. C'est peut-être un moyen de faire en sorte que votre page d'accueil contienne les dernières. Hé, je peux le prévisualiser et dire « allez sur cette page ». Excellente. J'ai besoin d'un GPS pour rentrer chez moi. Tu sais comment faire ça. L'autre chose que vous pourriez faire est de regarder les vedettes, car elles peuvent être comme si, pour le moment, elles étaient très vigoureuses. Vous devez avoir des caractères alphanumériques du plus ancien au plus récent, quelque chose comme ça. Alors qu'ils disent : « Je veux juste en choisir quatre ». Je veux les choisir. Tu n'as pas le droit de choisir la commande. C'est pour cela que le petit interrupteur est très utile. Jetons donc un coup d'œil à notre collection de listes. Regardons la liste de nos articles de blog. Et jetons un coup d'œil. Il y avait une option en bas de ces dictons, vous vous demandez, d'où vient-elle ? K pour en ajouter un vous-même, modifions-le dans les témoignages. Il s'agit d'un projet présenté plus tôt dans le cours, et vous ne le faites pas dans la liste, mais dans la collection. Disons que je veux mettre à jour cette collection, d'accord, pour inclure un champ appelé switch. L'étiquette du commutateur sera, vous pourriez ajouter un commutateur pour, je ne sais pas, Photoshop. Vous pouvez l'activer et dire n'afficher que ceux pour lesquels l'interrupteur pour Photoshop est activé, nouveaux ou en vedette. Tout ce que vous voulez utiliser ou que vous jugez utile pour cela, pour les activer , vous avez peut-être fait réduction, mais vous ne savez pas pourquoi vous l'utilisez pour. Les fonctionnalités fonctionnent très bien dans celui-ci. OK, maintenant j'ai ce petit interrupteur fonctionnel. Et en fait, vous enregistrez vos modifications. Donc collection. Maintenant que vous avez terminé au même endroit avec les articles de blog, vous pouvez dire qu'il est allumé en bas ici. J'ai quoi, cinq. Je vais uniquement raconter l'histoire de la thréonine. Je le ferai juste en raison de l'histoire et des cinq blogs de conception Web sur. Je vais donc passer en revue tout ça et juste dix autres. OK, donc je n'ai que l'histoire et cinq sites web. Je vais fermer ça et ils vont sur ma page d'accueil et je vais faire un filtre ici. Voici donc la liste de mes collections. Je vais dire que j' aimerais régler le problème. En fait, je ne veux pas régler ça. Je souhaite afficher le filtre. OK, je vais cliquer sur Filtrer. What Bi est mon petit interrupteur, et je voulais juste que les interrupteurs soient allumés. Si ce n'est pas le cas, vous ne pouvez pas être sur la page d'accueil et vous pouvez le parcourir et prononcer le nom de celle-ci, qui devrait dire page d'accueil. Je n'ai pas de fonctionnalités qui fonctionnent. Cool. D'accord, nous devons le personnaliser davantage, mais c' est ainsi que vous pouvez connecter quelque chose comme la page d'accueil à tous les articles de votre blog CMS dans votre élément de liste, vous pouvez avoir les différentes catégories, OK, sous forme de liste déroulante, peut être la santé et la beauté, votre formation ou quelles que soient les catégories que vous avez pour votre site. Et sur cette page, quelle que soit la page sur laquelle vous vous trouvez, dites que c'est la page santé et beauté. Vous pouvez activer les filtres uniquement pour ceux qui le sont, vous pouvez en ajouter plusieurs qui sont présentés. De plus, je n'ai pas cette option ici, mais je suis axée sur la santé et la beauté. Présenté dans Santé et beauté, puis triez par ce qui est le plus récent et le plus puissant. Très bien, supposons que vous souhaitiez le faire manuellement. Faisons-le dans une autre vidéo séparée. Ensuite, je vous y verrai. 95. Lien manuel à une page de collecte dans Webflow: Bonjour. Dans cette vidéo, nous allons créer un bouton pour le placer où nous voulons. Il va donc passer à une page de collection car nous avons enregistré go there. C'est un peu compliqué, mais parfois vous avez juste besoin d'un bouton pour l'activer quand vous en avez besoin. La création de listes de collections est géniale. Ils sont tous super cool de manière dynamique, mais parfois les boutons de l'homme des cavernes disparaissent. Je veux vous montrer comment les connecter manuellement. Nous allons entrer depuis la page d'accueil. J'ai cette liste que nous allons ignorer. Cette liste de collection devait le faire à partir d'un simple bouton dans une liste. OK, nous allons juste dire qu'il y a un bouton. Comment le faire sortir de la liste ? Je vais récupérer la liste et la désactiver. Résumons donc n'en afficher aucun. Et ce bouton ici, je peux entrer dans mon contenant en haut, Various. Ça n'existe pas, fais semblant de ne pas exister. Alors, bouton, comment le connecter ? Mais je veux vraiment aller ici et aller pages, puis me connecter à la page. Ce n'est pas ainsi que cela fonctionne. J'aurais aimé que ça le soit. Et si vous savez comment ne pas créer une liste de collection au préalable , ce qui est une bonne chose, parfois vous voulez simplement aimer un lien vers celle-ci, un lien vers cette page. Ce que vous pouvez faire, c'est simplement utiliser la méthode hacky de l'URL. Je vais te montrer ce que je veux dire. Passons à la liste. Découvrez les articles de blog. Disons que je possède un lien vers l'histoire de la conception Web. Cette limace ici, ok, nom horrible. Son URL est la suivante. C'est sur le site Web. Donc, le site web de Dan design.com slash blog slash, l'histoire de la conception Web, le vôtre pourrait dire des articles ici. J'ai changé le mien pour bloguer à un moment donné alors que tu ne regardais pas. Mais ce morceau ici, accord, je peux saisir tout cela, y compris cette erreur de barre oblique, le copier. OK, je ne veux pas ça parce que ça va changer. Ensuite, je pourrai repartir d'ici. OK, revenons à ma page d'accueil et dites simplement lien vers cette page. Il n'est pas entré. D'accord, ça n'a pas marché et phosphorylé. Cliquez sur Copier, puis sortez. Maintenant, je vais le coller et je vais le supprimer. C'est trop coder en dur, mais si vous laissez la barre oblique et que vous y laissez tout le reste, cela fonctionnera. OK, cela ne fonctionnera qu' avec le site publié, pas dans l'aperçu. Donc ça y est, parfait. OK, et je vais publier mon site. N'oubliez pas que la publication prend beaucoup plus de temps lorsqu'il y a une base de données à gérer. OK, regardons le site. Et maintenant, j'ai un bouton solitaire. Et quand il clique, il se dirige vers n'importe quel site Web et c'est ça, n'importe quel site Web et c'est ça en plus de tous ces fichiers indésirables. OK, et ça ira directement là-bas. Quel pourrait être le gros problème ici ? C'est exact. Si on change le nom de ça, d'accord ? Ou cela, vous devrez peut-être le parcourir et le modifier. Cela va poser problème. Vous devez vous mettre à jour, configurer ce que l'on appelle une redirection. Permettez-moi de vous donner un, par exemple, je peux entrer ici maintenant et cela va à collection et aux articles de blog. Et il y a sept façons dont nous voulons cliquer pour le penser. Oui, je veux changer cela article à un blog ou d'un blog à l'autre. OK. Je le fais dans le rouage de la collection CMS ici. Et je dis qu'en fait, je ne veux pas que ce soit autre chose. Je voulais revenir au post. Et ce que vous verrez ici, c'est écrit : « Hé, vous devez configurer des redirections, cliquer dessus, suivre les choses. C'est un peu hors du cadre de ce cours. Ou enregistrez-le simplement et assurez-vous que lorsque vous revenez sur votre page d'accueil, cliquez sur le petit bouton, vous êtes maintenant appelé post que je sauvegarde. C'est la seule chose à laquelle il faut faire attention. C'est un peu bizarre de le coder en dur. Donc, la seule façon dont je peux penser connecter manuellement à une page, qu'il y a des moments où vous avez envie de le faire. Sinon, créez une liste, utilisez peut-être un interrupteur qui l'active pour indiquer «  En vedette » ou pour simplement l' activer afin de pouvoir ensuite configurer des filtres et simplement afficher un bouton en particulier, bouton plus astucieux disant que plupart du temps, nous voulons une liste, rallumons l'écran comme ceci. Cela fonctionne donc très bien. Je vieillis de façon difficile. À la fin de ce cours, j'aurai besoin d'un bouton d'homme des cavernes pour me déplacer où je veux. Ne me donnez pas ces trucs fantaisistes, géniaux et incroyables qui me font gagner beaucoup de temps. Donnez-moi ce qui va se casser tout le temps avec des URL complètes, des URL codées en dur. Quoi qu'il en soit, c'est tout, créer un lien manuel vers une page de collection ? Faites-moi savoir si vous connaissez une meilleure façon de procéder. Il y en a probablement un et je ne le sais tout simplement pas encore. 96. Comment mon client ajoute-t-il un article de blog dans la collection CMS dans Webflow: Bonjour tout le monde. Dans cette vidéo, je vais vous montrer comment votre client ajoute une page à votre site Web. Dans ce cas, il s'agit d'un article de blog. En gros, allez dans l' éditeur, cliquez sur ce bouton. Oui, il n'y a pas grand-chose de plus que ça, mais bon, il y a d'autres choses que je voudrais te montrer. Eh bien, en fait, je vais vous montrer toutes les étapes au cas où vous vous perdriez un peu, sinon, c'est tout. Tout comme le témoignage que nous avons fait plus tôt, sauf que c'est une page entière. Magnifique. D'accord, tout d'abord, c'est que tout doit être publié. Assurez-vous donc qu'il soit publié. Vous devez vous assurer de l'avoir partagé avec eux, d' accord, invitez des éditeurs invités. Ils peuvent soit cliquer dessus, soit cliquer sur le lien qu'ils ont reçu de vous, soit se souvenir, ils peuvent y placer un point d'interrogation et y accéder. Très bien, pour qu'ils puissent entrer et modifier les pages qui existent. Ils peuvent aller jusqu'au bout et dire que cela doit vraiment être changé. OK, c'est une question de graphisme. Cliquez sur Publier les modifications. Ça va modifier le dossier. Mais maintenant, ce que je veux faire c'est ajouter mon propre article de blog. Je suis le client. Je voudrais ajouter mon propre article de blog, s'il vous plaît. Je vais aller sur les articles de blog ou vous pouvez aller plus loin, les collections, les articles de blog. Ou vous pouvez utiliser ce petit onglet et regarder, il y a une option ici. Ça dit d'ajouter du nouveau, quel que soit le nom que nous avons appelé Il est maintenant indiqué d'ajouter un nouveau billet de blog. Pareil pour le témoignage. Témoignage, facile et facile. Il faut remplir les champs et une seconde. Très bien, bon vieux ipsum.com. Est-ce que quelqu'un utilise celui-ci ? OK, juste du texte d'espace réservé et une mise en scène prête, prête, publiée, d'accord , et comme avant, comme tout témoignage, elle apparaîtra, mais maintenant ce sera en fait une page une fois l'image charges. En fait, je n'ai pas mis de vignette et de gueule. D'accord, mais il ne vieillit jamais. Ils ont créé un article de blog ou une nouvelle page de produit et vous nous proposez une nouvelle recette, peu importe ce que vous ajoutez à votre site. Il faut monter là-haut. Et de retour ici, dans mon designer, je vais voir si le client est entré parce que mon blog publie six articles. Il est neuf heures. Oui, je sais que ça l'est. Bonjour, bonne ondelette pédagogique. Ça y est. Tout est en train d'être ajouté. Amusant. C'est bon, ça y est. C'est ainsi que votre client, Ed est un article de blog ou toute autre page que vous souhaitez ajouter à votre collection sur votre site Web. 97. Comment utiliser des éléments de texte riches dans le Webflow: Bonjour tout le monde. Rich prend des éléments. Nous les avons en quelque sorte regardés. Ils sont apparus ici et là. Qu'est-ce qu'ils sont ? Comment y ajoutes-tu des choses ? Oh, écoute, tu peux ajouter des trucs, tu peux changer des trucs. Vous pouvez ajouter des images, des vidéos toutes sortes de bienfaits à un bloc de texte enrichi. Toi, moi et le beau garçon, nous allons tous apprendre à les ajouter, les ajuster, mais pas à les styliser. Nous allons les styliser dans la prochaine vidéo. Très bien, commençons à créer du texte enrichi, d' accord, un élément de texte enrichi. Nous en avons un ou qui prend du blocage, d'accord, nous en avons déjà un. N'oubliez pas que nous en avions un qui a été ajouté automatiquement à nos articles de blog. Nous y sommes allés et ça y est. Il vient d'être jeté dedans. Différent peut-être de celui que nous avons ajouté ici où ils le collent simplement dedans, si je le colle simplement, cela finit par être du texte de paragraphe et rien d'autre. Jetons donc un coup d'œil à en faire un seul, juste sur la page d'accueil, sans être connecté à la base de données, instant, il suffit de le regarder seul. Donc, une clé, j'ai une sorte de maison pour ça ici. Et je vais ajouter ce bloc de texte enrichi ici. Très bien, nous avons donc un bloc de texte enrichi. Vous pouvez cliquer dessus comme vous l'avez fait auparavant et dire : « Qu'est-ce que c'est qu'une classe pour elle ? » Mais disons que je veux y ajouter des choses parce que pour le moment, il contient des éléments génériques. Ajoutons des choses. Tout ce que vous avez à faire, double-cliquez sur n'importe quel élément ou au-dessus endroit où vous souhaitez qu'il soit et est-ce que cela revient ? D'accord, et si vous commencez à taper, cela suppose que vous tapez du texte de paragraphe, même si vous êtes obligé de savoir, juste en tant que texte de paragraphe, comment puis-je, disons que je veux le mettre en appuyant ici, revenir et je suis Je vais dire que c'est un succès mitigé. L'option de frappe. Ce que vous faites, c'est le surligner et il vous donnera les options autorisées dans la zone de texte enrichi. Vous ne pouvez pas faire grand-chose, mais en gros, tout ce dont vous avez besoin pour un article ou un billet de blog, un bout de texte, vous avez vos titres, évidemment, des réunions. Ok, tu dois y jeter un œil. Nous pouvons le mettre en gras, italique, en indice, en exposant. Une chose est la suivante : quand c'est un hit, comment puis-je en redevenir un paragraphe ? n'y a pas d'option de paragraphe similaire. Il suffit de cliquer à nouveau sur le chauffage, vous pouvez voir que c'est trois parce qu'il est bleu. OK. Cliquez dessus et il revient à valeur par défaut, qui est le paragraphe. Nous allons juste être importants lorsque nous commencerons à le styliser dans la prochaine vidéo. Ou les choses intéressantes ici, hyperliens et les guillemets de blocs de liens hypertextes, vous pourriez ne pas. Je vais sélectionner ceci, en faire un blockquote. Blockquote est, c'est désactiver. Il s'agit d'un morceau de texte en retrait destiné à être utilisé comme citation. C'est pourquoi c'est un blockquote. Blockquote parce que c'est censé être un gros bloc de choses. C'est censé être comme si vous citiez quelqu'un, vous pouviez simplement le mettre entre guillemets. Mais lorsqu'il s'agit d'un morceau agrandi, vous l'utiliserez en retrait. C'est donc hors du flux du texte et c'est censé être interprété comme une citation faisant référence à autre chose. Et ils utilisent souvent cette petite phrase. Alors c'est comme ça qu'ils font un blockquote. Quoi d'autre, nous avons sélectionné tous les liens blockquote. C'est tout Jetons un coup d' œil à certains des bits probablement les plus puissants. Supposons que je veuille ajouter une image, je vais appuyer sur Retour. Et vous l'avez peut-être fait, je l'ai ignoré auparavant. Si vous commencez à taper, vous obtenez juste un paragraphe. Mais si tu appuies sur Retour et que tu attends un peu, écoute, à quoi sert ce truc ? Je vais y jeter un coup d'œil. Il y a des trucs sympas. Faisons les choses ennuyeuses en fait, liste à puces, j'ai besoin d'orange, j'ai besoin de violet. OK, c'est une liste à puces et revenez. Faisons quelque chose de plus excitant. Il y a une liste à puces numérotée. Allons-y Une image, des images, plutôt cool parce que c'est ça, ajoutons l'image. Il possède quelques fonctionnalités supplémentaires. Vous pouvez décider si elle est centrée, si elle est aussi grande que possible pour le moment, si c'était une image plus grande, elle irait jusqu'aux bords, mais elle ne s'étale pas au-delà, si elle est aussi grande que possible pour le moment, si c'était une image plus grande, elle irait jusqu'aux bords, mais elle ne s'étale pas au-delà, fait 100 % de la taille. Alignement à gauche C'est logique. Celui-ci est plutôt cool. Ajoutons du texte. Je vais prendre ça, en fait faire pousser du Loren ipsum you juste là. Est-ce que tout le monde l'utilise ? Générer Loren Ipsum à partir du site ? C'est le côté le plus ennuyeux de deviner qui a regardé les enrouleurs de tuyaux ? **** vos publicités. Très bien, revenez ici. J'ai donc quelques tiques, je vais les coller en dessous. Mettez-la à l'écoute de Rambo, collez-le simplement dès que le texte du paragraphe. Ce qu'une image peut faire, c'est que vous pouvez dire, mon ami, que vous êtes à gauche. Vous pouvez voir le texte se déplacer, aligné à droite. Le texte s'arrête, ce qui est plutôt cool. Images que vous pouvez saisir ici et qui ont une sorte de légende intégrée. OK ? Les images aussi. C'est un petit truc avec une clé à molette. Juste la clé, même si tu as des trucs de base. Vous avez un texte alternatif. obtenez-vous à partir des ressources autres que le panneau ou écrivez-vous des éléments personnalisés et vous les remplissez là ? ce qui concerne la taille, vous pouvez décider que la taille est réellement élevée, soit la moitié de la taille, multipliée par deux. Je ne sais pas pourquoi c'est multiplié par deux, mais vous pouvez aller sur toute la largeur c' est essayer d'aller sur toute la largeur aussi loin que possible. Personnalisé, d'accord, vous pouvez décider de sa taille . Vous pouvez donc obtenir un peu de détails ici avec votre image. Et sur ce lien, c'est juste quand on clique dessus, qu' accède à une URL. Dans ce cas, il se peut que cela aille à Unsplash où j'ai obtenu l'image à partir d'images. Et qu'est-ce qu'il y a de cool ici ? Mettons quelque chose ici. Je suppose que je suis assez facile à regarder en vidéo. Il vous suffit de copier-coller depuis votre chaîne YouTube préférée. C'est mon préféré. Et n'importe quel vieux et mon garage. Tout ancien clip YouTube que vous pouvez récupérer, partager, OK et le copier. OK, Vimeo fonctionne aussi. Ensuite, il vous suffit de le coller ici et vous aurez une vidéo YouTube avec les mêmes caractéristiques que l'image. Il y a beaucoup de choses que tu peux faire ici. Mais la plupart du temps, c'est la même chose qu'une image, amusant. Y a-t-il autre chose que je devrais mentionner ? Vous pouvez y intégrer du code. Nous n'allons pas entrer dans le code et les beans pour l'instant. C'est une vidéo sur ma liste qui apparaît dans celle-ci, un contenu assez riche, intégré et riche. Je ne l'utilise jamais. Vous pouvez ajouter des éléments tels que des listes SoundCloud et Spotify. Et vous devez utiliser Google comme une grande liste de contenus riches intégrés pour Webflow. Je ne l'utilise pas très souvent, mais il y a des choses que vous pouvez y mettre. Celui-ci, nous le ferons plus tard, mais c'est pour des choses comme ton calendrier Li, ton truc de chimpanzé mâle. Ils peuvent y entrer sous forme de code et de gros code. Et bien que cela soit une bonne chose pour nous en tant que concepteur et concepteur de Webflow. Ce sont toujours des produits vraiment utiles, ajoutent du contenu très rapidement plutôt que glisser une image et de faire tout ce genre de choses. Il est vraiment conçu pour l'éditeur, votre client, votre client, votre mère, qui mettait à jour le site Web parce que nous l'avons montré auparavant, s'ils entrent dans l' éditeur, laissez-moi le charger. Mais au cas où vous l'oublieriez, vous devez vous assurer que le site Web est publié. Et vous allez dans l'option Partager et vous vous assurez de les inviter en tant qu'éditeur invité. Nous avons ouvert le site. Et s'ils n'ont pas reçu le lien de l'e-mail, ils peuvent simplement y saisir un point d'interrogation. Et ils peuvent parcourir et commencer modifier le bloc de texte enrichi exactement de la même manière. Vous devrez peut-être leur donner une petite démonstration de son fonctionnement. OK, donc ils peuvent entrer ici et dire, en fait, je vais passer en revue et sélectionner Enter. OK, ils vont commencer à taper pour un paragraphe ou le surligner et faire un H2 ou un blockquote, ou revenir et commencer à ajouter une sorte de contenu multimédia. Idéal pour les articles, idéal pour les blogs. Pourriez-vous déjà nous dire comment le styliser ? On ne peut pas le supporter. Il y aura une autre vidéo. Faisons-le ensuite. Tout le monde veut d'abord le styliser. Je dois découvrir ce que ça fait. D'accord ? Très bien, allons-y. 98. Styler un texte riche dans un CMS de flux Web: Bonjour tout le monde. Il est temps de personnaliser notre bloc de texte enrichi différemment du site Web normal. C'est une question de tête, c'est aussi une question de frappe. Pourquoi ont-ils une apparence différente ? Parce que c'est dans un bloc de texte enrichi, je vais vous montrer comment tricoter des styles dans ce même texte de paragraphe, des textes de paragraphe. Ils ont un aspect différent parce que l'un se trouve à l'intérieur d'un bloc de texte enrichi Laissez-moi vous montrer comment procéder. Bien, pour personnaliser le bloc de texte enrichi, vous pouvez le faire avec tout le reste, ou vous pouvez le faire uniquement pour le bloc de texte enrichi en fonction de ce que vous voulez. Si vous voulez simplement qu'il suive les styles du reste du site Web, vous n'avez rien à faire. Disons que c' est une question frappante. Je vais en ajouter un comparatif ici et peut-être aussi ajouter du texte de paragraphe. Et on a un gars qui en a un peu plus haut ici. Ce n'est pas dans la zone de texte enrichi, d'accord, ça y est, là. Donc, ce que je dois faire c'est que peu importe si je stylise celui-ci. Eh bien, celui-ci, d'accord, si je clique dessus et que je passe ici et que je dis que vous le vouliez, tous ceux de l'ensemble de ce site. Et elles seront toutes une police d'écriture qui fera de nous Oswald. OK ? Et disons que tout le paragraphe de l'ensemble du site sera un peu gris clair ou adoptera une couleur vraiment évidente. OK. Pourquoi ça n'a pas marché ? Parce que je n'ai pas cliqué sur les anciennes classes. Donc je supprime la classe. OK, tous les paragraphes de ce site web, je vais être bleu. Joli. Ils viennent donc tous faire le trajet. Maintenant, si c'est ce que tu veux, c'est ce que tu fais. Si tu veux que ce soit différent. OK ? C'est bien pour le site Web, mais cela pour le blog ou l'article doit être différent. Ce que tu dois faire, c'est deux choses. Vous avez besoin du bloc de texte enrichi, le type de parent qui circule partout. Il a besoin de sa propre classe. Peu importe le nom qu'on lui donne. Ok, nous allons appeler nos textes enrichis, mais tu peux l'appeler comme tu veux. Et quelle magie opère lorsque le flux existe, disons les titres ici. Si je dis, ça te rappelle si tu oublies, mais c'est mon travail. Je te le rappelle. Si je lui donne le phi, dites tous les H 1, parce qu'ils peuvent apparaître plusieurs fois, d'accord, tous les huit, mais ce truc est nouveau. Il indique Nist, le sélecteur à l'intérieur des textes riches. C'est le cours que nous venons de créer. Et tu te dis : « Oui, allons-y. OK. Cela signifie simplement que cela n'affectera que les H 1. Peu importe le nombre de fois que vous les utilisez. S'ils se trouvent dans notre zone de texte enrichi contenant cette classe. OK, donc je vais aller ici et dire que je veux que ce soit qui l'a été aussi, d' accord, ce qui est différent pour les articles. C'est une façon de séparer le contenu, mauvais choix de polices, d'accord, je veux probablement de la police Serif. On y va. OK, redisons le paragraphe et la même chose. Disons que je veux qu'il soit en italique et que j' aimerais qu'il ne soit pas bleu parce que ça me tue. Donc, tant que mon parent, accord, de la zone de texte enrichi applique une classe. Maintenant, au cas où nous serions du texte enrichi. Vous pouvez dire que vous entendez tous les paragraphes. J'aimerais redevenir un endroit noir. Oh, d'accord. Pourquoi cela a-t-il fonctionné ici et n'est-il pas apparu ? C'est un très bon point. Oh, je n'ai pas annulé ça. Je clique dessus. Je ne pense pas l'avoir fait. Peut-être que c'est ce que je n'ai pas fait, c'est regarder. Oui. Tu m'as vu ? Cela pourrait t'arriver. Je vais le laisser au cas où cela suffirait à m' assurer que lorsque vous dites que je veux que tout le H4 soit correct, qu'il soit imbriqué dans du texte enrichi. Seul le H4 est là et regardez, il y en a deux, il y en a un autre. Je vais donc choisir une belle couleur, très évidente et terrible. On y va. Maintenant, j'ai dit plusieurs fois qu'il devait y avoir l'emballage à l'extérieur. Cela ne nous posera donc aucun problème, mais c'est quelque chose à retenir. Parce que si je vais sur une autre page, disons simplement que j'y vais, j'ai une page qui l'a déjà , mais un modèle d'articles de blog. OK. Voilà mon riche manuel. Tu te demandes pourquoi c'est bleu ? Nous l'avons fait noir. Ils doivent donc le faire, c'est ne pas le faire. C'est exact. Ajoutez simplement ce texte enrichi. Texte enrichi. Et ça va dire : Oh, regardez les clichés qui attirent l'attention. C'est bon, je suis noir maintenant et je frappe. OK ? Tu n'es pas celui-ci. Je veux vraiment cliquer dessus ici. Vous vous êtes peut-être demandé comment je ne peux pas le changer ici ? Ok, tu n'es pas allée chez ton éditeur. À l'intérieur. Vous pouvez passer à l'éditeur et commencer à le faire, ou revenir au CMS et revenir aux articles de blog. Et je ne me rappelle pas lequel je regardais. C'est l'un d'entre eux. Non, pas celle-là. Regardons celui-ci. C'est ici que toutes les modifications peuvent être effectuées Si vous voulez, le designer, vous travaillerez souvent ici. Le client travaille souvent dans l'éditeur. Maintenant, vous pouvez passer en revue et dire que cela devrait être un H1. Maintenant, je vais le sauvegarder et aller chercher l'histoire de la conception Web. Fermons-le. Et ce devrait être l'historique de cette police serif. Ce n'est pas celui-ci. L'histoire de leur nom. Sain. Est-ce que cela a du sens ? Assurez-vous qu'il existe une classe autour du wrapper pour le bloc de texte enrichi. Ensuite, assurez-vous de cliquer sur l'option d'imbrication qui apparaît en haut. Très bien, je suis de retour. J'étais en train de dîner et je me suis «  Tu sais quoi, j'aurais dû leur dire. Je suis de retour pour te dire ce que j'aurais dû te dire. C'est lié à la cascade ou à la spécificité. Nous avons donc séparé ces styles pour le bloc de texte enrichi. Ce paragraphe était différent car il est imbriqué dans le riche manuel, différent de celui-ci. Kind of at the Cascades fonctionne toujours parce que c'est un paragraphe, il suffit de regarder tous les paragraphes. C'est réglé sur Arial, à cette fin. Et celui-ci, ici, je n'ai pas changé. Ce ne sont toujours que des paragraphes, des textes riches, mais je n'ai rien vu d'autre qu'Arial. Il va donc suivre cette voie à moins que je ne le change ici. Ce que je veux dire, donc texte de paragraphe ici ou paragraphes. Et comme je ne l'ai pas changé ici, cela devrait avoir un impact. OK. Parce que je n'ai rien changé ici. Ça va aller maman, je ne sais pas quoi faire. Je vais juste utiliser par défaut le parent k, celui qui remonte la rivière, la cascade, et l'utiliser comme base. Mais pour être un peu plus précis, j'entre et je dis : « Écoutez, vous avez eu un impact sur le lit. Qui s'en souvient ? Journée de l'IDB. Tu es dans leur identité, dq dy, tu devrais savoir comment t' en sortir par cœur. On y va. Comic Sans, prends cet impact parce que c'est plus précis. C'est ignorer ce qui s'est passé ici. Donc tu dois quand même y réfléchir. Par exemple, dois-je changer la taille de la police ici pour chauffer pour en appuyer une ici plutôt que d' en appuyer une ici. Je lui dis : « Non, ils sont tous les deux pareils. Si je voulais être tous les deux un peu plus grands, je vais en fait utiliser ce genre de parents pour qu' ils grandissent tous les deux. Et j'en suis content également. Je vais donc laisser la cascade refroidir. Je suis donc revenu pour vous apprendre à utiliser Impact et Comic Sans. Tu es le bienvenu. 99. Projet de cours 08 - Blog CMS: Bonjour, c'est l'heure du projet de classe. Nous allons créer un blog de manière fluide. Rien de trop grand ou de trop chic. Juste quelque chose de simple comme être une page d'accueil et concevoir l'un des modèles de pages, d'accord ? Et il s'agit d'apprendre ce CMS. Je veux donc que vous créiez votre propre collection et que vous n'ayez besoin que de trois de ces articles dans votre collection. Où allez-vous le trouver ? Je veux que vous réinterprétiez un blog existant. Peu importe d'où tu le trouves. Si je vous donne le contenu, tout finit par se ressembler. Et si nous utilisons les éléments issus du flux de travail, tout semble très Loren ipsum. Il suffit de sortir. Si vous avez un blog que vous aimeriez ou si vous sortez et recherchez simplement des blogs. Voici quelques-uns des blogs que je consulte sur Creative Review, celui sur le flux de travail que vous pourriez parcourir et utiliser. Adobe en a un incroyable. Dribble. Ils appellent ça des histoires triples. Et ce que tu cherches à faire, c'est en deux parties. Nous allons avoir une page d'accueil comme nous l'avons fait pour certaines d'entre elles. OK. Ils ont décidé de faire leur liste de collection de cette façon. Et lorsque vous cliquez dessus, vous accédez à la page du blog. Donc, je ne veux pas que vous en choisissiez trois parmi quels sont ces sites ? Il y a le titre que vous pouvez saisir, le court résumé, la date que vous pouvez créer et il y a la miniature de l'image. Il suffit donc de prendre trois d'entre eux et vous n'avez pas besoin de la page entière. Il suffit de faire des trucs au-dessus du pli. Et je ne cherche pas comme tout ce que nous avons fait. Il suffit de parcourir l'image, le titre. Assurez-vous de garder l'auteur, accord, puis de prendre une partie de tout cela ne doit pas nécessairement être tout. Tu peux voir, hé, regarde, c'est quoi ça ? Tu sais comment ça s'appelle ? Il s'agit d'un cas de guillemets et de titres différents. Cela vous en apporte juste une partie. Vous pouvez essayer de comprendre comment faire du drop cap comme ça. D'accord, nous prenons juste un peu de texte, puis nous allons le modifier sur votre article de blog. Alors choisissez-en trois. Jetons un coup d'œil. Refonte du blog existant, collection de blogs sur la page d'accueil. Fais juste une petite sieste, tu n'as pas besoin d'aller nulle part. Nous sommes en quelque sorte en train de tout mettre en place. Personnalisez-le autant que vous le pouvez. Si vous comptez y consacrer une demi-heure , consacrez-y une demi-heure. Si vous comptez passer une demi-journée sur ce spin, une demi-journée sur celui-ci. C'est tout à fait correct. n'y a ni bien ni mal ici. L'un d'eux a un temps disponible différent, un navigateur, une section héros et dans les cartes récapitulatives. OK, c'est cette liste de collection que nous avons faite plusieurs fois sur la page d'accueil était ma page de témoignages. C'est ce résumé de la collection où vous pouvez cliquer et lire le grand article. Elle est meilleure. Il y a en bas ici que sur votre page d'accueil, le style est un peu le mien. Et ils devraient créer des liens vers ces pages. Donc trois pages réelles. Sachez simplement qu'il s'agit d'une réinterprétation de celle de quelqu'un d'autre lorsque vous le publiez et que ce n'est pas votre travail. Et il suffit d'inclure un lien vers l'auteur et un lien vers l'article original. Il suffit de le mettre dessus en disant qu'il s' agit de l'article original, de le styliser et d'en faire partie intégrante. Oh, je suis de retour. OK. C'est le lendemain et j'ai pensé, vous savez, que ce qu'ils devraient également faire est activer l'index désactivé k. Il se trouve dans les paramètres de votre projet en publiant ECO. Souvenez-vous de celui-ci ici, ici, ici. OK, juste pour dire à Google, hé, ne vous embêtez pas à indexer ça parce que c'est un doublon. Ce ne sont pas les droïdes que vous recherchez. OK. Continuez à ne pas essayer de vous classer pour ce genre de choses parce que ce n'est pas le nôtre. Réaliser. Tant que tu y es. Assurez-vous simplement d'explorer l'interface de l'éditeur afin que, lorsque vous traitez avec des clients, vous sachiez ce que leur côté ressent et que vous essayiez de faire ce qu'ils feront. Et cela pourrait vous donner l' occasion de vous entraîner, oh, je dois le faire du côté du concepteur pour m' assurer que x apparaît à côté de la modification, fait juste deux pages et une page d'accueil de collection, une page de blog modèle qui vous recrache trois pages parce que c'est génial, parce que ce sont les livrables du CMS, prenez une capture d'écran de votre page d'accueil et de la mise en page de votre blog. Cela devrait donc être un total de quatre pages d'accueil et vos trois mises en page de blog et téléchargez-les ici, partagez-les également sur les réseaux sociaux. serait intéressant de voir ce que tu étais et de faire un peu de temps avant et après pour faire une capture d'écran de ce que nous avons pris, de ce que tu as fini par faire avec l'informatique. Les problèmes que vous rencontrez peuvent vous aider à contacter la communauté, en particulier les groupes ici présents pour obtenir des conseils et des échanges. Tous, l'un d' eux, aucun d'entre eux. C'est à vous de décider si vous souhaitez partager sur les réseaux sociaux. D'accord, c'est le projet de classe pour un blog fluide. Va le faire. Amusez-vous, faites en sorte que tout soit fluide, faites-nous fiers. Je te verrai dans la prochaine vidéo. 100. Code HTML intégré de Calendly, Twitter et Castos: Bonjour tout le monde. Nous allons examiner les codes d'intégration HTML. C'est un moyen de tirer parti des fonctionnalités, du contenu et de l'interactivité d'autres sites Web. Nous allons regarder Calendly, les casters et Twitter, ceux que j'utilise. Mais en gros, il vous suffit de copier et coller du code et vous vous retrouvez avec des trucs sympas sur votre site Web. Vous pouvez voir des podcasts, simplement des diffusions sur le site Web, quelqu'un d'autre les héberge et les diffuse. Vous pouvez réserver du temps et un calendrier pour Calendly et lire tous mes tweets, puis les mettre à jour dynamiquement. Et pour les services fournis par Twitter, il suffit de copier-coller le code. C'est un moyen très simple d'ajouter à votre site Web des fonctionnalités réelles que à votre site Web des fonctionnalités réelles vous n'avez peut-être pas créées. Tu as emprunté à d'autres personnes, ce qui te donne une belle apparence. Très bien, allons-y et faisons-nous bien paraître, d'accord, pour lancer tout ça, on commence par, je suis de retour sur mon portfolio parce que mon autre site devenait assez désordonné. J'ai donc juste fait une petite section pour cela en bas. Je vais appuyer sur un bouton et passer à la section des composants, celui-ci a appelé et enchéri. Cela recevra le code. C'est là que le code doit aller. Allons trouver le code. Je vais utiliser certaines des fonctionnalités que j' utilise maintenant, ce n'est pas illimité, mais comme s'il existe des milliers de sites qui permettent d'intégrer leurs services sur votre site. Je vais te le montrer comme celui-ci ici. Podcasts. J'utilise le cycle qui nous a coûté. Ils hébergent mes podcasts et nous ne voulons pas les mettre sur, disons, un site Web, pas dans un podcast. Ce que je peux faire, c'est que je peux dire celui-ci ici, je veux y accéder et regarder ça. Il s'agit d'un code d'intégration simple. C'est ce que vous recherchez, c'est le terme « embed HTML embed website » et « bid embed code ». Ce sont leurs genoux. C'est la langue que vous recherchez. Et il vous suffit de revenir ici, de le coller et de cliquer sur Enregistrer. Et voilà, juste un morceau comme ça. OK, je vais prévisualiser mon site et vous allez, d'accord, jouer sur mon site Web et les gros codes sont parfaits pour vous ajouter un peu de dynamisme ou peut-être un site Web potentiellement statique utilisant celui d'autres personnes services, en augmentant le volume de votre site. Je ne suis pas sûr de le dire, mais il y a des choses cool. Ils ont l'air cool sur votre site. OK, alors faisons-en une autre. Eh bien, une chose que vous remarquerez, c'est que cela a occupé tout le conteneur. Donc disons que ce contenu est dans lequel je l'ai, je vais probablement le coller dans une balise div et si je le change. Nous allons donc l'appeler div Locke qui s' appellera div podcast. Je vais t'y mettre, d'accord ? Et ce podcast Div, je vais le rétrécir. Il y a un peu de rembourrage sur le côté. Oh, voyez-vous qu'il change même ou qu'il sait que c'est un code réactif ? Il sait donc que lorsqu' il sera plus petit, il utilisera simplement ce côté. Vous pouvez donc contrôler la taille de certains d'entre eux simplement en jouant avec le contenant. Faisons-en un autre. Supposons que pour ce même podcast, lorsque j' interroge quelqu'un, j'utilise Calendly, c'est j'utilise Calendly, c' juste une application de planification et je ne veux pas que vous vous inscriviez à tout cela, mais vous en aurez certains dans votre vie. Et vous pouvez les ajouter à votre site car créer vous-même notre système de planification dans Webflow, Waouh, elle serait difficile. Cela se connecte en fait à mon calendrier Google, ce qui est génial. C'est vraiment incroyable. Maintenant. Ils seront tous à des endroits différents, ces codes intégrés. Donc celui-ci, je vais cliquer sur Partager et c'est le site Web d'ED to. Ça y est. En ligne dans le lit. OK, il suffit donc de rechercher sur Google le service que vous utilisez , Mailchimp, Eventbrite, HubSpot. Ainsi, chaque singe, peu importe ce que vous utilisez, cherche le code d'intégration k. Et souvent, vous pouvez simplement le saisir. Et celui-ci, regardez, copiez-le. Celui-ci a un aspect un peu plus spécial. Vous pouvez en changer les couleurs. Si tu es allé sur le compte gratuit, je ne suis pas cher. Cayenne utilisait la version gratuite. OK, donc je vais le copier, copier le code, revenir à Webflow. Je vais le mettre, je vais le mettre juste un autre code d'intégration. On ne les mélange pas. OK. Vous les avez dans des zones séparées. On peut en mettre un autre en dessous. OK. Oh, je l'ai raté. Regarde. Disons simplement que ce n'est pas dans le contenant. Je vais le coller. Excellente. Enregistrez et fermez. Frappez. Maintenant, gros truc, regardez, eh bien ils voulaient apparaître. Lorsque celui-ci apparaît, certains le font, d'autres non. Cela dépend Celui-ci est ce que l'on appelle un iframe. Le code est encapsulé dans cet iframe, qui ressemble à un petit navigateur qui charge celui-ci ici, fonctionnera toujours de manière encore plus proche. Je veux juste travailler, mais il faut le publier. Tu peux même le voir. Écoutez, je dois d'abord être publié. Je vais donc vous dire de publier, voici mon portfolio et de regarder en bas. On y va. Il y a mon application Sweet où les gens peuvent réserver des heures avec moi. OK, tout est interactif. Il fait des choses. Ils peuvent réellement le réserver. peux vraiment le réserver parce que je n'ai pas le temps en juillet d'utiliser la puissance du service Calendly de quelqu'un d'autre, pour lequel vous pourriez payer en utilisant l'option gratuite pour k. Une chose que je fais Je veux vous montrer certaines d'entre elles, mais pas toutes. Il faudrait juste celui-ci ici. Tu vois qu'il a de la hauteur ? OK, je peux voir le code. Alors, que se passera-t-il si je vais le changer ? Tu peux totalement le changer. Donc votre code sur votre site, d'accord, parce que je peux voir ce côté, je ne peux pas vraiment le faire. Je peux changer les couleurs ici parce qu'il se passe quelque chose sur, parce que c'est quelque chose qui se passe sur le site Calendly. Mais je pourrais probablement le faire de toute façon. Donc oui, il y a des choses que tu peux faire ici et juste aller te changer. Le fait est que si vous allez le modifier, vous devez l'enregistrer, le fermer et le publier à nouveau. Pour que cela soit sur le site en direct, faisons-en une de plus. Je vais le mettre sur le fil Twitter. Ils sont tous légèrement différents, donc c'est le mien. Va me suivre si tu ne l'as pas fait. OK. Dan adore Adobe. Je vais copier ceci et je vais le faire en fait, oui. Twitter le fait donc de cette façon. Ils ont la douce option publish.twitter.com. Tu peux aller ici et leur dire, que veux-tu qu'ils couchent ? Je lui dis : « Oh, je veux envahir. Vous pouvez intégrer un tweet en particulier. Supposons que vous souhaitiez qu'il fasse partie d'un élément auquel vous faites référence dans un article. Vous pouvez intégrer un seul tweet, copier et coller son URL. OK, je vais faire le profil, mais tu peux créer une liste ou suivre un compte de quelqu'un que nous pourrions suivre. Je ne sais pas quel pourrait être mon portfolio , les projets de design UX. Je vais coller mon nom et procéder comme suit et intégrer la chronologie ou juste un bouton épingle sur ce que vous voulez voir sur celui-ci. Et à moins que vous ne vouliez faire autre chose, copiez-le. Je vais vous laisser passer et vous amuser en personnalisant les options pour les choses que vous faites pour moi pour le moment, je vais juste m'y intéresser. Alors, comme c'est génial d'intégrer ou de coller des codes. Vous remarquerez que j'ai une ligne d'emballage. Sinon, c'est juste qu'il est toujours là. C'est juste que tu dois faire défiler la page de cette façon et c'est un peu caché là-bas. J'aime bien le casser pour voir que ce que je fais ne change rien, affiche juste le code sur plusieurs lignes. Encore une fois, c'est l'un de ceux qui doivent être publiés. Et je rafraîchis mon site, défile vers le bas. Eh bien, j'ai probablement besoin de le contenir sans confinement, donc il s'étend pour toujours. Vous pouvez voir tous mes derniers tweets. D'accord, il existe des moyens de le faire pour Instagram et Facebook. Je travaillais avec un client qui fonctionne comme un studio de Pilates. Elle utilise un logiciel pour l'aider à planifier son horaire et pour permettre aux clients de réserver et de payer un code intégré. Ils avaient donc juste un site Web et vous pouviez simplement le mettre en ligne. Ensuite, les utilisateurs pourraient effectuer des paiements via la petite partie du code intégré. Maintenant, il n'y a pas que le concepteur qui peut les ajouter, accord, en plus d'un code d'intégration précis. Vous pouvez réellement le faire dans une zone de texte enrichi de manière native. D'accord, souvenez-vous que nous avons créé ces zones de texte enrichies afin de pouvoir avoir le client ou le contenu destiné aux clients. Alors regardons-le. Ce manuel riche, comme le client peut le faire. Moi, je vais passer à l'éditeur pour qu'ils puissent y accéder, qu'ils puissent commencer à ajouter du texte. Et quand j'ai cliqué sur Retour, tu te souviens de ce petit avantage ? Ils ressemblent un peu au code intégré. C'est le code intégré qu'ils peuvent utiliser. Et je le récupère, copie, colle, sauvegarde et ferme, publie. Vous pouvez voir ici qu'il n' apparaîtra pas tant qu'ils seront dans l'éditeur, mais que les visiteurs du site Web cliqueront à nouveau sur Publier. Très bien, revenons au site en ligne. Oh mon Dieu, regarde ça. Mon podcast, Sarah Parkinson, qui y a été interviewée, sera horrifiée par le design. Elle est entourée, en tout cas, de codes intégrés. Faisons-en une de plus, en fait une ancienne, parce que je veux vous montrer une dernière chose en matière de style. Nous l'avons en quelque sorte couvert, mais jetons un coup d'œil. Calendly propose donc des options vraiment intéressantes où vous pouvez utiliser celle-ci, du texte contextuel, si je le copie, continuer, saisir, le copier et revenir dedans. En dessous, ici. Peut-être qu'au lieu de ce bouton , je vais le mettre en dessous. OK, donc vous pouvez voir le code intégré en dessous de ce truc ici. Et je vais le coller. Et jetons-y un petit coup d'œil. Donc c'est un peu gros et moche. Regardons ce qui se passe réellement. Alors passez au site de publication. Vous voyez ici le temps que vous avez prévu avec moi. Nous allons cliquer dessus. Pop up. Est-ce que c'est cool ? Ok, si je voulais te montrer ça, c'est parce que c'est génial. Mais aussi, comment le styliser ? Ce qui se passe n'est pas le cas dans tous les cas, mais ce bout de code intégré reprendra le style de n'importe quel type de wrapper parent. Nous allons l'entourer d'une balise div et lui donner un style. Alors débloquez ici. Tu peux rentrer à l'intérieur. Le bloc if s' appellera kel et Lee. Et je dois dire que tout ce qui s'y trouve sera du Sans public. Faisons quelque chose d'évident. Il faut que nous changions. Nous pouvons changer beaucoup de choses à ce sujet, mais sauvegardons et publions et passons au site terminé. On y va. Il a pris le style de la balise div. Apparaît à nouveau. Joli Très bien, donc c'est un peu un tourbillon pour les codes d'intégration. Il y en a tellement que nous n'allons pas tous les couvrir, mais il y a probablement quelque chose que vous utilisez déjà. Il peut s'agir d'un CMS, d'un CRM, autre acronyme que je ne connais pas ou service qui aura un code intégré que vous pourrez ajouter à votre site Web. Parce que parfois vous vous demandez : « Oh, pouvons-nous le faire dans Webflow ? En fait, vérifions qu' n' existe aucun autre service qui le fasse très facilement et que nous puissions simplement copier et coller le code intégré, n'est-ce pas ? Ça y est, incorporez le code. 101. Créer un magasin de commerce électronique dans Webflow: Bonjour tout le monde. Dans cette vidéo et les vidéos précédentes, nous allons créer un peu de commerce électronique, d' accord, nous allons créer ceci. Il y aura des produits, pourra avoir différents types de produits. Nous avons modifié le style du panier, le style du panier, le paiement. C'est très excitant. Allons-y. Avant de commencer à créer quelque chose, le but de cette vidéo de la série ici est vous donner un aperçu des boutiques de commerce électronique sur Webflow, nous n'allons pas entrer dans les détails, vous donnerons tout ce dont vous avez besoin pour créer quelque chose, mais tous les petits détails. Cela va sortir du cadre de ce cours, mais tu verras, tu seras assez bien opérationnel. L'autre chose que je tiens à mentionner est que le commerce électronique est proche de ce pour quoi nous avons déjà fait, comme notre CMS de blog. Ces collections sont celles que nous avons faites plus tôt car elles nous aideront à éclairer ce que nous faisons pour le commerce électronique. Et vous serez en mesure de voir ce lien entre les deux, ce qui rendra cette partie assez facile par rapport, je suppose, à commencer par le commerce électronique. Alors, tout d'abord, créons un nouveau site. Donc, en suivant, en créant un nouveau site, ne regardez pas tous les miens. Il y a beaucoup de brouillons et d'autres choses. Je le blâme, bien sûr devoir faire plein de choses juste pour que tout soit beau et fluide pour vous pendant que vous regardez. Ne me jugez pas. Je vais créer quelque chose qui s'appelle le T store. OK, fais la même chose, et créons un site. Donc, l'avantage de la transformation d' un site normal comme nous l'avions fait auparavant, qu'il soit statique ou dynamique, c'est ce bouton. Cliquez dessus. Et ça va dire que je vais créer deux choses pour vous dans les collections. Nous savons ce qu'est une collection, donc des produits et des catégories. Allons-y. La seule chose est que lorsque vous créez un site de commerce électronique, vous devez modifier le plan de votre site. Jusqu'à présent, nous avons eu affaire à ce que le démarrage devienne assez, vous seriez capable de faire à peu toute cette vidéo avec la vidéo de démarrage. Vous ne pourrez tout simplement pas encaisser de paiements tant que vous ne passerez pas à l'un de ces plans de commerce électronique. N'oubliez pas que Stata est un site statique, statique , dynamique, grand et dynamique, et puis le commerce électronique est avec ces statistiques. OK, je vais te chercher. Cette page va changer de style. Ils vont l'exposer. Ils modifieront les règles applicables aux différents prix. Les prix vont changer. Mais sachez simplement que vous devrez passer à un commerce électronique. Nous avons les bons détails. Très bien, alors regardons un peu ce qui s'est passé. Maintenant, ce grand guide de configuration montre que c'est vraiment pratique. Je vais m'en occuper moi-même. Je veux dire vous ensemble, mais passez par là. Et le plus important, c' est que sous les virgules E, il y a maintenant des produits et des catégories. Les produits sont mes produits, allons-en, je vais juste ajouter quelques exemples. Nous allons simplement en faire un éclair dans cette vidéo parce que je trouve que c'est bien de voir le tout et de travailler ensuite individuellement plutôt que d'essayer de l'ajuster. Parcourez chaque vidéo et à la fin, dites Ah, tout va de pair. Donc cette vidéo va être un peu rapide. Très bien, nous le décomposerons plus tard. Nous avons donc un tas de produits. Qu'est-ce que je l'ai d'autre sous l'onglet des pages ? Regarde ça. Tu as de nouvelles choses. Un modèle que vous aimez, hé, n'avons-nous pas eu de modèle plus tôt, mais il ne s'appelait pas commerce électronique. N'oubliez pas, maintenant bloguez. Ce gars-là. Nous avions des pages de collection CMS lorsque nous avons créé notre CMS et nous avions notre modèle de blog. Donc c'est pareil, mais ce sont des e-mails, des pages de commerce électronique. Il y a toujours un modèle et comme avant, d'accord, si vous avez besoin d'ajouter des éléments, voici notre modèle de produit. Nous en concevons donc un pour de nombreux produits. Nous n'en avons que cinq pour le moment. Mais permettez-moi d' ajouter rapidement un conteneur, d' ajouter un bloc de texte qui prend le bloc pour obtenir le nom du nom de notre produit. Tu y vas, ça devrait probablement être le cas, être en train de frapper. D'accord ? OK, ajoutons une image et l'image si nous la connectons à nos produits, à n' importe quel champ d'image. Voilà, ça va faire passer une image géante, passer le prix, la description. J'ai dit qu'il augmentait le prix parce que cela en ferait un produit approprié au plus haut niveau. C'est bon, et je vais vous expliquer le prix. Très bien, nous avons donc stylisé nos modèles comme avant et notre collection, qui est désormais cachée sous l'onglet e-commerce. Et vu ce succès, vous pouvez toujours créer des collections, mais elles sont en quelque sorte séparées. OK. Ils fonctionnent de la même manière. Mais ils font partie du commerce électronique et sous cette rubrique et nos produits, nous pouvons continuer à ajouter des éléments ici où un client peut le faire via l'éditeur et nous continuerons à les ajouter à la boutique. Il a également ajouté d' autres pages, une page de paiement, regardez ça. C'est juste fait. On peut le styliser ou le laisser. Mais c'est prêt à partir. N'est pas une page de confirmation de commande. Oui. Merci beaucoup. D'autres choses qu'il a ajoutées. Revenons à mon modèle de produit il y a des nouveautés dans ce panneau publicitaire, Canada Elements. Nous avons donc vu tout cela, nous commençons à nous y habituer. Est-ce que ce commerce électronique n'existait pas auparavant ? Cela se produit lorsque vous appuyez sur ce bouton et que vous le transformez en boutique de commerce électronique, vous obtenez que ce contenu était caché auparavant. Nous pouvons ajouter Ajouter au panier. Je vais l'ajouter là-dedans, quelque part au-dessus, ci-dessous s'il vous plaît. Image géante. Vous pouvez voir qu'ils ont l'air, ils ont le prix, je peux l'ajouter au panier. Mais Flow permet de créer une boutique de commerce électronique assez facilement , mais vous donne également tout le contrôle sur lequel nous pouvons parcourir et ajouter toutes les classes à ces boutons. Salam, comme nous voulons avec notre nouvelle médecine, compétences stylistiques que nous avons apprises grâce à ce cours, en ajoutant des cours, des classes globales, en convertissant des cours. Donc, avant de partir, il va y avoir certaines choses que nous n'allons pas aborder. Accédez au guide de configuration ici. Vous pouvez régler certains d'entre eux par vous-même. Comme si nous allions certainement faire une adresse professionnelle juste parce que nous pouvons nous empêcher d'aller trop loin. Par exemple, l'examen de vos paramètres de devise et du type d' expédition que vous allez effectuer dans votre texte pour votre pays n' entre pas dans le cadre de ce cours. C'est différent pour tout le monde. Nous avons branché pour vous faciliter la tâche. Les choses que nous aborderons en ajoutant un produit ou design sont des cartes de stockage qui feront tout cela. Nous examinerons les e-mails, nous verrons comment les héberger. Des trucs plutôt cool, d'accord, c'est un véritable tourbillon. Aperçu des produits Ed puis deux pages les connectent à un panier et à une passerelle de paiement, gagnez de l'argent, comment est-ce possible ? Ce que je vais faire, c'est supprimer ces produits. OK, donc je vais tout sélectionner et je vais supprimer, et je vais supprimer mes informations sur la page pour juste nous ramener à base d'accueil afin que nous puissions recommencer par conteneur. Nous sommes prêts à partir. Passons maintenant en revue ces étapes individuelles. Individuellement, découvrez où se situent les obstacles et comment Webflow gère le commerce électronique. 102. Comment ajouter des produits à votre boutique dans Webflow: Bonjour. Dans cette vidéo, nous allons ajouter des produits à notre site de commerce électronique. Nous en ajouterons un manuellement. Nous allons y passer en revue quelques autres paramètres. Ensuite, nous importerons le poignet via CSV juste pour accélérer les choses Je vais vous montrer comment votre client peut également les ajouter via l'éditeur. Et nous nous retrouverons avec des tonnes de produits et rien sur la page que nous ferons, nous verrons comment les ajouter à la page dans la vidéo suivante. Ajoutons quelques produits. OK, ajoutons donc un produit. Nous allons accéder à notre panel de commerce électronique. Ok, on a des produits. Cliquez ici et créez un nouveau produit. OK. Et vous avez le type de produit. S'agit-il d'un service physique, numérique ou avancé ? Fondamentalement, les différences sont qu'ils commencent tous par le même physique. Votre nom Scott, le slug, la description de l'URL, catégorie à laquelle elle peut appartenir, toutes les images qui y sont associées et la facturation, combien cela coûte. Mais ensuite, vous avez des choses comme biais et vous avez les frais d'expédition, taille, le poids, ce genre de choses. OK ? Mais lorsqu'il est numérique, il élimine une grande de ces éléments de fond et dit que c'est juste il y a le nom du fichier et l'URL. Donc, cela pourrait être pour quelque chose comme, Hé, téléchargez les plans pour cela. Voici un livre électronique et vous pouvez avoir votre lien vers le fichier, peut-être Dropbox ou quelque chose comme ça. OK, donc ici aussi, vous pouvez passer au service, ce qui vous évite tout cela, car vous n'avez pas besoin de livrer un produit numérique ou d'expédier un produit physique. Mais vous finirez par faire pour un service, c'est-à-dire que vous finirez par personnaliser la page de remerciement un peu différemment pour dire, bonjour, bienvenue, et vous vous êtes inscrit à notre cours ou à notre activité de fitness. Et on se voit mardi au cours. Plus à voir avec l'e-mail de remerciement. Vous pouvez le voir ici. Il vous donne également quelques exemples tels que des consultations. Allez. Le dernier est un combo. Il fait du produit, il les ajoute simplement tous au fond. Vous pouvez le faire, y a-t-il des téléchargements ? Oui. Y a-t-il des frais d'expédition ? Tu peux faire un peu des deux. Donc, ce que nous allons faire, c'est faire du physique. Je vais changer de type. Maintenant. J'ai du texte dans les fichiers d'exercices. Il existe un nouveau fichier appelé fichiers d'exercices. Il y en a un appelé magasin, ouvrez le produit 1. Vous pouvez simplement le taper aussi. Thé vert au jasmin. Et je vais chercher le Loren ipsum pour la description. Nous ferons des catégories plus tard. Mais vous pensez que les catégories peuvent être décaféinées, une catégorie que les gens peuvent rechercher par mes différentes dents. Eh bien, peut-être des régions, peut-être une catégorie des différentes régions productrices de thé. Je ne connais pas grand-chose au thé. Je ne sais même pas s'il existe un thé vert au jasmin. Quoi qu'il en soit, médias, ce sera l'image, donc on pourrait la mettre dans ou sous le magasin. Il y a celui-ci qui s'appelle T, apportez-le. Facturation. OK. Je vais être mon prix sera de 13 95 textos. Vous pouvez travailler sur quels textes. Vous devrez décider de ce qui se trouve dans votre région. Et l'inclinaison de l'unité de gestion des stocks est généralement utilisée par les magasins pour un identifiant unique afin qu'ils puissent facilement la suivre plutôt que de l'appeler thé vert au jasmin, ils peuvent en avoir différentes versions provenant de différents fournisseurs et le code est sympa. Inventaire. Peut-être que vous n'en avez que dix, peut-être que vous vendez des imprimés ou des t-shirts. C'est, c'est un moyen de montrer la quantité et quand elle est épuisée, vous pouvez l'arrêter. Expédition comme attendre, d'accord, vous devez trier vos grottes d'expédition, combien l' expédition vous coûtera et vous faites des calculs avec le poids, la fin, les dimensions physiques réelles. Nous ne le ferons pas pour cette option. Cliquez sur Créer. Ici, mon ami, nous avons un produit exactement comme avant où nous avions publié nos articles de blog, sauf que celui-ci a des prix et des frais d'expédition. Pour gagner du temps, j'aimerais que vous passiez par un import, un fichier CSV. OK. J'en ai un dans vos fichiers d'exercices parce que si vous faites simplement vos propres tirages et sérigraphies et que je les vends en ligne. Vous pouvez les mettre un par un. C'est très bien si vous travaillez avec, vous souvenez de l'acronyme, mais avec une sorte de contrôle des stocks. Vous pouvez apporter, exporter un fichier CSV et l'apporter. Et je vais parler des CSV et un peu parce qu'il y a peu plus de défis que, disons, notre article de blog, CSV, des témoignages de notes. C'est ce que nous avons apporté, mais nous le ferons dans une vidéo. J'en ai un prêt à partir. OK, nous allons cliquer sur Importer. Cela peut prendre un peu de temps en fonction de la taille de vos bases de données. Eh bien, le CSV l'est. On y va. Nous les avons avancés, d'accord, donc nous avons ajouté des produits par l'intermédiaire du designer. Votre client ou client peut passer par l'éditeur. Avant qu'ils puissent le faire, nous devons publier notre site Web. Nous n'avons rien fait de tout cela. OK, donc je vais fermer ça. Et maintenant, vous pouvez le partager avec votre éditeur invité et l' éditeur l'ouvrira. Nous l'avons bien fait ? Je n'ai encore rien sur notre site. Mais écoutez, ils peuvent se lancer dans le commerce électronique, accord, et ils peuvent commencer à regarder leurs produits. Et comme nous l'avons fait, ils peuvent ajouter un nom de produit, mais ils obtiennent la version blanche, nous obtenons la version sombre et Webflow. Mais c'est fondamentalement pareil. Mais vous remarquerez peut-être qu' il n'y a rien sur notre site Web. Passons à cela ensuite. 103. Ajouter votre produit de commerce électronique à une page dans le Webflow: Bonjour à toi. Nous allons prendre nos produits actuellement piégés dans notre onglet e-commerce et les ajouter à leur propre page. Nous allons ajouter un panier. Nous allons pouvoir choisir différentes tailles pour notre produit, les ajouter au chat. Il y a une morue qui surgit. C'est une vidéo sympa où nous pouvons faire pas mal de choses. En fait, nous ne faisons pas grand-chose. On le lancerait, ça fait beaucoup de choses. C'est encore mieux, non ? N'oubliez pas que nous concevons un modèle, non les pages elles-mêmes, elles se trouvent donc sous mes pages. Mais nous ne faisons que concevoir ce modèle de produits. Et il extraira toutes les offres de nos produits de commerce électronique. Nous en avons quatre et il les récupérera toutes et créera ces pages pour nous. Devinez quoi ? C'est exactement comme nous l'avons fait le billet de blog lorsque nous avons créé notre CMS plus tôt. Donc, il y a juste un récapitulatif, regardons le, donc nous regardons le modèle. Nous allons créer une page très rapide. Alors faisons-le rapidement. Nous allons donc utiliser Command E ou Control E sur un PC. Je vais le mettre dans un récipient. Commande E. Je vais mettre un bloc div. bloc div ne sera qu' un faux navigateur comme espace réservé, souvenez-vous de Command or Control Return pour ajouter une classe à ce diblock. Et cela s' appellera div nav. Je devrais probablement l'appeler une section. C'est bon, Commande E. Ajoutons une section en dessous de celle-ci, et ce sera mon produit. Je pense qu'il est entré dans mon contenant. Nom, cette section, je vais l'appeler section produit. Jetons un coup d'œil. Tu t'es retrouvé dedans. Mettons-le en dessous et commençons à ajouter nos pièces. Nous y avons fait allusion tout à l'heure. Ok, donc on va juste décider de ce qui va se passer en premier. Ce que je vais faire, c'est mettre une image. OK, je vais commencer par mon image. Nous avons commencé à utiliser les raccourcis. Continuons. Donc, Command ou Control E ou une image, à laquelle nous allons la connecter. Il le sait uniquement parce que nous sommes dans notre modèle de produit et qu'il va l'obtenir à partir de mon champ d'images en termes de taille. Je vais juste en faire 500 sur le bureau parce que c'est trop gros. Produit de la section. Passons à Commande ou Contrôle E et mettons-le, nous allons le mettre dans un chauffage. Ce chauffage va toucher un rivage. Découvrons-le d'après le nom de mon produit. Maintenant, souviens-toi que tu peux décider lequel tu regardes réellement si tu veux, oh, ce n'est pas le bon, c'est mon vilain produit. Regardons la Mongolie depuis le début . Elles ne correspondent pas simplement en saisissant des images sur Internet, en trouvant des noms de T. Ce ne sont peut-être même pas des noms en T. Quoi qu'il en soit, voyons comment ajouter le manuel. Celui-ci va l'obtenir pour la description. Comme avant, nous pouvons y ajouter nos cours et styliser un peu plus tard, lorsque nous saurons comment styliser les choses. Nous examinons maintenant davantage les fonctionnalités de la communication électronique. Nous allons maintenant ajouter notre bouton Ajouter au panier. Ok, donc là-dessous, il y a ces groupes, d'accord ? Ces deux-là se ressemblent. Cela ressemble à votre coupe générale pour la page ou le site Web. OK. Tu peux avoir dix choses dedans. C'est la façon d'y mettre des choses. Bouton Ajouter au panier. Je vais mettre celui-ci en dessous. Je ne l'ai pas compris. Cliquez sur Maintenir, faites-le glisser vers la droite. Maintenant, voici pourquoi avons-nous une taille qui correspond à certaines des données que nous avons importées depuis le CSV. Ne vous inquiétez pas, nous allons regarder ça. Je fais quelque chose qui s'appelle variance et un petit peu, mais le mien est beaucoup trop large, donc je vais faire une largeur minimale de 200, ce qui ne marchera pas. Faisons juste une largeur de 200 captures. Et ces boutons Ajouter au panier ont des pouvoirs spéciaux. Donc, s'ils font quelque chose de légèrement différent de ce à quoi vous êtes habitué, nous allons regarder les prochaines vidéos et en montrer quelques-unes. Je ne savais pas que vous ne pouviez pas y faire une largeur minimale jusqu'à ce que , normalement, il s'agisse d'un contenant d'emballage et de lui donner sa largeur. Mais bon, il y a des pouvoirs spéciaux et choses étranges qui se produisent avec les coûts parce qu'ils essaient d'en faire beaucoup, en extrayant des données, mais c'est suffisant pour le moment. Allons tester ce truc. Ainsi, lorsque vous goûtez au commerce électronique, vous pouvez parfois tester des choses en mode aperçu. Vous pouvez passer et dire : « Je suis là, nous y allons ». Tellement de tailles différentes. Parfois, cependant, vous devez aller publier le site, sinon cela ne fonctionne pas. Il te le dira. Et si vous rencontrez des problèmes avant partir et essayez de trouver une solution. Il se peut que, plus que tout ce que nous ayons fait, commerce électronique ait besoin d'être publié et testé sur votre domaine de prédilection. Alors jetons un coup d'œil. On peut donc cliquer dessus, on peut rater une quantité. Et pour couper, cela signifiera que vous n'avez pas eu de coupure sur cette page. Nous devons l'ajouter au panier, mais il n'y a pas de chat sur cette page. OK, donc nous devons réellement ajouter la coupe. Nous devons ajouter que toute page sur laquelle vous souhaitez vendre des choses auprès de lui, faites-le également sur le modèle ici. Parfait. C'est où ? C'est cette autre option ici. Donc, ajouter la voiture, c'est un peu comme décider ce que vous allez faire, ce que vous allez acheter. Il doit aller quelque part. Ça va à celui-ci. Et celui-ci, ici, je vais l'ajouter à ma navigation. C'est le bouton de mon panier. J'ai besoin que ce soit sur la droite pour le moment, simplement parce que c'est là que le chat a envie d'aller. Si vous jouez le jeu et que vous avez exemple, la navigation à partir d' ici ou à partir du modèle de quelqu'un d'autre, du composant, de la barre de navigation. Nous y reviendrons un peu plus tard. Ça et les trucs bizarres qui s'ensuivent doivent être résolus. Mais encore une fois, nous allons couvrir la vue d'ensemble avant d'entrer dans les détails, d' accord, maintenant ça devrait fonctionner en aperçu. Je veux deux de mes versions de cent grammes et je vais dire étiquette. Regarde ça. Nous avons un chat. Tout est fait pour nous et ça a l'air plutôt bien. Mis à zéro, mais c'est quelque chose que nous pouvons régler. Oh, doux pop up. C'est bon. Eh bien, jetez un œil à certaines de nos autres pages. C'est celui que nous avons inséré et il n'y a pas de liste déroulante. C'est bon. Mon ami, vous avez ajouté des produits et nous les avons ajoutés à notre site Web. La prochaine chose dont nous avons besoin est de faire une grande liste de tous nos produits et de la mettre sur notre page d'accueil. Cela dit, nous le ferons dans la prochaine vidéo. 104. Ajouter une liste de vos produits à la page d'accueil: OK, nous avons donc créé toutes nos pages. Ce que nous voulons faire, c'est créer un lien vers eux depuis la page d'accueil et créer une liste comme celle-ci afin que nous puissions voir tous nos produits sur une seule page. Allons-y, d'accord, parce que je ne pouvais pas pirater mon navigateur étant tellement ennuyeux, je l'ai rendu moins ennuyeux. J'ai ajouté quelques textes ici et créé la couleur de fond sélectionnée. Je vais le copier car nous devons l'ajouter à notre page d'accueil. Dès que nous en serons encore à nos témoignages, je devrais en faire un symbole. Années. Oui, tu as totalement raison. Je vais le supprimer et un peu parce que nous, je vais vous montrer quelque chose et un tout petit peu. Je sais ce qui va arriver, il vaut mieux ne pas être un symbole. Je vais ajouter un contenant. Mon GPS peut entrer à l'intérieur. Je vais mettre une section ici pour l'instant. Je vais le faire entrer. Ce sera ma section consacrée à nos produits. Ai-je besoin de le nommer ? Sûrement pas. Le produit sexuel existe déjà. Je l'ai fait dans la dernière vidéo. Ne l'ai-je pas fait ? Une liste ? On y va. OK. Pour ajouter tous nos produits à la page, nous l'avons déjà fait. Il suffit d'aller ici et vous vous demandez comment procéder avant de déplacer les témoignages et de vous souvenir des articles de blog sur la page d'accueil. Comment obtenir tout cela, cette longue liste ? C'est exact. Utilise le même. Liste CMS. Allez-y, nous allons me voir comme liste de collection. Ce n'est pas différent. OK. Tu dis que tu y étais. Je m'en souviens. D'où vient-il ? Cela proviendra de mes produits de commerce électronique. Regarde ça. Ils sont tous les quatre. Je vais donc mettre le mien pour le haut de cette façon et prévisualiser et rien ne se passe. Que devons-nous faire d'autre ? Nous devons ajouter les différents éléments que nous voulons voir apparaître ici, comme nous l'avons fait pour la page du modèle de produit, mais nous l'avons déjà fait auparavant. Ajoutons une image. Cliquez à l'intérieur d'ici, peut-être ajoutez-le simplement à l'un d'entre eux. Commande E, image. Je l'obtiens grâce aux produits et il n'y a qu'une seule image à utiliser. Nous comprenons cela. J'ai besoin de jouer avec la taille parce que j'ai obtenu des informations au hasard sur Internet. Mais nous savons comment recadrer des images, nous ne le ferons pas pour l'instant. Mais comme nous voulons l'ajouter, ajoutons le nom du produit. Donc, c'est exactement la même chose que nous faisions auparavant sur la page modèle, je peux le mettre au bon endroit. Désolée, je vais recevoir ce message. Je vais mettre le nom de celui-ci. Ça devrait probablement frapper, peut-être quatre ou quelque chose comme ça. C'est bon. Il faut du seau pour le moment. Encore une fois, nous n' allons pas le styliser. Nous allons simplement ajouter une zone de texte supplémentaire. Passons aux prix ici. Eh bien, nous pourrions simplement y aller, nous pourrions simplement ajouter un bouton et dire, accord, quand on clique sur ce bouton, obtenir l'URL du produit , obtenir l'URL, oui, se connecter à, mémoriser cette page, URL, nous voulons en fait prendre deux pages et peut-être qu'il y en a deux. Maintenant, il y en a un violet parce qu'il va l' obtenir sur une page de collection. Mais maintenant, c'est la page e-commerce, laquelle ? Le produit actuel dont il va le tirer, quel que soit son nom rapide. Tu peux voir le nom rapide ? Et ils sont partis maintenant, vous pouvez voir que cela vient de ce bouton qui va renvoyer à la cannelle douce. Celui-ci va être lié à celui-ci. La Mongolie va créer un lien vers ce bouton ici. OK, nous allons changer celui-ci pour en voir plus. Faisons un petit aperçu. Jetons un petit coup d'œil. Passons à la camomille biologique, à la tisane. Vous revenez à la page d'accueil et cela ne fonctionne pas. Revenez principalement à la page d'accueil. Revenons sur le long chemin. Page d'accueil, œuvres neuronales. Vous pourriez décider de ne pas le faire. Je vais juste l' éteindre pour le moment. Je ne vais donc pas en afficher parce que je veux le réactiver. Et disons que nous voulons pouvoir acheter à partir de cette page. Nous pouvons passer à notre nouvel élément rouge pratique. Nous allons utiliser l'option Ajouter au panier. Et n'oubliez pas que nous devons avoir le panier sur la page. C'est pourquoi j'ai copié et collé. Si vous ne l'avez pas, assurez-vous que le chat y aille également. Je vais le mettre dedans. Vous pouvez voir qu'il doit aller dans un endroit spécial. Et cela apparaît quand j'ai appris pour la première fois que je me suis dit : « Whoa , comment ne pas figurer sur la page d'accueil ? Il suffit de le placer dans la partie droite de ces éléments de la liste. Si vous commencez à le coiffer avec des dividendes, je plonge, faites attention à l' endroit où il atterrit ici. Ok, donc je vais y aller, tu as dû couper et t'assurer que tu vois que le rouge n'aime pas ça. Ils ne sont pas lus. Bien, trop haut. Excellente. Lit de lecture. Oh, ça ne va pas bien. OK, juste en dessous. Très bien. Nos produits sont tous listés sur la page d'accueil. Que pouvez-vous faire d'autre ? Les listes de collections ? Peut-être que nous l'avons fait plus tôt. Si nous cliquons dessus, nous pouvons accéder aux paramètres et le filtrer. OK, donc c'est là que je dois me décider. Peut-être que j'en veux, j'en veux trois, mais ça se voit avant, comment puis-je le réduire à trois ? C'est exact. Limitez le nombre d'objets à trois. S'il vous plaît Cliquez à nouveau dessus et je clique sur la liste. Maintenant, nous pouvons aussi le trier. Peut-être que nous avons cherché par ordre aléatoire, nous pouvons filtrer. OK, ajoutons un filtre, le nom est égal à. Maintenant, ici, d'accord, il y a quelques autres choses. Ce que nous pourrions faire, c'est passer à interrupteur que nous avons ajouté précédemment. Nous pouvons donc décider d' entrer dans notre collection, qui dans ce cas est une collection de commerce électronique. Donc c'est là, il y a des produits. Et regardons l'ajout d'une option qui dit : est-ce que je présente l'un de ces petits interrupteurs à bascule ? Et la seule chose est que nous ne le faisons pas aux produits eux-mêmes. Nous le faisons pour le produit jusqu'ici. OK ? Donc on dit le rouage, pas l'article lui-même. Et nous voulons ajouter un champ pour ces gars. Et nous allons dire, ajoutons un nouveau champ. Ce sera un interrupteur. Et ce commutateur sera étiqueté soldés ou articles en vedette. Et je vais le sauvegarder, sauvegarder la collection. Et ici, maintenant, je peux passer en revue et dire, qui a une vente sur celui-ci, oui. Et n'oubliez pas de sauvegarder les modifications. Et peut-être que le thé au jasmin, peut-être que celui-ci est également en solde. Sauvegardez-le. Maintenant, je peux revenir à ma page d'accueil en utilisant nos compétences douces de tout à l'heure. On peut dire qu'en fait, je ne sais pas déjà comment faire. Page d'accueil, je peux cliquer sur la liste des collections du navigateur. Je peux dire qu'en fait, montrez-moi simplement le filtre qui a ou est-ce qu'il a un interrupteur de vente activé sur ceux qui semblent géniaux ? Eh bien, ça l'est, je suis content de moi. J'espère que tu es content de toi aussi. Nous apprenons de nouvelles choses sur le commerce électronique, mais nous n'en avons probablement besoin que de deux en tirant parti de certaines des premières connaissances pour rendre tout cela beaucoup plus facile. Maintenant, on y va. Cela consiste à ajouter des listes à notre page d'accueil ou à n'importe quelle page que nous obtenons pour réutiliser cette liste de collections CMS , d' accord, sur la vidéo suivante. 105. Paramètres de paiement dans le flux Web: Bon retour. Nos produits se trouvent sur nos pages. Nous avons un panier, ce n'est que quelques étapes supplémentaires avant de pouvoir commencer à accepter les paiements ou au moins à prendre des commandes pour notre t. Laissez-moi vous montrer ce qu'ils sont. Le meilleur moyen sera en fait de publier le site et de vérifier jusqu'où nous pouvons aller. Je vais donc vérifier le site Web publié, pas celui qui teste. OK. Et je vais dire Ajouter au panier et ça va dire, vous ne pouvez pas, vous devez choisir l'un d'entre eux. Okey-dokey a obtenu une carte, ajoutez-la, ou la personne que nous voulons obtenir. Nous allons continuer à effectuer les formalités de départ et de départ en tant que personnes désactivées. Qu'est-ce que cela signifie ? Laissez-moi vous montrer comment activer le site. Ça ne te laissera pas faire tout de suite. Cela va vous dire : « Passons à notre ». En fait, il s'agit d'accéder aux paramètres de notre projet. OK, et nous allons passer au commerce électronique et ça va dire : « Hé, avant que tu puisses aller plus loin, tu dois nous dire tes trucs de base. OK. Il s'agit principalement de l'adresse de votre entreprise. Moi. Je travaille en euros, que vous ne pouvez pas saisir. OK. Donc E pour les euros. Je vais saisir le nom et l'adresse de mon entreprise. Tu détournes le regard. Très bien, c'est mon adresse floue. Poursuivre. Très bien, maintenant nous avons quelques fonctionnalités supplémentaires ici. Et celui que nous voulons, nous pouvons presque le faire, c'est nous souvenir que nous devons activer notre magasin. Alors allons-y et allons-y en général. Allons à la caisse et partons huileux. Qui a pu mettre à jour notre hébergement. Nous en avons parlé plus tôt. Je vais faire le mien maintenant. Vous pouvez toujours suivre une grande partie de ce cours ou la diversité de ces vidéos sans mettre à niveau l'hébergeur. Mais je vais faire le mien pour pouvoir aller plus loin juste après la mise à niveau et maintenant récupérer ma page d'accueil, mes collections disparues. Ou est-ce le cas ? La première chose que j'essaie toujours est réinitialiser la page, de recharger le morceau. Aucun article n'a été trouvé. Ce n'est pas bon. Tu as mangé, puis je vais trouver une solution et je te ferai savoir ce qui s'est passé. Je l'ai découvert. OK. Il s'agissait de mes produits dans mon commerce électronique, sous la rubrique Produits, ils sont tous encore des brouillons, donc bon, ils ont été modifiés, ils ont été publiés. OK. Donc, ce que je peux faire, c'est y aller individuellement et dire : « Vous n'êtes pas un brouillon américain destiné publié » ou « allez directement », publiez-le. La différence entre les deux, c'est ce sera en quelque sorte mis en scène prochaine fois que je consulterai l'ensemble du site en cours de publication, il suivra le trajet. Si j'avais publié maintenant, il serait immédiatement mis en ligne sans attendre que je publie l'intégralité du site. Mais je vais les faire tous ensemble. Je vais vous dire de les sélectionner tous. Merci Ici, je vais dire « mise en scène complète ». Oui, s'il te plaît. Eh bien, je suppose que c'était ça. Bon. Je n'ai pas vraiment vérifié. Ouaip. Ils sont prêts à partir. Nous avons amélioré notre hébergement, nous avons une coupure sur notre page. Nous avons ajouté l'adresse de notre entreprise. Allons l'activer sur YouTube. Votre paiement va être activé. Ça va être activé. Vous devez ajouter un fournisseur de services de paiement. Cliquons donc dessus. Vous pouvez aller ici ou là, cliquez sur ce bouton. Vous devez connecter l' un de ces deux éléments. Maintenant, je ne veux pas connecter mes 12 ici parce que mon entreprise n'est pas vraiment connectée à ce magasin T. Je ne veux pas que des transactions y soient effectuées pour le moment, mais c'est ce que nous entendons comme votre passerelle de paiement et vous pourrez activer votre bouton. OK, au lieu d'accepter les paiements prêts à l'emploi. Maintenant, avec ces paiements, je ne vais pas expliquer comment configurer Stripe et PayPal. Stripe est un traitement de cartes de crédit très courant. Vous pouvez également utiliser PayPal. Vous pouvez utiliser les deux. Il y aura des limites. OK. Ainsi, lorsque vous le configurez, il suffit de vérifier ce qu'ils sont avant de procéder à des règlements du client, potentiellement car il y aura ce que vous voudrez vraiment faire, c'est que votre client configure le Stripe et PayPal, pas vous car ce sont eux qui responsables des taxes et du paiement des frais. De plus, les deux nécessiteront une pièce d'identité. Ainsi, lorsque j'ai configuré mon Stripe et PayPal, ils veulent connaître vos coordonnées sur l'un de vos passeports ou sur vos robes. Ils mettent des choses, vous ajouterez un compte bancaire et ils vérifieront ce compte bancaire. Ils fonctionneront assez rapidement. Mais les nouveaux comptes seront soumis à certaines limites quant nouveaux comptes seront soumis montant que vous pouvez traiter et transférer, ce genre de choses. Mais oui, c'est ça. Ajoutez un fournisseur de paiement, arrêtez de créer, arrêtez de construire un empire de magasins T. Très bien, c'est tout pour cette vidéo. Passons à la suivante. 106. Qu'arrive-t-il après un achat dans un magasin de flux Web: Quelqu'un a donc passé une commande sur votre site Web. Comment êtes-vous averti ? Que se passera-t-il ensuite ? Eh bien, deux choses se produisent. Un e-mail est envoyé , puis il y a des commandes que vous pouvez consulter. Regardons d'abord les e-mails. Si vous allez sur ce petit rouage, il y a une option qui dit e-mail. Vous pouvez ajouter une marque à cet e-mail. Et en bas, voici les différents e-mails que vous pouvez voir et modifier. Votre commande est confirmée. OK. Et vous pouvez le voir ici en voici un modèle de test. J'ai un de mes produits qui porte un mauvais nom. Il faut y aller et réparer. Mais c'est ce que vous, ou si c'est votre boutique ou votre client qui reçoit un e-mail, vous pouvez le tester en bas, ici il y a un e-mail de test. Tu peux te l'envoyer. Vous pouvez voir qu'il est partiellement personnalisable. Et le processus d'envoi d'un e-mail comporte toutes sortes d'étapes différentes , à savoir quand il est reçu, quand il est expédié, qui reçoit le courrier électronique ? OK. C'est défini ici en général. Non, ça ne l'est pas. C'est dans le commerce électronique. Général. Trop de généraux. Et vous pouvez voir ici qu'il s'agit d'une adresse e-mail floue. Ainsi, tout ira, afin que vous et le client receviez des e-mails. Mais il serait pratique d' avoir une place centrale dans commerce électronique, sous les commandes qui les listaient toutes. Et voilà, je n'ai pas eu de commandes pour le moment, mais c'est là que vous pouvez aller les voir chez le designer qui vous a donné un propriétaire de magasin. Vous pouvez simplement le faire via le concepteur. Mais si vous êtes le client, vous êtes peut-être en train de le consulter par l'éditeur. N'oubliez pas que c'est la vue que voit votre client, votre client, votre membre du personnel et que, sous commandes, se trouvera la liste de toutes les commandes. Très bien, c'est ce qui se passe une fois que quelqu'un a fait un achat. e-mail est envoyé, a modifié cette liste de commandes. 107. Personnaliser les paramètres du panier dans Webflow: Bonjour à tous. Dans cette vidéo, nous allons examiner ce bouton du panier et l'élément Ajouter au panier que nous avons ajouté plus tôt et vous montrer tous les secrets qu'il contient. Et je vais vous montrer comment y accéder pour pouvoir les styliser. Restons d'abord avec ce chariot. C'est spécial. Pourquoi est-ce spécial ? Parce qu'il a sa propre petite icône ici dans le navigateur. Et à l'intérieur d'ici, il y a deux choses. Voilà le bouton de coupure. Disons que nous voulons le styliser. Nous venons de commencer comme si nous avions fait n'importe quoi d'autre. On dit « boutonner ». Nous disons que vous allez avoir tous les coins arrondis et peut-être un volet, beau ou pas beau, mais vous voyez l'idée. Vous pouvez personnaliser ce truc assez facilement. Mais comment trouver avec style cette fenêtre que tu as vue au début ? C'est ce truc ici. C'est le cut wrap. Et tu te dis : « Waouh, normalement, quand tu cliques sur quelque chose, tu peux voir qu'il le met en évidence. Celui-ci ne met rien en valeur, donc tout y est. OK. Tout ce qu'il y a dedans vous pouvez y aller et le faire. Comment le faites-vous voir ? En gros, cliquez sur le panier et nous allons regarder dans les paramètres. Nous allons donc regarder le petit rouage ici , pas les styles, le rouage, et il contient des éléments spéciaux. Voici les détails de la coupe spatiale. Alors ouvrez le panier, c'est la première chose à faire. Et par défaut, il s'agit d' une fenêtre modale contextuelle modale. Si vous n'aviez qu'un stylet, vous pouvez maintenant dire « Vous manuel », nous allons ajouter un style. Revenons donc à S pour les styles, le produit textuel. Et je vais choisir la police et la taille. Et je vais choisir un poids. Dans mon cas, ça va être sans unité et ce sera l'un des autres. Peut-être un peu plus. Ce sera juste 1,3 de ces 20 pixels. Oui, nous devrions utiliser les chambres, couchez-vous. On y va vite. Oui. OK. Nous pouvons donc y entrer pour le styliser. Il propose également d'autres options. Encore une fois, revenons à nos paramètres. Vous pouvez voir le type de carte. Nous pouvons en faire un qui apparaît de la gauche, un qui apparaît vers la droite ou un qui tombe du panier. Laissez-moi faire une démonstration de celui-ci. Ouvrons-le donc et cliquons dessus. Tu vois celle-là ? D'accord, il ne fait que le sélectionner dans les paramètres. Ouvre-le. Maintenant, ceux-ci ont quelques paramètres de base. Les trois premiers, tu peux voir que c'est pareil. Ce dernier en a quelques autres, comme vous pouvez l'aligner à gauche ou à droite sur le bouton en fonction de l' endroit où il se trouve et de la manière de l'ouvrir. Devez-vous cliquer dessus ou pouvez-vous simplement survoler lorsqu'il apparaît ? Vous pouvez jouer avec l'assouplissement et cette option ici, ils ont tous cela dit, s' ouvre-t-il lorsqu'un produit est modifié ? Faites une dégustation aux utilisateurs. Je sais que sur beaucoup de sites , je suis parfois comme si j'arrêtais ouvrir et d' essayer d'y ajouter des choses. Et il ne cesse de s'ouvrir lorsque vous trouvez le bouton Continuer vos achats pour tester un peu ce qui fonctionne pour vous et votre clientèle. Et ici, il affichera un aperçu du nombre d'entre eux qui sont sur une netlist. Il ne s'agit pas vraiment de le faire, il s'agit simplement prévisualiser combien. Je n'en ai que quatre, donc ça ne se voit qu'avant. Vous pourriez le monter juste pour voir à quoi il ressemble. Beaucoup d'autres que le titre de leur produit, mettre un gros tic ici pourrait ne pas être si utile lorsque nous nous perdons. Ensuite, pendant que nous sommes ici, c'est qu'il va y avoir des moments où, quoi ça ressemble quand il est vide ? Ok, tu peux passer par ici et modifier le texte. D'accord, vous pouvez aussi y ajouter une classe et lui donner du style. Même chose avec ERA. Vous avez fait le fond ici. Ce n'est pas là par défaut, tu vois ? Vous pouvez choisir de personnaliser cette couleur de police. OK, éteignons la carte. Maintenant, le bouton Ajouter au panier en bas est également un peu spécial, car j'essaie de le trouver. Fermons tout ça. Et trouvons l'ajout au panier que j'ai fait glisser depuis le panneau des éléments. Donc cette personne ici, celle-ci ici a la même chose dans les paramètres. Tu as quelques trucs. Voulez-vous que la quantité y apparaisse ? Peut-être que tu ne le sais pas. Peut-être que personne n'en choisit plus d'un. Comme s'il y en avait juste quelques-uns que je n' arrivais pas à trouver pour le moment, mais voulez-vous trois massages du dos ? Tu ne le sais pas ? Juste une. OK. Il n'est donc peut-être pas logique que je ne sois pas sûr que vous puissiez probablement penser cas d'utilisation pour les enchérisseurs pour cela. OK. Ajouter au panier. Voulez-vous vous montrer que vous n'êtes pas simplement en train d'acheter maintenant, peut-être que vous ne vendez qu'une seule chose. n'y a aucune coupure similaire à ajouter. Je veux juste dire « Oui, c' est la seule chose que personne n'achète plus qu'une de vos affaires ». Peut-être que c'est Ajouter au panier et que vous savez maintenant, contrairement au panier, vous pouvez choisir de styliser le K en rupture de stock et les options d'erreur. C'est un peu comme les forcer à apparaître pour que vous puissiez les installer. Une autre page sur laquelle vous vous demanderez le style de l'itinéraire vers la voiture, qui se trouve en quelque sorte sur n'importe quelle page sur laquelle vous la mettez. Idem pour l'ajout au panier. Il y a des sous-pages. Nous l'avons examiné il y a quelque temps. Il y a ces pages de paiement. Il vous suffit d'y accéder, de les installer comme vous le souhaitez. Maintenant, avec ces pages de paiement le panier et tout le reste, il suit toujours ce cas de cascade CSS. Tous les styles avant cela, le formulaire de commande, c' est la seule chose à faire, si vous n'avez rien sélectionné et que cela devient un peu confus, comment faire ? Y a-t-il quelque chose que je puisse faire ? Si vous cliquez sur le formulaire lui-même par défaut, c'est un peu cliqué sur autre chose. Je suis Buddy, c'est cliquer sur le formulaire de commande, un peu comme le panier et l' ajout au panier que nous avons fait ici. Et dans les paramètres, vous pouvez faire des choses comme s'il n'y en avait pas beaucoup, donc vous pouvez en faire une partie. Une grande partie est contrôlée par Webflow pour s'assurer que tout fonctionne. OK, donc il n'y a aucune raison d'expédier. Donc ça l'éteint un peu. Cachons l'adresse de facturation. Et comme avant, vous pouvez personnaliser l' apparence du message d'erreur en plus de la page normale. Revenons maintenant à mon discours de style sur fait de prendre encore une partie de la cascade. OK, donc nous pouvons personnaliser celui-ci ici et le rendre superbe avec des styles individuels, c'est très bien. Mais supposons que, pour le moment tout utilise toujours ARIO. Donc, ce que je vais faire, c'est retourner à mon corps, même si je suis sur cette page de paiement et que je dois avoir des styles, je vais y aller. Je dirais que toutes les étiquettes corporelles seront visibles. Vous pouvez voir plus de changements. Apportez donc vos modifications de haut niveau lorsque vous concevez le reste du site. Ensuite, vous pouvez entrer et apporter de petites modifications ici. Très bien, c'est personnaliser votre panier. Vous êtes sur Ajouter au panier et vous pouvez les personnaliser toutes, y compris cette page de paiement. D'accord, c'est ça. Je te verrai dans la prochaine vidéo. 108. Comment ajouter des variantes dans le produit de commerce électronique de Webflow: Nous devons parler de variables. Les variables sont ces choses. Il y a un petit menu déroulant. Je veux du thé au jasmin, les 13€, mais c'est quoi les 250 ? Oh, je peux économiser beaucoup d'argent et c'est un prix différent. Nos variables sont donc la taille du produit. vôtres peuvent être de la taille des vêtements, petits, moyens, grands, peuvent être de différentes couleurs, peuvent être des combinaisons de couleurs et de tailles. Les variables froides. Laissez-moi vous montrer où ils se trouvent dans Webflow. Très bien, vous vous souviendrez que nous avons déjà une certaine variance. Ils proviennent du CSV que je vous ai donné. Ok, donc ce que je vais faire, c'est cliquer sur Je vais partir, les activer pour qu' on puisse les voir. Je vais donc désactiver la limite nous puissions voir cette personne. Ok, le vieux thé vert au jasmin n'a aucune différence. Pour obtenir la variance, nous allons au produit qui est une virgule E pour obtenir un produit. Et regardons celle de Jasmine. C'est celui que nous avons ajouté manuellement, d'accord, et puis en bas, sous Options, bizarrement, ça devrait être de la covariance. Ajoutons donc un ensemble d'options. Cela peut être la couleur, le poids, la taille , les saveurs, peu importe ce que c'est, je vais faire la taille. Essayons-le avec une taille ou un poids égal à la taille. Et nous allons avoir le nombre d'options que je vais avoir. Je vais être en mesure de le vendre en 100 g et vous pourrez appuyer sur Enter ou Tab K et 150 g également. Désolé, Amérique, je ne sais pas ce que c'est. Ce sont des grammes. Cela suffira, cela semble approprié. Jetons donc un coup d' œil à « OK ». Vous l'aviez fait en premier, sinon, vous ne pouvez pas passer à la prochaine étape, ou du moins à celle où vous la modifiez. D'où viennent-ils ? Tu es du genre à dire que je ne les ai pas faits. En ajoutant ces options. Cela dit, d'accord, vous les avez, vous savez, vous avez quelque chose et il en existe deux versions. Si je continue à les ajouter ici, si j'ai une version KG et que j'appuie sur Entrée et que j'ai fini. Vous verrez en bas que nous avons une option KG. Je vais le plier et on y arrivera, s'il te plaît. Ne fais pas ça. Là-bas. Existe-t-il une option d'annulation ? Je ne pense pas qu'il y en ait une. Ou annuler. Annuler, annuler, annuler. Oh mec. Tu sais, Ross, je crois que je vais annuler, mais pas ici parce que c'est toujours ouvert. Ce n'est pas fait ici. Ils se trouvent dans des brouillons qui ont réellement fait ce travail. Uid, je vais réparer une seconde. N'allez nulle part. Merci de ne pas être parti. Donc je suis de retour. Je viens de tout recoller. Et nous étions oui. OK. Nous les avons donc. N'oubliez pas quand j'en ai ajouté un, comment m'en suis débarrassé ? Je l'ai fait accidentellement et ils n'ont pas lu la notification parce que je sais ce que je fais. Ce que tu fais, c'est que ce n' est pas ici ou là, c'est là-haut. Vous dites que vous pouvez, vous supprimez cette option. C'est donc ce que je voulais ajouter à cette option d'un kilo. L'autre chose que je dois changer, c'est le changement de taille, mais le prix va changer ici. Donc je vais entrer et je vais dire, reprenons ce qui a été écrit dans vos notes. Si vous voulez un prix fictif. Alors tapez ce que vous voulez. Comparer au prix est assez intéressant. Jetons un petit coup d'œil. Éteignons ça. Donc, comparez le prix comme celui-ci ici. C'est aussi léger que cela, c'est leur prix qui est tracé, comme d' habitude avant la vente, c'est ce prix, mais vous pouvez l'obtenir pour ce prix. J'ai calculé que c'est ce que cela coûterait si vous l'achetiez par lots de cent grammes. Vous économisez donc beaucoup de 14$. C'est là que mes entreprises de thé n'en consomment pas assez. OK. Alors les couvercles entrent et ferment. OK. Fixez mes quantités, j'en ai dix et une seule. Sauvegardons-le et vérifions-nous qu'il est publié. Comme c'est une mise en scène, je dois aller le publier. Maintenant, je ne suis pas sûr de vous l'avoir déjà montré parce que j'ai dû refilmer un peu. Donc je m'approche toujours de celle-ci, de celle-là. Mais en fait, vous pouvez simplement fermer celui-ci et ils s'effondrent tous. Très bien, je vais publier le site. Puis-je consulter mon site comme je peux le faire ici. OK. En mode aperçu. OK. Mais cela aurait-il été publié ? Cela fonctionne. J'ai mon menu déroulant. Nous avons une variable selon le prix ne change pas, ce qui m'agace. Donc, sur le site principal que je rafraîchis et dont je ne me souviens pas. Je ne l'ai pas actualisé pour voir les mises à jour et maintenant je devrais avoir 100 grammes. Oh regarde, ça change. Des choses si simples. OK, donc c'est une variable. Vous pouvez devenir fou avec les variables. Vous pouvez avoir différentes couleurs et différentes tailles. Je n'irais pas trop dans les détails, mais vous pouvez avoir toutes sortes de combinaisons et de pratiques différentes. Vous pouvez également désactiver l'image. Faisons-le ensemble. Revenons donc ici. Revenons à mon produit. Et pour cette taille différente, enregistrée dans une couleur différente. C'est logique, non ? Tu as une couleur différente. Si vous vendez des sous-vêtements verts, rouges et bleus, vous changeriez l'image pour les différentes couleurs. Ici. Comme j'ai un blanc différent, j'ai juste fait une petite image pour nous. OK, donc j'en suis à 200 grammes et vous pouvez voir que c' est l'image variable. Je vais le remplacer. J'en ai une dans tes notes, dans tes dossiers d'exercices. Je viens de faire des économies de 50 g, même si c'est de l'euro ici. Et fermons-le. L'image a fonctionné. Cool. C'est vraiment une grande image pour ce que je l'utilise. Publions. Il est directement publié à partir d'ici. Une fois qu'il est publié, vous pouvez également le publier directement à partir de là, la première fois que vous devez publier l'ensemble du site. Maintenant, si je rafraîchis le site, nous devrions être en mesure de changer d'image, changer de prix, et tout cela change. Très bien, c'est ainsi que vous pouvez ajouter une variable, rechercher les options de votre produit sans la supprimer, ou du moins ne pas cliquer sur le bouton chaud pour ne pas annuler cela, lisez-le d'abord. D' accord, c'est tout. Passons à la vidéo suivante. 109. Ajouter des catégories de produits Collection CMS avec des filtres: Bonjour Dans celui-ci, nous allons ajouter des catégories. Dans mon cas, il y aura des régions où vous pourrez vous y rendre depuis l'Inde et la Chine. Et je vais ajouter mes produits à ces catégories afin que nous puissions les filtrer, les rechercher par eux, les regrouper. Vous le faites peut-être pour les vêtements pour hommes, femmes, pour enfants, ce peuvent être de bonnes catégories. Budget, premium sont peut-être de trop bonnes catégories. Accueil où se trouve le matériel. Tu vas devoir penser à tes propres catégories. Une fois que nous aurons créé une catégorie, ce qui est assez simple, nous allons ensuite aller sur nos pages produits, pouvoir dire, me montrer tous les T liés à ce T par son gestionnaire de catégories et Ce sont des vêtements pour hommes. Vous ne voulez pas que vos enfants apparaissent, nous avons des choses à voir ici. Vous voulez bien que la catégorie de produits soit associée. Très bien, allons-y. Faisons quelques catégories. Les catégories, vous n'êtes pas obligée de les avoir, mais c'est un bon moyen de séparer vos produits. Dans mon cas, je vais séparer les produits en régions où vous pouvez acheter du thé, en Inde, au Sri Lanka ou au Japon où vous voulez vous procurer des dents, vous pouvez en quelque sorte choisir cette catégorie. Mais pour vous, il y a peut-être un moyen et une section pour femmes et enfants peut être une option premium et économique. Vous connaîtrez votre secteur d'activité et connaîtrez les catégories dans lesquelles vous pouvez les regrouper. Vous pouvez donc le faire de deux manières. Vous pouvez accéder à la même page qu' ici et accéder aux catégories. Ou vous pouvez le faire via les produits. Nous allons créer des catégories à partir de l'onglet Catégories. Il y a une nouvelle catégorie. Ma première catégorie sera, disons, la Chine. OK, je vais créer celui-ci. En fait, de Mindanao. Vous pouvez en fait commencer à les ajouter. Disons que le Mongol peut venir de Chine. Allons-y de Kevin Mile. D'accord, et je vais aussi ajouter du thé noir à la cannelle. OK, je vais faire des économies. C'est une façon d'ajouter des catégories. Vous pouvez également le faire par produit. Disons du thé au jasmin ici, vous pouvez voir les catégories. Vous pouvez choisir parmi un produit existant que nous avons déjà fabriqué. Ou ici, vous pouvez ajouter, en gros, c'est la même interface, accord, celle-ci sera l'Inde. Et vous verrez votre URL. Il les divisera également en petits sous-dossiers. Et vous pouvez voir que c'est le cas, cela me donne la possibilité d'en ajouter d' autres en même temps. Je vais juste créer celui-ci. Il peut s'agir de plusieurs catégories. Vous pouvez donc décider que celui-ci vient d'Inde et de Chine. Difficile à faire. Mais jetons un coup d' œil à ces autres. Assurez-vous d'enregistrer les modifications. La Mongolie va venir de l'Inde. Désolée, je ne pensais pas que tout cela avait été fait jusqu'au bout. Et assurez-vous d'enregistrer les modifications. Dan, lis le texte contextuel et le dernier est OK, donc celui-ci en a un, celui-ci est parti. Celle-là a disparu. Je suis juste en train de regarder ici. Et celui-ci s'en va, la plupart d'entre eux sont, disons, la plupart d' entre eux viennent d'Inde. Sauvez. Que pouvez-vous en faire maintenant, fermons-le. Vous pourriez, sur votre page d'accueil, filtrer un peu, vous pouvez vous voir, eh bien, nous l'avons déjà fait. Soit vous réinitialisez la page, nous y retournerons. Jetons un coup d' œil à nos produits. Ils sont tous prêts à partir. Quelque chose ne va pas, il est revenu. Je n'ai rien fait de toute façon, ignore-le. Alors disons, allons-y, récupérons notre liste de collections et nous pouvons commencer à filtrer. Nous pouvons le dire sur cette page ici, et nous avons, en fait, passons à des objets limités. Nous n'en avons que quatre, mais disons que je veux juste montrer à ceux de cette page que la catégorie qui contient la Chine ne devrait en avoir que deux. Celui-ci, je pense que deux d'entre eux ont été appliqués sur l'un d'entre eux. L'Inde et la Chine deviennent également très pratiques lorsque vous êtes sur une page. Disons donc cela. Passons à notre modèle de produit. Oui. Nous examinons donc la version mongole. Je ne me souviens pas qui a postulé pour regarder Lost My Way. Ça, c'est bien. Jasmine T.K. Et ce que nous pouvons faire, c'est ajouter la même liste. Je vais donc accélérer les choses. OK, il a juste ajouté un conteneur , puis modifié la liste que nous avons utilisée auparavant. Et je vais le connecter aux catégories, mais je vais le connecter aux produits. Parce que ce que je veux faire, c'est les ajouter. Je vais faire deux par deux. Je vais encore accélérer et ajouter quelques fonctionnalités. OK, et je les associe simplement au nom des produits. Plus un trône, un mode de vitesse d'image. OK, donc sur cette page maintenant et je veux un peu comme si vous êtes dans cette catégorie et que vous êtes dans une catégorie, donc vous êtes dans la mode masculine. Je veux voir une autre mode masculine, pas potentiellement de la mode pour enfants. Le problème, c'est que je peux revoir le même. Jetons un coup d'œil. Passons en revue ma liste. Et jetons un coup d'œil aux filtres. Et disons tout d'abord je veux uniquement montrer les catégories qui contiennent. C'est une question facile. Tu peux voir ce petit éclair ? On pourrait dire que je me souviens en quelque sorte laquelle il faut dire n' importe quelle catégorie de cette catégorie actuelle. Il sait dans quelle catégorie il se trouve. Maintenant, pourquoi sont-ils tous encore visibles ? Je pense que le thé au jasmin est plein dans les deux catégories . Il montre donc toutes les annonces qui se trouvent dans cette catégorie et parce que c'est dans les deux, toutes. Jetons un coup d'œil. Je suis un peu embrouillé. Le thé vert se trouve donc à la fois en Chine et en Inde. Cela signifie donc qu'il les montre toutes. Alors jetons un coup d'œil. Qui est celui-ci est la seule Inde. Réglons celui-ci uniquement sur la Chine. Juste pour que vous aussi vous rendiez en Chine. Donc, des changements et des choses vont, vers l'Inde. Alors, simplifiez-vous un peu les choses. Vous enregistrez les modifications. Et vous avez tous les deux l'Inde. Joli. OK, j'espère que comme par magie, à notre retour, cela ne montrera que deux choses. On y va. Mais si je vais dans l'une des autres, la Mongolie, vas-y, ça montre le pair mongol. Mais ce que vous remarquerez, c'est qu'il affiche celui-ci deux fois, ce qui n'est pas pour cela que je veux le filtrer davantage. Je vais maintenant cliquer sur la liste. Nous commençons tout juste à nous retrouver dans le gouffre de l'incroyable ampleur du flux de travail en ce qui concerne ce commerce électronique, ces cours essentiels comme si oui, prenaient tout en charge. Je ne vais pas entrer dans les détails, mais je pense que c'est cool parce que cela vous donne l' impression de penser à beaucoup de choses. OK, donc je vais ajouter un filtre qui ne soit pas le nom, le produit. Difficile à retenir, comme si le produit était le produit actuel. Non, je ne veux pas le produit actuel. Je veux donc vous montrer cette liste. Vous souhaitez filtrer les produits qui ne sont pas le produit actuel. Je peux le faire et me débarrasser de cet autre qui dit Partager dans les catégories. Je peux donc me montrer ceux qui ne sont pas ce produit. Est-ce que cela a du sens ? En quelque sorte. C'est celui-ci ici. Nom Ed. Il y a quelques points à parcourir, mais j'ai utilisé ce produit ici, d' accord, et j'ai dit « Pas ce produit ». Super cool, super puissant. Revenons à ma liste. Trois, s'il vous plaît. Charmant. Très bien, c'est tout pour les catégories dans Webflow. 110. Importer un CSV sur le commerce électronique de produit de flux Web: Bonjour à tous. Parlons de fichiers CSV, de feuilles de calcul, de documents Excel. Oh, comme je m'amuse à regarder le magasin dans cette vidéo lorsque je traite de produits. Les produits de commerce électronique, les mettre un par un, convient donc à certains emplois et à d'autres emplois. Ce n'est évidemment pas pratique, surtout si vous vendez beaucoup de choses. Vous avez probablement déjà une sorte de logiciel qui gère votre inventaire, d' accord, et ce que vous devez faire est d'exporter un fichier CSV. Il ne s'agissait pas simplement de l'importer facilement. Par exemple, lorsque nous avons créé nos collections, nous pouvions simplement récupérer l'ancien fichier CSV et il était simplement transféré et disait que celui-ci appartient à là, celui-ci appartient à ici. C'est un peu plus compliqué. Maintenant, ce n'est pas le plus expert en la matière, vous pourriez donc trouver de meilleures façons de le faire. Je sais juste que quand je le faisais, j'ai eu des problèmes quand je me disais, vous savez quoi, qu'ils devraient probablement être au courant de ces problèmes et de mes solutions. La meilleure façon de le faire est que lorsque vous faites, je vais importer un fichier CSV. Le produit, vous pouvez le voir, indique que vos produits sont importés correctement à l'aide de notre modèle CSV en ligne. Il suffit donc de le télécharger. C'est le meilleur moyen, car vous verrez tous les titres vous donneront une sorte de modèle. Il se peut que vous deviez réorganiser vos informations. Vous pourriez avoir besoin d'aide, par exemple, de d'un utilisateur principal d'une feuille de calcul J'ai un cours sur Excel, qui ne vous convient peut-être pas, mais de toute façon, alors téléchargez le modèle CSV et c'est ce que j'ai fait. Je vous montre le modèle que j'ai. J'ai ouvert la mienne en chiffres, qui est la version Mac d'Adobe Excel. En gros, vous devez suivre ces titres avec le haut ici. OK, donc assurez-vous qu'elles correspondent et l'importation s'effectuera correctement, même si vous les laissez vides. Maintenant que celui-ci est là, je vais vous montrer quelque chose d'important. Ces deux noms doivent donc être les suivants. Oh, en fait, décrivons cela pour que vous puissiez voir que j'ai deux choses identiques. Pourquoi est-ce que c'est la même chose ? Parce qu'en fait, les variantes sont souvent utilisées dans le contrôle des stocks, alors c'est où ? J'ai mes 100 g et mes 200 g. OK. Lequel faisons-nous ? Nous faisons de la camomille. D'accord, il existe donc deux produits différents, même s'ils portent le même nom, les différentes tailles signifient qu'ils ont des numéros différents, disons asymétriques, similaires mais différents. Vous finissez donc par avoir deux parties ici. Je passais des années à essayer de trouver comment les mettre tous les deux sur la même ligne. Ce ne sont en fait que deux lignes distinctes. D'accord, l'autre point intéressant, c'est que vous pouvez évidemment décider si, rappelez-vous, nous avons comparé le téléchargement numérique au produit. Vous pouvez décider où il va, où il sera mis en tant que produit. Voici la description de mon produit instant Loren Ipsum, je n'avais pas de catégories pour cette étape. Tu peux les mettre ici. Nous avons simplement saisi des images manuellement. Les images peuvent être amusantes, comme au début du cours, nous les avons simplement importées et vous remarquerez que celle-ci est arrivée automatiquement. Alors, comment est-ce arrivé ? Vous avez besoin du chemin racine ou de l'URL complète de l'image. Maintenant, les pages sont passées, mais l'image elle-même. Je vais te montrer comment je l'ai fait. J'ai la mienne chez Unsplash et je vais vous montrer, d'accord, disons que vous voulez que cette image fasse partie, d'accord ? D'accord, j'aime bien celui-ci. Vous cliquez donc dessus. OK ? Vous, ce que j'aime faire, c'est cliquer dessus avec le bouton droit et il y a une option qui indique Copier l'adresse de l'image. Maintenant, sur PC, ce sera quelque chose de similaire. En gros, vous ne voulez pas copier la page, mais si vous voulez copier l'URL pour cela, vous devrez peut-être rechercher sur Google comment le faire en fonction de votre navigateur et je l'ai copiée. Et en gros, tout ce que c'est, c'est regarder ça quand je le colle, c'est l'URL complète. C'est un peu compliqué, d' accord, pour cette image, et elle devrait se charger toute seule sans tout ce qu'elle contient. Si vous avez affaire à un produit figurant peut-être dans votre propre base de données, il existe peut-être un moyen d'y accéder. Vous devrez vérifier auprès de la personne qui gère la base de données s' il existe un lien auquel le flux peut accéder Si vous êtes sur le même réseau, cela peut fonctionner. Bref. C'est ainsi que cela fonctionne de cette façon. Vous devrez peut-être simplement mettre vos produits dans un lecteur public pour pouvoir les récupérer. Et ici, c'est où ? Oui, je viens de les coller. Tout le reste pour passer par des prix différents, des chiffres biaisés différents. Est-ce que cela nécessite une expédition ? C'est vrai ? Il se peut que votre virion soit teinté de blanc dedans. Il y a les options de dimensionnement des téléchargements numériques et c'est tout. Tu peux en avoir plus d'un. Je n'ai que des options de taille. L'important, c'est de les regarder , car ils se ressemblent tous. Peut-être que c'est juste moi, mais les valeurs de l'option 1, option deux, de l' option 1, de l' option deux, de l' option 1, de l'option deux ou celles-ci ensemble. Ils sont ensemble. Il se peut donc que ce soient les tailles et ensuite les couleurs correspondantes vous allez vous retrouver avec pas mal de choses. Mais si vous avez déjà traité des numéros de SKU et des produits, vous savez qu'en fait chaque unité a son propre numéro asymétrique et qu' il y en a beaucoup. J'espère que vous pourrez faire communiquer votre logiciel d'inventaire à Webflow, vérifier son nom et voir si quelqu'un d'autre a fait quelque chose. Peut-être qu'il y a une intégration, peut-être qu'il y a un plug-in pour cela. Et si c'est un facteur décisif, contactez Webflow et voyez s'ils ont une solution que d'autres personnes auraient pu avoir. Ils veulent vraiment accueillir le commerce électronique sur ce site. C'est une bonne affaire pour eux. Et le côté e-commerce du designer Slash CMS est vraiment une bonne chose pour nous. J'espère donc que vous pourrez y arriver. Quoi qu'il en soit, je voulais juste vous donner un petit ce que j'ai fait avec ces CMS et pourquoi il a travaillé, pourquoi celui du modèle fonctionne et pourquoi le CSV dans les fichiers d'exercices fonctionnent. Mais vous voudrez peut-être ne pas télécharger la version préexistante et l' utiliser comme guide. C'est bon, c'est ça. CSV, tant mieux que moins de feuilles de calcul, s'il vous plaît. 111. Flotez et pourquoi le bouton du panier ne se trouve pas dans la Nav dans Webflow: Bonjour tout le monde. Dans cette vidéo, nous allons mettre le bouton du panier dans la navigation et vous vous dites : «  Cela ne semble pas si difficile. Non, mais ça l'est, il y a des ingrédients secrets à l'intérieur d'un coton, c'est ingrédient secret à l'intérieur d' un ingrédient secret à l'intérieur d'un navigateur qui les empêche de jouer ensemble. De plus, je veux vous présenter ce qu'on appelle le flotteur. Et en général, plus pour examiner certaines de ces choses comme des solutions de fonds à trouver, non des choses qui sont cassées, ne peuvent jamais être réparées. Ma vidéo de psychologie de la conception Web ne fait qu'un avec les problèmes. Très bien, donc tout à l'heure, nous avons examiné la question de la modification du panier. Pouvons-nous simplement le jeter dans notre plaine maintenant que nous l'avons fabriqué et j'ai dit : « Ne le mettez pas dans le navigateur, cela provient des composants ». Voyons pourquoi maintenant, je veux vous montrer quelques sur certains composants préfabriqués, quelques informations à ce sujet, quelques informations à ce sujet, et vous montrer que beaucoup de choses ici et Webflow est vraiment facile. Il suffit de le faire démarrer. Ensuite, il y a certaines choses qui nécessitent un peu de résolution de problèmes. Ce n'est pas que vous êtes mauvais dans ce domaine, cela fait simplement partie du processus. Je ne trouve pas tout le temps que tu seras capable de résoudre des problèmes. Très bien, nous allons donc ajouter ce composant. Donc, nous allons y aller et, et les éléments ou les composants sont prédéfinis, c'est la barre de navigation, nous aimons ça. Tu te souviens pourquoi nous l'avons aimé ? Parce qu'il l'a fait, c'est parce que quand je passe au mobile, il les change aussi, qu'il possède des pouvoirs secrets. Ces pouvoirs secrets ici, parce que c'est en panne. La barre de navigation a donc une icône spéciale. Il y a un contenant dedans, il a une marque. Il y a quelque chose qui s'appelle le menu de navigation, qui est ce truc ici. Et puis il y a ce bouton de menu, que nous ne pouvons pas voir. C'est la partie secrète. C'est quelque chose qui est configuré pour s'afficher. Aucune. C'est là ou est-ce que c'est bloqué ? OK. Mais ne s'allume que lorsqu'il est mobile. Et c'est une partie du problème quand il s'agit bouillie chinoise, que le chat a aussi un palais secret et a dit : «  Écoutez, nous allons utiliser la voiture, pas l'ajouter au panier. C'est celui-ci qui contient toute la quantité et la taille du bouton de coupe, comme vous pouvez le faire au total. Nous allons donc modifier et tout d'abord dire : « Hé, tu n'es pas le menu ». Et je me suis dit : « Que peux-tu figurer dans le menu ? Cela semble être un endroit idéal pour vous. Ce que tu te rends compte, c'est que tu peux voir où c'est écrit ? Il indique que cut n'est pas en mesure de le placer dans le menu de navigation. C'est en fait le cours. Ce n'est peut-être pas l'ensemble de la navigation, juste cette classe en particulier. Pour que je puisse le mettre ici. La capacité secrète du chariot est qu'il contient toutes ces choses. Alors jetez-y un petit coup d'œil. chat a donc le bouton de copie, ce que nous pouvons voir, mais aussi l'emballage pour chats, que nous ne pouvons pas voir. C'est ce qui apparaît lorsque vous cliquez dessus. C'est le div qui apparaît ici. Essayer de les écraser ensemble signifierait que si je mettais la coupure ici, cela signifierait qu'elle disparaîtrait. Ce menu disparaîtra lorsqu'il sera sur mobile. Votre panier et Webflow aimeraient aussi essayer de s'assurer que de simples créatures comme moi ne finissent pas par faire telles bêtises. Cela fonctionnerait. n'y a rien de mal avec le code. Il y a un chariot à l'intérieur, mais il s' éteindrait pour un téléphone portable. Donc ce qu'ils ont fait, c'est qu'ils ont Webflow de faire certaines choses , Cody contre nature, des choses à dire. Vous ne pouvez pas être dans le menu de navigation parce qu'il ne peut jamais y aller, ne peut jamais y aller totalement, mais ils disent juste, eh bien, personne ne veut jamais ça. Nous allons donc faire en sorte que cela ne se produise pas sur le lieu de travail. Donc, sachant que l'entreprise est dans la même position, cool. Il suffit de le faire. Je peux juste l'enfoncer. Maintenant, l'autre chose que nous allons rencontrer est que ces barres de navigation ont été conçues un peu différemment du type de bonnes pratiques de cette classe. Comme souvent, nous utilisons Flex pour faire en sorte que les choses fassent leur travail. D'accord, et cela fonctionne totalement, mais nous utilisons le composant de quelqu'un d'autre et un composant plus ancien de Webflow. n'y a rien de mal à la façon dont ils l'ont construit. Ils viennent de construire d'une manière différente. Donc, la façon dont ils l'ont fait dans celui-ci en particulier est que je vous ai dit d'accéder au menu de navigation en utilisant quelque chose que nous avons fait, position, relatif et absolu. Une chose que nous n'avons pas abordée, d'accord, nous sommes de plus en plus avancés ici, c'est qu'ils ont fait ce qu'on appelle le flottement. Vous rencontrerez certains éléments qui contiennent ceci. Au lieu d'utiliser le flex pour le pousser vers les bords ou la grille, ils ont utilisé le flotteur et il flotte vers la gauche et vers la droite. On y va. Donc je peux dire que je veux que tu flottes vers la droite et ensuite je veux que tu regardes ça. Le bouton de coupe ne me permet pas de régler le flotteur. Eh bien, cela dit que le flotteur ne peut pas être ajusté. Il l'a bloqué pour cette chose en particulier afin que cela fonctionne. Alors, tu y vas. C'est beaucoup, donc tu n'y vas pas. Et Rick, cette partie, finira par flotter sur le côté. Vous pouvez le faire sur l'ensemble du panier, mais pas sur le bouton. Étrangement, seules les choses que nous avons décidées sont dans notre intérêt. Et ici, je peux le faire flotter. On y va. Je suppose que j'aimerais faire ces vidéos parce que parfois je peux créer des cours qui semblent tous très logiques. Il suffit de le faire. Ensuite, vous vous lancez dans le monde réel et vous vous dites : «  Je suppose que ce que je veux que vous fassiez, c'est que vous adoptiez ces concepteurs de sites Web. Tricky Webflow vous facilite la tâche, mais ce sera un défi et tout cela en fait partie. Et même si c'est très frustrant quand ça ne marche pas, mais quand tu l'as, tu te dis  : « Oh, attends un génie. Je suppose que c'est le plat à emporter et le flotteur. Cherchez Flood. L'autre chose étrange, c'est que je ne sais pas pourquoi. Jetons un petit coup d'œil. La marque est-elle là, elle est là. Il y a un menu Ajouter qui se trouve là-bas, chargé sur le bouton de navigation droit. Je sais que c'est le menu caché des hamburgers, c'est le chat. Pourquoi la voiture en face ? Je n'arrive pas à m'en sortir. Tout ce que je sais, c'est que si je fais ça, ça marchera. C'est tout ce qui compte. OK, jette un coup d'œil. Beaucoup de développeurs regarderont cette vidéo et seront bien meilleurs que moi en matière de code. Jetez un coup d'œil. Je sais dans les commentaires pourquoi je le sais. Je viens de m'en remettre aux mystères de la voiture. Il se passe des choses incroyables. Eux et peut-être m'ont échappé. Mais je veux dire, tu devrais vraiment l'être, tu devrais être l'inverse et la petite liste ici. L'autre point intéressant, c'est que disons que je veux passer au mobile et jetons un coup d'œil. C'est probablement comme s'il était logique que la voiture soit présente dans le menu pour y être. Mais quand vous êtes en panne de mobile, c'est bizarre, impression qu'ils devraient être alternés et nous pouvons le faire. Heureusement, Webflow a séparé le menu. Le menu est celui que je peux voir sur cette page ici. C'est celui-ci. Sur la version mobile. Voilà le bouton, mais regardez ce que je peux mettre entre les deux. On y va. Cool. J'ai donc fait ce travail dans l'autre sens. Je veux que la carte sur le bouton soit au-dessus de toutes. On y va. Cela n'a pas beaucoup de sens, mais je peux avoir le chariot de ce côté parce qu' il y a des menus séparés et un chat là. Nous pouvons choisir le menu là-bas, le menu Nav Burger là-bas. Nous pouvons coller le coton au milieu pour faire des choses sympas et l'échanger pour que ce soit pris sur mobile un peu plus loin pour le moment, ordinateur de bureau, trouver grand, voir tout est fait chez mobile. Elle se resserre. OK, donc ce que nous pouvons faire, c'est le bouton du panier peut être ajusté en fonction du point de rupture de l' affichage. Donc, ce que nous pouvons dire, c'est qu' il y a le panier global, le bouton du panier, et qu'il y a en fait différents paramètres ici. Donc, coupons. On peut faire des choses comme ça. Nous pouvons ouvrir le panier, mais le bouton du panier que vous pouvez voir a ses propres paramètres. Et on peut toujours monter dans le chariot. Mais ici, il a la possibilité de dire la quantité. Je peux l'éteindre. Dois-je courir pour me débarrasser du mot chat ? Je le fais Il va cliquer ici. Et je dirais que vous n'avez aucun écran encore présent sur ordinateur de bureau, pas sur mobile. On peut faire un beau tour de rôle, lui donner le contexte pour vous. Vous pourriez aussi aller voir comment d' autres personnes ont traité ces problèmes K, parce que vous ne serez pas le premier. Allons-y Et par exemple, je suis dans le dribble, je trouve cela intéressant pour les interfaces Web et d' interface utilisateur dribblées en particulier, j'ai juste tapé dans le panier et j'étais juste comme faire défiler, faire défiler, faire défiler, et regardez ça. Ce site Web y traite en ayant la coupe sur sa propre ligne. Parce qu'il a reçu beaucoup d'informations. Ils ont une grande barre de recherche. Ils ont décidé de le prendre un peu comme un fichier d'en-tête de navigation à double étage. Il y en a un autre ici. Ça l'était, et ça ne l'était pas. Celui-ci n'a pas de panier. serait intéressant de voir comment celui-ci fonctionne. Ce n'est qu'un visuel, donc ce serait bien de vérifier une application réelle. Il y en avait un de plus. Celle-là. Vous pouvez voir ce qu'ils ont fait, c'est qu'ils occupent ce coin supérieur droit et que le menu se déplace ici. La marque a compris qu'elle pouvait être coincée ici au milieu sur cette version. Vous pourriez donc faire quelques échanges. Mon conseil cependant, simplifiez-le et mettez-le sur sa propre ligne, alors vous devriez vous en préoccuper maintenant. C'est bon, c'est ça. J'ai promis de corriger ce Top Nav et nous avons découvert Float et nous avons examiné la conception Web est un problème amusant à résoudre juste après un problème frustrant à résoudre. Très bien, vidéo suivante. 112. Travaillez avec Dan en construisant le magasin de thé complet dans la partie 1 de Webflow: Bonjour à tous. Nous allons faire un tour avec moi, juste avec Dan. Nous avons examiné beaucoup de ces sujets ici de manière isolée, comme la réalisation de ces vidéos, examen d'une chose en particulier, accord, et ils s' en éloignent. Donc, ce que nous allons faire maintenant dans cette vidéo, c'est que je vais vraiment le créer, faisons-le apparaître à l'écran. Très bien, alors ça y est. Il s'agit de la maquette dans Adobe XD. J'ai utilisé XD parce que nous utilisons Figma. Et je suppose qu'on me demande beaucoup, comme lequel dois-je utiliser ? Et je suis juste heureuse d'utiliser l'un ou l'autre. Nous allons donc créer une version de bureau, mais aussi une version mobile car nous n'avons pas fait autant de choses sur mobile dans ce cours. Et pour ce client en particulier, faux aveugle. Et puis, il sera principalement utilisé sur mobile, mais il suffira de vous montrer les étapes à suivre, comme passer d'abord à l'ordinateur de bureau, au flux de travail, puis à la création d'un mobile. Oui, et je vais juste vous expliquer mon processus. Donc, comme il s'agit moins d' un tutoriel que d'une balade, je vais payer un peu de loyer. Je vais essayer de raconter ma propre vie, ce qui est délicat. Et ça va être long. Alors, combien de temps ? Je n'en ai aucune idée. Je suppose que c' est une heure et 32 minutes. Peux-tu mettre du temps aux directeurs financiers de toute façon, Nicholas ? 45 min, 2 h, 3 h. Et ce sera ce que ça va être. Et oui, ça va vous montrer où je suis bloqué et comment je peux y remédier. Je pense que c'est utile à voir, mais tu n'es pas obligée de regarder ça. Je vous donne la permission de sauter. Je ne vais rien aborder de nouveau. Il suffit de réutiliser ensemble les informations que nous avons apprises dans le cours et le titre. Cela peut être utile, rappelez-vous également que c'est le meilleur moyen. La meilleure solution, compte tenu des compétences que nous avons acquises au cours. À mon avis, ils pourraient être une meilleure façon de faire quelque chose de totalement correct. Laissez-le dans les commentaires si vous savez, Oh, pourquoi ne l'a-t-il pas fait de cette façon ? Et vous regardez ceci lisez également les commentaires. C'est peut-être comme ça que nous l'avons fait parce que je suis forcément coincée quelque part en cours de route. Oui. Très bien, allons-y. On se voit là-bas. Très bien, commençons le matin où j'aurai pris mon café. vous de nous dire quelle est la matinée. J'ai dû regarder la vidéo que je viens d'enregistrer et c'est un peu mon visage matinal. Je ne me suis pas encore réveillée. Très bien, nous allons donc commencer par voici la maquette XD. Comme je l'ai dit dans l'introduction, je vais d' abord devoir utiliser le bureau , puis travailler sur le mobile. Et je vais vous montrer mon processus pour cela. Et il n'y a aucun moyen pour moi passer à la téléphonie mobile d' abord dans Webflow sans faire de super hacks, n'est-ce pas ? Navigation, je vais commencer par la navigation normale comme dans le composant. Je vais faire en sorte que cela fasse mes ordres parce que j'adore le passage le plus simple à la navigation mobile. Très bien, commençons, commençons par le colorier. Et j'y vais souvent si le tag a l'air bien, accord, la barre de navigation est une bonne classe. Je vais juste le laisser flotter, générer le nom de la classe. J'ai récupéré mes couleurs sur XD. Je laisserai une copie du fichier XD si vous voulez y jeter un œil, si vous connaissez XD, mais ne vous inquiétez pas si vous n'avez pas de compétences en XD ou Figma, vous pouvez simplement créer dans Webflow. D'accord, donc la classe, je vais faire tourner les choses vers le bas. Je vais vous donner quelques autres raccourcis au début, juste pour vous rappeler. Et puis je ne vais pas le faire tout au long du cours parce qu' une heure ou quoi que ce soit d'autre de raccourcis, ça va devenir fou dans les deux cas. OK, donc Option Alt, cliquez, quand il passe à 12 et plus bas, supprimez-vous. Ce sera cette couleur. Je vais l'utiliser comme couleur globale. Je vais utiliser ce Scott T. Et ce sera mon principal. Maintenant, selon que vous travaillez pour un designer ou si vous êtes le designer. Vous verrez que dans celui-ci, j' ai en fait un langage de base ici, donc quelques noms. Ok, donc celui-ci est le numéro 3 principal. OK, donc je vais juste garder ce nom tout au long, accord, et y faire référence parce que je peux le réutiliser. Très bien, allons chercher un logo. Alors ici et téléchargez-le. J'ai quelques fichiers que j' ai pour l'ensemble de les exporter depuis XD. Donc je passe en revue rapidement et je pars et je le trouve. OK, et je le sélectionne. Et puis j'appuie sur Commande D ou Control E sur un PC. Vous pouvez également cliquer dessus avec le bouton droit de la souris dans votre panneau Calques et sélectionner Exporter la sélection Et j'ai juste choisi le SVG parce qu'il est évolutif. OK ? J'ai quelques fichiers JPEG que je vais utiliser. Mon fils les a parcourus et les a récupérés et retrouvé avec deux logos, PNG et SVG. Je vais utiliser le SVG. Veuillez choisir la bonne taille, ce qui est une bonne chose. Maintenant, j'aime faire le texte alternatif, ceux que je connais au fur et à mesure que je les mets, sinon je ne reviens jamais en arrière et je ne le fais jamais. Donc, je ne vais pas le faire sur l'objet, je vais le faire dans le panneau Actifs. Ok, donc ici je vais dire que c' est le logo de Scott T. Ireland. peux m'en servir trois et un mot clé, et je suis sûr qu'il y a quelques Scott T. Je n'ai pas vérifié. C'est bon. Cela devrait donc obtenir le texte alternatif. Le texte alternatif proviendra de la ressource. Excellente. Maintenant, cette navigation est construite avec des éléments tels que flotteur et non une grille ou des raccourcis. Il y a donc différentes façons, comme au lieu d'essayer d' obtenir des grilles, super, vous pouvez le coincer dans le bâtiment des barres du milieu et je dois le faire moi-même, j'avais certainement intégré une grille, mais je ne l'ai pas fait, donc je Je vais juste être bon marché. Utilisez la classe qui proviendra peut-être de la marque. OK, et je vais dire qu'il suffit de montrer le haut, s'il vous plaît. Et assez bon. OK. En fait, ce n'est pas suffisant. Allons le chercher. Vers le bas. On y va. Donc, pour le moment, je pense que les boutons ont la taille de celui-ci. Si tu t'en débarrasses, le truc s'effondre. Comme si elle ne s'était pas effondrée. British montre les boutons qui lui permettent de garder la taille. Ou peut-être le menu de navigation, qui est bon pour moi. Et je vais me débarrasser de l'un d'entre eux. Je vais renommer got browse home et parcourir t. Honesty. Et je vais donner du style à ces boutons en fait, au lieu de les vendre, je vais les mettre dans mon body tag parce que les boutons utilisent cette police appelée inter. OK, et j'utilise enter comme texte de paragraphe ici. Entrez donc et j'ai celui-ci appelé Mac tick nomade. Je vais donc passer à l'affaire Google Fonts. Je vais les installer pour le cours. Paramètres du projet. Je vais aller dans les fontes dans IFA, dans, et je vais les trouver. D'accord, j'utilise du normal et de l'audace dans mon design. Je le sais parce que je l'ai vérifié. Tu peux aller voir tes dessins. OK. Et je n'en veux pas un autre appelé MA. Il n'y a que des extrémités métriques, il y a un gras. Je pense que je ne veux que de l'audace. D'accord, donc ce sont les m2. Je vais retourner voir le designer et configurer mon body tag. Étiquette corporelle. Je vais tout dire, tout ce qui se trouve sur ce site Web sera une police de caractères de cette entrée. D'accord, et ma taille de police par défaut est de rechercher la 116 la plus générique. Ceux-là, il a aussi 16 ans. Parfait pour la hauteur de la ligne. Et en fait, nous devrions utiliser des rems divisés par 16 REM cope. Donc, une pièce. Tu y vas. Ok, et celui-ci ici, je vais utiliser le genre, rien de tel ne veut juste dire que ce sera normalement un de ce que c'est, soit 20 pixels. Inscrire celui-ci dans ce trait d'union signifie simplement que ce sera l'un de ces éléments. Donc, ma taille sera d'une pièce. Parfois, c'est 1,11, 0,20, 0,9. C'est comme un pourcentage de ce que c'est. Je vais donc commencer par un et voir comment nous allons procéder. Vous pouvez voir que cela fonctionne en quelque sorte ici. Et je vais laisser la couleur par défaut telle que je pense que c' est la couleur par défaut. Jetons un coup d'œil. Dans Webflow, c'est comme un gris cassé, gris cassé, juste un gris plus clair, un gris ardoise. Je vais le faire en noir uni parce que c'est ce dit le design et je fais ce que dit le designer. Très bien, et c'est suffisant pour le moment. Et regardons ces boutons. Ce sont donc des liens de navigation dans le menu de navigation. Ce que je vais faire, c'est créer, je ne vais pas créer une classe de boutons parce que le bouton, le bouton générique, c'est ce truc ici, celui-ci ici, tellement unique que le matin, vous utilisez juste là. Je ne les utilise nulle part ailleurs sur le design que je peux voir. Donc ce que je vais faire, c'est laisser le bouton parce que c'est un très bon nom pour un cours. Et je vais dire que celui-ci est un peu plus précis. Et ces gars ne partagent pratiquement rien qui soit en majuscule, je suppose. Et je vais avoir deux cours, j'ai décidé. D'accord, donc celui-ci sera distinct de ce que je vais créer plus tard, appelé bouton. D'accord, donc il va y avoir un système de navigation, un bouton , un système de navigation, le truc, et le truc qui est un peu plus précis. Très bien, et je vais dire que tu es blanche. Excellente. Maintenant, je vais dire que vous êtes toutes des capitales. Parce que la moitié des hommes capitalisent et c'est plutôt bien parce que disons que le client va travailler sur le site. Cela signifie qu'ils ne peuvent pas les mettre en minuscules et rater mon design. Donc, quand je vais l'ajouter ici, nous allons utiliser la commande Enter ou Control Enter. Je vais taper le bouton. Premièrement, cela signifie que cela l'oblige à être en majuscules. D'accord, pour le reste, il est clair ce qui est bon. Il y a beaucoup plus d' espace ici. Donc, ce que j'aime faire, c'est les espacer comme M. Si vous cliquez sur quelque chose et que vous maintenez la touche Option sur un Mac, touche Alt sur un PC, et que vous survolez quelque chose, vous voyez que c'est un 67. Donc, la moitié fait 30 ou 33, 33. Je vais donc m' assurer que ce rembourrage de 33 boutons de navigation a un espacement de 20. Je vais en faire 33 des deux côtés. Et je garde juste un œil dessus, comme ici dans XD ou un peu comme si la commande on arrive à 100% et je les aligne à moitié. n'est pas parfait, mais tu peux voir si je bascule entre les deux, Ce n'est pas parfait, mais tu peux voir si je bascule entre les deux, je peux m'en approcher un peu plus. Et si vous vous demandez comment m'a-t-il parlé entre les deux sur un Mac, vous maintenez la touche Commande enfoncée et appuyez sur un PC, c'est différent. Je pense que c'est l' onglet de contrôle ou Control Shift. Essaie quelques-unes d'entre elles. Vous devrez peut-être utiliser Google pour basculer entre applications ouvertes sur un PC ou un Mac, c'est l'onglet de commande. Je le fais beaucoup entre XD et on se confond parfois. Lequel alors ? Très bien, alors ajoutons ce panier. Maintenant. Nous l'avons fait plus tôt lorsque nous avons eu quelques problèmes, mais nous savons comment les résoudre maintenant, première chose est de savoir si je dois ajouter. Il n'y est pas. Pourquoi n'y êtes-vous pas ? Je peux voir le CMS, mais c'est normalement ici que se trouvent les éléments du commerce électronique. C'est exact. Nous devons le convertir en site de commerce électronique. Ça va me donner deux collections. Allons-y. Encore une fois, c'est juste gratuit, vous pouvez aller assez loin dans le commerce électronique sans avoir à payer pour cela, configurer pour payer, mais nous pouvons préparer pour le client à l'avance. Je vais fermer la boîte parce que je voulais que ce soit pour activer ces appareils. Bonjour, et à couper. On va t'y emmener. Le député peut entrer ici, mais il peut y aller ici. Je ne peux pas y aller. Oh, pourquoi quand tu entres ? Oh, je le reçois tout le temps. Je pense qu'à chaque fois que je le prends. J'ai saisi le bouton Ajouter au panier au lieu du bouton Panier. Sur le bouton du panier, cela ressemble tellement. D'accord, les trucs de mise en page bizarres. Faisons en sorte qu'il soit stylisé. Mettons-le en place d'abord. Nous nous sommes donc en quelque sorte entraînés avant cela. Si j'ai saisi ce bouton du panier ou si je m'en souviens, on passe à la position. On peut le faire flotter. Vous ne pouvez donc pas le faire sur le bouton, mais je pense que vous pouvez le faire sur le panier. Tu peux, on peut le faire flotter. Nous n'avons donc pas fait beaucoup de choses dans ce cours, mais cette navigation a été construite avec des flotteurs. Nous allons donc devoir utiliser ce qu'ils ont fait. Je vais donc flotter vers la droite. Je vais le mettre de l'autre côté. qui, dans ce cas , signifie devant le menu. Mauvaise. Hé **. Alors mettons-le maintenant, et voyons quelques choses maintenant, dans mon truc, il n' y a pas de numéro. Il se peut que j'y retourne. Les clients disent : voulez-vous le numéro de panier ? Ils n'y ont peut-être pas pensé. Mais disons simplement que la quantité coupée doit être désactivée. Vous pouvez le masquer car c'est une option. Mais je pense qu'avec le panier, vous pouvez simplement, c'est l'une des options des paramètres. J'ai donc sélectionné le chat et je le cache lorsque le panier est vide et qu'il n'apparaît que lorsqu' il est utilisé ou qu'il est autorisé. Et jetons un coup d'œil à l'achat du chariot. Maintenant, je pourrais le styliser pour que ce soit en majuscule K. Donc c'est en majuscule ici et ce n'est pas ici. En fait, il suffit de l'éteindre. Ok, je vais juste écrire une carte parce que personne ne va changer ça. Je ne vais pas le rendre modifiable pour le client. Vous pouvez le saisir en majuscules. Rien d'autre ? Il va falloir que je joue avec cette hauteur et cette couleur. Il faut donc ajouter une autre couleur. Alors faisons-le d'abord. J'utilise donc mon iPhone sur le clavier, j'utilise ma pipette. OK, Rick, mon design. Mais c'est le code. N'y sont pas. OK. Donc je veux vous dire bouton pour carte. OK. Je ne vais pas ajouter le nom du style car il y a un nom Goodstein appelé Cut button. Et quand je le créerai, accord, je vais dire contexte. Il va être tapé ici. Je peux voir qu'il a créé la classe en fonction de la largeur de pied que Float pensait que ce serait. Ce qui est en fait très pratique ici. Et je vais modifier pour devenir une classe globale. Et ce sera mon secondaire en S T. Et c'était aussi la troisième. Cliquez sur Créer. Maintenant, je dois jouer avec le rembourrage. Je vais faire la même chose qu'avant. Faisons de l'espacement. Et il était 33. Maintenez la touche Option touche Alt enfoncées sur un Mac pour obtenir les deux côtés 33, le haut et le bas, je vais juste faire correspondre le contenu de leur ligne. Joli. D'accord, tout est en quelque sorte aligné et il suffit de trouver un tout petit peu. C'est bon, je regarde. OK, allons maintenant voir à quel point ça se passe mal sur mobile. Mais j'ai tendance à faire un morceau, comme une section, puis à vérifier s'il s' d'une boule de lune plutôt que de tout faire et de devoir revenir en arrière et le faire. OK. Alors croisons les doigts de la tablette ? Oui. Je ne pense pas qu'il y ait assez de place pour qu'il n'ait pas besoin de passer au mobile sur tablette. OK, donc je vais garder les boutons ouverts. Donc, ce que vous faites, c'est de cliquer sur E et F, et il y a quelques options dans les paramètres pour afficher celle-ci ici. Conservez l'icône Menu, comme l'activer dans le paysage du téléphone pour moi. Il devrait être là sur tablette et rien ici ne devrait être là comme ça. Parfait. La seule chose, c'est que quand j'arriverai ici, je vérifierai qu'ils ne sont pas cassés sur ceux-ci. Je sais que pour ce client en particulier , il existe un client fictif, mais le mobile d'abord est le plus important pour celui-ci , c'est qu'il y a deux choses ici. Ça a l'air bien, ça a l'air bien, mais ça devrait être blanc et ça doit être plus petit. OK, donc pour le faire ici, je dois le faire où je veux pour le menu des hamburgers. Je dois le faire d'abord. Chaque fois qu'il apparaît, je ne peux pas le faire en portrait et en paysage car il flotte vers le bas. N'oubliez pas que si c'est le cas, les icônes sont drôles et certaines icônes sont des listes, comme des images, et vous les stylisez avant qu'elles n'apparaissent. Mais cette icône en particulier, vous pouvez commencer par la couleur de la police, ce qui est génial. OK, donc les icônes ne sont pas canines, je vais l'appeler Icone Burger Menu. Parce que je finis par avoir plus d'une icône. Et vous pouvez commencer avec la police. Donc, la topographie et le blanc. Ce que je vais également faire, c'est me débarrasser du panier de mots à ce niveau. OK, donc je vais juste dire que Cart Add c'est limité. Tablette chaude cependant, je vais dire que vous êtes une mise en page d'affichage aucune. Et j'espère que maintenant sur le mobile, il y en a un. J'utilise le une-deux-trois en haut de mon clavier, 121234. D'accord, c'est comme si je jouais avec l'espacement. Encore une fois, je dois jouer avec à trois heures, ce qui est mon paysage mobile, a juste besoin d'être un peu plus petit. Donc, celui-ci est un résumé. C'est que ça ne me dit pas que c'est la taille réelle 0, 18 de chaque côté. OK. Je vais donc voir si je peux le faire dès que nous sommes en 2032. Donc sur celui-ci, donc je vais juste en faire 18 de chaque côté. Ouaip. Mais ce truc qu'il est un peu à bout de souffle, c'est un peu de rembourrage de ce côté. Donc je vais juste m'en débarrasser un peu. Et ce n'est pas pareil. Celle-là a l'air bien. C'est juste que tout est un peu différent, comme les icônes ont des hauteurs différentes. Et donc, parfois, il n'y a qu' un petit coup de fouet à regarder. En fait, augmentons simplement cela pour lui donner un aspect carré. Et il doit être un tout petit peu plus grand. 123,4 pour celui qui me préoccupe vraiment le plus. Très bien, donc la navigation est presque terminée. Nous allons cliquer ici et partir, vous ouvrez, montrez s'il vous plaît. Et de la hauteur. Oui, allons-y et faisons-le. Donc, ce que je vais faire, c'est dire que tu vas être un dessin, tu ne l'as pas dedans. Vous devez donc prendre certaines décisions exécutives. Est-ce que ça va être vert, est-ce que ça allait être brun. Une autre couleur, bouton de navigation. C'est toujours le même bouton de navigation, ce qui est intéressant comme le bouton nerveux est là. Mais quand il s'agit de cette option, elle est un peu redessinée et un autre style lui est appliqué. Et je dois le faire pour la version paysage parce que c'est là qu' elle apparaît pour la première fois. OK, donc vous montrez et vous allez être sur cette version, couleur de fond de celle-ci. Ok, peut-être que faisons-nous ? Nous vous fabriquons de la même couleur. Couleur. Couleur. Excellente. Peut-être que ça restera comme ça. Quand il tombe. Très bien, commandez Shift P, Control Shift P et cliquez dessus. Maintenant, je suis réticent maintenant deux, et je m'en tiens à ça parce que je veux aller le vérifier sur mon téléphone portable. Parce que je le regarde à l'écran. Oui. Ici, c'est directement sur votre bureau, mais il vaut mieux le vérifier sur votre téléphone portable. Je vais donc le publier. Ouvrez-le dans un navigateur. Maintenant, n'oubliez pas que cela n'est peut-être pas vrai pour tout le monde. Vous pouvez simplement le saisir sur votre téléphone. J'aime utiliser cette option et envoyer sur mes appareils. Et je peux me connecter à mon téléphone Google. Et il apparaît juste ici. C'est plutôt mignon. Ça a l'air bien. Les boutons semblent assez grands. Nous devrons le vérifier auprès de Google pour voir si Google est d'accord avec la taille des boutons, accord ? OK, accessibilité des poulets. Mais ça a l'air bien. Mais une chose au téléphone c'est que tu peux voir cette petite ligne ? Et c'est ça. Ok, donc je vais y aller, tu dois juste le cacher un peu. Très bien, très bien. Sur mobile. Passons à la partie suivante. Alors regardons ce que c'est ? Il y a une boîte à héros ici. Je regarde aussi l'heure. Cela va prendre bien plus de temps que je ne le pensais, n'est-ce pas ? Tu sais déjà que tu ne le sais pas, tu ne me le dis pas. OK, entrons dans notre section et travaillons d'abord sur cette image d'arrière-plan. OK, donc je vais vous y aller, ajoutons notre conteneur pour tout cela, gros tous les autres sites dans un conteneur sur toutes ces pages. Alors, quel genre de faire ça ? Il suffit de vérifier. Y a-t-il quelque chose qui sort du contenant ? Je peux donc le faire en cliquant ici, Commande ou Contrôle E. Je vais aller à section, commande ou réglage ou Contrôle. Retournez ceci la dernière fois que je promets que Janice sera ma section ici. En fait, je voulais le contenir et les sections i et u peuvent entrer à l'intérieur. Je vais mettre une hauteur minimale juste pour le tenir trop grand, juste pour avoir quelque chose à regarder pour mon image de fond. OK, jetons un coup d'œil. Donc, l'image de fond, si je regarde ici, c'est que j'hésite à sortir parce que c'est en fait une image plus grande. Et je veux un peu plus pour les différentes tailles parce que vous savez que lorsque nous le redimensionnons, il deviendra chaud, plus gros et plus petit en fonction de la largeur du navigateur. Donc, même si c'est probablement le cas, je ferais probablement sauter un peu le haut et le bas parce qu'il y a pas mal de pixels supplémentaires dont je n'aurai probablement pas besoin. Et ça va être une grosse taille de fichier. Mais pour le moment, je vais voir, juste voir comment ça se passe. Donc, l'image de fond est ce que je veux faire. Donc, dans la section ici, j'ai sélectionné ceci, arrière-plan et image d'excuse. Celle-là. Je vais m'occuper de ça. Et je vais probablement partir du centre plutôt que du coin supérieur gauche. correspond un peu à ce que j'ai fait en lui. La prochaine chose à faire est de mettre ça par-dessus tout. Je ne me souviens pas si j' avais ajouté, au début du cours , qu'il y avait deux façons de procéder. Vous pouvez cliquer sur tous les boutons. Vous pouvez ajouter un deuxième bloc de couleur par dessus ou ajouter l'effet. Il existe un filtre appelé ombre, désolé, luminosité, et vous pouvez réduire la luminosité. Je vais juste ajouter deux images de fond. Mais en fait, ce sera une superposition d'arrière-plan. Et vous voyez la différence c'est que celui-ci ressemble à une teinte verdâtre. Ces choses vous surprendront si vous n'êtes pas le designer. Parce que je l'ai fabriqué, je sais qu' il n'est pas noir ou qu'il n'est pas la meilleure teinte professionnelle. Je vais te chercher et je vais regarder l'opacité. Vous voyez que c'est 80 %. C'est ce que je vais faire. Je vais aller te voir et te dire que tu es de couleur pour ça. Et vous allez atteindre 80 % de ce chiffre et cela devrait correspondre assez bien. Regarde, voyons voir. Oui, génial. OK. Je dois le pousser un peu vers le bas depuis le haut. Je vais donc le faire pour regarder. Je vais le faire à la section ou le conteneur se place sur le conteneur. Ils sont là. Et je suis mobile. Ça arrive un peu. Oui. Cela semble se répéter suffisamment pour que je le fasse sur le contenant. Donc, en fait, non, je vais le faire à la section Je ne suis pas ça, je vais le faire à la section ici. Non, fenêtre donnant sur le conteneur. Un conteneur va avoir un contenant. Je ne vais pas faire tous les contenants parce que je jure que je vais utiliser contenants quelques autres fois. Il y aura un rembourrage sur le dessus. En fait, je sais que nous voulons, je pense qu' une meilleure idée que nous allons faire est de créer une classe mondiale. OK, donc nous allons dire que je vais juste ajouter une balise div et créer une classe de marge globale. Il va y avoir de la marge, en plus, souvenez-vous que j'ai un excès, Sam et Sam. OK, il y a un moyen, un grand, un très grand. Maintenant, quand je fais un travail, je dois souvent les écrire devant moi. Ce que j'ai décidé d'un excédent, c'est de huit pixels, c'est m , le petit de 16, puis il obtient 24, 30 à 40. Je peux, je ne sais pas pourquoi ils ne me restent pas dans la tête. Je les note donc sur un Post-It devant moi, juste ici. OK. Donc j'ai ça qui traîne dans un ancien travail, poste la note et je vais deviner que j'en ai besoin, je suppose que je suis dans XD. Et si vous utilisez ceci, je vais maintenir la touche Option enfoncée et elle indique 20. Je vais donc essayer de rester cohérente, comme si le designer m'avait entendu choisir le jumelage parce que ça avait l'air bien. Je vais en choisir 24 pour cohérent avec mes polices et mon espacement. Je vais donc utiliser 24, qui est mon média. Donc, dans XD, désolé, dans Webflow, je vais dire que vous êtes une marge au-dessus. Tu vas être moyen. Et l'espacement sera une marge en haut de ces 24. J'espère que le designer ne remarquera pas que nous ne sommes pas en 2024. Supprimez le conteneur U, il aura une classe vide. OK ? Alors imaginez dur et celui de taille moyenne signifie que je peux réutiliser ce médium top qui devrait probablement le créer . Vous êtes peut-être arrivé à un moment donné. Maintenant, nous allons continuer, je vais faire en sorte que l' excédent soit petit , moyen, grand. Je trouve que chaque fois que je les fais comme si je voulais le faire correctement, je les mettrai toutes dedans. Alors je n'en utiliserai que deux. Et les jobs où j'en ai besoin , je ne le fais pas. Je vais utiliser chacun d'entre eux. Fabriquez-les individuellement. C'est comme la loi de Murphy. Très bien, donc nous allons les taper dessus. Il faut qu'ils y jettent un œil. Je dois donc le diviser en deux parties. Il y a plusieurs façons de le faire. Peut utiliser des colonnes, pourrait utiliser Flex. Je vais utiliser la grille parce que c'est génial. Je pourrais convertir le héros de la section en grille ici ou en grille de mise en page. Et c'est totalement du travail. J'aime l' avoir séparément. Moi pour ma santé mentale. Cela permet de trouver facilement la grille et de cliquer dessus, plutôt que d' essayer de déterminer quel parent a appliqué une bonne idée. Et il n'y a que moi. OK, donc j'ai besoin de deux colonnes, une rangée, de deux colonnes, d'une rangée. Et je vais jouer avec l'espacement, mais pour essayer de comprendre quelque chose, il se trouvera probablement quelque part entre les deux, ça saute, mais tu peux le taper comme, disons que c'est trop beaucoup et 0,25 ne suffit pas. Tu peux juste dire que je ne veux pas avoir 0,35 ans. Je voulais juste dire que c'est comme, oui, ce sont des fractions. Mais ils ne doivent pas tous être égaux à un, il suffit de faire tout ce que je vais pour combler le vide. Cela ne fait que remplir le reste. Ok, donc 0,35 semble à peu près juste. Jetons l'imagerie. Et encore une fois, avec cette image, je pourrais l'exporter depuis XD déjà découpée, cela fonctionnerait totalement. Je préfère le mettre dedans puis le couper, bordant d'une bordure circulaire. Ou réutilisez. Cette image signifie qu'elle n'a le chargement et le site Web qu'une seule fois. Cela me donne également un peu plus de flexibilité. n'y a rien de réel comme si vous n'en aviez pas besoin, vous pouvez simplement ajouter l'image déjà recadrée. OK, donc je vais faire glisser l'image. Et si vous faites glisser l' image dedans, vous devez simplement placer la balise image dans l'élément d'image. Je vais mettre mon texte alternatif ici. Je vais dire que tu vas être un mignon hérisson enroulé dans un bol. Je sais que tu vas l'être. Thé au jasmin infusé dans une tasse en verre. Je pense que j'aime ça, n'est-ce pas ? Et je vais lui faire quelle est sa taille ? Il s'agit de 175 images sur 175. Je ne veux pas que cela soit réactif, donc je ne vais pas utiliser de hauteur minimale. Ça ne va pas s' agrandir parce que je ne vais pas mettre plus de continent. Donc 12.5175, tout est déformé jusqu'à ce que je sois en forme. Ajoutons une bordure. Frontière du Brésil. Choisissez toujours un chiffre bas. Je ne sais pas pourquoi je suis avare avec les pixels. Cela ne vous coûte pas plus cher d'en mettre 1 000 et je ne sais pas pourquoi. D'accord, c'est en quelque sorte ça. L'espacement doit être réglé. Mais ce qui est cool avec la grille, qui est facilement cliquable, vous pouvez dire que je les veux toutes au centre. Au centre, d'accord. Avez-vous remarqué à quel point une grille ressemble ? Eh bien, il ne fait pas des hauts et des bas. C'est parce que le réseau s'arrête là. Tu peux voir la ligne bleue ? Le parent est plus grand, mais il ne transmet pas ses mesures à la grille qui se trouve à l' intérieur de celui-ci. Il fait ce qu'il veut. Donc, je vais aller dans la section héros, trouver la taille, m'en débarrasser en maintenant Option ou en cliquant sur Alt. Et je vais passer au réseau. Vous pouvez atteindre la taille minimale de 300. Alors Grid sait quelle est sa taille. Il sait donc qu'il peut s'aligner au centre. Ce n'est pas loin. Mettons tout en place et ensuite je vais rater l'espacement. Alors prenons ceci, ceci et ce beau T. Ce sera ma frappe, ce sera ma frappe. Je jette juste un coup d'œil qui peut en toucher un. Il faut en avoir un sur cette page, ce qui est un problème. Et je ne suis pas d'accord avec ce que j'ai dit que c'est probablement un mauvais design. OK. Mais j'aime bien, c'est cool. Et je vais utiliser ce type de frappe plus informatif, probablement plus souvent sur ce site. Maintenant, mon site est très petit, il ne fait que trois pages. Votre site va être beaucoup plus grand. Et je sais que ce sera la version générique la plus utilisable. Donc, ce que je vais faire, c'est donner un style à tous les H parce que je à tous les H parce que je sais que le blanc sur noir ne l' utilisera qu'une seule fois sur la page des héros. Je vais l'utiliser beaucoup plus. Donc ce que je finis par faire, c' est juste penser à quelque chose de caché. Je vais d' abord vous le dire, puis créer une petite classe de combo d'exception spéciale pour la rendre blanche. Je vais tout faire pour le déraper. Je vais juste le déposer ici. Je frappe bien. Et je vais dire que tu es un H1. C'est déjà la bonne police. En termes de taille. Jetons un coup d'œil. Tu vas avoir 51 ans. Aléatoire. Le designer répond aux désirs du designer. OK ? Je vais dire tous les H, vous oublierez de faire des charges, d'accord, vous n'avez pas à revenir en arrière et à dire que je veux que ce soit 51, je ne veux pas que ce soit des rampes, donc nous allons passer à 16/16 RAM. Et comme avant, il est facile d' un trait d'union et le tour sera joué. La hauteur de la ligne sera de 3,187 marines. D'accord, et ce sera la couleur de mes trois couleurs principales et de tout ce qu'il y a d'autre ? La hauteur de la ligne est assez proche. OK. La même chose va nous manquer. Et il ne se passe rien d'autre. Ce n'est pas en majuscules. Je pense donc que c'est suffisant. C'est donc mon bon générique, comme le H1 d'origine. OK, donc je vais t' utiliser maintenant ici, mais celui-ci va avoir un cours appelé ticks white. Parce que je peux aussi réutiliser quelques fois. Tu vas être blanche. 113. Travaillez avec Dan en construisant le magasin de thé complet dans la partie 2 de Webflow: Et c'est tout ce que les Blancs peuvent faire en classe. Très bien, la prochaine étape est celle-ci. Et encore une fois, je regarde autour de moi pour voir s'il est réutilisé. C'est un peu mon H2. C'est moi qui frappe deux pages sur de nombreuses pages. Encore une fois, c'est celui qui est le plus utilisable, comme je l'utilise, ils sont présents sur la page de paiement. C'est donc ma valeur par défaut, H1, H2. Ensuite, je vais y ajouter les tiques blanches parce que c'est un peu plus unique ici. Même chose. Je vais dire que tu vas être H2 et que tu vas être cette police, un médecin. En termes de taille. Regarde, tu es 434-34-3403, audacieux. Très bien. Vous 43 ans. 43 aussi ? Bon designer Dan. OK. Donc, je vais dire que vous êtes le gras et que vous avez 43 slash 16 rim, et que vous allez avoir une hauteur de ligne d'un trait d'union. Et tu es cette police, ok, cette couleur ici. C'est quoi celui-ci ? Qu'y a-t-il ici dans mes styles ? Ou il n'y est même pas ? C'est une question pour ce concepteur, car nous l'avons déjà utilisée. Peut-être que celui-ci n'a pas l'air bien. C'est le gris plus chaud. Donc celui-ci s'appelle St. Gray 700 gy. C'est difficile de les appeler 12345. Vous pouvez, c'est souvent, vous pouvez utiliser ce même style de police. Souvenez-vous, c'était un peu audacieux et léger. C'est assez courant de l' utiliser aussi pour les couleurs. D'accord, donc tu vas avoir la couleur de oh, ok, j'ai besoin de réfléchir à ce que j'ai fait ? L'autre chose à faire est de vérifier cela parce que j'ai remarqué celui-ci. Vous voyez que le code est hash 575 et que celui-ci ici a un hachage a. Vous devez aller parler au designer en lui disant : « Hé, eh bien, lequel voulez-vous ? Je vais choisir celui-ci parce que je suis le designer qui l'a créé. Je vais choisir cette date. Revenons donc à Webflow. Et je vais dire en frapper deux ou endommager le mauvais exprès pour essayer de vous montrer ce qu'il ne faut pas faire. N'oubliez donc pas que nous avions besoin de tout le H2O. Vous pointez probablement du doigt une voie car vous le faites mal, vous le faites mal. Ajoutons donc une couleur rapidement car je l'ai dans mon bloc-notes. OK. Parfait Maintenant, je vais chercher le nom. Je ne me souviens pas de ce que c'était. Revenons-en à vous. Et tu vas l'être quand tu passeras entre les deux, tu le perdras un peu. C'est mon excuse de toute façon. Je vais donc l'éditer en tant que classe globale. Je vais lui donner un nom. Je vais appuyer sur Créer à l' extrême droite, c'est là. Il a la bonne couleur. Maintenant. H deux pour tous va être médecin et il va faire 43/16 chambres. 16 chambres. Et ce ne sera qu'un trait d'union. bon, donc c'est là. Je vais l'additionner. Ça va lui casser la nuque. Nous savons que si j'ai additionné ici parce que c'est une grille où la grille va faire, elle va aller, Hé, j'ai quelque chose de nouveau, elle doit aller dans sa nouvelle boîte. Donc ce que je vais faire, c'est que je vais saisir ici, je vais passer à l'additif. blocs de div vont se trouver dans celui-ci. Le chauffage va se trouver à l'intérieur de celui-ci et exploser. C'est difficile à faire sur la page, faisons-le ici. Donc les tiques blanches vont être à l'intérieur de lui. Et puis à l'intérieur de lui. On y va. Coats, ils ont bloqué une unité pour qu'elle ne tombe pas dans une autre cellule. Et cet échauffement, je vais ajouter une classe appelée classes de réutilisation de texte. Joli C'est à, tout d'abord, mettons-les en position alignée à gauche. Passons donc au, je veux attraper l' enfant de la grille, qui est ce que l'on appelle diblock ici. Et je vais lui demander de faire ce qu'il veut. Les apparences soient au centre. Mais ce gars doit rester aligné et c'est un peu magique. Il ne lui a pas appliqué de classe. Pour ce faire, vous supposez qu' une classe sera générée parce qu'elle le fait pour beaucoup de choses. Mais le meilleur, légèrement différent, d'accord, ça ne s'applique pas vraiment à l'élément lui-même, c'est à la grille. Très bien, ajoutons notre bouton. D'accord, tu touches K, toi. Encore une fois, le bouton est comme ici. Il s'agit du bouton le plus réutilisable. Ce sera donc un autre bouton unique et j'en ferai mon bouton générique. Donc ça va juste s'appeler Button Hero, quelque chose comme ça. Toi, ok, je vais le relier à rien pour le moment. Ça me rappelle. Il y a beaucoup de choses comme, oups, est-ce que je l'ai fait ? La marque doit établir un lien vers. Et où se trouvent mes paramètres de navigation déroulante, les paramètres des liens, je vais dire d'aller sur la page de celui-ci. Avant que j'oublie. Donc, ce bouton ici va avoir un ClassName, tous les boutons ici. bouton ici va faire plusieurs choses. Il n'y aura aucun contexte. Aucune. Elle aura une topographie de toutes les autres. Il va dire Browse t. Il y aura beaucoup plus de rembourrage. Ok, alors quelle est sa taille ? Cliquez sur cette option de maintien. Vous pouvez donc voir qu'il n'est pas égal cubique alors environ 27 sur 16. C'est ce que nous allons faire. Vous avez besoin d'un espacement pour maintenir la touche Alt ou Option 27 enfoncée, notez la mauvaise couche, celle 16 en haut. 16.27. D'accord ? Très bien, taille. Ajoutons une bordure autour de la bordure extérieure de quoi ? Voici un coup de deux. Vous n'avez pas besoin d'un rayon, vous avez besoin d'une largeur de deux et vous devez être blanc. Basculez, assurez-vous qu'il y a 100 % de basculement, de basculement, de basculement, de basculement. C'est audacieux. Ce n'est pas audacieux. Ce bouton, héros, va avoir une typographie. Tu vas faire preuve d'audace. La taille de police est 16. Ma valeur par défaut est 16, ce qui correspond à une jante. Maintenant, nous cuisinons. Très bien, ajoutons donc quelques textes et établissons le bon espacement. Tellement beau T à ta porte. Par défaut, l'espacement semble étrange, comme si les espaces H avaient un certain espacement. Comme ce qui crée tout cet espace là-dedans. Et je vais utiliser l'option X-Ray, peux utiliser le raccourci à partir de maintenant. OK, donc mon cas, c'est Command Shift X qui sera Control Shift X. C'est juste pratique de passer en revue et de dire, le H1 a un morceau en haut et un morceau de marge en bas. OK. Il en va de même pour le H2. Il y en a une partie. Ce que j'aime faire, c'est m'en débarrasser très tôt dans un travail, d'accord ? Et juste pour dire que vous avez tous zéro, vous pouvez le mettre, vous ne pouvez pas le réinitialiser. Tu dois le remplacer parce que par défaut c'est 20 x 10. Vous devez donc saisir 00. Pareil pour celui-ci. Vous allez être tous les h deux seront nuls. En euros. Allez. Je préfère juste avoir ça, ne rien avoir et modifier moi-même. Alors, comment allons-nous espacer cela ? Vous pouvez soit ajouter du rembourrage au bas de celui-ci, soit je le ferai. Et au lieu de créer un coût spécifiquement pour celui-ci, je vais créer quelques classes de marge plus globales et je pourrais réutiliser k. Donc dans la marge inférieure. Et quel est l' écart n'y a-t-il pas ? C'est un peu délicat avec cette police car vous pouvez voir qu'elle ressemble la version majuscule de celle-ci. Tu vois que c'est comme si la glace n'était même pas intéressée, comme si la calotte était trop haute dessus. C'est une police bizarre. OK, donc mon espacement va le déplacer un peu bizarrement sur celui-ci, mais prenons par exemple un rectangle. Parfois, c'est comme prendre un rectangle pour faire autant de choses. Et je regarde par ici. La hauteur est donc de 14. Et en regardant ma petite liste, 16 est probablement la plus proche. Je vais créer à la fois les 8,16 pixels pour le bas. Et puis je peux décider, parce que vous pouvez y voir même si les deux sont à zéro, les deux de tailles différentes l'un de l'autre. Parce que celui-ci laisse de la place aux descentes. Quand je dis que c'est décent, c'est comme ça, tu vois que c'est en bas ? C'est donc vraiment très proche, mais la police est un peu plus haute. Donc, il y a comme ça, juste une chance que celui-ci n'ait pas de descendeur. D'accord, notons que mon nom, Daniel Walter Scott, n' a pas de descendeur, ce qui facilite les tours sur une ligne. Fait sur la largeur. Alors maintenant, je vais ajouter une classe div et je vais vous dire margin-bottom et je vais faire de l'excès, de l'excès. Maintenant, pour moi, l'un de mes gros problèmes, c'est y aller et de le faire. Remarquez qu'il a disparu. Vous devez appuyer sur Entrée, la marge en bas x existe. Appuyez sur Entrée, et celui-ci sera très petit, il y en aura huit. OK ? Maintenant, je vais aller le retirer. C'est toujours là, mais la marge est faible. Et je vais faire quelque chose. Vous devriez passer en revue et faire le reste non plus. Vous allez donc avoir la marge la plus faible. Nous aurons probablement juste envie d'être petits. Et celui-ci sera probablement le plus grand. Marge inférieure, petite. Je fabrique mon petit, comment l' ai-je appelé ? Oui. C'est assez proche. Je ne veux pas vraiment que ce soit un tout petit peu différent, encore une fois, parce que le client pourrait revenir et dire, utilisons-nous ou non beau, nous utilisons Beautiful. OK, et ensuite je vais devoir à nouveau modifier l'espacement. Le moment. Respirez profondément et laissez-le comme ça. Jetons un coup d'œil. Et si jamais tu obtiens un dessin pour moi, il y aura probablement des rectangles partout parce que j'ai oublié de les enlever. Quelqu'un d'autre fait ça ? Utilisez les rectangles comme outil d'espacement. C'est bon, tout va bien. Comment cela doit-il réellement se passer ? Il faut que ce soit trois pour trois, j'ai juste deviné 300. Regardons donc la section des héros. En fait. Non, c'est la grille qui donne la hauteur. Tu peux y être. Très bien, allons-y , d'accord ? Ceci, parce que ce n'est pas un endroit étrange. Comment mettre les choses dans des endroits étranges ? Tu t'en souviens ? Tu l'as eu. Nous allons mettre une position dont je ne me souviens pas ou c'est un écho de la position absolue de mon cerveau. C'est un bon, euh, où va-t-il aller ? Peu importe, mais je vais faire attention à endroit où je le mets parce que je veux qu'il fasse référence. Si je le mets ici et que je le déplace sur mon mobile, quand je déplace et mélange ces objets, il finira au mauvais endroit. Donc je veux un peu dire gros, il faut qu'il se trouve au-dessus de ça. C'est son objectif au lieu cela et pour se déplacer, je vais le mettre juste au-dessus, sorte que nous soyons juste en dessous de cela dans l'ordre d'empilement ici afin que, où que ce soit, où les emménagements chez ce type les accompagneront . C'est logique. Encore une fois, image, je vais utiliser mes actifs. Je vais le traîner en deux sous le mien, qui est au-dessus des hérétiques. Et je vais me demander si c'est décoratif ou si c'est quelque chose d'intéressant ? Je pense que c'est peut-être quelque chose comme si ce n'était pas abstrait, c'était quelque chose de spécifique. Donc on va aller à la feuille de thé. Le graphique de la feuille, ou l' illustration de la feuille de thé, peut être NF1, comme si c'était un peu décoratif, mais cela a aidé à décrire la page. Oui, d'accord, donc toi, mon ami, vas avoir un cours appelé image, image froide. Et je vais dire que la position est absolue. N'oubliez pas que chaque fois que quelque chose est absolu, les souris mères font face à ce que l'on appelle diblock doit être réglé sur relatif en difficulté avec cela, on lui donne un diblock classique. Je vais beaucoup utiliser le bloc. Je vais donc l'appeler une division, Hero Wrap Up. D'accord, et postulez par rapport à eux. Je pourrais la laisser partir si je l'utilise parce que proches ne vont pas faire grand-chose à tout un tas de balises div. Je le suis, je le réutilise et je l'appelle. Comment s'appelait-il ? Débloquer. Hé, je peux le renommer plus tard. Tu vas être en relation avec tes parents, accord ? Je vais dire que tu l'es. Vous pouvez cliquer dessus pour voir ce que cela va faire. Je peux t'emmener là où tu dois être. Voyez-vous qu'il rebondit à l'intérieur du parent ? OK. Ce que je vais faire, c'est juste les jouer à tous. OK. Et en fait, je vais juste y aller. Tu leur as dit de suivre mes ordres. Un peu plus. D'accord, j'aime bien. OK, donc la prochaine chose à faire est je vais le faire, je vais suivre cet espacement. N'oubliez pas que nous pouvons accéder au réseau. C'est plutôt bon, en fait. Comme si on ne pouvait pas aller sur le réseau et ouvrir un peu. Je peux aller le mesurer parce que vous pouvez voir l'image ici ? Si je le mesure d'ici à ici, je peux le taper ici. Il suffit donc de le regarder dire à n'importe qui. C'est assez bien pour moi. Je sais que c'est censé être un peu plus haut. On peut juste faire fonctionner ça pendant longtemps. Je vais probablement le faire. Très bien, maintenant, voyons à quel point ça se passe mal sur mobile. Il faut croiser les doigts et les orteils pour voir si tout s'écroule. Très bien, 234. Ok, donc ce que je vais faire, je vais le faire ici, il suffit de pousser ça par-dessus la croix. C'est donc une solution facile. Je peux vous dire sur tablette que je vais avoir une taille différente. Ils sont terminés. Suffisamment bien Celui-ci, ici, paysage mobile. Oh, ma faute. Je pourrais juste réduire la taille de l'image. Ok, donc sur toi, tu vas être enfoncée Shift down, la flèche 150 semble bien. Et quand vous atteignez cette taille, vous devez lui donner comme si ce n'était pas le aucun téléphone portable n'a exactement la taille. Il faut lui donner un petit fléau pour voir ce qui va se passer et ça tombe en panne. Et toi, très mal. Ok, donc je vais juste y jeter un œil. Mon design en fait, mon design, c'est très différent. Voyez-vous que l'image s'en va et qu'elle fait un peu plus de hauteur. Donc, ce que je vais faire, c'est éteindre l'image. OK. Donc, vous l'appelez simplement « image occupée ». Ce n'est pas un bon nom pour lui parce que je ne veux pas faire si toutes les images, je veux un héros d'image. Et vous remarquerez que si vous les stylisez ici, il sera le Simon Oral. C'est un héros imagé, un héros de l'image, un héros de l'image. Ok, si je le laissais comme image, chaque fois que je retouche une autre image, tu suivrais le dimensionnement et toutes sortes de choses. Je vais dire que vous avez une mise en page d'aucun Qu, bizarre. OK, donc si vous poussez sur le côté, la grille fait un certain nombre de choses. Qu'est-ce qu'il fait ? C'est un peu collé à ça, c'est bon. Parce que je l'ai effacée, c'est passer à la suivante, d' accord, en laissant cet espace par ici. Mais en fait, c' est génial d'avoir deux colonnes ici, mais pas ici sur mobile. Donc je vais dire qu' il ne fera qu'une chronique. Et je veux que ce soit toute la friction et j'aimerais qu'elle soit centrée. Le truc, c'est que si c' est le cas, dit qu'il est centré, pourquoi n'est-il pas centré ? Je sais pourquoi Savez-vous pourquoi tout est aligné à gauche ? C'est parce que le résumé dit être centré, d'accord, mais ce qui se trouve à l'intérieur de cet emballage fait quelque chose de différent. Donc ce que je vais dire, c' est que DEA Div est un rappeur, je vais te faire fléchir parce que les fléchisseurs sont géniaux. Et je vais aller à la verticale et je dirais que vous êtes tous au centre. Et je pense que l'écart est bon. Seule la taille de la police devra être plus petite. Fin. D'où est-ce que ça vient ? Le réseau ? Grille Il y a les bords. Pendant qu'il garde ce type. Pourquoi a-t-il un peu de rembourrage sur ce côté ? Je ne peux pas le voir là-bas. Nous allons passer en mode El Super X-Ray, en mode Super X-Ray, en mode X-Ray. Détruire toutes les clés. Qu'est-ce qui le retient là-bas ? C'est mon ouverture. D'accord, attendez, ils vont trouver le moyen de le faire sortir. Lorsque vous avez cliqué, tout ne savait pas comment c'était, ce qui n'allait pas. Et j'ai un peu gravi les échelons. Je pense que c'est le plus coupable. Et je ferme ça un peu, je regarde par ici et je vais au MBA, bleu, bleu, bleu, et je vérifie toutes ces choses et ce que ça fait là-dedans. Eh bien, il fait comme si j'étais là, comme moi, je l'allume et évidemment c'est suffisant. Un petit peu de ça. J'ai découvert qu'il n'y avait rien de mal à le mettre sur le réseau, je l'ai regardé et je suis allé ici et je regardais juste un avis indiquant que l'enfant de la grille, donc ce type ici est vraiment qu'il veut faire avec eux. Voyez-vous qu'il est aligné à gauche et que l'espace ne vient que parce qu'il est aligné à gauche. Et si c'était un k plus petit, tout cela serait encore plus petit. OK. Alors, est-ce que cela a du sens ? Il vient de laisser aligné cette mallette pour enfant. Je vais dire que tu es petite-fille. Je vais être centré là-dedans. Qui l'a découvert ? L'autre chose que je veux faire, c'est qu'il doit être en plein écran. Quelqu'un se souvient de la mesure, par exemple pour le faire en plein écran ? Si ce n'est pas le cas, je vais créer la grille parce que le moment, la hauteur de la grille est juste une hauteur minimale. OK, donc nous sommes en train d'avoir une taille de grille d'une hauteur minimale de 343. Ce que je vais dire, ce n'est pas cela, je vais dire que la hauteur est la hauteur verticale. Je vais donc dire que c'est environ 90 % de la hauteur verticale, la hauteur de la fenêtre d'affichage. C'est celle que je veux. Et il fait quelque chose que nous aimerions. J'en ai fait 90 parce que je sais que j'ai une partie de la tour, devinez 90, mais ça n'a pas l'air très bien ici dans votre navigateur. Alors, allez tester sur votre téléphone. C'est le moyen idéal, ou vous pouvez faire semblant en le réduisant simplement. OK. Je vais l'acheter de la même taille. OK. Oui. OK. Je peux vivre avec ça. Vous pouvez donc au moins un design ici, mais aussi vous assurer que vous le testez sur votre téléphone, envoyer, y jeter un œil. Je vais le faire pendant une seconde parce que je dois faire deux choses pour y parvenir. Tout d'abord, tu veux qu'il se divise en deux lignes, comme oui. Je ne veux donc pas réduire la taille de la police. Je veux essayer de le casser. Donc, texte blanc ici. Je n'ai pas de classe que je peux attaquer, ce qui n'est pas bon. Je vais devoir lui donner un cours probablement quelque chose. Donc, je peux rétrécir ou puis-je rétrécir la boîte entière ? Je peux faire ce div ici, un rappeur, je peux le réduire parce qu'il a un cours. Je n'aime tout simplement pas ajouter des cours à tout. Je veux essayer d'être aussi minimaliste que possible. Mais celui-ci alimente comme je pourrais dire que vous avez une largeur minimale de quelque chose, vous pouvez avoir une largeur minimale de celui-ci. Il suffit d'en mettre 300 et de voir comment ça se passe. Désolé, la largeur maximale est ce que je veux. Vous pouvez avoir sur cet appareil ici, une largeur maximale de 300 pixels. Plus petit. Se divise maintenant en deux lignes. Et maintenant, il est aligné à gauche, ce qui est un peu étrange avant qu'il ne s' étende automatiquement. C'était donc toujours au centre parce que j'ai dit à la boîte d'être au centre. Maintenant que nous lui donnons une largeur physique, il franchit cette ligne et nous ne lui avons jamais dit qu'il était centré. Et on dirait qu'il a été envoyé à, cela n'a aucun sens, alors dois-je créer une classe globale ? Il s'agit d'un texte centré ou vous devrez peut-être simplement l'emballer dans une classe. Donc, ce que je vais faire, c'est me débarrasser de cette largeur maximale ici. Et je vais devoir céder et dire que vous avez une autre classe de combo appelée Text Hera. Hera s'embrouille déjà. Donc celui-ci aura ma largeur maximale de, je ne me souviens plus de ce que j'ai mis dedans, mais ce n'est pas assez petit. Maintenez Shift enfoncé et posez-le. Encore une fois, c'est de la largeur minimale, Dan, de la largeur maximale, trop petite. Mais il sera aussi la topographie du Père Noël. D'accord, maintenant je peux utiliser mes hauts et mes bas, c'est juste pour voir quelque chose comme ça. Et encore une fois, je vais voir si cela fonctionne. Et des effets sonores d'Adrian. Ici aussi, cela doit être un peu remanié. Je vais donc vous dire de laisser une feuille sur celui-ci. La position est un peu supérieure à 11234 et elle fonctionne un peu. Je dois me débarrasser de l' espacement en haut. À quoi l'ai-je ajouté ? Je l'ai ajouté pour compter. N'oubliez pas que je l'ai ajouté au contenant, niez-le ici. Je veux l'éteindre. Quand ce sera fait ici, je vais le mettre à zéro. On y va. 1234. OK, encore une fois, je vais essayer mon téléphone pour m' assurer que cela fonctionne en bas. OK, assurez-vous qu'il est aligné. Très bien, ça va être dedans. C'est tout pour la boîte à héros. Je n'y pense rien d'autre. Très bien, passons à ces gars-là. Ça va prendre bien plus de temps que je ne le pensais. OK, donc je vais mettre ce morceau en bas ici. Et ce que je vais faire, c'est créer une section pour celles-ci, et je vais avoir une couleur de fond pour cela. Excellent, allons-y. Revenons donc à celui-ci. Et ajoutons qu'une section peut se trouver à l'intérieur de mon conteneur, glisse-la dans, section B, section produit. Et ça va être à l'intérieur de tout ça. Nous comprenons, d'accord, que cela va utiliser mon collègue ici présent. Tout ira bien, et vous serez l'arrière-plan de cette édition qui sera t grey 300. OK. Et qu'avons-nous d'autre ? Mettons ces gars au cas où nous aurions besoin d'une liste. OK, donc je n' ai pas encore mes produits. Donc, mes produits, je vais importer des produits. Oui. Je les ai retrouvées lors de la dernière. Nous sommes un peu comme le regarder. Donc, mes produits il faut une petite minute à ces gars pour les charger en fonction de la taille de l'esprit de votre cluster. Pas très longtemps Qu, donc j'ai reçu mes produits. Ajoutons la liste des produits. Donc je vais le fermer ici et ajouter la liste des collections, d'accord ? Et je vais dire que je vais le connecter au produit pour le faire passer à trois. Je vais probablement le changer pour le faire passer à un réseau. Je le fais très souvent. K au lieu de toi, remets-le à ce genre de modèle extensible. OK ? Et puis vous dites : «  En fait, mon ami, vous êtes maintenant quadrillé. OK ? Et vous verrez que cette liste de collections n'est pas contente. Ils sont tous coincés dedans. Je pense que j'ai ajouté les grilles dans le mauvais emballage. Je dois donc l'ajouter à la liste. Donc, annulons cela. Cette liste de collection sera donc une grille plus logique. Maintenant, nous allons passer à celles-ci, d'accord ? Et vous allez avoir trois colonnes et une rangée. Ajoutons quelques éléments. Ajoutez notre image. Ici. Ajoutons une image. L'image ne peut pas être ajoutée à la collection. Cliquez d' abord à l'intérieur de celui-ci, puis modifiez-le. Nous allons nous connecter au champ d'image principal. Excellente. Je vais ajouter une audience. Ce sera mon chauffage au prix. Je vais dire, Oh, nous allons le connecter dessus. Assurez-vous de le connecter au produit du nom de base ou du concepteur de problèmes, concevez la petite version. Je vais devoir ajuster cela parce que nous sommes beaucoup plus longs. Ils n'ont pas les charges. Très bien, mettons OWL, juste une image, désolé, un bloc de texte, ou connectons-le à L. Prix, prix, prix. Excellente. Et ce que vous pouvez faire, c'est simplement taper ensuite, ce qui est lié à cela. En fait, je veux ce morceau ensuite par cent grammes. Alors je vais faire quoi ? En fait ? Oui, c'est ce que je vais faire. Donc Textblock pour le moment. Ok, je vais l'appeler, ça prend le prix. Je vais le mettre dans la file. OK. Parce que sinon c'est un quartier, non ? Parce qu'il s'appelle Textblock. Il veut occuper toute la ligne. Donc si je crée une autre personne, une autre personne, une autre chose prend du blocage. Vous remarquerez qu'il veut être en dessous, d'accord ? Et celui-ci va coûter cent grammes. OK ? Donc tu peux dire à ce gars, prend le prix, tu feras la queue. Cette personne veut toujours être un bloc. Je vais donc appeler ça un texto. Et je ne pouvais pas prendre le prix aussi bien parce qu'il fait la même chose serait inline-block. J'en ai besoin. Est-ce qu'il me reste une marge ? Je ne le sais pas encore. Donc, marge gauche x s, pas de caresses. Ça va être, tu vas avoir huit ans de plus. Et il vous restera une marge, très petite. On y va. La prochaine, mais une partie du texte , est la suivante. Donc on y va, tu y mets un autre bloc de texte. C'est en fait un paragraphe maintenant, non ? J'ai l'impression que cela peut maintenant être considéré comme un paragraphe parce qu'il va y avoir une inflammation. Donc, je ne vais pas mettre de textes, je vais mettre graphe de paragraphes lié au champ de paragraphe. OK ? Maintenant, le client ne m'a pas donné d'option récapitulative. OK, donc ce que je vais faire, c'est y retourner et ajouter une option de résumé. Alors prenez un peu de texte. Disons qu'il doit y avoir trois lignes parce que c'est exactement pour cela que nous avons de la place ou déterminons quel caractère minimum est mélangé. Je vais juste en utiliser autant. OK, je vais entrer dans le produit et dire produit. Vous avez besoin d'un nouveau champ, non pas dans le produit lui-même, mais dans le produit mondial. Je vais dire que vous avez besoin d'un nouveau champ et qu'il apparaît un peu en bas, ce qui est étrange. Vous allez avoir un nouveau champ de tic-tac de voie. Ce sera multiligne lorsqu'ils le mettront dedans et l'étiquette sera résumée. OK ? Et nous allons avoir un minimum, minimum de caractères. Je ne sais pas encore ce que c'est. OK, il va falloir que je joue avec le goût, mais nous devons aussi retourner voir le client et le faire participer au processus, voir si nous pouvons obtenir un résumé. Quelqu'un va devoir le faire. C'est donc dire la collection. Je vais les examiner maintenant et leur dire : où est mon résumé ? Pâte ? Save doit l'être au moins, oups. En fait, cela va accélérer le changement. OK, donc je l'ai changé du minimum au maximum. Maintenant, nous devrions être en mesure d'économiser. Très bien, donc ça va me frayer un chemin à travers ceux-ci et y mettre un espace réservé qui semble vaguement différent. OK, maintenant je peux revenir en arrière et dire que vous remarquerez que vous êtes connecté au champ récapitulatif. Résumé meilleur. D'accord, de quoi d'autre avons-nous besoin ? Nous avons besoin de notre bouton, d'accord, et ajoutons un bouton. Tu te souviens que celui-ci est légèrement différent. Tu as le violet. Ce n'est que lorsque vous l'avez transformé en CMS ou en site de commerce électronique que vous pouvez simplement en mettre un pour, par exemple, choisir le produit actuel. Il sait quelle boîte ne l'est pas. Il sait que c'est ce thé noir sucré à la cannelle. Ça va y aller. 114. Travaillez avec Dan en construisant le magasin de thé complet dans la partie 3 de Webflow: Très bien, tout y est. Je dois le styliser maintenant. Faisons donc tout cela en résumant le tout dans un div. Je pourrais utiliser l'objet de collection. Je ne sais pas exactement à quoi sert l'objet de collection. Elle possède probablement des pouvoirs spéciaux. Je vais juste y mettre une balise div et tout y jeter. Il suffit de tout faire glisser vers la droite. Laisse-moi partir. Je peux donc dire diblock pour vous. Fais un certain nombre de choses. Faisons un peu d'espacement. Je vais dire la liste des collections. En fait, toute la section va avoir un peu de rembourrage , je vais faire de la marge en 24 bits. Je vais vérifier ce qu'a fait le designer. Appuyez sur Théorie des options. Bed Designer 32 sera à. Nous allons donc en utiliser 32 parce que c'est suffisamment proche de la liste des sections de production pour avoir une marge sur chacune d'elles. Maintenez la touche 1 enfoncée, maintenez enfoncée, passez à 32. Et je vais m' assurer que la grille, qui a été appliquée à la liste de collection, contiendra 32 également, si elle entre dans la grille. Et ça va être 32, 32, même si nous n'avons pas de rangées. Mettons-le là-dedans. D'accord, donc c'est le type d'espacement trié. Ajoutons un fond blanc. Je le veux dans l'ensemble, ou sur un fond blanc en bas, mais parce qu'il y a une ombre. Donc ça va devenir compliqué. Un autre rôle dans le diblock, excellent, pas désordonné. Couleur de fond, blanc. Ajoutons une ombre tombante. Ce que je vais faire, c'est ajouter une ombre tombante globale pouvoir l'utiliser sur d'autres choses. Je vais donc ajouter un bloc div. Je vais appeler celui-ci. Appelez ça de l'ombre parce que j'aurai une ombre technologique, probablement que je ne vais pas faire des bourgeons hardiment. Tu y vas. Alors ajoutez-y. Vous pouvez avoir des effets de box-shadow. Et voyons ce que nous avons ici. Donc celui-ci a une ombre de 0,36, soit 16 %. Je ne vais pas en retirer la moitié. Donc, directement par trois , ici dans Webflow, ils ont ce cadran. Ils n'avaient pas de coordonnées x et y. Ainsi, 1AD est droit de haut en bas, distance parfaite. Ça va faire trois pixels. OK, c'est pour ça. Et le bleu était trois à la maison en se souvenant de tout ça, hé, la couleur était 16. Génie. Cela n'arrive jamais. OK, donc c'est mon ombre et appliquez-la pour voir si elle a vraiment la même apparence. Donc, il y a un diblock qui va avoir de l'ombre. À l'ombre. Ça a l'air plutôt bien quand je pense. C'est à peu près pareil parce que c'est le même code. Je suis sûr que tu te demandes. Je ne suis pas sûr que nous nous attendions à avoir fait mon oh, d'accord. Tu l'as remarqué ? Je ne l'ai pas remarqué. Donc maintenant, c'est comme si leur couleur foncée avait disparu, c'est parce que j'ai mis du rembourrage, n'ai-je rien fait ? J'ai mis une marge ou un rembourrage. Cet enveloppement autour de l'extérieur a donc les deux mais sa marge, la marge s'éloigne de l' extérieur et les caresses poussent de l'intérieur vers le milieu. C'est donc ce que je veux. Je vais tout effacer. Je vais les fabriquer. Comment changerait-on ? OK, je vais être en version bêta 32. OK, comment vais-je faire le rembourrage intérieur ? Je peux faire du rembourrage parce que l'image comme sur celui-ci, comme sur les autres médicaments. Donc parce que j'ai besoin que l' ombre se trouve à l'extérieur de l'image, mais si j'y ajoute du rembourrage, elle finira par la casser, n'est-ce pas ? Si j'obtiens ce diblock et que j'y ajoute du rembourrage, ça marchera, mais ça va pousser l'image dedans. Et je pourrais le faire parce que c'est facile. Et j'espère que le designer ne le remarquera pas. Il va remarquer un autre gars, beau, mais il remarquera des choses comme ça. Donc diblock, je vais avoir besoin d' un autre div à l'intérieur pour terminer tout ça. Okey-Dokey. Passons au bloc additif. Là-bas. Tu peux y entrer. Et puis tu traverses, tu traverses. Quand tu traverses. Et puis diblock, je vais y ajouter une classe. Donc, si je le crée maintenant, il va créer une classe globale. Je vais imaginer ce que je veux que ce soit ? Environ 21 ans. Je vais donc utiliser mon jumeau T4 pour le maintenir. Tu dois vérifier. Donc je vais aller diblock marginal et celui-ci sera probablement laissé à tester. Imaginez toute la fumée. En fait, je fais du rembourrage ou marge, peu importe dans ce cas, ce n'est pas le cas. Je vais faire du rembourrage ou parce que je suis plus susceptible de tout réutiliser. OK, et je vais faire en sorte que ce ne soit pas négatif et ne fasse pas de marge. Maintenez Shift et je peux le regarder. Je n'ai pas besoin de deviner. J'essaie de l'obtenir à 16 ans. C'est délicat. Je pense que c'est mieux que 22 ou 24. Je vais juste manquer de place. Note : 24 est plus agréable. 24 est mon médium, pas petit. Donc tu vas être moyen. Très bien, donc on y arrive, on y arrive, on y arrive. Je vais devoir ajouter une classe combinée à cela, c'est-à-dire accéder à la liste de textes. Je vais l'appeler, la liste des produits devra en fait être plus petite. La typographie utilisait ma flèche vers le bas jusqu'à ce que je les obtienne. Je suis contente que les vertèbres forment deux lignes, mais elles ne peuvent pas se briser en trois. Maintenant, parcourez ma base de données et vérifiez quel est le nom le plus long. Ensuite, il se peut que je doive réduire ce qu'ils peuvent saisir dans la base de données moins dans ma liste de produits, car cela ne peut pas être trop long. Ça va ruiner mon site web. Très bien, et celui-ci , je dirais que vous avez besoin d'une marge inférieure. Qu'est-ce que j'ai ? Pouvez-vous commencer à voir à quel point cela devient utile maintenant ? Parce que tu es du genre, Oh oui, je peux ajouter celui-là maintenant. Je l'ai soulevée. Margin-bottom semble stupide et vous risquez de ne pas voler comme ça. Vous préférerez peut-être tout personnaliser avec son propre style. C'est totalement cool. Très bien, donnons à ces gars un bloc de hauteur minimale. Pourquoi pas la taille, la hauteur minimale, la hauteur et la hauteur. Et je veux que le bouton soit en bas. Qui se souvient comment faire ça ? Tout cela est connu. Et parfois, je me dis que je veux qu'avoir la taille minimale ou pas, on se perd gagné si on y va, la taille minimale sera trop élevée. Flèche descendante décalée C'est probablement suffisant. Plus nous devrons vérifier les différentes lignes pour savoir combien de lignes il s'agit pour voir jusqu'où cela pousse le bouton vers le bas. Alors, comment puis-je placer le bouton en bas ? Tu sais, tague-moi. Flex, Flex devient fou. Verticale. Prends celui du bas et dis que tu l'es, prends un cours. Ce n'est pas le cas. Je veux une classe de boutons dessus, une petite classe de boutons dessus d'abord, puis la faire pousser vers le haut. J'ai une autre classe, donc ignorez de la pousser vers le bas, mais nous devrions faire preuve de flexion. En fait, maintenant, nous pouvons le faire parce qu'il n'a pas besoin de cours, est-ce que ça fait des enfants ? Jetons un coup d'œil. Xd doit être de premier ordre de marge. C'est un cours. Donc, ce que je vais faire, c'est le supprimer parce que je veux d'abord personnaliser le bouton. Regarde. Le coiffer là-bas. Oui, allons-y. Je vais y jeter un petit coup d'œil. Tu le tiens à 14, 44 sur 44. OK. Donc, mon ami, tu vas devenir un bouton que je ne vais pas lui appliquer. Disons que j'avais deux Flexbox du parent, juste pour que je puisse personnaliser le bouton tout seul. Je vais l'utiliser dans toutes sortes d'endroits. Button, mon ami, je vais enregistrer le bouton. Si vous avez des cours qui lui sont appliqués, il n'en a pas. Donc je prends juste le bleu. Il n'y en a pas. Nous allons donc passer à Spacing. C'était quoi ? Je ne me souviens pas de 44. Je veux dire 44. Nous pouvons vérifier en une seconde quel e4 et maintenir votre touche Option 44 enfoncée. Et puis quelque chose de 14. 14. Parfois, maintenir ma touche Option enfoncée ne fonctionne pas. Je vais le toucher deux fois. Vous savez pourquoi ? 44 ? Ce sont les boutons qui vont être appelés. Je vais dire que ça va te sauver. Ça va être égal. Et je vais utiliser des boutons pour avoir une couleur de fond de mes coins arrondis sur celui-ci. Aux angles de 44,4 il y a quatre. Joli. D'accord, donc c'est bien. Il y a une ombre tombante dessus. Donc je réutilise en quelque sorte cette ombre. Manière étrange. Où suis-je ? laisser là ? Je l'ai fait, je l'ai fait. Oups. Ombre à ombre sur le bouton. Très bien, maintenant nous allons le faire coller au fond. hauteurs estivales ne sont probablement pas encore suffisantes. Donc, la hauteur minimale pour ce P un pad. Oh, tu as raison. OK. Donc je veux, je ne veux pas styliser ça. Donc je vais me souvenir de PA, PA, Mid et supprimer ce cours. Je vais, je vais supprimer cette clause parce que je ne veux pas la mettre en forme. Je souhaite ajouter une classe à ce déblocage. Ce sera div, list, product, list, name en bas de la page grise. OK ? Et il aura une hauteur minimale de 350. Bien trop. Maintenez les touches Shift, ma flèche vers le bas, et obtenez-la pour qu'elle soit assez grande pour qu'elles aient toutes la même hauteur, en fait. Pourquoi ce type est-il un peu plus petit ? Toujours l'image. Ça n'a rien à voir avec ça. Et vas-y, je me suis dit qu'on n'avait peut-être même pas besoin d'une hauteur minimale. Je pensais que c'était plus court parce que ça ne le poussait pas assez. C'est l'image. Voyez-vous, il se trouve que j'ai des images un peu plus courtes. Ajoutons notre PA à cela. Je vais donc trouver un assistant personnel qui est en attente de tout. Et je vais faire en sorte que le bouton reste en bas. Augmentons donc la hauteur pour que nous puissions en quelque sorte voir ce que nous faisons. Retourne vers toi et cache-le plus haut. Grand, pour l'amour de toute évidence. Et maintenant, ce type peut être parent. Merci, ça ne l'est pas. Donc, son parent de cette balise div, tu dois t' assurer que nous revenons à celle que je ne veux pas continuer à ajouter du flex à cette PA pour tout ajouter parce que ce n'est pas un très bon cas d'utilisation. Et je veux que ce soit là-dessus, et je veux que tu sois à la verticale, parfaite. Et je veux celui-ci ici aussi. Je vais faire celui-ci. Est-ce important que vous démarriez celui-ci ou celui-ci ? Je veux la hauteur de ce bouton ici. Tout d'abord, en fait, je veux que ce soit par petits mouvements, vous pouvez simplement l'aligner vers la gauche. C'est ce que j'ai fait ici ? Maintenant, je l'ai relié à droite. Maintenant, je coiffe Divs Shadow. Je vais avoir besoin d'une classe de boutons spéciale pour cela. Je vais m'en débarrasser. Je vais appeler celui-ci a une classe de boutons spéciale qui sera une liste de produits de boutons. Un peu plus précis et vous serez à gauche et vous aurez une marge d'ordre supérieure collée vers le bas. Joli. Il y a eu beaucoup de travail pour cela et je ne veux pas que cela reste à gauche. Je veux que ça se passe par là. Et maintenant, ces images, disons que donnent un aperçu de ce que nous avons ici. Nous allons donc simplement copier ce dessin. C'est assez mince ici. Je vais y aller, tu auras une taille de 123. OK, donc cette image de la boîte ici va avoir une classe d'image spéciale qui aurait eu un héros, une feuille de thé. Il y aura une liste de produits sous forme d'images. Et il va être le comble de tout ça. La largeur peut être de 100 %, donc elle remplit ce qu'elle est. Et je vais faire un choix de couleur. Maintenant, il y a au moins la même hauteur. En fait, toujours pas. Pourtant, la hauteur minimale n'est pas tout à fait suffisante pour celle-ci. Tu peux voir juste un tout petit peu ? Donc je vais dire que la taille minimale de ce type sera juste un de plus. Un couple. D'accord, ça prend un prix. Cela l'a perdu. Donc je ne sais pas quand il a perdu son oh, regardez ça. Parce que j'ai fait fléchir le truc. Il ne bloquera plus en ligne parce que c'est un enfant. Je peux juste le faire basculer vers la gauche ? est possible, mais ce type fait de même. Il faut que je revienne vers toi. Des flexions, en quelque sorte les poussant à leur propre niveau. Il se peut que je doive les mettre dans une balise div. C'est probablement la solution la plus simple en ce moment. Si vous pouvez trouver une meilleure solution, indiquez-moi le moment et la meilleure façon de le faire. Parce que cela pourrait être bon marché. Ça peut avoir un goût. La classe va être audacieuse, audacieuse, audacieuse. Très bien, pour y arriver, vérifions-le maintenant sur mobile. Tout le monde croise les doigts sur les miens. Donc je ne le ferai probablement pas. OK. Je vais devoir augmenter à nouveau la hauteur minimale. Donc, en fait, je vais juste l'éteindre. Nous allons récupérer la grille de bâillon. C'est l'enfant de la grille, la grille elle-même sera : puis-je voir mienne revenir mieux et puis-je vraiment la traîner vers l'extérieur ? Et je vais vous dire que sur ce point, je vais être juste deux par deux. Débarrasse-toi d'un. OK, je vais finir par en avoir d'autres, peut-être sur la page d'accueil et s' occupera du filtrage plus tard. Allons chercher une échelle. Travaille juste sur une chose à la fois, Dan. Tu as l'air en forme. Et mobile. C'est un peu trop serré. Alors n'oubliez pas que ça va ressembler davantage à ça. Donc ça va probablement ressembler davantage à ça. Tu dois encore faire défiler la page vers le bas. Alors tu peux y aller. La collection vous rapporte, et vous allez être deux par là. OK. Joli. Ce sera une bonne chose. Encore une fois, j'ai les tests sur mon téléphone, mais vous ne pouvez pas me voir sur mon téléphone, donc ce n'est pas très excitant. Je vais juste y aller, c'est bien pour le moment. C'est bon pour le moment. Très bien. Ensuite, ma page d'accueil est terminée, probablement pas. Regardez-vous contre vous. Ce 100 %, 100 %. L'un d'entre eux y a probablement mis de la hauteur pour que tout soit aligné. Mais je suppose que je ne veux pas trop m'aventurer dans les mauvaises herbes. Je veux que cette vidéo soit conservée, je vais résumer les choses à la fin. Je pense donc que je suis heureuse. C'est suffisant pour la page d'accueil. Passons à la page suivante. Tu es toujours avec moi ? Tu es toujours réveillée, Becky ? Je suis réveillé. Alors faisons-le avec un peu de chance. Oui, nous avons quelques éléments pour commencer à le construire. Passons donc à la page deux. Donc, ce sera la liste des produits Owl et ce sera une page de produits. Nous ne nous occupons donc pas encore du modèle. Qu'est-ce qui va créer une autre page ? Et allons-y. Vous alliez dire que celui-ci sera une liste de produits, un produit, un produit ou des fichiers de navigation de produits. Ça va bien se passer. Je dois saisir mon méta-titre et ma description dès maintenant. N'entrez rien sur cette page. Revenons à la page d'accueil. Prenons ma barre de navigation et convertisons-la en symbole. Bonne idée, nav. Retournez à l'instance, revenez à cette autre page. Et allons-y et ajoutons la chanson. Suivant. Ce que j'aimerais faire, c'est le dupliquer. Je peux donc voir deux pages à la fois. Vous pouvez les modifier et les deux ne vous le permettront pas. L'un d'eux est en lecture seule, comme vous pouvez le voir, il n'y a rien ici. Je peux parcourir les pages, ce qui est cool, mais je ne peux pas les modifier dans la deuxième version. Très souvent, ce que je fais, c'est simplement le déplacer ici comme référence afin que je puisse être sur cette page et voir ce que j'ai fait sur cette page. Parce que sinon vous finirez par devoir le recharger à chaque fois. Et chaque fois que vous rechargez une page, vos annulations disparaissent, ce qui est pénible. Alors, vous, qu'avons-nous ? J'aimerais qu'il vous montre comment y naviguer même si vous ne pouvez pas le modifier. Mais pas là. Très bien, nous avons donc besoin d'un conteneur. Je ne pense pas que nous ayons vu ce conteneur. Et nous avons ajouté quelques éléments en haut. Alors, qu'avons-nous ajouté au sommet ? Nous avons ajouté et il y avait un dessus moyen et c'était celui-là. OK. Ajoutons une boîte blanche. Dois-je ajouter une boîte en haut ? Il y a juste du blanc ou dois-je ajouter une boîte où tout est blanc et je la fabrique Buxton, le bas est gris. C'est une très bonne question. J'essaie de me demander laquelle est la meilleure. Je vais juste faire une section supérieure. J'ai l'impression que je pourrais réutiliser celui que je veux vraiment faire, c'est le déplacer vers le bas. Donc oui, fabriquons ce truc, on peut le réutiliser. Donc ça va être section, section et ça va s'appeler Section. C'est une blague. Parce que j'ai l'impression que je vais l'utiliser plusieurs fois. Pas ouais. J'ai l'impression que je vais faire en sorte que ma section soit efficace. Il n'y aura aucune couleur dessus. Tout mon site web a une couleur dessus, n'est-ce pas ? Alors faisons-le. Le corps doit être de cette couleur. Mes 100 ans. Revenons donc ici. Je vais voir le body ou les body tags. Et je vais dire que l' arrière-plan est de cette couleur. J'appelle que ça va être édité et que ce sera gris AST, le gris. Gris. Bref. Je ne vais pas demander. Ce sera donc la couleur de fond. Et cela signifie que cette section doit être blanche. Ma page d'accueil est-elle absente ? Tu sais, c'est un peu comme ça que je le voulais. Celui-ci ici, section, contexte. Ce sera blanc et blanc. Couleur globale. C'est peut-être juste, je ne sais pas. Je n'ai pas l'impression qu'il soit nécessaire de remplacer le blanc par du noir. Ils sont faciles d'accès et il est peu probable que vous les changiez. est peu probable, probablement à cause de la différence, mais allons-y. Allons-y N'appuyez pas sur la commande R. C'est juste à côté de la commande D. Si ce n'est pas le cas auparavant, contrôlez E pour ajouter des éléments, et c'est le bouton de réinitialisation. Réinitialise l'ensemble du navigateur est ennuyeux. D'accord, en frapper un, prêt à démarrer, j' ai besoin d'un peu de mesquin. Et ici, en utilisant un héros de 32 sections, je vais ajouter un titre. J'ai un médium et le médium est 24. Faisons donc un autre pour le rembourrage. Le rembourrage est audacieux, et celui-ci va être grand. Lg, il suffit d'écrire en gros. Il est courant dans de nombreux autres frameworks d'utiliser LG, SM excess ou ce genre d'acronymes. Donc, en rembourrant complètement, maintenez, déplacez les deux. Très bien. Tu y vas. Donc cette section, pas l'audience, en fait, peu importe, sera consacrée à la police. Je vais utiliser des algues. C'est comme ça que je les appelle. Je ne l'ai même pas fait. Est-ce que je faisais ça tout le temps ? Je vais le défaire jusqu'à ce qu'il revienne. Qu'est-ce que j'ai créé la classe div avec elle activée, vous voyez que je ne me dirige pas vers tout le temps DP. C'est tellement embêtant pour moi d'entrer. Entrez. Maintenant, ils tiennent Shift. Maintenant, il faut le faire. Joli. Très bien, section de la flèche vers le haut pour prendre le déjeuner TED des parents. Je pense que j'utilise une couleur de police différente. J'utilise, je crois, le deuxième. Je vais devoir retourner aux chauffages. Je ne pense même pas qu'il atteigne la deuxième couleur. Celle-là. Être réellement. devez maîtriser la théorie primaire. Je n'ai pas fait de dent primaire, c'est ce que je veux. Donc je vais le faire. Faisons en sorte que ce soit un coût global et appelons-le T Prime Mary, j'ai un trois et un thon. Excellente. Très bien, trouve ta belle chose. Mettons cette région, cette chose ici, devrait-elle être une section ? Il peut s'agir facilement d'une section, d'une section de région, qui devrait être une balise div, ou elle n'est pas vraiment assez grande pour être une section. Je ne sais pas vraiment. Je vais juste en faire une section div pour, oh, eh bien. Faites quelque chose, puis sectionnez. sections ne peuvent être imbriquées les unes dans les autres. Je ne les veux pas l'un dans l'autre. Il va cliquer sur la classe de section corporelle appelée section. Rubrique. Ce sera une région. Il sera à l'intérieur de mon contenant. OK ? Et ce sera le comble de ce que je vais faire, c'est de faire en sorte que le texte l'ouvre. J'aime faire ça parfois , alors je n'ai pas à aimer essayer de le mettre au milieu. Ce que je peux faire, c'est simplement dire « soyez un peu plus haut et plus bas que ce texte ». Je vais donc ajouter un bloc de texte qui frappe. Cela peut être 123. Il regarde toutes les pages. Je n'ai pas beaucoup d'autres pages, donc il peut y en avoir trois ici. Frappant. Ce sera trois styles, tous les trois pour être une planète uniquement en utilisant ça ici. Vous allez donc être audacieux. Mets le texte dedans. OK, la taille 16 devrait être en gras par défaut. Tu as fini par être blanc et mollets. OK. Je pense que trois vont en faire 16. Je vais supprimer le, le supprimer pour l'instant. Zéro-zéro. Nous pouvons en ajouter d'autres peut-être pas à la zone de la section de chauffage. En fait, nous n'avons pas du tout besoin de cette section. Regarde ça. Je peux mettre trois points et faisons-le parce que je laisserais probablement la section là-dedans, mais je veux vous montrer que ce trois points est utilisé dans un seul but, tout ce bloc. Il va donc rester bloqué , ce qui va jusqu' au bord. Il y aura une couleur de fond identique à celle de celui-ci. Il va avoir une topographie de celui-ci qui va avoir un en-tête d'espacement de 32 dimensions. Tout le reste. J'en suis plutôt content. Donc casquettes, j'utilise beaucoup de chats pour ça. Nous abusons des casquettes. Oui, le rendu de la police est légèrement différent. L'ampoule est plus audacieuse ici, mais bon, c'est ce qu'elle est. Il s'affichera sur toutes sortes de navigateurs différents, blanc légèrement différent. Donc, en termes de hauteur, je pourrais simplement ajouter un tout petit peu de rembourrage en haut et en bas. Et appelle ça bien. D'accord, donc une autre section, et ce sera cette partie, d'accord ? Ce sera donc ma section de liste. Tu t'amuses bien. Je veux dire amusant. J'aime faire des trucs comme quand ça ne va pas aussi mal que j'aime que vous regardiez. J'ai supposé que ça irait beaucoup , donc il y aura la couleur de fond. Je n'ai aucune couleur de fond. Appelons simplement cette section. Rubrique. Et ça va être une liste de produits, accord, ça va être un produit. Et je vais parcourir la page. C'est comme ça que je l' appelle de toute façon, les produits sur la page de navigation. Et ça va avoir une couleur de fond. Éteint. C'est le 300. Ça l'est. Vous ajoutez le rembourrage, le tout pour le gros. Je l'ai ajouté au corps. OK. Je vais y aller. Et reprenons ma liste. Vous pouvez copier et coller des listes. Je ne peux pas le faire de cette façon parce que je peux tout saisir . OK. Comment puis-je utiliser ma flèche vers le haut ? Cet emballage ? Est-ce que je peux le faire de cette façon ? Je ne pense pas. Ils ont supprimé le site de reliure. Je peux vivre avec ça. Puis-je le relier à nouveau ? Vous allez donc être connecté pour revenir aux produits. Est-ce que ça m'a débarrassé de mon non, ça n'a pas marché. Je vais donc essayer à nouveau. Je vais annuler plutôt que supprimer parce qu'ils m'ont apporté d'autres fichiers indésirables. Allons voir. Ce. Je suis presque sûr que cela fonctionne. Je peux tout récupérer ici. Revenez ici, revenez à ma liste de produits. Qui va y aller ? Je vais donc utiliser la même liste. Voici quelques cours. Je dois faire attention à ne pas faire naufrage là-bas. Vous devez donc modifier certaines de ces classes. Vous allez décider si cela vous fera gagner du temps en le copiant et en le collant, car nous allons devoir le modifier pour qu'il ressemble à ceci, n' est-ce pas ? Alors peut-être que ce n'est pas aussi chic, aussi intelligent que je le pense. Jetons un coup d'œil. Toi, allons-y. Tout d'abord, changez la grille. Change en fait la grille. Je veux dire que la grille sera saisie de la liste et la liste parce que ma grille C'est pourquoi j' aime garder la grille. Oh, tu le fais très fort là où tu te caches. Ce sera fait sur commande. D'accord, et puis ici je vais récupérer le bloc div et le diblock. J'ai l'impression que si je change ça, il sera trop difficile de me souvenir de ce qui se passe de l'autre côté. donc falloir que je le reconstruise. Nous pouvons les reconstruire. Je ne suis pas assez intelligent pour que tout ce que je fais ici fonctionne également sur la page d'accueil. Il est donc assez facile de bloquer les additifs. Pour que je puisse styliser les choses. Ajoutez une image, une image. Je vais ajouter une blague. Je vais ajouter du texte. Ajoutez-en un autre. J'essaie de me souvenir de ce qu'il y a de l' autre côté, tu sais, de ce qu'il y a sur la liste. Il faut le bloc K. Donc disons que nous avons une image qui frappe un manuel, un manuel. Maintenant, il suffit d'appuyer sur un bouton. Avant de les installer, nous pouvons le faire. Et ajoutons un bouton. Signal provenant du bouton de raccourci. Cela va aller à la page du produit actuel. Vous encore une fois, le lien vers l'image principale. Vous allez d' abord être H2. Et vous pouvez l'obtenir à partir du nom du produit. Vous allez l'obtenir grâce au prix du produit. Prix, prix prix. 115. Travaillez avec Dan en construisant le magasin de thé complet dans la partie 4 de Webflow: Ok, tu vas être juste le manuel qui dit que tu as mis 100 g. Tu vas être la description. Ce sera la description complète ou tout de même un résumé de la feuille de synthèse, les épingles, n'est-ce pas ? Parce que pas si longtemps. Qu'est-ce qu'on va être ? Le résumé dépend de même que les descriptions récapitulatives lorsque c'est le cas. C'est vrai. Mais je ne veux pas limiter personne qui écrit ceci au résumé, rester dans cette petite liste. Il vaut mieux profiter de l' été pour y arriver. Prenons donc l'ensemble du parent et faisons-leur des films parce que, vous savez, par défaut, nous passons toujours à la verticale. Celui-ci est en fait très pratique de cette façon parce que je veux beaucoup de choses au milieu. Vous allez donc être très petit. Vous êtes donc exactement aussi grand que vous êtes, pas carré. Oups, c'est comme si c'était carré. Je vais donc que tu sois une image sur cette page. Alors, ton image, qu'est-ce que j'ai d'autre ? J'ai une liste de produits. Il va y avoir une recherche de produits. Et vous allez avoir une taille de largeur par vous-même. Et je vais te dire plein de kebab. Oui, excellent. Jetons un coup d'œil. Donc tu les mets oralement dans un autre livre. En fait, je veux une grille et ici, Donna, je pourrais utiliser Flex, en mettre une autre ici et la plier. Nous faisons donc cela pour vous montrer les grilles plus facilement, car Flex n'a qu'un alignement en haut et en bas, ce qui va fonctionner maintenant Est-ce que cela continue avec le flex que vous avez fléchi dedans ? Je vais y aller. Je vais créer un autre tag div ici. Division. Nous allons rentrer à l'intérieur. J'adorerais pouvoir sélectionner plus d' un shift et cliquer sur tous ces éléments. Je ne sais pas pourquoi nous ne pouvons même pas vous l'obtenir une fois que vous avez reçu le premier et que les autres seront plus susceptibles d'entrer. Pour le moment. Il semble qu' ils font en sorte que cela fonctionne. Ils semblent donc travailler dessus dans Webflow et cela semble s' améliorer de plus en plus naturellement, mais il s'agit d'un déblocage ici, vous allez aussi être des flicks. Vous pouvez donc fléchir un flex horizontalement. Celui-ci est vertical. C'est de la doublure. De cette façon. Justifier ce centre. Je veux des espaces et des rangées. Celui-ci peut avoir quelques lignes. Donc, le parent ici est l'écart, les lignes. Mettons-en 32. Ça n'a pas marché. Êtes-vous et vous devez, Gap ne vous touchera pas. Tu dois bien t'en sortir. Celui-ci, le parent de l'erreur, va contenir trop de lignes. Utilise ma flèche vers le bas pour arriver là. Vous êtes donc du bon type. Tu dois y aller. Et il les a également placés dans un div. Parce que n'oubliez pas que Flex ne laissera pas le B inline-bloquer. Donc, en fait, je voulais juste que nous soyons réseau parce que grille, laisse-moi le faire. Reflète. Ok, donc ce que je vais faire c'est fléchir. Maintenant tu es bloquée à haute voix. Vous devez également faire preuve d'audace. Comme Non, toi, pour le moment. Vous pouvez avoir, il faut environ trois, être dans la marge gauche. Juste plus. J'ai aimé tout le rembourrage, même s'il est fourni avec Flexbox. Que faire ? Tu es là. Très bien. J'aime trop les films pour l'être. Je vais mettre, je vais mettre une balise div. Je vais tout emballer. Je pense que ce n'est peut-être pas la meilleure façon si vous regardez à nouveau, que fait-il qui devrait probablement penser. Donc. Vous allez entrer en vous et en vous. Alors je le déplace à nouveau sur la page d'accueil. J'ai été capable de le faire, n'est-ce pas ? J'ai appelé Texts Price. Vous allez enregistrer le prix des tags. Et tu seras le prix des tics. Mais audacieux. Les deux ne font toujours pas flotter ce truc ici. Oh, ça ne l'est pas. Il prend du processus, prend en charge, supprime une classe, du texte. Prix. Nous allons créer d'une manière ou d'une autre un texte classique P, parce qu'il n'est utilisé nulle part. Je suis capable de le supprimer. Et nous y voilà. D'accord, les gens y entraient et les médias, désolé, une marge à gauche ou à droite. Et encore une fois, j'ai adoré le flux, alors j'ai en quelque sorte travaillé pour le contourner. Il y a beaucoup de compromis. Il se déroule en rangées. Je vais augmenter ce chiffre. Ce type va être mon bouton générique. Je ne voulais donc pas ajouter la marge automatique au bouton générique parce que je vais l'utiliser tellement de fois. OK. Donc ça va enregistrer. Ce que je fais, c'est que je sais que je vais oublier de mettre des casquettes même si le design le dit un peu. Donc je vais dire que le bouton va simplement forcer tout à être conservé pour que je n'aie pas à m'inquiéter à ce sujet. Toi qui ne vas pas monter là-haut. J'aurais pu juste le mettre, j'aurais pu mettre ça dedans aussi. Mais j'ai réalisé que c'est le designer qui l'a fait. Et je pourrais faire en sorte que cela prenne le prix et l'amène à, eh bien, je pourrais l'amener au blocage en ligne, mais cela va juste poser beaucoup de problèmes parce que certains de ces prêts sont très longs et ça ne va pas longtemps avant que ça ne le pousse à bout, surtout quand je passe à ceux-là. OK, donc, oui. Très bien. Ce bloc entier n'a pas de nom. Cela s'appelle div block two. Ce sera mon div affichera pas, en fait juste le renommer. OK. Normalement, j'aime voir les autres personnes qui l'ont nommée me donner une idée, mais comme je le renomme, elles n'apparaissent pas. Je vais vous dire que je fais de la recherche de produits en direct, de la liste des articles. Je ne l'ai pas renommé du tout. Il y a quelque chose de bizarre. C'est bon. Qu'est-ce que je peux le changer ? Je ne sais pas Division. Si je supprime la classe, elle va la casser. Si j'en ajoute un autre, je pense que tout ce que j'ai fait c'est créer celui-ci, le faire fléchir. Et j'ai ajouté que certains se trompent, mais nous sommes revenus. D'accord, ça y ressemble un peu. J'ai besoin, cependant, d'un fond blanc. Ce représentant aura un fond blanc. Et je vais ajouter une classe de combo d'ombres. OK. Maintenant, nous y arrivons. Très bien. Je suis heureuse, tu es heureuse. Je suis content que nous y arrivions. J'ai l'impression qu'on n'a rien fait. Voyez-vous à quel point il nous a fallu beaucoup plus de temps pour créer cette page que pour la première ? Il n'y en a pas autant, mais nous réutilisons les cours. C'est ce qui est vraiment cool. J'ai l' impression d'être un web designer fort et puissant. Quand je passe juste à box-shadow, rembourrage laissé là, je l'ai déjà rendu cohérent. Comment le ressentez-vous ? Peut-être juste moi. Tu le sens. C'est bon. Regardons la dernière page. Que faisons-nous ici, jusqu'à celui-ci ? Faisons celui-ci. Très bien, donc nous allons travailler sur le modèle de page parce que ce sera le cas, beaucoup d'entre eux vont ressembler à ceci. Donc on va y aller et on va passer plus de deux litres. Ça y est. Je vais créer un modèle de produits. OK, nous allons utiliser notre système de navigation et ajouter un signet d'édition. J'avais tellement de favoris. Lundi, on y va. Mettons-le dans un récipient. Ajoutons ce contenant, marge supérieure Md. Jetons un coup d'œil à mon design. Il y a un peu de rembourrage dans celui-ci. Celui-ci va être sur fond blanc. Je ne peux pas vraiment réutiliser le blanc que nous avions de la dernière fois parce que j'ai été très précis à ce sujet. Créons donc une section ici. Passons à la section que je devrais appeler simplement la classe globale appelée betterave color by white. Je peux donc l'utiliser encore et encore, mais nous sommes presque arrivés à la fin. Donc je vais juste colorer la section, le produit avec une couche blanche, cette section ici aussi, elle va se diriger vers le milieu. Joli. Ajoutons le hibou. Nous n'avons pas vraiment besoin d' ajouter un élément de liste maintenant, nous ajoutons simplement n'importe quoi parce que nous sommes dans le modèle et nous pouvons ajouter une image , une image, une image de juin. OK, connectons-le à la note indiquant qu'il est connecté à l'image principale. Maintenant, vous devez vous assurer que le produit fonctionne comme lorsque vous concevez, d'accord ? Vous devez être conscient que les images peuvent ne pas correspondre. Vous pourriez donc devoir ajuster votre design simplement parce que l'image n' est pas assez grande. Celui-ci l'est, et il fera une hauteur de, hauteur, une hauteur de trois à trois. J'ai complètement oublié la version mobile M&A. Je me suis sentie trop à l'aise sur la dernière page, nous allons faire les deux ensemble à la fin car nous avons déjà commencé. OK. Je ne vais pas augmenter la largeur ici, d' accord, je vais faire un total pour une classe Y. Dans ce cas, assis là, vous ne pouvez pas faire comme des pourcentages. Vous pouvez modifier les pixels. Je souhaite donc ajouter une classe appelée image product PRO cut product. OK ? Et on va dire que tu es à la hauteur de toi. Excellente largeur de 100 %, insérez dedans et remplissez, couvrez et milieu ou haut et vous devez passer en revue quelques-unes d'entre elles et maintenir l'option Non enfoncée. Appuyez sur toutes les touches et voyez si vous pouvez passer d'une page à l'autre. Comme les onglets. C'est lequel, Dan. Très bien. Est-ce que Shift Option est sur un PC, je suis sûr que c'est un shift et un alt, des flèches gauche et droite. Vous voyez que je parle simplement à travers mes images à travers un bouton, vous pouvez simplement cliquer ici. Je n'en ai que trois. Mais c'est un bon moyen de passer en revue et de simplement vérifier, comme des images, elles sont toutes plus belles au milieu, ce qui, ils le savent probablement, n'est pas aussi beau, mais plutôt que d'entrer ici et de dire : OK, je veux que ce soit en haut ou en bas. Alors faisons-le et utilisons mes flèches maintenant. Le haut ou le bas. Je n'en suis pas sûr. Je pense que c'est le top. Très bien, donc nous l'avons. Je vais aller plus loin. Maintenant. J'aurais pu définir cela comme arrière-plan, et c'est une façon de procéder comme nous l'avons fait sur la page d'accueil. Je veux être une vraie image parce que j'aimerais qu'elle ait du texte alternatif k. Donc, pour le moment, je ne pense pas que ce soit le cas. Vous pouvez configurer un champ de texte alternatif dans vos produits. Je n'ai pas ça. D'accord, vous pourriez nous ajouter ces champs de résumé personnalisés. Je vais maintenant revenir en arrière et ajouter un autre champ personnalisé pour les textes alternatifs et avoir le client, ou ils ont peut-être déjà une description que nous pouvons utiliser, accord, et j'y ai mis une limite, un nombre de caractères. Mais pour le moment, je vais faire semblant de l'avoir fait et continuer. Donc je veux mettre ça dedans. Mettons-le en dessous d'abord. Frappant. OK, et ça peut être un succès. Il va en frapper un et je ne sais rien de tel, mais j'ai besoin que ce soit pour que vous n'ayez pas, ne passez pas aux trois points d'une page , vous avez besoin d'au moins un titre. On dit au navigateur que c' est la chose la plus importante sur cette page. Je vais donc devoir juste en taper un assez longuement pour cette page. Ce sera mon point de prédilection pour la page du produit. OK. Et ce sera le cas, vous n'ajouterez pas de police. Ce sera celui-là. OK. Ce sera la taille de l'endroit où nous irons. Qu'est-ce que tu détestes ? Des hommes ? Je fais ça tout le temps. Rien à propos de 48. Mon cerveau, oui. Ça les mélange. Vous le divisez par six. Dean Rim. Et ça va en être une, c'est génial. Il va falloir que ce soit blanc, ce que nous ne pouvons pas voir. Et ce que je vais faire, c'est mettre ça, tu pourrais le mettre dans un div et le styliser. Je vais faire ce que j'ai fait pour ce chauffage sans région. Je vais demander à la classe de faire quelques choses. J'aimerais que ce ne soit pas un bloqueur. Block a tout le chemin jusqu'au bord, ce qui est idéal pour l'autre chose. En fait, j'ai juste mis le fond et le poing. Donc, quand nous parlons de parce que par défaut, il le fera si vous passez en mode débordement, non, Chrome, je veux passer à la mise en page du cerveau au blocage en ligne. est un peu exagéré. Ensuite, je pourrai aller chercher du rembourrage sur leur terrain. Assurez-vous que je le connecte pour qu'il le saisisse à partir du nom du produit et qu'il le regarde en quelque sorte. Ce n'est pas très uniforme de toute façon, donc je ne crois pas que la diode Zener fonctionne. OK, allons-y. Vous devez les rendre incolores et je vais les rendre noirs, mais la transparence est de 2 %. Donc, ici, je vais taper alpha est 82. OK, et maintenant je dois le déplacer vers le haut. Je vais donc rendre la section relative. Ça va probablement aller de voir ça. Je pourrais quand même vouloir le terminer dans un div. Je vais juste espérer que tout ira pour le mieux et dire que ira bien pour vous. Donc, vous allez vous positionner. Absolu. Intéressant, hein ? Il a poussé jusqu'au bord parce qu'il ne peut aller nulle part. C'est parce que ce truc maintient l'espace ouvert. Mais si je rends tout cela relatif et que je le prends ensuite ou est-ce que ça allait marcher ? Ça, c'est bien. C'est pourquoi il s'agite un peu. C'est juste parce qu'il ne peut pas tenir là et qu'il est en quelque sorte écrasé aussi petit que possible. Cela semble correct, mais l'option Shift à gauche et à droite, ou Shift Alt, c'est une vérification qui est juste. Et PC, vous devrez peut-être commencer à maintenir les touches enfoncées. Ils s'adaptent tous localement. OK, celui-ci fait partie de l'Ajouter au panier. Je vais y aller. Je voulais être à l'intérieur de la boîte blanche pour pouvoir entrer dans le produit. Excellente. Qu, que faisons-nous ? Je ne veux pas le bouton Acheter maintenant. Je vais probablement devoir en parler au client. Par exemple, voulons-nous le bouton Acheter maintenant ? Est-ce approprié ? Peut-être faire une dégustation aux utilisateurs et avoir les deux. Voyez s'il existe une sorte de cas d'utilisation pour eux. Ce type ne sera pas une marque. Il va devenir Button. Casquettes. bouton est censé être en gras. Je pense que les boutons sont censés être audacieux. Je ne peux pas le sélectionner comme vous, oh, c'est complètement différent. Police. Z, rien. OK. Mes boutons sont en fait semi-gras et ça vient de l'époque où je manquais de polices. Tout à l'heure, quand je dessinais mal, je devais aller voir Design et me dire ce qui ne va pas. Je vais donc y aller et laisser ça comme Coca-Cola. Qu'est-ce que je veux faire d'autre ? Je veux donner un peu de style à la forme, donc je veux mettre cela à l'intérieur et à l'extérieur. Je ne peux pas avoir à les emballer dans un div ou à ajouter une classe à ce truc. Peut-être parce que je vais probablement le refaire pour autre chose. Donc, je vais dire que vous avez juste une classe de taille de champ R qui sera moyenne. Et ça devient moyen, je vais lui donner, est-ce que cela va fonctionner au minimum ou au maximum ? Largeur maximale ? On y va de combien ? 300 pixels Remarquez-le. D'accord, je ne veux pas qu'ils figurent sur les champs d'étiquette. J'en aurai besoin pour celui-ci, mais pas pour celui-ci. Tu le vois ici. Il indique Sélectionner la taille et je peux dire choisir, mais je ne peux pas modifier la taille des mots qui provient de la base de données des produits. Vous devez donc entrer et changer la façon dont il est introduit dans le CSV parce que cela s'inspire vraiment de cela. D'accord, alors quoi d'autre ? Nous avons besoin de jouer avec ? Quelques espaces, nous devons faire Ajouter au panier et au panier, il y a des boutons beaucoup plus grands sur cette page. Il est plus grand et plus large. Donc je vais dire que tu vas être un bouton mais tu vas être un gros bouton. OK ? Et vous aurez plus de tout. Toi de cette façon. Je devrais aller vérifier, mais je ne vais pas le faire. Tu as besoin de ton propre cours. Vous allez être une quantité de texte. OK ? Et tu seras de la bonne couleur. Vous avez échoué au rapport de contraste. Ils seront tous dans cette colonne AAA. Et j'ai besoin de quelques autres choses, donc je l'ai. Ce que je dois également noter, l'Ajouter au panier. Donc, au-dessus de cela, si j' appuie sur Commande ou Contrôle E ci-dessus , je devrais presser. Dans le manuel, ce sera la description complète, qui n'est pas si longue. D'accord ? OK, est-ce que ça, supposons que c' est nul et je cherche si c'est inflex flexbox parce qu'alors je peux ajouter des lignes et jouer avec l'espacement, la probabilité qu'elles soient toutes identiques. Vous pouvez voir que c'est beaucoup plus large et que celui-ci est identique à celui-ci. C'est quoi, qu'est-ce que j'utilise ? Pourquoi est-ce que j'en utilise un si petit ? Mon médium de peinture n'est en fait que 24 heures et je voulais que le tout soit grand. Supprimons celui-ci. Rubrique. Grand. On y va. Maintenant, je peux entrer ici et dire Section produit vous avec celui-ci vertical. Je peux ajouter des lignes de 3d2. Et c'est complètement foiré parce que vous êtes relatif à celui-ci. Cliquez sur Actualiser juste pour voir si l'absolu revient en arrière, s'il a mis à jour le code réel. Ouaip. Encore une bonne affaire. Je vais donc en toucher un. Vous avez un espacement ou une position. Où êtes-vous positionnés ? On y va, on y va. Je ne sais pas pourquoi cela a changé. Je pense que c'est parce que je jouais avec Flex. Oui. Peut-être que le flux va me poser des problèmes. Alors jette un coup d'œil. Est-ce que je ne peux pas annuler parce que je l'ai actualisé. OK. Donc je vais y aller. Cette boîte n'a pas fléchi parce que cela pourrait poser des problèmes. Et j'allais y ajouter mon rembourrage. Jetons un petit coup d'œil. Donc, même problème. C'est parce que ça vient d'en haut. Et la gauche. OK. C'est donc cette partie en haut. Oh, ses parents sont passés de publicités relatives à bloquées y. Donc, il cherche du corps parce que je jouais avec le fait qu'il soit fléchi et qu'il ne soit peut-être pas reconstruit p-block, je ne veux pas que ce soit moi Je voulais être bloqué, mais je veux que ce soit toujours chez un parent. OK. Pour que ce type sache où il est et c'est pour ça que tu as déménagé ? Nous l'avons fait. OK. Les chiffres ont-ils changé parce que nous avons changé qui est par rapport à qui devrait l'être par rapport à la section produit. Parce que je faisais des bêtises, il a choisi le corps par défaut. Alors Eric, il fait ce qu'on lui dit. Je lui dis juste de faire des trucs bizarres. C'est la seule chose avec le code. Elle n'est jamais cassée. C'est vous, il fait exactement ce que vous lui avez dit de faire ou ce qu'on lui dit de faire, il va comprendre ce que c'est. C'est pourquoi c'était faux. Raccourci 123, allez, vous devez changer les tailles, mais d'accord, qu' avons-nous d'autre en termes de produits de contrôle ? Comme j'ai déjà appliqué un cours, vous allez obtenir une marge inférieure de 32 parce que ce n'est pas assez, mais vous êtes aussi au mauvais endroit. Au dessus de ça. Est-ce qu'il peut entrer dans la carte ? King go donc il y a le carbone ED, on ne peut pas y entrer. OK. Je peux y aller ? Il faut un bloc. Je peux y aller. Allez-y en quelque sorte. Est-ce que ça peut aller ? Tu ne peux pas y aller ? Nous le savions. C'est tout à fait possible que vous me remarquiez ? Donc c'est en bas. Vous allez avoir un rembourrage en haut et en bas. Il y a un cours sur celui-ci. Donc je peux aussi l'utiliser sournoisement. Je devrais manger comme du Python, en rembourrant en haut, en bas. J'ai déjà ces cours. Ok, celui-ci, est-ce que j'ai déjà une marge inférieure ? Je le fais les deux raison. Ils peuvent y assister en quantité. Tu y vas. Avons-nous une marge supérieure sur celui-ci ? Marge supérieure ? Nous le faisons. Très bien. Je l'aime bien. Vous n'avez plus besoin de la marge en bas. OK. Maintenant, oui, je vais prendre une tasse de thé. Vous attendez là et nous passerons aux versions mobiles bien plus d'une heure, puis j12 342-34-1234. OK. Donc, deux ont besoin de travail. Sûrement juste la taille de la police. Il y a un cours. Je vais utiliser ma flèche vers le bas. C'est mon plus long de tous quand vous êtes vraiment dans la taille, j'essayais utiliser un peu comme après mon raccourci qui est Shift Option gauche et droite ou Shift Alt, je cherche le le plus long récit de Dieu comme celui-ci ici. Donc je vais prendre une petite dose pour ça. Le reste. Ok, celui-ci ici. Encore une fois, je vais probablement laisser se diviser deux parce que la police sera trop petite. Donc, je vais juste dire que j'espère pouvoir modifier sa position. Hey, où est ma position ? Ces autres postes ne me manquent pas. Et en termes de largeur, pourquoi est-ce là ? 100 %, je m' adresse aux hommes dans tout ce qui a une largeur minimale, n'est-ce pas ? En termes de taille, ne bloque pas en ligne. Pourquoi ? J'y jette un petit coup d'œil, c'est bon. Le mode radiographie va juste faire , je ne suis pas sûr de savoir ce qu'il faut garder ouvert. Il devrait s'enclencher, car cela nous amène sur l'autre ligne. Il y a quelque chose qui lui donne une largeur minimale. Mais ce n'est pas le cas. Tu ne l'es pas. Ce que vous pouvez faire, c'est simplement utiliser votre flèche vers le haut pour voir le mot cliquer à l'intérieur. Utilisez votre flèche vers le haut pour voir si c'est la voiture suivante et regardez maintenant que là. Merci, les gars. Je n'en suis pas sûr. Reviens vers toi. Oui. Parce que je n'arrive pas à penser à ce qui s'est mal passé. C'en est une, oui. Oui. Celui-ci va probablement devoir faire certaines choses. Qu'est-ce que je vais faire dans celui-ci, qu'a fait le designer ? Regarde ? Utilisez simplement le petit bout de texte. D'accord, commençons par un petit bout de texte et votre diagramme de réduction de la taille de police. Est-ce que c'est vraiment resté dehors, Hannah ? Ce problème a été résolu. Cela ne résout pas vraiment le problème, mais est-ce que le plus long est encore lisible ? Ce que je fais pour celui-ci vient réellement de cette façon. Est-ce que ça va rester là ? Ça l'est. Puis-je ajouter une marge sur ce côté ? J'ai l'impression que c'est de la triche. Tricherie. Mais est-ce que cela fonctionnera, c'est la clé ? Non. Oui, cela ne semble pas être une bonne solution. Dans la police, ça va être plus petit. Je vais appeler deux lignes, d'accord ? Sûrement là. Et je vais devoir jouer avec Let's get this down to the 16 et correspondre à cela, j'ai ajouté que oh, c'est du positionnement. Je veux le titre dessus. Donc, rembourrage en fonction de la taille. Revenons à ici, a k, ici, k, le positionnement doit apparaître un peu, en cliquant dessus et en utilisant mes touches fléchées, 1234. Et aussi cette taille est probablement un peu bizarre pour ici. Donc, la hauteur de celui-ci et de celui-ci est que vous allez être en hauteur maintenant, ce qui est absent de ma position. Mais je peux arranger ça. Le quart de travail monte et les boîtes. C'est bon. La dernière chose que je vais faire est de créer un petit rembourrage pour celui-ci. Alors cliquez ici, ajoutez un div. Div va s' appeler padding. Et celui-ci va être, nous avons un médium, je vais en faire un plus petit ici. Petit et il va falloir maintenir Shift et maintenir Shift et faire 16 tout autour. Excellente. Disparu. Sur ce coup-là. Ce n'est pas une icône pour ajouter des classes et les supprimer en fonction de vos points de rupture, vous devez refaire la chanson. Je dois dire qu'il va être pesé et que le contenant ici a cette marge, la section supérieure a un grand rembourrage, qui est ce phi, il suffit d'ajouter du rembourrage, un petit rembourrage dessus. Ça l'emporte, c'est totalement le cas. Mais ici, j' ai aussi un petit rembourrage. Tu trouveras, tu trouveras, tu trouveras. Tu y vas. Donc, cela aura l'air Section Hero, les produits de la section ont un grand rembourrage, tête petite appliquée dessus. Mais cela ne prend réellement effet qu'ici. J'ai supposé que cela irait de haut en bas parce que la classe est appliquée. Mais ce n'est pas parce que je l'ai appliqué ici. Ceux-là, j'ai du rembourrage, le déjeuner, allez-y, c'est quelque chose. Très bien, faisons correspondre celui-ci. En fait, vous pouvez simplement utiliser ce type de style maintenant. Très bien, c'est-à-dire que, regardons le, sortons de celui-ci maintenant, regardons l' autre page que nous n'avons pas faite pour ceux-ci. Donc, commencer par les deux premiers, ok, ça ne marche pas. Ok, ça va être deux en fait, allons juste descendre pour trouver la grille. En haut. Voilà, je cherche, je cliquais un peu au milieu et sur ces flèches de serpillière jusqu'à ce que je voie cette icône de grille. Ça y est. Je vais dire que vous avez terminé un par un. 123 ou elle se resserre. Comment vais-je y faire face ? Ai-je fait en sorte que ce DID soit vertical et qu'il soit centré. Est-ce que c'est. Ça l'est aussi. Ça, ce sont des films. C'était un coup de chance. Et celui-ci, ici, je vais dire que nous avons appris que nous pouvons faire du rembourrage. Voyons voir si cela fonctionne. Peindre en petits morceaux tout autour. Cela ne s'appliquait pas. Pourquoi ne pas annuler ? Faites un grand rembourrage au cas où quelque chose ne va pas. Il y a quelque chose qui ne va pas avec un petit rembourrage. Quel est le problème avec un rembourrage petit ? Allons-y et découvrons-le. Donc je vais juste suivre un cours additif ou au hasard d'une manière ou d'une autre. Je vais ajouter un stand de police. Il ne fait rien de si petit qu' il aura 16 ans. Ce qui expliquera pourquoi c'est oui. Avoir si ça ne marche pas. Et je suis content de celui-ci. Et je vais me déplacer en fait, voyons si cela s'applique ici aussi. Votre emballage de liste de collection. Nous pouvons désactiver les classes, encoder. Comment faites-vous ici et Webflow. Ce que nous devons faire, c'est monter jusqu'au sommet. En gros, je vais mettre à zéro, le mettre à zéro tout autour de cette classe. Donc tu vas être nul. Et puis tu es là pour celle-là. Revenons ici, les dépenses les plus importantes seront de 32 pour celui-ci. Et puis il devrait suivre celui-ci également. Je ne l'ai pas encore fait. OK. Donc, vous avez un grand rembourrage. Nous ne l'avons pas désactivé pour les autres. Nous l'avons simplement remplacé pour les plus élevés, puis nous l'avons réactivé pour Danio. Et celui-ci ici, ça a l'air bien, mais la section elle-même va avoir du PDE petit. On y va. Assurons-nous que je suis Rick, que ces autres soient toujours grands , grands et petits. Allons vérifier quelque chose. D'accord, en frapper deux sur ce coup là n'a pas de classe. Je veux le centrer dans le texte. Est-ce que je peux le faire à tout le quartier ? Je peux y aller ? Oh, mais est-ce que ça le fera aussi à celui-ci ? Alors jette un coup d'œil. Parce que ça a l'air bien. Le caché semble un peu bizarre ici. Je dis que tout ce qui se trouve à l'intérieur de cette division sera aligné au centre. Est-ce que cela reflète celui-ci ? Celle-là, sympa. Ça ne s'applique que de la tête vers le bas. OK. Est-ce que je veux ou probablement que nous voulons jouer avec ça pour faire correspondre le petit à 16. Premièrement, cliquez sur 1234, il faut un peu plus d'espacement, mais j'en ai assez. Tu en as assez ? J'en ai assez. C'est bon. Ça va être plus petit. Il va falloir un cours. Après tout. Modifions-le ici. Appelons cela un titre, un sur la page du produit. Notez qu'il s'agit de la page de navigation. Ça va appeler ça frapper un. Et je vais te voir ici. C'est toujours la dernière chose. Ça va être la dernière chose. Donc, taille de police réduite. Tu ne peux pas sauter sur deux lignes. Et vous pouvez être sur deux lignes, mais vous pouvez être centré et vous aurez une hauteur de ligne de 1,1. Très bien, mesdames et messieurs, publions ce document. Il y a quelque chose qui ne va pas. Nous allons l' ignorer. Vous penseriez oh, s'il vous plaît, oh, s'il vous plaît Oh s'il te plaît Pas de navigation. Veuillez patienter. Bon, on y est. Faisons la navigation. Passons à la navigation. Celui-ci va entrer dans le symbole parce que je les veux tous. Je ne veux pas que vous accédiez à une URL externe vers la page froide. Vous allez accéder à la page de navigation. Vous allez donc accéder à une page appelée recherche de produits. Ouvrez dans cet onglet. Merci beaucoup. Le coton sait où il va. Publiez à nouveau. Ce n'est pas le cas, nous allons publier quelques fois. C'est bon. Allons le vérifier. Nous sommes sur la bonne page où rafraîchir, supprimer l'un d'entre eux. Parcourez ceux que nous n'avons pas LinkedIn le fera , rien d'autre ? Nous sommes donc sur la grande version plutôt que sur la page d'accueil, la page d'accueil est cassée Excellente. Ça passe au petit côté. Cela fonctionne mieux. Donc, les pages d'accueil sont cassées. Pourquoi la page d'accueil cassée ? Ça a l'air bien Et il a demandé à un ami Rowan de regarder celui-ci. Passons à la page d'accueil. Oh, on a fait quelque chose de mal. K, la classe que nous utilisons. Regardons la grille. Ne pas le mettre dans une grille. Je l'ai fait. Il est donc dans une grille. Une grille. Comment est-il devenu ainsi ? Il devrait y en avoir trois. Je ne sais pas Si je modifie celle-ci appelée liste de collection. Parce que la liste des collections portant le même nom est utilisée ici et sur une autre page. Toutes les autres pages. Parcourez les produits. Oui. Donc celui-ci utilise le même. Pouvons-nous donc supprimer la classe que je pense pouvoir écrire parce que nous, oui, appelons celle-ci une liste de collection sur la page de navigation. Et nous allons dire u et maintenant un en voiture. Terminé. Nous allons donc laisser celui-ci seul sur la page d'accueil. Tu travailles. Publions à nouveau. En fait, je l'ai juste prévisualisé ici avant d'aller trop loin et de le publier. Donc on va travailler à plein régime, passons à l'un de ces gars. Et cela fonctionne tellement sur la page. Je me rends compte que sinon nous serions ici pendant 1 million d'années. Je pense que cette chose est la seule ou le bit 0. Je pense que ce n'est pas mal, pas mal. Je vais devoir aller tester ça sur mon mobile également. Corrigons cela et je vais vous montrer un moyen de tester sur votre mobile, sur votre bureau, vous devriez simplement l'envoyer sur votre téléphone, mais vous ne pouvez pas le voir. Alors réglons ce problème. Donc, vous avez cette option que vous avez ici pour la page actuelle sur laquelle nous nous trouvons a un style bleu. C'est un peu comme celui par défaut qui provient du HTML de la vieille école. Donc, je vais dire que le courant du bouton de navigation sera également de couleur blanche. Prévisualisez-vous. Ça ne devient pas bleu. Ça ne devient pas bleu. Passez au bleu. Comme si nous y étions. Prévisualisons ce truc sur mobile et ensuite nous arrêterons. Et c'est un jour. J'ai commencé ce truc le matin et c'est l'après-midi et je m'arrête pour déjeuner là-bas. Pouvez-vous dire quand mon humeur a probablement changé à un moment donné lorsque je me mets en colère et par la suite lorsque j'ai mangé beaucoup ? Très bien, alors publions-le. Mettez à jour celui-ci et ce que vous pouvez faire sur Chrome, Moyen-Orient, je ne suis pas sûr que sur les autres navigateurs, vous pouvez cliquer avec le bouton droit de la souris et dire inspecter. Et j'ai fait le fond ici, vous pouvez dire, montrez-moi cette icône ici. Le vôtre se trouve peut-être ailleurs sur la page. Je pense que c'est là. Peut-être que la droite par défaut, vous pouvez dire, me montrer sur un pixel cinq, vous pouvez voir que la hauteur de ma fenêtre d'affichage n'est pas tout à fait correcte sur celui-ci. Nous pouvons simplement mettre 100 % pour qu'il remplisse complètement, ou peut-être même plus petit pour que vous sachiez que vous pouvez faire défiler la page. Parfois, il peut également être utile que vous n' obteniez que 80 %. Mais c'est fait, tu as terminé. J'ai terminé. High-Five, arrive jusqu'au bout. Vous gagnez un prix. Nous remportons tous deux des prix. Nous sommes arrivés tous les deux. J'espère que tu as appris quelque chose. J'ai pensé qu'il était important la fin du cours, de relier tout cela et de voir comment les différentes parties se connectent. Et j'espère que vous avez également vu qu'il existe la bonne façon de faire les choses. Et puis il y a le, ça marche juste et c'est bien et les artistes qui sont sur des navigateurs différents, et ça va faire beaucoup de mal au designer. Il y a donc beaucoup de choses qu'il est important de voir, surtout en ce qui concerne la longueur du nom . Surtout si le designer, je sais maintenant quand je le dessine, que je devrais chercher des titres plus longs. C'est donc formidable lorsque vous concevez et développez le site. Oui, c'est ça. d' être venus. J'espère que cela vous a plu et je vous verrai bientôt dans une autre vidéo. Au revoir. 116. Projet de la classe 08 - commerce électronique: Hé, c'est l' heure des devoirs, pas des devoirs. C'est une application amusante et pratique de vos connaissances. Ce que je vais faire, c'est que je vais vous demander de faire la même chose que dans la longue vidéo qui précède création d'une boutique de commerce électronique, vous n'avez qu'un seul patient à faire. Je dois faire les trois. C'est à vous de décider si vous avez du temps sur trois, mais le minimum est d'une seule page. Choisissez la page d'accueil, la page de navigation du produit ou le prix de vente du produit. Qu'est-ce que je veux dire ? Jetons un coup d' œil au site actuel. Je me souviens qu'il y 12, puis la page du produit, il suffit de faire l'une d'entre elles. Je veux que vous vous habituiez à ajouter le découpage et à n'importe quelle page que vous avez complète ou s'agit-il d'un ticket dessus ? OK. Alors saisissez-le et placez-le sur la page de navigation si c'est ce que vous voulez faire, ou sur la page d'accueil ou sur deux ou trois pages, cela prendra un peu de temps, environ une heure, selon Dan. Donc oui, c'est un travail assez important. Et ce n'est pas encore une fois, des points de style, accord, il ne s'agit pas de savoir à quel point elle est belle, quel point elle est géniale, à quoi ressemble l'interface utilisateur. Il s'agit de développer les fonctionnalités et de pratiquer le flux de travail. C'est le genre d'endroit où au moins une des pages, les trois, si vous le souhaitez, utilise votre propre produit ou entreprise. OK. Donc, juste éteint, comme ne faites pas Scott T, vous pouvez simplement le mettre dans quelques textes en vous refroidissant à votre propre nom. Si vous avez suivi le cours Figma ou XD, c'est le moment idéal pour revenir à ce design et en tirer des leçons. Si vous ne l'avez pas fait, ne vous inquiétez pas, créez simplement un nom de marque. Choisissez des couleurs, choisissez un produit, récupérez des images sur Unsplash, ou peut-être avez-vous vos propres contenus. OK. J'ai trois produits. Vous n'avez pas à les importer avec un fichier CSV, il suffit de les charger. OK, je veux que tu aies le bouton panier et le bouton Ajouter au panier. La grande pratique ici est de trouver comment faire en sorte que cette chose fasse ce que vous voulez et de vous entraîner à faire et de vous entraîner l'ajout au panier fonctionne un peu là-dedans. Vous avez donc besoin d'au moins une variable, comme je vous l'ai montré, les différents poids que vous pouvez avoir peuvent être de couleur taille différentes selon ce que vous faites. Donc, trois produits avec au moins une variante des points de rupture. Donc, assurez-vous que cela fonctionne dans tous ces domaines. Je veux que vous personnalisiez le panier. Maintenant, je dois faire un peu, car une fois tu seras capable de faire deux fois la même chose. Je veux que tu puisses entrer ici et que tu puisses vraiment changer le style. Ok, alors vois si tu peux trouver comment y entrer et le faire. Choisissez donc au moins une page, mais trois produits dans la section produits de votre site de commerce électronique. Il peut rester un site gratuit, le faire fonctionner sur tous les points d'arrêt d'un panier et le bouton du panier et voir si vous pouvez personnaliser ce coton signifie vous aussi. Alors, prenez une capture d'écran de votre page et de tous les différents points de rupture , d' accord, mon application se charge ou vous risquez de finir par en télécharger un grand nombre. Si vous parcourez les trois pages et toutes sortes de points de rupture, vous pouvez ignorer le paysage mobile. Vous pouvez voir que je n' aime pas ce point de rupture s'il n'y était pas. Mais je suis sûr qu'il y a beaucoup de gens qui font défiler les sites Web verticalement, horizontalement. Prenons également une capture d'écran du panier et téléchargez-la. Et j'adorerais le voir, surtout si vous l'envoyez sur les réseaux sociaux. Si vous faites quelque chose comme votre propre projet, si vous finissez par faire Scott T, OK, en essayant votre propre projet parce que ce serait passionnant et que vous pouvez l'utiliser pour votre portfolio. Très bien, c'est votre projet de classe. Profitez, appréciez le processus, profitez de rester bloqué. Parce que lorsque vous finissez par le comprendre, tout cela est un bon apprenant. bon, c'est ça. Je te verrai dans la prochaine vidéo. 117. Que faire après votre cours sur les principes de l'accès à Internet: Tu l'as fait. Je savais que tu le faisais. Tout le monde ne le fait pas C'est tellement bien fait. Vous allez être riche en fibres, nous l'avons fait. Ce n'est pas facile d'y arriver. Et je voulais juste te dire, Good Anya, parce que ce n'est pas tout le monde, tout le monde, qui aime regarder la télé et tu es là à faire du Webflow tout au long du processus. Bravo et félicitations. Et ce que nous allons faire maintenant, c'est simplement parler de ce qu'il faut faire ensuite , comme mes suggestions. Tu devrais peut-être voir d'autres cours chez Nick. Laissez-moi les expliquer. Pouvez-vous nous dire que j'ai perdu le fil de mes pensées à cet égard ? Parlons des différents cours que vous pourriez suivre par la suite. Parce que lorsque le flow nous amène à un point précis, j'en ai parlé plusieurs fois tout au long du cours, comme si vous ne l' avez pas déjà fait, Figma ou XD sont un bon endroit où il fait bon se retrouver Webflow y fait le design. J'ai donc des cours pour les deux. Allez voir mon Figma ou XD Essentials. Également. Une autre chose très pratique à savoir lorsque vous utilisez Webflow est le code. Nous nous sommes un peu penchés sur le sujet et nous avons en quelque sorte appris sur les cours, les chars et toutes sortes d'autres choses. Il existe des éléments fondamentaux du HTML et CSS qu'il serait très pratique de connaître. Même si tu ne veux pas le coder. Cela aide beaucoup au flux de travail. Donc elle a obtenu, j'ai quelque chose qui s' appelle le cours Web Design Essentials. Utilise VS Code comme , comme objet. Donc, c'est plutôt cool. Ce n'est que du code, mais je jette un coup d'œil à l'intro et quelques autres choses, c'est que j'ai l' impression de l'avoir assez bien décomposé là-dedans. Alors va vérifier ça. De plus, Malcolm, et non le développeur, apportez votre ordinateur portable, a un cours vraiment intéressant sur le vent arrière et l'avalanche, qui est une sorte de CSS. Si vous ne voulez pas descendre, surtout, un peu plus de code, vous pouvez créer vos propres fichiers et vents arrière sont vraiment un bon framework CSS et, comme Avalanche, c'est excellent pour JavaScript, les vents arrière sont vraiment un bon framework CSS et, comme Avalanche, c'est excellent pour JavaScript, alors jetez-y un coup d'œil aussi. D'autres cours, j'ai eu des lobes, Photoshop. Il y a un élément essentiel et avancé pour Photoshop Illustrator InDesign après avoir corrigé Premiere Pro InDesign, je dis cela. Voici donc quelques cours que vous pourriez suivre. De plus, si vous avez aimé le cours, assurez-vous d'en parler à vos amis, à votre famille et à vos collègues. Et aussi, si vous en avez la capacité et la facilité, j'adorerais avoir un lien vers le cours sur le flux de travail, l'incroyable cours Webflow de Dan. Cliquez ici pour trouver quelque chose comme ça. Ces choses sont très précieuses pour moi et pour mon entreprise, plus que la plupart des gens ne le pensent. Si tu peux, ce serait génial. Un grand merci également à l'équipe Bring Your Laptop. Je ne suis que le beau visage qui se trouve à l'avant. Et beaucoup de travail se coulisse avec mes éditeurs, Jason Hummels et Taylor Coleman. Merci beaucoup. Et aussi un grand merci à Stephen Butler et à son équipe d'assistants d'enseignement qui nous aident avec toute l'équipe Q&R Thanks. De plus, à ce stade, parfois, des personnes qui sont nouvelles, si vous êtes déjà concepteur Web, vous êtes concepteur Web, d'accord ? Ou développeur ou ingénieur. Et vous apprenez simplement le flux de travail en tant qu'outil supplémentaire. Certains d'entre vous seront cependant un peu plus inquiets. Un peu le syndrome de l'imposteur, comme un web designer du MIT. Maintenant, c'est totalement ou je vous donne permission d'écrire web designer à côté de votre nom. Vous utilisez Webflow incroyable outil populaire pour créer des sites Web interactifs et accessibles. Alors allez-y, soyez fier et considérez-vous comme un concepteur de sites Web. Mais je vous donne la permission pour tout le monde. Bravo. Nous avons atteint les N. Félicitations encore une fois. Va-t'en B3. Je ne sais pas Je ne sais pas comment suivre ces cours. Oui, je vais faire signe de la main et nous allons passer au noir. Tu es prête ? Tu fais signe de la main pour avoir l'impression que nous avons appris à nous connaître. Nous verrons, je vous verrai dans un autre cours. Très bien. Au revoir. Renseignez-vous ou créditez la fin de ces vidéos.