Atelier intensif complet sur Webflow : de la conception Figma au développement en passant par le freelance

1. Introduction: Bienvenue dans le camp de démarrage de The Complete Webflow. Avez-vous déjà voulu construire des sites Web modernes mais ne saviez pas comment coder ? Voulez-vous convertir votre design web en un site web entièrement réactif sans code ? Salut, je suis [inaudible] et je suis une interface utilisateur, designer UX. J' enseigne également la conception UI UX et le développement web à l'Université d'Economie et des Sciences Humaines de Varsovie. Dans ce cours, je vais vous montrer comment vous pouvez convertir n'importe quel design en un site Web entièrement fonctionnel sans codage. Oui, tu l'as bien entendu ? Sans écrire une seule ligne de code. Si vous n'avez pas d'expérience de développement préalable, ne vous inquiétez pas, car ce cours couvre tout ce que vous devez savoir. abord, nous allons plonger dans les bases de la conception web et du développement web, puis nous allons entrer dans Webflow. Webflow est un outil puissant qui vous permet de construire sites Web modernes complètement visuellement sans code. Il a été utilisé par des entreprises célèbres comme Dell, Upwork, Zendesk, et bien d'autres. Nous allons passer par les éléments Webflows, le style, animations, les interactions, et bien plus encore. Une fois que vous aurez appris les bases de Webflow, nous commencerons à construire un site Web complet pour une agence de design à partir de zéro. Vous apprendrez comment convertir votre design Figma en un site web entièrement réactif avec des animations et des interactions complexes qui fonctionnent le mieux sur n' importe quel appareil, qu'il s'agisse d'un mobile, d'une tablette ou d'un ordinateur. Ensuite, je vais partager quelques astuces et astuces avancées pour vous aider à vos compétences en conception Web et à devenir un développeur Web de classe mondiale. Dans la dernière partie de ce cours, je vais vous apprendre comment gérer votre propre entreprise de design web en tant que freelance. Vous apprendrez comment obtenir votre premier client, comment fixer le prix de votre travail, comment préparer de grandes propositions et bien plus encore. Ce cours s'adresse aux personnes qui sont complètement nouvelles dans le monde du développement web. Si vous êtes un débutant complet ou un concepteur UI UX qui veut construire des sites Web incroyables sans code, ce cours est fait pour vous. Si vous êtes prêt à devenir un développeur sans code et à construire des sites Web époustouflants en un rien de temps, je vous verrai en classe. 2. Introduction au Webflow: Qu' est-ce que Webflow ? Eh bien, Webflow est un outil moderne et puissant qui vous permet de créer sites Web professionnels et personnalisés visuellement sans code. Ne vous méprenez pas. Ce n'est pas un autre constructeur de sites Web basé sur des modèles, comme Wix et Squarespace, qui limite grandement votre créativité. En fait, c'est un outil incroyablement puissant qui vous permet de coder visuellement. Oui, tu m'as bien entendu. Avec Webflow, nous pouvons réellement développer des sites web personnalisés visuellement. Il ne vient pas avec toutes les limitations de ces sites Web basés sur des modèles. En ce qui concerne le développement web, il existe une grande variété de façons de développer un site Web. Nous pouvons construire un site Web en écrivant du code personnalisé, je veux dire HTML, CSS, et JavaScript, nous pouvons utiliser des plateformes basées sur des modèles comme Wix, Squarespace et WordPress, ou nous pouvons utiliser Webflow. Si vous ne savez pas comment ils diffèrent les uns des autres, ne vous inquiétez pas, laissez-moi vous expliquer plus à ce sujet. La première option nécessite de savoir coder. Vous devez apprendre HTML, CSS et JavaScript pour créer un site Web. La deuxième option ne nécessite pas de codage, et elle vous donne des modèles prédéfinis à utiliser. Cette option convient à tous ceux qui veulent construire un site Web simple rapidement, mais le compromis est la limitation qu'il vient avec. Enfin, vous pouvez utiliser Webflow pour développer un site Web à partir de zéro sans écrire une seule ligne de code, et surtout, sans aucune limitation. Mais comment est-ce possible ? Eh bien, quand vous utilisez Webflow, vous codez un site Web à partir de zéro, mais visuellement. C' est pourquoi Webflow vous permet de créer sites Web professionnels et personnalisés sans aucune restriction. 3. Environnement de la webflow: Hé, dans cette vidéo, on va parler de l'environnement de Webflow. Je vais vous montrer comment vous pouvez vous inscrire et comment vous pouvez vous connecter, quel plan devriez-vous utiliser, et aussi à quoi ressemble toute l'interface. Sans plus tarder, commençons. Tout d'abord, pour travailler avec Webflow, vous devez vous inscrire. Si vous cliquez sur le bouton « Démarrer » en haut de la page, vous pouvez vous connecter avec votre compte Gmail ou vous pouvez vous inscrire avec votre e-mail. C' est totalement à toi de décider. Une fois connecté, vous serez redirigé vers le tableau de bord. Pour utiliser Webflow, vous pouvez utiliser différentes options. Vous pouvez utiliser le compte gratuit ou vous pouvez utiliser l'un de leurs plans. Quelle est la différence ? Permettez-moi de vous montrer quel plan vous avez besoin pour procéder aux scores. Fondamentalement, Webflow a des plans de site et des plans de compte. On va plonger dans les détails plus tard. Mais pour l'instant, vous devez savoir que Webflow propose trois plans de compte différents. Le démarreur, qui est gratuit, lite, qui est de 16$ par mois, et Pro, qui est de 35$ par mois. Pour les scores, vous devez utiliser un forfait gratuit. Le plan de démarrage, vous pouvez créer jusqu'à deux projets. Il y a quelques limites, mais c'est parfait pour les fins éducatives et pour vous habituer à l'outil et à la pratique. Plus tard, lorsque vous souhaitez créer des projets pour vos clients, vous pouvez effectuer une mise à niveau vers le plan allégé ou le plan pro. On en parlera plus tard. Mais pour l'instant, il suffit de vous inscrire et d'utiliser un compte gratuit. Une fois inscrit, vous serez redirigé vers cette page. Voici le tableau de bord. Vous pouvez cliquer sur le bouton « Nouveau projet » et vous verrez cette page. Il y a des modèles gratuits que vous pouvez utiliser et il y a aussi des modèles payants. Cependant, pour ce cours, nous n'utiliserons aucun de ces modèles car nous allons apprendre à créer un site Web à partir de zéro. Nous avons toujours besoin de créer un site vierge. Vous avez juste besoin de sélectionner cette option, la première. Ici, vous pouvez spécifier le nom de votre projet. Par défaut, il vous donne un nom par défaut. Cependant, vous pouvez également spécifier un nom précis pour votre projet. Appelons ça nouveau. Je vais cliquer sur « Créer un projet ». On y va. Voici le designer. En fait, nous pouvons diviser l'ensemble de l'interface en différentes parties principales. Sur le côté gauche, vous pouvez voir qu'il y a la barre d'outils. Nous avons différentes options. Ensuite, nous avons le navigateur. En ce moment, le navigateur est sélectionné. Nous avons l'option ajouter qui inclut certains éléments dont nous parlerons plus tard. Nous avons des symboles, nous avons encore navigateur, je vous ai déjà montré. Nous avons des pages, nous avons des collections CMS, nous avons le commerce électronique, et enfin nous avons des actifs. Enfin, nous avons des paramètres. Au sommet, nous avons différentes options. Ce sont nos points d'arrêt dont nous parlerons plus tard. Mais comme vous pouvez le voir, nous avons le bureau, nous avons la tablette, nous avons le paysage mobile, et nous avons le portrait mobile. Cela détermine essentiellement la dimension de notre écran. Sur le côté droit ici, vous pouvez voir que nous avons différentes options. Nous avons le bouton de publication, ce qui est si important. Nous avons le bouton de partage du projet, et nous avons un code d'exportation. Sur le côté droit, nous avons le panneau de style. Nous avons d'autres paramètres, nous avons le gestionnaire de style, et nous avons l'onglet interactions. Nous allons parler de chacun de ces onglets spécifiquement en détail plus tard. Mais pour l'instant, vous avez juste besoin de savoir à quoi ressemble l'interface. Au milieu, on a la toile. C' est essentiellement là que nous concevons notre site Web et construisons notre site Web. C' est une toile vide. Comme vous pouvez le voir, puisque j'ai sélectionné cet élément de corps ici, vous pouvez voir que le panneau de style a maintenant quelques propriétés. Ce sont les propriétés CSS que nous pouvons modifier et utiliser pour nos projets. Chaque projet a des paramètres de projet. Si vous vous dirigez vers le coin supérieur gauche, vous pouvez voir ce logo W ou Webflow. Si vous survolez ce logo, vous verrez ce bouton de menu hamburger. Si je clique dessus, nous avons trois options. On a un tableau de bord. Si vous cliquez dessus, vous serez redirigé vers le tableau de bord. Nous avons des paramètres de projet et nous avons éditeur. Pour l'instant, nous n'allons pas parler d' éditeur parce que nous avons une vidéo spécifique pour cela. Mais maintenant, je vais vous montrer à quoi ressemblent les paramètres du projet. Si je clique dessus, nous serons redirigés vers les paramètres du projet. Ici, nous avons différentes options. Nous avons général, nous pouvons spécifier le nom du projet. Nous avons différentes options dont nous ne parlerons pas maintenant. Nous avons l'hébergement, nous avons éditeur, nous avons la facturation, le référencement, les formulaires, les fonds, les sauvegardes, les intégrations et le code personnalisé. Une fois que nous commencerons à créer nos projets, je vous montrerai comment vous pouvez utiliser ces options une par une. Mais pour l'instant, vous avez juste besoin de savoir que les paramètres du projet existent réellement. Il y a quelques options que vous pouvez obtenir aussi ici. Si je clique sur « Designer », nous serons redirigés vers l'outil de concepteur, qui est cet environnement. C' est tout pour cette vidéo. Je te verrai dans la prochaine. 4. Introduction au HTML et CSS: Que se passe-t-il lorsque vous ouvrez une page Web ? Lorsque vous visitez une page Web, le navigateur rend réellement le code écrit par le programmeur et vous montre le résultat. Par exemple, si vous allez sur votre site Web préféré et inspectez le code vous-même, vous pouvez voir comment ce site Web est construit. Vous pouvez également modifier le contenu de ce site Web pour vous amuser, mais localement parce qu'une fois que vous actualisez la page, tout votre travail acharné est parti. Vous pouvez vous demander pourquoi on parle de ça, ne sommes-nous pas censés construire des sites Web sans codage ? Oui, comme je l'ai promis, nous n'allons pas écrire même une seule ligne de code. Mais en tant que concepteur web et développeur web, il est crucial pour vous de comprendre comment une page Web est construite et structurée. En ce qui concerne le développement web, il y a deux composants principaux que chaque page Web est livré avec, HTML et CSS. HTML signifie HyperText Markup Language, et tout est au sujet du contenu d'une page Web. Il indique essentiellement au navigateur ce qu'il faut afficher sur la page ; titres, images, vidéos, boutons, etc. s'agit d'un code HTML simple, et comme vous pouvez le voir, il comprend certains éléments comme le titre, le corps, h1, et p. Les balises HTML. C' est ainsi qu'un navigateur comprend ce qu'il devrait afficher à l'utilisateur, mais cette page est ennuyeuse. Tu ne crois pas ? Eh bien, nous pouvons styliser chacune de ces balises pour rendre le contenu plus intéressant. À l'époque, chaque fois que nous voulions styliser nos pages Web, nous devions styliser chaque étiquette un par un. Chaque fois que nous voulions modifier nos styles, devinez quoi ? Nous avons dû changer chaque style en ligne un par un. Ce n'est pas très efficace. C' est pourquoi nous utilisons CSS. CSS signifie Cascading Style Sheets. Il nous permet de créer nos styles une fois dans un fichier séparé et les réutiliser encore et encore dans notre fichier HTML. Il prend toutes les informations sur la couleur, le positionnement, la taille, l'alignement, la topographie, et bien plus encore, et il les place dans une feuille de style séparée. Maintenant, chaque fois que nous voulons apporter des modifications, nous le faisons une fois et les modifications s'appliquent à toutes ces balises HTML simultanément. Mais comment fonctionne Webflow ? Tu te souviens quand j'ai dit qu'on allait coder, mais visuellement, je voulais vraiment dire ça ? Laissez-moi vous montrer comment ça marche. Voici le concepteur et il n'y a rien sous Canvas. Si vous allez à la section Ajouter, nous pouvons trouver quelques éléments. Ce sont les éléments HTML exacts, ou disons les balises HTML dont nous avons parlé. Nous avons section, blog div, titre, paragraphe, et bien plus encore. Ici, dans le navigateur, nous avons les éléments du corps. Vous souvenez-vous de la balise body dans le fichier HTML ? Ceci définit le contenu principal du fichier HTML. Tout fichier HTML a une balise body, et c'est pourquoi lorsque vous créez une page sur Webflow, vous y verrez toujours l'élément body par défaut. Nous pouvons ajouter d'autres balises HTML à l'intérieur de la balise body. Par exemple, si je vais à la section Ajouter, je peux faire glisser et déposer un élément de titre dans mon Canvas. Regarde ce qui se passe. Le titre est à l'intérieur de l'élément de corps. Au lieu d'écrire un tas de codes, nous faisons simplement glisser et déposer du code prêt à la production avec lequel nous pouvons interagir. Et le style ? Eh bien, si je sélectionne ce titre et me dirige vers le panneau de style sur le côté droit, je peux facilement modifier les propriétés CSS de cet élément particulier comme ça. Pour prouver que vous codez réellement la page à partir de zéro, je peux cliquer sur ce bouton CSS Aperçu en bas à gauche pour prévisualiser mon code CSS en direct. Si je change la couleur de ce titre, vous pouvez voir qu'une nouvelle propriété a été ajoutée ici. Maintenant, j'espère que vous avez une meilleure compréhension du fonctionnement d'une page Web et, surtout, du fonctionnement de Webflow. 5. Introduction au modèle de boîte: Voici une page Web simple qui a quelques éléments HTML comme en-tête, paragraphe, une image. Le modèle repères définit en fait le fonctionnement de la mise en page sur le web. Par exemple, ici, chacun de ces éléments HTML est traité comme une boîte. C' est comme une limite sur chacun d'eux. Toutes ces boîtes peuvent être positionnées et alignées selon les propriétés CSS que nous leur donnons. Mais pourquoi le web fonctionne-t-il comme ça ? Ne pouvons-nous pas simplement créer une page Web comme une diapositive PowerPoint ? Eh bien, nous le pouvons, mais le problème est que lorsque vous concevez un snide, il n'est pas réactif et que vous le concevez pour une dimension spécifique, mais ce n'est pas le cas pour une page Web. Lors de la construction d'un site Web, nous voulons toujours le rendre réactif afin qu'il puisse être affiché parfaitement sur n'importe quel appareil. Peu importe si c'est un MacBook, iMac, un iPhone, vous avez l'idée. En utilisant le modèle de boîte et CSS, nous pouvons créer des pages web réactives. Une autre chose importante à propos du modèle de boîte est que nous pouvons mettre des boîtes à l'intérieur d'autres boîtes. De cette façon, nous pouvons décider s'ils s'empilent les uns sur les autres ou à côté de l'autre. Nous pouvons également les aligner comme vous le souhaitez. Si nous voulions modifier l'espacement, nous pouvons utiliser les marges et le remplissage. Marge ajoute de l'espace à l'extérieur de la boîte, tandis que le remplissage ajoute de l'espace à l'intérieur de la boîte Jetons un coup d'oeil à un exemple du monde réel. Ici, nous avons différentes cartes et à l'intérieur nous avons différents éléments. En fait, ils sont tous considérés comme des boîtes, qu'ils sont placés soit à côté de l'autre, soit à l'intérieur l'un de l'autre. Nous pouvons modifier les propriétés CSS de chacune de ces cases pour contrôler le style et la mise en page de chaque élément. Jetons un coup d'oeil à quelques sites célèbres. Comme vous pouvez le voir, tous ces sites Web sont construits en utilisant le modèle de boîte. Si vous voulez devenir un concepteur web professionnel et développeur, vous devez comprendre comment le modèle de boîte fonctionne à fond. 6. Éléments de flux Web: Comme vous vous en souvenez, nous avons parlé des éléments HTML ou des balises HTML. Dans Webflow, vous pouvez les trouver dans la section Ajouter. Sur le côté gauche, si vous cliquez sur cette icône « Plus », vous pouvez aller à la section Ajouter, et ici nous avons deux onglets différents, Eléments et Layouts. L' onglet Dispositions inclut en fait certaines mises en page prédéfinies. Nous n'allons pas travailler avec ces mises en page pré-construites dans nos projets puisque nous allons créer notre propre mise en page, mais vous avez juste besoin de savoir qu'elles existent. Si vous allez dans l'onglet Éléments, vous pouvez trouver tous les éléments HTML ici. Nous avons différentes sections comme Mise en page, Basic, Topographie, CMS, Médias, Forums et Composants. Nous allons parler de chacun de ces éléments spécifiquement dans les prochaines vidéos, mais pour l'instant, je vais vous montrer comment vous pouvez utiliser ces éléments, comment vous pouvez ajouter ces éléments à votre Canvas. Eh bien, afin d'ajouter un élément à votre Canvas, vous pouvez simplement glisser et déposer cet élément particulier ici, juste comme ça. Comme vous pouvez le voir, nous avons maintenant l'élément de section. Nous pouvons voir tous nos éléments directement dans le navigateur. Si vous voulez trouver le navigateur, vous pouvez cliquer sur cette icône. Si je vais à l'Ajouter et essayez de faire glisser et déposer un autre élément. Par exemple, un conteneur, là nous allons, vous pouvez voir que le conteneur a été ajouté juste en dessous de la section. Vous devez comprendre que dans la conception web et le développement web, la hiérarchie de nos couches est importante. Par exemple, ici, lorsque nous avons une section, comme vous pouvez le voir, cette section est placée juste en haut. C' est pourquoi, lorsque vous regardez le Canvas, vous pouvez voir que la section a été placée au-dessus du conteneur. Si je veux mettre le conteneur au-dessus de la section, je peux simplement le faire glisser et le déposer juste au-dessus de la section et nous y allons. Sa place a été changée. Chaque élément a son icône spécifique juste à côté de son nom. Par exemple, ici, comme vous pouvez le voir, le conteneur a une icône unique et une section a sa propre icône unique. C' est un très bon moyen de savoir quel type d'élément vous utilisez. Comme vous vous souvenez, quand nous avons parlé du modèle de boîte, j'ai mentionné que vous pouvez mettre des boîtes dans d'autres boîtes. Jetons un coup d'oeil à un exemple. Si je sélectionne ce conteneur, je peux le faire glisser et le déposer, et le mettre dans la section. On y va. Maintenant, ce conteneur est imbriqué dans cette section, et comme vous pouvez le voir, il a été indenté. Je peux ajouter un autre élément, par exemple, un bloc Div à l'intérieur de mon conteneur ici, nous y allons, et il a été imbriqué aussi. Le conteneur est maintenant le parent de cet élément de bloc Div et le bloc Div est l'enfant de ce conteneur. Le conteneur est l'enfant de la section et la section est le parent du conteneur. Donc, je peux facilement effondrer et étendre ces éléments. Si vous avez plusieurs sections et plusieurs éléments, comme ça, et que vous voulez tout réduire en même temps, vous pouvez cliquer sur cette icône en haut, et si je clique dessus, une fois de plus, je peux tous les étendre. Vous pouvez également développer le navigateur en cliquant sur cette icône, et vous pouvez épingler le navigateur comme ça. Dans les prochaines vidéos, nous allons plonger dans les éléments de Webflow. On se voit alors. 7. Bloc Div: C' est quoi un bloc Div ? Eh bien, un bloc Div est la boîte la plus basique sur une page Web. Si vous allez à la section Ajouter, vous pouvez voir que nous avons différentes sections ici. Nous avons la disposition, la base, la topographie, etc. Maintenant, sous la section de base, nous avons différents éléments et le premier est appelé bloc Div. Si j'essaie de le glisser et de le déposer dans mon canevas, vous pouvez voir que le bloc Div a été ajouté à mon canevas ici, et il prend toute la largeur de la toile. Un bloc Div est en fait dimensionné en fonction du contenu à l'intérieur. Cependant, ici comme vous pouvez le voir, il a créé une limite, et il semble qu'il y en a quelques-uns à l'intérieur. Cependant, si je prévois cela, si je clique simplement sur cette icône i, nous pouvons voir que rien n'est ici. C' est en fait une boîte vide. C' est une boîte dynamique car lorsque vous y ajoutez de plus en plus d'éléments, sa taille sera modifiée en conséquence. Essayons. Je vais aller de l'avant et essayer d'ajouter un titre dans ce bloc Div. Juste comme ça. Maintenant, je vais aller de l'avant et ajouter un paragraphe. On y va. Laissez-moi y aller et ajouter un bouton. Cool. Maintenant, ces trois éléments sont à l'intérieur de ce bloc Div. Comme vous pouvez le voir, la taille du bloc Div a été modifiée en conséquence. Si je supprime l'un de ces éléments, vous pouvez voir que la taille du bloc Div a été modifiée à nouveau. Un bloc Div peut généralement être n'importe quoi. Ça pourrait être une image, ça pourrait être une ligne. Mais la plupart du temps, nous utilisons un bloc Div afin d'aligner les éléments et de regrouper les éléments ensemble. Par exemple, nous regroupons ici ces deux éléments ensemble. Chaque fois que nous voulons modifier, par exemple, la marge de ces blocs Div particuliers, nous pouvons simplement nous diriger vers cette section de collage sur le panneau latéral ici. Par exemple, je peux définir la marge supérieure à 70. On y va. Ces deux éléments ont été déplacés car ils sont regroupés à l'intérieur de ce bloc Div. Bien qu'un bloc Div prenne toute la largeur de la toile par défaut, nous pouvons également lui donner une largeur et une hauteur spécifiques. Si vous passez à la section de taille du panneau de style ici, vous pouvez spécifier une largeur particulière, par exemple, 400 pixels. On y va. Nous pouvons également modifier la hauteur. Nous pouvons le définir à 300 pixels, et la hauteur du bloc Div a été modifiée. Maintenant, ce bloc Div a une largeur et une hauteur fixes. Selon nos besoins, nous pouvons donner à nos blocs Div largeur et hauteur spécifiques. Comme je l'ai mentionné précédemment, un bloc Div peut être n'importe quoi, par exemple, une image. Laissez-moi aller de l'avant et glisser-déposer et d'autres blocs Div ici juste en dessous de ce paragraphe. Supposons que nous voulons ajouter une image ici, par exemple, nous voulons faire de ce bloc Div une image. On peut aller au panneau de diapositives, on peut faire défiler vers le bas. Si nous allons à la section d'arrière-plan. Ici, nous avons l'image et le dégradé. Si je clique sur ce bouton plus à partir d'ici, je peux cliquer sur Choisir l'image et je peux accéder à tous mes actifs. Par exemple, utilisons cette image. Pour l'instant, nous ne parlerons pas de tous ces paramètres, mais permettez-moi de changer la position au centre et à la couleur. On y va. Comme vous pouvez le voir, nous avons ce bloc Div, mais ce bloc Div a en fait un fond d'image. Si je veux le rendre plus grand, je peux définir la taille, par exemple, la hauteur à des pixels. Bien sûr, nous allons parler de toutes ces propriétés. En fait, ce sont des propriétés CSS dans les vidéos à venir, mais pour l'instant nous avons juste besoin de nous concentrer sur les éléments de flux web. Nous devons comprendre comment ils fonctionnent, et pourquoi avons-nous besoin d'eux pour construire un site web professionnel et moderne. 8. Section: Qu' est-ce qu'une section ? Dans cette vidéo, nous allons parler de Sections. Si vous allez à la section Ajouter ici, sous la mise en page, vous pouvez voir que nous avons différents éléments. Nous avons Section, Conteneur, Grille et Colonnes. Ici, je vais aller de l'avant et ajouter une section dans ma toile. Laisse-moi glisser et déposer une section ici, et on y va. La section a été ajoutée. Eh bien, une section prend en fait toute la largeur de la fenêtre du navigateur, mais attendez, n'est-ce pas comme un bloc Div ? Oui, il agit en fait comme un bloc Div, cependant, avec une différence. La seule différence entre une Section et un Block Div est en fait la signification du contenu que vous mettez à l'intérieur de ces éléments. Lorsque nous utilisons une section, le contenu à l'intérieur doit être logiquement connecté. Par exemple, lorsque nous concevons un site Web, nous pouvons avoir différentes sections, la section héros, la section client, la section témoignage, et chaque section contient du contenu. Par exemple, un titre, un sous-titre, un bouton. Lorsque nous regrouperons tous ces contenus, nous les mettons dans une Section, donc nous les regrouperons en utilisant une Section et non un Block Div. Pour tout autre chose, nous pouvons utiliser un bloc Div. Par exemple, lorsque nous voulons aligner certains éléments, lorsque nous regroupons certains éléments afin de les styliser. C' est essentiellement la principale différence entre un bloc Div et une section. Lorsque nous commençons à concevoir nos projets, vous comprendrez vraiment quelle est la différence entre une section et un bloc div. Mais pour l'instant, permettez-moi de vous dire que nous utilisons des Sections pour structurer nos sites Web. Fondamentalement pour n'importe quel site Web, pour n'importe quel projet, ce que vous devez faire est d'ajouter une section juste après l'élément body. Ici, nous devons ajouter une section et nous pouvons ajouter notre contenu et nos blocs Div à l'intérieur de cette section. Essayons. Je vais prendre ce bloc de Div. Puisque ce bloc Div a une hauteur spécifique, laissez-moi le définir sur auto. Je vais régler la hauteur sur auto. Ensuite, je vais le glisser et le déposer à l'intérieur de la Section. On y va. Une section est dimensionnée en fonction du contenu à l'intérieur. Pour mieux le comprendre, je vais sélectionner cette section et je vais me diriger vers le panneau latéral sur le côté droit et me laisser modifier la couleur de l'arrière-plan. Je vais aller à Arrière-plan et par défaut, c'est réglé sur transparent. Je vais le mettre à autre chose. Par exemple, ce violet. Vous pouvez maintenant voir que la hauteur de cette section est déterminée par le contenu à l'intérieur. Si je sélectionne ce bloc Div, cette image, et que je modifie sa hauteur à 200 pixels, vous pouvez voir que la hauteur de cette section a également été modifiée. Vous devez toujours garder à l'esprit que la hauteur de la Section est déterminée en fonction du contenu à l'intérieur. Comme je l'ai mentionné précédemment, une Section prend par défaut toute la largeur de la toile, ou disons la fenêtre du navigateur. Cependant, nous pouvons modifier cela. Nous pouvons remplacer ces préférences et ces propriétés. Si vous passez à la taille ici, laissez-moi vous montrer, je peux définir la largeur à 500 pixels, par exemple, juste comme ça. Vous pouvez facilement remplacer toutes ces propriétés. Nous parlerons de ces propriétés plus tard, mais pour l'instant, vous avez juste besoin de savoir que nous structurons nos sites Web toujours comme ça. Après Section, nous mettons généralement un conteneur et ensuite nous ajouterons notre contenu à l'intérieur d'un conteneur. Nous parlerons du conteneur dans la prochaine vidéo. 9. Conteneur: C' est quoi un conteneur ? Dans cette vidéo, nous allons parler de conteneurs. Si je vais à la section Ajouter comme d'habitude, je peux aller à la section de mise en page et à partir d'ici juste à côté de la section, je peux trouver conteneur. Comme je l'ai mentionné dans la vidéo précédente, lorsque nous concevons un site Web, nous essayons de structurer notre site Web d'une manière particulière. En fait, nous essayons de garder tout organisé. C' est pourquoi nous avons tous ces éléments différents ici. Fondamentalement, les sections et les conteneurs ne sont que des blocs div avec des styles prédéfinis. Par exemple, un conteneur a une largeur spécifique. Si j'essaie de glisser et déposer un conteneur dans ma toile, on y va. Comme vous pouvez le voir, c'est juste un div simple qui a une largeur maximale. Il a une largeur spécifique de 940 pixels par défaut. Si je veux garder tout organisé, je peux prendre ce bloc div, je vais définir la largeur à auto comme ça. Comme vous pouvez le voir ce bloc div puisque la largeur et la hauteur sont définies sur auto prend toute la largeur de la page. Si je veux garder tout bien organisé au centre, je peux sélectionner ce div comme et le faire glisser et le déposer dans mon conteneur. On y va. Maintenant, tout est placé à l'intérieur de ce conteneur qui a une largeur par défaut. Bien sûr, vous pouvez aller de l'avant et modifier sa largeur, si vous le souhaitez. Par exemple, pour les écrans plus grands, vous pouvez vous diriger vers la propriété size, vers la section size ici et définir la largeur maximale à 1100. Juste comme ça. C'est à vous de décider comment vous voulez les utiliser. Vous pouvez décider de ne pas utiliser un conteneur et simplement utiliser un bloc div et définir une largeur spécifique pour cela. C' est tout à fait bien. Vous avez juste besoin de savoir que ce ne sont que des éléments préconstruits afin de rendre notre vie beaucoup plus facile. J' espère maintenant que vous connaissez la vraie différence entre une section, conteneur et un bloc div. Ils sont fondamentalement tous les mêmes. Ce sont des variations d'un bloc div avec des styles prédéfinis. Comme je l'ai mentionné dans la vidéo précédente, chaque fois que nous voulons concevoir un site Web, chaque fois que nous voulons construire un site Web, nous utilisons d'abord une section, puis nous utilisons un conteneur et à l'intérieur nous mettrons nos éléments. C' est la meilleure façon d'organiser et de structurer un site Web. Si nous avons besoin de créer plus de sections, nous pouvons simplement glisser et déposer plus de sections ici, ou nous pouvons simplement copier et coller nos sections comme ça. 10. Grille: C' est quoi une grille ? Dans cette vidéo, nous allons parler des grilles CSS. Si vous passez à la section Ajouter sous la catégorie Mise en page, vous pouvez voir que nous avons un élément de grille. C' est en fait une grille CSS. Ce n'est pas une balise HTML parce que fondamentalement, nous pouvons transformer n'importe quel bloc en une grille. Nous en parlerons dans les prochaines vidéos, mais pour l'instant, allons de l'avant et glisser-déposer ces éléments de grille dans notre toile. On y va. Ici, j'ai une section, et puis j'ai un conteneur. A l'intérieur de ce conteneur, je vais laisser tomber ma grille. Comme vous pouvez le voir, une grille n'est rien d'autre qu'un guide. Les grilles nous aident à organiser notre contenu de manière dynamique. Lorsque nous avons plusieurs images, par exemple, que nous voulons organiser dynamiquement, ou même quand nous avons des blocs Div que nous voulons organiser dynamiquement et proprement, nous pouvons utiliser des grilles. Vous devez comprendre qu'une grille sert de guide, donc c'est comme un espace réservé pour notre contenu. Comme vous pouvez le voir maintenant, nous sommes en mode édition. Ici, par défaut, nous avons deux colonnes et deux lignes, et si vous regardez le côté droit, vous pouvez voir qu'ici nous pouvons modifier les préférences de notre grille. Par exemple, nous pouvons modifier la quantité de gouttière, qui est l'espacement entre les lignes et les colonnes. Par défaut, il est défini sur 16 pixels par 16. Vous pouvez le régler sur le montant que vous voulez. Vous pouvez également le modifier ici manuellement comme ça, et si vous voulez ajouter plus de colonnes et plus de lignes à votre grille, vous pouvez simplement cliquer sur ce bouton Plus juste ici pour ajouter plus de colonnes, et si vous voulez ajouter plus de lignes, vous pouvez cliquer sur ce bouton Plus ici. Alternativement, vous pouvez appuyer sur ce bouton Plus directement dans les paramètres pour ajouter une nouvelle colonne et pour les lignes, vous pouvez cliquer sur ce bouton Plus. Une fois que vous avez créé votre grille, vous devez quitter le mode Edition. Pour ce faire, vous pouvez appuyer sur Échap sur votre clavier ou vous pouvez cliquer sur ce bouton bleu Terminé en bas ici. Comme vous pouvez le voir, j'ai déjà créé quatre blocs Div simples, et chacun d'eux comprend un titre, un paragraphe et un bouton. Ce que nous allons faire est de faire glisser et déposer ces blocs Div dans notre grille, mais d'abord, voyons combien de blocs nous avons. Nous avons en fait quatre blocs Div différents, donc, je vais sélectionner mes éléments de grille ici et puis je vais cliquer sur ce bouton rouge ou rosâtre. Puisque nous avons quatre blocs Div différents, je vais supprimer certaines de ces colonnes et lignes. Supprimons deux de ces colonnes et deux de ces lignes. Maintenant, nous avons une grille deux par deux ; nous avons deux colonnes et deux lignes. C'est parfait. Maintenant, je vais ajuster l'écart ou la gouttière, alors mettons-le à 20 pour les colonnes et les rangées. Je vais cliquer sur ce bouton Terminé, et c'est tout. Maintenant, ce que nous devons faire est de sélectionner notre bloc Div, faire glisser et de le déposer à l'intérieur de la grille, juste comme ça. Une chose à mentionner à propos des grilles est que lorsque vous ajoutez du contenu à votre grille, le contenu prendra la prochaine cellule disponible dans la grille. Comme vous pouvez le voir, le premier bloc Div a pris la première cellule, et maintenant si je sélectionne ce bloc Div et le glisser-déposer à l'intérieur de la grille, nous pouvons voir qu'il a fallu la prochaine cellule disponible. Bien sûr, si je modifie leur ordre dans le navigateur, vous pouvez voir que leur lieu change, juste comme ça. Maintenant, faisons la même chose pour les deux blocs Div restants. Je vais les sélectionner et les faire glisser et les déposer ici. On y va. Faisons la même chose pour le dernier bloc Div. Nos blocs Div sont à l'intérieur de notre grille. Cependant, si je sélectionne ma grille, et si je passe en mode édition, vous pouvez voir que ces cellules sont plus grandes, et ces blocs Div ne prennent pas toute la largeur de chaque cellule. C' est parce que j'ai donné à ces blocs Div une largeur fixe. Donc, si je sélectionne du contenu et modifie la largeur de 400 à Auto, voir ce qui se passe. Maintenant, il prend toute la largeur de cette cellule, et c'est exactement ce que nous voulons. Si vous souhaitez modifier la hauteur de votre grille, vous pouvez sélectionner votre grille et définir la hauteur à, par exemple, 700 pixels, exactement comme ça. Ou je peux le régler à 500 pixels. Permettez-moi de supprimer cette section pendant une seconde. L' une des choses les plus importantes à propos des grilles est qu'elles sont réactives par défaut. Jetons un coup d'oeil. Si j'appuie sur le bouton Aperçu ici et que j'essaie de modifier la dimension de mon écran, vous pouvez voir que ces contenus sont dynamiques. Ils sont réactifs par défaut parce que nous avons utilisé une grille. C' est pourquoi les grilles sont si puissantes en termes de réactivité. Si je vais au point de base du bureau et que je veux ajouter du remplissage, je peux sélectionner le conteneur, puis ici je peux définir un rembourrage. Bien sûr, nous parlerons de toutes ces propriétés plus tard, mais je veux juste vous montrer comment fonctionnent les grilles, en fait, en termes de réactivité. On y va. Mais que faire si je veux modifier la mise en page de cette grille ? C' est si simple. Je peux sélectionner ma grille, je peux passer en mode Edition. De là, je peux modifier le nombre de lignes et de colonnes. Supposons que je veux empiler ces contenus verticalement. J' ai juste besoin d'une colonne. Je vais supprimer cette colonne, et je vais ajouter deux lignes supplémentaires et appuyer sur « Terminé » et c'est fait. Comme vous pouvez le voir, nous avons maintenant quatre lignes différentes qui sont placées les unes sur les autres et elles sont dynamiques. Si j'essaie de vérifier sa réactivité, vous pouvez voir qu'ils sont toujours dynamiques sur tous les appareils. Mais que faire si vous voulez que l'un de ces blocs Div prenne plus d'une cellule ? Nous pouvons le faire aussi. Ajoutons une colonne et supprimons ces deux lignes supplémentaires, juste comme ça. Je vais supprimer le titre 4, ce dernier bloc Div. Supposons que vous voulez prendre le titre 3, ce dernier bloc Div, et que vous vouliez prendre les deux dernières cellules ? Pour ce faire, vous pouvez utiliser cette poignée dans le coin inférieur. Si je fais un clic gauche sur cela et glisser-déposer, là nous allons, maintenant il pourrait facilement dépenser le contenu pour prendre plus de cellules. La bonne nouvelle, c'est qu'elle est toujours dynamique et qu'elle est toujours réactive. Jetons un coup d'oeil. Parfois, il se peut que nous devions placer notre contenu manuellement. Comme vous vous en souvenez, j'ai mentionné que lorsque vous ajoutez du contenu à votre grille, il prend la prochaine cellule disponible par défaut. Mais que faire si je veux les placer manuellement ? Eh bien, on peut le faire. Laisse-moi annuler l'opération. Et si je veux placer ce dernier bloc de Div ici dans cette dernière cellule ? Eh bien, nous pouvons le faire. Nous devons d'abord sélectionner ce bloc Div, et si nous nous dirigeons vers les paramètres Grid Child sur le côté droit, vous pouvez voir que par défaut, sa position est définie sur auto. Si je le mets à manuel, maintenant, je peux juste le faire glisser et le déposer ici. Maintenant, nous pouvons facilement positionner notre contenu manuellement. J' espère que vous avez une meilleure compréhension des grilles. Nous allons travailler avec des grilles au lot lorsque nous commencerons créer nos projets. Alors, à vous voir. 11. Faire une liste: Il y a des moments où nous voulons énumérer certains éléments de notre projet, peu importe si nous avons une liste d'images ou une liste d'éléments, l'élément de liste pourrait être si utile. Si vous allez dans la section Ajouter sous la catégorie de base, vous pouvez trouver une liste. Si je fais glisser la liste dans mon conteneur, vous pouvez voir que par défaut il a trois éléments de liste. Comme vous pouvez le voir, cette fenêtre Paramètres de liste apparaît. Nous avons deux types de listes. Nous avons la liste non ordonnée et la liste ordonnée. La différence, c'est ça. Lorsque vous utilisez une liste non ordonnée, il n'y a pas de nombre. Si vous le définissez sur commandé, vous pouvez voir que nous avons des numéros. Permettez-moi de sélectionner cette liste et de modifier la couleur de ce texte en blanc afin que vous puissiez mieux voir. Parfait. Si je l'ai réglé sur non commandé, vous pouvez voir que nous n'avons que des points de balle. En termes de style, nous n'avons pas de balles du tout et de balles. Laissez-moi double-cliquer sur le premier élément de la liste ici pour ajouter quelque chose. Écrivons des éléments. Pour le second, je vais écrire autre chose, écrivons web design. Pour le dernier, je vais écrire le développement web. Super. Maintenant, nous avons trois éléments de liste différents et si je veux ajouter d'autres éléments de listes, je peux simplement le copier et le coller en utilisant la commande C et commande V ou le contrôle C et le contrôle V. Alternativement, vous pouvez aller à la section Ajouter et sous la catégorie de base, vous pouvez voir que nous avons un élément distinct pour l'élément de liste. Vous pouvez faire glisser et déposer un élément de liste uniquement à l'intérieur d'une liste, juste comme ça. Mais peut-on énumérer des images ? Bien sûr qu'on peut. Laisse-moi te montrer. Je peux aller sur les Actifs et je peux faire glisser et déposer une image ici. On y va. Je vais diminuer sa largeur à, disons 300 pixels. Peu importe le type d'éléments que vous avez, vous pouvez toujours les énumérer. Si vous voulez ouvrir les paramètres de la liste, vous pouvez sélectionner votre élément de liste dans le navigateur et vous pouvez cliquer sur cette icône « Paramètres » juste à côté du nom de la liste. On y va. Alternativement, vous pouvez sélectionner vos éléments de liste et vous pouvez vous diriger vers les paramètres des éléments juste à côté du panneau de style juste ici, et nous avons les paramètres de liste. 12. Bloc de lien: Qu' est-ce qu'un bloc de liens ? Eh bien, un bloc de liens est un conteneur cliquable. Tout contenu que vous mettez à l'intérieur d'un bloc de liens devient cliquable. C' est très utile parce que nous pouvons parfois avoir besoin de rediriger les utilisateurs vers une autre page ou une autre section de notre site Web, ou même vers un autre site Web. Nous pouvons le faire en utilisant un bloc de liens. Si vous allez à la section Ajouter sous la base, vous pouvez voir que nous avons ce bloc de liens. Laissez-moi glisser et déposer un bloc de lien directement dans ce conteneur et comme vous pouvez le voir c'est juste un bloc div cependant, c'est cliquable. Ce bloc de liens a quelques paramètres. Par défaut, vous pouvez voir l'URL, ici vous pouvez spécifier l'URL vers laquelle vous voulez rediriger l'utilisateur. Par exemple, ici, je peux écrire google.com. Je peux aller à la page lorsque nous créons plus de pages pour notre site Web, par exemple, page de contact, page d'inscription, etc nous pouvons choisir notre page ici. Lorsque nous créons différentes sections sur notre site Web, nous pouvons utiliser cette section de page. Par exemple, lorsque nous créons un [inaudible], nous pouvons avoir quelques menus. Lorsque l'utilisateur clique sur l'un de ces menus, il doit être dirigé vers une section spécifique de notre page d'apprentissage. Nous pouvons choisir une section ici. Nous parlerons de tous ces paramètres plus tard lorsque nous commençons à les utiliser, vous pouvez définir une adresse e-mail, le sujet de cet e-mail, vous pouvez définir un numéro de téléphone et enfin, vous pouvez même choisir une pièce jointe. Vous devez vous rappeler que vous pouvez utiliser un bloc de lien pour n'importe quoi. Vous pouvez l'utiliser pour les cartes, vous pouvez l'utiliser pour des éléments spécifiques, une icône, n'importe quoi. Laissez-moi aller de l'avant et ajouter un titre à l'intérieur juste pour vous montrer comment cela fonctionne. Comme vous pouvez le voir, dès que j'ajoute le titre ici dans ce bloc de liens, son style a été changé car maintenant c'est un lien. Je peux aller de l'avant et remplacer manuellement ces paramètres. Par exemple, sous la section typographie sur le panneau latéral, je peux définir sa déclaration sur none. Permettez-moi de modifier sa couleur en blanc, comme ça. Si je prévisualise notre projet, vous pouvez maintenant voir que dès que j'ai survolé cet en-tête, le curseur a été changé en pointeur. Maintenant, si vous ne pouvez pas voir le pointeur, c'est probablement à cause de votre navigateur. Vous pouvez effacer le cache de votre navigateur ou l'essayer sur un autre navigateur. Mais un bloc de liens change automatiquement votre curseur en pointeur. Si je clique dessus, rien ne se passe parce que nous n'avons pas spécifié de lien pour cela. Si je sélectionne ce bloc de liens et que je modifie l'URL, par exemple, définissez-le sur google.com. Maintenant, si je prévois cela et si je clique dessus, je serai redirigé vers Google. En un mot, un bloc de lien est un bloc div cliquable. Eh bien, il y a des moments où nous voulons convertir nos blocs div en un bloc de lien au lieu de créer un bloc de lien à partir de zéro. Bien sûr, nous pouvons aller de l'avant et glisser et déposer un bloc de lien ici et ajouter un bloc div à l'intérieur et concevoir nos cartes et éléments. Mais parfois, nous pouvons concevoir notre carte ou nos éléments d'abord, puis nous pourrions avoir besoin de la convertir en un bloc de liens. Comment pouvons-nous faire ça ? Si nous sélectionnons notre bloc div, par exemple, ici, cette carte, et si vous faites un clic droit sur son nom juste sous Canvas, nous avons beaucoup d'options. Le second dit convertir en bloc de liaison. Si je clique dessus, on y va. Maintenant, le style de ces éléments, les éléments enfants a été changé parce que maintenant c'est un lien. Bien sûr, je peux aller de l'avant et remplacer ces paramètres, mais je ne vais pas le faire parce que je veux juste vous montrer comment fonctionne le bloc de lien. Si je prévisualise mon projet, vous pouvez maintenant voir que cette carte est cliquable comme ça. Cependant, les autres cartes ne sont pas parce que les autres cartes sont juste des blocs div simples. 13. Bouton: Presque tous les sites Web utilisent des boutons. Les boutons sont si importants en matière de conception web et de développement web, car ils permettent aux utilisateurs de prendre des mesures. Ils sont généralement utilisés pour notre appel à l'action. Si vous allez à la section Ajouter, nous pouvons voir que nous avons le bouton sous la base. En fait, un bouton n'est rien d'autre qu'un bloc de liens. C' est juste une marque cliquable avec un bloc de texte à l'intérieur. Si je glisse et dépose ce bouton dans ma carte, vous pouvez voir qu'il a des styles par défaut, et je peux lui donner une URL comme un lien comme nous avons tous ces paramètres que nous avons déjà discutés. Mais pour l'instant, allons de l'avant et prévisualisons ça. Comme vous pouvez le voir, le curseur a été modifié, car il s'agit en effet d'un bloc de liens. Nous pouvons modifier toutes les propriétés de cet élément bouton. Par exemple, nous pouvons modifier sa couleur ici dans le panneau de style. Si vous double-cliquez dessus, vous pouvez modifier le texte. Écrivons une connexion comme ça, mais parfois nous pourrions avoir besoin de créer un bouton personnalisé. Par exemple, si vous souhaitez ajouter une icône à ce bouton, nous ne pouvons pas utiliser l'élément bouton. Nous devons utiliser un bloc de lien, puis nous devons ajouter un bloc de texte à l'intérieur et aussi une image. C' est ainsi que vous pouvez créer un bouton personnalisé, et nous en parlerons plus tard. L' élément bouton a des états différents. Nous allons parler des états en détail, mais pour l'instant vous avez juste besoin de savoir que chaque bouton a quelques états. Il n'a pas, planer, pressé, concentré et visité. Si vous allez à la section Selector, voici où nous spécifions nos classes CSS dont nous parlerons plus tard, et si vous cliquez sur cette flèche vers le bas, vous pouvez voir tous les états de votre bouton. Si je vais au vol stationnaire, je peux modifier le style simplement, juste comme ça. Maintenant, si je passe à l'état none et prévisualise ce bouton, et que je survole, vous pouvez voir que l'état du survol a un style différent. Lorsque nous plongons dans le style et les propriétés CSS, nous parlerons de tous ces détails. 14. Typographie: En ce qui concerne la conception web et le développement web, typographie joue un rôle important. Je ne peux pas imaginer concevoir un site Web sans utiliser de texte, n'est-ce pas ? Dans cette vidéo, nous allons parler de la typographie. Si vous passez à la section Ajouter sous la catégorie Typographie, vous pouvez voir que nous avons six éléments différents. Nous avons titre, paragraphe, lien de texte, bloc de texte, citation de bloc et texte enrichi. Plongons dans chacun d'eux. Je vais commencer par aller. Le titre est une balise HTML. Il est utilisé pour créer des titres et des sous-titres. Nous avons six rubriques différentes, de H1 à H6. Une chose importante à propos des en-têtes est que les moteurs de recherche et les lecteurs d' écran essaient de comprendre le contenu de notre site Web en fonction des en-têtes Vous devez donc vous assurer de les utiliser correctement. En ce moment, j'ai deux cartes différentes, et en haut j'ai un titre. Comme vous pouvez le voir, il est dit H1. Si je clique sur cette « icône Paramètres », je peux choisir le type de titre. Comme vous pouvez le voir, nous avons six rubriques différentes. H1 est le plus grand, et H6 est le plus petit. H1 définit le titre ou le sous-titre le plus important de votre page Web, tandis que H6 définit le titre ou sous-titre le moins important de votre page Web. Vous devez vous assurer de les utiliser à bon escient, car Google, par exemple, vérifie vos en-têtes pour analyser votre contenu et classer votre site Web. Lorsque nous commencerons à construire notre projet, nous parlerons beaucoup de titres, mais pour l'instant vous avez juste besoin de savoir que nous avons six rubriques différentes, et H1 est le plus important, et H6 est le moins important. Une chose à mentionner ici est que vous ne devriez jamais utiliser des en-têtes juste pour rendre un texte plus grand ou gras, c'est faux. Pour ce faire, vous pouvez utiliser les propriétés CSS dont nous parlerons plus tard. Les en-têtes ont des styles par défaut. Ils ont des tailles de police par défaut, des poids de police, etc. Mais vous pouvez remplacer ces styles par défaut plus tard. Passons maintenant aux éléments typographiques suivants, qui est le paragraphe. Le paragraphe nous permet de créer du contenu multi-phrases. Comme vous pouvez le voir ici, j'ai un paragraphe et il y a plusieurs lignes de texte ici. Je peux double-cliquer pour modifier facilement ce paragraphe, et si je veux styler un mot spécifique ou plusieurs mots ici, je peux le sélectionner, juste comme ceci, et je peux utiliser le style en ligne ici. Par exemple, je peux le rendre en gras, je peux en faire un lien comme ça, ou je peux simplement sélectionner mon paragraphe et le formatage clair. Nous parlerons de cette option Envelopper avec du spam plus tard, c'est plus avancé, donc nous allons la laisser pour l'instant. Passons à l'élément suivant. Comme vous pouvez le voir ici, nous avons un lien texte. Un lien de texte est juste un texte qui est cliquable comme un bouton, vous pouvez l'utiliser pour un bouton de texte. Laissez-moi glisser et déposer un lien texte ici, et je vais le placer juste à côté de ce bouton. Comme vous pouvez le voir, ce n'est qu'un lien. Il a toutes les fonctionnalités d'un lien comme vous pouvez le voir, nous pouvons spécifier une URL. Nous pouvons simplement modifier toutes ces préférences ici. En fait, ce bouton Lire la suite est un lien de texte avec un remplissage, donc si vous voulez créer un bouton personnalisé, vous utilisez simplement un lien de texte et ensuite le styliser. Passons à l'élément suivant, qui est le bloc de texte. Un bloc de texte est utilisé pour tout ce qui n'est pas un en-tête, paragraphe ou un lien de texte. Laisse-moi aller de l'avant et glisser-déposer ce bloc de texte ici, on y va. Comme vous pouvez le voir, c'est juste un conteneur avec un texte à l'intérieur. Vous pouvez double-cliquer dessus pour modifier le texte, le styliser, et vous pouvez même le transformer en un lien de texte comme ça. Maintenant, le texte à l'intérieur est un élément de lien. Il est utilisé pour quelque chose comme une description ou la clause de non-responsabilité des droits d'auteur. Nous parlerons plus tard des cas d'utilisation des blocs de texte. Passons à l'élément suivant, qui est la citation de bloc. Citation de bloc, vous permet de créer un devis. Laissez-moi glisser et déposer cette citation de bloc ici, et comme vous pouvez le voir, ce n'est qu'un bloc de texte avec des styles prédéfinis. Si je double-clique dessus, je peux simplement modifier le texte. Ceci est une citation de bloc. Il a cette frontière gauche. par défaut, vous pouvez évidemment modifier toutes les propriétés, nous en parlerons. Si vous souhaitez utiliser un devis dans votre projet, vous pouvez utiliser les éléments de devis de bloc, ou encore vous pouvez le créer manuellement. Passons à l'élément suivant qui est le texte riche. L' élément de texte enrichi est si puissant. Pourquoi ? Parce qu'il rassemble toutes sortes d'éléments ensemble. Par exemple, nous avons ici un texte riche. Ce texte enrichi peut utiliser de nombreux éléments différents comme des en-têtes, des paragraphes, des images, des vidéos, des liens, vous le nommez. Pourquoi avons-nous besoin de les utiliser ? C' est utile car il est plus facile de modifier le contenu lorsque nous avons un texte enrichi. Si je double-clique ici, je peux simplement modifier ce paragraphe. Je peux simplement créer un nouveau paragraphe si j'appuie sur « Entrée » comme ça, ou je peux simplement cliquer sur ce bouton « Plus » et télécharger une image, une vidéo, un code personnalisé, ou même une liste. Laissez-moi aller de l'avant et télécharger une image ici. Voilà, notre image est prête. Je peux l'aligner vers la gauche. Il est très facile de tout personnaliser dans le texte enrichi. Plus important encore, lorsque vous créez un site Web pour un client, il est très pratique d'utiliser un texte enrichi car le client n'est pas un développeur Web ou un concepteur Web. Il ou elle a besoin de modifier le contenu facilement. Ils peuvent simplement se diriger vers ce texte riche et simplement ajouter des images, des vidéos, modifier le contenu, styliser le titre, styliser le paragraphe, etc. Nous parlerons de l'éditeur plus tard, mais pour l'instant vous avez juste besoin de savoir que le texte riche peut regrouper tous les éléments : images, vidéos, titres, paragraphes, n'importe quoi. 15. Image: Pouvez-vous imaginer concevoir un site Web sans images ? Je ne peux pas. Dans cette vidéo, nous allons parler d'images. Je vais frapper sur la section Ajouter, et à partir de la catégorie médias, je vais faire glisser cet élément d'image et le déposer directement mon conteneur dans le navigateur, juste comme ça. Voici un élément d'image, et il a des paramètres différents. Nous pouvons utiliser cet élément d'image pour télécharger des formats de fichiers populaires comme PNG, JPG, SVG, et ainsi de suite. Les images sont nos atouts. Par conséquent, afin d'utiliser une image dans votre projet, vous devez d' abord les télécharger. La meilleure pratique consiste à charger d'abord tous vos actifs dans le panneau Actifs, lorsque vous commencez à créer votre projet, puis commencez à travailler sur la mise en page et le contenu. De cette façon, vous pouvez facilement accéder à vos actifs quand vous le souhaitez. Alternativement, vous pouvez simplement glisser-déposer un élément d'image, et à partir d'ici, vous pouvez cliquer sur Choisir l'image, puis télécharger votre image ici. Pour l'instant, je vais sélectionner cette image. On y va. Cette image a quelques paramètres. Comme vous pouvez le voir, c'est trop grand. Je vais le changer pour celle-là, c'est beaucoup mieux. Comme vous pouvez le voir, il a la largeur et la hauteur réglées sur auto. Cela signifie que Webflow détermine la largeur et la hauteur ici. Il y a aussi la case à cocher HiDPI, et quand elle est cochée, la largeur de notre image sera divisée par deux afin de s'afficher parfaitement sur les écrans de la rétine. Par exemple, ici, puisque la largeur de notre image est de 640 pixels, quand je vérifie que, Webflow le définit à 320 pixels, cette façon, nous pouvons nous assurer que notre image sera affichée étonnamment sur différents périphériques. Il est facultatif d'utiliser HiDPI, mais la plupart du temps, si vous vérifiez cela, vous pouvez vous assurer que tout est superbe sur toutes sortes d'appareils. Vous pouvez spécifier la largeur et la hauteur de vos images ici ou vous pouvez styliser dans le panneau Style ici sous la section Taille. Nous parlerons de style plus tard, mais pour l'instant, vous avez juste besoin de savoir qu'il est possible de spécifier la dimension de vos images ici dans les paramètres de l'image. Vous pouvez également remplacer vos images si vous appuyez sur cette image de remplacement, et à partir du panneau des ressources, vous pouvez choisir différentes images de ce type. Une chose importante à propos des images est que vous pouvez télécharger des images jusqu'à quatre mégaoctets. Tout ce qui est plus grand que cela, vous ne pouvez pas le télécharger. Pourquoi ? Parce qu'il n'est pas pratique d'utiliser des images si volumineuses car elles ralentissent la vitesse de chargement de la page Web. C' est pourquoi vous pouvez télécharger des images jusqu'à quatre mégaoctets. Il y a quelques options avancées ici, comme tous les textes et le chargement. Nous n'allons pas les aborder maintenant parce que ce sont sujets avancés et nous en parlerons plus tard dans ce cours. Vous pouvez également utiliser un élément image pour les icônes. Comme une icône est une image, vous pouvez simplement aller à vos ressources, et si vous téléchargez une icône, vous pouvez simplement la glisser et la déposer ici comme ça ou vous pouvez simplement glisser et déposer un élément image puis choisir votre à partir des paramètres de l'image. C' est totalement à toi de décider. 16. Vidéo: Parfois, nous pourrions avoir besoin d'utiliser une vidéo dans notre projet. Dans ce cas, nous pouvons utiliser un élément vidéo. Si vous allez aux médias à partir d'ici, vous pouvez glisser et déposer un élément vidéo dans votre Canvas, je vais le mettre dans mon conteneur pour garder tout organisé. Cet élément vidéo fonctionne comme un espace réservé, vous pouvez coller un lien vidéo à partir de n'importe quelle source tierce comme Vimeo ou YouTube, peu importe. Pour l'instant, je vais coller un lien YouTube, et dès que je le colle, il le charge ici, et je peux simplement prévisualiser mon projet. Je peux lire cette vidéo facilement, et comme vous pouvez le voir, nous avons toutes les options du lecteur vidéo YouTube, mais nous avons aussi un autre élément. Laissez-moi supprimer cet élément vidéo, puis je vais faire glisser et déposer cet élément YouTube. Quelle est la différence ? Eh bien, avec l'élément vidéo, vous pouvez utiliser n'importe quel lien de n'importe quelle plate-forme, mais avec l'élément YouTube, vous ne pouvez utiliser qu'un lien YouTube. Quelle est la principale différence ici ? Avec l'élément YouTube, nous avons plus d'options pour travailler. Nous avons différents paramètres comme start at, nous pouvons couper la vidéo par défaut, nous pouvons activer la lecture automatique. Nous pouvons modifier les contrôles d'autres joueurs, que nous souhaitions montrer les contrôles du joueur ou non. Nous pouvons également modifier les paramètres de confidentialité. C' est essentiellement la principale différence entre ces deux éléments. Comme tous les autres éléments, vous pouvez également modifier toutes les propriétés CSS de ces éléments vidéo. 17. Animation Lottie: Vous êtes-vous déjà demandé comment utiliser une animation dans votre projet ? La réponse est l'animation de Lottie. Si vous accédez à la section Médias ici dans le panneau d'ajout, vous pouvez voir qu'il y a un élément appelé animation Lottie. Laissez-moi glisser et déposer cet élément dans mon conteneur. Eh bien, Lottie est un type de fichier pour l'animation. Il est si puissant parce qu'il nous permet d'utiliser des animations de haute qualité, et surtout, il nous permet de contrôler différentes propriétés de cette animation. Par exemple, nous pouvons le rendre interactif, nous pouvons le faire jouer à l'envers, et d'autres choses. Nous allons parler des animations Lottie en détail plus tard, mais pour l'instant, essayons. Dans le fichier Assets, j'ai un fichier JSON, qui est fondamentalement ce dont nous avons besoin si nous voulons utiliser une animation Lottie, si je clique juste sur ce bouton Remplacer Lottie Sequence, je peux simplement choisir cette animation, et nous y allons. Maintenant, nous avons l'animation, mais laissez-moi en prévisualiser. Si je clique sur cette animation d'aperçu, l'animation est lue de zéro à 100 pour cent. C' est cool ? Je peux vérifier l'option de boucle, passons un aperçu. On y va. Il joue encore et encore. Je peux choisir le jeu en option inverse, juste comme ça. 18. Formulaires: Si vous voulez construire un site Web qui a une page de contact ou même une section de newsletter, vous devez à coup sûr utiliser Forms. Eh bien, un formulaire peut avoir différents éléments comme l'étiquette, les entrées, zone de texte, les cases , les boutons radio, le bouton de formulaire, etc. Si vous vous dirigez vers la section Formulaires sur le panneau d'ajout, vous pouvez voir que nous avons différents éléments ici. Nous avons Form Block qui regroupe différents éléments de formulaire comme l'étiquette, les entrées, le bouton de formulaire. Nous avons Label, qui est juste un simple bloc de texte. Nous avons une entrée, c'est un champ de texte. Nous avons la zone de texte pour les longues phrases et les longs contenus. Nous avons des cases à cocher, nous avons des boutons radio pour les sélections. Nous avons l'élément select, si vous voulez laisser l'utilisateur choisir parmi différentes options. Nous avons récupéré et nous avons le bouton Formulaire. Nous avons également l'élément de téléchargement de fichiers ici, mais il n'est disponible que lorsque vous ajoutez un plan de site à votre site Web. Lorsque nous voulons créer un formulaire, d' abord, nous avons besoin d'un bloc de formulaire. Comme je l'ai déjà mentionné, il rassemble tous ces éléments de forme, les éléments nécessaires. Je vais le glisser et le déposer dans mon conteneur sur le Canvas. On y va. Comme vous pouvez le voir, ce bloc de formulaire a déjà quelques éléments, comme deux étiquettes, deux champs de texte et un bouton. Vous ne pouvez pas voir ces calques de texte en raison de leur couleur. Je vais aller de l'avant et modifier la couleur et le style ici. ce moment, c'est mieux. Lorsque vous faites glisser un formulaire dans votre Canvas, les paramètres du formulaire apparaissent. Un bloc de formulaire a des propriétés différentes, il a des états différents et il a un nom de formulaire. Laissez-moi vous montrer les différents états d'un bloc de formulaire. Lorsque nous travaillons avec des formulaires, nous avons les états normaux, un succès et une erreur. Quelle est la différence entre eux ? L' état normal est celui que vous regardez. C' est juste une forme normale. L' état de réussite, affiche en fait un message à l'utilisateur. Une fois que le formulaire a été envoyé avec succès, nous pouvons facilement personnaliser chacun de ces états. L' état d'erreur affiche une erreur pour l'utilisateur lorsque quelque chose se passe mal. Pour l'instant, vous ne pouvez pas voir le texte car nous avons déjà modifié le style de ces calques de texte. Mais si je sélectionne ce bloc de texte, je peux aller de l'avant et modifier la couleur en noir, et maintenant vous pouvez le voir mieux. Lorsque vous souhaitez concevoir différents états de votre formulaire, vous devez vous assurer de sélectionner d'abord votre bloc de formulaire dans le navigateur, non les éléments de formulaire. Sélectionnez d'abord votre bloc de formulaire, puis vous pouvez double-cliquer sur [inaudible]. Ou vous pouvez simplement sélectionner votre bloc de formulaire et cliquer sur cette icône de paramètres, juste comme ça. Parlons maintenant du formage. Eh bien, vous pourriez avoir besoin d'utiliser différents formulaires sur votre site Web et il est important de les nommer correctement car plus tard, lorsque nous recevons des formulaires, nous pouvons facilement reconnaître quelles informations sont associées à quel formulaire. Je vais nommer cette démo de formulaire. Je vais aller à la normale. Ces éléments ont un style par défaut que nous pouvons remplacer. Nous ne parlerons pas de style maintenant, mais je vais vous montrer qu'il s'agit d'un champ de texte. Un champ de texte a également quelques propriétés. Si je sélectionne le champ de texte, si je double-clique dessus, vous pouvez voir que les paramètres d'entrée apparaissent. Chaque champ de texte a des paramètres différents comme le nom, espace réservé, le type de texte, et ici nous avons les options requises et autofocus. Vous pouvez facilement nommer ces champs de texte. Par exemple, si ce champ de texte est associé à cette étiquette de nom, nous pouvons simplement l'appeler nom. Si ça doit être un nom de famille, on peut simplement le nommer ici. Nous avons aussi le détenteur de la place. Si je veux présenter un titulaire de place directement sur le champ de texte, je peux l'écrire ici. Entrer ton nom de famille. Juste comme ça. Nous avons aussi le type de texte. Par défaut, il est défini sur plan et cela signifie que le texte peut être n'importe quoi. Nous pourrions le définir sur email, nous pourrions le définir sur mot de passe, nous pouvons le définir sur téléphone ou numéro. Pourquoi est-ce important ? Parce qu'ici, pour le champ de texte de l'e-mail, le type de texte est déjà défini sur e-mail. Pourquoi ? Parce que lorsque l'utilisateur tente de remplir ces champs de texte et appuie sur le bouton « Soumettre », alors ce champ de texte vérifie s'il y a une adresse e-mail valide ou non. Par exemple, si nous avons quelque chose comme test@, cela donnera à l'utilisateur une erreur. Il doit y avoir une adresse e-mail valide. Il ne vérifie pas si cette adresse e-mail existe ou non parce que ce n'est pas possible, mais il vérifie simplement le format de cette adresse e-mail. La même chose se produit avec le mot de passe, le téléphone ou le numéro. Parlons maintenant de ces deux options. Nous avons l'option requise. Si je coche cette case, cela signifie que l'utilisateur doit remplir ces champs de texte. Si je décoche cela, c'est un champ de texte facultatif. Cochez je vérifie l'autofocus, cela signifie que chaque fois que la page se charge, ce champ de texte est autofocus et le curseur clignote déjà. Je vais le définir sur requis, et je vais décocher l'autofocus. Ensuite, sélectionnons ce bouton « Soumettre ». Si je double-clique dessus, je peux simplement modifier ces propriétés. Il existe deux propriétés lorsqu'il s'agit de boutons de formulaire, le texte du bouton et le texte en attente. Je peux le définir à n'importe quoi comme envoyer par exemple, puis le texte d'attente. Ce texte apparaît lorsque l'utilisateur clique sur ce bouton et qu'il attend la soumission du formulaire. Permettez-moi de modifier cela pour attendre un moment. Pas le meilleur texte d'attente au fait. Essayons maintenant. Pour essayer un formulaire, vous ne pouvez pas simplement passer en mode aperçu car cela ne fonctionne pas comme ça. Vous devez d'abord publier votre site Web. Nous n'avons pas parlé de l'option de publication, mais c'est si simple. abord, je vais cliquer sur ce bouton Publier dans le coin supérieur droit. On n'a pas besoin de changer quoi que ce soit. Il suffit de cliquer sur Publier pour sélectionner les domaines. Juste comme ça. Il s'agit d'un domaine unique créé par Webflow pour notre projet. Ensuite, une fois que ce bouton devient vert, cela signifie que notre site Web est publié. Si je clique sur ce bouton, cette petite icône juste à côté de ce lien, je peux vérifier mon site web. Laisse-moi zoomer. Voici notre formulaire. Laissez-moi aller de l'avant et vérifier le type de ce champ de texte parce que je l'ai changé en numéro par erreur, il devrait être clair puisque c'est juste le nom de famille. Je vais publier mon site web une fois de plus, et je vais actualiser cette page. On y va. Maintenant, il s'agit d'un champ de texte brut. Laisse-moi écrire un test. Pour l'adresse e-mail, je vais écrire test@. Ce n'est pas une bonne adresse e-mail, ce n'est pas un format correct pour cette adresse e-mail. Si j'appuie sur le bouton « Envoyer », regardez ce qui se passe. Veuillez saisir une pièce suivant @. C' est ce qui se passe lorsque vous choisissez l'e-mail, le type de champ de texte. Alors écrivons gmail.com. Maintenant, tout devrait fonctionner parfaitement. Je vais appuyer sur le bouton « Envoyer ». Attendez un instant, et nous recevrons le message de réussite. Bien sûr, le style n'est pas bon parce que nous avons déjà changé la couleur, mais vous venez d'avoir l'idée. Si quelque chose ne va pas avec la connexion Internet, nous obtiendrons l'erreur. Laissez-moi rafraîchir la page et je vais juste déconnecter ma connexion Internet pendant une seconde. Ici, nous allons écrire Test 2 et je vais écrire une autre adresse e-mail, hello@gmail.com. Si j'appuie sur le bouton « Envoyer », regardez ce qui se passe. Oups, quelque chose s'est mal passé en soumettant le formulaire. C' est la différence entre les différents états d'un formulaire. Voyons maintenant comment nous pouvons avoir accès aux soumissions de formulaire. Eh bien, nous devons aller dans les paramètres du projet. Comme je vous l'ai montré avant. Si vous allez sur cette icône W dans le coin supérieur gauche, et si vous passez la souris dessus, vous verrez cette icône de menu hamburger. Je vais cliquer dessus, et je vais aller dans Paramètres du projet. De là, je vais aller à l'onglet Formulaires. Ici, nous avons différents paramètres d'un formulaire. Nous pouvons spécifier le nom du formulaire ici, nous pouvons envoyer les soumissions du formulaire à une adresse e-mail spécifique, nous pouvons écrire la ligne d'objet, nous pouvons spécifier une adresse e-mail pour les réponses, ainsi que le modèle e-mail. Nous parlerons de ces options plus tard. Mais pour l'instant, vous avez juste besoin de savoir que si vous faites défiler ici, vous pouvez trouver des données de soumission de formulaire. Comme nous pouvons le voir, nous avons soumis un formulaire. Il est dit nom, Test, adresse e-mail test@gmail.com Vous pouvez simplement supprimer la soumission. Vous pouvez télécharger toutes les données de soumission en utilisant ce bouton de téléchargement CSV comme fichier CSV. Une chose que vous devez garder à l'esprit est qu'il y a une limite pour recevoir des soumissions. Si vous n'ajoutez pas d'hébergement à votre projet, vous pouvez obtenir jusqu'à 50 soumissions par mois. Nous allons plonger dans ces paramètres avancés de formulaires plus tard lorsque nous commencerons à créer nos projets. Mais il s'agit essentiellement de formes. Retournons au designer. Je vais appuyer sur le bouton « Designer ». Je vais sélectionner mon bloc de formulaire comme ça. Laissez-moi vérifier d'autres éléments ici. Ici, nous avons une zone de texte d'entrée d'étiquette. Nous pouvons simplement glisser et déposer n'importe lequel de ces éléments dans notre bloc de formulaire. Tous ces éléments ont leurs propres propriétés. Laisse-moi aller de l'avant et glisser-déposer une case à cocher ici. Tout comme ça, il a des propriétés différentes. Nous pouvons faire glisser et déposer un élément select ici. Si je veux spécifier les options de sélection, je peux sélectionner ce champ de sélection et aller dans les paramètres des éléments. De là, vous pouvez voir que nous avons le choix. Nous avons sélectionné 1, premier choix, deuxième choix, troisième choix. Nous pouvons simplement les modifier, mais nous allons le prévisualiser. On y va. C'est à ça que ça ressemble. La case à cocher peut être cochée et décochée. La zone de texte pourrait être agrandie et tout fonctionne comme prévu. 19. Bar Nav: La plupart des sites Web ont aujourd'hui une barre de navigation en haut. Si vous jetez un oeil à certains sites Web célèbres, vous pouvez voir qu'ils utilisent une barre de navigation afin de montrer de nombreuses options à l'utilisateur. Par exemple, ici, nous avons la barre de navigation qui a quelques menus comme MAC, iPad, iPhone, ou ici nous avons la barre de navigation qui a des produits, cas d' utilisation, développeurs, etc, et aussi un bouton. La plupart des barres de navigation ont des éléments communs, comme un logo cliquable. Il s'agit d'un bloc Link. Ils ont quelques options de menu. Ils sont également généralement des blocs Link, et ils ont un bouton sur le côté droit. Nous pouvons créer une barre de navigation manuellement en utilisant un bloc Div et un bloc Link et d'autres éléments. Mais il y a un élément pré-construit dans Webflow. Si je fais défiler ici sous les Composants, il y a la barre de navigation. Si je le fais glisser et le dépose dans mon élément de corps ici, comme vous pouvez le voir, cette barre de navigation a été ajoutée à mon Canvas et elle a quelques éléments. A l'intérieur il y a un conteneur, c'est juste un bloc Div, nous en avons déjà parlé, et à l'intérieur il y a d'autres éléments. Il y a un bloc de lien dans lequel nous allons mettre notre logo, puis nous avons les menus de navigation. Ceci est un autre bloc Div qui contient tous ces liens. Enfin, il y a le bouton Menu. Mais on ne voit aucun bouton de menu ici. Attendez juste une seconde. Un élément navbar est dynamique et réactif. Si nous passons du point d'arrêt du bureau au point d'arrêt de la tablette, vous pouvez voir ce qui se passe. Tous ces liens de menu sont disparus, et au lieu de cela, nous avons ce bouton de menu hamburger. Ceci est associé à ce bouton de menu dans le navigateur, qui n'était pas visible dans le point d'arrêt du Bureau. La barre de navigation est déjà réactive. Si je prévisualise ce projet, ce bouton Menu apparaît et il n'y a pas de logo car nous n'en avons pas encore ajouté un. C' est essentiellement comme cela fonctionne une barre de navigation. Nous pouvons personnaliser ces liens. Si nous double-cliquez sur l'un de ces liens, nous pouvons modifier le texte. Nous pouvons également sélectionner cet élément Nav Link, et si je clique sur cette icône Paramètres, je peux modifier l'URL. Nous pouvons demander ceci pour amener l'utilisateur à une page spécifique ou à une section spécifique de notre site Web. Ce n'est qu'un bloc Link. Par conséquent, nous avons toutes les propriétés d'un bloc Link. Une barre de navigation est fondamentalement un bloc Div qui est déjà réactif et il a quelques éléments pré-construits que nous pouvons utiliser. Si vous voulez créer une barre de navigation personnalisée, c'est tout à fait bien. Nous pouvons le faire simplement. Mais la plupart du temps, nous allons utiliser l'élément navbar parce qu'il rend notre vie beaucoup plus facile car il est déjà réactif et tout est prêt pour nous. 20. Une boîte à lumière: Si vous souhaitez que vos images ou vos vidéos soient affichées en plein écran sur n'importe quel appareil, vous pouvez utiliser un lightbox. Si vous accédez à la section Composants du panneau d'ajout, vous pouvez trouver un composant lightbox. Je vais le glisser et le déposer dans mon conteneur. On y va. Ceci est un lien lightbox et pour travailler avec cela, nous avons besoin d'une vignette. Si je double-clique dessus, je peux choisir l'image à l'intérieur parce que par défaut elle a une image, et à partir de mes actifs, je vais choisir cette image, et je vais diminuer la largeur et la hauteur à 300 pixels et la hauteur va être de 400 pixels, juste comme ça. Ceci est un lien lightbox. Prévisualisons et voyons ce qui se passe. Si je clique sur que rien ne se passe parce que pour qu'une lightbox fonctionne, nous devons spécifier un média pour cela. Nous devons aller de l'avant et sélectionner notre lien lightbox. Ensuite, nous devons nous diriger vers les paramètres des éléments juste à côté du panneau latéral et à partir de là, nous pouvons trouver les paramètres lightbox. Il y a cette section des médias. Nous pouvons choisir une image ou une vidéo. Commençons par une image. Je vais sélectionner une image, la même image de mes actifs, voilà. Il y a cette légende ici. Nous n'allons pas ajouter de légende pour l'instant parce que je vais vous montrer la différence entre ces deux options. Je vais enregistrer et puis nous allons en prévisualiser. Là, nous allons, si je clique sur mon lien lightbox, nous pouvons prévisualiser cette image dans une vue plein écran sur n'importe quel appareil. Il fonctionne parfaitement sur mobile, tablette ou n'importe quel écran, juste comme ça. Mais que faire si je veux avoir plusieurs liens lightbox ? Eh bien, c'est très simple. Je peux simplement faire glisser et déposer plus de lightboxes, ou je peux simplement copier ces lightbox et le coller encore et encore. Permettez-moi de supprimer ce nouveau lien lightbox. Je vais copier ce lien lightbox, commande C ou contrôle C et commande V ou contrôle V, encore une fois, pour obtenir trois liens lightbox différents. Par défaut, il n'y a pas de remplissage entre eux donc je vais sélectionner ce lien lightbox, le premier et je vais aller à l'espacement et juste ajouter un bon remplissage comme 10 pixels, et comme vous pouvez le voir, immédiatement, une classe a été créée. Nous n'avons pas encore parlé de cours, mais pour l'instant, nous avons juste besoin de ce lien de nom lightbox. Plus tard, nous allons plonger dans les cours. Je vais sélectionner la deuxième lightbox et à partir de là je vais chercher une classe de lien lightbox, juste comme ça, et une fois que j'applique cette classe au deuxième lien lightbox, ces éléments peuvent utiliser tous les styles que j'ai déjà définis pour cette catégorie particulière. Maintenant, je vais changer la vignette de ces deux liens lightbox. Laissez-moi double-cliquer dessus et remplacer l'image à celle-ci et pour la troisième, je vais faire la même chose, nous y allons. Nos miniatures sont prêtes. Maintenant, nous allons en prévisualiser. Le premier semble bien. La seconde montre la même image parce que nous venons de la copier et de la coller, la troisième la même. Ce que nous devons faire, c'est que nous devons sélectionner notre deuxième lien lightbox, puis nous diriger vers les paramètres des éléments, et à partir de là, nous devons supprimer ce média et ajouter une autre image qui correspond à cette miniature. Cool. Je vais le garder pour le troisième. Je vais faire la même chose. Je vais supprimer ce média et choisir l'image appropriée et enregistrer, maintenant cela devrait fonctionner parfaitement. Essayons. Je vais cliquer sur la première image, la deuxième, et la troisième. Mais ici, comme vous pouvez le voir, il n'y a pas de légende. Que se passe-t-il si j'ajoute une légende à nos médias ? Allons voir ça. Nous allons sélectionner le premier lien lightbox, et à partir de là je vais cliquer sur cette première image, et ajoutons une légende. C' est une belle image, cool, enregistrer. Voyons maintenant ce qui se passe si je clique dessus. Comme vous pouvez le voir, une légende a été ajoutée au bas de cette image. C' est très pratique, mais si je veux connecter mes boîtiers lumineux ensemble, pour que nous puissions le faire. C' est très simple. abord, nous devons sélectionner ce lien lightbox, le premier, et sous le média il y a une case à cocher qui dit lien avec d'autres lightboxes. Si je vérifie cela, ici je peux spécifier un nom de groupe. C' est très important car si vous avez plusieurs lightboxes sur une page, c'est ainsi que nous pouvons les connecter correctement. Donnons-lui un nom. Je vais écrire main, je vais le copier. Laissez-moi sélectionner mon deuxième lien lightbox, je vais coller ce nom ici. Pour le troisième, je vais faire la même chose, et maintenant nos liens lightbox sont connectés. Essayons. Je vais cliquer sur ce premier lien et on y va. Maintenant, nous avons cette interaction de curseur. Je peux cliquer sur ce bouton flèche droite et je peux simplement passer à travers ces éléments. C' est très utile. Par exemple, si vous souhaitez créer un site Web de commerce électronique et que vous devez afficher différentes images d'un produit particulier, vous pouvez utiliser un lightbox. Récapitulons. Pour travailler avec des lightboxes, vous devez d'abord faire glisser et déposer un lien lightbox dans votre Canvas. Deuxièmement, vous devez choisir votre miniature, qui est cette image. Troisièmement, ce qui est si important, vous devez ajouter un média pour ce lien lightbox particulier. Si vous souhaitez connecter vos liens lightbox, vous devez vérifier ce lien avec d'autres lightbox et spécifier un nom de groupe. J' espère que vous avez apprécié cette vidéo. Je te verrai dans la prochaine. 21. Slider: Si vous souhaitez créer une galerie d'images ou un diaporama pour votre site Web, vous pouvez utiliser le composant curseur. À partir de là, vous pouvez faire glisser un curseur et le déposer à l'intérieur de votre conteneur, ou vous pouvez le placer où vous voulez. Je vais le placer à l'intérieur du conteneur, et il prend toute la largeur de mon conteneur. Comme vous pouvez le voir, ce curseur a plusieurs éléments. Si je l'élargis, vous pouvez voir qu'il y a quatre composants principaux ici : le masque, qui comprend nos diapositives, le lien flèche gauche, le lien flèche droite, et le Slide Nav, qui est ce indicateur en bas. Si vous cliquez sur ces indicateurs, vous pouvez vous déplacer entre vos diapositives, et si vous voulez ajouter d'autres diapositives, vous devez sélectionner votre curseur et aller dans les paramètres du curseur. À partir de là, vous pouvez accéder aux paramètres du curseur. Nous avons beaucoup d'options à modifier. On va passer par chacun d'eux. Si vous souhaitez ajouter d'autres diapositives, vous pouvez appuyer sur ce bouton Ajouter une diapositive, comme ça. Si vous voulez passer à travers vos diapositives, vous avez différentes manières. abord, vous pouvez cliquer sur ces indicateurs, deuxièmement, vous pouvez utiliser ces flèches ici dans les paramètres du curseur, et troisièmement, si vous savez exactement où vous voulez aller, vous pouvez choisir votre diapositive ici par exemple, diapositive 3 ou un diapositive 5. Permettez-moi d'enlever ces deux diapositives pour l'instant. Je vais vous expliquer différentes options ici. Le curseur a des propriétés différentes. Il a la propriété d'animation, la méthode d'accélération, et la durée, et aussi vous avez quelques paramètres avancés ici. L' animation vous permet de contrôler le type de transition qui se produit. Vous pouvez choisir la diapositive, le fondu enchaîné, le fondu vers l'avant, le fondu et le faire glisser. Vous pouvez les consulter et voir lequel convient à vos besoins. La méthode d'accélération est également liée à l'animation et à la transition. Comme c'est un sujet plus avancé, nous n'allons pas en parler maintenant, mais plus tard, quand nous commencerons à parler d'interactions, nous parlerons beaucoup de la méthode d'assouplissement. Ensuite, nous avons la durée. Il s'agit de la durée de notre transition, et l'unité est en millisecondes. Ici, si je spécifie 1000, l'animation se produit précisément en une seconde. Ici, nous avons aussi différentes options. Nous avons les diapositives de répétition infinies, nous avons désactiver les gestes de balayage. Par défaut, le curseur a les mouvements de balayage chaque fois que l'utilisateur interagit avec lui sur une tablette ou un téléphone. Vous pouvez désactiver cette option si vous le souhaitez. Vous avez l'option de lecture automatique des diapositives. Vous avez la peau à chaque extrémité. Ce qu'il fait, c'est ça. Si je coche cette option, elle masque la flèche gauche pour la première diapositive et la flèche droite pour la dernière diapositive. Essayons ça. Ici, nous n'avons pas la flèche gauche. Alors si je vais au troisième, ici, on n'a pas la flèche droite. Vous pouvez personnaliser ces options comme vous le souhaitez. Ensuite, nous avons la diapositive Nav. C' est tout au sujet de ces indicateurs. Je peux vérifier autour ou vous pouvez décocher ça pour avoir ces carrés. Vous pouvez vérifier les étiquettes numériques, vous pouvez cocher l'ombre, inverser les couleurs, et également vous pouvez spécifier l'espacement en pixels, comme je peux spécifier 10. Je vais tous les décocher et je vais les vérifier. Super. Maintenant, ajoutons du contenu à nos diapositives. Une diapositive peut contenir n'importe quel type de conteneur. Vous pouvez y ajouter des blancs div, vous pouvez ajouter des images d'arrière-plan, vous pouvez y ajouter une image. C' est tout à fait à vous de décider. Mais pour l'instant, je vais sélectionner cette diapositive 1, et je vais faire défiler vers le bas dans le panneau de style. De l'arrière-plan, je vais appuyer sur « Image et « Gradient » et choisir « Image ». À partir de mes actifs, je vais choisir une de ces images. Cool. Réglons la position au centre, et il va couvrir juste comme ça, et ne tuile pas. Pour le prochain, je vais faire la même chose. Laisse-moi choisir mon image, juste comme ça. Permettez-moi de changer la position et la taille. Enfin, pour la dernière diapositive, je vais choisir une autre image. Celui-ci, changeons la position au centre, et la taille va être couverte et ne tuile pas. Super. Notre curseur est prêt. Cependant, je vais modifier sa hauteur. Je vais sélectionner le curseur, assurez-vous de sélectionner votre élément de curseur. De la taille, je peux spécifier une hauteur spécifique, par exemple, 500 pixels. Ça a l'air beaucoup mieux maintenant. Maintenant, si je clique sur ces indicateurs, je peux passer d'une image à l'autre. Maintenant, je vais sélectionner le curseur, puis allons aux paramètres des éléments. De là, je vais vérifier les diapositives de lecture automatique. Ici, je peux spécifier le temps ou le délai. Par défaut, il est défini sur 4 000 millisecondes. Cela signifie que la transition se produit en exactement quatre secondes. Si je l'ai prévisualisé maintenant, après quatre secondes, la transition se produit. Vous pouvez modifier cela. Je vais le mettre à 1 000. On y va. C'est trop. Peut-être que je peux le mettre à 2 000. Maintenant, c'est mieux. Comme je l'ai déjà mentionné, une diapositive peut contenir n'importe quoi. Ici, je peux ajouter d'autres éléments par exemple, un titre. Faites glisser et déposez un titre à l'intérieur de cette diapositive. On y va. Je peux lui donner un titre, diapositive 1. Je peux modifier ses propriétés CSS, tout. Pour chaque diapositive, je peux faire la même chose. Je peux également ajouter un paragraphe ici. D'accord, les gars. C' est tout pour les composants du curseur. J' espère que ça vous a plu, et je vous verrai dans la prochaine vidéo. 22. Ongles: Parfois, nous pourrions avoir besoin d'un contenu à onglets, d' un contenu à onglets interactif. Dans ce cas, nous pouvons utiliser l'élément tabs. Sous la section composants, nous avons l'élément onglets. L' un des cas d'utilisation les plus courants d'onglets est la section de tarification des différents sites Web. Ici, comme vous pouvez le voir, j'ai préparé deux blocs Div différents et à l'intérieur, il y a d'autres blocs Div avec quelques éléments. Ce que nous allons faire, c'est mettre ces blocs de prix dans des onglets. La rangée supérieure est notre plan mensuel et la rangée inférieure est notre plan annuel. Nous allons avoir besoin de deux onglets différents. Mais d'abord, allons de l'avant et glisser-déposer l'élément onglets dans mon conteneur, juste comme ça. Par défaut, comme vous pouvez le voir, l'élément onglets a trois onglets différents. Fondamentalement, l'élément onglets a différents composants. Le menu des onglets, qui sont ces onglets en haut, et le contenu des onglets. Dans le contenu des onglets, comme vous pouvez le voir, c'est un masque. Cette icône indique qu'il s'agit d'un masque. Dans le contenu de ces onglets, nous avons trois volets différents. Nous avons le volet Onglet, l'onglet 1, l'onglet 2 et l'onglet 3. Le contenu de notre onglet doit être placé dans le volet d'onglets. Chaque fois que nous voulons modifier le nom des onglets, nous devons travailler avec le menu des onglets. Ici, si je double-clique sur ce texte, je peux le modifier. Écrivons tous les mois et pour le prochain, je vais écrire chaque année. Ce troisième n'est pas nécessaire. Je peux appuyer sur Supprimer ou Retour arrière sur mon clavier pour supprimer cet onglet lien. Juste comme ça, maintenant j'ai deux onglets différents, mais qu'en est-il du contenu ? Eh bien, d'abord, je vais sélectionner ce bloc Div, ce top marks de prix. Je vais le faire glisser et le déposer dans le premier volet d'onglets, assurez-vous qu'il est imbriqué correctement. Jetez un oeil à votre navigateur et assurez-vous qu'il est imbriqué dans le volet d'onglet 1, juste comme ça. Maintenant, cette boîte de prix. Ce sont des boîtes, font partie du volet d'onglet 1. Nous allons faire la même chose pour ce plan de fond ou annuel. Je vais le faire glisser et le déposer. Je vais m'assurer qu'il est imbriqué dans le volet d'onglet 2, juste comme ça, mais maintenant c'est invisible. A partir de maintenant, si je veux consulter le contenu de mes onglets, je dois cliquer sur ces volets. Par exemple, je vais cliquer sur le volet d'onglet 1. C' est notre plan mensuel. Si je clique sur le volet 2, c'est notre plan annuel. Par défaut, il n'y a pas de marge supérieure, donc je vais sélectionner le contenu des onglets, qui est fondamentalement un wrapper pour nos volets. Alors je vais lui donner une marge supérieure, peut-être 30 pixels. Voyons ce qui se passe maintenant. Je vais en prévisualiser. Nous sommes sur un plan annuel. Je vais cliquer sur mensuel. On y va. Pouvez-vous voir cette transition ? C' est essentiellement comme ça que fonctionnent les onglets. Bien sûr, vous pouvez styler ces onglets et nous parlerons de styles plus tard. Mais pour l'instant, vous avez juste besoin de savoir comment fonctionne l'élément onglet. Si je veux ajouter plus d'onglets, je peux sélectionner mon élément onglets dans le navigateur. Si je me dirige vers les paramètres de l'onglet, je peux cliquer sur ce bouton Ajouter, juste comme ça pour ajouter plus d'onglets. Comme vous pouvez le voir, l'onglet 3 a été ajouté ici. Je peux réorganiser mes onglets comme ça. Je peux définir l'onglet initial que l'utilisateur voit. Par exemple, ce sera l'onglet 1. Je vais supprimer l'onglet 3 pour l'instant. Vous pouvez renommer les onglets ici, mais juste en termes d'organisation. Si je le renomme ici, rien ne change sur l'onglet réel, sur le lien réel car il s'agit d'un texte et vous devez le modifier sur le canevas. Mais si vous voulez les organiser correctement, vous pouvez simplement en écrire un par exemple, et pour cela aussi, juste comme ça, vous pouvez modifier la méthode facile. Pour l'instant, vous ne savez pas ce que c'est, mais nous en parlerons plus tard. Tout est au sujet de l'animation. Ici, la fade-in est définie sur 300 millisecondes et la fade-out est définie sur 100 millisecondes. C' est trop rapide. Pour voir la vraie différence ici, je vais le régler à, la décoloration va être 500 millisecondes et le fondu sera de 500 millisecondes aussi. Maintenant, nous allons en prévisualiser. Le plan mensuel est déjà sélectionné. Je vais cliquer sur chaque année. On y va. C' est beaucoup plus lent maintenant. Récapitulons. L' élément onglets a deux composants principaux, menu des onglets et le contenu des onglets. Le menu des onglets inclut tous ces onglets. Ces liens d'onglet en haut. Le contenu des onglets inclut nos volets d'onglets ici. Chaque fois que nous voulons modifier le contenu de nos onglets, nous ne devrions nous tourner que vers le contenu des onglets et sélectionner notre volet d'onglets. Si vous voulez modifier l'apparence de nos liens d'onglet ou même le nom, le texte, nous devrions toujours aller dans le menu des onglets et choisir notre lien d'onglet. C' est tout pour cette vidéo. J' espère que ça vous a plu et je vous verrai dans la prochaine. 23. Réseaux sociaux: Je pense que les boutons de médias sociaux de votre site Web peuvent vous aider à générer plus de trafic vers vos comptes de médias sociaux. Pour ce faire, vous pouvez utiliser les composants Facebook ou Twitter. Je vais commencer par Facebook. Laissez-moi le glisser et le déposer dans mon conteneur. Comme vous pouvez le voir, par défaut, il y a un bouton similaire. Il y a le nombre par défaut comme nombre, et ce inscrivez-vous pour voir ce que vos amis aiment la phrase. Ici, vous pouvez spécifier l'URL du compte Facebook. Il peut s'agir du compte Facebook des clients ou votre propre compte Facebook si vous construisez votre propre site Web. Vous pouvez modifier la mise en page ici de la norme, à la boîte, au bouton. C' est tout à fait à vous de décider. Vous pouvez spécifier la largeur et la hauteur ici, et vous pouvez également modifier la langue. Par exemple, je peux choisir l'allemand, je peux le changer en espagnol, comme ça. Mais pour l'instant, gardons ça anglais. Si je prévois cela, si vous cliquez dessus, vous serez redirigé vers Facebook. Mais comme nous n'avons pas spécifié de compte ici, nous allons simplement aller sur facebook.com. Mais si vous spécifiez un compte ici, l'utilisateur peut aimer ce compte particulier. Mais qu'en est-il de Twitter ? Permettez-moi de supprimer ce composant Facebook. Je vais faire glisser et déposer le composant, les composants Twitter ici. Voyons ce que nous avons ici. Nous avons différentes options, types de boutons comme Tweet ou Suivre. Si vous voulez que l'utilisateur tweet quelque chose, vous pouvez choisir le Tweet, ici, vous pouvez spécifier l'URL du site Web. Ici, vous pouvez spécifier un texte de tweet comme « Check it out ». Ensuite, vous pouvez décider si la bulle doit être affichée ou non, juste comme ça. Vous pouvez modifier la mise en page. Ici, nous avons la mise en page horizontale. Vous pouvez le changer à la verticale ou à la taille, vous pouvez le changer en grand. Je vais cacher la bulle pour l'instant. Maintenant, nous allons en prévisualiser ça. Si je l'ai prévisualisé et que je clique dessus, on y va. Je peux voir ce Check it out webflow.com. C' est l'URL que nous pouvons spécifier lorsque nous modifions les préférences de ce composant. Si je vais suivre, ici, je peux spécifier le nom d'utilisateur des comptes, sans le signe @, car le signe @ est déjà là. Je peux écrire mon nom d'utilisateur de compte et immédiatement le nombre d' abonnés de ce compte particulier sera affiché ici. Je vais cacher la bulle pour l'instant, et agrandissons. Voyons ce qui se passe. Si je clique dessus, je peux décider si je veux suivre cette page ou non. Puisque c'est ma propre page, je ne vais pas suivre ça. Retournons en arrière. Tout cela concerne les composants des médias sociaux. J' espère que ça vous a plu, et je vous verrai alors. 24. Recherche: Si vous souhaitez ajouter la fonctionnalité de recherche à votre site Web, vous pouvez utiliser l'élément de recherche, en fait ce composant de recherche ici sous la section Composants. C' est un composant très puissant car vous n'avez pas à vous soucier de l' indexation de vos pages et de la préparation de vos résultats de recherche. Ce que vous devez faire est simplement de le glisser et de le déposer dans votre Canvas. Je vais le mettre dans ma section, comme vous pouvez le voir ici. Laissez-moi ajouter un conteneur ici que vous pourriez le voir facilement. Je vais le mettre dans mon conteneur. Maintenant, ça a l'air mieux. Aussi, je vais modifier la couleur du mot de recherche en blanc. Maintenant, c'est assez visible. Ceci est juste un champ de texte, et si vous double-cliquez dessus, vous pouvez trouver cette propriété d'espace réservé ici que vous pouvez modifier. Vous pouvez également activer ou désactiver la mise au point automatique. C' est tout à fait à vous de décider. Une chose à mentionner est que lorsque vous ajoutez un élément de recherche à votre Canvas, une nouvelle page d'utilitaire est créée automatiquement pour vous. Si vous allez sur les pages ici, vous pouvez voir que sous les pages utilitaires, nous avons ces nouvelles pages de résultats de recherche. Si je clique dessus, on y va. Vous pouvez voir que nous avons quelques exemples de résultats ici. Permettez-moi de modifier la couleur de ces prises aussi bien pour le blanc et celui-ci pour le blanc aussi. Cool. C'est essentiellement ce que l'utilisateur voit. Vous pouvez facilement le styliser, mais vous devez comprendre que cela ne fonctionne pas pour tous les sites Web et tous les plans. Pourquoi ? Si vous allez dans les paramètres ici et que vous allez à la recherche, vous pouvez voir qu'il est dit, une fois que vous avez configuré CMS ou l'hébergement professionnel, Webflow indexe automatiquement le contenu de votre site publié pour créer un index de recherche à jour. Sans CMS ou hébergement professionnel, vous ne pouvez pas utiliser cette fonctionnalité de recherche. Si vous souhaitez travailler sur un projet client et qu'ils ont besoin de cette fonctionnalité de recherche, vous devez vous assurer d'ajouter l'hébergement CMS ou l'hébergement professionnel à votre projet. Nous parlerons de ces plans plus tard, mais pour l'instant, vous avez juste besoin de savoir que cette fonctionnalité existe. Si vous avez besoin d'une barre de recherche, vous pouvez l'utiliser. 25. Symbol: En tant que concepteurs et développeurs, nous essayons toujours de ne pas nous répéter. Nous voulons éviter de copier et coller et de tout refaire encore et encore et encore. Pour ce faire, nous devons apprendre comment créer un élément une fois et le réutiliser plusieurs fois dans notre projet. Comment pouvons-nous faire ça ? On peut utiliser des symboles. Si je vais à la section Ajouter et j'essaie de faire glisser et déposer une barre de navigation ici. Juste comme ça, je vais le placer juste en dessous de mon corps. Ici, nous avons une barre de navigation et supposons que nous voulons la transformer en symbole. Comment pouvons-nous faire ça ? Nous avons différentes façons de le faire. abord, nous pouvons aller à la page Symboles ici, puis nous pouvons appuyer sur le bouton Créer un nouveau symbole, et nous devons nommer notre symbole. Je vais le nommer Navbar puis Créer un symbole. Comme vous pouvez le voir, il devient vert, une limite verte apparaît ici. Cela signifie que notre symbole a été créé avec succès. Mais maintenant, nous sommes à l'intérieur du symbole maître. Vous pouvez appuyer sur Échap pour quitter le symbole principal ou vous cliquez sur ce bouton vert Retour à l'instance. Ici, nous avons un symbole, comment pouvons-nous le réutiliser ? Eh bien, allons de l'avant et créons une nouvelle page. Je vais aller à Pages et à partir de là je vais cliquer sur Créer une nouvelle page. Donnons-le un nom. Je vais le nommer Contact and Create. Maintenant, nous avons un Canvas vide. Je vais aller à Symbols d'ici, nous avons notre barre de navigation. Si je le fais glisser et le dépose ici, on y va, on a notre barre de navigation. Mais attendez, ne pouvons-nous pas simplement le copier et le coller au lieu de créer des symboles ? Oui, mais ce n'est pas un moyen efficace. Pourquoi ? Parce que lorsque vous copiez et collez un élément, si vous apportez une modification à l'un de ces éléments, cette modification est unique à cet élément particulier et n'affecte pas les éléments dupliqués. Mais quand on utilise des symboles, laissez-moi vous montrer comment ça marche. Supposons que je veux changer ce contact, ce contact prend à nous contacter à la place. Pour ce faire, vous devez d'abord aller au symbole maître. Si vous double-cliquez sur cela, comme vous pouvez le voir maintenant, nous sommes à l'intérieur du symbole maître. Je peux double-cliquer sur ce texte et je vais le modifier pour nous contacter. Ensuite, je vais appuyer sur le bouton Retour à l'instance ici. Maintenant, nous le modifions ici dans notre page de contact. Si je retourne à ma page d'accueil, vous pouvez voir que la modification a également été appliquée automatiquement à cette instance. Lorsque vous travaillez avec des symboles, vous apportez des modifications une fois et les modifications s'appliquent automatiquement à toutes les instances de ce symbole particulier. C' est si puissant car imaginez que vous avez 100 pages différentes sur votre site Web. Si vous voulez simplement aller de l'avant manuellement et modifier votre barre de navigation ou tout autre élément un par un, cela va prendre tellement de temps et croyez-moi, c'est un processus ennuyeux. Si vous pouvez utiliser des symboles, assurez-vous de les utiliser. Il est généralement utile pour créer des barres de navigation, des pieds de page. Nous parlerons des cas d'utilisation plus tard. Mais pour l'instant, je vais vous montrer comment vous pouvez les utiliser et comment vous pouvez modifier le contenu, comment vous pouvez remplacer le contenu ici. Jusqu' à présent, nous avons appris à créer un symbole, à réutiliser un symbole, à modifier un symbole. Maintenant, nous allons parler de l'écrasement. Comment nous pouvons remplacer le contenu de nos symboles. Ici, j'ai créé une carte simple avec quelques éléments, un titre, une image, un paragraphe et un bouton. Je vais le transformer en symbole. L' autre façon de créer un symbole est de simplement cliquer avec le bouton droit de la souris sur votre élément et à partir de là, vous pouvez choisir Créer un symbole, juste comme ça. Maintenant, on peut le nommer, disons carte. Notre symbole de carte est prêt. Maintenant, ce que je vais faire est de le copier et de le coller deux fois. Je vais frapper le commandement C ou le contrôle C et le commandement V ou le contrôle V deux fois. Ces deux nouvelles cartes sont des exemples de notre symbole de carte. Si j'apporte des modifications à la première carte, par exemple, si je change la taille de cette image, les modifications s'appliquent immédiatement aux autres cartes également. Si je modifie cet en-tête en H2, vous pouvez voir que les modifications s'appliquent à toutes les instances. Mais comment pouvons-nous surpasser le contenu de ces deux instances ? Étant donné que nous avons trois cartes différentes et que nous n'allons certainement pas utiliser le même contenu pour toutes les cartes, nous devons apprendre comment nous pouvons remplacer le contenu. Pour ce faire, vous devez d'abord créer des champs pour vos symboles. Je vais double-cliquer sur ce symbole pour aller au symbole maître et je serai en mesure d'éditer des choses. Ensuite, je vais sélectionner l'élément pour lequel je veux créer un champ. Je vais commencer par cette image parce que cette image devrait être remplaçable. Je vais choisir ça. Si je vais aux Paramètres d'image ici en haut, je peux voir qu'il y a Paramètres d'image ici et j'ai ce bouton violet dans le coin supérieur gauche. Si je survole cela, vous pouvez voir qu'il se transforme en un bouton plus. Je vais cliquer dessus et puis je vais cliquer sur « Nouveau champ », juste comme ça. Comme vous pouvez le voir, il est dit, « Ce nouveau champ sera automatiquement lié à cette image override », et je vais le nommer Image. Créer et lier, il indique que vous venez de créer et de lier un champ de remplacement. Maintenant, je vais sélectionner ce titre et d'ici, je vais cliquer sur ce champ Lien vers, Créer un nouveau champ et appelons-le Titre. Créer et lier. Super. Je vais faire la même chose pour le paragraphe. Créons un nouveau champ. Ici, je vais écrire la description, Créer et lier et c'est tout. Je ne vais pas créer un champ pour le bas, mais si vous voulez, vous pouvez le faire aussi. Comment ça marche ? D'abord, laissez-moi quitter le symbole principal. Je vais cliquer sur « Retour à l'instance ». Maintenant, si je sélectionne ma deuxième carte sur le côté droit, vous pouvez voir que nous avons des remplacements d'instance. Nous avons l'image, ce sont les champs que nous venons de créer. Nous avons l'image, le titre et la description. Chaque champ a un contenu par défaut. Je vais remplacer cette image simplement par ceci. Je vais modifier le texte ici à la Carte 2, et nous pouvons également modifier le paragraphe comme ça. Laisse-moi choisir la troisième carte et on va faire la même chose pour celle-là. Celle-ci sera la Carte 3. Pour celui-ci, je vais supprimer la première phrase comme ça. C' est essentiellement ainsi que vous pouvez remplacer le contenu de vos symboles. La dernière chose dont je vais parler est de dissocier vos symboles. Comment pouvez-vous dissocier un symbole ? Il y a des moments où vous voulez apporter des modifications et que vous voulez que ces modifications soient appliquées à des éléments spécifiques. Pour ce faire, d'abord, sélectionnez votre symbole, faites un clic droit dessus. De là, vous pouvez trouver Unlink Instance. Si vous cliquez sur Modifier le symbole principal, vous serez redirigé vers le symbole principal et vous pourrez le modifier. Mais si vous dissociez l'instance, juste comme ça, maintenant c'est juste un div simple. Comme vous pouvez le voir, ce n'est plus un symbole et vous pouvez le reconnaître depuis le navigateur, car ici l'icône de ces symboles est verte. Mais c'est juste un bloc div simple. Maintenant, si je change une dimension de cette image, ce changement est unique à cette carte particulière.. Les gars, c'est tout pour cette vidéo. J' espère que ça vous a plu et je vous verrai dans la prochaine. 26. Raccourcis importants: Hé, dans cette vidéo, on va parler des raccourcis de Webflow. Lorsque nous travaillons sur un projet, nous pouvons avoir besoin d'utiliser quelques raccourcis pour accélérer notre processus de conception, et dans cette vidéo, je vais parler des plus importants car il existe de nombreux raccourcis différents que vous pouvez utiliser, mais nous n'allons pas en parler tous parce que la plupart du temps, nous n'utiliserons pas tous ces raccourcis. Si vous allez dans le coin inférieur gauche de Webflow ici, vous pouvez voir ces points d'interrogation. Si vous cliquez dessus, ici sur le panneau d'aide, nous avons différentes options. La deuxième option est les raccourcis clavier. Je vais cliquer dessus, et c'est là. Comme je l'ai mentionné précédemment, nous n'avons peut-être pas besoin de tous, mais certains d'entre eux sont si importants à savoir, comme copier-coller, annuler, refaire, trouver, etc. Chaque fois que vous voulez copier quelque chose, vous peut utiliser la commande C ou le contrôle C, si vous utilisez Windows. Si vous voulez couper quelque chose, vous pouvez utiliser la commande X ou le contrôle X, et si vous voulez coller quelque chose, vous pouvez utiliser la commande V ou le contrôle V. Fondamentalement, si vous êtes un utilisateur Mac, vous devez utiliser la commande. Si vous êtes un utilisateur Windows, vous devez utiliser Contrôle. Ici, par exemple, pour dupliquer, il est dit Option plus Drag. Donc, si vous maintenez la touche Option de votre clavier et que vous cliquez et faites glisser, vous pouvez dupliquer un élément. Sur les fenêtres au lieu d'Option, vous devez maintenir la touche Alt sur votre clavier. Ici, comme vous pouvez le voir, pour annuler, nous utilisons la commande Z ou le contrôle Z, et pour refaire, nous utilisons Command Shift et Z. Les autres raccourcis importants sont les vues de l'appareil. Ici, comme vous pouvez le voir, si vous voulez aller à un autre point d'arrêt, par exemple, si vous voulez aller au point d'arrêt de la tablette, vous pouvez appuyer sur le numéro 2 de votre clavier. Si vous voulez aller au portrait mobile, vous pouvez frapper le numéro 4. L' utilisation de ces raccourcis est facultative, mais croyez-moi, cela vous rendra la vie beaucoup plus facile si vous les apprenez. L' autre raccourci important que nous utilisons presque tout le temps est Find. Il y a une très bonne fonctionnalité appelée Recherche rapide. Lorsque vous voulez l'ouvrir, vous pouvez appuyer sur Commande E ou Commande K, ou Contrôle E ou Contrôle K. Nous parlerons de Recherche rapide plus tard, mais pour l'instant, vous avez juste besoin de savoir comment vous pouvez utiliser ces raccourcis. Si vous voulez en savoir plus sur ces raccourcis, vous pouvez vous diriger vers le panneau d'aide et cliquer sur les raccourcis clavier et simplement les consulter, mais pour l'instant, ce sont les raccourcis les plus importants que vous devez connaître. Les gars, c'est tout pour cette vidéo. J' espère que ça vous a plu et je vous verrai dans la prochaine. 27. Cours: Presque tous les sites Web modernes de nos jours sont créés en utilisant des classes. Pourquoi ? Parce que les classes nous permettent de stocker nos informations de style et de les réutiliser encore et encore pour autant d'éléments que nous le voulons. C' est pourquoi les classes sont si puissantes et il est presque impossible de créer une page Web moderne sans classes. Laissez-moi vous montrer comment ça marche. Lorsque vous ajoutez un élément à votre Canvas, par exemple, un bloc Div, comme ceci, vous pouvez vous diriger vers le panneau de style sur le côté droit et en haut nous avons la section « Sélecteur ». Voici où nous allons ajouter une classe ou disons sélectionner une classe. Par défaut, nos éléments n'ont pas de classe et si nous voulons modifier les propriétés CSS de nos éléments, nous devons ajouter une classe spécifique à cela. Si nous ne le faisons pas, Webflow attribue automatiquement une classe à cet élément particulier. Voyons comment ça marche. Tout d'abord, je ne vais pas ajouter de classe ici, je veux juste modifier la couleur de l'arrière-plan, et nous y allons. Dès que j'ai changé l'une de ces propriétés, cette classe de bloc Div a été créée automatiquement. Si nous voulons renommer notre classe, nous pouvons simplement faire un clic gauche dessus et simplement le renommer. Je vais l'appeler « Div ». C' est essentiellement comment vous pouvez créer une classe. L' autre façon, ce qui est mieux à mon avis, est de simplement créer une classe une fois que vous avez ajouté votre élément à votre Canvas. Donc, au lieu de modifier les propriétés de vos éléments, ajoutez d' abord une classe. De cette façon, vous pouvez vous assurer que vos classes sont organisées car plus tard nous allons réutiliser ces classes et les nommer correctement est si important. Maintenant, je vais sélectionner ce bloc Div et il n'y a pas de classe ici parce que je viens de supprimer cela. Laissez-moi vous montrer comment vous pouvez supprimer une classe. Je vais écrire « Div » pour choisir cette classe que j'ai créée. Pour supprimer une classe, vous pouvez simplement cliquer sur cette flèche vers le bas et juste appuyer sur « Supprimer la classe. » Alternativement, vous pouvez cliquer quelque part ici et comme nous pouvons le voir, ce curseur clignote. Si vous appuyez sur la touche Supprimer ou Retour arrière de votre clavier, cette classe sera supprimée. Maintenant, nous n'avons aucune classe appliquée à cet élément. Je vais cliquer ici et je peux commencer à créer une nouvelle classe. Nous devons nommer notre classe ici. Je vais écrire « New Div », « Enter », juste comme ça. Notre classe a été créée et nous n'avons pas encore modifié les propriétés de cet élément. Si je fais défiler vers le bas, vous pouvez voir qu'il y a quelques propriétés et elles sont mises en surbrillance avec ces couleur ambre. Cela signifie que ces propriétés particulières sont héritées d'une autre classe. Si je clique dessus, vous pouvez voir que la valeur vient de « Body (Toutes les pages) ». Nous parlerons de ces balises plus tard, mais pour l'instant, vous avez juste besoin de savoir que cette couleur ambre signifie que la propriété et le style viennent d'ailleurs. Bien sûr, vous pouvez remplacer cela, et une fois que vous avez remplacé cela, voyez ce qui se passe, il devient bleu. Cela signifie que cette propriété vient maintenant de cette classe. Si je clique dessus, vous pouvez voir que nous pouvons réinitialiser cette propriété et la réinitialisation héritera de la valeur de Body (Toutes les pages). Maintenant, allons de l'avant et modifions l'arrière-plan. Je vais le changer en blanc. Pourquoi avons-nous besoin d'utiliser des classes ? Eh bien, comme je l'ai mentionné précédemment, les classes stockent des informations sur notre style. Maintenant que nous modifions la couleur de l'arrière-plan et aussi la police, nous pouvons simplement réutiliser cette classe. Comment réutiliser une classe. abord, laissez-moi aller de l'avant et ajouter un autre bloc Div ici et je vais le placer juste à côté de lui, et maintenant au lieu de créer une nouvelle classe, je peux simplement appliquer la nouvelle classe Div à ce bloc Div particulier. Je vais écrire « Nouveau ». Je peux le trouver sous les classes existantes ici et là nous allons. Une chose dont vous devez vous rappeler est que nous apportons des modifications au style, nous ne modifions pas l'élément lui-même. C' est pourquoi nous pouvons appliquer une classe à n'importe quel élément. Nous définissons les propriétés d'une classe spécifique, puis nous pouvons appliquer à n'importe quel élément. Maintenant, je vais aller de l'avant et changer la couleur de l'arrière-plan, et voyons ce qui se passe. On y va. Comme vous pouvez le voir, le changement appliqué à ces deux blocs Div parce que ces deux éléments utilisent cette nouvelle classe Div. Mais que faire si je veux avoir une classe unique pour le deuxième bloc Div ? Pour ce faire, nous pouvons dupliquer une classe. On peut juste cliquer sur cette flèche vers le bas et je vais frapper « Duplicate class », et écrire « Second Div », juste comme ça. Maintenant, il n'y a pas de lien entre ce bloc Div et ce bloc Div parce que nous venons de dupliquer la classe et il n'y a pas de relation entre ces deux classes. Donc, si je décide de modifier la couleur ici, la couleur de l'arrière-plan, le changement que je fais ici ne s'applique qu'à cet élément particulier. Mais comment pouvez-vous renommer une classe ? Pour renommer une classe, vous pouvez simplement cliquer dessus et simplement la renommer. Je vais le changer en « Démo ». Maintenant, notre classe a été renommée. Laissez-moi vous montrer un autre exemple. Je vais aller à la section « Ajouter », et à partir de là je vais apporter un bouton dans mon Canvas, juste comme ça. Laisse-moi le mettre dans mon conteneur et je vais enlever ces blocs Div. Cool. Ce bouton n'a pas de classe. Je vais y ajouter une classe. Je vais écrire « Bouton primaire ». Cool. Maintenant, ce bouton primaire a quelques styles par défaut car c'est un élément pré-construit, et je vais remplacer ces éléments. Je vais commencer par l'espacement. Ici, nous avons différentes propriétés et je peux modifier le rembourrage. Je vais maintenir la touche d'option de mon clavier ou de la touche Alt enfoncée et juste un clic gauche et faire glisser pour modifier le remplissage des deux côtés simultanément, juste comme ça. Comme vous pouvez le voir, il est devenu bleu. Cela signifie que ces propriétés proviennent de cette classe, cette classe particulière. Maintenant, faisons un autre changement à ce bouton. Je vais modifier sa couleur pour autre chose. Maintenant, ce que je vais faire est d'ajouter un autre bouton ici. Voilà, et je vais appliquer la même classe à ce nouveau bouton. Cherchons le bouton primaire. Tous les styles ont également été appliqués à ce nouveau bouton. Que faire si je veux créer des variations pour mon bouton ? Eh bien, dans ce cas, nous pouvons utiliser quelque chose de très utile, une classe combo. Une classe combo est un type de classe qui est construit sur votre classe de base. En ce moment, nous avons créé la classe de base et si je veux créer une classe de combo, je peux simplement cliquer quelque part ici et comme vous pouvez le voir, il est écrit « Nouvelle classe de combo ». Pourquoi ? Parce que nous avons déjà la classe de base et nous pouvons créer une classe combo au-dessus de cette classe de base. Alors écrivons « Lumière ». Mais rien ne s'est passé. Bien sûr, rien ne s'est passé parce qu'on n'a rien changé. Maintenant que nous avons créé cette classe combo, cet élément hérite du style de deux classes différentes. Il hérite d'abord de toutes les propriétés de la classe Primary Button, puis il hérite d'autres propriétés de la classe Light. Donc, d'abord, toutes les propriétés de la classe Bouton primaire seront appliquées à ce bouton, puis si nous modifions quelque chose ici, puisque nous avons créé une classe combo, il remplace ces propriétés à partir du bouton principal. C' est si puissant. Supposons que je veux créer un bouton Light ici. Je vais modifier la couleur en blanc et comme vous pouvez le voir, elle devient bleue, et je vais modifier la couleur de la typographie ici en noir, juste comme ça. Laissez-moi vous expliquer ce qui s'est passé. Comme vous pouvez le voir, l'espacement n'a pas changé et nous avons cette couleur ambre ici. Cela signifie que ces propriétés proviennent de notre classe de boutons primaire. Cependant, si nous nous dirigeons vers la section d'arrière-plan, vous pouvez voir que nous avons ces couleurs bleues et cela signifie que cette couleur, cette propriété particulière vient de la classe de combo lumière. Mais pour mieux le comprendre, je vais sélectionner le bouton principal. Comme vous pouvez le voir, il n'y a qu'une seule classe appliquée, nous n'avons pas de classe combo, et je vais modifier le remplissage de 30 à 40 comme ça. Comme vous pouvez le voir, la modification que j'ai faite ici s'applique automatiquement à ce bouton, bien que nous ayons une classe combo. Pourquoi ? Parce que lorsque nous avons créé la classe combo, nous n'avons pas touché la propriété d'espacement, nous avons seulement modifié la couleur de l'arrière-plan. C' est comme ça que fonctionnent les classes combo. Ils sont construits sur le dessus de notre classe de base. En dehors de ces deux classes, la classe de base et la classe combo, nous avons un autre type de classe qui est appelé une classe globale. Laissez-moi vous montrer comment ça marche. Je vais aller de l'avant et faire glisser et déposer un bloc Div ici dans mon conteneur. On y va. C'est un bloc Div vide. Je vais y aller et lui assigner un cours. Donc, je vais créer une nouvelle classe et appelons-ça « Shadow ». Je vais le mettre à l'extérieur de mon conteneur que vous pourriez voir mieux. C' est juste ici en haut, et je lui ai donné ce cours d'Ombre. Maintenant, je vais aller à la section « Effets », et à partir d'ici, je vais cliquer sur ce bouton plus pour ajouter quelques ombres à ce bloc Div particulier. Comme vous pouvez le voir, l'ombre a été ajoutée ici. Je vais modifier les propriétés, la quantité de flou et la taille, et laissez-moi également modifier l'opacité. Cool. Maintenant, nous avons une classe mondiale. Qu'est-ce que ça veut dire ? Chaque fois que nous voulons appliquer un style spécifique à de nombreux éléments sur notre page Web, nous pouvons utiliser des classes globales. Par exemple, supposons que nous ayons différents boutons et que nous avons des images différentes. Laisse-moi aller de l'avant et glisser-déposer une image que tu pourrais mieux voir. Je vais diminuer sa largeur à 300 pixels. Cool. Supposons que nous voulons avoir une ombre portée cohérente pour tous nos éléments. Dans ce cas, je vais sélectionner mon bouton principal ici et je vais y ajouter notre classe globale. Cherchons l'ombre. Comme vous pouvez le voir, il est écrit « Global Combo Classes ». On y va. L' ombre a été ajoutée ici. Maintenant, je vais sélectionner ce bouton primaire et ici je vais écrire « Ombre ». On y va. L'ombre a été appliquée et faisons la même chose pour cette image. n'y a pas de cours ici. Donc, d'abord, je vais lui donner une classe, Image, puis je vais ajouter l'ombre, Global Class à cela, juste comme ça. Comme vous pouvez le voir, ces trois éléments utilisent maintenant notre classe mondiale Shadow. Mais que faire si je veux modifier les propriétés de cette classe mondiale Shadow ? Je peux sélectionner ce bloc Div. Il s'agit d'un élément temporaire. Je peux simplement supprimer cela et rien ne se passe, mais si je veux modifier les propriétés de cette classe globale, je vais devoir sélectionner ce bloc Div. Supposons que je veux changer, disons, la quantité de taille ici. Comme vous pouvez le voir, les modifications s'appliquent à tous les éléments qui utilisent notre classe globale. Si vous êtes familier avec différents logiciels de conception comme Figma ou Sketch, vous avez certainement utilisé des styles. Dans Figma, nous pouvons créer des styles de couleur, des styles de typographie. C' est exactement le même concept. Nous créons nos styles une fois et nous les appliquons à plusieurs éléments encore et encore et encore, et de cette façon, lorsque nous voulons apporter quelques modifications, nous pouvons le faire une fois et les changements s'appliquent immédiatement à tous les éléments qui utilisent cette classe spécifique. Les gars, c'est tout pour cette vidéo. J' espère que vous l'avez apprécié et j'espère maintenant que vous avez une meilleure compréhension des classes. Nous utiliserons des cours presque tout le temps lorsque nous travaillons sur nos projets. Assurez-vous donc de bien comprendre le concept de classes puisque nous allons les utiliser dans nos projets. Je te vois dans la prochaine vidéo. 28. Paramètres d'affichage: Tout site Web que vous visitez de nos jours utilise l'un des six paramètres d'affichage ici. Si vous accédez à la section Disposition sur le côté droit, vous pouvez voir que nous avons six paramètres d'affichage différents. Dans cette vidéo, nous allons parler de chacun de ces paramètres d'affichage, la différence entre eux, de la façon dont vous pouvez les utiliser et du moment où vous devez utiliser chacun d'eux. Il est important d'apprendre très, très bien ces paramètres d'affichage, car si ce n'est pas le cas, il est très difficile pour vous de créer des mises en page différentes pour vos projets. Assurez-vous de prêter attention aux détails car parfois la différence est subtile. Cependant, dans les projets concrets, cela fait une différence. Sans plus tarder, commençons. Tout d'abord, je vais aller de l'avant et ajouter un titre dans ce conteneur. Je vais aller de l'avant et sélectionner ce conteneur et supprimer ce rembourrage supérieur. Je n'ai pas besoin de ça. Maintenant, nous avons cette rubrique. Laissez-moi donner un cours. Je vais écrire H1. Ensuite, je vais modifier sa couleur pour que vous puissiez mieux la voir. Tous les éléments tels que le titre, le paragraphe, le bloc div, le bouton, etc. utilisent le paramètre d'affichage du bloc par défaut. Nous avons ici six paramètres d'affichage différents. Nous avons le bloc, nous avons le flex ou la flexbox, nous avons la grille, nous avons le bloc en ligne, nous avons l'inline, et finalement nous n'en avons pas. Comme vous pouvez le voir par défaut, il possède le paramètre d'affichage des blocs. Qu'est-ce que cela signifie ? Lorsque le paramètre d'affichage est défini sur Bloquer, cela signifie que votre élément prend toute la largeur de son parent. Dans ce cas, les parents de cet élément sont conteneurs. Comme vous pouvez le constater lorsque je sélectionne cet élément H1, cette limite prend toute la largeur de ce conteneur. La largeur de ce conteneur est fixée à 1 100 pixels. Par conséquent, cet élément H1 occupe également 1 100 pixels. Une autre chose importante est que si j'ajoute d'autres éléments ici, puisque ce titre est défini pour bloquer, si j'ajoute d'autres titres, comme ça, vous pouvez voir qu'il prend la ligne suivante disponible. Il ne sera pas juste à côté de cette rubrique. C'est ainsi que se comporte l'élément bloc. Laissez-moi lui donner l'étiquette H1, comme ça. Si je le copie et le colle plusieurs fois, vous pouvez voir que chacun de ces éléments prend toute la largeur de son parent, qui est dans ce cas le conteneur. C'est pourquoi ils ne peuvent pas s'asseoir l'un à côté de l'autre. Le prochain paramètre d'affichage dont nous allons parler s'appelle flex ou flexbox. C'est l'un des paramètres d'affichage les plus importants avec lesquels nous pouvons travailler pour le développement Web. Permettez-moi de vous montrer comment cela fonctionne. Contrairement au paramètre d'affichage par bloc appliqué à l'élément lui-même, le paramètre d'affichage flexible est appliqué au parent de nos éléments. Dans ce cas, est-ce que ce conteneur ? Nous ne sélectionnons pas notre élément et modifions leur paramètre d'affichage en flexbox. Pourquoi ? Parce que flexbox est utilisé pour aligner différents éléments, horizontalement ou verticalement. Permettez-moi de vous montrer comment cela fonctionne. Supposons que nous ayons plusieurs rubriques ici. cette façon, nous avons trois titres différents, et le paramètre d'affichage de ces en-têtes est défini pour bloquer. Ils prennent toute la largeur de ce conteneur. Ensuite, si je sélectionne ce conteneur, comme vous pouvez le voir par défaut, le paramètre d'affichage est défini sur Bloquer. Si je le change en flexbox, voyez ce qui se passe. Maintenant, ces éléments sont alignés les uns à côté des autres, et ici sous la mise en page, j'ai différentes propriétés à utiliser. J'ai une direction. Par défaut, il est défini sur Horizontal. Je peux le régler à la verticale pour les empiler verticalement. Je peux aligner l'élément au centre, horizontalement et verticalement. Je peux aligner ces éléments comme je le veux. Mais pour l'instant, il vous suffit de savoir que chaque fois que nous voulons créer une mise en page unidimensionnelle, nous pouvons utiliser flexbox. Mais que se passe-t-il si je veux créer une mise en page bidimensionnelle ? Dans ce cas, nous devons utiliser une grille. Vous avez raison. Nous avons déjà parlé de grille. Si vous vous souvenez, je vous ai dit que nous pouvons transformer n'importe quel type de boîte en grille, et c'est exactement ce que je voulais dire. Ici, si je change le paramètre d'affichage de flexbox à la grille, regardez ce qui se passe. Maintenant, nous avons une grille deux par deux. Maintenant, je peux modifier ma grille comme je le veux. Fondamentalement, vous pouvez transformer un bloc div en grille, un conteneur en grille, car vous pouvez facilement modifier le paramètre d'affichage de ces éléments. Si vous avez un conteneur et que vous souhaitez le transformer en grille, vous pouvez simplement modifier le paramètre d'affichage ici, puis vous obtiendrez une grille. Parlons maintenant du bloc en ligne. Je vais d'abord le remettre en mode bloc d'affichage. Si je veux que ces titres soient assis les uns à côté des autres, je peux utiliser le bloc en ligne. Passons ça en bloc en ligne et on y va. Comme vous pouvez le voir maintenant, ces éléments sont assis les uns à côté des autres et ils n'occupent pas toute la largeur d'un parent, c' est-à-dire ce conteneur. Lorsque vous souhaitez créer des balises, elles doivent être placées les unes à côté des autres ou d'autres cas d'utilisation différents. Mais qu'en est-il de l'inline ? Celui-ci est appelé bloc en ligne. Nous avons également le système en ligne. Si je le transforme en ligne, voyons ce qui se passe. La principale différence entre le bloc en ligne et l'inline est que l'inline ne respecte pas la propriété espacement. Vous ne pouvez pas modifier les propriétés d'espacement ici, mais vous pouvez modifier les propriétés de topographie ou disons la propriété backgrounds. Essayons ça. Maintenant que notre paramètre d'affichage est défini sur Inline, je vais changer l'arrière-plan ici par autre chose, juste comme ça, et je ne peux pas modifier le rembourrage ou la marge. Mais pourquoi devrions-nous utiliser le paramètre d'affichage en ligne alors que nous ne pouvons pas modifier le rembourrage ou la marge ? Eh bien, permettez-moi de vous montrer un très bon cas d'utilisation pour cela. Je vais supprimer ces titres. Je vais aller dans la section Ajouter et à partir de là, je vais faire glisser et déposer un paragraphe dans mon conteneur. Maintenant, permettez-moi de changer la couleur de ce paragraphe. Mais permettez-moi d'abord de lui donner une étiquette. Je vais l'appeler P pour paragraphe, et laissez-moi le changer en blanc. Par défaut, ce paragraphe utilise le paramètre d'affichage des blocs, et c'est tout à fait correct. Tout d'abord, permettez-moi de modifier la largeur de ce paragraphe. Je vais le régler à 500 pixels, juste comme ça. Permettez-moi d'augmenter un peu la taille de la police. Cool. Aussi la hauteur de la ligne, je vais la régler à 150 pour cent. Nous parlerons de ces unités plus tard. Mais pour l'instant, je veux juste que vous vous concentriez sur ce paragraphe. heure actuelle, ce paragraphe a un peu de style. Il utilise la classe P, et cette classe P a un certain style. Que se passe-t-il si je veux styliser un mot spécifique ici différemment ? Eh bien, dans ce cas, je peux sélectionner ce mot en particulier, par exemple celui-ci, puis à partir de là, je vais cliquer sur cette icône de pinceau, et il dit : « Envelopper avec span ». Voyons ce qu'il fait. Si je clique dessus, cela crée une plage de texte et cette plage de texte utilise par défaut le paramètre d'affichage en ligne. Nous pouvons modifier le rembourrage ou la marge. Même si nous voulons modifier les propriétés de taille ici, cela n'affecte pas ce mot. Laissez-moi vous le prouver. Je vais écrire 500 ici. Comme vous pouvez le constater, rien ne se produit car le paramètre d'affichage en ligne ne respecte pas les propriétés de taille ou d'espacement. Permettez-moi de réinitialiser ça pour l'instant. Depuis que nous avons créé cette période de texte, je vais aller de l'avant et l'appeler « surligner ». On y va. Ce que je vais faire, c'est modifier la couleur d'arrière-plan de cette plage de texte particulière. Je vais aller à la section arrière-plans ici, et je vais changer la couleur d'arrière-plan par quelque chose comme ça. Laissez-moi le rendre plus léger. Ensuite, je vais modifier la propriété topographique ici. Juste comme ça. Comme vous pouvez le constater, nous pourrions styler ce mot en particulier à l'aide d'une plage de texte, et cette plage de texte utilise l'affichage en ligne. Il s'agit d'un très bon cas d'utilisation du paramètre d'affichage en ligne. Si nous avons plusieurs paragraphes dans notre projet comme celui-ci, et que nous voulons simplement mettre en évidence un autre mot, nous pouvons simplement choisir ce mot, envelopper avec la portée et à partir d'ici, je vais lui donner la même classe que nous vient de créer ; surligner. On y va. Si je modifie les propriétés ici, puisqu'il ne s'agit que d'une classe, les modifications s'appliquent immédiatement à tous les éléments qui utilisent cette classe particulière. Permettez-moi de modifier cela. On y va. Passons maintenant au dernier paramètre d'affichage, qui n'est pas le cas. Aucun ne cache réellement les éléments. Permettez-moi de vous montrer comment cela fonctionne. Je vais aller de l'avant et supprimer ces paragraphes et ici à l'intérieur de ce conteneur, je vais ajouter un bloc div. Tout comme ça, et ce div block va avoir un cours. Je vais écrire une nouvelle carte, puis je vais changer sa couleur d'arrière-plan en blanc. Maintenant, je vais aller de l'avant et ajouter d'autres éléments dans ce bloc div particulier. Permettez-moi de commencer par ajouter un titre, puis je vais ajouter un paragraphe ici, et enfin je vais ajouter un bouton comme ça. Ensuite, permettez-moi de sélectionner ce nouveau bloc div de carte et de modifier sa hauteur. Par défaut, il est défini sur Auto. Je vais le changer à 400 pixels. Comme je l'ai déjà mentionné, par défaut, l'en-tête et paragraphe utilisent le paramètre d'affichage des blocs. Mais que se passe-t-il si je veux cacher un élément ici ? Eh bien, voyons ce qui se passe si je clique sur ce paramètre non affiché, la dernière option. On y va. Maintenant, c'est caché. Si je le retourne, juste comme ça, vous pouvez voir qu'il est maintenant visible. Mais vous pouvez dire : « Ne pouvons-nous pas simplement réduire l'opacité de cet élément ? » Voyons quelle est la différence entre réduire l'opacité et définir le paramètre d'affichage sur Aucun. Je vais sélectionner ce paragraphe et dans la section typographie, je vais réduire l'opacité de ces éléments à l'aide de ce curseur. On y va. Il n'est pas visible. Cependant, il est toujours là. Comme vous pouvez le voir, il prend de l'espace et si je le prévisualise, vous pouvez voir qu'il y a quelque chose et je peux sélectionner ce texte, mais il n'est pas visible. Dans ce cas, il est préférable d'utiliser un écran aucun. Une chose à mentionner est que lorsque vous utilisez le paramètre Afficher aucun ici, l'élément apparaît toujours dans votre code. Il disparaît simplement sur la page et depuis l'interface. Il ne prend pas de place, mais il est toujours présent dans notre code. Si vous souhaitez supprimer complètement quelque chose de votre code, vous devez supprimer cet élément. Pour ce faire, il vous suffit d'appuyer sur le bouton Supprimer ou Retour arrière de votre clavier, ou vous pouvez cliquer avec le bouton droit sur votre élément et cliquer sur Supprimer. Très bien, les gars, c'est tout pour cette vidéo. Dans la vidéo suivante, nous allons parler en détail des marques flexibles. On se voit alors. 29. Flexbox: Dans la vidéo précédente, nous avons parlé de tous les paramètres d'affichage que vous pouvez utiliser pour vos mises en page. Dans cette vidéo, nous allons plonger dans les détails de l'utilisation de Flexbox. Comme je l'ai mentionné précédemment, flexbox est très utile pour les mises en page unidimensionnelles. Je vais vous montrer quelques exemples utiles que vous pourriez vraiment comprendre comment vous pouvez utiliser différentes fonctionnalités et différentes propriétés d'une flexbox. Ici, comme vous pouvez le voir, j'ai créé quelques cartes simples. Si je vais à cet emballage, j'ai trois cartes différentes. Comme vous pouvez le voir, chaque carte a une image, un titre et un bloc de texte, rien de fantaisie. Mais leur alignement n'est pas ce que je veux, en fait je veux qu'ils s'assoient l'un à côté de l'autre. Pour cela, ce que nous pouvons faire est d'utiliser une flexbox. Chaque fois que vous souhaitez aligner certains éléments, vous devez vous assurer de ne pas définir le paramètre d'affichage de ces éléments sur flexbox. C' est faux. Laissez-moi vous montrer ce qui se passe. Si je sélectionne cette carte, par exemple, la première, et que je tourne le paramètre d'affichage en flexbox, c'est ce qui se passe, et ce n'est pas notre intention. Vous devez toujours vous assurer de choisir le parent de ces éléments. Dans ce cas, le parent de ces cartes est ce wrapper. Je vais sélectionner le wrapper, qui est le parent, et je vais le transformer en une flexbox. On y va. Maintenant, ces cartes sont assis l'une à côté de l'autre, et si je veux qu'elles s'empilent verticalement, je peux changer la direction de l'horizontale à la verticale, juste comme ça. Pour l'instant, je vais le garder horizontal, et parlons de l'alignement et de la justification. Quand je tourne quoi que ce soit vers une flexbox, je peux contrôler l'alignement de ses enfants. moment, les enfants de cette flexbox sont ces cartes. Ce que je vais faire, je vais vous montrer comment fonctionne l'alignement. Si je change l'alignement maintenant, vous ne pouvez pas voir ce qui se passe. Pourquoi ? Parce que la hauteur de ce wrapper est définie sur auto. Laissez-moi définir une hauteur spécifique pour ce wrapper, je vais le définir à 500 pixels. Maintenant, comme vous pouvez le voir, ces cartes sont étirées, car l'option Aligner est définie sur étirer. Mais que se passe-t-il si je veux qu'ils soient alignés au centre, fois horizontalement et verticalement ? La justification est définie sur le centre, si je change l'option Aligner au centre également, c'est ce qui se passe. Comme vous pouvez le voir, ces premières cartes sont plus petites. La raison en est, si je clique sur cette carte, vous pouvez voir que la hauteur est réglée sur auto. Ici, sur ces deux cartes, nous avons quatre lignes de texte, et ici nous n'avons que trois lignes de texte. Si je vais juste ajouter quelques mots fictifs ici, vous pouvez voir que nous aurons la même hauteur ici maintenant. Parlons maintenant de l'alignement. Je peux l'aligner vers le haut, vers le bas, vers le centre, je peux le régler pour s'étirer. Je peux changer la justification, à gauche, au milieu, à droite, et ces deux justifications sont si importantes. Celui-ci dit Espace entre, alors voyons ce qui se passe. Si je clique dessus, il distribue un espacement uniforme entre ces cartes. Cependant, la première carte collera sur le côté gauche de la limite, qui est ce wrapper. La carte de droite collera sur le côté droit de cette limite. Mais si je change la justification à la dernière option, Espace autour, vous pouvez voir que nous avons un espacement uniforme entre les cartes, mais la première et la dernière carte ne sont pas attachées aux bords de cette enveloppe. C' est la principale différence entre eux. La plupart du temps, nous utilisons l'espace entre, il est beaucoup plus sûr de travailler avec cette option, mais vous avez juste besoin de comprendre la différence entre ces options. Jusqu' à présent, nous avons travaillé avec les éléments parents. Mais lorsque nous tournons l'élément parent à une flexbox, l'enfant lui-même a également quelques propriétés. L' enfant ici, c'est cette carte. Je vais sélectionner une carte, et sur le côté droit, nous pouvons voir que nous avons l'enfant flex, et nous avons différentes options ici. Nous avons le dimensionnement, puis nous avons l'alignement et l'ordre. Si je clique dessus, vous pouvez voir que nous aurons aussi quelques options. Voyons ce qui va se passer si je change l'option de dimensionnement. Nous avons trois options de tailles différentes ici. Le premier indique Réduire si nécessaire, et par défaut, il est défini sur cette option. Cela signifie que si nous allons à d'autres points d'arrêt, par exemple, des appareils plus petits comme celui-ci, cela se rétrécit, car il est nécessaire, puisque nous n'avons pas autant d'espace. Mais regardons l'option suivante qui dit Grow si possible. Si je clique dessus, comme vous pouvez le voir, il n'y a pas d'espace entre les deux, et cela remplit tout l'espace dans notre wrapper, donc c'est la différence entre eux. Alors nous avons Ne pas rétrécir ou grandir. Maintenant, si je vais au point d'arrêt de la tablette, vous pouvez voir qu'ils ne rétrécissent pas, et ce n'est pas bon en fait en termes de réactivité. Vous pouvez également utiliser l'option manuelle, mais je ne l'ai jamais utilisé, et il est préférable de l'éviter car cela va compliquer votre vie. Je vais le changer en rétrécir si nécessaire. Parlons maintenant de l'alignement et de l'ordre. Ici, nous avons Align, et nous avons Ordre. Parfois, nous pourrions avoir besoin de changer l'ordre de nos cartes. Bien sûr, nous pouvons le faire dans le navigateur, comme ceci, mais nous pouvons aussi le faire ici en utilisant les options enfant flex. Si je sélectionne cette carte et que j'ajoute une classe combo. Par exemple, appelons-le Summer, et je veux que ce soit toujours la dernière carte, je peux la régler pour durer, et voilà. Leur placement a été modifié. Je peux le changer en premier, et je peux le définir sur Ne pas changer. Encore une fois, je peux utiliser la commande personnalisée aussi, mais la plupart du temps nous utilisons en premier et en dernier, juste comme ça. Parlons de l'alignement. Supposons que je veux aligner cette première carte différemment, je peux le faire. Je peux sélectionner cette carte, car une classe combo a été ajoutée à cet enfant. Je peux changer l'alignement vers le haut, le centre, le bas, ou encore une fois, étirement ou ligne de base. Je vais y aller avec l'auto. L' auto prend l'alignement que nous avons défini sur l'élément parent ici, Stretch. Mais parfois, pour certaines raisons, nous pourrions avoir besoin de remplacer ces préférences, ces propriétés que nous définissons pour l'élément parent. Maintenant, jetons un coup d'oeil à un autre exemple. Ici, en bas, j'ai créé quelques blocs de liens. Ce sont des blocs de liens simples, et j'ai créé quelques balises ici, comme vous pouvez le voir. Il y a un wrapper appelé Tags, et toutes ces balises sont à l'intérieur de ce wrapper. Si je sélectionne cette balise comme wrapper, et que je la transforme en flexbox, regardez ce qui se passe. Comme vous pouvez le voir, rien n'est organisé et nos tags sont détruits. Comment pouvons-nous réparer ça ? C' est très simple. Pouvez-vous voir cette option Enfants ici, qui indique Ne pas envelopper, par défaut ? Si je le mets sur Wrap, ça enveloppe tous nos enfants. Ces balises sont les enfants de l'enveloppe de cette balise, et maintenant j'ai accès à cette option d'alignement avancé. Ici, je peux le définir sur Aligner les lignes : Démarrer. Maintenant, l'emballage de cette étiquette enveloppe tous les enfants à l'intérieur. Si je vais de l'avant et copiez et collez ces balises encore et encore, vous pouvez voir qu'elles sont parfaitement alignées comme prévu. Pouvez-vous voir à quel point il est puissant de travailler avec flexbox ? Jetons un coup d'oeil à la commande une fois de plus. Ici, si je veux que cette balise de conception UI/UX soit toujours notre dernier élément, je peux lui donner une classe combo spécifique. Par exemple, je vais écrire UI/UX, et puis je vais changer l'ordre pour durer, juste comme ça. Les gars, c'est tout pour cette vidéo, j'espère que ça vous a plu, je vous verrai dans la prochaine. 30. Défi Flexbox: Maintenant que vous avez appris à travailler avec Flexbox, il est temps de défier vos compétences. Workflow a créé un jeu Flexbox très cool pour vous permettre de pratiquer ce que vous avez appris. Si vous allez sur flexboxgame.com, vous pouvez prévisualiser ce jeu et vous pouvez réellement jouer à ce jeu. Vous pouvez faire quelques exercices. Il y a 28 différents défis CSS Flexbox que vous pouvez résoudre pour voir si vous comprenez vraiment comment fonctionne la Flexbox ou non. Ce que je veux que vous fassiez, c'est d'aller de l'avant et de résoudre ces défis un par un du niveau un jusqu'au 28. Lorsque vous passez d'un niveau un au niveau 28, il devient de plus en plus difficile de résoudre ces défis, mais ne vous inquiétez pas, je suis presque sûr que vous pouvez les résoudre. Ce qui compte, c'est que tu essaies de les résoudre. Peu importe le temps qu'il faut pour les résoudre. Ce qui compte, c'est d'essayer. Dans la prochaine vidéo, nous allons résoudre tous ces défis ensemble. se voit dans la prochaine. 31. Solution de défi: J' espère que vous avez réussi à résoudre les 28 défis de la Flexbox. Mais si vous ne pouviez pas, c'est bien parce qu'ensemble, vous et moi, allons marcher à travers les 28 niveaux et nous allons résoudre chacun d'entre eux. Es-tu prêt ? Commençons. Tout d'abord, commençons par le niveau 1. Voyons ce que nous avons ici. Il dit déplacer le cercle vert dans le contour à l'aide du paramètre de mise en page flexible. abord, nous devons sélectionner le parent. N' oubliez pas, sélectionnez toujours le parent en premier. Il dit sélectionner cette boîte blanche, puis jouer avec Flex-Layout dans le panneau de droite. Ici, la seule chose que nous devons faire est de changer la justification à droite. C' est tout. Le niveau 1 est fixe. Passons au prochain niveau 2. Ici, nous avons deux cercles avec deux espaces réservés. C' est aussi simple. Je vais sélectionner un parent qui est ce terrain de jeu et le justifier au centre comme ça. Passons à la suivante. Ici, nous avons un, deux, trois cercles. Comme je peux le voir, nous devons modifier la justification pour l'espacer comme ça. Passons maintenant au niveau 4. Cool. Ici, la seule chose que nous devons faire est de modifier l'Aligner en bas. Et ici ? Eh bien, nous devons changer les deux Aligner et Justifier ici pour aligner ce cercle au centre. Je vais changer l'Aligner et le Justifier. Le numéro 5 est résolu. Passons à la suivante. Ici, d'abord, je vais l'aligner au centre, puis je vais choisir l'espace autour de celui-ci. Le prochain ici, nous avons juste besoin de changer la Direction. Ces cercles devraient s'empiler verticalement. Je vais changer la Direction à la verticale et c'est résolu. Passons au numéro 8. Ici, encore une fois, nous devons changer la Direction à Vertical. Aussi, je vais changer le Justifier, et enfin, je vais l'aligner vers la droite. Fait. La suivante. Ici, nous allons utiliser l'option inverse. Nous n'en avons pas parlé auparavant, mais si vous jetez un oeil à la section Direction juste à côté de ces onglets, nous avons cette icône. Il y a deux flèches, et c'est l'option Inverser. Cliquons sur ça. Fait. Passons à la suivante. Ici, je vais d'abord changer la Direction à Vertical , puis je vais l'aligner sur le côté droit et le bas, mais nous avons un problème. Ici, nous avons le numéro 1, mais le numéro 1 devrait être placé ici en bas. Par conséquent, je vais sélectionner l'enfant, qui est ce cercle. Assurez-vous de sélectionner l'enfant, et je vais modifier l'ordre. Ici, je vais changer l'ordre pour faire durer. Pour celui-ci, le milieu, je vais changer l'ordre en premier. Fait. Pouvez-vous voir à quel point il est facile de travailler avec Flexbox ? Et celle-là ? d'abord, faisons la direction verticale, puis je vais changer la justification en espace entre, et enfin, je vais modifier l'ordre. Je vais d'abord sélectionner le cercle, qui est cet enfant, et changer l'ordre pour durer, et celui-ci, le second devrait être le premier. Voyons ce que nous avons ici. Comme vous pouvez le voir ici, nous avons un, deux, trois, et les espaces réservés sont trois, deux, un. Nous devons d'abord inverser la mise en page juste comme ça. Je vais cliquer sur ce bouton Inverser, puis je vais l'aligner vers le bas, et enfin, je vais utiliser l'espace entre. Fait. Passons à la suivante. Voyons ce que nous avons ici. Comme vous pouvez le voir, ces cercles sont rétrécies, et ce n'est pas ce que nous voulons. Alors, que devrions-nous faire ? Tu te souviens de l'exemple de tag que je t'ai montré avant ? On a changé les enfants pour les envelopper. C' est exactement ce que nous devons faire ici. Tout d'abord, sélectionnez le parent et changez les enfants à Envelopper, et terminé. On n'a pas besoin de toucher à autre chose. Passons au niveau 14. Encore une fois ici, vous avez juste besoin de changer les enfants à Wrap, puis nous devons modifier l'alignement. D' abord, je vais l'aligner ici au centre, puis je vais modifier le Justifier au centre. Passons au niveau 15. Encore une fois, nous devons changer les enfants à Wrap, puis je vais changer l'Aligner ici à l'espace entre, et enfin, je vais changer le Justifier à l'espace entre. Passons maintenant à la suivante. Ici, encore une fois, nous devons changer les enfants pour Wrap. Voyons ce que nous avons ici. En haut, nous avons des espaces réservés verts, puis des espaces réservés orange, et enfin, des espaces réservés violets. Voyons ce qui se passe si je change la direction de Horizontal à Vertical. On y va. On y est presque. Maintenant, ce que je vais faire est de changer le Justifier en Centre, et aussi je vais changer l'Aligner ici en Centre. Passons à la suivante. Voyons ce que nous avons ici. Un, deux, quatre, et cinq sont placés correctement, la seule chose que nous devons faire est de changer l'alignement de ces cercles verts. Je vais sélectionner ce cercle et puis je vais changer l'alignement en bas fait. Maintenant, nous sommes au niveau 18. Voyons ce que nous avons ici. Nous pouvons toujours jeter un coup d'oeil à un indice ici aussi. Il indique la disposition inverse sur le conteneur flex et modifier l'alignement sur deux des enfants flex. D' abord, je vais sélectionner le conteneur qui est ce terrain de jeu, puis je vais l'inverser. Maintenant, sélectionnons ce cercle un, alignez-le au centre, ce cercle trois, alignez-le vers le bas, et enfin, je vais sélectionner à nouveau le parent et changer le Justifier à l'espace entre juste comme ça. Passons maintenant au niveau suivant, le niveau 19. D' abord ici, je vais sélectionner ce cercle et je vais changer la taille pour grandir si possible, et c'est fait. Passons au niveau 20. numéro un est placé correctement, le numéro trois et le numéro deux doivent être modifiés. Je vais sélectionner le numéro deux et changer la taille pour augmenter si possible, et c'est fait. Passons au prochain niveau 21. Ici, jetons un coup d'oeil à l'indice. Il dit que le cercle vert devrait avoir une largeur de 200 pixels. Oui, c'est vrai. Je vais sélectionner le cercle un, et je vais changer la largeur de 100 pixels à 200 pixels. Je vais sélectionner le cercle deux, et changer la taille pour augmenter si possible. Allons au niveau 22. Ici, le numéro un devrait être ici au milieu, et le numéro trois devrait être placé ici. abord, je vais sélectionner le numéro trois, et je vais changer l'ordre en premier, et c'est fait. Passons au prochain défi. Voyons ce que nous avons ici. Ce numéro deux devrait être le dernier enfant. Je vais changer l'ordre pour durer. numéro trois devrait être le premier enfant, donc je vais changer l'ordre en premier, et le reste va bien. Je vais passer au niveau 24. Voyons ce que nous avons ici. D' abord, je vais sélectionner le terrain de jeu, qui est le parent ici, et je vais changer les enfants de Ne pas envelopper à Wrap. Rien ne se passe encore. C' est très bien. Ensuite, ce numéro trois devrait prendre toute la largeur de ce conteneur ici. Comme vous pouvez le voir ici, nous avons un indice. Il dit, devinez ce que vous devez faire si vous voulez flex enfant pour s'étendre sur toute la largeur de son conteneur parent ? Réglez juste sa largeur à 100 %, et c'est exactement ce que nous allons faire. Je vais sélectionner le numéro trois, et je vais changer la largeur à 100 pour cent. Ensuite, je vais changer l'ordre en premier. Maintenant, ce que je dois faire est de sélectionner le parent et de changer l'option de ligne ici. Je vais changer les lignes Aligner à Aligner, démarrer, et c'est terminé. Passons à la suivante. Il n'y a pas d'indice cette fois, c'est bon. Voyons ce que nous avons. abord, le deuxième cercle devrait être placé ici au lieu de ce cercle vert, donc, je vais sélectionner ceci et je vais changer son ordre en premier. Ensuite, comme vous pouvez le voir, numéro un devrait prendre toute la largeur de cet espace réservé vert. Par conséquent, je vais changer sa largeur à 100 pour cent, et comme vous pouvez le voir, puisque nous n'avons pas changé ses enfants pour Wrap, tout est foiré ici. Je vais changer les enfants pour Wrap. On y va et on va voir ce qu'on a. abord, je vais sélectionner ce cercle trois et changer la taille pour grandir si possible. La seule chose qui reste, c'est l'alignement. Donc, je vais sélectionner le parent et changer l'alignement ici à l'espace entre. Ok, c'est fait. Passons à la suivante. Astuce, le paramètre Aligner sur les enfants flexibles individuels vous aidera. D' abord, ce cercle devrait être le dernier car il va être placé en bas. Je vais changer son ordre pour durer. La commande est correcte maintenant. Ensuite, je vais sélectionner un cercle et définir sa largeur à 100 pour cent. Enfin, je vais sélectionner le parent et le changer en Envelopper. Je vais sélectionner un cercle, celui-ci , et changer son alignement en bas. Je vais sélectionner les parents une fois de plus. Voyons comment nous pouvons aligner ces deux cercles. Si je change la justification vers la droite, numéro deux sera placé correctement. Maintenant, je dois changer l'alignement de ce cercle particulier, numéro trois. J' ai besoin de le sélectionner et changeons son alignement en bas. Le niveau 26 est également fait. Passons un au niveau 27. Voyons ce que nous avons ici. Le numéro deux devrait prendre toute la largeur de cet espace réservé. Je vais sélectionner ça et je vais changer la largeur à 100 pour cent. Ensuite, comme vous le savez, nous devons sélectionner le parent et le changer pour envelopper. Ensuite, sélectionnons cercle deux, et faites-le d'abord. Qu' est-ce qu'on a d'autre ici ? Si je sélectionne un cercle et que je change la taille pour grandir si possible, il va grandir, mais l'ordre n'est pas correct. Ce que je vais faire est de sélectionner le parent et d'inverser la direction juste comme ça. Je vais sélectionner ce cercle cinq et définir la taille pour augmenter si possible. Enfin, pendant qu'il est sélectionné, je vais l'aligner vers le bas. Fait. Last but not least, Level 28, combinez maintenant toutes les choses que vous avez apprises aujourd'hui pour résoudre ce problème. Voyons comment on peut résoudre celui-là. Intéressant, n'est-ce pas ? Voyons ce que nous avons. Ici, on en a un, quatre, cinq. Je vais sélectionner le parent et inverser la direction d'abord, juste comme ça, puisque l'un est ici. Ensuite, je vais sélectionner le deuxième cercle et le faire en premier. Puisque nous inversons cela, l'ordre ne fonctionne pas comme prévu. Donc, quand je choisis le premier, ça veut dire dernier maintenant, et si je choisis le dernier, ça veut dire d'abord. Mais pour l'instant, choisissons d'abord. Je vais sélectionner ce cercle vert et le faire durer. Ensuite, pendant qu'il est sélectionné, je vais définir sa largeur à 100 %, puis sélectionner le parent, puis choisir Envelopper. Je vais sélectionner ce cercle vert et changer son alignement en bas. Je vais sélectionner ce cercle, ce violet, et changer son ordre pour durer. Sélectionnons l'un de ces cercles orange et alignons-les vers le bas. Enfin, nous devons sélectionner notre deuxième cercle et modifier sa taille pour grandir si possible. On y va. Nous avons réussi à résoudre les 28 défis de CSS Flexbox. Permettez-moi de vous dire quelque chose si vous ne pouviez pas résoudre certains de ces défis, c'est bien parce que, dans des projets réels, nous n'utilisons jamais certaines de ces mises en page. Mais il est bon pour vous de voir ce qui est possible et comment vous pouvez utiliser la Flexbox. C' est tout pour cette vidéo. J' espère que ça vous a plu. Je te verrai dans la prochaine. 32. Flexbox vs Grid: Maintenant que vous avez appris à propos de flexbox et grid, il est temps de les comparer côte à côte pour voir lequel vous devez utiliser à quel but. Permettez-moi de mentionner que parfois il n'y a pas de bonne ou de mauvaise façon quand il s'agit développement web parce que vous pouvez réaliser quelque chose en utilisant la grille et vous pouvez obtenir la même chose en utilisant une flexbox. Parfois, tout vient à nos préférences et comment nous voulons structurer notre site Web. Par conséquent, je vais vous montrer quelques exemples pour mieux comprendre la différence. Tout d'abord, vous devez savoir que lorsque nous avons des mises en page unidimensionnelles, il est probablement préférable d'utiliser une flexbox, mais parfois si vous voulez rendre notre design réactif et rendre notre vie beaucoup plus facile, nous pouvons faire la même chose en utilisant une grille. Ici, j'ai une carte à l'intérieur de cette section. Je vais aller de l'avant et ajouter un conteneur ici. Je vais faire glisser et déposer un conteneur. Ensuite, laissez-moi ajouter le conteneur de classe à cela. Enfin, je vais glisser et déposer cette carte dans mon conteneur. Joli. Maintenant, je vais le copier et le coller trois fois. Permettez-moi de sélectionner ma section puisque je l'ai transformée en flexbox, et maintenant je vais sélectionner mon conteneur et je vais changer le paramètre d'affichage en flexbox. Ici, nous avons une flexbox horizontale. Comme vous pouvez le voir, tout a l'air bien. Je peux changer la justification en espace entre à l'espace autour, à gauche, au milieu, tout ce que je veux. Mais maintenant j'utilise une mise en page unidimensionnelle. Si j'ai deux conteneurs comme ça, maintenant nous avons une mise en page bidimensionnelle. Il est probablement plus logique d'utiliser une grille. Maintenant, vérifions cette mise en page sur différents points d'arrêt. Je vais aller à Tablettes et comme vous pouvez le voir, ça se rétrécit. Joli. Cependant, si vous voulez rendre notre conception plus réactive, il serait logique d'utiliser également une grille, même pour une mise en page unidimensionnelle. C' est totalement à toi de décider. Comme je l'ai déjà dit, il n'y a pas de bonne ou de mauvaise façon. Parfois, nous avons juste besoin de nous concentrer sur nos préférences et de nous concentrer sur le fait que la meilleure façon de répondre à nos besoins. Laisse-moi aller de l'avant et glisser-déposer une grille ici. Je vais le mettre dans ma section et me laisser glisser ces cartes à l'intérieur de cette grille. Bien sûr, je pourrais transformer ce conteneur en grille, mais je vais le faire manuellement, juste comme ça. Je vais enlever le conteneur. Maintenant, nous avons cette grille, qui est à l'intérieur de notre section. Oups, je vais copier et coller cette carte encore une fois. Laissez-moi sélectionner cette grille et je vais y ajouter une classe. Je vais l'appeler Grid. Ensuite, permettez-moi d'ajouter une marge des deux côtés. Cool. Tout comme une flexbox, nous pouvons également contrôler l'enfant d'une grille. Ici, si je sélectionne cet enfant, cette carte, je peux modifier l'alignement, je peux changer la justification ici, je peux changer l'ordre, et ainsi de suite. Il vient à vous de décider si vous avez besoin d'utiliser une grille ou une flexbox. Assurez-vous de travailler avec les deux et vérifiez celui qui a le plus de sens à utiliser pour vos besoins. Les gars, c'est tout pour cette vidéo, je vous verrai dans la prochaine. 33. Espacer: Ici, j'ai une carte, mais ça n'a pas l'air bien. Pourquoi ? A cause de l'espacement. Ici, le contenu ne peut pas respirer, donc, j'ai besoin de modifier l'espacement entre ces éléments. Comme je l'ai déjà mentionné, en ce qui concerne l'espacement, nous avons deux composants principaux. Nous avons la marge et le rembourrage. La marge est l'espace à l'extérieur de l'élément, et le rembourrage est l'espace à l'intérieur d'un élément. Jetons un coup d'oeil. Ici, je vais sélectionner ma carte. Si je veux ajouter un peu de place pour le bloc de texte ici, je vais sélectionner cela, et je peux ajouter un rembourrage gauche et un rembourrage droit, juste comme ça. Alternativement, ce que je peux faire est de sélectionner la carte et d'ajouter le rembourrage. Cependant, ce rembourrage s'applique à tous les éléments à l'intérieur de cette carte, à tous les enfants de ce bloc. Essayons ça. Juste comme ça, et on y va. Mais ce n'est pas ce que je veux. Je vais annuler le processus, et je vais sélectionner le bloc de texte, et je vais ajouter 20 pixels et le remplissage gauche et droit. Cependant, il est très fastidieux et fastidieux d' ajouter le remplissage pour chaque côté un par un, par conséquent, je peux maintenir la touche Option sur macOS et la touche Alt sur Windows, puis cliquer et faire glisser pour ajuster le remplissage pour les côtés opposés. Juste comme ça. Si je veux changer le rembourrage pour tous les côtés comme le haut, le bas, la gauche et la droite, au lieu de la touche Option ou Alt, je dois maintenir la touche Maj enfoncée de mon clavier, puis cliquer et faire glisser. Vérifie ça. Cela fait gagner beaucoup de temps. Mais qu'en est-il de la marge ? Laisse-moi mettre le rembourrage du haut à zéro. Je vais sélectionner cette rubrique. Cette fois, au lieu de rembourrage, je vais changer la marge, la marge inférieure. Comme je l'ai déjà mentionné, la marge est l'espace à l'extérieur d'un élément. Par conséquent, je vais augmenter cela de 10 pixels et la marge supérieure de 10 pixels aussi. Ça a l'air beaucoup mieux maintenant. Maintenant, cette carte est à l'intérieur d'un conteneur. Si je le prends à l'extérieur de ce conteneur pendant une seconde, vous pouvez voir qu'il touche les bords. Si je veux l'aligner au centre de ma section, laissez-moi supprimer ce conteneur pendant une seconde. Si je veux le centrer à la fois horizontalement et verticalement, j'ai quelques options. La première option est que je peux aller de l'avant et définir la marge manuellement, comme ceci, ce qui n'est pas une bonne option et vous ne devriez pas essayer cela jamais. La raison en est que lorsque vous définissez la marge manuellement, il peut sembler bon sur un appareil. Cependant, si vous accédez au point d'arrêt de l'iPad, vous pouvez voir qu'il n'est pas centré car il a toujours une marge de 435 pixels. Tu ne devrais jamais faire ça. Je vais réinitialiser cette marge. Je vais cliquer dessus. Cliquez sur Réinitialiser. Alternativement, vous pouvez maintenir la touche Option ou Alt enfoncée, puis cliquer dessus comme ça. Comment puis-je l'aligner au centre ? J' ai différentes options. Chaque fois que vous avez un élément qui a une largeur fixe comme celui-ci, lorsque la largeur est définie ici, comme vous pouvez le voir ici, la largeur est de 300 pixels, vous pouvez définir la marge gauche et droite sur auto. Si je clique dessus, je peux définir la marge gauche sur auto et ensuite je vais définir la marge droite sur auto aussi. On y va. Maintenant, il est parfaitement centré. Essayons ça. Je vais vérifier si c'est réactif et si cela fonctionne correctement. Je vais aller à Tablet, comme vous pouvez le voir, c'est toujours au milieu. C' est parfait. C'est une option. Laissez-moi réinitialiser ces marges. Vous pouvez simplement cliquer sur ce bouton juste ici. Maintenant, les marges gauche et droite sont réglées sur auto. Cependant, gardez à l'esprit que cette façon ne fonctionne que lorsque vous avez une largeur définie. Si ce n'est pas le cas, vous pouvez utiliser une autre façon, c'est-à-dire des marques de flexion. Laissez-moi réinitialiser ces marges. Maintenant, j'ai cette carte, et je vais sélectionner la section et le paramètre d'affichage est défini pour bloquer. Je vais le régler pour fléchir. Je vais l'aligner au centre et le justifier au centre. On y va. Nous avons la même chose, mais cette option fonctionne même si votre élément n'a pas une largeur définie. Maintenant, je vais vous montrer un autre exemple. abord, je vais sélectionner cette carte, et comme vous pouvez le voir, son paramètre d'affichage est défini pour bloquer. Je vais le changer pour fléchir pendant une seconde et tout est désorganisé parce que la direction est réglée sur horizontale. Je vais le changer à la verticale, on va encore bien. Maintenant, je vais changer l'alignement au centre. Laissez-moi sélectionner l'image maintenant. Permettez-moi de changer sa largeur à 200 pixels et sa hauteur à 200 pixels également. Parfois, nous pouvons avoir besoin de déplacer cette image vers le haut pour avoir une image superposée. Pour ce faire, nous pouvons utiliser de l'espace négatif. Laissez-moi vous montrer comment ça marche. Je vais sélectionner cette image, et ici dans la marge, je vais lui donner une marge négative. Juste comme ça. On y va. Utiliser des marges négatives est tout à fait bien. En fait, de nombreux sites Web populaires les utilisent. Très bien, les gars, c'est tout à propos de l'espacement. J' espère que ça vous a plu. Je te vois dans la prochaine vidéo. 34. Taille: Dans le développement web, il existe différentes unités de taille que nous pouvons utiliser. Dans cette vidéo, nous allons parler de chacun d'entre eux. Commençons. Tout d'abord, je vais aller de l'avant et glisser-déposer une image dans mon Canvas. Laisse-moi le déposer dans ma section ici. Pour les images, vous pouvez spécifier les dimensions ici dans les paramètres de l'image, mais ce n'est pas un bon moyen. Pourquoi ? Laisse-moi te montrer. Ici, je vais changer la largeur à 400 pixels et la hauteur va être automatique. Pour l'instant, ça a l'air bien. Mais si je vais au point d'arrêt du bureau et si je veux apporter des modifications, particulier pour cette dimension, les modifications s'appliquent également à la version de bureau. Laisse-moi te montrer. Je vais double-cliquer dessus, et je vais diminuer la largeur ici à 300 pixels. Si je retourne au point d'arrêt du bureau, nous y allons, notre image est redimensionnée et ce n'est pas bon lorsque nous voulons concevoir des pages web réactives. Par conséquent, il est toujours bon d'utiliser des classes afin de dimensionner vos images. Vous devriez éviter de dimensionner vos images ici autant que vous le pouvez. Je vais le mettre en auto. Super. Maintenant, sur le côté droit, vous pouvez voir que c'est dans le panneau latéral, nous avons la section taille. Comme je l'ai mentionné précédemment, ce sont toutes des propriétés CSS et la taille est également une propriété CSS. Nous avons différentes unités avec lesquelles travailler. Le plus simple est le pixel. Les dimensions de tous les éléments sont définies par défaut sur auto. Comme vous pouvez le voir, il est dit auto. Auto détermine les dimensions de cet élément par rapport au parent de cet élément. Dans ce cas, les parents de cette image est cette section. Ici, la largeur et la hauteur sont réglées sur auto. Je vais sélectionner cette image et au lieu d'auto, je vais lui donner une valeur spécifique. Disons 350 pixels. Pour écrire l'unité, vous pouvez simplement écrire px, ou vous pouvez simplement cliquer sur ce petit « PX » ici et vous verrez toutes les unités disponibles. Je vais sélectionner « PX », laissez-moi le faire plus grand. Je vais le régler à 450 pixels. Maintenant, cette image a une largeur spécifique. Nous pouvons également définir une hauteur spécifique pour cela. Mettons-le à 350 pixels, juste comme ça. Mais qu'en est-il des autres unités ? Nous avons un pourcentage. Je vais choisir ça. Eh bien, le pourcentage est en fait relatif à l'élément parent aussi. Par exemple, si je veux que cette image prenne 30 pour cent de l'espace disponible ici dans cette section, qui est l'élément parent, je peux la sélectionner et je peux la définir à 30 pour cent. Gardez à l'esprit que le pourcentage prend effectivement une partie de l'espace disponible. Ici pour cette section, moment j'ai un rembourrage à gauche et à droite de 40 pixels. Par conséquent, il occupe 30 pour cent de l'espace gauche ici. Laissez-moi sélectionner mon image. Je peux simplement le régler à 50 pour cent ou n'importe quel montant que je veux. La même chose arrive à la hauteur. Si je déplace cette image hors de ma section ici, et que le parent de cette image est maintenant le corps, donc il occupe 50 pour cent de la fenêtre du navigateur. Vérifions ça. Si je prévisualise cela, comme vous pouvez le voir, cela prend 50 pour cent de la fenêtre de mon navigateur. Si je modifie simplement la cote, vous pouvez voir qu'elle occupe toujours 50 % de la dimension. C' est facile, n'est-ce pas ? Passons maintenant à l'unité suivante. L' unité suivante est em. Nous allons parler d'ems et de rems, bien qu'ils ne soient pas si utiles. Commençons par EMS. En fait, ems et rems sont relatifs à la taille de la police. Ici, la taille de la police est définie sur 14 pixels. Un em est égal à 14 pixels. Si je veux définir la largeur à 280 pixels, je peux simplement multiplier cette quantité par cette taille de police. Disons 20. Donc 20 ems équivaut à 280 pixels. Écrivons 20 ems. On y va. Si j'écris juste 280 pixels, donc vous pouvez voir que c'est la même chose. Laisse-moi te le prouver. On y va. Rien ne change, car 280 pixels est égal à 20 ems. Laissez-moi écrire 20 ems à nouveau. Maintenant, si j'essaie d'augmenter la taille de la police, cette largeur change également en conséquence. Je vais maintenir la touche Option de mon clavier ou la touche Alt enfoncée si vous utilisez Windows et simplement cliquer et faire glisser. On y va. Je vais définir la taille de la police à 30. Un em est maintenant égal à 30 pixels. Par conséquent, la largeur de cette image est maintenant de 600 pixels. Vous pouvez utiliser ems parfois. Par exemple, si vous voulez concevoir une carte et que vous voulez que tous les éléments respectent la taille de la police. Mais l'un des meilleurs cas d'utilisation pour l'utilisation de ems est dans les boutons. Je vais aller de l'avant et faire glisser et déposer un bouton ici. Ce bouton, par défaut, a une marge de 15 pixels à gauche dans le remplissage droit. Voyons ce qui se passe si je change la taille de la police. D' abord, laissez-moi donner un cours à ce bouton. Je vais écrire New Button. Si j'essaie d'augmenter la taille de la police, voyons ce qui se passe. Tu vois ça ? Le rembourrage reste le même. On peut régler ce problème. Tout d'abord, je vais définir la taille à 16 pixels. Maintenant, ici pour le rembourrage, je vais utiliser ems, pour le rembourrage en haut, en bas, à gauche et à droite. Je vais sélectionner le rembourrage supérieur et ici je vais écrire un em pour le fond. La même chose, un em pour la gauche, un em et pour le droit em. Maintenant, nous avons un bouton entièrement réactif, car ces rembourrages sont maintenant relatifs à notre taille de police, donc ils respectent notre taille de police. Je vais aller de l'avant et augmenter la taille de la police. Comme vous pouvez le voir, l'échelle de rembourrage ainsi. C' est l'un des cas d'utilisation les plus populaires. Mais qu'en est-il de rems ? Laissez-moi sélectionner cette image. Eh bien, rems signifie en fait qu'il ne respecte pas la taille de la topographie que nous avons définie ici. Il vérifie uniquement la taille de police du navigateur de l'utilisateur. Par défaut, il est défini sur 16 pixels à moins que l'utilisateur ne change cela. Mais si je mets la largeur à 20 rem ici, juste comme ça, et j'essaie d'augmenter la taille de la police, rien ne se passe parce que rem ne respecte pas la taille de la police ici. Essayons. On y va. Rien ne se passe. Cependant, si j'accède aux paramètres de mon navigateur et que j'essaie d'augmenter la taille de la police, cette image sera plus grande. Ce sont des unités avancées que vous n'avez peut-être pas besoin de les utiliser, mais je veux juste que vous sachiez qu'elles existent. Maintenant, parlons de ch. Permettez-moi d'aller de l'avant et de faire glisser et déposer un paragraphe ici que vous pourriez vraiment comprendre ce que signifie le ch. Je vais le glisser et le déposer directement dans ma section. Permettez-moi de modifier la couleur ici en blanc. Cool. Comme nous pouvons le voir, la largeur du texte ici est si longue, donc, il est très difficile de lire ce paragraphe, et c'est une bonne pratique de limiter le nombre de caractères dans un paragraphe. Alors, comment pouvons-nous faire ça ? Nous pouvons soit définir une largeur spécifique pour cela. Nous pouvons utiliser le pourcentage ou nous pouvons utiliser CH. Je vais le mettre à CH. Alors c'est quoi un CH ? En fait, 10 CH équivaut à 10 zéros de cette police particulière. Qu' est-ce que je veux dire par là ? Laissez-moi définir cette largeur à, disons 50 CH. Cela signifie que la largeur de ce paragraphe est maintenant définie à 50 zéros de cette police particulière. Laissez-moi vous montrer comment ça marche. Je vais écrire quelque chose ici. Laissez-moi agrandir cette taille de police, je vais la mettre à 20. Écrivons « Bonjour ». Ensuite, je vais changer la largeur à 10 CH. Dix CH ne veut pas dire 10 caractères. C' est une erreur très commune que font la plupart des débutants. Il ne s'agit pas de caractères. Laisse-moi te le prouver. Ici, je vais écrire bonjour. Encore une fois, je vais écrire bonjour. Encore une fois, écrivons, bonjour, seulement, lui, ici. Comptons, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 et 12. C' est 12 caractères. Mais si j'appuie sur « Entrée » et j'essaie d'écrire des zéros, nous devrions pouvoir écrire précisément 10 zéros, 1, 2, 3, 4,5, 6, 7, 8, 9 et 10, le zéro suivant passe à la ligne suivante. C' est ainsi que fonctionne le CH. Si je change la police ici à autre chose, vous pouvez voir que la largeur change aussi. Tu vois ça ? D' accord. Passons maintenant à l'unité suivante, qui est VW et VH. VW représente la largeur de la fenêtre et VH signifie la hauteur de la fenêtre. Alors, qu'est-ce qu'ils veulent dire ? Eh bien, je vais sélectionner cette image et je vais régler la largeur à 50 VW. Qu'est-ce que ça veut dire ? Viewport est en fait la taille de la fenêtre de notre navigateur. Si j'utilise un écran de 13 pouces, ma clôture est un 13 pouces. Si j'utilise un écran plus grand, ma fenêtre sera plus grande. Ok, donc si je mets la largeur à 50 VW, cela signifie que cette image devrait prendre 50 pour cent de la largeur de la fenêtre. Essayons. On y va. Comme vous pouvez le voir, il occupe 50 % de la largeur de la fenêtre. On peut faire la même chose pour la hauteur. Je peux régler la hauteur à, disons 50 VH. Essayons. Comme nous pouvons le voir, il prend 50 pour cent de la hauteur des fenêtres de mon navigateur, juste comme ça. Parlons maintenant de la largeur minimale et de la hauteur minimale. Ils sont super, super puissants. Parfois, nous n'avons pas besoin de spécifier explicitement la taille spécifique pour nos éléments. Au lieu de cela, nous pouvons utiliser la largeur minimale, la hauteur minimale, la largeur maximale et la hauteur maximale. Laissez-moi vous montrer comment ça marche. Je vais passer à un autre exemple. J' ai une carte, d'accord ? Si je sélectionne cela, vous pouvez voir que la largeur et la hauteur sont réglées sur auto. Cependant, ça n'a pas l'air bien. Pourquoi ? Parce qu'il prend toute la largeur de la section, son élément parent. Comment puis-je réparer ça ? Eh bien, au lieu de définir une largeur spécifique pour cela, je vais définir une largeur minimale et une largeur maximale pour cela. Disons que nous voulons que cette image ait une largeur minimale de 350 pixels. Par conséquent, je vais définir la largeur minimale à 350 pixels. Rien ne change car il s'agit d'une largeur minimale. Si je veux limiter la largeur maximale de cette image ou de cette carte, disons que je dois modifier la largeur maximale. Ici, la largeur maximale va être de 400 pixels. On y va. Maintenant, cette carte mesure 400 pixels, mais elle ne peut pas être inférieure à 350 pixels. Essayons. Si je prévisualise cela, vous pouvez voir qu'il ne peut pas être plus petit que les 350 pixels, ok ? Parce que nous avons fixé une largeur minimale pour cela. Si je le rends plus petit, par exemple, la largeur minimale sera, disons 250 pixels. Maintenant, il peut être plus petit, ok, juste comme ça. Il s'agit d'une largeur minimale. Nous pouvons également utiliser la hauteur minimale. Il fonctionne exactement de la même manière. On peut l'utiliser pour notre section héros. Par exemple, pour nos sections, nous pouvons définir la hauteur minimale à, disons, 100VH et cela signifie qu'elle occupe au moins 100 % de la hauteur de la fenêtre et qu'elle ne gâche pas notre contenu. Comme je l'ai mentionné, ces unités sont avancées et si vous ne savez pas comment elles fonctionnent complètement, c'est très bien parce qu'il faut du temps et de la pratique pour s'habituer complètement à ces unités. Passons maintenant au sujet suivant qui est le débordement. Ici, dans notre carte, j'ai un paragraphe. D' accord, je vais réinitialiser cette largeur minimale et cette hauteur minimale. Ici, je vais définir une largeur spécifique, comme 340 pixels. La hauteur au lieu d'auto, je vais le mettre à, disons 400 pixels. Maintenant, si j'essaie d'ajouter plus de phrases ici, voyons ce qui se passe. On y va. Maintenant, nous avons le débordement. Ça arrive parfois, et on peut arranger ça. Pour corriger cela, nous devons sélectionner le parent de cet élément. Les parents de cette prise de texte est cette carte. Assurez-vous de sélectionner le parent. Si vous vous dirigez vers le débordement, ici nous pouvons définir le débordement sur caché. Il masque le contenu débordant. Si je prévisualise cela, vous pouvez voir qu'il n'y a pas de débordement qui se produit. Nous avons également d'autres options. Nous avons défilé. Si je sélectionne cela, vous pouvez voir que l'utilisateur peut faire défiler le contenu comme ça, nous avons une autre option et c'est auto. Auto signifie que le navigateur vérifie d'abord s'il y a tellement de contenu ici qui ne rentre pas dans cette carte, il affichera le défilement, mais si j'essaie de supprimer quelques phrases ici comme ça, il ne montrera pas le défilement . Maintenant, nous devons parler de la dernière propriété de la section de taille, qui est en forme. Laissez-moi glisser et déposer un bloc Div ici. On y va. Je vais lui donner un cours, ou appelons-le, Demo. Pour cette démo, je vais aller de l'avant et glisser-déposer une image ici. Supposons que nous voulons que cette image couvre ce bloc Div. Tout d'abord, je vais sélectionner cette image. Je vais régler la largeur et la hauteur à 100 pour cent. Cela signifie qu'il prend 100 pour cent de sa largeur parent qui est ce bloc div de démonstration et 100 pour cent de sa hauteur parent, qui est exactement ce bloc div de démonstration. Ensuite, pendant que cette image est sélectionnée, je vais changer l'ajustement de remplissage à couverture. Voyons ce qui se passe. Si je sélectionne ce bloc div de démonstration, je peux lui donner une largeur et une hauteur spécifiques comme 400 pixels. Vous pouvez voir que l'image couvre parfaitement ce bloc div. Si je modifie la hauteur, disons à 500 pixels, voilà, ça couvre l'image et ça ne change pas le rapport d'aspect de l'image puisque nous définissons l'ajustement à couvrir. Si je le change à, disons, le remplir changera le rapport d'aspect. Mais comme il est réglé pour couvrir, il ne change pas le rapport d'aspect de notre image. Mais que faire si vous n'êtes pas satisfait du positionnement de cette image ? Eh bien, il y a une option avancée juste à côté de cet ajustement. Si vous sélectionnez votre image, vous pouvez cliquer sur cette icône de trois points et ensuite vous pouvez positionner votre image comme vous le souhaitez. D' accord, c'est tout pour cette vidéo. J' espère que ça vous a plu. Si vous ne compreniez pas certaines de ces unités avancées, c'est très bien. Vous pouvez toujours tendre la main à moi et j'essaierai de tout simplifier pour vous. Mais croyez-moi, si vous commencez à les pratiquer dans des projets réels, à coup sûr, vous vous habituerez à eux aussi rapidement que possible. On se voit alors. 35. Position: Hé ! Dans cette vidéo, nous allons parler de positionnement. Fondamentalement, nous avons six types différents de positionnement. Nous avons statique, nous avons relatif, nous avons absolu, fixe, collant, et enfin nous avons flottant. Dans cette vidéo, nous allons plonger dans chacun d' eux et je vais vous montrer comment ils diffèrent les uns des autres, et comment vous pouvez les utiliser correctement. Es-tu prêt ? Commençons. Je vais commencer par statique. Tout élément par défaut a une position statique. Qu' est-ce que ça veut dire ? Cela signifie qu'ils font partie du flux de documents, donc ils occupent de la place sur notre page et ils apparaissent aussi dans l'ordre dans lequel ils sont empilés. Par exemple, ici j'ai un titre, sa position est définie sur statique. Ensuite, j'ai un paragraphe, encore une fois statique. Ensuite, j'ai cet emballage d'image, encore une fois, statique. Ensuite, j'ai ces images, ces blocs div, ils sont tous définis sur statiques. La plupart du temps, nous utilisons la position statique, et nous changeons le positionnement en utilisant les paramètres d'affichage dont nous avons parlé précédemment. Mais parfois, pour des raisons spécifiques, nous pourrions devoir changer le positionnement. Voyons comment ils diffèrent les uns des autres. Je vais sélectionner cette image, la troisième, ce bloc div, et je vais changer sa position de statique à relative. Voyons ce qui se passe. Rien. Mais ce n'est pas vrai, car maintenant sa position est relative à elle-même. Ici, comme vous pouvez le voir, il dit par rapport à, et ensuite il indique que la position de ce bloc div est relative à lui-même. Qu'est-ce que ça veut dire ? Lorsque nous définissons la position d'un élément sur relative, nous avons deux positions : l'ancienne position et la nouvelle position. La nouvelle position de cet élément est relative à l'ancienne position de cet élément. Cela semble compliqué et complexe à première vue, mais croyez-moi, c'est si simple. Laisse-moi te montrer. Ici, une fois que j'ai défini cette position sur relative, j'ai accès à ces paramètres de positionnement. Si j'essaie de changer sa position comme ça, maintenant cette nouvelle position est par rapport à sa position précédente. Nous l'avons déplacé de 92 pixels vers la gauche de sa position d'origine. Lorsque nous définissons la position d'un élément sur relative, il fait toujours partie du flux de document, donc il prend toujours de la place. C' est essentiellement ainsi que fonctionne le positionnement relatif. Une chose à mentionner est que lorsque nous avons différents éléments que nous voulons mettre sur l'autre, nous ne pouvons pas le faire en utilisant statique. Laissez-moi vous montrer ce que je veux dire. Si je le mets sur statique et si je veux que ces images se chevauchent, je ne peux pas le faire. Bien sûr, je peux changer le rembourrage et la marge et je peux leur donner une marge négative et un rembourrage, cependant, ce n'est pas un bon moyen. Pourquoi ? Parce que lorsque nous changeons la marge et le remplissage, nous changeons réellement la position réelle de cet élément et nous changeons le flux du document. Ce n'est pas ce que nous voulons. Si nous voulons que ces images se chevauchent pour une mise en page spécifique, nous pouvons définir ces éléments sur relatifs. Si je sélectionne ce bloc div, le dernier et je mets sa position sur relative, c'est relatif à lui-même, et ici nous avons une nouvelle propriété qui est appelée z-index. L' index z nous permet de contrôler comment nos éléments doivent s'empiler les uns sur les autres. Si je veux que la deuxième image apparaisse au-dessus de cette image, je peux la sélectionner, je peux la définir sur je peux la sélectionner, relative, et dès que je l'ai définie sur relative, je peux changer son index z. Mettons-le à un, on y va. Maintenant, cette image a un index z plus élevé, par conséquent, il sera au-dessus de notre image précédente. Si je sélectionne cette première image et que je mets sa position sur relative, je peux la déplacer sur le côté droit comme ça, et c'est derrière notre image du milieu. Pourquoi ? Parce que notre image du milieu, la deuxième image, a un index z plus élevé. Si je veux que cette première image soit au-dessus de notre image du milieu, je peux définir un index z plus élevé pour cela. Par exemple, deux. On y va. Si je veux qu'un troisième soit au-dessus de toutes ces images, je peux définir son index z à trois. Si je le déplace, vous pouvez clairement voir que c'est au-dessus des deux autres images. C' est essentiellement ainsi que fonctionne le positionnement relatif. Nous créons une nouvelle position pour notre élément, qui est relative à son ancienne position et nous pouvons également contrôler l'index z. Réglons maintenant la position de ces images sur statique pendant une seconde. Parlons de l'autre option de positionnement, qui est absolue. Si je mets un élément à la position absolue, voyons ce qui se passe. Comme vous pouvez le voir, tout est désorganisé. Je peux avoir accès à ces options d'alignement, et si je clique dessus, par exemple, en haut à gauche, vous pouvez voir qu'il sera positionné en haut à gauche, et ici il dit qu'il est relatif au corps. La position absolue fonctionne comme ça. Il recherche toujours le premier élément parent qui a le positionnement de relatif. Ici, j'ai ce wrapper d'image et ce wrapper d'image a un positionnement statique. Par conséquent, lorsque je change la position de ce bloc div, cette image en absolu, elle est relative au corps. Que faire si je veux que cette image soit relative à ce wrapper d'image ? Eh bien, c'est simple. Je peux sélectionner l'enveloppe d'image, et je peux changer sa position en relative. On y va. Maintenant, cette image est relative à la limite de l'enveloppe d'image. Il trouve un élément parent, qui est ce wrapper d'image qui a un positionnement relatif. Vous devez bien comprendre et apprendre ces concepts car en matière de développement web, ces options de positionnement pourraient vraiment vous aider à créer des mises en page époustouflantes et des pages Web époustouflantes. Maintenant, je peux sélectionner ce bloc div et je peux modifier sa position comme je veux. Il est maintenant relatif à son parent, qui a le positionnement relatif. Quand pouvons-nous utiliser le positionnement absolu ? Par exemple, supposons que vous souhaitiez créer une fenêtre contextuelle, qui est si populaire. De nos jours, la plupart des sites Web utilisent une fenêtre contextuelle pour permettre à l'utilisateur de s'inscrire pour quelque chose. Dans ce cas, nous pouvons utiliser la position absolue. Bien sûr, nous allons parler de la position absolue et différents cas d'utilisation plus tard. Mais pour l'instant, vous avez juste besoin de comprendre comment cela fonctionne. Tout comme le parent, nous pouvons toujours travailler avec l'index z ici. Une chose à mentionner à propos de la position absolue, est que lorsque vous définissez un élément sur position absolue, il ne fait plus partie du flux de document. Qu' est-ce que je veux dire par là ? Ça veut dire que ça ne prend pas de place. Si j'essaie de le déplacer, ça ne prend pas de place ici. Ce n'est pas un parent. C' est la principale différence entre la position absolue et relative. Tu dois garder ça à l'esprit. Ça ne prend pas de place. Mettons-le sur statique. Maintenant, je vais parler de la prochaine option de positionnement qui est corrigée. Laissez-moi vous montrer un autre exemple. Je vais aller de l'avant et faire glisser et déposer une barre de navigation ici, et je vais la mettre juste en dessous de mon corps, juste ici. Alors donnons-lui un cours. Je vais écrire Nav. Cool. Aussi, je vais modifier sa hauteur. Réglons sa hauteur à quelque chose comme 200 pixels. C' est trop, peut-être 150 pixels. Cool. J'ai réglé sa hauteur à 150 pixels parce que je vais vous montrer quelque chose dans une seconde. Présentons un aperçu de notre projet pour une seconde. Cette barre de navigation fait partie du flux de documents et prend de l'espace. Si je fais défiler vers le bas, vous pouvez voir que tout fonctionne comme prévu. Il disparaît dès que je fais défiler vers le bas. Et si je veux qu'il colle au sommet pendant que je fais défiler ? Eh bien, nous pouvons utiliser l'option fixe. Si j'utilise la position fixe, voyons ce qui se passe. abord, tout sera désorganisé parce que lorsque nous définissons quelque chose à corriger, nous devons spécifier ses alignements. Nous devons définir qu'il doit être fixé en haut, par exemple. Maintenant, c'est réparé. Cependant, cela ne fait plus partie du flux de documents. Comment je le sais ? Parce que maintenant vous pouvez voir que ce conteneur a un peu poussé vers le haut. Pourquoi ? Parce qu'il n'y a plus de barre de navigation prenant de l'espace. Si je prévois ça, vous pouvez voir qu'il colle au sommet, juste comme ça. Cependant, nous avons ce problème. Pour corriger cela, nous pouvons utiliser un autre positionnement. Mais avant de faire cela, permettez-moi de vous montrer un autre exemple de positionnement fixe. Si je sélectionne cette image, ce bloc div et que je mets sa position à fixe, je peux changer son alignement en bas à droite et il est relatif au corps. En fait, c'est relatif au port de vue. Ce n'est plus relatif à ses parents. C' est relatif à la fenêtre du navigateur. Si je prévisualise cela, vous pouvez voir qu'il est fixé dans le coin inférieur droit. Si je fais défiler vers le bas, il est toujours fixé là car il est relatif au port de vue, à la fenêtre du navigateur. Si je veux changer la dimension, laissez-moi vous montrer comment elle fonctionne. Juste comme ça. Il est toujours là. Laissez-moi remettre sa position à statique et je vais vous montrer comment nous pouvons résoudre le problème avec cette barre de navigation. Parce que nous ne voulons pas gâcher notre flux de documents, nous pouvons utiliser l'option sticky. Si je sélectionne cette barre de navigation et que sa position soit collante, nous pouvons voir qu'elle fait toujours partie du flux de document parce que ce conteneur n'a pas poussé vers le haut. Cependant, nous pouvons spécifier qu'il devrait coller au sommet. Si elle est définie sur auto, si toutes ces arêtes sont définies sur auto, voyez ce qui se passe, cela ne fonctionne pas. La chose avec sticky est que vous devez définir où cet élément devrait s'en tenir. Je vais mettre le sommet à zéro. Cela signifie qu'il devrait coller au bord supérieur de notre navigateur. Une chose à mentionner est que sticky est également relatif au port de vue. Ce n'est pas relatif à ses parents. Maintenant, si je prévois ça, on y va. Il est fixé en haut et il ne joue pas avec notre flux de documents car il fait toujours partie du flux de documents. Nous pouvons utiliser cette position pour notre barre de navigation pour le pied de page. On a parlé d'eux. Mais j'ai préparé un autre exemple pour vous, qui est si populaire de nos jours. Ici, j'ai une section et à l'intérieur j'ai un conteneur, qui est une boîte flexible. À l'intérieur de ce conteneur, j'ai deux blocs div différents. Le contenu du bloc sur le côté gauche, et ce bloc div newsletter sur le côté droit. Rien de compliqué. Je vais sélectionner cette newsletter div, et je vais changer sa position en collant. Voyons ce qui se passe. D' abord, je vais aller de l'avant et enlever cette barre de navigation. On n'en a plus besoin. Maintenant, je vais en prévisualiser ça. Comme vous pouvez le voir, rien ne se passe. Pourquoi ? Parce que comme vous vous souvenez quand nous travaillons avec une position collante, nous devons spécifier où il doit s'en tenir. Ici, je vais mettre le top à zéro et laissez-moi vous montrer ce qui se passe. Je vais en prévisualiser. Si je fais défiler vers le bas dès qu'il touche le bord supérieur de mon navigateur, qui est le haut du port de vue, vous pouvez voir qu'il commence à coller comme ça jusqu'à ce qu'il atteigne la fin de son élément parent, qui est le conteneur. Laisse-moi te montrer une fois de plus. Puisque nous avons réglé la position supérieure sur zéro, une fois qu'il touche le bord supérieur, il commence à coller jusqu'à ce qu'il atteigne la fin de son élément parent, qui est dans ce cas le conteneur. Ensuite, il se comporte normalement, comme vous pouvez le voir. Maintenant, nous pouvons même ajouter plus d'espacement ici. Par exemple, je vais le mettre à 100 et voyons ce qui se passe. Maintenant, quand il y a 100 pixels en haut, il commence à coller comme ça. C' est cool ? Vous pouvez voir ce comportement sur de nombreux sites Web comme les sites moyens ou d'autres sites de blogs différents. Parlons maintenant d'une autre option, qui est le dernier type de positionnement et il s'appelle flotteur. Eh bien, de nos jours, nous n'utilisons pas float et clair autant. Cependant, pour certains cas d'utilisation, c'est toujours très pratique et nous pouvons utiliser float. Laissez-moi vous montrer comment ça marche. Tout d'abord, je voudrais mentionner que float et clair ne fonctionnent pas avec les boîtes flexibles et l'enfant d'une boîte flexible. Ici, j'ai un conteneur qui n'est pas une boîte flexible. Le paramètre d'affichage est défini pour bloquer. A l'intérieur, j'ai un bloc div d'image simple et puis j'ai un paragraphe. Si je sélectionne ce bloc div image et changer sa position pour flotter, par exemple, flotter à gauche, nous pouvons voir que le contenu enveloppe autour de cette image maintenant. Si je change le flotteur à droite, vous pouvez voir que maintenant le contenu est enveloppé du côté gauche, juste du côté opposé. Mais qu'est-ce qui est clair ? Supposons que nous ayons cette image à flotter à gauche. Je vais sélectionner ce paragraphe. Je ne voulais pas envelopper cette image spécifique. Dans ce cas, je peux définir clairement à gauche, droite, ou les deux côtés. La plupart du temps, nous utilisons les deux côtés. Puisque notre image est ici sur le côté gauche, maintenant seul le côté gauche fonctionne. Si je le mets à gauche, vous pouvez voir qu'il n'est plus enroulé autour d'elle. Mais si je le mets à droite, cela ne fonctionne pas parce que notre élément ici, qui est réglé pour flotter, n' est pas du bon côté. Si je définis les deux, vous pouvez vous assurer qu'il sera effacé. Les gars, c'est tout pour cette vidéo. Nous avons parlé de beaucoup de choses différentes et j'espère que vous pourriez comprendre différents types de positionnement. Si vous avez des questions, faites-le moi savoir. Assurez-vous de pratiquer toutes ces options de positionnement parce que nous allons travailler avec eux dans des projets réels. Je te vois dans la prochaine vidéo. 36. Typographie: Hé, dans cette vidéo, nous allons parler la section typographie sur ce panneau latéral sur le côté droit. Ici, j'ai quelques éléments de texte, j'ai un titre, et j'ai aussi un paragraphe. Laissez-moi sélectionner le titre, et je vais vous montrer toutes les propriétés du panneau typographique ici. D' abord, nous avons la police. Si vous l'ouvrez, vous avez des polices par défaut. Si vous voulez ajouter d'autres polices, vous pouvez cliquer sur ce Ajouter des polices en haut, et vous serez redirigé vers les paramètres du projet. Sous l'onglet Polices, vous pouvez ajouter différentes polices. Par exemple, si vous souhaitez utiliser des polices Google comme Roboto ou d'autres polices Google, vous pouvez simplement les ajouter ici. Laisse-moi chercher Roboto une seconde. Laisse-moi voir si je peux le trouver. On y va. Voici Roboto, alors vous pouvez sélectionner des variantes de cette police particulière. Ce sont les poids de vos polices, par exemple, standard, 500, 700, qui est noir, et si vous voulez télécharger des polices personnalisées, vous pouvez les télécharger ici à partir de votre ordinateur, et si vous voulez utiliser Adobe Fonts, vous pouvez simplement utiliser cette section pour connecter votre projet à Adobe Fonts à l'aide d'une API. Parlons maintenant du panneau de typographie. Je vais sélectionner cette rubrique. Ici, nous avons parlé de la police, puis nous avons du poids, nous avons des poids audacieux, différents poids. Chaque police a des poids différents. Ensuite, nous avons la taille. C' est notre taille de police, et vous pouvez utiliser différentes unités comme la propriété size ici. Vous pouvez utiliser pixel, pourcentage, ems et rems, CH, largeur de la fenêtre et hauteur de la fenêtre. Enfin, nous avons la hauteur de la ligne, ce qui est si important quand nous avons un paragraphe. Ici, si je sélectionne ce paragraphe, je fixe la hauteur de la ligne à 150 %, donc c'est 150 % de la taille de la police. Si je réinitialise ce paramètre, vous pouvez voir que ce paragraphe n'est pas si lisible. Par conséquent, il est toujours recommandé d'augmenter la hauteur de votre ligne, surtout lorsque vous travaillez avec de petites tailles de police, donc je vais la définir à 150 pour cent. On y va. Ici, nous avons de la couleur. Vous pouvez changer la couleur de votre police facilement à l'autre couleur que vous voulez. Voici le curseur de teinte, puis nous avons le curseur de transparence, cela contrôle la quantité alpha de votre couleur si vous voulez, disons, diminuer l'opacité, vous pouvez simplement utiliser ce curseur. Ici, nous avons le code de couleur hexadécimal. Vous pouvez simplement copier et coller le code couleur hexadécimal à partir de n'importe quel logiciel de conception avec lequel vous travaillez , que ce soit Figma , Sketch, Adobe XD, peu importe. Ensuite, nous avons HSB, qui signifie teinte, saturation et luminosité. Nous ne parlerons pas de ces spécifications ici. Ensuite, nous avons l'alpha ou l'opacité. Si j'utilise ce curseur et que je diminue l'opacité, vous pouvez voir que la quantité alpha change. Ici, nous avons le rapport de contraste et il nous permet de savoir si nous avons assez de contraste entre la couleur de fond et la couleur de premier plan. Comme vous pouvez le voir, il est écrit AAA, et cela signifie qu'il est très lisible. Mais si j'essaie d'utiliser des couleurs plus claires comme ça, vous pouvez voir d'abord nous avons AA, c'est toujours bon, c'est toujours bon. Mais si elle dit échouer, cela signifie que votre texte peut ne pas être lisible pour certaines personnes. Il change en fonction de la taille de votre police et de différents facteurs, alors assurez-vous toujours que votre couleur passe le test de rapport de contraste. Laissez-moi annuler le processus. Qu' est-ce qu'on a ici ? C' est ici que nous pouvons créer nos échantillons. Supposons que nous ayons cette couleur et que nous voulons créer un style de couleur ou disons une nuance de couleur. Si vous êtes familier avec Figma, vous savez peut-être que nous pouvons créer des styles de couleurs, et cela fonctionne comme ça. Ici, nous pouvons simplement cliquer sur ce bouton plus et il crée une nouvelle nuance. Je peux le nommer, par exemple, je peux dire neutre/lumière, créer. Si je sélectionne un autre élément ici et que je me dirige vers la section couleur, vous pouvez voir que l'échantillon est ici. Comme vous pouvez le voir, il y a cette petite flèche et cela signifie que c'est une nuance globale, et je peux l'utiliser pour tous les éléments comme ça. Ici, si j'utilise cette nuance de lumière neutre pour ce paragraphe, et je l'utilise ici aussi. Par exemple, permettez-moi de changer cela. Si je le change ici, si je clique sur ce bouton Pen et que j'essaie de changer cette couleur, vous pouvez voir que les changements s'appliquent immédiatement à tous les éléments qui utilisent cette nuance particulière, vous devez donc vous assurer de gardez vos couleurs organisées. Allons annuler le processus. Passons à la propriété suivante, qui est aligné. C'est si simple. Nous avons différentes options d'alignement, à gauche, au centre, à droite et à justifier, tout comme Microsoft Word ou n'importe quel logiciel de conception. Ensuite, nous avons la propriété de style. Nous pouvons mettre en italique notre texte comme ça. On peut utiliser quelques décorations ici. Par exemple, nous pouvons utiliser ce barré. Nous pouvons utiliser soulignement ou overline. Si vous souhaitez créer des liens, par exemple, nous pouvons utiliser ce soulignement. Ensuite, nous avons ce Plus d'options de type, Par défaut, il n'est pas visible, mais si vous cliquez dessus, vous pouvez accéder à ces options avancées telles que l'espacement des lettres, retrait du texte, les colonnes, et ces les options de capitalisation et de direction. Examinons chacun d'eux. En utilisant ce champ, nous pouvons contrôler l'espacement des lettres. Par exemple, si je veux augmenter l'espacement entre les lettres, je peux définir un espacement des lettres plus élevé ici. Je vais le mettre à 20 maintenant. Comme vous pouvez le voir maintenant, l'espacement entre les lettres est beaucoup plus élevé. Laisse-moi diminuer ça. En fait, un bon cas d'utilisation pour utiliser l'espacement des lettres est quand nous avons un mot qui est complètement capitalisé. Si je sélectionne ceci, design d'intérieur, et si je mets l'option majuscule à toutes les majuscules comme ça. Parfois, si je travaille avec de petites tailles de police, j'ai besoin d'augmenter l'espacement des lettres pour améliorer la lisibilité et la lisibilité de mes textes. Dans ce cas, laissez-moi le mettre à cinq. Maintenant, ça a l'air beaucoup mieux. Je peux le mettre à trois aussi. Ceci est utilisé essentiellement à cet effet. Maintenant, passons à la suivante qui est le retrait de texte. Je vais sélectionner ce paragraphe et me laisser spécifier un montant comme 20 pixels. Il met juste en retrait le texte, tout comme Microsoft Word. Ensuite, nous avons des colonnes. En fait, je n'ai jamais utilisé cela et je vois rarement un site Web ou un concepteur utiliser cette option. Mais c'est bon de savoir qu'il existe. Si je spécifie trois ici, il prend notre texte et il le divise en trois colonnes égales. Si j'appuie sur Entrée, on y va, maintenant, on a trois colonnes différentes. Nous pouvons juste modifier l'écart ici, par exemple, le style. On peut ajouter quelques séparateurs. Comme vous pouvez le voir, nous pouvons modifier l'épaisseur de ce séparateur, comme ça, et aussi nous pouvons modifier la couleur de ce séparateur. Mais pour être honnête, je n'ai jamais utilisé ça et je doute que tu devrais l'utiliser aussi. Permettez-moi d'enlever ça pour l'instant. Si vous voulez réinitialiser une propriété ici, vous pouvez maintenir la touche Option ou Alt enfoncée sur votre clavier, puis cliquez simplement dessus une fois, juste comme ça. Ensuite, nous avons les options de capitalisation. Nous avons toutes les casquettes, comme je vous l'ai montré avant. Nous avons capitalisé chaque mot, juste comme ça, ou nous avons des minuscules. Je vais le mettre à zéro. Ensuite, nous avons la direction. Pour la plupart des langues, nous utilisons la direction de gauche à droite, mais pour certaines langues comme l'arabe, vous pouvez utiliser la direction de droite à gauche. Ensuite, nous avons la rupture, il y a quelques options comme ça. Ce n'est pas si utile. Nous n'allons pas aborder toutes ces options puisque la plupart du temps nous n'utilisons pas cette option de rupture. Ensuite, nous avons l'ombre du texte. Si je clique sur ce bouton plus, je peux ajouter de l'ombre à mon texte, juste comme ça. Je vous recommande vivement d'éviter d'ajouter des ombres à vos textes car cela diminue la lisibilité de votre texte. Je vais enlever ça. C' est tout au sujet de la typographie. Mais il y a une autre chose que je vais mentionner ici. Si je vais de l'avant et glisser-déposer un bloc div ici, je vais lui donner une classe, écrivons la typographie. Ici pour ce bloc div, je peux définir des propriétés spécifiques que ses enfants peuvent utiliser. Si je change la police à autre chose, utilisons celle-ci par exemple, et j'augmente la taille de la police à, disons, 40 pixels, quelque chose de dramatique, et aussi je change la couleur en rouge, vous pouvez voir que rien ne se passe ici parce qu'il n'y a pas de couche de texte à l'intérieur. Cependant, si je vais de l'avant et glisser-déposer un cap ici, nous y allons. Maintenant, ce titre obtient les propriétés des propriétés par défaut que nous avons définies à son parent, qui est ce bloc div typographique. Bien sûr, nous pouvons remplacer cela, par exemple, je peux donner une classe à ce titre, comme Titre 1, comme Titre 1, et juste modifier la couleur à ce que nous voulons, et la taille de la police, ou toute autre propriété ici. Mais vous devez comprendre que parfois il est beaucoup plus logique d'ajouter les propriétés par défaut aux parents de nos éléments d'abord, puis nous pouvons simplement glisser et déposer ces éléments et nous n'avons pas besoin de tout modifier à partir de zéro. Par exemple, vous pouvez sélectionner votre section. Si votre section doit avoir des polices spécifiques, et disons quelques propriétés de police spécifiques, vous pouvez simplement spécifier ces propriétés pour la section. Ensuite, tout ce que vous mettez dans cette section héritera des propriétés que vous définissez pour cette section. Personnellement, quand je veux démarrer un projet, je sélectionne mon corps et je mets la police ici une fois, puis je n'ai pas besoin de changer la police encore et encore et encore. Bien sûr, je peux remplacer ces propriétés, mais cela va me faire gagner beaucoup de temps si je peux définir des propriétés par défaut. Très bien, les gars, c'est tout pour cette vidéo. J' espère que ça vous a plu. Je te verrai dans la prochaine. 37. Arrière-plans: Hé ! Dans cette vidéo, nous allons parler de milieux. Si vous vous dirigez vers le panneau de style juste sous la section typographie, nous avons la section d'arrière-plan. C' est très utile parce que nous allons l'utiliser presque tout le temps. Ici, comme vous pouvez le voir, j'ai deux sections différentes. Une section vide. C' est pour la prochaine partie de cette vidéo. Mais pour la première partie, nous allons travailler avec cette section. A l'intérieur, j'ai un conteneur, comme d'habitude, et puis j'ai le titre et un paragraphe. Supposons que nous voulions ajouter un arrière-plan à notre section. Je vais sélectionner ma section. Je peux aller dans les milieux. Je peux cliquer sur ce bouton plus ici. Maintenant, je peux choisir l'image. Je vous ai déjà montré cette section, mais nous n'avons pas vraiment plongé dans tous les détails ici. Maintenant, je vais choisir cette image parmi mes actifs et nous y allons. Par défaut, il est toujours défini sur tuile, comme vous pouvez le voir ici, nous avons l'option tuile. On peut juste le mettre à zéro parce qu'on ne veut pas qu'il soit carrelé. Ensuite, nous avons les options de position et toutes ces options ici. Commençons par le type. Ici, nous avons différents types. Nous avons l'image, nous avons un gradient linéaire, nous avons un gradient radial, et nous avons la superposition de couleur. Parlons d'abord de l'image. Ici, je peux définir la taille. Je peux définir une taille personnalisée si l'onglet personnalisé est sélectionné. Nous utilisons rarement cette taille personnalisée ici parce que nous dimensionnons généralement nos images en utilisant la propriété size dans le panneau de style. Ensuite, nous avons la couverture, qui est si utile presque tout le temps nous utilisons cette option, et nous avons le conteneur. Le conteneur réduit en fait l'image jusqu'à ce qu'elle soit contenue dans notre section ou dans notre conteneur ou n'importe quel élément dans lequel elle se trouve. Ensuite, je peux modifier la position ici au centre. Je vais le mettre pour couvrir pour l'instant. Notre image d'arrière-plan est superbe. Vous pouvez également définir la position gauche et la position supérieure en fonction du pourcentage. Comme vous pouvez le voir, par défaut, il est défini sur 50 %. Si je le mets en haut à gauche, vous pouvez voir que gauche et haut sont mis à zéro. Si je veux les modifier manuellement, je peux le faire aussi. Je peux le fixer à 48 pour cent, par exemple, ou peut-être disons 35 pour cent. Rien ne change ici parce que notre image est trop grande en fait, alors laissez-moi modifier le haut aussi à 20%. Comme vous pouvez le voir, il se déplace vers le bas. Je vais annuler le processus. Si nous voulons que notre image soit tuile, nous pouvons utiliser l'option tuile. Nous pouvons juste définir une largeur constante. Laissez-moi définir une largeur personnalisée que vous pouvez voir comment cela fonctionne. Je vais définir la largeur à 100 pixels, et comme vous pouvez le voir, puisque l'option de tuile a été sélectionnée, notre image est carrelée. Je peux le définir sur une tuile horizontale, et aussi verticalement tuile. Je vais le mettre pour ne pas faire de tuile et mettons-le pour couvrir. Nous avons l'option fixe ici. Par défaut, toutes les images sont définies sur non corrigées. Nous allons parler de la différence entre fixe et non fixe dans quelques secondes. Mais pour l'instant, passons à la prochaine fonctionnalité de cette section image et dégradés. Comme vous pouvez le voir, nos calques de texte ne sont pas lisibles. Pourquoi ? Parce que nous n'avons pas assez de contraste ici. Que faire si je change leur couleur en blanc ? Voyons si ça fait une différence. Bien sûr, cela fait une différence, mais quand même, comme nous avons une petite taille de police, il peut parfois être difficile de lire ce texte. Comment pouvons-nous réparer ça ? Eh bien, une solution très connue est de simplement ajouter une superposition. Si je sélectionne cette section ici, puis je vais à l'arrière-plan. Si je clique sur ce bouton plus ici, je peux définir le type à superposer comme ceci. Il crée une superposition, une superposition sombre, et nous pouvons juste contrôler l'opacité de cette superposition à partir d'ici, juste comme ça. Maintenant, c'est beaucoup plus visible. Mais qu'en est-il des gradients linéaires et radiaux ? Parlons d'eux aussi. Je vais commencer par un gradient linéaire. Eh bien, comme vous le savez, un dégradé est une transition en douceur d'une couleur à une autre. Par défaut, nous avons deux arrêts ou points différents ici. Nous avons les points noirs et blancs. Je vais sélectionner ce point, et à partir de cette couleur, je vais changer la couleur à autre chose. Permettez-moi de le changer pour, par exemple, cette orange. Le suivant, je vais sélectionner le point suivant et je vais le changer pour cette couleur. Ensuite, je peux modifier l'angle de ce gradient ici. Comme vous pouvez le voir, je peux simplement modifier l'angle, le degré. Mais qu'en est-il de cette option de répétition ? Si je coche cette case , rien ne se passe. C' est parce que, pour que cette option fonctionne, nous avons besoin d'un peu d'espace ici dans le curseur. Si je prends juste un de ces points et que je le déplace sur le côté gauche, vous pouvez voir que maintenant nous avons plus d'espace. Comme vous pouvez le voir, il se répète encore et encore, juste comme ça. Je peux changer l'angle aussi. Cool. Laissez-moi simplement décocher cette option de répétition. Nous n'en aurons pas besoin. Nous pouvons également contrôler l'opacité de ces couleurs, par exemple, pour créer une superposition personnalisée. Si je modifie le montant Alpha ici à 50 pour cent, comme vous pouvez le voir, maintenant nous avons une superposition de dégradé. Je peux faire la même chose pour ma couleur orange, 50 %, voilà. Ça a l'air génial. Mais qu'en est-il du gradient radial ? Si je clique dessus et si je mets l'opacité à 100 pour cent, encore une fois, vous pouvez simplement voir la différence entre un dégradé linéaire et un dégradé radial. Comme vous pouvez le voir ici, nous avons un point focal. Nous pouvons changer la taille ici, par exemple, celui-ci, je peux régler à celui-ci, je peux changer la taille facilement. Aussi, je peux changer le point focal, comme ceci, à partir de quelle direction cette transition devrait commencer, comme ça. Joli. Si vous voulez masquer l'une de ces images ou dégradés, vous pouvez simplement cliquer sur cette icône d'œil ou vous pouvez simplement cliquer sur ce bouton Supprimer. Si vous voulez réorganiser vos éléments ici, vous pouvez simplement passer le curseur sur ces lignes verticales qui se trouvent à côté de cette minuscule miniature, cliquez et faites glisser, comme ça. Laissez-moi supprimer ce gradient radial pour l'instant. Mais parfois, nous avons juste besoin d'avoir une couleur de fond solide. Nous pouvons le faire aussi. Nous pouvons toujours sélectionner un élément, peu importe s'il s'agit d'un bloc div, d'un titre, d'un paragraphe. Toute boîte peut avoir une couleur d'arrière-plan. Par défaut, il est défini sur transparent. Si je le sélectionne, je peux le mettre en blanc, par exemple, mais comme nous avons une image ici, vous ne pouvez pas le voir. Je peux changer la couleur de l'arrière-plan en noir, à la couleur que je veux. Il y a aussi une bonne astuce ici si vous voulez utiliser des couleurs célèbres, comme le blanc ou le noir, vous pouvez simplement écrire son nom ici. Par exemple, je vais écrire du blanc ici. On y va. J' ai un fond blanc. Si je le change en noir, ça marche. Si je le change en rouge, cela fonctionne aussi. Mais la plupart du temps, nous définissons manuellement couleur de l'arrière-plan ou nous copions et collez le code de couleur hexadécimal ici. Maintenant, je vais parler de coupures. Il fonctionne comme le masquage dans les logiciels de conception. Supposons que je veux ajouter un dégradé à ce titre. C' est possible ? Non, sauf que c'est le cas. Si je vais à la couleur, je peux définir un dégradé. Cependant, il y a un bon tour ici. Si je vais aux arrière-plans ici, je peux créer un dégradé ici, et je peux changer le type en linéaire. De là, je vais changer le dégradé en, disons cette couleur. Laisse-moi créer un dégradé cool, gentil. Maintenant, je vais changer l'angle. Cependant, comme vous pouvez le voir, cette zone ne remplit pas ce texte. Il ne couvre pas sa hauteur. Par conséquent, j'ai besoin d'augmenter la taille de la hauteur à autre chose. Permettez-moi de l'augmenter à 100 pixels pour l'instant. Mais est-ce que ça a l'air bien ? Ce n'est pas exactement ce qu'on veut. Eh bien, attendez une seconde. Je vais aller dans les arrière-plans, et à partir de là, je vais aller à Coupure, et par défaut, c'est réglé sur Aucun. Si je change cela pour couper l'arrière-plan en texte, on y va. Maintenant, nous avons le dégradé coupé à l'intérieur de notre texte. C' est cool ? C' est exactement la même méthode que la plupart des sites Web populaires utilisent pour créer un tel effet. Par exemple, Apple utilise également cette technique. Je peux simplement modifier les dégradés et les changements s'appliquent à ce texte en temps réel. Voyons si ça marche. Oui, c'est le cas. Je vais changer la couleur de fond de cette section en noir pour que vous puissiez voir l'effet beaucoup mieux. Parlons maintenant de l'autre fonctionnalité. Comme vous vous en souvenez, j'ai mentionné qu'il y a une autre section ici. Laissez-moi changer la couleur de l'arrière-plan en blanc. Ici à l'intérieur de ce conteneur, je vais faire glisser et déposer un bloc div, et pour ce bloc div, je vais créer une classe. Appelons ça le correctif de l'image. Ensuite, je vais définir sa largeur à 100 pour cent, sorte qu'il prenne toute la largeur de son parent, qui est le conteneur, et la hauteur va être de 50 pour cent comme ça. Je vais aller dans les arrière-plans, et à partir de là je vais ajouter une image ou un dégradé. Je vais choisir une image ici. On y va. Enfin, je vais changer la taille à couvrir, et la position au centre. Réglons la tuile sur zéro. Comme vous vous en souvenez, je vous ai dit que nous allons parler de l'option fixe. Voyons par défaut comment il fonctionne. Si je prévisualise cette page Web, cela fonctionne comme prévu. Mais que faire si je veux que ce fond soit corrigé, et que nous créons un effet de parallaxe ici ? Dans ce cas, je peux sélectionner cette image et je peux juste aller aux paramètres de l'image ici, et au lieu de définir l'option fixe pour ne pas corriger, je vais choisir fixe. Encore une fois, je peux le repositionner comme je veux, et puis nous allons en prévisualiser ça. On y va. Pouvez-vous voir à quel point cet effet est cool ? Lorsque nous définissons l'image pour corriger, il crée effectivement un nouveau calque derrière la fenêtre de notre navigateur, et ce nouveau calque est notre image d'arrière-plan qui est fixe, et nous pouvons simplement faire défiler notre page. Nous pouvons aussi faire la même chose avec le texte. Laisse-moi te le prouver. Permettez-moi de supprimer cette image et je vais sélectionner ce conteneur et ajouter un titre ici. Ensuite, je vais augmenter considérablement la taille de la police. Augmentez-le à 80 pixels, ou peut-être 120 pixels que vous pourriez voir l'effet clairement. Ensuite, je vais augmenter la hauteur à 100 pixels ou peut-être même plus, peut-être 140 pixels. Je vais aller à l'image et le dégradé, et ajoutons une image ici. Je vais choisir, disons celui-ci, et repositionnons ça. Ne pas carreler et couvrir. Comment puis-je faire ça ? Eh bien, d'abord, je dois régler l'image sur corrigée, puis je dois aller à Coupure, et je vais la changer pour couper l'arrière-plan en texte. Voyons ce qui se passe. Tu vois ça ? Maintenant, nous avons cet arrière-plan fixe assis derrière notre calque de texte. C' est très cool. Vous pouvez créer des effets sympas avec cette technique. Maintenant, je vais parler de quelque chose de très intéressant. Jusqu' à présent, vous apprenez que vous pouvez ajouter une image d'arrière-plan ici. Si vous sélectionnez votre section, vous pouvez simplement ajouter une image d'arrière-plan et tout semble parfait. Mais que se passe-t-il si vous voulez réellement ajouter une vidéo à votre arrière-plan ? C' est possible ? Bien sûr, c'est le cas. Cependant, nous ne pouvons pas le faire en arrière-plan, nous devons utiliser un composant qui est appelé vidéo de fond. Si je vais à la section Ajouter et que je fais défiler vers le bas, vous pouvez voir que sous les composants, j'ai le composant Vidéo d'arrière-plan. Laissez-moi le glisser et le déposer et le mettre juste au-dessus de ma première section. On y va. C' est juste un élément comme tous les autres éléments, et vous pouvez simplement modifier tout ce que vous voulez. Je peux lui donner une hauteur spécifique comme 100 VH. Ensuite, je peux utiliser ce bouton Télécharger une vidéo pour télécharger une vidéo. Permettez-moi d'aller de l'avant et de télécharger rapidement une vidéo. Vous devez garder à l'esprit que votre vidéo doit être inférieure à 30 mégaoctets. Comme vous pouvez le voir, rien ne se passe. En effet, le composant vidéo d'arrière-plan ne fonctionne que lorsque vous prévisualisez votre page Web, il ne fonctionne pas dans le concepteur. Je vais en prévisualiser, et c'est là. Tu vois à quel point c'est cool ? Mais attendez, pouvons-nous ajouter du contenu sur ce fond d'écran ? Oui, on peut. Comme tous les autres éléments, je peux simplement sélectionner mon conteneur ici, par exemple, et l'apporter et le mettre dans cette vidéo d'arrière-plan. Mais comme vous pouvez le voir, ce n'est pas centré. Je peux sélectionner ma vidéo d'arrière-plan et je peux changer le paramètre d'affichage de bloc à flex. Maintenant, vérifions ça. Pouvez-vous voir à quel point il est facile de travailler avec ces composants ? Très bien, les gars, c'est tout pour cette vidéo. J' espère que ça vous a plu et je vous verrai dans la prochaine vidéo. 38. Bordures: Dans cette vidéo, nous allons parler des frontières. Si vous faites défiler ici sur le côté droit, vous pouvez voir que nous avons la section de bordure juste sous les arrière-plans. Nous utilisons des frontières presque tout le temps. Il a différentes propriétés que nous pouvons personnaliser, et nous allons les parcourir toutes. Commençons. Tout d'abord, je vais vous montrer un exemple très commun. Je vais sélectionner ce bouton. Comme vous pouvez le voir, ce bouton a juste une couleur d'arrière-plan. Mais si je veux le faire arrondir ? Eh bien, je peux aller à la section frontière et je peux modifier la propriété de rayon ici pour la rendre arrondie. Si j'augmente le rayon de coin, on y va. On a ce bouton arrondi. Mais que faire si je veux modifier le rayon de coin de chaque coin indépendamment ? Eh bien, nous pouvons le faire aussi. Si je clique sur cette option qui indique « coins individuels », je peux contrôler le rayon d'angle de chaque coin séparément. Une chose à mentionner est que vous pouvez toujours utiliser toutes les unités dont nous avons parlé auparavant, comme pixel, pourcentage, EM, REM, CH, VW et VH. Ici, supposons que je veux juste faire arrondir le rayon des deux coins supérieurs. Par conséquent, je vais définir les coins inférieurs, rayon de coin à zéro. Voyons ce qui se passe. On y va. On a ce bouton bizarre maintenant. Laissez-moi annuler le processus. C' est tout à propos du rayon de coin. Mais que se passe-t-il si vous voulez créer un bouton de contour au lieu d'un bouton contenu ? ce moment, nous avons un bouton contenu car il a juste une couleur de fond. Il n'a pas de frontière. Si je veux faire un bouton de contour, d'abord, je peux ajouter une classe de combo ici parce que j'utilise cette classe de bouton ailleurs pour ce bouton de registre et ce bouton « En savoir plus », et je ne vais pas changer les propriétés par défaut. Par conséquent, je vais aller de l'avant et lui donner une classe combo. Laissez-moi écrire contactez-nous. Juste comme ça. Alors si je me dirige vers la couleur, la couleur de cet arrière-plan, je peux écrire transparent, et notre bouton a disparu, sauf que ce n'est pas le cas. C' est toujours là, mais on peut le voir. Ce n'est pas visible car nous définissons simplement la couleur de l'arrière-plan sur transparente. Si je clique dessus, vous pouvez voir que le montant Alpha est réglé à zéro. C' est pourquoi nous pouvons voir notre élément. La prochaine chose que je vais faire est évidemment changer la couleur de mon texte ici à autre chose. Je vais le changer en noir. Ensuite, j'ai besoin d'ajouter des bordures. Si vous vous dirigez vers les bordures, nous avons ici la section des bordures juste sous le rayon, nous pouvons décider si nous voulons créer des bordures pour toutes les arêtes ou seulement pour des arêtes spécifiques. Si vous voulez créer des bordures pour les quatre arêtes, vous devez sélectionner celle-ci du milieu, celle qui est au centre. Ensuite, vous pouvez sélectionner votre style, je vais sélectionner solide. Nous avons notre frontière, mais je vais augmenter la largeur. Je peux aller de l'avant et l'augmenter manuellement, par exemple, je peux définir un montant ici à trois, mais si vous voulez juste regarder et que vous voulez expérimenter avec des quantités différentes, vous pouvez maintenir la touche « Option » sur votre clavier ou la touche « Alt », , puis vous pouvez cliquer et faire glisser pour augmenter et diminuer la largeur ici, comme ça. Je pense que quatre pixels ont l'air génial. Maintenant, nous pouvons modifier la couleur de votre bordure ainsi que la couleur que vous voulez, et vous pouvez modifier le style de vos bordures comme ceci. C'est si simple. Mais voyons ce qui se passe si je veux simplement ajouter des bordures à des arêtes spécifiques. Je vais supprimer le style, puis je vais sélectionner un bord spécifique ici, par exemple, à gauche, puis je vais définir le style sur solide. On y va. Une chose à mentionner est que lorsque votre élément n'a pas de largeur ou de hauteur spécifique, lorsque vous ajoutez des bordures à cela, sa taille sera modifiée. Cependant, lorsque vous définissez une largeur et une hauteur spécifiques pour votre élément, peu importe s' il s'agit d'un bouton ou d'un bloc Div ou quoi que ce soit, les dimensions de votre élément ne changeront pas car la bordure sera ajoutée de l'intérieur, et non pas la à l'extérieur. Laissez-moi vous montrer ce que je veux dire par là. Je vais aller de l'avant et sélectionner cette image, ce bloc Div, et ce bloc Div a une largeur spécifique, pas une hauteur spécifique. Je vais aller de l'avant et ajouter quelques frontières ici. Je vais sélectionner le milieu, le centre, puisque je vais ajouter des bordures aux quatre bords. Laissez-moi sélectionner le style solide. Alors je vais augmenter la largeur. Juste comme ça. Comme vous pouvez le voir, la dimension réelle de ce bloc Div ne change pas. La raison en est que j'ai déjà une largeur spécifique définie. Mais que se passe-t-il si je supprime ça ? Voyons ce qui se passe. Je vais le définir sur auto, puis je vais déplacer cette image en dehors de ce wrapper d'image pendant une seconde pour vous montrer comment cela fonctionne. Puis laissez-moi augmenter et diminuer la largeur. Comme vous pouvez le voir maintenant, la dimension réelle est en train de changer. Pourquoi ? Parce qu'il n'y a pas de largeur et de hauteur définies. Si je mets une largeur spécifique ici, par exemple, 350 pixels, et que j'ajuste la largeur, vous pouvez voir que la bordure est ajoutée à l'intérieur. Laissez-moi annuler le processus. Supposons que vous vouliez créer un cercle parfait. Par exemple, vous voulez créer, disons, une page de profil circulaire. Dans ce cas, vous pouvez également utiliser le rayon. Voici notre image. Pour créer un cercle parfait, vous devez prendre quelques mesures. Tout d'abord, vous devez sélectionner votre image qui est à l'intérieur de votre bloc Div. Ensuite, vous devez vous assurer que sa largeur et sa hauteur sont réglées à 100 pour cent ; ils prennent toute la largeur et la hauteur de son parent, qui est ce bloc Div image. Pendant que l'image est sélectionnée, pas le bloc Div, dirigez-vous vers l'ajustement et changez-la de remplissage à couverture. Maintenant, vous pouvez sélectionner votre bloc Div image et aller aux frontières, et à partir d'ici, je vais définir le rayon à 50 pour cent. Mais rien ne se passe parce que nous devons faire deux choses de plus. Laisse-moi faire défiler. Comme vous pouvez le voir, notre bloc Div a une largeur spécifique, mais pour créer un cercle parfait, notre largeur et notre hauteur devraient être les mêmes. Je vais aller de l'avant et définir une hauteur spécifique pour cela, qui est égale à la largeur. Je vais écrire 350 pixels, super. La dernière chose que nous devons faire est de changer le débordement. Je vais aller au débordement et ensuite je vais le changer de visible à caché. On y va. Voici notre cercle parfait. Mais pourquoi fonctionne-t-il comme ça ? Tu te souviens quand nous avons parlé de débordement, quand nous créons une carte et qu'à l'intérieur de cette carte il y avait un paragraphe qui chevauchait la carte ? Tu te souviens de ça ? C' est exactement le même scénario. Quand il est défini sur visible, notre cercle a été créé depuis que nous avons défini le rayon à 50 pour cent, mais nous ne pouvons pas le voir parce que cette image à l'intérieur de ce bloc Div chevauche notre forme. Par conséquent, nous devons définir le débordement sur caché pour créer ce masque. La dernière chose que je vais mentionner est que lorsque vous travaillez avec des frontières, vous avez le contrôle sur les propriétés de chaque bord spécifiquement. Si vous voulez sélectionner le bord gauche et changer la couleur, vous pouvez le faire. Vous pouvez définir une autre couleur pour le bord supérieur, c'est totalement à vous de décider. Vous n'êtes pas limité en aucune façon. D'accord, les gars. C' est tout pour cette vidéo. J' espère que ça vous a plu. Je te verrai dans la prochaine. 39. Effets: Dans cette vidéo, nous allons parler de la section effets. Si je fais défiler ici dans ce panneau de temps, nous pouvons voir qu'en bas nous avons la section des effets. Il y a tellement d'options différentes ici, et nous allons en parler. abord, je vais aller de l'avant et sélectionner une de ces images. Laissez-moi sélectionner ce bloc DIV, le bloc DIV image, le premier, et maintenant je peux réellement modifier différentes options ici. Laissez-moi commencer par l'opacité. L' opacité est si simple parce qu'elle nous permet simplement d'avoir de la transparence. Si je le diminue, mon élément sera transparent. Si je l'augmente, vous constaterez qu'il n'y a pas de transparence. Lorsque vous avez un élément et que votre élément a des enfants, vous pouvez simplement sélectionner votre élément parent, dans ce cas, c'est ce bloc DIV image, et juste ajuster l'opacité ici. Ensuite, nous avons des ombres de boîte. Eh bien, comme vous pouvez le deviner d'après son nom, il nous permet d'ajouter des ombres à nos éléments de boîte. Si j'appuie sur ce bouton plus, je peux ajouter des ombres de boîte à cet élément particulier, et ici nous avons des propriétés différentes. Nous avons deux types d'ombre différents, à l'extérieur et à l'intérieur. Eh bien, si elle est définie sur l'extérieur, l'ombre apparaîtra en dehors de la limite de cet élément. Si je modifie juste la distance, vous pouvez voir mieux, mais le type intérieur nous permet d'ajouter des ombres intérieures. Je peux modifier l'angle ici, comme ça. Je peux contrôler le degré, ou disons la direction de mon ombre. Je peux modifier la distance, à quel point cette ombre est proche de l'élément. Je peux modifier le blare, sorte qu'il détermine à quel point l'ombre est focalisée. Je peux changer la taille. Il détermine combien il se propage, comme ça, et la couleur nous permet de contrôler la couleur de notre ombre. Je peux le mettre à la couleur que je veux. La plupart du temps, lorsque nous utilisons des ombres, nous voulons nous assurer de diminuer l'opacité pour avoir des ombres douces. Juste comme ça. Il s'agit d'ombres. Une chose que vous devriez vous rappeler est que vous pouvez réellement ajouter plusieurs ombres à votre élément. Si je clique sur ce bouton plus une fois de plus, nous y allons, je pourrais ajouter une autre ombre. Je peux ajouter encore plus d'ombres. Je peux les déplacer, je peux les cacher et les révéler, et je peux les enlever simplement. Parlons maintenant des transformations 2D et 3D. Parfois, nous pourrions avoir besoin d'avoir des interactions simples, des transformations 2D et 3D, et dans ce cas, nous devons utiliser cette option. Nous pouvons également utiliser les interactions, qui est plus avancée et nous en parlerons plus tard en détail. Mais pour l'instant, laissez-moi vous montrer comment ça marche. Alors que mon élément est sélectionné, je peux appuyer sur ce bouton plus et nous avons différents types de transformation. Nous avons Déplacer, Échelle , Rotation et Skew. Laissez-moi commencer par Move. Eh bien, le type Move nous permet de déplacer nos éléments et nous pouvons contrôler les axes x, y et z comme ça. Si je change le type à Scale, je peux mettre à l'échelle cet élément comme ceci. Si je le change en Rotate, je peux le faire tourner comme ça en utilisant différents axes, voilà, et si je le mets à Skew, voyons ce qui se passe. Selon nos besoins, nous pouvons ou non utiliser chacun de ces types mais il est bon de savoir qu'ils existent et que les possibilités sont illimitées ici. Maintenant, je vais te montrer autre chose. Permettez-moi de supprimer ces transformations 2D et 3D. Je vais simplement créer un nouveau calque de transformation et je vais le déplacer. Mais que se passe-t-il si je veux déplacer mon élément et le mettre à l'échelle en même temps ? Si je vais à l'échelle maintenant et que je reviens, vous pouvez voir que tout est perdu ici. Toutes les modifications que j'ai faites ici ont disparu. C' est parce que nous ne pouvons pas utiliser tous les types en même temps. Nous devons réellement déplacer nos éléments et ensuite nous devons créer une autre couche, juste comme ça. Maintenant, je peux aussi le mettre à l'échelle. Vous devez garder cela à l'esprit lorsque vous travaillez avec des transformations 2D et 3D. Ensuite, nous avons des transitions. Si je clique sur ce bouton plus, vous pouvez voir que nous avons différents types de transitions et nous ne allons pas parler de transitions maintenant parce que, d' abord, vous devez en apprendre davantage sur les états, qui est le sujet de notre prochaine leçon. Dans la prochaine leçon, nous aborderons également les transitions. Laissez-moi supprimer les transitions. Maintenant, je vais parler de filtres. Alors que cet élément est sélectionné, je vais ajouter un filtre à cet élément, et ici nous avons différents filtres. On a du flou. On peut rendre cet élément floue, comme ça. Nous avons des filtres de réglage de la couleur comme la luminosité. Vous pouvez contrôler la luminosité de votre élément. Vous pouvez modifier le contraste, la teinte. Nous avons la saturation. Par exemple, vous pouvez diminuer ou augmenter la saturation de votre élément. Nous avons des niveaux de gris. Si nous voulons des images en noir et blanc ou des éléments en noir et blanc, nous pouvons utiliser ce filtre et d'autres effets. Passons maintenant à la dernière propriété de la section effets, qui est le curseur. Eh bien, chaque élément par défaut a un curseur spécifique. Par exemple, quand j'ajoute un bouton, laissez-moi vous montrer, quand je vais de l'avant et j'ajoute un bouton ici et je prévois que, si je survole, vous pouvez voir que le curseur a changé pour ce pointeur et c'est attendu parce que c'est cliquable. La même chose se produit si j'ajoute un bloc de lien. Si je vais juste de l'avant et ajouter un bloc de lien ici, bien sûr, je dois ajouter quelque chose à l'intérieur ou me laisser juste changer sa couleur, couleur de fond à quelque chose que vous pourriez voir, et aussi j'ai besoin de spécifier la largeur et la hauteur parce que sinon, c'est invisible. Permettez-moi de spécifier la largeur, 50 pixels, et la hauteur, 100 pixels, et maintenant vérifions. Encore une fois, nous avons un pointeur. Par exemple, le texte a son propre curseur. Ces curseurs sont les curseurs par défaut de notre navigateur. Mais parfois, à des fins spécifiques, nous pourrions avoir besoin de remplacer ces propriétés. Par exemple, si je veux changer le curseur de ce bouton, je peux le sélectionner, et ici, si j'ouvre ce menu déroulant, par défaut, il est réglé sur auto. La plupart du temps, il est préférable d'utiliser l'option auto car cette façon le navigateur détermine quel curseur il doit utiliser. Cependant, si vous voulez délibérément remplacer ces préférences, nous pouvons le faire. Par exemple, permettez-moi de le changer pour autre chose. Je vais choisir ce graphique et voyons si ça marche. Oui, c'est le cas. C' est ainsi que fonctionne le curseur. La plupart du temps, nous n'avons pas besoin de le changer à moins que nous ne devions le changer pour une raison spécifique. Les gars, c'est tout pour cette vidéo. J' espère que ça vous a plu. Je te vois dans la prochaine vidéo. 40. États: Hé, dans cette vidéo, nous allons parler des états et des transitions. Commençons par les États. Chaque élément avec lequel nous avons travaillé a des états par défaut, comme none, hover , pressé, focus, etc. Selon le type d'éléments, nos états peuvent changer aussi bien, laissez-moi vous montrer un exemple. Si je sélectionne cet élément de bouton et que je me dirige vers la section de sélection, vous pouvez voir qu'il y a cette icône de flèche vers le bas. Si je clique dessus, nous aurons accès à nos états. Nous n'avons pas, planer, pressé, concentré, visité. Si je sélectionne le survol, je peux aller de l'avant et ajuster les propriétés de l'état du survol de sorte que lorsque l'utilisateur survole cet élément, les nouvelles propriétés seront appliquées à cet élément. Laissez-moi aller de l'avant et modifier la couleur de l'arrière-plan et je vais le changer pour quelque chose de plus léger. Maintenant, pour voir si cela fonctionne ou non, abord, je dois retourner à l'état non-étatique. Je vais aller en non-état et si je survole, on y va. Comme vous pouvez le voir, dès que je passe la souris sur ce bouton, sa couleur change. Lorsque je modifie les propriétés de l'un de ces états, cet indicateur bleu apparaît indiquant qu'il existe certaines propriétés que nous avons modifiées pour cet état particulier. Mais qu'en est-il de pressé ? Eh bien, puisque j'ai changé les propriétés de hover, l'état pressé héritera des propriétés de hover. Laisse-moi te le prouver. Si je sélectionne ça, on y va. Nous avons maintenant notre bleu clair, cependant, nous pouvons également modifier cela. Je vais aller de l'avant et changer cette couleur pour quelque chose de plus sombre. Maintenant, si je passe à zéro, si je prévois ça, et maintenant quand je survolerai, je vais obtenir le bleu clair et si j'appuie, vous pouvez voir que nous aurons le bleu foncé. Il s'agit essentiellement d'États. Mais maintenant, je vais vous montrer un autre exemple. Si je fais défiler ici, j'ai un champ de texte ici. Pour les champs de texte, nous avons un état supplémentaire. Si je le sélectionne, et si je vais ouvrir mes états, vous pouvez voir que nous avons également cet espace réservé. Si je vais à la place holder, je peux personnaliser l'apparence et le style de ce texte d'espace réservé, entrer votre e-mail, parce que pour l'instant je ne peux pas modifier cela dans l'état Aucun, mais si je vais à l'espace réservé, Je peux simplement modifier sa couleur, par exemple, en rouge ou à n'importe quoi d'autre. Laissez-moi réinitialiser ça pour l'instant et je vais vous montrer un autre état de ce champ de texte. Le champ de texte a également l'état focalisé, et cet état est très utile pour les entrées de texte. Laissez-moi vous montrer comment ça marche. Si je le sélectionne et si je vais à, disons des ombres de boîte, je vais ajouter des ombres à cet état. Permettez-moi de changer l'angle, et aussi la distance, le flou. Je vais augmenter le flou et je vais également augmenter la taille et enfin, diminuer l'opacité. Voyons ce qui se passe. Je vais en prévisualiser, rien ne se passe. Mais dès que je clique ici, vous pouvez voir que l'état du focus apparaît. Nous pouvons utiliser des états pour presque n'importe quoi, même pour les images, pour les blocs div, comme vous pouvez le voir ici, nous avons des états différents. Ils sont si utiles pour ces interactions subtiles. Mais si je passe la souris sur ce bouton, vous pouvez voir que nous n'avons pas de transition en douceur ici. Comment pouvons-nous réparer ça ? Eh bien, nous devons utiliser la section de transition ici, celle dont nous n'avons pas parlé dans la leçon précédente. Mais maintenant, je vais vous montrer comment ça marche. Lorsque nous modifions les propriétés de différents états ou que nous ajoutons des effets à nos éléments, nous pouvons animer ces changements en utilisant des transitions. moment, nous avons trois états différents pour ce bouton, aucun, hover, et pressé. Chaque fois que nous voulons ajouter la transition, nous devons aller à l'état zéro, c'est très important sinon cela ne fonctionnera pas. Pendant que nous sommes dans le non-état, comme vous pouvez le voir, rien n'apparaît ici indiquant que nous sommes dans l'état zéro. Je vais ajouter une transition et ici je dois spécifier le type de transition. J' ai changé la couleur de l'arrière-plan. Je vais aller de l'avant et chercher la couleur de fond. Comme vous pouvez le voir, nous pouvons animer toutes les propriétés, même la marge, et le rembourrage, la topographie flex, les bordures, n'importe quoi. Je vais sélectionner la couleur d'arrière-plan et ensuite nous avons la durée, par défaut, il est réglé à 200 millisecondes et la méthode d'accélération, juste comme ça, nous allons parler de l'éditeur d'accélération et des méthodes d'assouplissement plus tard parce que c'est avance pour l'instant . Plus tard, nous y plongerons pour l'instant, nous n'aborderons pas ça. Voyons voir comment ça marche. Je vais en prévisualiser, et on y va. Maintenant, nous avons cette transition en douceur. La transition s'applique à tous les États. Si j'appuie sur, nous avons aussi une transition en douceur. Allons de l'avant et faisons la même chose pour notre saisie de texte. Je vais sélectionner ce champ de texte et je vais m'assurer que je suis dans l'état zéro, puis allons de l'avant et ajouter les transitions. De là, je vais changer le type d'opacité à box-shadow. On y va. Je vais changer la durée cette fois pour obtenir une transition plus dramatique. Disons que je vais l'augmenter à 500 millisecondes ou une demi-seconde. Prévisualisons ça. Si je clique ici, on y va. Maintenant, il est concentré et vous devez comprendre que les transitions fonctionnent dans les deux sens, donc si je clique ailleurs pour aller à l'état zéro, vous pouvez voir qu'il sera animé aussi. Voyons voir. Tu as vu ça ? C' est essentiellement ainsi que fonctionnent les transitions et les états. Si vous voulez ajouter des interactions simples à nos éléments comme ce que je viens de vous montrer, nous pouvons toujours utiliser des transitions et aussi nous pouvons utiliser des transformations 2D et 3D. Mais pour des interactions plus avancées, nous allons utiliser le panneau d'interactions et nous en parlerons plus tard. Mais avant de terminer cette vidéo, je vais vous montrer un autre exemple. Je vais sélectionner cette image, ce bloc div image, et laissez-moi aller à un autre état. Je vais passer au vol stationnaire et je vais ajouter une transformation 2D et 3D et me laisser l'échelle. Je vais le mettre à l'échelle légèrement, puis je vais revenir à zéro, et enfin, laissez-moi y ajouter une transition et je vais animer la transformation. Prévisualisons ça. On y va. Tu as vu ça ? Mais comme vous pouvez le voir, cela ne fonctionne pas pour d'autres images. C' est parce que, pour ces éléments, j'ai ajouté une classe combo. Cette transition et toutes ces interactions ne fonctionnent que pour ces blocs Div particuliers. Si je veux appliquer à tous ces blocs Div, ce que je vais faire est de supprimer ces classes combo. Maintenant, si je passe au survol, et j'ajoute la transition d'échelle puisque nous l'avons déjà ajoutée, elle est toujours là, donc je vais aller de l'avant et modifier cela. Laissez-moi passer à zéro et je vais ajouter les transitions ici pour transformer. Enfin, permettez-moi d'ajouter à nouveau ma classe combo. Voyons si cela fonctionne ou non et je vais passer le curseur sur cet élément, cela fonctionne, cet élément, cela fonctionne dans cet élément. C' est ainsi que fonctionnent les états et les transitions. Tout le monde, j'espère que vous avez apprécié cette vidéo. Je te verrai dans la prochaine. 41. Les bases du point de rupture: Lorsque nous voulons concevoir une page Web de manière responsable, nous devons utiliser des points d'arrêt. C' est quoi un point d'arrêt ? Eh bien, un point d'arrêt n'est rien d'autre qu'une taille spécifique qui applique des changements de style à une largeur d'écran spécifique. Vous devez vous rappeler que nous définissons nos changements de style pour différentes tailles d'écran uniquement en fonction de la largeur du navigateur ou de la largeur de l'appareil lui-même, peu importe s'il s'agit d'un iPad, d'un iPhone ou de tout autre appareil. Par défaut, Webflow comporte quatre points d'arrêt prédéfinis. Si vous jetez un oeil à la barre supérieure ici, vous pouvez voir que nous avons le bureau, qui est notre point de base, alors nous avons la tablette, puis nous avons paysage mobile, et enfin portrait mobile. Un principe important que vous devriez apprendre sur les points d'arrêt est changements que nous apporterons à nos styles seront en cascade vers des appareils plus petits et en cascade jusqu'à des appareils plus grands. C' est le principe principal des pages web réactives. Si vous l'apprenez correctement, vous pouvez créer des sites web réactifs facilement. Commençons par le point d'arrêt du bureau. Si je survolais cette icône, j'obtiendrai les informations de ce point d'arrêt particulier, et cela s'appelle notre point d'arrêt de base. Le suivant est la tablette. Comme vous pouvez le voir, nous obtiendrons la plage de pixels. Il dit 991 pixels et vers le bas, alors nous avons paysage mobile. Il dit 767 pixels et vers le bas, et enfin nous avons portrait mobile. Si vous souhaitez ajouter des points d'arrêt plus importants à votre projet, vous pouvez le faire. Si vous cliquez sur cette icône ici, vous pouvez commencer à ajouter des points d'arrêt plus grands. Cependant, gardez à l'esprit qu'à l'heure actuelle, une fois que vous ajoutez un point d'arrêt important à votre projet, vous ne pouvez pas le supprimer. Avant d'ajouter des points d'arrêt plus grands, permettez-moi de vous montrer comment fonctionnent les points d'arrêt. Je vais commencer par sélectionner ce titre. Ce titre a l'air génial. La taille de la police semble bien sur la largeur de cet écran, mais que faire si je vais sur tablette ? Sur tablette, il a l'air bien aussi. Qu' en est-il du paysage mobile ? Eh bien, ici ça a l'air bien, mais je peux le rendre plus petit aussi. Pendant que cela est sélectionné, je vais passer à la section typographie ici sur le panneau de style, et je peux remplacer ces propriétés. Comme vous pouvez le voir, toutes ces propriétés ont cette couleur ambre. Cela signifie que la valeur vient de notre point d'arrêt de base. Dès que j'écrase cela, vous verrez qu'il devient bleu. Permettez-moi de modifier la taille de la police à 40 pixels. On y va, il devient bleu. Maintenant, cette propriété spécifique vient de ces points d'arrêt, et tous les changements que je fais dans ce point d'arrêt particulier vont tomber en cascade vers le portrait mobile, mais cela n'affecte pas les points d'arrêt plus grands ici. Laisse-moi te le prouver. Si je vais à la partie mobile en ce moment, vous pouvez voir que la taille de la police est définie à 40 pixels et elle provient de notre paysage mobile. Cependant, si je vais sur tablette, vous pouvez voir que la taille de la police est toujours de 60 pixels. C' est ainsi que fonctionnent les points d'arrêt, les changements en cascade vers le bas et vers le haut. Si vous apprenez ce principe simple, vous savez déjà comment concevoir des pages web réactives. Une chose importante à propos des points d'arrêt est que cela ne fonctionne que lorsque nous modifions les styles sur le panneau de style. Si nous essayons de modifier, par exemple, l'ordre de ces éléments dans le navigateur, cela affectera également tous les autres points d'arrêt. Laissez-moi aller au portrait mobile, et je vais changer l'ordre de ces éléments dans le navigateur comme ceci. Maintenant, si je vais au paysage mobile, l'ordre a été changé, pour tablette le même, point d'arrêt de bureau, le même. Vous devez garder à l'esprit que lorsque nous voulons modifier l'ordre de nos éléments, nous devons le faire en utilisant flexbox dans le panneau de style et toutes les autres propriétés ici. Vous pouvez également utiliser une grille, et vous pouvez modifier les enfants de votre grille, vous pouvez modifier l'ordre de vos enfants flexbox, comme nous l'avons déjà discuté, mais vous pouvez changer l'ordre de vos éléments dans le navigateur ou sur le canevas ici car les modifications s'appliquent à tous les points d'arrêt. Supposons que je veuille changer la couleur de ce texte. Je peux le faire aussi. Cependant, si je le change ici sur le point d'arrêt de base, il va en cascade vers le bas et vers le haut. Par conséquent, cela affectera également tous les autres points d'arrêt. Laisse-moi faire défiler ici et je vais changer la couleur pour autre chose. Par exemple, quelque chose de plus léger. Voyons ce qui se passe sur d'autres appareils. On y va. Les modifications s'appliquent à ce point d'arrêt , à celui-ci et à celui-ci. Cependant, si je remplace la couleur de ce texte ici ou sur tout autre point d'arrêt, laissez-moi vous montrer ce qui se passe si je le remplace ici, par exemple, en rouge. Si je passe au point d'arrêt du bureau et que j'essaie de changer cette couleur en noir, cela n'affecte plus le point d'arrêt du portrait mobile. Pourquoi ? Parce que nous avons déjà remplacé cette propriété pour ce point d'arrêt particulier. On y va. Ça n'a pas changé. C' est généralement ainsi que fonctionnent les points d'arrêt, sauf si une propriété spécifique est définie sur ce point d'arrêt particulier, les modifications sont toujours en cascade. Si je supprime ce style ici, si je maintiens la touche Option ou Alt enfoncée sur mon clavier et que je clique ici, cliquez sur ce texte de couleur, maintenant le style vient du point d'arrêt du bureau. Laisse-moi aller au bureau et je vais te montrer d'autres choses aussi. Laissez-moi aller à la tablette, et comme vous pouvez le voir, ces images ont fière allure, bien que nous ayons une taille d'écran étroite. Mais que faire si je vais au paysage mobile ? Ils sont trop rétrécis, donc je vais changer ça. Nous pouvons sélectionner notre emballage Image, qui est la flexbox, et nous pouvons modifier les propriétés de notre flexbox. Au lieu de mettre la direction à l'horizontale, je vais la changer à la verticale. Super. Alors je vais les aligner au centre. Enfin, je vais sélectionner les enfants de cette image wrapper, et ici la largeur est définie à 31 pour cent car elle provient du point d'arrêt du bureau. Je vais changer la largeur à 100 pour cent, et rappelez-vous que tout changement que j'apporterai à ce point d'arrêt sera en cascade vers le portrait mobile ainsi. Maintenant, je vais ajouter une marge inférieure à ces images. Je pense que 10 pixels seraient bien. Voyons ce qui se passe si je vais au portrait mobile. On y va. Maintenant, ils ont fière allure. Mais si je vais à la tablette, elle est intacte. Si je vais au bureau, vous pouvez voir que nous avons encore la direction horizontale. Si je sélectionne l'un de ces enfants, la largeur est définie à 31 % et elle n'a pas changé. En utilisant des points d'arrêt, nous pouvons créer n'importe quel type de pages réactives facilement et commodément. Cependant, il y a certains points que je devrais mentionner. Supposons que je veux changer cette image sur un autre point d'arrêt. Voyons ce qui se passe. Si je sélectionne cette image et si je la change en autre chose, par exemple, celle-ci, cette modification s'applique à tous les points d'arrêt. Si je vais au bureau, on y va. C' est comme ça que les images fonctionnent. Tu ne changeras pas de style. Si j'utilise l'image de l'arrière-plan ici dans le panneau de style, nous pourrions la définir pour chaque point d'arrêt spécifique, mais avec les images, ce n'est pas possible. Tu dois garder ça à l'esprit. Un autre point important est que si vous modifiez le texte quelque part même sur le portrait mobile, cela affectera tous les autres points d'arrêt car, encore une fois, nous ne changeons pas les styles. Si je supprime juste ce design ici, voyons ce qui se passe. On y va. Il a été retiré de tous les points d'arrêt. Vous devez donc être conscient de ces limitations. Mais que faire si vous voulez supprimer certains éléments ? Laisse-moi te montrer comment ça marche. Si je décide de supprimer ce paragraphe ici, et je le sélectionne, et j'appuie sur Supprimer ou je peux cliquer avec le bouton droit sur cela et juste le supprimer, il sera supprimé du document lui-même. Cela affectera tous les autres points d'arrêt juste comme ça parce qu'il n'existe plus dans notre code. Cependant, laissez-moi annuler l'opération, si je décide de supprimer ces éléments de ce point d'arrêt particulier, je peux le sélectionner. Je peux me diriger vers les paramètres d'affichage ici, et je peux définir le paramètre d'affichage sur Aucun. Maintenant, il est caché, et il est caché seulement sur mobile portrait. Pourquoi ? Parce que nous avons modifié les propriétés CSS ici. Laisse-moi aller au bureau. Vous pouvez voir qu'il est toujours là. Je vais aller à la tablette et le paysage mobile, il est toujours là. C' est une bonne astuce pour cacher des éléments. Cependant, vous devez garder à l'esprit que même si vous avez caché l'élément ici, il est toujours dans votre code, mais il n'est pas visible parce que nous avons juste défini son paramètre d'affichage sur none, mais cela ne signifie pas qu'il n'existe pas. Si je veux réinitialiser des propriétés ici, comme je l'ai mentionné précédemment, je vais maintenir la touche Alt ou touche Option enfoncée sur mon clavier et je vais cliquer dessus. Alternativement, vous pouvez cliquer sur cette étiquette bleue et vous pouvez cliquer sur Réinitialiser comme ça. Mais qu'en est-il des points d'arrêt plus importants ? Eh bien, les points d'arrêt plus grands sont facultatifs. C' est pourquoi ils n'apparaissent pas en haut ici par défaut. Mais parfois, il est logique d'ajouter des points d'arrêt plus grands et de spécifier certains, disons, des styles spécifiques pour ces points d'arrêt. Je vais vous montrer comment ça marche. Je vais ajouter ce point d'arrêt de 1280 pixels. Il dit créer ce point d'arrêt et plus, vous ne pouvez pas supprimer le point d'arrêt du projet une fois qu'il est créé. Créez un. Je vais également créer le prochain point d'arrêt. Je vais le créer, et enfin le point d'arrêt 1920 pixel et Create. Cool. Maintenant, nous avons les sept points d'arrêt disponibles, et tout comme les petits appareils, les modifications que nous apportons au point d'arrêt de base vont s'étendre sur des appareils plus grands. Si je vais à cette pause et si je décide de modifier la largeur maximale de mon conteneur ici, comme vous pouvez le voir, la largeur maximale est définie à 1100. Si je décide de l'augmenter à, disons, 1200, comme ça, ce changement s'applique à tous les appareils plus grands, mais il ne tombe pas en cascade. Laissez-moi vous montrer si je vais à ce point d'arrêt de 1440 pixels, vous pouvez voir que la largeur maximale est définie à 1200. Si je vais au point d'arrêt de 1920 pixels, on y va. Encore une fois, 1200. Pour ce point d'arrêt, je peux le modifier. Je peux remplacer cette propriété, par exemple, à 1700, il semble beaucoup mieux maintenant, cependant, ce changement ne s'applique pas aux points d'arrêt plus petits. C' était beaucoup à traiter. Récapitulons. abord, vous devez comprendre le principe principal de la réactivité et des points d'arrêt, également connus sous le nom de requêtes de médias, afin de rendre la conception réactive. Ce principe indique que les changements que nous appliquons à notre point d'arrêt de base seront en cascade vers des appareils plus petits et seront en cascade jusqu'à des appareils plus grands. C' est la principale chose que vous devez apprendre. Ensuite, vous devez comprendre que les points d'arrêt ne répondent qu'aux changements de style. Donc, tout ce que vous changez sur le panneau de style sur le côté droit, respectera les points d'arrêt. Mais si vous changez quelque chose dans le navigateur ou si vous modifiez l'ordre de vos éléments dans le navigateur ou sur le canevas, cela n'affectera pas différents points d'arrêt. L' autre point était que si vous remplacez vos images à l'aide d'un élément image, cela affectera tous les points d'arrêt, et enfin, lorsque vous modifiez vos calques de texte, si vous modifiez votre texte, il affectera également tous vos points d'arrêt. Très bien, les gars, c'est tout au sujet des points d'arrêt et de la réactivité. Bien sûr, nous parlerons de la réactivité en détail une fois que nous commencerons à créer nos projets. J' espère que vous avez apprécié cette vidéo et je vous verrai dans la prochaine. 42. Configurer votre projet: Hé, bienvenue dans une autre section de ce cours. Dans cette section, nous allons commencer à construire ensemble notre projet de travail réel. Je suis tellement excité. abord, je vais vous montrer ce que nous allons construire, puis je vais expliquer le processus. Enfin, nous allons mettre en place notre projet dans Webflow. Sans plus tarder, commençons. C' est le projet que nous allons construire dans cette section. C' est en fait un site web pour une agence de design fictive appelée Circle. Ensemble, vous et moi allons construire ce site à partir de zéro. Nous ne parlerons pas processus de l'interface utilisateur car ce n'est pas l'objectif principal de ce cours. L' objectif principal de ce cours est de vous apprendre à convertir une conception d'interface utilisateur en site entièrement fonctionnel. Par conséquent, nous n'allons pas concevoir ce projet à partir de zéro. J' ai préparé le design et je vais vous montrer comment vous pouvez avoir accès à ce projet. Tout d'abord, laissez-moi vous montrer à quoi ressemble le design. Dans ce projet, nous allons construire trois pages différentes : la page d'accueil, la page du projet et la page de contact. Nous allons construire deux pages statiques et une page dynamique. Bien sûr, nous allons parler de la différence entre les pages statiques et les pages dynamiques. Mais pour l'instant, laissez-moi vous montrer à quoi ressemble la page d'accueil. Je vais faire défiler comme ça. Comme vous pouvez le voir, nous avons différentes sections. Nous avons une section de témoignage, nous avons des services, nous avons une section d'appel à l'action, et enfin, un pied de page. Je vais zoomer et je vais vous montrer d'autres pages aussi. Ici, nous avons la page du projet. Comme vous pouvez le voir, il y a quelques informations sur les derniers projets que cette société a récemment fait, ainsi que la section des autres projets, et encore une fois, l'appel à l'action. Enfin, il y a cette page de contact que nous devrons construire ensemble. Ce sont les pages principales de ce projet, une page d'accueil ou disons la page d'accueil qui présente les projets récents de cette société appelée Circle, cette société fictive, disons, et affiche également leurs services. Par exemple, nous avons ici la conception de l'interface utilisateur, la conception de l'expérience utilisateur, le développement d' applications et un appel à l'action avec un formulaire. abord, nous allons construire ce design à l'intérieur de Webflow, puis nous allons le rendre réactif et enfin, nous allons travailler avec des interactions et des animations afin de rendre le site Web beaucoup mieux et d'améliorer l'utilisateur expérience. Vous allez apprendre à créer des interactions avancées dans Webflow et vous apprendrez aussi à créer des animations avancées. C' est le point principal que je devais mentionner. ici, comme vous pouvez le voir, nous avons également un système de conception. Ici, nous avons les styles de couleur et les styles de texte sur le côté droit. Je les ai déjà préparés. Je vais vous montrer comment vous pouvez accéder à ce projet maintenant. Le logiciel que j'utilise s'appelle Figma. Vous n'êtes peut-être pas familier avec ça, mais si vous ne l'êtes pas, c'est tout à fait bien parce que nous ne allons pas travailler avec Figma dans ce projet. Nous avons juste besoin de Figma pour voir comment ce projet est structuré et peut-être que nous avons juste besoin de vérifier certaines propriétés comme la taille de la police ou les couleurs. Rien de compliqué. Si vous n'avez pas travaillé avec Figma auparavant, ne vous inquiétez pas, vous ne ferez pas face à aucun problème. Tout d'abord, je vais vous demander d'aller de l'avant et de créer un compte Figma gratuit si vous n'en avez pas déjà. Si vous allez sur figma.com, vous pouvez cliquer sur ce bouton d'inscription dans le coin supérieur droit et ici vous pouvez entrer votre adresse e-mail et choisir un mot de passe pour votre compte, et cliquer sur Créer un compte. Une fois connecté, vous verrez ce tableau de bord. Vous pouvez être dans un onglet récent ou dans l'onglet brouillon, c'est tout à fait bien. Ce que vous allez faire, c'est télécharger le projet que j'ai préparé pour vous. Si vous êtes à l'intérieur d'un brouillon ou récent, vous pouvez simplement vous diriger vers ce nouveau bouton sur le côté droit et vous pouvez cliquer dessus et vous pouvez appuyer sur le bouton d'importation. Je vais vous montrer ici aussi. Je suis dans une équipe et je vais appuyer ce nouveau bouton et je vais cliquer sur importer, puis je peux importer le projet à partir de mon ordinateur. Alternativement, vous pouvez simplement faire glisser et déposer le fichier que j'ai préparé pour vous ici. abord, vous devez télécharger le projet Figma que j'ai préparé pour vous à partir de la section des ressources ou de la conférence sur les actifs. Une fois que vous avez téléchargé ce fichier zip, vous devez le décompresser et une fois que vous décompressez le fichier, vous obtiendrez ce fichier webflowproject.fig. L' extension est .fig et vous pouvez simplement glisser et déposer dans le tableau de bord de votre Figma, juste comme ça. Une fois qu'il est importé, vous pouvez double-cliquer dessus et c'est fait. Vous aurez accès au projet avec tous les détails dont vous avez besoin. C' est essentiellement ce que vous devez faire à l'intérieur de Figma. Rien de plus. Tout d'abord, créez un compte. Ensuite, téléchargez le projet Figma que j'ai préparé pour vous, et troisièmement, importez ce projet sur votre compte Figma. C'est tout. Une fois que vous avez effectué ces trois étapes, il est temps d'aller de l'avant et de configurer le projet sur Webflow. Je vais aller au tableau de bord de mon Webflow. Ici, je vais appuyer sur ce nouveau bouton de projet, puis je vais choisir cette sélection de site vierge, et ici, appelons-le Cercle. Vous pouvez le nommer comme vous voulez, cela n'a pas d'importance et appuyez sur le bouton Créer un projet. Parfait. Maintenant, nous sommes à l'intérieur du concepteur et nous avons une toile vide. Pour ce projet, nous devons travailler avec certains atouts. Si je vais à mon projet Figma ici, comme vous pouvez le voir, nous avons des images différentes, nous avons des logos différents. En outre, nous avons quelques images pour nos projets et ces emojis, ainsi que quelques icônes. Nous devons exporter ces actifs, puis les importer dans le projet de notre Webflow. Mais pour gagner votre temps, je les ai déjà exportés et j'ai préparé un dossier d'actifs pour vous. Vous pouvez le télécharger à partir de la section Ressources ou de la conférence sur les ressources. Plus tard, nous parlerons de la façon dont vous devez exporter vos images, comment optimiser vos images pour le développement web. Mais pour l'instant, vous avez juste besoin d'avoir accès à ces actifs et vous devez apprendre comment vous pouvez les utiliser pour construire un projet de travail réel. Nous n'allons pas plonger dans les détails sur l'optimisation de l'image à ce stade de ce cours, mais plus tard nous en parlerons. Allons à Webflow. Alors si je vais à la section des actifs ici, je peux déposer mes fichiers ici. Une fois que vous avez téléchargé le dossier assets et que vous décompressez cela, vous pouvez simplement faire glisser et déposer ces fichiers ici, laissez-moi vous montrer comment cela fonctionne. Dans le dossier assets, vous avez différents dossiers comme la section héros, logos, newsletter, section projet , section services et section témoignage. Nous allons ouvrir chacun d'eux et nous allons les importer un par un. Je vais commencer par la section des héros. On y va. Je vais les sélectionner tous et les faire glisser et déposer. Juste comme ça. Je vais répéter le même processus pour tous ces dossiers. Je vais accélérer ce processus pour vous faire gagner du temps. C' est fait. Toutes nos images et icônes ont été téléchargées avec succès. Que devons-nous faire d'autre pour mettre en place notre projet ? Eh bien, dans ce projet, nous allons utiliser des polices spécifiques. Si je vais à mon projet Figma ici, et si je sélectionne l'un de ces calques de texte, je vais double-cliquer sur ce titre, cet en-tête, et je peux vous montrer quelles polices j'ai utilisées pour cela. Ça s'appelle Roboto. s'agit d'une police Google et il est libre d'utiliser, et nous allons en avoir besoin aussi. Comme vous vous en souvenez, afin de travailler avec ces polices, nous devons ajouter la police à l'intérieur de nos paramètres de projet. Si je vais à Webflow et si je vais aux paramètres du projet, je peux me diriger vers l'onglet polices et ici je vais choisir la police dans la liste. Je vais chercher Roboto. On y va. Je vais choisir Roboto. Ici, je vais choisir différentes variantes de cette police, différents poids pour cette police. Régulier doit être sélectionné. Je vais sélectionner 300, 500 et 700. Nous n'aurons pas besoin de 900. Ça va être trop audacieux. Ce sont les polices nécessaires dont nous aurons besoin pour ces projets. Plus tard, si nous avons besoin de plus de variantes, nous pouvons toujours venir à cette section et simplement ajouter plus de variantes. Je vais appuyer sur le bouton Ajouter des polices et c'est tout. Je vais voir le designer. Parfait. Nous sommes prêts à commencer à construire notre projet parce que nos actifs sont importés et nos polices ont également été ajoutées à ce projet. Très bien, les gars, c'est tout pour cette vidéo. Nous avons mis en place notre projet avec succès et nous allons commencer à construire notre projet dans la prochaine vidéo. On se voit alors. 43. Barre de navigation: Hé, dans cette vidéo, on va commencer à construire notre barre de navigation. Laissez-moi d'abord me diriger vers mon projet Figma ici. Comme vous pouvez le voir à droite en haut, nous avons une barre de navigation qui comprend un logo sur la gauche, puis trois menus différents, à droite, et enfin un bouton Contactez-nous sur le côté droit. Il devrait être placé juste en haut. Comme vous pouvez le voir, cette page d'accueil a une couleur d'arrière-plan qui n'est pas blanche. Pour ce fond, j'ai utilisé une couleur appelée lumière neutre. Si je vais à mes Styles de couleur, comme vous pouvez le voir, j'ai cette couleur neutre et je l'ai utilisée pour mon arrière-plan. C' est la même couleur que nous avons utilisée pour toutes les pages différentes. Par conséquent, toutes nos pages de notre projet devraient avoir la même couleur d'arrière-plan. Afin de faciliter notre vie, nous allons créer des échantillons globaux pour nos couleurs afin de les réutiliser encore et encore et plus tard, si vous décidez d'apporter quelques modifications, vous n'avez pas besoin d'aller de l'avant et de modifiez manuellement la couleur de tous vos éléments un par un. Vous pouvez effectuer la modification une seule fois et la modification sera appliquée à tous les éléments utilisant cette nuance globale particulière. Nous avons déjà parlé d'échantillons globaux. Nous allons maintenant en créer quelques-uns pour notre projet. Commençons. D'abord, je vais me diriger vers mon système de conception ici. Je ne vais pas créer d'échantillons globaux pour toutes ces couleurs car certaines de ces couleurs ne sont pas utilisées dans ce projet. Je viens de les créer pour avoir un bon schéma de couleurs et plus tard, si vous avez besoin d'ajouter des couleurs à votre projet, ou si vous avez besoin de changer certaines couleurs, vous pourriez juste avoir des couleurs prédéfinies ici, mais nous n'allons pas pour les utiliser tous. Si je vais à Webflow et ici, je vais sélectionner le corps, et ensuite, je vais aller au sélecteur. Ici, si je clique juste une fois, vous pouvez voir que nous allons obtenir cette balise HTML, qui est rose. Il est écrit Body toutes les pages. Ces balises HTML sont si utiles car nous pouvons définir des styles par défaut pour différentes balises. Par exemple, sur le corps ou les pages, ou tous les H1, ou tous les H3 pour nos en-têtes ou pour nos paragraphes. Nous en parlerons plus tard. Mais pour l'instant, je vais sélectionner Body toutes les pages. Une fois que j'ai sélectionné ce corps toutes les pages, je peux définir un style par défaut pour la balise body. Ici, je vais aller de l'avant et changer la couleur, et je vais avoir besoin d'un code couleur. Si je vais à mon projet Figma ici, comme vous pouvez le voir, j'ai écrit le code couleur ici. Vous pouvez simplement double-cliquer dessus et ensuite vous pouvez le copier et le coller Commande C ou Contrôle C. Ensuite, vous pouvez vous diriger vers votre Webflow, et ici, vous pouvez simplement le coller commande V ou Contrôle V. Si j'appuie sur Entrée, nous y allons. La couleur a été changée. Mais comme je l'ai déjà mentionné, je vais créer différents échantillons, différents échantillons globaux pour ce projet. Je vais appuyer sur ce bouton « Plus », et ici, je vais écrire Neutral/Lumière. Alors je vais le créer. Cool. Maintenant, je vais avoir besoin de plus de couleurs. Allons de l'avant et créons ici tous les échantillons dont nous aurons besoin pour ce projet. Je vais aller de l'avant et copier ce code couleur, celui juste à côté de ce Neutre/Lumière. Je vais le copier et je vais créer une nouvelle nuance que nous avons changé le code couleur pour le nouveau, et je vais l'appeler Neutre/Medium, juste comme ça. Ensuite, je vais créer la prochaine nuance. Allons à Figma et je vais copier ce code de couleur sombre. Laisse-moi créer une nuance. Je vais changer le code de couleur et appelons-le Neutral/Dark. Il nous faut trois couleurs de plus. Nous avons besoin de notre couleur primaire, qui est ce bleu. Je vais copier le code couleur. Je vais créer une nouvelle nuance, la coller ici. Ici, je vais l'appeler primaire/par défaut. Créer. Maintenant, je vais aller de l'avant et copier ce code de couleur pour cette couleur orange. Je vais le copier et créer une nouvelle nuance, coller le code couleur ici, et appelons-le secondaire. Appuyez sur « Créer ». Enfin, je vais aller de l'avant et copier ce code couleur, cette couleur bleu clair, et laissez-moi créer une nuance. Je vais le coller ici, et appelons-le bleu clair neutre. Super. Nos échantillons globaux sont prêts, mais assurez-vous d'utiliser votre couleur Neutre/Lumière pour votre pile de pages Body. En ce moment, nous avons créé ces échantillons dans la section Typographie, c'est pourquoi notre expérience n'a pas changé. C' est très bien parce que nous pouvons également utiliser ces nuances dans la section Couleur Arrière-plan. Si je passe à la couleur Arrière-plans, je peux sélectionner cette couleur et la changer en Neutre/Lumière. Maintenant, ma couleur Arrière-plans a été modifiée et je peux réinitialiser cette couleur Typographie aussi. Je peux maintenir ma touche Option ou Alt enfoncée sur mon clavier et je peux cliquer dessus. On y va. La couleur de la Typographie a été réinitialisée et nous sommes prêts à partir. Maintenant que notre arrière-plan est prêt et que nos couleurs sont prêtes, nous pouvons commencer à créer notre barre de navigation. Voyons ce que nous avons ici. Comme vous pouvez le voir, j'ai créé différentes sections à l'intérieur de ce projet. Laissez-moi vous montrer comment c'est structuré. En haut, nous avons Navbar. C' est une section, et si je l'ouvre, à l'intérieur, nous avons un conteneur, et si je l'ouvre à l'intérieur, nous avons différents éléments. Nous avons les menus, nous avons le bouton, et nous avons le logo. C' est si simple. Ensuite, nous avons la section Héros, la section Client, et ainsi de suite. Toutes ces sections ont un conteneur, comme vous pouvez le voir, ici nous avons le conteneur et à l'intérieur, nous avons différents éléments. A l'intérieur de cette section, nous avons un conteneur et à l'intérieur, nous avons différents éléments. Nous allons structurer notre projet à l'intérieur de Webflow de la même manière. Maintenant, nous allons commencer à créer notre barre de navigation. Pour créer une barre de navigation, nous devons nous diriger vers la section Ajouter un élément. Je vais faire défiler vers le bas pour trouver un composant navbar. Je vais le glisser et le déposer ici. On y va. Nous avons la plupart des éléments dont nous aurons besoin pour ce projet, mais nous avons besoin de quelques changements. Ici, à l'intérieur de cette barre de navigation, comme vous pouvez le voir, nous avons un conteneur comme dans notre conception. Ici, à l'intérieur de cette barre de navigation, nous avons un conteneur. Mais ce conteneur par défaut, a une largeur maximale spécifique, et ce n'est pas la largeur maximale que nous allons utiliser dans ce projet. Par défaut, la largeur maximale de ce conteneur est définie sur 940 pixels. Mais pour ce projet, la largeur maximale de notre conteneur va être de 1 100 pixels. Pourquoi ? Parce que si je me dirige vers mon design ici, et si, par exemple, je sélectionne ces projets récents, à l'intérieur, si je sélectionne le conteneur sur le côté droit dans l'inspecteur, vous pouvez voir que la largeur est de 1 100 pixels. C' est pourquoi nous devons créer notre propre conteneur et c'est très facile. Nous avons juste besoin d'un bloc div avec des propriétés de taille spécifiques. D' accord, alors d'abord, créons notre propre conteneur. Je vais aller à la section ajouter, je vais faire glisser et déposer un bloc div ici à l'intérieur de cette barre de navigation et donnons-lui une classe. Je vais l'appeler conteneur. Nous allons utiliser cette classe pour d'autres conteneurs aussi. Ici pour la largeur maximale, je vais le définir à 1100 pixels et ensuite nous devons centrer ce conteneur. Tu te souviens comment on a pu faire ça ? Oui, vous avez raison. On peut juste cliquer sur cette petite icône ici et on y va, elle est centrée. Maintenant, nous venons de créer un conteneur qui a une largeur maximale de 1100 pixels et il est centré parce que nous avons cliqué sur ce bouton, et ses marges gauche et droite sont réglées sur auto. C' est pour ça que c'est centré. Nous en avons déjà discuté. Que devons-nous faire d'autre maintenant ? Parce qu'en ce moment, nous avons deux conteneurs. Si j'ouvre ce conteneur principal, je peux simplement faire glisser tous les éléments et les déposer dans notre nouveau conteneur parce que nous n'avons plus besoin de ce conteneur. Laissez-moi commencer avec ce lien de logo, lien de marque et je vais le faire glisser et assurez-vous que vous le déposez dans votre nouveau conteneur, il devrait être imbriqué à l'intérieur. Ensuite, je vais sélectionner le menu navigation, je vais faire la même chose et enfin ce bouton Menu, et mettons-le ici, cool. Maintenant, nous pouvons sélectionner ce conteneur, le conteneur principal, et supprimer cela. Bon, notre conteneur est prêt. Puisque ce conteneur va être utilisé pour cette barre de navigation, je vais lui donner une classe combo. Pourquoi ? Parce que plus tard, nous allons utiliser ce nom de classe de conteneur pour d'autres conteneurs également. Ici, je vais créer une nouvelle classe combo et je vais l'appeler navbar. Maintenant, définissons le paramètre d'affichage sur flexbox au lieu de bloc, ok, juste comme ça. Ici, comme vous pouvez le voir à l'intérieur, nous avons différents éléments. Nous avons le bloc de lien de marque, nous avons ce menu nav div bloc, et enfin nous avons ce bouton de menu, qui n'est pas visible parce que ce bouton de menu apparaît lorsque nous allons à la tablette, comme vous pouvez le voir ici, ou mobile. On en a déjà parlé. Que devons-nous faire maintenant ? abord, je vais sélectionner ce conteneur et je vais changer certaines de ses propriétés ici. Je vais commencer par une ligne, je vais l'aligner au centre, et aussi je vais changer la justification à l'espace entre. Pourquoi ? Parce que si vous allez à notre projet de conception ici, vous pouvez voir que notre logo et notre bouton touchent les bords de ce conteneur. C' est pourquoi je dois changer la justification de ce conteneur à l'espace entre. Si vous vous souvenez, lorsque nous l'avons réglé à l'espace entre, notre premier élément touche le côté gauche de ce conteneur et notre dernier élément touche le côté droit de ce conteneur. C' est exactement ce que nous voulons, mais ici nous avons besoin d'autre chose, nous avons besoin d'un bouton aussi. Créons un. Je vais aller de l'avant et faire glisser et déposer un bouton, à l'intérieur de ce conteneur. Voilà, nous avons notre bouton et leur placement est superbe parce que notre bouton touche le côté droit de notre conteneur. Maintenant, allons de l'avant et sélectionnez ce bloc de lien de marque et je vais lui donner un nom de classe. Ici, je vais l'appeler logo navbar. C' est vrai, soulignement de la barre de navigation, soulignement , je vais utiliser deux traits de soulignement, et logo là, nous allons. Vous pouvez le nommer comme vous voulez, c'est la façon dont je structure mes classes. Je parlerai des noms de classe plus tard, du système que vous pouvez utiliser pour vos projets, mais cela n'a pas d'importance tant que vous savez ce que vous faites et tant que vos noms ont du sens, vous pouvez décider comment vous voulez nommer vos éléments. Ici, nous avons le logo Navbar, et puis je vais aller sur les arrière-plans ici et je vais ajouter une image ici. Choisissons l'image et de mes actifs, je vais chercher le cercle SVG, c'est le logo grand, je vais sélectionner cela. Que dois-je faire d'autre ? D' abord, je vais le définir pour contenir, puis je vais changer sa position au centre et enfin, je vais changer le pneu pour ne pas faire de tuiles comme ça, mais ça a l'air trop grand, n'est-ce pas ? Donc, je vais aller de l'avant et changer sa propriété de taille. Réglons la largeur à 60 pixels et la hauteur à 18 pixels. Vous pouvez les ajuster comme vous le souhaitez mais en fonction de mon fichier de conception ici, si je sélectionne ce logo, vous pouvez voir que sa largeur est d'environ 60 pixels et sa hauteur est réglée à 18 pixels. Cool, notre logo est superbe. Maintenant, nous devons créer nos menus de navigation. Donc, ici, dans notre dossier de conception, nous avons une maison, des projets et des services. La maison, qui est la page sélectionnée ou le menu sélectionné, devrait avoir la couleur primaire et les autres devraient avoir la couleur moyenne neutre, comme vous pouvez le voir ici. Allons de l'avant et créons nos menus. Nous avons la maison, nous avons environ, je vais changer les projets sur le point et le contact aux services, cool. Que devons-nous faire d'autre ? Comme vous pouvez le voir, nous utilisons ici une police moyenne, un poids moyen pour ces menus, mais ici, cela semble léger. Je vais donc choisir l'un d'entre eux, peu importe lequel je vais commencer par la maison, et je vais lui donner un cours. Pourquoi ? Parce que nous allons réutiliser les styles que nous allons définir pour ce lien de navigation particulier encore et encore. Il est logique de lui donner une classe ici et je vais écrire nav underscore, underscore, link, juste comme ça. Maintenant, je vais passer à la section typographie ici, et je vais changer la police en Roboto, celle que nous avons ajoutée auparavant, et le poids est réglé à 400 ou normal. Je vais le définir à 500 ou moyen et la taille de la police va être de 17 pixels comme vous pouvez le voir ici, nous avons 17 points. Mettons-le à 17. Et la couleur ? Réglons la couleur au milieu neutre et nous avons presque fini. Maintenant que nous avons appliqué ces styles à ce premier lien de navigation, nous pouvons sélectionner notre deuxième lien et ici nous allons utiliser la classe de lien de navigation comme ça pour le troisième, cool mais qu'en est-il de la couleur du premier devrait ne pas utiliser la couleur primaire ? Oui, ça devrait. Comment pouvons-nous faire ça ? C'est si simple. Nous devons créer une classe de combo, tandis que ce premier lien est sélectionné, je vais créer une nouvelle classe de combo et appelons-la actuelle. Ça veut dire que la page en cours est sélectionnée, ok. Ensuite, je vais changer sa couleur en primaire, nos menus sont prêts aussi. Cool, mais qu'en est-il de ce bouton ? Eh bien, nous devons modifier ce bouton. Donc je vais sélectionner ce bouton et je vais lui donner un cours. Je vais le nommer grand bouton primaire alors je vais commencer à changer ses propriétés. D' abord, je vais changer la typographie ici, la police en Roboto, et le poids va être normal de 400, c'est bon. Et la taille ? Ça va être de 17 pixels. Si vous allez dans le fichier de conception ici, si vous sélectionnez cette police, vous pouvez voir qu'elle indique 17, et je peux changer le chemin de la police en moyen aussi. Mais voyons comment ça se passe. Ensuite, je vais changer sa couleur de fond à notre couleur primaire et enfin, laissez-moi modifier le texte pour nous contacter, cool. Mais qu'en est-il du rembourrage ? Parce qu'ici, comme vous pouvez le voir, nous avons plus de remplissage autour de ce texte, je vais sélectionner ce Contact nous prend ici, et nous allons maintenir la touche Option ou Alt enfoncée sur mon clavier et puis je peux voir le rembourrage. Notre rembourrage supérieur et inférieur est de 15 pixels, et notre rembourrage gauche et droit est réglé sur 33 pixels. Alors allons de l'avant et sélectionnez ce bouton, puis ici, dans cette section d'espacement, nous allons changer le rembourrage, pas la marge. Rappelez-vous, le rembourrage est l'espace à l'intérieur nos éléments et la marge est l'espace à l'extérieur de nos éléments. Ici, je vais modifier le remplissage supérieur et inférieur à 15 pixels, je vais maintenir la touche Option ou Alt enfoncée sur mon clavier et modifier le remplissage droit et gauche à environ 30 pixels. Ça a l'air bien, ça a l'air super. Mais qu'en est-il de la couleur de ce fond ? Si je sélectionne cette barre de navigation, vous pouvez voir que nous avons cette couleur de fond gris clair, qui n'est pas ce que nous voulons car ici nous avons un fond transparent, alors que cette barre de navigation est sélectionnée, je vais lui donner une classe et je vais écrire navbar comme ça. Enfin, si je me dirige vers la couleur de fond ici, je vais écrire transparent. On y va. L' arrière-plan est parti, mais qu'en est-il de la marge supérieure ? Ici, comme vous pouvez le voir, nous avons une marge supérieure. Si je sélectionne mon conteneur et que je maintiens la touche Option ou Alt enfoncée de mon clavier, je peux voir la marge supérieure ici, elle indique 70 pixels. Allons de l'avant et ajoutons quelques marges. Pour ce faire, je vais sélectionner mon conteneur parce que notre conteneur ici a une marge supérieure de 70 pixels. Ensuite, si je me dirige vers la section d'espacement, je peux juste ajouter une marge supérieure comme celle-ci. Je peux le régler à 70 pixels, juste comme ça. C' est tout, notre barre de navigation est prête. Nous n'allons pas parler de réactivité maintenant, nous en parlerons plus tard. Les gars, c'est tout pour cette vidéo. J' espère que ça vous a plu et je vous verrai dans la prochaine vidéo. 44. Section du héros: Hé, dans cette vidéo, on va commencer à créer notre section de héros ensemble. Comme vous pouvez le voir dans ce projet Figma, notre section héros a un conteneur, comme toutes les autres sections, nous avons toujours une section et à l'intérieur nous aurons un conteneur. C' est la meilleure structure que vous pouvez avoir pour vos projets. Une section, puis un conteneur à l'intérieur, puis vous pouvez avoir votre contenu. A l'intérieur de ce conteneur, nous avons deux autres cadres ici, ce seront nos blocs Div, comme vous pouvez le voir, ils ressemblent à des boîtes ici. Ici, à l'intérieur de ce conteneur, nous aurons deux boîtes, deux blocs Div. L' un va contenir notre contenu, le gauche, et le second va contenir nos images. A l'intérieur du contenu, nous aurons un titre, nous aurons un bloc de texte, qui est notre description, puis deux boutons différents. Un bouton primaire, tout comme celui que nous avons créé pour notre barre de navigation, et puis c'est un bouton texte, et enfin pour ce conteneur droit ou disons bloc DIV image, nous aurons deux cartes différentes, cartes 1, carte 2 et enfin l'image du héros, qui est cette image principale. Vous pouvez demander, pourquoi ne pouvons-nous pas exporter ces trois éléments différents en une seule image ? C' est une excellente question. Nous pourrions le faire, ce serait beaucoup plus simple si je le faisais. Cependant, lorsque nous commençons à travailler avec des animations et des interactions, nous allons animer tous ces éléments ensemble un par un. Si je les exporte comme une seule image, ce serait impossible. Par conséquent, j'ai exporté ces éléments séparément, que nous pourrions avoir plus de flexibilité en ce qui concerne les interactions et les animations. Allons à notre projet de flux web, et la première chose que nous devons créer est une section. Je vais aller à la section ajouter et laissez-moi glisser et déposer une section ici, et la placer juste en dessous de ma barre de navigation juste comme ça. Je vais lui donner une classe appelée section, et c'est la classe que nous allons utiliser pour toutes nos sections. Par conséquent, il est très important de spécifier les propriétés qui vont être utilisées globalement pour toutes nos sections. Nous ne allons pas modifier les propriétés de taille ici, cependant, je vais changer le rembourrage de cette section, le remplissage gauche et droit. Pourquoi ? Parce que toutes nos sections vont avoir un rembourrage gauche et droit. Si je maintiens la touche Alt ou Option enfoncée de mon clavier et que je clique simplement et que je fais glisser, je peux ajouter un remplissage de 30 pixels à gauche et à droite. Nous ne pouvons rien voir ici, mais quand nous allons à d'autres points d'arrêt, ce remplissage que nous avons ajouté ici empêchera le contenu de sortir de la fenêtre. Ce rembourrage est si important. Quand nous commencerons à parler de réactivité, nous verrons l'impact du rembourrage que j'ai ajouté ici. Une autre chose que je vais mentionner ici est qu'en ce moment je travaille avec un grand écran. C' est pourquoi ici, il dit 1600 pixels et il dit 100 pour cent. Si vous travaillez avec un appareil plus petit, comme un ordinateur portable de 13 pouces ou même des ordinateurs portables plus grands, il est probable que vous ne verrez pas exactement la toile comme je vois ici en raison des pixels disponibles de la taille de votre écran. Cependant, je vais vous montrer un très bon tour. Si vous travaillez, disons avec un petit appareil comme un ordinateur portable de 13 pouces, vous pouvez simplement cliquer ici et ensuite vous pouvez réduire votre projet afin de voir ce que je vois ici. C' est juste à des fins de prévisualisation, donc cela n'affecte pas votre projet principal et la taille de vos éléments. Toutefois, si vous souhaitez voir à quoi ressemble votre projet sur des appareils plus volumineux, vous pouvez le réduire. Par exemple, vous pouvez définir l'échelle à 70 %. Que devons-nous faire d'autre ? Eh bien d'abord, je vais aller de l'avant et ajouter une classe combo à cette section parce que ce sera notre section héros. Je vais écrire héros, voilà, et dans cette section, je vais avoir besoin d'un conteneur. Si je vais juste faire glisser et déposer un Div noir ici et le mettre dans cette section, assurez-vous qu'il est imbriqué à l'intérieur, je peux lui donner un conteneur de classe, et nous y allons. Nous avons notre largeur maximale de 1100 pixels que nous avons définie pour le conteneur que nous avons utilisé pour notre barre de navigation. Une chose importante que je vais mentionner ici est que si vous voulez ajouter les éléments beaucoup plus rapidement, vous pouvez simplement utiliser la touche Commande ou Cold K raccourcis sur votre clavier, et ici en utilisant ce QuickFind, vous pouvez recherchez n'importe quel élément que vous voulez. Disons que je vais chercher un bloc Div. Je peux écrire Div, et on y va. Si j'appuie sur « Entrée », ce bloc Div sera ajouté à l'intérieur de ce conteneur. Laisse-moi enlever ça. Je vais enlever ce conteneur aussi, et je vais vous montrer une fois de plus comment ça fonctionne. abord, je vais sélectionner ma section car à l'intérieur je vais ajouter un conteneur. Ensuite, je vais appuyer sur « Command K » ou « Control K », et voici, nous allons écrire le bloc Div « Enter ». Ce bloc Div a été ajouté à ma section, puis je vais lui donner un conteneur de classe, et nous avons terminé. Notre conteneur est prêt, notre section est prête cependant, nous n'avons pas assez d'espacement entre notre barre de navigation et la section. Allons à notre dossier de conception. Si je sélectionne cette section de héros et que je maintiens la touche Option ou Alt enfoncée sur mon clavier, vous pouvez voir que nous avons une marge supérieure de 100 pixels pour cette section de héros. Je vais sélectionner cette section, et puisque nous avons ajouté ces classes de combo héros, quand j'ajoute une certaine marge à cela, cela n'affectera pas les propriétés de notre section, cela affectera simplement les propriétés de ces combo héros classe. Je vais régler la marge supérieure à 100 pixels, et voilà, il a été poussé vers le bas. De quoi avons-nous besoin à l'intérieur de ce conteneur ? Eh bien, ce conteneur devrait avoir deux blocs Div. Alors allons de l'avant et ajoutons deux blocs Div. Je vais appuyer sur « Command K » pour utiliser le QuickFind, et je vais écrire Div, on y va. Il y a un bloc Div à l'intérieur et j'ai besoin d'un bloc Div de plus, donc je vais sélectionner à nouveau ce conteneur et appuyer sur « Command K » ou « Control K » et écrire Div. Maintenant, j'ai deux blocs Div différents à l'intérieur de ce conteneur. Cependant, comme vous pouvez le voir, chacun de ces blocs Div prend toute la largeur de son parent, qui est ce conteneur, et ce n'est pas ce que nous voulons. Je vais sélectionner le conteneur, puis je vais changer son paramètre d'affichage en flexbox. Pourquoi ? Jetons un coup d'oeil à notre dossier de conception. Ici, comme vous pouvez le voir à l'intérieur de ce conteneur, nous avons deux blocs Div, nous les avons créés, mais ils sont assis l'un à côté de l'autre, pas sur l'autre. Si vous vous souvenez, lorsque nous avons une mise en page unidimensionnelle, nous pouvons utiliser la flexbox pour aligner nos blocs Div facilement. C' est ce que je vais faire. J' ai besoin de sélectionner l'élément parent, et je vais changer son paramètre d'affichage de bloc à flexbox. Maintenant, nous avons une direction horizontale, bon, alors l'alignement est réglé sur étirer, et je vais changer la justification au centre, mais ils ont l'air trop petits. C' est très bien parce que nous allons leur donner des cours. Mais voyons ce qu'on a fait ici. Nous avons sélectionné le conteneur et nous avons modifié son paramètre d'affichage en flexbox. Cependant, il y a une erreur ici. Nous n'avons pas ajouté de classe combo à cette classe principale, et c'est faux. Pourquoi ? Parce que plus tard, si vous voulez utiliser le même conteneur et que nous ne voulons pas utiliser une flexbox avec ces propriétés, nous devons remplacer ces propriétés en utilisant une classe combo. J' ai intentionnellement fait cette erreur pour vous montrer pourquoi il est important d'utiliser des classes combo. Maintenant, je vais annuler l'opération Commande Z ou Control Z encore et encore, et ici nous avons notre conteneur, et maintenant avant de changer son paramètre d'affichage en flexbox, je vais lui donner une classe combo. Je vais écrire héros. Ensuite, je vais changer son paramètre d'affichage en pointes flexibles et je vais changer sa justification au centre. Maintenant, tout a l'air super. Je vais sélectionner le premier bloc div, et donnons-lui une classe. Je vais écrire Hero__Content, parce que ce bloc div va contenir notre contenu. Pour le second, je vais le sélectionner et lui donner une nouvelle classe. Je vais écrire Hero__Image. Tout comme ce que nous avons dans notre projet Figma ; nous avons du contenu et de l'image. Commençons par le contenu. De quoi avons-nous besoin ici ? Il nous faut un titre, un titre. Ensuite, nous avons une description juste en dessous de cela et deux boutons ; un bouton conteneur et un bouton texte. Je vais commencer par le cap. Laissez-moi aller de l'avant et faites glisser et déposer un titre ici, juste comme ça, assurez-vous qu'il est imbriqué à l'intérieur. Pour cette rubrique, je vais choisir H_1. C' est très important. Pour la section héros, vous devez toujours utiliser le H_1. Il est important quand il s'agit d'optimisation SEO, nous parlerons de ces détails plus tard. Mais pour l'instant, vous avez juste besoin de savoir que pour votre section héros, vous devriez toujours utiliser H_1 et non H_2, ou tout autre titre. Cool. Maintenant, pour ce titre, je vais lui donner un cours. C' est juste Hero__ Heading. Nous devons modifier ses propriétés comme les propriétés topographiques, la couleur, la taille de la police, etc. Avez-vous remarqué que pour chaque calque de texte, nous répétons le même processus ? Nous changeons la police en Roboto. Pouvons-nous omettre cette étape en quelque sorte ? Oui, on peut. Tu te souviens quand j'ai parlé du corps toutes les pages tag ? Nous définissons la couleur de l'arrière-plan là. Nous pouvons également définir les propriétés de topographie par défaut là, puis nous pouvons les remplacer si nous avons besoin de modifier quelque chose. Puisque je sais que pour ce projet, je vais utiliser une seule police, Roboto, je peux simplement aller de l'avant et sélectionner mon élément body ici, puis je vais aller au sélecteur et je vais choisir body toutes les pages. Si je passe à la topographie, vous pouvez voir que la police est définie sur Arial. Laissez-moi aller de l'avant et changez ça pour Roboto. Dès que je le change ici, vous pouvez voir que la police de ce titre a également été modifiée. Pourquoi ? Parce que les en-têtes, les paragraphes et la zone de texte par défaut recherchent les parents et leurs parents en ce moment est le corps. Ils héritent des propriétés que nous avons définies pour le tag body all pages, sauf si nous les remplacons. Nous ne modifierons pas la taille de la police car la plupart du temps nous devons remplacer la taille de la police. Aussi, je vais changer sa couleur à notre, disons sombre neutre, parce que pour la plupart de notre texte, nous devons utiliser notre couleur sombre neutre. Il est bon de définir la typographie par défaut ici aussi. Maintenant, je peux me diriger vers mon bloc div de contenu de héros et je n'ai plus besoin de changer les polices, je peux les écraser quand je veux. Mais si je clique sur cette police ici, vous pouvez voir que la valeur vient du corps toutes les pages, parce que nous définissons quelques propriétés par défaut là. Voyons de quelle taille de police avons-nous besoin ici. Je vais aller à mon projet Figma, je vais sélectionner ce texte. Il dit H_1 et ici H_1 est 60 points. Je vais le régler à 60 pixels ici, juste comme ça. Et la hauteur de la ligne ? Je l'ai généralement fixé à 130 ou 150 pour cent. Pour ce titre, puisque nous avons une grande taille de police, je vais la définir à 130%, juste comme ça. Ensuite, je vais aller de l'avant et copier ce texte de mon dessin. Si vous double-cliquez sur ces calques, vous pouvez les sélectionner et les copier, collez-les ici. On y va. Mais comme vous pouvez le voir, ce blog div contenu héros prend trop d'espace ici. Si je me dirige vers mon fichier de conception et que je sélectionne ce groupe de contenu, vous pouvez voir que la largeur est définie sur 530 pixels. Par conséquent, je vais aller de l'avant et sélectionner ce bloc div de contenu de héros, et je vais lui donner une largeur maximale. Il ne devrait pas être plus grand que 530 pixels. Je vais le régler à 530 pixels et on y va. De quoi d'autre avons-nous besoin ? Juste sous cette rubrique, nous allons avoir besoin d'une description, comme vous pouvez le voir. Je peux faire glisser et déposer un paragraphe ou un bloc de texte. Je vais aller avec un bloc de texte. Je vais le glisser et le déposer ici. Ce bloc de texte, comme vous pouvez le voir, utilise la police Roboto par défaut que nous avons définie pour notre balise body all pages. Cela va accélérer notre processus de conception. Et la taille ? Je vais changer sa taille à 20 pixels. Si je vais à mon fichier de conception ici, vous pouvez voir qu'il utilise body regular et body regular a 20 pixels. Je vais le mettre à 20. Permettez-moi d'aller de l'avant et de copier et coller ce texte ici. Cool. Mais comme vous pouvez le voir, la hauteur de la ligne ne suffit pas. Je vais changer votre taille à 150 pour cent puisque la taille de la police n'est pas si grande et c'est trop long. Si je me dirige vers mon projet de conception ici et que je sélectionne ce texte, vous pouvez voir que c'est une largeur est définie à 435 pixels. Je dois faire la même chose pour ce bloc de texte aussi. Je vais définir une largeur maximale de 400 et 35 pixels, et maintenant il a l'air génial. Enfin, je vais changer de couleur. Pour ce texte, j'ai utilisé un support neutre. Je vais utiliser la même chose ici. Je vais utiliser un des échantillons ici, médium neutre. On y va. Cool. De quoi d'autre avons-nous besoin ? Il nous faut deux boutons. Afin d'organiser ces deux boutons, nous devons créer un bloc div et à l'intérieur de ce bloc div nous pouvons mettre nos boutons. Laissez-moi aller de l'avant et sélectionnez ce bloc div contenu héros, et je vais créer un nouveau bloc div commande K ou contrôle K et laissez-moi écrire div. On y va. Voici notre bloc div et je vais le nommer hero__buttons. Cool. À l'intérieur, je vais aller de l'avant et ajouter deux boutons. Un bouton contenu ou ce bouton principal et un bouton texte. Permettez-moi de sélectionner ce bouton principal dans la barre de navigation. Je vais frapper Command C ou Control C et je vais sélectionner ces boutons héros div bloc et je vais frapper Command V ou Control V pour le coller ici. On y va. Nous avons notre bouton Contactez-nous ici et il indique le bouton principal. Cool. Je vais aller de l'avant et changer ce texte pour entrer en contact. Laisse-moi écrire entrer en contact. Aussi, je vais avoir besoin d'un bouton texte. Laissez-moi aller de l'avant et chercher un lien texte. Je vais le glisser et le déposer ici à l'intérieur du bloc div des boutons héros, juste comme ça. Par défaut, puisqu'il s'agit d'un lien de texte, vous pouvez voir qu'il a un style et une décoration. On va les remplacer et je vais lui donner un cours. Écrivons le soulignement de héros, le soulignement, le bouton de texte. On y va. Laisse-moi faire défiler ici. La police a l'air bien. Le poids va être de 500 ou moyen. La taille de la police sera de 17 pixels. Si je vais à mon fichier de conception ici, il utilise le médium de titre et le médium de titre a une taille de police de 17 points. Et la couleur ? La couleur va être neutre, moyenne, et une décoration par défaut est définie pour souligner. Je vais le mettre à zéro. Enfin, permettez-moi de modifier ce texte pour voir notre travail. Maintenant, j'ai deux options. Je peux soit sélectionner ce bloc de boutons de héros div et changer le paramètre d'affichage à Flexbox et juste l'aligner et ajouter une marge à ce bouton ou je peux juste garder le paramètre d'affichage de bloc et juste ajouter quelques marges de droite à ce Get dans le bouton tactile. Puisque ces deux boutons vont être placés l'un à côté de l'autre, je n'ai pas besoin d'une Flexbox. Je peux simplement sélectionner ce bouton et ajouter quelques marges. Le côté gauche est presque prêt. La seule chose qui reste est d'ajouter un peu d'espacement. Je vais sélectionner cette rubrique ici. Je vais maintenir la touche « Option » ou « Alt » enfoncée. Si je survole cette description, vous pouvez voir que j'ai une marge inférieure de 30 pixels. Si je sélectionne cette description ici, comme vous pouvez le voir, j'ai une marge inférieure de 40 pixels, et pour ce bouton, j'ai une marge droite de 40 pixels. Allons de l'avant et changeons leurs marges. Je vais sélectionner cette rubrique. Si je clique dessus, vous pouvez voir que la valeur provient de tous les en-têtes H_1. Nous n'avons pas parlé de cette balise, mais cela fonctionne comme la balise body all pages. Je vais supprimer la marge supérieure. Je vais le mettre à zéro, et je vais modifier la marge inférieure à 30 pixels. Maintenant, laissez-moi sélectionner cette description. Nous n'avons pas changé le nom de la classe, donc je vais modifier le nom de la classe ici pour la description du héros. Le soulignement du héros, la description du soulignement. Maintenant, je peux ajouter un rembourrage inférieur de 40 pixels, juste comme ça. Ici, je vais sélectionner ce bouton, mais je ne peux pas modifier sa marge pour l'instant. Pourquoi ? Parce qu'en ce moment j'utilise la classe de bouton primaire. Si j'ajoute une marge ici, cela affectera également le bouton Contactez-nous dans la barre de navigation. Laisse-moi te montrer. Si j'ajoute juste quelques marges droites. On y va. Tu vois ça ? Ce n'est pas ce qu'on veut. Que dois-je faire ? Oui, vous avez raison. J' ai besoin d'une classe combo. Ici, je vais ajouter une classe combo, et je vais écrire héros. Maintenant, je peux ajouter une marge droite de 40 pixels sans affecter le bouton Contactez-nous. Maintenant, il est temps de travailler sur le deuxième bloc div, qui est le bloc div image héros. Comme vous pouvez le voir ici, nous allons avoir besoin de trois images différentes. Laissez-moi sélectionner cette image de héros et puis je vais ajouter trois images différentes ici. Laissez-moi appuyer sur la commande K et je vais chercher l'image, Entrée. Je vais choisir l'image et d'ici je vais chercher l'image du héros. On y va. Ça a l'air bien. Maintenant, je vais avoir besoin de deux images de plus pour mes cartes. Laissez-moi sélectionner ce bloc div image de héros. Je vais frapper la commande K, ou le contrôle K. Laissez-moi écrire l'image. Super, c'est là. Je vais choisir la Carte 1. Laissez-moi chercher la carte 1. On y va. C'est juste là. C' est trop grand. On va arranger ça, et je vais avoir besoin d'une carte de plus. Laissez-moi sélectionner cette image et je vais lui donner une classe. Écrivons le trait de soulignement du héros, le soulignement de la Carte 1. Je peux simplement le réduire comme ça ou alternativement, je peux cliquer sur ce « Paramètres » ici et je vais définir sa largeur à 380 ou 375 pixels. Ça a l'air bien. Mais pourquoi cette boîte semble trop grande, mais l'élément n'est pas si grand ? C' est parce que j'ai utilisé des ombres portées pour cette carte et que j'ai exporté ça. C' est pourquoi nous avons cette grande limite. Maintenant, je vais sélectionner ce bloc div image héros, une fois de plus, appuyez sur Command K ou Control K et cherchez l'image. On y va. Je vais choisir la Carte 2 de mes actifs. Ici, c'est. Je vais lui donner un autre cours. Écrivons le trait de soulignement du héros, le soulignement de la Carte 2. Maintenant, je vais le réduire comme ça. Donnons-lui une largeur spécifique de 375 pixels. Incroyable. Mais pouvez-vous voir comment ils sont placés les uns sur les autres ? Ce n'est pas ce qu'on veut. Comment pouvons-nous réparer ça ? Eh bien, vous souvenez-vous quand nous avons parlé différentes options de positionnement comme statique, relatif , absolu, fixe et collant, je vous ai dit que si nous voulons créer des mises en page modernes, nous allons en avoir besoin. C' est exactement ce que nous allons faire. Nous allons changer l'option de poste afin d'obtenir ce que nous voulons. Ici, comme vous pouvez le voir, ces deux cartes flottent. Par conséquent, je vais mettre leur position à l'absolu. Mais comme vous vous en souvenez, afin de définir la position sur absolue, d'abord, nous devons définir sa position parent sur relative. Le parent est ce bloc div image de héros et je vais changer sa position en relative. Rien ne se passe. Mais si je sélectionne cette carte de héros 1 et que je change sa position en absolu. On y va. Maintenant, il est relatif au bloc div image héros. Je vais faire la même chose pour cette carte. Je vais changer sa position en absolu. Joli. Maintenant, je peux tout simplement contrôler leur position ici. Commençons par la Carte 1. Je vais sélectionner la Carte 1, et elle devrait être placée ici. Je vais sélectionner en haut à gauche et puis je vais modifier la marge gauche comme ça. Je peux le mettre à moins 19 pour cent, et pour le haut, je vais le mettre à, disons, moins 2 pour cent. Ça a l'air génial. Et celle-là ? Je vais sélectionner la Carte de héros 2. Je vais changer sa position en bas à droite, puis laissez-moi la déplacer comme ça. Réglons la position inférieure à 22 pour cent et je peux modifier la marge droite ou gauche ici. Ça n'a pas d'importance. Laisse-moi te montrer. C' est comme ça. Si j'utilise le bon, j'ai besoin de valeurs négatives. Si j'utilise la gauche, j'aurai besoin de valeurs positives comme celle-ci. Je préfère utiliser le bon. Je vais le mettre juste ici. Ça a l'air bien. Comparons-le avec notre design. Ça a l'air bien. Cependant, ce bloc div de contenu n'est pas aligné avec ce bloc div droit, ce bloc div image. Comment puis-je réparer ça ? Eh bien, je peux sélectionner ce contenu de héros et je peux lui donner des marges supérieures. Laissez-moi vous montrer comment ça marche. Juste comme ça. Si je le déplace comme ça, je peux définir sa marge supérieure à 114 pixels. Ça a l'air bien. Je pense que maintenant ils sont parfaitement alignés. Les gars, c'est tout pour cette vidéo, j'espère que ça vous a plu. Si vous avez des questions, faites-le moi savoir. se voit dans la prochaine. 45. Section des clients: Hé, dans cette vidéo, on va commencer à créer cette section client. Comme vous pouvez le voir dans la section client, nous allons avoir différents logos. En fait, nous devons placer cinq logos différents. Par défaut, ces logos doivent être en noir et blanc, et lorsque l'utilisateur survole, ils doivent devenir colorés. De quoi avons-nous besoin pour cette section ? Comme vous pouvez le voir ici, nous avons besoin d'une autre section, et à l'intérieur, nous avons besoin d'un conteneur qui inclut nos logos. Chaque logo doit être placé à l'intérieur d'un bloc div. Commençons. Tout d'abord, je vais aller de l'avant et créer une nouvelle section. Je vais sélectionner le corps et je vais frapper la commande K ou le contrôle K et cherchons la section. On y va. Une nouvelle section a été ajoutée. Ensuite, comme d'habitude, nous devons ajouter la classe de section à cette section. Laissez-moi chercher la section. Super, notre section est prête. Maintenant, à l'intérieur de cette section, nous avons besoin d'un conteneur. Alors que cette section est sélectionnée, je vais frapper la commande K ou le contrôle K, et je vais chercher le bloc div. On y va et je vais lui donner la classe des conteneurs, fantastique. Notre conteneur est prêt, notre section est prête aussi. Mais cette section n'a pas encore de marge, donc je vais aller de l'avant et vérifier sa marge ici. Il doit avoir une marge supérieure de 130 pixels. Par conséquent, ici pour cette section, je vais ajouter une classe combo appelée logos. Pour notre section héros, nous avons ajouté la classe combo héros. Pour cette section, je vais ajouter des logos, puis je vais ajouter 130 pixels de marge supérieure. On y va. Maintenant, nous avons assez d'espace pour travailler. A l'intérieur de ce conteneur, nous avons besoin d'avoir différents blocs div. En fait, nous avons besoin de cinq blocs de div différents. Comment devrions-nous aligner ces blocs div ? Eh bien, nous avons deux options à choisir. Option 1, nous pouvons transformer ce conteneur en une boîte flexible. Option 2, nous pouvons le transformer en une grille. Eh bien, une flexbox est une bonne option, mais je vais aller avec la grille, même si c'est une mise en page unidimensionnelle. Pourquoi est-ce que je vais choisir la grille ? Parce que plus tard, quand il s'agit de réactivité, lorsque nous voulons rendre notre page web réactive, il serait beaucoup plus facile de travailler avec grille. Je vous le prouverai dans nos futures leçons. Mais pour l'instant, je vais sélectionner ce conteneur et je vais ajouter un nouveau bloc div à l'intérieur. Je ne vais pas transformer ce conteneur en grille, je vais ajouter un nouveau bloc div à l'intérieur, juste comme ça, et donnons-lui une classe. Je vais écrire Grid__Logos. Je vais transformer ce bloc div en une grille juste comme ça. Combien de lignes et combien de colonnes avons-nous besoin ? En gros, nous n'avons besoin que d'une rangée et de cinq colonnes différentes, comme vous pouvez le voir ici. Je vais supprimer la deuxième ligne ici, et je vais ajouter trois colonnes supplémentaires pour obtenir cinq colonnes au total. Cool, notre grille est prête. Maintenant, il est temps d'ajouter nos logos ici. Comme je l'ai mentionné précédemment, chaque logo devrait être mis à l'intérieur d'un bloc div. Je vais sélectionner cette grille et je vais appuyer sur la commande K ou le contrôle K sur mon clavier, puis ajoutons un bloc div ici. Maintenant, notre bloc div prend la première cellule ici, et c'est exactement ce que nous voulons. Je vais l'appeler Client__Logo. Cool. Enfin, à l'intérieur de ce bloc div, je vais ajouter une image. Voyons voir la commande K ou le contrôle K, et je vais chercher l'image. On y va, et choisissons les logos ici. Par défaut, les logos sont colorés. C' est très bien parce que plus tard, nous allons les rendre noirs et blancs, et les rendre interactifs. Mais pour l'instant, je vais sélectionner le logo Airbnb ici. Cool. Ensuite, je vais sélectionner ce bloc div et je vais lui donner une largeur et une hauteur spécifiques. Ici, si je sélectionne ce premier logo, si je sélectionne cette case ici, vous pouvez voir que la largeur est de 150 pixels et la hauteur est de 96. Réglons sa largeur à 150 pixels et sa hauteur à 96. Ensuite, je vais tourner ce bloc div en flexbox. Je vais l'aligner sur le centre et je vais le justifier au centre aussi. C' est exactement ce qu'on cherchait. Que devons-nous faire d'autre ? Notre premier logo est prêt. Je vais copier ce bloc div, appuyer sur Command C ou Control C, puis appuyer sur Command V ou Control V quatre fois pour obtenir cinq logos différents. Ensuite, je vais aller de l'avant et modifier l'image de chaque logo ici. Je vais sélectionner celui-ci, je vais le changer à Google. Je vais aller de l'avant et sélectionner celui-ci, je vais le changer en Microsoft. Je vais sélectionner la suivante et je vais la changer pour FedEx. Enfin, je vais sélectionner cette dernière image et la changer en Amazon. Fantastique. Les gars, c'est tout pour cette vidéo, j'espère que ça vous a plu. Je te vois dans la prochaine vidéo. 46. Section Projets: Dans cette vidéo, nous allons créer ensemble une section projets récents. Comme vous pouvez le voir, cette section a un conteneur qui contient cet en-tête et aussi cette section inférieure, la section projet. Cette section de projet, ou disons Projects_Wrapper a trois projets différents, et chaque projet a des éléments différents, comme une image en haut, un titre, un sous-titre, et enfin, ce lien en savoir plus, Je vais aller de l'avant comme d'habitude créer d'abord une section. Laissez-moi sélectionner mon corps et appuyez sur la touche « Commande » ou « Contrôle » et cherchez la section. On y va. Notre section a été ajoutée. Alors je vais lui donner le cours de section. Je vais écrire une section. Enfin, je vais lui donner une classe combo, qui va s'appeler projets. Comme vous pouvez le voir, puisqu'il n'y a rien à l'intérieur de cette section, elle ne prend pas de place ici et c'est compréhensible. Maintenant, pendant que cette section est sélectionnée, je vais appuyer sur la touche « Commande » ou sur la touche « Contrôle », et je vais chercher un bloc div. Maintenant, un bloc div est à l'intérieur de cette section et je vais lui donner la classe conteneur. On y va. Maintenant, notre conteneur est prêt aussi. Enfin, je vais donner à cette section quelques marges supérieures. Laissez-moi jeter un coup d'oeil à mon design ici. Si je sélectionne cette section de projet et si je maintiens la touche « Option » ou « Alt » enfoncée sur mon clavier, vous pouvez voir qu'elle a une marge supérieure de 200 pixels. Je vais aller de l'avant et lui donner une marge supérieure de 200 pixels ici aussi. On y va. Maintenant, de quoi avons-nous besoin ? A l'intérieur de ce conteneur, nous allons avoir besoin d'un titre et ensuite nous avons besoin de l'emballage de ce projet. D' abord, laissez-moi chercher un cap. Je vais appuyer sur la touche « Commande » ou « Contrôle », et je vais écrire le titre. Assurez-vous de sélectionner votre conteneur pourquoi vous recherchez vos éléments. Parce que ces éléments seront imbriqués à l'intérieur de l'élément actuellement sélectionné. Je vais cliquer sur cette rubrique. On y va. Maintenant, cette rubrique est à l'intérieur de mon conteneur. Enfin, je vais changer H1 en H3. Ce n'est pas juste parce que fondamentalement il devrait être H2 et je vais l'expliquer plus tard. Mais je vais faire cette erreur intentionnellement parce que plus tard, quand nous parlerons de l'accessibilité, je vais vous montrer pourquoi choisir la bonne rubrique compte. Mais pour l'instant gardons H3, et je vais lui donner un cours. Je vais écrire des projets__head. Ensuite, je vais modifier certaines de ses propriétés topographiques. Je vais changer sa taille de police de 24 pixels à 40. Enfin, permettez-moi de copier ce texte et de le coller là-bas. Projets récents, notre rubrique est prête. De quoi d'autre avons-nous besoin maintenant, juste sous cette rubrique, nous allons avoir le Projects_Wrapper. Je vais sélectionner ce conteneur et je vais appuyer sur « touche de commande ou « Contrôle » et chercher un bloc div comme ça. Je vais lui donner une classe, appelons-le projects__wrapper, et maintenant ces deux éléments sont placés à l'intérieur de ce conteneur. Cependant, ce conteneur a un paramètre d'affichage de bloc. Je vais le transformer en flexbox, mais avant de le faire, assurez-vous de lui donner une classe combo. C' est si important. Pourquoi ? Parce que, comme je l'ai mentionné précédemment, vous n'ajoutez pas de classe combo et vous modifiez le paramètre d'affichage ou l'une de ces propriétés ici, vous apportez les modifications globalement. Si je le tourne en flexbox, vous pouvez voir que ces logos sont foirés. Si je change la direction à la verticale, tout semble gâché et ce n'est pas ce que nous voulons. Ici, je vais sélectionner le conteneur et je vais lui donner une classe combo. Je vais écrire des projets. Maintenant, je peux changer le paramètre d'affichage flexbox et je vais changer la direction de l'horizontale à la verticale. Changeons la justification à l'espace entre aussi. moment, quand je choisis que rien ne se passe, mais plus tard, quand nous ajoutons du contenu, notre Projects_Wrapper, et aussi ajouter des marges à cette rubrique, nous verrons que la différence est juste. Je vais sélectionner ces Projects_Wrapper, et je vais lui donner une marge supérieure. Permettez-moi d'ajouter 70 pixels de marge supérieure. Si je jette un coup d'oeil à mon design ici, j'ai aussi 70 pixels de marge supérieure. A l'intérieur, nous allons avoir trois cartes différentes. Par conséquent, je vais avoir besoin d'un bloc div principal. C' est notre carte principale et à l'intérieur, nous allons avoir besoin de deux blocs div supplémentaires, un pour l'image supérieure et le second pour le contenu inférieur. Commençons par ajouter le bloc div principal. Wireless Projects_Wrapper est sélectionné. Je vais appuyer sur la touche « Commande » ou « Contrôle », et je vais chercher le bloc div. Maintenant à l'intérieur il y a un bloc div et je vais lui donner une classe. Écrivons Project_Card, comme ça et cette Project_Card prend toute la largeur et la hauteur de ses parents, qui est ce Project_Wrapper. Ce n'est pas ce qu'on veut. Nous voulions avoir une largeur maximale et aussi une hauteur spécifique. Si je vais à mon fichier de conception ici, et si je sélectionne ce projet 1, par exemple, vous pouvez voir que cette carte a une largeur de 340 pixels et une hauteur de 444 pixels. Je vais définir la largeur maximale à 340 pixels et la hauteur à 444 pixels. Tout comme ça, notre Project_Card est prêt. Nous ne allons pas le dupliquer maintenant parce que nous allons d'abord le concevoir. Plus tard, nous le dupliquerons. De quoi avons-nous besoin ici ? A l'intérieur, nous aurons besoin de deux blocs div différents, comme je l'ai mentionné précédemment, un pour l'image et le second pour le contenu. Pendant qu'il est sélectionné, je vais appuyer sur la touche « Commande » ou sur la touche « Contrôle », et je vais chercher un bloc div. Notre premier bloc div est prêt et je vais lui donner une classe. Appelons ça le project__image, juste comme ça. A l'intérieur, nous aurons besoin d'ajouter un élément d'image. Alors que cette image de projet, bloc div est sélectionné, je vais chercher un composant d'image ici. Laissez-moi chercher une de ces images. Numéro 1, de mes actifs. Je vais sélectionner cette image dans mon fichier de conception et comme vous pouvez le voir, la hauteur est définie à 240 pixels. Par conséquent, je vais aller de l'avant, et ici je vais lui donner un cours d'abord. Écrivons project__card_image, comme ça. Enfin, je vais régler sa hauteur à 240 pixels. Permettez-moi de modifier les pieds du champ pour couvrir de cette façon je peux m' assurer qu'il couvrira parfaitement le bloc div image du projet. Aussi, je vais lui donner une largeur de 100 pour cent. Je vais mettre sa largeur à 100 pour cent. De cette façon, il prendra toute la largeur de son parent, qui est cette image de projet et aussi la Project_Card. La première partie est prête. Maintenant, pendant que ce bloc div Project_Card est sélectionné, je vais ajouter un autre bloc div ici. On y va. Je vais lui donner une classe et appelons-le Project__Content. abord, je vais m'assurer que ce bloc Div de contenu de projet prend toute la hauteur disponible ici. Comme vous pouvez le voir, nous avons un peu d'espace, mais ce bloc Div de contenu de projet ne couvre pas tout cet espace. Par conséquent, je vais sélectionner cela et si je me dirige vers la section latérale, je peux régler sa hauteur à 100 pour cent, juste comme ça. Mais il y a un problème. Comme vous pouvez le voir maintenant, c'est en dehors de notre carte de projet. Pourquoi ? Parce que cette carte de projet a une hauteur spécifique et que le paramètre d'affichage est défini pour verrouiller. Afin de résoudre ce problème, je vais sélectionner cette carte de projet et je vais changer son paramètre d'affichage de bloc à une boîte flexible, et ça va être vertical parce que nous aurons deux enfants différents à l'intérieur qui devrait empiler les uns sur les autres verticalement. Maintenant, tout a l'air bien. Nous avons le contenu du projet, nous avons aussi l'image de la carte de projet. Si je vais à mon fichier Design, vous pouvez voir que cette carte a un fond blanc, mais ici nous n'avons pas de fond. Laissez-moi sélectionner ma carte de projet. Alors si je passe à la couleur, je vais écrire du blanc ici. On y va. Maintenant, nous avons le fond blanc. Dans le contenu de ce projet, nous aurons besoin d'un titre, un sous-titre et d'un lien En savoir plus. Comment pouvons-nous structurer cela ? Laisse-moi voir. Si je transforme ce contenu de projet en une boîte flexible et à l'intérieur je mets un bloc Div et un bloc Link, je reçois facilement ce que j'ai ici. Comment ? Lorsque je transforme ce contenu de projet en une boîte flexible, je peux changer sa justification facilement, alors je peux atteindre exactement la même conception. Laissez-moi vous montrer comment ça marche. heure actuelle, ce contenu de projet a le paramètre d'affichage de bloc et il n'y a rien à l'intérieur. Pendant qu'il est sélectionné, je vais appuyer sur la commande K ou le contrôle K et je vais ajouter un bloc Div ici, et je vais lui donner une classe. Allons de l'avant et créons une classe. Je vais écrire le projet__text, et à l'intérieur de ce bloc Div, je vais avoir deux blocs de texte différents. Je vais appuyer sur la commande K et je vais chercher le bloc de texte. On y va. C'est le premier. Laisse-moi lui donner un cours. Je vais écrire project__title, et je vais modifier ses propriétés topographiques. La police sera Roboto, le poids sera 500 ou moyen. La taille va être de 24 pixels, juste comme ça, la hauteur de la ligne va être de 150 pour cent, et la couleur semble bien. Maintenant, je vais aller de l'avant et copier et coller ce titre. Laissez-moi choisir cela, copiez-le, et collez-le ici, simplifiez. C' est le nom du projet. Ce sont des projets fictifs, en passant. Cool. Notre titre est prêt. Maintenant, je vais modifier son espacement. Je vais lui donner des marges. Je vais maintenir la touche d'option et la touche Maj enfoncée sur mon clavier, et ajoutons une marge égale à tous les côtés. Je vais lui donner une marge de 30 pixels. Peut-être que je pourrais réduire la marge inférieure à 20 pixels. Maintenant, je vais copier ce titre commande C ou contrôle C, commande V ou contrôle V. Ensuite, je vais ajouter ma description ou sous-titre ici. Cependant, assurez-vous de dupliquer votre classe en premier. C' est si important parce que nous allons modifier ses propriétés. Sinon, nous changerons également le titre du projet. abord, cliquez sur cette petite flèche, dupliquez cette classe et changez son nom en description du projet. Comme cette description. La première chose que je vais faire est de supprimer la marge supérieure, je n'en ai pas besoin. Je vais maintenir la touche d'option de mon clavier ou de la touche alt enfoncée et cliquer dessus, puis je vais diminuer la marge inférieure à 10 ici. On y va. Maintenant, je peux aller de l'avant et modifier les propriétés topographiques. Commençons par le poids. Ça va être normal. La taille va être de 17 pixels, et la hauteur semble bien. Cependant, la couleur doit être changée en une couleur moyenne mutuelle. Maintenant, je peux simplement copier ce texte et le coller ici. On y va. Maintenant, je vais sélectionner ce texte de projet et je vais changer son paramètre d'affichage pour flex box et m'assurer de changer la direction vers la verticale. Il semble beaucoup mieux maintenant, et assurez-vous qu'il est justifié jusqu'au sommet. Maintenant, alors que le bloc Div contenu du projet est sélectionné. Je vais appuyer sur la commande K touche control K sur mon clavier, et laissez-moi chercher un lien texte. Nous allons créer un lien texte comme ce que nous avons fait ici pour cette section héros. abord, comme d'habitude, nous allons lui donner une classe. Je vais écrire le bouton Lien, juste comme ça. Ensuite, je vais modifier ses propriétés topographiques. Le poids a l'air génial. Je vais modifier sa taille à 17 pixels. Sa couleur va être par défaut primaire et enfin, la décoration devrait être définie sur none et laissez-moi modifier ce texte pour En savoir plus. En savoir plus. Permettez-moi de lui donner quelques marges. Je vais lui donner des marges de gauche, de bas et de droite. Cependant, puisque ce lien de texte utilise le paramètre d'affichage en ligne, je ne peux pas modifier la marge inférieure. Par conséquent, je vais changer son paramètre d'affichage pour verrouiller. Alors je peux lui donner une marge inférieure et droite de 30 pixels, juste comme ça. On y va. Que devrions-nous faire d'autre ? Comme vous pouvez le voir, ils ne sont pas parfaitement alignés. Je vais sélectionner le bloc Div contenu du projet. Comme vous pouvez le voir, le paramètre d'affichage est défini sur bloquer. Je vais le changer en flex box, et je vais changer la direction à la verticale. Joli. Aussi, je vais changer la justification à l'espace entre. Maintenant, ça a l'air beaucoup mieux. Cool. Mais qu'en est-il des autres cartes ? Eh bien, nous allons sélectionner cette carte de projet maintenant et nous allons la copier. Appuyez sur la commande C et collez-le deux fois, appuyez sur la commande V ou le contrôle V. Mais en ce moment ces cartes sont empilées les unes sur les autres verticalement. Ce n'est pas ce que nous voulons. Nous voulons qu'ils s'assoient l'un à côté de l'autre horizontalement. Comment pouvons-nous réparer ça ? Eh bien, nous pouvons sélectionner notre emballage de projets et nous pouvons changer son paramètre d'affichage de bloc à boîte flexible, juste comme ça. Ensuite, nous pouvons changer la justification en espace entre. On y va. On a ce qu'on a ici. Maintenant, je vais aller de l'avant et modifier le contenu. Je vais sélectionner cette image et je vais aller remplacer l'image. Je vais choisir la seconde. Pour le troisième, je vais répéter le même processus. Je vais le changer au numéro 3, et aussi je vais changer le nom de ces projets et aussi leur description. Permettez-moi d'aller de l'avant et de modifier les titres. On y va. Maintenant, je vais modifier la description ici, et pour le troisième projet ici. Nous avons presque fini, mais il y a encore une chose que nous devons faire. Si je jette un coup d'oeil à ce fichier de conception, nous pouvons voir que l'espacement entre ces cartes est inférieur à ce que nous avons ici. Comme nous pouvons le voir, l'écart est beaucoup plus grand ici. Pourquoi c'est ça ? Nous avons déjà fixé une largeur maximale pour cela et une hauteur. C' est la clé, nous définissons la largeur maximale. Par conséquent, nous devons sélectionner la carte de projet, l'un d'eux. Peu importe parce que nous n'avons pas ajouté de classe combo ici. Je vais sélectionner le premier, par exemple. Laissez-moi aller de l'avant et sélectionner le premier. Ensuite, dans le dimensionnement, comme vous pouvez le voir, il dit rétracter si nécessaire. Je vais le changer pour grandir si possible. On y va. C' est réparé. Maintenant, l'espacement ici est égal à ce que nous avons ici. Nous avons un espacement égal entre eux, et ils grandissent quand ils ont assez d'espace. Notre section des projets récents est prête. Cependant, je vais vous montrer une autre façon de créer une telle mise en page en utilisant des grilles. Parce que si vous utilisez une grille au lieu d'une boîte flexible, il serait beaucoup plus facile de rendre votre conception réactive. La seule chose que j'ai besoin de faire est de sélectionner ces projets wrapper, puis au lieu de flex box, je vais le changer en grille. ce moment, j'ai deux lignes et deux colonnes. Je vais supprimer une de ces lignes, et je vais ajouter une colonne de plus. On y va. Ici, je vais modifier l'écart entre nos colonnes à 40 pixels et appuyer sur « Terminé ». C'est ça. Maintenant, au lieu d'utiliser flex box, nous utilisons une grille et nous avons exactement la même disposition. Cependant, en termes de réactivité, cela rendra notre vie beaucoup plus facile. Les gars, c'est tout pour cette vidéo. Notre section des projets récents est également prête. J' espère que ça vous a plu, et je vous verrai dans la prochaine vidéo. On se voit alors. 47. Section Testimonial: Dans cette vidéo, nous allons commencer à créer cette section de témoignages ensemble. Alors voyons ce que nous avons ici. Comme vous pouvez le voir, cette section devrait avoir une largeur plus petite que les autres sections. Ici, notre section de projets récents avait une largeur de 100 pour cent, mais ici cette section devrait avoir une largeur de 1320 pixels. Nous devons garder cela à l'esprit. Voyons ce que nous avons ici. Cette section doit avoir une couleur d'arrière-plan sombre neutre. Aussi, comme vous pouvez le voir, nous avons quelques orbites. Comment vais-je structurer ça ? abord, je vais créer une section avec une largeur maximale de 1320 pixels. Ensuite, je vais lui donner une couleur de fond, cette couleur sombre neutre. Enfin, je vais ajouter une image d'arrière-plan pour ajouter ces orbites. Une fois que notre section est prête, nous ajouterons un conteneur à l'intérieur, et à l'intérieur de ce conteneur , nous ajouterons ces calques de texte, ce titre, ce sous-titre, ou disons description , et enfin, le informations ici. Fondamentalement, ce conteneur devrait être une boîte flexible avec une direction verticale. Pour cette section, tout d'abord, nous allons créer un bloc div avec le paramètre d'affichage flexbox. Ensuite, à l'intérieur, nous allons avoir deux blocs div supplémentaires, un pour cette image de profil et un pour ces deux calques de texte. Le bloc div droit va être une flexbox avec une direction verticale. Last but not least, nous allons placer ces emojis juste autour ce conteneur et nous allons définir leur position à absolu. Enfin, nous devons changer la position de ces sections en relative. D' accord. Ça a l'air simple. Allons commencer. Je vais aller à Webflow. Ici, je vais sélectionner mon corps. Je vais appuyer sur la commande K ou le contrôle K sur mon clavier, et cherchons la section. D'accord. La section a été ajoutée. Je vais lui donner la classe de section comme d'habitude. Aussi, je vais lui donner une classe combo. Appelons ça un témoignage. On y va. Comme je l'ai mentionné précédemment, cette section devrait avoir une largeur maximale spécifique. En outre, une hauteur spécifique. Jetons un coup d'oeil. Sa largeur maximale doit être de 1320 pixels et sa hauteur doit être de 622 pixels. Allons de l'avant et spécifions ces valeurs. Je vais définir sa largeur maximale à 1320 et sa hauteur à 622 pixels. On y va. Notre section est prête, mais elle n'est pas centrée. Comment pouvons-nous résoudre ce problème ? Tu as raison. Je peux aller à la section d'espacement et je peux cliquer sur ce petit bouton ici. Maintenant, les marges gauche et droite sont réglées sur auto et cela signifie que notre section est centrée. Parfait. La dernière chose que je vais faire est d'ajouter des marges supérieures à cette section. Vérifions notre design une seconde. Comme je peux le voir ici, la marge supérieure devrait être de 200 pixels. Je vais lui donner une marge supérieure de 200 pixels. On y va. Maintenant, il est temps de donner à cette section une couleur d'arrière-plan spécifique. Donc, je vais aller à la section d'arrière-plan et en utilisant ce sélecteur de couleurs, je vais choisir sombre neutre. Enfin, je vais ajouter une image à cet arrière-plan, comme celui-ci, et choisir l'orbite de mes actifs. Juste comme ça. Mais ça n'a pas l'air bien. C' est parce que la taille est définie sur personnalisée. Je vais le changer pour le contenir, et c'est ce que nous recherchons. Nous n'avons pas besoin de modifier quoi que ce soit d'autre. Notre expérience est prête. Maintenant à l'intérieur, nous allons créer un conteneur. Alors que cette section est sélectionnée, je vais appuyer sur la commande K ou le contrôle K, et je vais chercher un bloc div comme ça. Ce bloc div est maintenant à l'intérieur de cette section. Je vais lui donner la classe de conteneur. On y va. Maintenant, ce conteneur a une largeur maximale de 1100 pixels comme tous les autres conteneurs que nous avons créés auparavant. D' accord. Cool. De quoi avons-nous besoin pour ce conteneur ? Tout d'abord, ce conteneur devrait prendre toute la hauteur de cette section. Par conséquent, je vais lui donner une classe combo. Laissez-moi écrire un témoignage. Je vais fixer sa hauteur à 100 pour cent. On y va. À l'intérieur, je vais ajouter un titre. Donc, pendant que ce conteneur est sélectionné, je vais appuyer sur la commande K ou le contrôle K, et cherchons le titre. On y va. L' en-tête a été ajouté. Pour cette section, je vais choisir H3. Maintenant, donnons à ce titre une classe spécifique. Je vais écrire un soulignement de témoignage, un titre de soulignement. Ensuite, je vais modifier ses propriétés typographiques. Tout d'abord, laissez-moi aller de l'avant et modifier sa couleur. On va utiliser une lumière neutre, celle-ci. En outre, je vais modifier sa taille de police à 40 pixels. Si je me dirige vers mon fichier de conception ici, si je sélectionne ceci, vous pouvez voir que j'utilise H3, et H3 est 40 points. Ici, nous allons spécifier 40 pixels. Je ne vais pas toucher la hauteur de la ligne. Ensuite, permettez-moi d'aller de l'avant et de copier et coller ce texte particulier de mon fichier de conception. Je vais le copier, commander C ou contrôler C et le coller ici. D' accord. Super. Maintenant, je vais avoir besoin d'un bloc de texte. Donc, une fois de plus, sélectionnez le conteneur, appuyez sur la commande K ou le contrôle K et recherchez le bloc de texte. On y va. Encore une fois, je vais lui donner un cours. Écrivons un soulignement de témoignage, un texte de soulignement. Enfin, je vais changer sa couleur pour cette secondaire. Aussi, je vais modifier sa taille à 24 pixels et sa hauteur de ligne à 160 pour cent. Je peux aussi modifier son poids. Jetons un coup d'oeil au poids ici. Oui, ça va être moyen, donc je vais le changer en moyen. Ensuite, je vais copier et coller ce texte ici. Copions-le et collons-le ici. Nos textes sont également prêts. Cependant, nous avons un problème. Ici, comme vous pouvez le voir, ce texte est trop long mais quand je regarde mon fichier de conception, vous pouvez voir que j'ai deux lignes de texte et que la largeur est réglée à 596 pixels, donc vous savez ce que nous devons faire. Nous devons changer sa propriété de taille. Si j'ai défini une largeur maximale pour ce calque de texte, le problème sera résolu. Je vais écrire 596 pixels. On y va. On a deux lignes de texte, et je vais l'aligner au centre. Joli. Avant de commencer à créer la dernière section ici, la section client, je vais aller de l'avant et sélectionner ce conteneur, et je vais changer son paramètre d'affichage de bloc à flexbox. Comme vous pouvez le voir par défaut, sa direction est définie sur horizontale. Je vais le changer à la verticale. Aussi, je vais l'aligner au centre et nous allons y poser modifié et justifié, mais pas maintenant. De quoi d'autre avons-nous besoin ici ? Comme je l'ai mentionné précédemment, pour cette section client, nous avons besoin d'un bloc div. Donc, pendant que ce conteneur est sélectionné, je vais appuyer sur la commande K ou le contrôle K, et cherchons le bloc div. On y va. Je vais lui donner un cours. Écrivons client. Ce bloc div client devrait avoir deux blocs div supplémentaires. Alors qu'il est sélectionné, cherchons un bloc div. Maintenant, un autre bloc div est à l'intérieur et je vais répéter le même processus pour ajouter un autre bloc div. Nous avons deux blocs div maintenant mais ils sont empilés l'un sur l'autre et ce n'est pas ce que nous voulons. Pourquoi ? Parce qu'ici, ils devraient être placés l'un à côté de l'autre. Par conséquent, je vais sélectionner le parent, qui est ce bloc div client et je vais changer son paramètre d'affichage de bloc à flexbox. La direction est réglée sur horizontale, c'est exactement ce dont nous avons besoin. Je vais sélectionner le bloc div gauche et je vais lui donner une classe. Écrivons le trait de soulignement du client, le profil de soulignement. Pour le bon, le prochain bloc div, je vais lui donner une classe et je vais écrire un trait de soulignement client, des informations de soulignement. Nos blocs div sont prêts. Maintenant, nous devons ajouter du contenu ici. abord, je vais sélectionner un bloc div de profil client, et je vais me diriger vers l'image d'arrière-plan. Ajoutons une image ici. Je vais choisir une image parmi les actifs, l'image de profil. On y va. Mais nous devons modifier ses préférences. D' abord, je vais changer sa taille pour couvrir. Joli. Ensuite, je vais le repositionner au centre et, aussi je vais définir la tuile pour ne pas la tuile. Enfin, je dois le rendre circulaire. Comment pouvons-nous faire ça ? Eh bien, c'est si simple. Je t'ai déjà montré comment on peut créer un cercle et on va faire la même chose ici. abord, nous devons définir une largeur et une hauteur spécifiques. La largeur et la hauteur doivent être les mêmes lorsque nous voulons créer un cercle. Par conséquent, je vais vérifier cette largeur et cette hauteur ici. C' est une image de 50 x 50 pixels. Je vais lui donner une dimension de 50 x 50 pixels. La seule chose qu'on doit faire, c'est aller aux frontières et je vais changer le rayon à 50 %. Voilà, nous avons notre cercle. Que devrions-nous faire d'autre ? Maintenant, il est temps d'ajouter le contenu des informations client ici. Pour ce bloc div, nous allons avoir besoin de deux calques de texte. Comme vous pouvez le voir, nous avons un nom, puis le nom de la société ou le nom du site Web. Ici, alors que ce bloc div info client est sélectionné, je vais appuyer sur la commande K ou le contrôle K, et je vais chercher le bloc de texte. On y va. C' est notre premier bloc de texte. Je vais lui donner un cours. Laissez-moi écrire le soulignement du client, informations de soulignement, le soulignement, le nom de soulignement, juste comme ça. Ensuite, nous allons modifier certaines de ses propriétés. Passons à la section typographique. De là, je vais modifier sa taille à 17 pixels. Si je jette un oeil à mon design ici, sa taille est de 17 points. Ensuite, nous devons modifier sa couleur en survol principal. Nous n'avons pas créé de nuance globale pour ces couleurs de vol stationnaire primaire, mais c'est très bien. Je vais le faire maintenant. Laisse-moi aller de l'avant et obtenir le code couleur d'ici. Comme vous pouvez le voir, le code couleur est A2D6F9. Je vais le copier. Ensuite, je vais me diriger vers Webflow et à partir de la couleur typographique ici, je vais créer une nouvelle nuance, et nous allons coller le code couleur ici. Je vais le nommer principal barre oblique avant. Nous avons une nouvelle nuance globale. Maintenant, copions et collez le nom du client ici. Je vais le copier, et le coller juste ici. Ça a l'air bien. Enfin, nous avons besoin d'un autre calque de texte. Je vais sélectionner le bloc div info client, et en utilisant le QuickFind, je vais chercher un autre bloc de texte. Juste comme ça. Donnons-lui un cours. Je vais écrire le soulignement du client, infos de soulignement, le soulignement, la compagnie de soulignement. Ensuite, je vais modifier ses propriétés topographiques. Tout d'abord, commençons par la taille de la police. Sa taille de police devrait être de 13 points si je ne me trompe pas, laissez-moi vérifier. Nous utilisons le style de texte de légende deux. Ici, la légende deux est 13 points, c'est bon. Je vais lui donner 13 pixels ici, et pour sa couleur, nous allons utiliser une lumière neutre. Joli. Permettez-moi d'aller de l'avant et de copier et coller le site Web de l'entreprise, qui est booking.com. Je vais le coller ici, et on a presque fini. Maintenant, la seule chose que nous devons faire est d'aligner nos éléments. Commençons par Client_Info. Si je sélectionne ce bloc Client_Info Div et que je me dirige vers la section de mise en page, vous pouvez voir que le paramètre Display est défini pour bloquer, et ce n'est pas ce que je veux parce que je veux changer un peu l'alignement. Par conséquent, je vais le changer en flex box et je vais changer la direction à la verticale. La dernière chose que je vais faire ici est de changer la justification en espace autour. On y va. La dernière chose que nous devons faire est d'ajouter quelques marges de gauche ici. Laissez-moi vérifier mon dossier de conception. Si je sélectionne ce groupe et que je maintiens la touche Alt ou Option enfoncée de mon clavier, vous pouvez voir que la marge gauche est réglée sur 10 pixels. Par conséquent, alors que ce client _Info Div Block est sélectionné, je vais lui donner une marge gauche de 10 pixels. Je vais sélectionner le conteneur, et je vais changer la justification en espace autour. On a ce qu'on a ici. Jetons un coup d'oeil. Nous avons exactement ce que nous avons dans notre dossier de conception. Et les Memojis ? Comme je vous l'ai déjà dit dans cette section, nous allons avoir quatre Memojis différents aussi. Je vais sélectionner cette section, pas le conteneur. Je vais sélectionner une section, puis je vais chercher un bloc Div et ce bloc Div est maintenant à l'intérieur de cette section. Donnons-lui un cours. Je vais écrire Memoji, et ce Memoji devrait avoir une largeur et une hauteur spécifiques. Jetons un coup d'oeil à notre dossier de conception une seconde. Si je sélectionne ce Memoji, vous pouvez voir que sa largeur et sa hauteur sont réglées à 150 pixels. Je vais définir sa largeur à 150 et sa hauteur à 150 pixels aussi. Mais qu'en est-il de l'image ? Allons-nous ajouter un élément image ici ? Non, nous allons utiliser l'image d'arrière-plan, mais avant d'ajouter l'image d'arrière-plan, je vais lui donner une classe combo. Pourquoi ? Parce que nous allons avoir quatre Memojis différents, et comme nous allons changer l'image d'arrière-plan ici, il est important de donner à ce Memoji Div Block une classe combo. Pour le premier Memoji, je vais lui donner la classe de combo unique juste comme ça, puis donnons-lui une image. Je vais choisir une image de mes actifs, celui-ci, et je vais changer sa taille pour contenir et me laisser repositionner ça au centre. Je vais mettre la tuile pour ne pas attacher. C' est juste là, mais comment peut-on le placer juste là ? Comme vous pouvez le voir maintenant le fichier de conception. Ils sont placés juste à côté des coins. Comme je l'ai mentionné précédemment, je vais sélectionner cette section, et je vais changer sa position de statique à relative. Pourquoi ? Parce que plus tard, je vais changer la position de ces Memojis en absolu, et de cette façon je peux les repositionner comme je veux. Si je sélectionne ce Memoji, et si je change sa position en, disons absolu ici, rien ne s'est encore passé parce que je vais changer sa position en haut à gauche. Maintenant, comme vous pouvez le voir, puisque la position de ce Memoji est relative à sa section, comme vous pouvez le voir ici. Je peux simplement modifier sa position. Permettez-moi de modifier la position gauche et supérieure. Je vais le changer pour, disons 5 pour cent, et pour le haut, je vais le fixer à 10 pour cent. Maintenant, je vais devoir créer le prochain Memoji, sorte que vous pouvez copier et coller ce Memoji ou vous pouvez le dupliquer. Je vais faire un clic droit sur le nom de ce Memoji, et je vais cliquer sur Dupliquer. Il a été dupliqué, mais ils sont maintenant au-dessus de l'autre. Si je sélectionne le calque dupliqué, je peux simplement le repositionner, je peux simplement le repositionner, mais avant de le faire, je vais aller de l'avant et dupliquer cette classe combo, juste comme ça. Ensuite, je vais lui donner une nouvelle classe combo. Je vais en écrire deux parce que c'est notre deuxième Memoji. Maintenant, je vais le repositionner en bas à gauche, et je peux modifier sa position gauche et inférieure ici à 5 pour cent, et ici je vais le mettre à 10 pour cent. Bon, cool. Maintenant, il est temps d'aller à la section d'arrière-plan et de modifier l'image elle-même. Je vais sélectionner ces Memoji et maintenant nous avons juste besoin de répéter le même processus. Je vais dupliquer ce Memoji, juste comme ça. Je vais sélectionner le bloc Div dupliqué dans le navigateur, et je vais dupliquer sa classe combo. Changons-le à trois et laisse-moi le repositionner en haut à droite. Aussi, je vais changer son Memoji de la section d'arrière-plan à celle-ci. Enfin, je vais changer sa position le bon, je vais le mettre à 5 pour cent et le haut, je vais le mettre à 10. Enfin, je vais le dupliquer encore une fois. Sélectionnons le calque dupliqué dans le navigateur et dupliquons également sa classe combo, et je vais le nommer quatre, puis je vais le repositionner dans le coin inférieur droit. Aussi, je vais changer son image des actifs à ce Memoji. Enfin, permettez-moi de modifier ses positions droite et inférieure à 5 pour cent et 10 pour cent respectivement. Juste comme ça, tous les bons gars. Notre section de témoignages est également prête. Pouvez-vous voir à quel point il est facile de convertir votre conception de figurines en sites Web fonctionnels. La seule chose qui compte est que vous comprenez les structures et les propriétés CSS tant que vous suivez les règles, et que vous avez une structure claire dans votre esprit, tout est facile. Récapitulons. Pour cette section. Nous avons créé une section. Nous lui avons donné une classe combo de témoignage, et nous lui avons aussi donné une marge supérieure de 200 pixels selon notre fichier de conception. Ensuite, nous avons spécifié une largeur maximale et aussi une hauteur spécifique pour cela, et nous lui avons donné une couleur d'arrière-plan et une image d'arrière-plan. Juste après cela, nous avons créé un conteneur, et nous lui avons donné le conteneur et les classes de témoignage, et à l'intérieur nous avons ajouté un titre, un bloc de texte, et un autre bloc de Div qui comprend deux autres blocs de Div. Tous ces Div Block sont des boîtes flexibles. Nous changeons leur réglage d'affichage en flex box afin de contrôler leur direction, leur alignement et leur justification. Une fois la section conteneur terminée, nous avons commencé à ajouter les Memojis ici. Afin de les positionner correctement, nous avons défini la position des sections sur relative et nous avons dit la position de Memojis à absolue. Les gars, c'est tout pour cette vidéo. J' espère que ça vous a plu, et je vous verrai dans la prochaine. 48. Section des services: Hé, dans cette vidéo, nous allons commencer à construire la section Services ensemble. Voyons comment nous devrions le structurer. Comme vous pouvez le voir ici, nous avons une autre section. abord, nous devons créer une section et à l'intérieur nous avons besoin d'un conteneur comme ce que nous avons fait ici pour la section Projets récents, nous allons faire la même chose ici aussi. À l'intérieur de ce conteneur, nous allons avoir une rubrique pour ce titre Nos services et ensuite nous allons avoir l'emballage des services. Ça va être une grille ou une flexbox. On va aller avec la grille. À l'intérieur de ce conteneur de services ou disons grille de services, nous allons avoir trois blocs div différents. Ici, nous avons trois cartes différentes, et chaque carte doit être créée en utilisant un bloc div. Prenons celui-ci par exemple. Ce sera un bloc div, et à l'intérieur nous allons avoir cette icône, et nous allons créer cette icône en utilisant un bloc div et un bloc div à l'intérieur. Une fois que notre section supérieure est créée, nous allons de l'avant et créer la section de contenu. Ici, nous avons besoin d'un titre et d'une description, et enfin, nous avons besoin de ce bouton En savoir plus. Last but not least, nous dupliquerons notre bloc div deux fois pour obtenir trois cartes différentes. Ça a l'air simple, alors commençons. D' abord, je vais aller de l'avant et sélectionner mon corps ici. Ensuite, je vais frapper la commande K ou le contrôle K et chercher la section. On y va. Une nouvelle section a été ajoutée ici, et je vais lui donner une classe, la classe de section. Cette section n'aura pas de largeur ou de hauteur spécifique ; cependant, je vais lui donner une marge supérieure. Jetons un coup d'oeil à notre dossier de design ici. Comme vous pouvez le voir, nous allons avoir besoin de 200 pixels de marge supérieure. Je vais sélectionner cette section et je vais changer sa marge supérieure à 200 pixels. On y va. Mais nous ne pouvons pas le voir maintenant parce qu'il n'y a rien dans notre section. Comment pouvons-nous réparer ça ? abord, je vais sélectionner cette section et je vais frapper commande K ou le contrôle K et je vais ajouter un bloc div, parce que comme vous le savez, nous allons avoir besoin d'un conteneur. Comme vous pouvez le voir maintenant, nous avons notre marge supérieure de 200 pixels, et tandis que ce bloc div est sélectionné, je vais lui donner la classe de conteneur. On y va. Maintenant, nous avons la largeur maximale de 1,100 pixels. C' est exactement ce dont nous avons besoin. Pour ce conteneur, je vais également ajouter une classe combo. Je vais écrire Services, et à l'intérieur de ce conteneur, nous allons avoir un titre et l'emballage des services. Lorsque ce conteneur est sélectionné, appuyez sur Commande K ou Contrôle K et recherchez l'en-tête. Cette rubrique a été ajoutée, et je vais choisir H3 ici. Laisse-moi aller de l'avant et lui donner un cours. Comme il s'agit de propriétés CSS doivent être exactement les mêmes que l'en-tête Projets récents. Par conséquent, je vais également définir le cap des projets pour cette rubrique. Je vais le sélectionner et écrire les titres de projets. On y va. Ensuite, je vais changer son texte pour Nos Services. Laisse-moi aller de l'avant et le copier. Cool. Notre cap est prêt. De quoi d'autre avons-nous besoin ? Nous avons besoin de l'emballage des services. Alors que ce conteneur est sélectionné, je vais frapper la commande K ou le contrôle K et cherchons le bloc div. Ensuite, ce bloc div a besoin d'une classe comme d'habitude. Puisque nous allons changer le paramètre d'affichage en grille plus tard, je vais le nommer, Services soulignement Grille. Ce n'est pas une grille maintenant, mais plus tard, nous allons la changer en grille. Cette grille de services doit avoir des marges supérieures. Laisse-moi vérifier ici. Si je sélectionne ce wrapper de services et que je maintiens la touche Alt ou Option enfoncée sur mon clavier, vous pouvez voir que nous allons avoir besoin de 70 pixels de marge supérieure. Je vais sélectionner cette grille de services et je vais y ajouter des marges. Réglons-le à 70 pixels. Cool. Maintenant que notre bloc div de grille de services est créé, nous avons besoin d'un autre bloc div à l'intérieur pour notre carte de service. Par conséquent, alors que cette grille de service est sélectionnée, cherchons un bloc div, et ce bloc div va avoir une nouvelle classe. Donnons-le un nom, Service soulignement de la carte. Cette carte va avoir une largeur maximale spécifique, mais nous ne allons pas spécifier une hauteur particulière pour cela, nous allons définir la hauteur sur auto. Mais si je sélectionne cette carte de service ici, nous pouvons voir que la largeur est définie à 340 pixels. Par conséquent, nous allons définir la largeur maximale à 340 pixels. Joli. Cette carte est blanche. Que devrions-nous faire ? Oui, vous avez raison. On doit changer la couleur de l'arrière-plan ici. Je vais aller à la section d'arrière-plan et en utilisant ce sélecteur de couleurs, je vais changer sa couleur en blanc. Cool. Mais ça a l'air trop petit. Oui, parce qu'on n'a pas fixé une hauteur spécifique pour ça, et c'est très bien. Dès que nous ajoutons plus d'éléments à ce bloc div, sa hauteur augmentera, donc ne vous inquiétez pas à ce sujet. Une fois cette carte de service sélectionnée, nous allons y ajouter quelques éléments. De quoi avons-nous besoin ? Il nous faut deux blocs div. Nous avons besoin du bloc div de l'icône de service et du bloc div de contenu de service. Cherchons un bloc div. Encore une fois, je vais sélectionner la carte de service et chercher un autre bloc div. Maintenant, nous avons deux blocs div qui sont placés l'un sur l'autre. Je vais leur donner un cours. Pour le premier bloc div, pour ce bloc div supérieur, je vais le nommer, soulignement de service Icône. Pour le bloc div inférieur, je vais le nommer, soulignement du service Content. Le bloc div supérieur va être utilisé pour notre icône et le bloc div inférieur va contenir notre contenu. Commençons par l'icône. Je vais sélectionner le bloc div de l'icône de service, et passons à notre fichier de conception ici. Si je sélectionne cette icône, nous pouvons voir que nous avons ce cercle et sa largeur et sa hauteur sont réglées à 80 pixels. Par conséquent, je vais spécifier la largeur et la hauteur ici à 80 pixels juste comme ça. Ensuite, je vais modifier la couleur de son arrière-plan. Ici, nous devons utiliser du bleu clair neutre. Allons de l'avant et modifions la couleur de l'arrière-plan en bleu clair neutre, juste comme ça. Ensuite, nous devons le rendre circulaire. Je vais changer le rayon à 50 pour cent. On y va. Notre cercle est prêt. Mais qu'en est-il de l'icône ? Eh bien, pour l'icône, nous avons deux options ; abord, nous pouvons aller de l'avant et ajouter une image ici, deuxièmement, nous pouvons ajouter un autre bloc div à l'intérieur de ce bloc div icône de service et y mettre notre icône. La deuxième option est plus flexible en termes d'alignement, mais allons de l'avant et vérifions la première option. Je vais ajouter une image ici en utilisant la section image d'arrière-plan et je vais choisir cette première icône. Ensuite, je vais changer sa position au centre, et je vais régler l'heure de l'aube. On y va. Notre icône est prête. Maintenant, nous devons déplacer un au bloc div suivant. Mais avant de faire cela, donnons à cette icône de service div bloquer certaines marges. Je vais faire défiler vers le haut et je vais définir sa marge supérieure à 40 pixels. Jetons un coup d'oeil à notre dossier de conception. Oui, la marge supérieure va être de 40 pixels et la marge gauche va être de 30 pixels, donc je vais définir sa marge supérieure à 40, et c'est la marge gauche à 30 pixels. Mais écoutez, je n'ai pas pu obtenir la marge supérieure de 40 pixels. Pourquoi c'est ça ? C' est parce que le deuxième bloc div, ce bloc div de contenu de service prend l'espace disponible ici. Par conséquent, cette icône de service ne peut pas avoir cette marge supérieure de 40 pixels, puisque nous n'avons pas donné de hauteur spécifique à cette carte de service. C' est très bien. Passons maintenant au contenu du service, et plus tard, nous obtiendrons cette marge supérieure. De quoi avons-nous besoin dans ce contenu de service ? Jetons un coup d'oeil à notre dossier de conception. À l'intérieur de ce bloc div de contenu de service, nous allons avoir un autre bloc div pour mettre ces couches de texte, et ensuite nous allons avoir besoin d'un bouton de lien, un lien de texte. Allons de l'avant et créons un bloc div. Pendant que ce contenu de service est sélectionné. Je vais appuyer sur « Command K » ou « Control K » et chercher un bloc div. On y va. A l'intérieur de ce contenu de service, nous avons un nouveau bloc div. Ce nouveau bloc div va avoir besoin d'une classe, donc je vais aller au Selector et ajoutons une nouvelle classe. Je vais écrire un trait de soulignement de service, texte de soulignement, et à l'intérieur nous avons besoin de deux blocs de texte différents. Alors qu'il est sélectionné, appuyez sur « Command K » ou « Control K » et recherchez le bloc de texte. On y va. C' est le premier bloc de texte, je vais en avoir besoin d'un autre aussi. Encore une fois, je vais sélectionner « Contenu du service », appuyer sur « Commande K » ou « Contrôle K » et chercher bloc de texte. On a deux blocs de texte ici, mais ils n'ont pas de cours. Donc, je vais sélectionner le premier et je vais lui donner un cours. Je peux écrire le titre de soulignement du service. Cependant, puisque ce titre et la description vont avoir le même style que nous avons ici pour cette carte de projet, je vais lui donner la classe que nous avons créée pour ce tittle. Pour leur description, il devrait s'agir d'une description du projet. Allons de l'avant et sélectionnons le premier bloc de texte et écrivons le titre du projet, ok, il est là et pour le prochain, je vais écrire le projet et ensuite chercher la description. C' est là. D'accord. Cool. Maintenant, je vais aller de l'avant et copier ce texte et le coller ici et à partir de la description ainsi je vais le copier, nous allons le coller ici. Juste en dessous de ce texte de service, nous allons également avoir besoin d'un bloc de liens. Cependant, comme vous pouvez le voir, cette description de projet n'est pas à l'intérieur de notre bloc div de texte de service, je vais le faire glisser et je vais m'assurer qu'elle est imbriquée dans le bloc div de service. Maintenant, je vais sélectionner le contenu du service et je vais chercher un lien texte. On y va. Nous avons notre lien texte et nous n'avons pas besoin de créer nouvelles propriétés pour cela parce que nous avons notre bouton lien ici. Je vais choisir cela et je vais lui donner la classe de bouton de lien. On y va. Pouvez-vous voir à quel point il est bénéfique d'utiliser les classes correctement ? Enfin, je vais changer son texte pour en savoir plus. Très bien cool. Nous avons presque fini. Maintenant, nous avons juste besoin de changer certaines propriétés afin de rendre notre carte plus grande et de modifier l'alignement. abord, je vais sélectionner ce bloc div de contenu de service et comme vous pouvez le voir, le paramètre d'affichage est défini sur bloquer. Je vais le changer en flexbox et je vais changer la direction à la verticale, et je vais changer la justification en espace entre. Ensuite, je vais sélectionner le bloc div de la carte de service et je vais répéter la même chose. Je vais changer le paramètre d'affichage en flexbox et je vais changer la direction à verticale. Maintenant, nous avons notre marge supérieure. Cependant, pour cette description, nous n'avons pas de marge inférieure. Par conséquent, je vais sélectionner cette description du projet et je vais lui donner une marge inférieure. Sa marge inférieure est réglée à 10 pixels et je vais lui donner une marge inférieure de 40 pixels. Modifions ça. Maintenant, ça a l'air beaucoup mieux. Comme vous pouvez le voir, notre carte ressemble exactement à ce que nous avons ici dans notre dossier de conception, et c'est exactement ce que nous recherchions. Que devrions-nous faire maintenant ? Eh bien, le plus dur est fait maintenant nous devons sélectionner notre carte de service, nous devons la dupliquer, donc je vais cliquer avec le bouton droit ici et je vais frapper « Dupliquer » deux fois. Je vais répéter ce processus deux fois. On y va. On a trois cartes différentes. Cependant, ils sont empilés l'un sur l'autre et nous avons deux options ; nous pouvons soit aller avec une flexbox ou avec une grille. Puisque je vais garder notre conception cohérente, je vais aller avec la grille parce que pour cette section, nous avons également utilisé une grille. Par conséquent, je vais sélectionner le service en tant que bloc div de grille et je vais changer son paramètre d'affichage en grille. Joli. Tu sais ce qu'on doit faire ? Nous devons supprimer une de ces lignes et nous devons ajouter une colonne de plus ici. Enfin, je vais changer l'écart de 16 pixels à 40 pixels, juste comme ça. Bon, cool. Nos cartes sont presque prêtes. La seule chose que j'ai besoin de faire est de modifier ces icônes et le contenu. Permettez-moi d'aller de l'avant et de modifier rapidement cette icône. Si je sélectionne ce bloc div icône de service, je peux me diriger vers la section d'arrière-plan et je peux choisir une autre image. Mais quelque chose arrive dès que j'ai changé cette image. Puisque je n'ai pas ajouté de classe combo à cette classe de base, si je change cette icône, toutes ces icônes seront affectées. Laissez-moi vous montrer ce que je veux dire. On y va. Ce n'est pas ce que nous voulons. Par conséquent, ce que je vais faire, c'est d'aller de l'avant et d'ajouter une classe combo à ce bloc div d'icône de service. Je vais écrire 2, et pour celui-ci, je vais écrire 3, et pour le premier, écrivons 1. Bien que le premier ne soit pas nécessaire, je vais lui donner une classe combo que je pourrais organiser mes éléments facilement. D'accord. Maintenant, je peux sélectionner cette icône de service, puis si je change son icône, les autres icônes ne seront pas affectées. Donc, je vais choisir le deuxième, gentil, et pour le troisième, je vais faire la même chose et choisir celui-ci. D'accord. Nos icônes sont prêtes, maintenant je vais aller de l'avant et changer le titre et la description. Permettez-moi de copier et de coller rapidement ces textes ici. Très bien les gars, c'est tout pour cette vidéo, notre section services est prête aussi. J' espère que ça vous a plu et je vous verrai dans la prochaine. 49. Section CTA: Hé, dans cette vidéo, nous allons créer cette section CTA. CTAs signifie qui sont appelés à l'action, et il saisit généralement l'adresse e-mail de l'utilisateur ou le nom et l'adresse e-mail pour lui envoyer fichiers ou disons quelques nouvelles ou toute information que l'utilisateur recherche. Cette section d'appel à l'action a un formulaire. Comme vous pouvez le voir, ces formulaires ont un champ de texte et aussi le bouton d'abonnement. Voyons comment nous devrions structurer ça. abord, nous avons une section, je dois modifier son nom pour la section CTA, et cette section, tout comme notre section sur les témoignages, a une largeur spécifique. Il ne prend pas toute la largeur de notre fenêtre d'affichage, par conséquent, nous allons définir une largeur spécifique pour ces 13 et 20 pixels, comme vous pouvez le voir ici. Cela nécessite une couleur d'arrière-plan, nous allons donc utiliser la couleur secondaire pour l'arrière-plan ici. Ensuite, une fois que notre section est créée, nous avons besoin d'un conteneur comme d'habitude, et enfin, à l'intérieur de ce conteneur, nous allons avoir un titre, un bloc de texte, et aussi un bloc de formulaire. Ce bloc de formulaire va avoir un wrapper de champ de texte et un bouton. Rien de compliqué. Nous avons juste besoin de nous en tenir aux règles et nous avons juste besoin d' utiliser flexbox pour aligner ces éléments. Êtes-vous prêt ? Commençons. D' abord, je vais aller de l'avant et sélectionner mon corps ici, puis je vais chercher une section juste comme ça. Laisse-moi lui donner un cours. Je vais lui donner le cours de section ici. Aussi, je vais lui donner la classe combo, appelons-le CTA. Comme vous pouvez le voir, nous ne pouvons pas voir la section parce qu'il n'y a rien à l'intérieur de notre section. abord, je vais aller de l'avant et lui donner une largeur maximale de 1 320 pixels et aussi une hauteur spécifique de 500 pixels. Si je regarde mon design, vous pouvez voir que sa hauteur est de 500 pixels. Je pourrais aussi le définir sur auto, mais je préfère avoir une hauteur spécifique ici. Maintenant, nous devons centrer notre section. Comment pouvons-nous faire ça ? Tu as raison. Je peux me diriger vers cette section d'espacement et je peux cliquer sur ce bouton pour centrer l'élément horizontalement comme ça. La prochaine chose que nous devons faire est de changer la couleur de l'arrière-plan. Si je me dirige vers la section d'arrière-plan et que je clique sur cette couleur ici à l'aide de ce sélecteur de couleurs, je peux utiliser un de mes échantillons. Je vais utiliser le secondaire. Notre section est prête. Maintenant à l'intérieur, comme d'habitude, nous allons avoir besoin d'un conteneur. Pendant que cette section est sélectionnée, je vais appuyer sur la touche de commande ou la touche de contrôle. Cherchons un bloc div. Ce bloc div n'a pas de classe alors allons-y et donnons-lui la classe conteneur. Joli. Notre conteneur est également prêt. De quoi avons-nous besoin à l'intérieur de ce conteneur ? Nous allons avoir besoin d'un titre, un bloc de texte et d'un bloc de formulaire. D' abord, je vais donner à ce conteneur une classe combo CTA, puis je vais appuyer sur la touche Commande ou la touche Contrôle et chercher le cap. Changeons le temps de titre en h3, et aussi je vais lui donner une classe. Ici, je vais écrire un trait de soulignement CTA, titre de soulignement, et modifions certaines de ses propriétés topographiques. Le poids va être audacieux. Cependant, la taille va être de 40 pixels. La couleur va être neutre et sombre aussi. Maintenant, je vais aller de l'avant et copier ce texte d'ici et le coller juste là. Notre cap est prêt. Maintenant, nous avons besoin d'un bloc de texte. Sélectionnez notre conteneur en utilisant la recherche rapide. Je vais aller de l'avant et chercher un bloc de texte, et je vais lui donner un cours. Écrivons le soulignement, le soulignement, le sous-titre, et je vais modifier certaines de ses propriétés topographiques. La seule chose que nous devons faire ici est de changer la taille ici à 17 pixels. On n'a pas besoin de toucher à autre chose. Super. Maintenant, permettez-moi d'aller de l'avant et de copier ce texte. Laissez-nous vous aider. Juste comme ça. Nos calques de texte sont prêts. Maintenant, nous avons besoin d'un bloc de formulaire. Laissez-moi sélectionner ce conteneur. Vous pouvez soit aller à la section Ajouter et simplement glisser-déposer un bloc de formulaire ici, ou conteneur sans fil est sélectionné, vous pouvez appuyer sur la touche Commande ou Ctrl pour ouvrir la recherche rapide et rechercher un bloc de formulaire. Nous avons notre bloc de formulaire. Cependant, nous avons deux champs de texte, nous avons deux étiquettes de champs de texte, et nous avons aussi un bouton ici. Mais pour cette section, nous avons juste besoin d'un champ de texte, nous n'avons pas besoin d'étiquette et nous devons modifier un peu le bouton. Allons de l'avant et sélectionnez l'étiquette de champ dans le navigateur et supprimez cela, appuyez sur la touche Retour arrière ou Supprimer de votre clavier. Je vais également supprimer le champ de texte. Maintenant, je vais supprimer cette étiquette de champ. Nous n'avons pas besoin d'étiquette de champ. ce moment, j'ai un champ de texte et un bouton Soumettre. abord, je vais sélectionner ce bloc div de formulaire, et comme vous pouvez le voir, son paramètre d'affichage est défini pour bloquer. Je vais le changer en pointes de vol, et maintenant la direction est réglée à l'horizontale, c'est exactement ce dont nous avons besoin. Nous avons la mise en page que nous recherchons. Cependant, si vous jetez un oeil au fichier de conception, vous pouvez voir que nous avons ce texte d'espace réservé et aussi cette icône. Allons de l'avant et modifions un peu notre champ de texte. Ce champ de texte a une largeur et une hauteur spécifiques. La largeur est de 393 pixels et la hauteur est de 80 pixels. Par conséquent, je vais sélectionner ce champ de texte et je vais changer sa largeur à 393 pixels et sa hauteur à 80 pixels. Mais comme vous pouvez le voir, ce champ de texte a par défaut quelques marges inférieures. Je vais aller de l'avant et enlever ça. Définissons la marge inférieure à 0. Maintenant, ce champ de texte est aligné avec ce bouton. Mais qu'en est-il du texte de l'espace réservé ? Eh bien, si vous vous souvenez, si je double-clique sur ce champ de texte ici, je peux spécifier le texte de l'espace réservé. Laissez-moi écrire, entrer votre email et le type de texte va être email et il va être nécessaire. Le nom va aussi être e-mail. Mais comment pouvons-nous ajouter une icône ici ? Eh bien, puisque nous utilisons des éléments de champ de texte, nous ne pouvons pas simplement aller de l'avant et ajouter une icône. Par conséquent, nous devons être créatifs et nous devons utiliser ce que nous avons appris jusqu'à présent afin d'ajouter une icône ici. Ce que je propose, c'est ceci. abord, je vais aller de l'avant et ajouter un peu plus de remplissage à gauche à ce champ de texte. Je vais changer son remplissage à 70 pixels, puis je vais modifier sa couleur. Comme vous pouvez le voir ici, la couleur de ce calque de texte est sombre neutre. Vous souvenez-vous de la façon dont nous pouvons modifier les propriétés CSS de cette taxe des détenteurs de place ? Oui, vous avez raison. Nous devons sélectionner notre champ de texte, puis si nous nous dirigeons vers le sélecteur, nous pouvons aller à l'état détenteur du lieu. De là, je peux juste ajuster la couleur. Comme vous pouvez le voir, il dit que la couleur du texte est déjà définie sur sombre neutre, mais ce n'est pas le cas. C' est juste un insecte ennuyeux. Si je clique juste dessus et que je choisis cette couleur une fois de plus, nous y allons. Maintenant, la couleur a été appliquée correctement. La couleur est bien maintenant, mais nous avons besoin d'une icône. Par conséquent, je vais créer un bloc div, et je vais mettre ces champs de texte et un nouveau bloc div à l'intérieur afin de tout aligner parfaitement. abord, pendant que ce formulaire est sélectionné, je vais appuyer sur la touche Commande ou la touche Contrôle, et cherchons un bloc div. Alors je vais lui donner un cours. Appelons ça CTA, trait de soulignement, trait de soulignement, champ de texte, enveloppe de soulignement. Ensuite, je vais faire glisser ce champ de texte et le déposer dans ce CTA_ TextField_wrapper que nous venons de créer et je vais déplacer ce wrapper, juste le réorganiser dans le navigateur. Maintenant, alors que ce nouveau bloc Div, ce wrapper est sélectionné, je vais aller de l'avant et ajouter un nouveau bloc Div pour notre icône. Donc, cherchons un bloc Div, génial, et ce bloc Div est à l'intérieur de ce wrapper. Alors laissez-moi sélectionner ce bloc Div et je vais lui donner une classe. Je vais écrire TextField_ Icône, et cette icône devrait avoir une largeur et une hauteur spécifiques. Donc, si je vais à mon fichier de conception et que je sélectionne cette « Icône », vous pouvez voir que sa largeur et sa hauteur sont réglées à 30 pixels. Je vais donc lui donner la largeur et la hauteur spécifiques. Je vais écrire 30 pixels. Nous y allons, et comme vous le savez, nous devons nous diriger vers la section d'arrière-plan et nous devons ajouter notre icône ici. Laisse-moi chercher l'icône du courrier, d'accord, gentil. Notre icône est là. Tout a l'air bien sauf sa position. Alors, comment pouvons-nous positionner cette icône ici ? Eh bien, vous souvenez-vous quand nous avons parlé de la propriété de position ici, je vais définir la position de ce bloc Div à absolu, juste comme ça et puis je vais sélectionner son parent, qui est ce CTA_TextField_wrapper et je suis va définir sa position sur relative. D' accord ? Maintenant, la position de ce bloc d'icône de champ de texte Div est relative à son parent. Comme vous pouvez le voir ici, nous avons CTA_TextField_wrapper et je peux juste le repositionner en haut à gauche. Donc, je vais juste augmenter la position de tête à environ 30 pour cent. On a juste besoin de regarder ça, et ensuite je vais modifier la position de gauche à environ 8 pour cent. Ok, gentil. Je peux le déplacer un peu vers le bas. Je peux augmenter la marge supérieure à, disons 32 %. Bon, notre champ de texte est presque prêt. Mais qu'en est-il de sa couleur ? Actuellement, par défaut, sa couleur d'arrière-plan est blanche, mais notre champ de texte n'est pas blanc. Notre champ de texte utilise la couleur de lumière neutre. Donc, je vais sélectionner ce champ de texte et je vais modifier sa couleur en lumière neutre, et maintenant nous pouvons passer à la partie suivante qui est bouton. Ce sera si simple parce que nous avons déjà créé notre bouton principal, si vous vous en souvenez, pour la section héros et pour celle de navigation. Donc ce que je vais faire est de sélectionner ce bouton ici, et je vais lui donner une classe, Bouton primaire. On y va. Nous avons notre science, la seule chose que nous devons faire est d'ajuster un peu son rembourrage. Ok, donc d'abord je vais lui donner une classe combo, cette façon je peux m'assurer que les changements que je fais ici ne seront pas appliqués à d'autres boutons ici et ensuite je vais ajuster son rembourrage. Laisse-moi faire défiler. Comme vous pouvez le voir par défaut, il a un rembourrage de 30 pixels à gauche et à droite. Jetons un coup d'oeil à notre dossier de conception. Si je sélectionne ce calque de texte « S'abonner », vous pouvez voir qu'il est à gauche et à droite remplissage sont environ 60 pixels. Donc je vais lui donner un rembourrage de 60 pixels à gauche et à droite. Si je maintiens la touche Option ou Alt enfoncée sur mon clavier, je peux simplement modifier le rembourrage gauche et droit simultanément, comme ça, le rembourrage supérieur et inférieur semble bien. Maintenant, j'ai besoin d'une marge gauche aussi. Ici, je vais avoir besoin d'une marge gauche de 20 pixels. Donc, pendant que ce bouton est sélectionné, je vais lui donner une marge gauche de 20 pixels. Très bien, je vais sélectionner ce « formulaire » et comme vous pouvez le voir, ce formulaire prend toute la largeur de son parent, qui est ce bloc de formulaire. abord, je vais sélectionner ce « Formulaire » et je vais changer la justification au centre, puis je vais sélectionner ce «  Bloc de formulaire  » et je vais lui donner une classe, Form Block. Permettez-moi de changer son paramètre d'affichage Flexbox et je vais changer la justification au centre. Maintenant, je vais sélectionner mon « Conteneur », comme vous pouvez le voir, le paramètre d'affichage est réglé sur bloquer, je vais le changer en Flexbox et me laisser changer la direction à la verticale. Je vais changer la justification pour centrer aussi bien, mais comme vous pouvez le voir, cela ne prend pas toute la hauteur de cette section. Pourquoi ? Parce que sa hauteur est réglée sur auto. Par conséquent, sa hauteur est déterminée en fonction de la hauteur de ses enfants. Ils ne prennent pas autant de place à l'intérieur. Donc, ce que je vais faire est de sélectionner ce « Conteneur » et de définir sa hauteur à 100 pour cent. Maintenant, il prend toute la hauteur de cette section, et puis je vais changer l'alignement au centre aussi. Bon, maintenant je vais sélectionner ma rubrique, et cette rubrique nécessite une marge inférieure. Laisse-moi aller à mon dossier Design. Si je sélectionne ce titre, je peux voir que j'ai besoin d'obtenir une marge inférieure de 20 pixels. Donc, pendant qu'il est sélectionné, je vais remplacer sa marge inférieure à 20 pixels, et aussi je vais faire la même chose pour ce bloc de formulaire. Si je sélectionne ce bloc de formulaire, vous pouvez voir que je n'ai pas de marge supérieure. Je vais aller à mon fichier Design et je vais sélectionner ce champ de texte. Vous pouvez voir que j'ai besoin d'une marge supérieure de 50 pixels. Donc je vais lui donner 50 pixels ici. D'accord. Maintenant, permettez-moi de changer le texte de ce bouton de Soumettre à s'abonner, et voilà. Notre section CTA est également prête. Mais maintenant, j'aimerais que vous fassiez attention aux autres éléments à l'intérieur de ce bloc de formulaire, car en dehors de ce champ de texte et de ce bouton, nous avons deux blocs Div supplémentaires. Nous en avons déjà parlé dans nos vidéos précédentes, mais je veux juste les mentionner encore une fois au cas où vous les auriez oubliés. Donc, ici, nous avons un bloc Div Message Success qui n'est pas visible. La raison est par défaut, son paramètre d'affichage est défini sur none. Nous avons également ce message d'erreur. Par défaut, son paramètre d'affichage est défini sur none et nous ne pouvons pas le modifier. Pourquoi ? Parce qu'une fois que l'utilisateur clique sur ce bouton S'abonner, il recevra soit un message de réussite, soit un message d'erreur. Si tout se passe bien, il n'y a pas de problème de connexion Internet, il ou elle verra le message de réussite. Si ce n'est pas le cas, le message d'erreur s'affichera. Mais pouvons-nous simplement changer la conception de ces messages ? Bien sûr qu'on peut. Eh bien dans ce cas, nous devons sélectionner notre bloc de formulaire alors si je clique sur l'icône de paramètres ici, vous pouvez voir qu'il est dit Afficher l'état. Normal, succès, erreur. Si je vais au succès ici, je peux commencer à modifier son apparence. Si je vais à l'erreur, je peux changer son apparence aussi. Donc, par exemple ici, quand je vais à l'erreur, vous pouvez voir que c'est l'alignement est faux. Allons-y et réparons ça. Pendant que nous sommes dans l'état d'erreur, je vais aller de l'avant et sélectionner ce bloc de formulaire. Ce bloc de formulaire contient ce bloc Form Div, le message de réussite et le message d'erreur et sa direction de mise en page, comme vous pouvez le voir, est défini sur horizontal. Lorsque nous sommes dans l'état normal, cela ne fait aucune différence, mais quand nous sommes dans l'état d'erreur, cela fait une différence. Je vais changer la direction à la verticale, et maintenant il semble beaucoup mieux. Donc si je vais à l'état normal, ça a l'air très bien. Si je vais au succès, ça a l'air génial, si je vais à l'erreur, c'est bien. Bien sûr, vous pouvez aller de l'avant et modifier le contenu ici, mais ce n'est pas notre objectif maintenant. Les gars, c'est tout pour cette vidéo. J' espère que ça vous a plu. Je te vois dans la prochaine vidéo. 50. Footer: Dans cette vidéo, nous allons créer ce pied de page au bas de notre page d'accueil. Ce pied de page sera placé sur toutes les pages de notre site Web. Comme vous pouvez le voir ici sur la page Projet, nous avons également le pied de page, sur la page Contact également. Comment allons-nous construire ça ? Analysons et voyons comment il est structuré. Comme vous pouvez le voir, nous avons une section qui va prendre toute la longueur de notre rapport. Comme d'habitude, nous devons créer une section, puis à l'intérieur, nous allons avoir besoin d'un conteneur. On y va. A l'intérieur de ce conteneur, nous aurons deux blocs div. Un pour le contenu sur le côté gauche qui va contenir le logo et l'adresse et un pour les liens sur le côté droit. En fait, pour les liens, je pense qu'il serait beaucoup mieux de créer une grille car ici nous avons une mise en page bidimensionnelle. Il serait beaucoup plus logique de créer une grille pour ces liens. Sans plus tarder, commençons. abord, je vais sélectionner mon corps et je vais frapper Command K ou Control K. Cherchons la section. Ensuite, je vais donner à cette section une section comme d'habitude. Bien et on ne voit rien parce qu'il n'y a rien à l'intérieur. Ensuite, pendant que cette section est sélectionnée, cherchons un bloc div. Je vais ajouter un bloc div à l'intérieur. Donnons-lui la classe de conteneur parce que ce sera notre conteneur. Joli. Notre section est prête, notre conteneur à l'intérieur est prêt et pendant que ce conteneur est sélectionné, je vais lui donner la classe combo de pied de page également. On y va. Comme je l'ai mentionné précédemment, pour ce pied de page, nous allons créer un bloc div sur le côté gauche et une grille sur le côté droit. Au total, nous allons créer deux sphères div blocs. Alors que ce conteneur est sélectionné, cherchons bloc div. Je vais ajouter un autre bloc div alors assurez-vous que votre conteneur est sélectionné. Ensuite, en utilisant la recherche rapide, vous pouvez ajouter un bloc div. On y va. Maintenant, nous avons deux blocs div. Je vais sélectionner le top et je vais lui donner un cours. Écrivons Footer__Content. Je vais sélectionner le deuxième et je vais lui donner un cours. Écrivons le pied de page __Liens. Cool. Ensuite, je vais sélectionner ce conteneur et je vais changer le paramètre d'affichage de bloc à Flexbox, pourquoi ? Parce que je vais aligner ces deux blocs div horizontalement, pas verticalement. Par conséquent, je vais le changer en Flexbox. On y va. La direction est réglée sur horizontale. La seule chose que je dois faire ici est de changer la justification en espace entre, juste comme ça, parce que nous voulons que ces blocs div touchent les bords de ce conteneur. Jetons un coup d'oeil à notre dossier de conception. Si je sélectionne ce groupe ici sur le côté gauche, vous pouvez voir que cette boîte de contenu , ce bloc div , aura une largeur spécifique de 260 pixels. Ce que je vais faire est de sélectionner ce contenu de pied de page de bloc div particulier, et je vais lui donner une largeur maximale de 260 pixels. Puis à l'intérieur, je vais ajouter un bloc div de plus pour notre logo et un bloc de texte pour l'adresse. Tant qu'il est sélectionné, appuyez sur la commande K ou le contrôle K et recherchez le bloc div. Je vais donner un cours à ce bloc div. Écrivons le pied d'oter__Content__Logo. Ensuite, si je me dirige vers la section d'arrière-plan ici, je peux ajouter une image. A partir des actifs, je vais choisir ce logo de cercle et je vais changer la taille pour contenir. Laisse-moi repositionner ça au centre et ne tuile pas. Laissez-moi jeter un coup d'oeil à mon design. Si je sélectionne ce logo, sa largeur est d'environ 100 pixels et sa hauteur est de 30 pixels. Alors que ce bloc div du logo de pied de page est sélectionné, je vais définir une largeur spécifique, 100 pixels, et sa hauteur va être de 30 pixels, mais qu'en est-il de l'adresse ? Je vais sélectionner ce bloc div de contenu de pied de page et je vais ajouter un bloc de texte ici juste comme ça. Alors je vais devoir lui donner un cours. Appelons-le pied __Content__Adresse. Allons de l'avant et modifions certaines de ses propriétés typographiques. Le poids a l'air bien. Je vais changer la taille à 17 pixels. Ensuite, je vais changer la couleur en milieu neutre et la hauteur de la ligne à 150 pour cent. Enfin, je vais copier cette adresse et la coller ici. Voyons ce que nous avons ici. Si je sélectionne ce contenu de pied de page, vous pouvez voir que le paramètre d'affichage est défini pour bloquer et il semble bien maintenant. Cependant, plus tard, lorsque nous voulons rendre notre site web réactif, cela serait problématique parce que, par exemple, dans le portrait mobile ou le paysage mobile, nous pourrions devoir modifier l'alignement de ces deux éléments ici. Par conséquent, maintenant je vais le changer Flexbox et je vais changer la direction à la verticale. Je vais sélectionner ce logo et nous devons lui donner une marge inférieure. Permettez-moi de sélectionner ce logo ici et sa marge inférieure sera de 30 pixels. Par conséquent, ici, je vais lui donner une marge inférieure de 30 pixels. Joli. Notre contenu de pied de page est prêt. Maintenant, il est temps de passer à la partie suivante, qui est les liens de pied de page. Si je sélectionne ces liens de pied de page et que j'appuie sur la commande K ou le contrôle K, je peux rechercher un lien de texte. Alors je peux lui donner un cours. Écrivons Footer__Link et je vais modifier ses propriétés typographiques. Tout d'abord, permettez-moi d'augmenter sa taille de police à 17 pixels et sa couleur sera neutre. Enfin, je vais mettre la déclaration à zéro. C' est essentiellement notre style ici. Ensuite, je vais aller de l'avant et copier ce texte ici. Le premier sera l'équipe. Joli. Maintenant, je vais le dupliquer cinq fois pour obtenir six liens différents. Je peux simplement le copier, commande C ou le contrôle C et le coller cinq fois en utilisant la commande V ou le contrôle V, juste comme ça. J' ai six liens différents ici. Maintenant, je vais juste aller de l'avant et copier et coller ces noms un par un. Nos six liens sont prêts. Mais puisque le paramètre d'affichage de ces liens de pied de page est défini pour bloquer, vous pouvez voir qu'ils sont assis les uns à côté des autres et ce n'est pas ce que nous voulons. Comme je l'ai déjà dit, nous allons le transformer en une grille. Allons sur la grille. On va avoir trois colonnes et deux rangées. Par conséquent, je vais ajouter une colonne de plus ici. Joli. Je vais frapper Done. Notre grille est également prête. Cependant, comme vous pouvez le voir, nous n'avons pas de marge inférieure. Maintenant, notre conteneur touche le bord inférieur de notre écran. Ce n'est pas ce qu'on veut. Allons de l'avant et sélectionnons ce conteneur ici dans notre dossier de conception. Je vais vérifier la marge inférieure. Il est réglé sur 100 pixels. Que devrions-nous faire ? Si je vais de l'avant et que je sélectionne ce conteneur et essaie d'ajouter des marges inférieures, cela ne fonctionne pas. Par conséquent, je vais sélectionner notre section et je vais lui donner un rembourrage inférieur à la place. Ici, je vais définir le remplissage inférieur à 100 pixels. On y va. On a ce qu'on voulait, mais regarde ce qui se passe. Comme vous pouvez le voir, dès que j'ai ajouté un rembourrage à cette section, le rembourrage de cette section a également été modifié. Pourquoi c'est ça ? La raison en est que nous n'avons pas ajouté de classe combo à cette section. Comme vous pouvez le voir, nous n'avons pas de classe combo et ce remplissage inférieur a été ajouté à toutes les sections. Toutes les sections ont ce rembourrage inférieur supplémentaire et ce n'est pas ce que nous voulons. Comment pouvons-nous réparer ça ? Eh bien, je vais appuyer sur la commande Z ou le contrôle Z pour supprimer ce remplissage, pendant que cette section est sélectionnée, tandis que notre section de pied de page est sélectionnée, je vais lui donner une classe combo appelée pied de page. Maintenant, je peux facilement ajouter ce rembourrage supplémentaire sans affecter les autres sections. Je vais le régler à 100 pixels. On y va. Maintenant, ça a l'air incroyable. Les gars, c'est tout pour cette vidéo. J' espère que ça vous a plu et je vous verrai dans la prochaine. 51. CMS et contenu dynamique: Hé, dans cette vidéo, nous allons parler de CMS et de contenu dynamique. En ce qui concerne le développement web, nous avons deux types de pages web, nous avons des pages statiques et dynamiques. Quelle est la différence entre les pages statiques et dynamiques ? Eh bien, statique signifie fixe, et dynamique signifie quelque chose qui est plus fonctionnel et change en fonction de l'action de l'utilisateur. Si vous vous souvenez, je vous ai déjà dit que nous allons créer deux pages statiques et une page dynamique pour ces projets. Laisse-moi te dire ce que ça veut dire. Voici notre page d'accueil et nous avons créé tous les éléments de Webflow. Mais c'est une page statique en ce moment. Pourquoi ? Parce que le contenu de cette page ne va pas changer fréquemment. L' image va être corrigée. Ces logos vont être corrigés. Ce témoignage va être corrigé et ainsi de suite, c'est pourquoi c'est une page statique. Mais parfois, vous pourriez avoir besoin de créer des pages dynamiques. Laissez-moi vous donner un bon exemple. Supposons que vous vouliez créer un blog. Pour un blog, vous avez généralement des centaines ou des milliers de billets de blog différents. Par conséquent, vous devez créer des pages dynamiques. Eh bien, les pages dynamiques ont un contenu dynamique, cela signifie que nous pouvons créer la page une fois, puis nous pouvons simplement modifier le contenu encore et encore et encore, en fonction des actions de l'utilisateur. Pour un blog, nous pouvons créer une page de blog une fois avec une mise en page spécifique, puis simplement modifier le contenu encore et encore et encore, c'est pourquoi nous devons utiliser un CMS. Dans ce projet, nous allons créer une page dynamique pour nos projets. Comme vous pouvez le voir ici sur notre page d'accueil, nous avons trois projets différents et il dit des projets récents. Mais que se passe-t-il si cette agence crée plus de projets à l'avenir et qu'elle souhaite les présenter ici, devrait-elle vous contacter en tant que développeur web ou concepteur web et vous demander de modifier le contenu ? Eh bien, la réponse est non, parce que ce n'est pas un moyen efficace. Dans ce cas, vous pouvez créer une page dynamique, comme vous pouvez le voir ici, nous avons cette page de projet et il affiche les détails de chaque projet. Nous avons le sous-titre, nous avons le titre, nous avons la date d'achèvement. Nous avons quelques informations sur le projet, puis nous avons cette section sur les autres projets. Il peut être très difficile de créer des pages statiques si vous voulez modifier le contenu fréquemment. Quand devriez-vous utiliser une page statique et quand devriez-vous utiliser une page dynamique ? Eh bien, si vous voulez créer juste une page de destination avec des informations ou du contenu, vous pouvez aller avec des pages statiques parce qu'elles sont beaucoup plus faciles à créer et qu'elles ne prennent pas de temps. Cependant, si vous ou votre client souhaitez modifier le contenu fréquemment ou ajouter du nouveau contenu au site Web, il est préférable de créer des pages dynamiques. Ici, pour ce projet, nous allons créer une page dynamique. Comme vous pouvez le voir ici, la page du projet et ces projets vont être modifiés dynamiquement. Plus tard, si le client souhaite ajouter un autre projet, le projet sera automatiquement ajouté à la section des projets récents. Vous n'avez pas besoin d'aller de l'avant et de créer manuellement une page de projet distincte pour cela, car nous créons une seule fois une page de projet et si le client ajoute plus de contenu, le contenu de cette page sera modifié en conséquence. De quoi avons-nous besoin pour créer des pages dynamiques ? Eh bien, pour créer des pages dynamiques, nous avons besoin de contenu dynamique et nous devons stocker notre contenu quelque part. Comment pouvons-nous faire ça ? Eh bien, nous pouvons utiliser Workflow, CMS. Laissez-moi aller à Workflow, et si je vais à la section CMS ici, nous pouvons créer une collection CMS. Qu' est-ce que CMS signifie ? CMS signifie Content Management System et il vous permet de stocker du contenu, puis votre site Web peut référencer ces contenus encore et encore et encore. Une fois que vous avez apporté quelques modifications à ces contenus, toutes les pages dynamiques seront mises à jour immédiatement. Il est très avantageux d'utiliser des collections CMS si vous souhaitez mettre à jour le contenu fréquemment. La première chose que nous devons faire est de créer une collection CMS. Pour ce faire, vous devez cliquer sur cette icône bleue dans le coin supérieur droit, nous y allons. Ici, nous pouvons créer une nouvelle collection. À première vue, cela peut sembler compliqué, mais ne vous inquiétez pas, c'est très simple. En haut, nous avons quelques modèles de collection. Nous avons des articles de blog, des auteurs , des catégories, des projets, des clients, etc. Mais nous allons créer une collection à partir de zéro parce que je vais vous montrer comment vous pouvez créer une collection étape par étape. Une collection nous permet de créer une structure pour notre contenu. Si nous avons quelques projets, disons ici, chaque projet a du contenu. Nous avons une image, nous avons le nom de ce projet, nous avons le sous-titre. Ensuite, dans la page du projet ici, nous avons la date d'achèvement et nous avons cette information ici. Ce seront nos champs de collecte. Chaque collection a quelques champs, mais d'abord, nous avons besoin d'un nom de collection. Appelons ça des projets parce que nous allons créer un lien pour nos projets ici. Webflow crée automatiquement cette URL de collection pour nous. Tu n'as pas besoin de t'en soucier pour l'instant. Nous en parlerons plus tard. Comme vous pouvez le voir, il est dit page Projet. Une fois que vous avez créé une collection, Webflow crée automatiquement une page séparée pour votre collection, une page pour notre projet ici. Passons aux champs de collection, voici où nous devons ajouter quelques champs. De quoi avons-nous besoin pour notre projet ? Eh bien, évidemment, chaque projet a un nom, et rappelez-vous que chaque champ a un type spécifique, comme vous pouvez le voir ici, il dit texte brut, c'est parce que nous avons un nom. Ensuite, nous avons le slug, c'est juste l'URL que Webflow crée automatiquement pour nous, donc nous n'avons pas besoin de changer cela. Ensuite, nous pouvons ajouter quelques champs personnalisés, si je clique sur ce Ajouter un nouveau champ ici, ici nous avons différents types, nous avons des textes simples. Dès que je survolerai ces types de champs, vous pouvez voir sur le côté droit, nous obtenons quelques informations. Vous pouvez aller de l'avant et les lire un par un si vous voulez en savoir plus à leur sujet. Mais laissez-moi aller de l'avant et vous les expliquer rapidement. Eh bien, le texte brut est juste un texte simple ou un contenu de texte de base. Ensuite, nous avons du texte riche, eh bien, le texte riche est pour le contenu de forme longue. Supposons que vous vouliez avoir un paragraphe, puis un titre, puis une vidéo, ou une image, dans ce cas, vous pouvez utiliser un texte enrichi. Ensuite, nous avons l'image. Eh bien, vous pouvez l'utiliser pour une image. Ensuite, nous avons multi-image, si vous avez plus d'images, vous pouvez utiliser cette multi-image. Ensuite, nous avons lien vidéo, lien, e-mail, numéro de téléphone, date, commutateur, couleur, option, fichier, et référence et multi-références. Ces deux dernières options sont avancées. Nous n'allons pas en parler maintenant, mais pour l'instant, nous avons juste besoin d'aller de l'avant et de créer nos champs personnalisés en utilisant ces types simples. On a le nom ici. De quoi d'autre avons-nous besoin ? Laissez-moi aller de l'avant et vérifier mon dossier de conception ici. Ici, nous avons une image, donc évidemment nous avons besoin d'une image. Allons de l'avant et choisissez Image. On a besoin d'une étiquette. Je vais écrire Project Image. Nous pouvons ajouter un texte d'aide ici ou non. Si nous ajoutons ce texte d'aide plus tard, si un collaborateur veut modifier le contenu, il saura de quoi consiste ce champ, mais ne vous inquiétez pas maintenant. Ensuite, nous pouvons cocher cette case, il dit que ce champ est obligatoire. Je vais vérifier cela parce que nous ne pouvons pas créer un projet sans image de projet, donc je vais le vérifier, puis enregistrer le champ, voilà. Notre image de projet est prête. Quel serait le prochain champ ? Laisse-moi aller de l'avant et vérifier. Ici, nous avons ce sous-titre et ce sera notre type de projet. Si je vais à la page du projet ici, vous pouvez voir que juste sous le nom du projet, nous avons le type de projet, la conception de l' interface utilisateur et le développement d'applications. Par conséquent, ici, je vais aller de l'avant et ajouter un nouveau champ. Ce nouveau champ sera option parce que je vais créer des options et plus tard, lorsque je veux créer des éléments de collection, je peux choisir parmi ces options. Laissez-moi vous montrer comment ça marche. Cette agence de design dispose de services spécifiques. Par exemple, la conception de l'interface utilisateur et le développement d'applications, le développement web, la conception de l'expérience utilisateur. Nous connaissons déjà les services, c'est pourquoi nous pouvons créer des options par défaut, puis lorsque nous voulons créer des projets ou des éléments de collection, nous pouvons simplement choisir parmi ces options. Laissez-moi aller de l'avant et choisir l'option ici. Ensuite, je vais lui donner une étiquette, écrivons, Type de projet. Ici, en utilisant ce bouton vert, je peux ajouter quelques options. Permettez-moi d'ajouter quelques options ici. Je vais écrire la conception de l'interface utilisateur et le développement d'applications, je vais appuyer sur Entrée pour enregistrer. Ensuite, je vais créer une autre option. Écrivons le développement web. Je vais appuyer sur Entrée, je vais ajouter une autre option. Écrivons la conception de l'expérience utilisateur. Appuyez sur « Entrée ». Le prochain sera la conception de l'interface utilisateur, et le prochain sera juste le développement d'applications. Le dernier sera la conception UI UX. Ok, nos options sont prêtes. Ce champ est également obligatoire car nous ne pouvons pas créer un élément de collection sans choisir le type de projet Il sera donc obligatoire. Je vais cliquer sur « Enregistrer le champ ». Il nous faut deux champs de plus. On a besoin de la date d'achèvement. Comme vous pouvez le voir ici sur la page du projet, nous avons cette date d'achèvement. Laissez-moi aller de l'avant et créer un nouveau champ et cette fois je vais choisir la date et l'heure. Je vais écrire la date d'achèvement, et nous avons deux cases à cocher. Le premier dit Inclure le sélecteur de temps. Je vais vérifier ça. Comme vous pouvez le voir, lorsque je crée ces champs sur le côté droit, je peux prévisualiser mes champs personnalisés. Ici, j'ai l'image du projet, j'ai le type de projet, et j'ai la date d'achèvement et il va être nécessaire. Ensuite, je vais cliquer sur « Enregistrer le champ ». Enfin, je vais créer un champ pour le détail du projet ici, pour ces paragraphes. Permettez-moi d'aller de l'avant et de créer un nouveau champ. Cette fois, je vais choisir un texte enrichi. Pourquoi ? Parce que plus tard, le client peut facilement ajouter des images ou des vidéos sans mon aide. Ça va être si utile. Je vais choisir « Texte enrichi » et laissez-moi l'appeler Détails du projet. Ici, nous pouvons spécifier un nombre de caractères minimum ou un nombre maximum de caractères. C' est facultatif. Je vais le laisser. Je vais cocher cette case et cliquer sur « Enregistrer le champ ». Nos champs sont prêts. Nous avons le Nom, nous avons le Slug. Ce sont les informations de base et ensuite nous avons quelques champs personnalisés. Nous avons l'image du projet, le type de projet, la date d'achèvement, les détails du projet. Une fois que nous avons ajouté nos champs, sur le côté droit, nous pouvons prévisualiser nos champs. Ici, nous avons Nom, Slug, ce sont les informations de base. Ensuite, nous avons des champs personnalisés, image de projet, type de projet. Nous avons la date d'achèvement et les détails du projet. Si tout semble bien, vous pouvez appuyer sur le bouton « Créer une collection » et voilà. Nous avons créé avec succès notre collection CMS et sur le côté gauche, vous pouvez voir qu'il est dit Projects. Voici notre collection CMS. Si je clique sur ce projet, sur le côté droit, je peux créer des éléments de collection. C' est ainsi que fonctionne le CMS. C' est ainsi que nous pouvons créer une structure pour notre contenu. Nous créons des collections avec des champs personnalisés, puis nous créons des éléments pour cette collection particulière. Plus tard, nous pouvons simplement utiliser ces collections et éléments dans notre projet et concevoir autour de nos contenus dynamiques, disons. Ici, nous avons différentes options. On peut soit ajouter des objets fictifs. Si je clique sur Ajouter cinq éléments, Webflow crée des éléments aléatoires avec du contenu aléatoire pour moi. C' est une bonne option, surtout si vous n'avez pas le contenu ou si le contenu n'est pas encore prêt. Cependant, puisque nous avons le contenu, je vais aller de l'avant et appuyer sur le bouton « Nouveau projet » ici. Pourquoi il dit nouveau projet ? Comment sait-il que ce sera un projet ? Parce que nous avons nommé notre collection Projects et Webflow utilise automatiquement ce nom et le rendre singulier ici, et il est dit Nouveau projet. Si je crée une nouvelle collection et que je l'appelle membres, vous verrez ici un nouveau membre. Je vais frapper « Nouveau projet » et on y va. Nous avons nos champs ici. abord, nous devons spécifier le nom. Je vais écrire Simplify. C' est notre premier projet fictif, et comme vous pouvez le voir, cette limace a été créée automatiquement. Ensuite, ici, nous devons télécharger notre image de projet. Si je clique dessus, je peux choisir l'image à partir de mon ordinateur. Je vais choisir la première image. Vous avez ces images dans le dossier de l'actif que vous avez téléchargé auparavant. Maintenant, je vais sélectionner le type de projet en utilisant ces options. Comme vous pouvez le voir, ce sont les options que nous avons déjà créées. Je vais choisir « Conception de l'interface utilisateur et développement d'applications », puis je vais avoir besoin d'une date d'achèvement. Ici, en utilisant ce sélecteur de date, je peux simplement choisir ma date et mon heure. Permettez-moi d'aller de l'avant et de choisir une date précise. Je vais choisir le 1er juin et vous devez spécifier l'heure aussi, mais je vais le quitter car cela va me donner une heure par défaut. Ce n'est pas important, on ne va pas le montrer. Mais si vous voulez afficher cette fois, vous pouvez le spécifier ici également. Alors ici, je vais juste ajouter un texte factice. J' ai déjà préparé un texte. Je vais juste aller de l'avant et le copier et le coller. Vous pouvez également utiliser ce texte ici à partir du fichier de conception. Vous pouvez simplement le copier et le coller et ici il est dit simplifier comme bla, bla, bla, bla. De cette façon, je peux m'assurer que ces paragraphes sont liés à ces projets. Maintenant, laissez-moi appuyer sur le bouton « Créer ». Notre premier article de la collection est prêt et il dit mis en scène pour publication. Ce n'est pas encore publié parce que nous ne l'avons pas utilisé auparavant. Mais maintenant, je vais aller de l'avant et créer cinq autres articles de collection. Je vais créer cinq autres projets. Si vous avez tant de projets différents à créer, vous pouvez également utiliser l'option d'importation. Si je clique sur ce bouton Importer ici, je peux faire glisser et déposer un fichier CSV ici , puis Webflow crée tous les éléments pour moi automatiquement. Mais je vais aller de l'avant et créer manuellement ces projets. Permettez-moi d'aller de l'avant et de créer ce nouveau projet. Je vais l'appeler Dashcoin. Pour l'image, permettez-moi de choisir l'image dans mon dossier de section Projet, le second, puis le type de projet sera développement Web. Maintenant, je vais spécifier la date d'achèvement à autre chose. Laissez-moi choisir le 17 juin et je vais y ajouter les détails. Laissez-moi simplement coller les textes précédents ici et juste changer le premier mot que nous pourrions reconnaître que ce détail est lié à ce projet. Je vais copier ce nom Dashcoin et je vais le coller ici au lieu de simplifier. Permettez-moi de copier ce détail du projet parce que nous allons en avoir besoin. Je vais le créer et je vais répéter le même processus quatre fois de plus. Vous pouvez sauter cette partie ou vous pouvez simplement aller l'avant et créer ces projets un par un avec moi. Nommons le troisième projet Vectorify. Ensuite, je vais avoir besoin d'une image, la troisième image et le type de projet va être la conception de l'expérience utilisateur. La date d'achèvement va être autre chose, laissez-moi choisir le 23 juin. Joli. Je vais avoir besoin des détails du projet. Je vais coller le détail du projet précédent. Laisse-moi juste changer le premier mot ici, juste comme ça. Laisse-moi créer ça. Je vais aller de l'avant et créer trois autres projets. Celui-ci s'appellera Orbit, et une image de projet sera la quatrième. Le type de projet sera la conception de l'interface utilisateur et une date d'achèvement. Laissez-moi le mettre à autre chose, peut-être le 1er juillet, et je vais avoir besoin des détails du projet, alors laissez-moi le coller ici et je vais changer le premier mot en Orbit. Joli. Je vais créer ça. Ensuite, je vais créer deux autres projets. Ça va s'appeler Purifier. Laissez-moi choisir son image. Ce sera la cinquième image. Le type de projet sera la conception UI UX et la date d'achèvement que je vais choisir le 5 juillet. Les détails vont être les mêmes. Permettez-moi de changer le premier mot en Purifier. C' est sympa, ça crée. Last but not least, je vais aller de l'avant et créer le dernier projet, qui va s'appeler CryptoPie. Laissez-moi choisir l'image du projet. Ce sera la dernière image. Le type de projet sera le développement d'applications. La date d'achèvement va être disons le 9 juillet et les détails ici, je vais modifier le premier mot pour Crypto Pie. Joli. Nos articles de collection sont tous prêts et nous pouvons commencer à les utiliser. Comment pouvons-nous utiliser notre collection dans nos articles de collection ? Eh bien, nous pouvons utiliser une liste de collection et la page de collection que le Webflow a créé automatiquement pour nous. Dès que nous avons créé cette collection, Webflow a créé une page spécifique pour notre projet. Si je vais aux pages ici, vous pouvez voir que nous avons une page statique qui s'appelle Accueil. Ensuite, nous avons deux pages utilitaires, celles-ci sont créées par défaut. Si vous accédez aux pages de collection CMS, vous pouvez voir que Webflow a créé le modèle de ce projet pour nous. Si je clique dessus, rien n'est là et c'est bien parce que nous n'avons pas conçu ça. Que devrions-nous mettre ici ? Eh bien, nous devons concevoir notre page de projet ici. Puisque cette page de projet va être une page dynamique, nous devons la concevoir ici, à l'intérieur du modèle de ce projet, puis le contenu de cette page va être modifié pour chaque élément de collection. Comme vous pouvez le voir en haut, nous avons cette option d'article, si je clique dessus, vous pouvez voir que nous avons tous nos articles, mais ce sera le sujet de notre prochaine leçon. Pour l'instant, je vais vous montrer comment vous pouvez utiliser une liste de collection. Laisse-moi aller aux pages et je vais à la page d'accueil. Si je fais défiler ici, comme je l'ai mentionné précédemment, cette page est statique et ces contenus sont aussi statiques, mais maintenant il est temps de les remplacer par du contenu dynamique. Comment pouvons-nous faire ça ? Comme je l'ai déjà mentionné, nous avons besoin d'une liste de collection. Laissez-moi ouvrir cette section ici dans le navigateur et ensuite nous avons ce conteneur et à l'intérieur nous avons ce projet Wrapper et Project Head. Je vais aller à la section Ajouter, et si je fais défiler vers le bas juste sous la section CMS, nous avons cette liste de collection. Si je le glisser-déposer dans cette section ici, nous pouvons voir que nous allons obtenir ce wrapper de liste de collection, par défaut il a trois éléments différents, et il dit double clic pour se connecter à une collection. Maintenant, nous devons connecter ce wrapper de liste de collection à la collection que nous venons de créer à la collection du projet. Si vous double-cliquez dessus, ici vous aurez accès à ces paramètres de liste de collection, et à partir de la source, vous pouvez choisir des projets. On y va. Dès que j'ai connecté cette collection de listes wrapper à ma collection, vous pouvez voir que le nombre d'éléments ici a augmenté et maintenant nous avons le nom de nos articles, nous avons le nom de nos projets ici, CryptoPie, Purifiez, Orbitez, Vectorifiez, Dashcoin et Simplifiez. Cela signifie que tout fonctionne parfaitement. Que devrions-nous faire maintenant ? Si j'ouvre ce wrapper de liste de collection dans le navigateur, vous pouvez voir que nous avons deux éléments différents. Nous avons la liste des collections, et nous avons l'état vide. Nous n'avons pas besoin de parler de l'état vide maintenant, ce dont nous avons besoin est juste d'aller de l'avant et d'ouvrir cette liste de collection et à l'intérieur nous avons cet élément de collection. Nos cartes ici doivent être placées à l'intérieur de cet élément de collection, toujours votre contenu doit être placé à l'intérieur de l'élément de collection, pas dans la liste de collection. La liste de la collection est juste ce wrapper. Que devrions-nous faire maintenant ? Eh bien, c'est très simple. Je vais aller de l'avant et sélectionner la première carte, cette carte de projet. Je vais le faire glisser dans le navigateur et je vais le déposer à l'intérieur de l'élément de collection. C' est très important. Faites attention à la hiérarchie de vos éléments. Il devrait être imbriqué à l'intérieur de l'élément de collection, juste comme ça. Dès que j'ai déposé cet article dans cette liste de collection, vous pouvez voir que six cartes de projet différentes ont été créées ici pas une. Pourquoi ? Parce que le wrapper de liste de collection sait combien de projets nous avons. Et ces cartes de projet ? On n'en a pas besoin. Je vais sélectionner cette carte de projet, je vais appuyer sur Retour arrière ou Supprimer pour la supprimer, et je vais faire la même chose pour celle-ci. Qu' en est-il de ces projets wrapper ? En ce moment, ces projets sont empilés les uns sur les autres verticalement. La bonne nouvelle est que la liste de collection a également un paramètre d'affichage. Si je vais de l'avant et que je change le paramètre d'affichage de bloc en grille, nous obtiendrons exactement ce dont nous avons besoin. Laissez-moi aller de l'avant et lui donner un cours d'abord, je vais écrire Collection List. On y va et je vais changer le réglage de l'affichage en grille. Maintenant, j'ai deux colonnes et deux lignes. Je vais supprimer une de ces lignes, et je vais ajouter une colonne de plus ici. Joli. Ensuite, je vais changer l'écart à 40 pixels et je vais appuyer sur Terminé. Ça n'a pas l'air en ce moment, mais supporte moi, je vais te montrer comment on peut arranger ça. Tout d'abord, le contenu de toutes ces cartes est le même et nous devons corriger cela. Que devrions-nous faire ? Eh bien, nous devons connecter nos éléments comme l'image, le titre, la description du projet, et ce lien vers les champs que nous avons créés pour notre collection. C'est très simple. Si je clique juste sur cette image ici, et si je clique sur cette icône de paramètres ici, il dit est imagé à partir de projets. Si je coche cette case et puis je peux sélectionner une image de projet de champ, il vous présente automatiquement le champ approprié. Puisque j'ai sélectionné une image ici, elle ne me montre pas tous les champs, donc nous n'avons qu'un seul champ d'image, Project Image, je vais le sélectionner. On y va. Maintenant, les images sont différentes. Et le titre ? On va faire la même chose ici. Je vais sélectionner le titre. Je vais cliquer sur l'icône des paramètres et me laisser cocher Obtenir des textes de projets, et dans le menu déroulant, je vais choisir Nom comme ça. Maintenant, nous avons CryptoPie, Purify, Orbits, etc. Maintenant, laissez-moi faire la même chose pour la description du projet. Une fois que je l' ai sélectionné, je vais appuyer sur l'icône des paramètres et je vais cocher Obtenir des textes des projets. Ici, je vais choisir le type de projet, sympa. Enfin, je vais sélectionner ce bouton de lien, et je vais vérifier Obtenir l'URL des projets, mais attendez, nous n'avons pas créé d'URL pour nos projets. Oui, vous avez raison, mais Webflow l'a fait automatiquement. Tu te souviens quand on a parlé de limace ? C' est exactement l'URL que nous recherchons. Que devrait-il se passer ici ? Lorsque l'utilisateur clique sur ce lien, l'utilisateur doit être redirigé vers cette page de projet CryptoPie. Par conséquent, ici, je vais aller à la page Collection, et à partir de là je vais choisir Projet actuel. C' est ce qu'il faut faire ici. Nous pouvons cocher cette case, ouvrir dans un nouvel onglet. Je ne vais pas faire ça et il n'y a rien d'autre qu'on ait à faire. Maintenant, nos cartes utilisent du contenu dynamique et si nous apportons des modifications à nos articles de collection CMS, les modifications s'appliqueront automatiquement à toutes ces cartes. C' est incroyable, mais ici nous avons six cartes différentes. Nous pouvons filtrer nos articles. Comment ? Si je sélectionne mon wrapper de liste de collection et si je vais aux paramètres des éléments, juste à côté du panneau de style, nous avons différentes options ici, nous avons des filtres, ordre de tri, limites d'affichage. Passons aux limites d'affichage. Ici, je vais vérifier les éléments de limite. Ensuite, ici, je peux spécifier le nombre d'éléments que je vais afficher ici. Écrivons trois. Maintenant, nous avons trois éléments, mais ici nous avons CryptoPie, Purifier, Orbits, mais dans notre conception, nous avons Simplifier, Dashcoin, Vectorify. Maintenant, nous pouvons utiliser l'option d'ordre de tri. Si je clique sur ce bouton plus, je peux trier mes projets en fonction de la date d'achèvement, fonction du nom, fonction de la date créée. Il s'agit d'un champ que Webflow crée automatiquement pour nous. Je vais choisir la date d'achèvement et ici je peux choisir le plus ancien au plus récent et le plus récent au plus ancien. Je vais frapper toutes les listes à la plus récente et appuyer sur Enregistrer. On y va. Maintenant, nous avons Simplifier, Dashcoin et Vectorify, comme ça. Maintenant, ils sont commandés en fonction de leur date d'achèvement. Que devrions-nous faire d'autre ? Eh bien, ici cet emballage de liste de collection est en dehors de notre conteneur. C' est pour ça que ça prend tellement de place. Par conséquent, je vais aller de l'avant et juste le faire glisser et le déposer dans notre conteneur et je vais supprimer le wrapper de projets que nous avons créés avant juste comme ça. Maintenant, alors que ce wrapper de liste de collection est sélectionné, je vais aller de l'avant et lui donner une classe, écrivons, Collection List Wrapper. Je vais ajouter des marges supérieures, donnons-lui une marge supérieure de 70 pixels et nous sommes prêts à partir. Pouvez-vous voir à quel point il est facile d'utiliser un CMS, des collections et des listes de collections ? Dorénavant, ces contenus sont dynamiques et cette page web fait référence à notre contenu dans nos collections et articles de collection. Si je vais à mon CMS, et si je vais à, disons Simplifier ici, et je décide de modifier son nom à autre chose, écrivons Simplify plus et je l'sauvegarde, maintenant ce changement affecte cette carte ici comme Eh bien. J' ai besoin de prévisualiser ça ici, on y va, on a notre nouveau titre. Les gars, c'était beaucoup à digérer, alors résumons cette leçon. Tout d'abord, nous avons parlé de la CMS. CMS est l'endroit où vous pouvez créer des collections et, disons, créer des structures pour votre contenu. Pour créer une collection, vous devez créer des champs. Nous avons créé des champs personnalisés tels que l'image du projet, type de projet, la date d'achèvement et les détails du projet. Ensuite, nous avons créé quelques éléments de projet. Nous avons ajouté une liste de collection ici et nous avons connecté notre emballage de liste de collection à la collection de notre projet. Ensuite, nous avons glissé et déposé notre carte de projet à l'intérieur de cet élément de collection, et finalement, nous avons sélectionné tous nos éléments dans un sens unique, l'image, le titre , la description et le lien et nous les avons connectés avec le champ approprié ici. Par exemple, pour cette image, nous avons choisi l'image du projet, pour ce titre, nous avons choisi le nom du projet, comme vous pouvez le voir. Enfin, nous avons sélectionné notre emballage de listes de collection et nous sommes allés aux paramètres d'élément, à partir de là, nous avons limité le nombre d'éléments que nous voulions afficher ici à trois. En outre, nous utilisons l'option d'ordre de tri pour afficher notre contenu en fonction la date d'achèvement et du plus ancien au plus récent comme ça. Les gars, c'est tout pour cette vidéo. J' espère que ça vous a plu. Dans la vidéo suivante, nous commencerons à créer notre page de projet. On se voit alors. 52. Page du projet - Partie 1: Hé, dans cette vidéo, nous allons commencer à créer notre page de projet ensemble. Cette page, comme je l'ai déjà mentionné, va être une page dynamique. Par conséquent, son contenu sera aussi dynamique. Comment pouvons-nous travailler avec des pages dynamiques ? De la même manière que nous travaillons avec des pages statiques, rien ne change. La seule différence ici est que cette page va être un modèle pour notre page de projet et son contenu pourrait être modifié en fonction des éléments de nos collections. Tout d'abord, je vais aller à Webflow et voici notre page d'accueil. Si je vais à ces pages ici sous les pages de collection CMS, comme vous pouvez le voir, le modèle de ce projet a été créé par Webflow pour nous. Je vais cliquer dessus. De quoi avons-nous besoin pour cette page ? Comme vous pouvez le voir, nous avons besoin de la barre de navigation en haut. Au bas, nous avons besoin de cette section CTA et du pied de page. Nous avons déjà créé ces sections. Devrions-nous aller de l'avant et les copier et les coller ici ? On peut le faire, mais ce n'est pas un bon moyen. Tu te souviens quand on a parlé de symboles ? J' ai mentionné qu'il pourrait être très bénéfique si vous pouviez créer un symbole et réutiliser ce symbole encore et encore et encore et plus tard si vous voulez apporter des modifications à vos symboles, vous les faites une fois et cela affectera toutes les instances de ce symbole particulier instantanément. C' est exactement ce que nous allons faire. Maintenant, nous allons aller de l'avant et créer un symbole pour notre barre de navigation, pour notre section CTA et pour notre pied de page. Laisse-moi aller à Webflow. Avant de faire ça, laisse-moi te montrer quelque chose. Pouvez-vous voir que la couleur de l'arrière-plan est exactement la même que couleur de notre arrière-plan ici sur notre page d'accueil. Pourquoi c'est ça ? Nous n'avons pas modifié la couleur de l'arrière-plan de ce modèle de projet. Vous souvenez-vous quand nous avons changé la couleur de fond du corps, toutes les pages tag sur notre page d'accueil ? C' est pourquoi nous obtenons ici aussi la couleur de l'arrière-plan. En fait, si je créatif et plus de pages, toutes ces pages auront la même couleur d'arrière-plan et c'est exactement ce que nous voulons. Bien sûr, nous pouvons aller de l'avant et remplacer ça si vous voulez, mais dans ce cas, c'est tout à fait bien. Maintenant, je vais aller à « Ma page d'accueil » et d'ici je vais sélectionner mon « Navbar » en premier. Tu te souviens comment on a pu créer un symbole ? Oui, tu as raison. Nous avions deux options différentes. Nous pourrions soit faire un clic droit dessus et appuyer sur le bouton « Créer un symbole » ici, ou nous pourrions aller aux symboles juste ici et juste appuyer sur le bouton « Créer un nouveau symbole » juste ici. Je vais appuyer sur ce bouton et je vais le nommer Navbar. On y va. Notre symbole est prêt. Maintenant, nous sommes à l'intérieur du symbole maître. Je vais cliquer sur ce « Retour à l'instance ». Permettez-moi de passer à la section du CTA. Je vais également sélectionner cette section. Je vais faire la même chose. Laissez-moi créer un symbole et je vais le nommer section CTA. symbole de notre section CTA est également prêt. Enfin, je vais sélectionner mon pied de page et me laisser faire la même chose ici. Je vais créer un symbole et je vais le nommer pied de page. Nous avons créé avec succès trois symboles différents, mais maintenant il est temps d'aller de l'avant et de les réutiliser. Laissez-moi aller à « Pages » et je vais aller à « Modèle de projets » ici, puis je vais aller à la section « Symbole ». De là, je peux simplement les glisser et les déposer dans mon Canvas. Il y a aussi une alternative. Vous pouvez également utiliser le « Recherche rapide pour trouver vos symboles. Laissez-moi vous montrer comment. Si je sélectionne ce corps et si j'appuie sur la touche « Commande » sur la touche « Contrôle » de mon clavier, je peux rechercher le pied de page. Comme vous pouvez le voir ici, il a trouvé notre symbole de pied de page. Si je cherche la barre de navigation, on y va, symbole de la barre de navigation. Je peux juste cliquer dessus et c'est là. Notre navbar est là. Et les autres sections ? On va faire la même chose ici. Cette fois, je vais vous montrer comment vous pouvez les glisser et les déposer dans votre toile. Je vais aller à la section Symbole. De là, je vais faire glisser et déposer la section CTA dans mon Canvas et mettre chacun juste en dessous de la barre de navigation. On y va. Notre section CTA est également prête. Enfin, permettez-moi de faire glisser et de déposer ce pied de page. Je vais le mettre juste en dessous de ma section CTA. Notre barre de navigation est prête, notre section CTA est prête, et aussi le pied de page a été ajouté avec succès. La première partie de cette page a été créée. Comme vous pouvez le voir ici, nous avions la barre de navigation, la section CTA et le pied de page. Maintenant, il est temps d'aller de l'avant et de créer cette section de projet, mais nous allons le faire dans notre prochaine leçon. Les gars, c'est tout pour cette vidéo. J' espère que ça vous a plu. Je te verrai dans la prochaine. 53. Page du projet - Partie 2: Dans cette vidéo, nous allons continuer à travailler sur notre page de projet. Maintenant, il est temps d'aller de l'avant et de créer cette section de projet. Analysons cette section et voyons comment nous pouvons la structurer sur Webflow. Ici, nous devons créer une section, et à l'intérieur nous devons créer un conteneur. A l'intérieur de ce conteneur, nous avons besoin d'un titre, ce type de projet, cette date d'achèvement, l'image du projet, et enfin, les détails. Comme vous pouvez le voir ici, l'image de ce projet a quelques ombres portées, mais ce n'est pas une simple ombre portée. Si je fais un zoom avant, vous pouvez voir que cette ombre portée a des couleurs différentes. Je n'ai pas utilisé une simple ombre portée sombre parce que dans le monde réel, nous n'obtenons pas d'ombres sombres pour les images et les objets colorés. Par conséquent, il serait plus réaliste d'avoir les couleurs de notre objet, ou dans ce cas, notre image pour notre ombre portée aussi. Comment ai-je fait ça ? C' était si simple. Je viens de dupliquer cette image et j'ai mis ce calque dupliqué derrière notre image principale, puis j'ai ajouté cet effet de flou Calque. Laisse-moi te montrer à quoi ça ressemble. Si je diminue ce flou à zéro, vous pouvez voir que c'est exactement la même image ici, mais si j'augmente la quantité de flou, il sera flou et cela ressemblera à une ombre portée. Enfin, je réduis l'Opacité de ce calque dupliqué à 50 %. Nous allons également utiliser la même technique dans Webflow. Pour ces paragraphes, nous allons utiliser un texte enrichi parce que nous voulons que notre client, nous voulons que l'agence de design, puisse ajouter des médias riches comme des images, des vidéos, et modifier facilement les détails de chaque projet. Ici, nous avons cette rubrique et afin de créer cette section, le type de projet et cette date d'achèvement, nous allons créer un bloc div, et nous allons les mettre à l'intérieur de ce bloc div et enfin, nous allons tourner ce bloc div à un flex max, pourquoi ? Parce que nous voulons qu'ils touchent les bords de cette limite. Cela a l'air facile, alors allons-y et créons-le. Tout d'abord, je vais aller de l'avant et choisir mon corps. Je vais appuyer sur « Command K » ou « Control K ». Cherchons une section. Cette section a été ajoutée ici, juste en dessous de mon pied de page. Dans le navigateur, je vais le faire glisser et le déposer juste au-dessus de la section CTA, juste ici. Cette section va avoir une classe. Comme d'habitude, je vais lui donner un cours de section. On y va. Aussi, je vais lui donner une classe combo. Écrivons le projet. Cool. Maintenant, cette section nécessite un conteneur. Pendant qu'il est sélectionné, je vais appuyer sur « Command K » ou « Control K ». Cherchons un bloc div. Je vais lui donner la classe de conteneur. On y va. Notre conteneur est également prêt. De quoi avons-nous besoin à l'intérieur de ce conteneur ? Oui, tu as raison. Il nous faut un cap. Pendant que ce conteneur est sélectionné , appuyez sur « Command K » ou « Control K » et cherchez le titre. Ce sera H1, et je vais lui donner un cours. Écrivons le titre de la page du projet, Page __Titre. On y va. Je ne vais pas changer ce titre parce que plus tard, nous allons connecter tous ces éléments à nos champs de collections. Parce que nous allons travailler avec du contenu dynamique. De quoi d'autre avons-nous besoin ici ? Juste en dessous de cette rubrique, nous devons créer ce type de projet ainsi que cette date d'achèvement. Mais analysons cette section, la date d'achèvement. Puisque la date d'achèvement devrait être dynamique, ici, je vais créer deux blocs de texte différents : l'un pour cela terminé sur la section, et l'autre pour la date elle-même. Plus tard, lorsque nous connectons nos éléments à nos champs, nous allons simplement connecter le bloc de texte droit au champ de date d'achèvement. Laissez-moi aller de l'avant et créer un bloc div. Je vais sélectionner ce conteneur et je vais appuyer sur « Command K » ou « Control K ». Cherchons un bloc div. On y va. Je vais lui donner un cours. Écrivons Projet Type Wrapper, juste comme ça. A l'intérieur, je vais placer un bloc de texte ici. Tant qu'il est sélectionné, je vais chercher un bloc de texte. On y va. Ce bloc de texte va également avoir une classe. Écrivons Project Page __Type, et je vais modifier ses propriétés topographiques. Je vais aller à mon fichier de conception, je vais sélectionner ce type de projet, et comme vous pouvez le voir, j'utilise le milieu corporel. Body medium, sa taille de police est de 24 points et elle est aussi moyenne. Par conséquent, ici, je vais changer la taille à 24 pixels. En outre, son poids va être de 500 ou moyen. Sa couleur va être neutre, juste comme ça. Je ne vais pas modifier son texte. Cool, mais qu'en est-il de la section de la date d'achèvement juste ici ? Comme je l'ai mentionné, je vais créer un bloc div. Donc, je vais sélectionner ce wrapper de type de projet, puis je vais ajouter un bloc div ici à l'intérieur. Cette div va avoir une classe. Écrivons le projet __Achèvement. On y va. A l'intérieur de ce bloc div, nous allons placer deux blocs de texte. Lorsqu' il est sélectionné, appuyez sur « Commande K » ou « Contrôle K » et recherchez le bloc de texte. C' est notre premier bloc de texte, je vais simplement le copier, « Command C » ou « Control C », et le coller pour obtenir mon second bloc de texte. Maintenant, chacun de ces blocs de texte devrait avoir une classe. Je vais sélectionner le premier, et je vais lui donner un cours. Écrivons le Projet __Terminé, comme ça. Le second sera le Projet __Date. Maintenant, allons de l'avant et modifions ses propriétés CSS. Je vais sélectionner le premier, ce projet terminé. Permettez-moi d'aller de l'avant et de modifier sa taille de police à 20 pixels, ainsi que sa couleur à l'obscurité neutre. Et la seconde ? Le second, qui est ce projet 8, sera aussi de 20 pixels, mais sa couleur sera neutre. Bien, mais ça n'a pas l'air bien, pourquoi ? Parce que nous n'avons pas transformé ce blog div d'achèvement de projet à un flex max. Donc, je vais sélectionner ce bloc div d'achèvement de projet dans mon navigateur, puis je vais changer le paramètre d'affichage à flex max. Maintenant, la direction est horizontale et ils sont assis l'un à côté de l'autre, c'est exactement ce que je veux. Maintenant, je vais sélectionner le premier texte et je vais changer ses prises pour terminer. Pour voir à quoi cela ressemblera, je vais également changer ce texte. Bien que celui-ci va avoir un contenu dynamique. Mais juste pour voir à quoi ça ressemblera, je vais écrire le 22 juin 2021. Joli. Ici, nous avons besoin de quelques marges entre eux. Je vais sélectionner ceci terminé sur le bloc de texte, et je vais lui donner une marge de droite de cinq pixels, juste comme ça. Maintenant, ça a l'air beaucoup mieux. Mais comme vous pouvez le voir, ces deux éléments, ce type de page de projet et aussi ce blog div, sont assis l'un sur l'autre. Ce n'est pas ce qu'on veut. Je vais sélectionner ce type de projet Wrapper et je vais le transformer en une boîte flexible. La direction va être horizontale, cependant, je vais changer la justification à l'espace entre, pourquoi ? Parce que nous voulons qu'ils touchent les bords de cette limite. Je vais le mettre à l'espace entre. Bien, notre mise en page est presque prête. Laissez-moi vous rendre à mon dossier de conception. Si je sélectionne ce type de projet et si je maintiens la touche « Alt » ou « Option » enfoncée sur mon clavier, je peux voir qu'il a une marge supérieure de 20 pixels. Alors que ce bloc div est sélectionné, ce type de projet Wrapper, je vais lui donner une marge supérieure de 20 pixels. Ça a l'air beaucoup mieux maintenant. Passons maintenant à la partie suivante, qui est cette image. Ici, pendant que ce conteneur est sélectionné dans le navigateur, je vais sélectionner ce conteneur. Je vais frapper « Command K » ou « Control K ». Créons un nouveau bloc div, parce que nous allons créer un wrapper pour notre image. Ici, je vais écrire le bloc div, et ce bloc div va avoir une classe. Laissez-moi écrire le projet __Image __Wrapper. A l'intérieur, nous allons placer une image. Pendant qu'il est sélectionné, je vais appuyer sur « Command K » ou « Control K ». Cherchons l'élément image ici. On y va. Je vais donner à cette image une classe, alors créons une classe ici. Je vais écrire la page du projet __Image. Cette image devrait prendre toute la largeur de son parent, qui est ce nouveau bloc div que nous avons créé, ce wrapper d'image. Que dois-je faire ? Oui, vous avez raison. Je vais aller de l'avant et changer la largeur à 100. On y va. Maintenant, il prend toute la largeur de son parent, mais sa hauteur a également été augmentée. Comment puis-je réparer ça ? Laisse-moi aller à mon dossier de conception. Si je sélectionne cette image ici, si je double-clique dessus, vous pouvez voir qu'elle a une hauteur spécifique, 444 pixels. Par conséquent, je vais définir la hauteur ici à 444 pixels. Cependant, comme vous pouvez le voir, notre image ne prend pas toute la largeur maintenant, ne couvre pas cette zone. Par conséquent, je vais aller de l'avant et changer l'ajustement de remplissage à couverture. Maintenant, je vais double-cliquer dessus et nous allons choisir une image parmi les actifs pour l'instant, je vais choisir la première. Il couvre l'ensemble de l'emballage. Notre image est prête, mais qu'en est-il de l'ombre portée ? Comme je l'ai déjà mentionné, je vais dupliquer cette image et je vais la mettre derrière cette image principale et ensuite je vais y ajouter quelques filtres. Je vais faire un clic droit sur cette partie bleue ici, puis je vais choisir « Dupliquer ». Comme vous pouvez le voir maintenant, nous avons deux images identiques avec la même classe. Il est très important de modifier la classe de cette couche dupliquée. Pourquoi ? Parce que nous voulons modifier ses propriétés CSS. Je vais sélectionner ce calque dupliqué, et je vais aller de l'avant et cliquer sur cette petite flèche et laissez-moi dupliquer cette classe. Je vais le renommer en Page__Image__Effet du projet. On y va. Maintenant, il a une nouvelle classe et nous pouvons facilement aller de l'avant et modifier ses propriétés CSS. Comment mettre cette image derrière notre image principale ? Nous pouvons aller de l'avant et modifier sa position ici. Pendant qu'il est sélectionné, je vais changer sa position de statique à absolue. Comme vous pouvez le voir, c'est foiré. Ce n'est pas ce qu'on veut. Pourquoi cela arrive-t-il ? C' est parce que sa nouvelle position est relative au corps. Si vous vous souvenez quand nous avons travaillé avec la position absolue, j'ai mentionné qu'il cherche toujours un élément parent qui a la position relative. Si je vais de l'avant et que je change la position de ce wrapper d'image de projet en relative de statique, et que je sélectionne cette image dupliquée, je peux simplement définir sa position en haut à gauche. Maintenant, cette image est au-dessus de notre image principale. Comment pouvons-nous le mettre derrière notre image principale ? Nous pouvons utiliser l'index z. Ici, je vais définir l'index z à moins 1. De cette façon, je peux m'assurer que ce calque dupliqué avec cette classe d'effet d'image de page de projet est derrière mon image principale parce que je lui ai donné un index z négatif. Maintenant, nous devons aller de l'avant et y ajouter quelques effets. Si je passe à la section Effets, je peux aller à Filtres. Si j'appuie sur ce bouton plus, je peux y ajouter le filtre de flou. Réglons le rayon à environ 40 pixels. Juste comme ça. Comme vous pouvez le voir, nous avons notre ombre portée. Aussi, je vais augmenter l'intensité de mes couleurs. Je vais ajouter un nouveau filtre ici. Allons de l'avant et ajouter le filtre de saturation, et je vais définir son s'élève à 200 pour cent. Maintenant, comme vous pouvez le voir, l'intensité de mes couleurs a été augmentée. Cependant, cette ombre portée est trop lumineuse et n'a pas l'air réaliste. Je vais aller de l'avant et diminuer son opacité à 40 pour cent. On y va. Maintenant, ça a l'air beaucoup mieux, mais je vais faire encore une chose. Si nous sélectionnons cette ombre portée, je peux simplement la déplacer un peu vers le bas. Je vais ajouter les transformations 2D et 3D ici, et je vais le déplacer un peu vers le bas en utilisant l'axe Y. Laissez-moi le déplacer de 14 pixels, comme ça. Ça a l'air beaucoup mieux maintenant. Notre wrapper d'image de projet est également prêt. Maintenant, il est temps d'aller de l'avant et d'ajouter nos textes riches ici juste en dessous de cette image. Je vais sélectionner le conteneur, puis je vais lui donner une classe combo et nous allons écrire Project, juste comme ça. Enfin, je vais modifier son paramètre d'affichage car je veux que tous ces éléments s'empilent les uns sur les autres verticalement. Plus tard, lorsque nous voulons rendre notre design réactif, ce serait si bénéfique. Je vais changer son paramètre d'affichage en Flexbox et je vais changer la direction vers la verticale. Maintenant, pendant que ce conteneur est sélectionné, je vais appuyer sur la commande K ou Control K. Laissez-moi ajouter un texte riche ici. On y va. Notre texte riche a été ajouté ici, et je vais lui donner une classe. Écrivons Project__Détail. Laissez-moi vous rendre à mon dossier de conception. Je vais sélectionner ce paragraphe et je vais vérifier sa marge supérieure. Comme vous pouvez le voir, j'ai besoin d'une marge supérieure de 70 pixels. Pendant qu'il est sélectionné ici, je vais lui donner une marge supérieure de 70 pixels. Nous ne modifierons pas le contenu ici pour l'instant. Maintenant, allons de l'avant et modifions l'espacement entre ces éléments. Si je vais à mon fichier de conception et si je sélectionne ce type de projet, vous pouvez voir que sa marge inférieure est définie à 80 pixels. Je peux me diriger vers mon projet ici, je peux sélectionner ce wrapper de type de projet et je vais lui donner une marge inférieure de 80 pixels. Tout est prêt et nous pouvons passer à la section suivante. Laissez-moi vous rendre à mon dossier de conception. En dessous de ça, nous avons besoin de ces autres projets. Il ressemble exactement à cette section de projet récent, donc je pense qu'il serait sage de simplement le copier et le passer ici. Laisse-moi aller à Webflow. Je vais aller sur ma page d'accueil. De là, je vais sélectionner cette section, section Projets récents. Je vais le copier, appuyez sur Commande C ou Contrôle C. Ensuite, je vais aller à Pages et je vais aller à la page Modèle de projets, et laissez-moi sélectionner le corps et appuyez sur Commande V ou Contrôle V. Tout comme ça, cette a été ajoutée juste en dessous de mon pied de page, donc je vais juste la repositionner dans mon navigateur et je vais la mettre en dessous de ma section de projet. Tout d'abord, je vais aller de l'avant et dupliquer la classe combo de ce projet, et je vais la changer en Autres projets pour garder tout organisé. Ensuite, je vais changer ce nom ici de Projets récents à Autres Projets. Enfin, je vais modifier sa marge supérieure parce que maintenant c'est trop, c'est 200. Si je me dirige vers mon fichier de conception, si je le sélectionne, vous pouvez voir que sa marge supérieure est définie sur 70 pixels. Je vais le mettre à 70 ici. Si je sélectionne cette section, vous pouvez voir que nous avons trop de marge ici en haut. Je vais sélectionner cette section et je vais remplacer sa marge par défaut. Si je clique dessus, vous pouvez voir qu'il dit que la valeur vient de la section. C' est bon. Mais puisque nous avons ajouté ce nouveau projet de classe combo, nous pouvons simplement l'écraser sans affecter les autres sections. Je vais le régler à 70 pixels. La mise en page de notre projet est prête, et il est maintenant temps de connecter tous nos éléments à nos collections et champs de collections. Mais nous allons le faire dans notre prochaine leçon. J' espère que vous avez apprécié cette vidéo et je vous verrai dans la prochaine. 54. Page du projet - Partie 3: Hé, bienvenue. Dans cette vidéo, nous allons connecter tous nos éléments aux champs de notre CMS. Êtes-vous prêt ? Commençons. Tout d'abord, je vais sélectionner cette rubrique. Ce titre doit afficher le nom du projet. Si je clique sur cette icône de paramètres, je peux cocher cette case, il dit obtenir des textes de projets, c'est la collection que nous avons créée avant. Ensuite, je vais sélectionner le champ, je vais sélectionner « Nom (Texte brut) », c'est le nom de notre projet. On y va. Il a été modifié pour simplifier plus. Si vous vous souvenez, nous l'avons modifié. Mais pourquoi est simplement plus, pourquoi pas un autre projet ? C' est parce que si vous vous dirigez vers la barre supérieure ici, vous pouvez voir que nous avons cet article, et il dit simplifier plus. Ce modèle de projets a différents éléments, les éléments que nous avons créés les projets. Si je vais à CryptoPie, vous pouvez voir que ce titre est modifié automatiquement. Si je vais à Orbit, nous y allons, donc c'est la beauté d'utiliser Webflow CMS. Je vais aller simplifier plus pour l'instant. Ensuite, je vais sélectionner le type de projet, laissez-moi cliquer sur l'icône des paramètres, je vais cocher cette case, et laissez-moi choisir le champ. Celui-ci va être le type de projet, voilà, la conception de l'interface utilisateur et le développement d'applications. Ensuite, je vais sélectionner cette « Date du projet », et je vais cliquer sur ces paramètres. Laissez-moi cocher cette case, et je vais choisir le champ approprié. Ça va être la date d'achèvement, voilà, il a été changé au 1er juin 2021. Ici, nous pouvons également modifier le format. Si vous voulez l'afficher différemment, par exemple, si vous voulez également inclure l'heure, vous pouvez simplement modifier le format. Nous avons beaucoup de formats différents ici, donc c'est totalement à vous de décider, mais ça me semble bon. Maintenant, il est temps d'aller de l'avant et de sélectionner notre image, « Image de la page du projet », et je vais appuyer sur cette icône de paramètres. Laissez-moi vérifier ce Get Imaged from Projects, et je vais choisir Project Image. Mais qu'en est-il de l'ombre ? Eh bien, puisque nous avons dupliqué cette image pour notre ombre portée, nous avons juste besoin de la sélectionner, et nous avons juste besoin de la connecter à notre champ, tout comme notre image principale. Je vais cocher cette case et je vais sélectionner « Image du projet » dans le menu déroulant du champ, juste comme ça. Maintenant, il est temps de sélectionner notre détail de projet, ce texte enrichi. Je vais aller de l'avant et cochez cette case, et laissez-moi sélectionner un champ, « Détails du projet », là nous allons. Il a été modifié pour les détails des projets auxquels il est associé. Nos éléments sont connectés, et maintenant je peux aller de l'avant et vérifier. Si je change l'article ici en haut de simplifier plus pour purifier, voilà nous y allons. Le titre a été modifié, le type de projet a été modifié, la date a été modifiée, l'image et les détails du projet. Jetez un oeil à cela, l'ombre portée change aussi, car elle utilise également un contenu dynamique. Je vais aller à un autre article. Je vais aller au dashcoin, on y va, ça a l'air incroyable, n'est-ce pas ? Nous avons presque fini, mais il y a une autre chose que nous devons nous occuper, à savoir l'autre section du projet. Si je vais simplifier plus, et je fais défiler vers le bas, vous pouvez voir que dans d'autres projets, nous verrons aussi le projet simplifié plus. Cela n'a pas de sens, car nous devrions exclure le projet que l'utilisateur consulte actuellement. On devrait juste afficher d'autres projets ici. Si je me dirige vers mon dossier de conception ici, comme vous pouvez le voir, ici nous avons simplifié. Nous n'avons pas le projet simplifié dans les autres projets. Comment pouvons-nous faire ça ? Eh bien, c'est très simple. Je vais sélectionner cette « Collection List Wrapper ». Si je me dirige vers les paramètres Elements, ici nous avons cette option de filtres. Je vais appuyer sur ce bouton plus, et ici nous avons deux champs différents. Ici, nous avons Nom, Projet, Image du Projet. Nous pouvons simplement ajouter différents filtres, mais je vais choisir Project, et puis ici, nous avons un autre menu déroulant qui dit est ou non. Puis ici, il est dit projet en cours. Ce projet est le projet en cours, cela signifie que nous obtiendrons le projet que l'utilisateur consulte actuellement ici aussi, mais ce n'est pas ce que nous voulons. Je vais changer est de ne pas, et puis je vais frapper « Enregistrer », et là nous allons. Le projet simplifie plus a été supprimé ici. Ici, comme vous pouvez le voir, nous avons dashcoin. Si je vais à la page du projet dashcoin, ici nous n'avons pas de projet dashcoin, et c'est exactement ce dont nous avions besoin. Une autre chose que je voudrais mentionner ici est que si je vais à la page d'accueil, et si je me dirige vers les projets récents, je vais aller de l'avant et sélectionner ce « Collection List Wrapper ». Sous l'ordre de tri, nous avons sélectionné le plus ancien à le plus récent. Ça n'a pas de sens, pourquoi ? Parce que nous avons ici les projets récents, par conséquent, la date d'achèvement devrait être triée du plus récent au plus ancien. Mais pourquoi avons-nous choisi le plus ancien au plus récent ? C' est parce que lorsque nous avons créé ces projets, nous avons choisi au hasard les dates d'achèvement du projet. Puisque je voulais obtenir exactement le même design que celui que j'ai ici, Simplifier, Dashcoin et Vectorify, j'ai changé cet ordre de tri du plus récent au plus ancien au plus récent. Mais dans un projet réel, lorsque vous avez les projets récents, vous devez le trier du plus récent au plus ancien, donc chaque fois que l'agence ou le client ajoute un nouveau projet aux éléments de collection, il sera ajouté ici, donc gardez cela à l'esprit. Maintenant, je vais aller de l'avant, et vérifier tout, et voir si tout fonctionne parfaitement. Si je prévisualise mon projet, ici j'ai différents projets, je vais cliquer sur ce bouton « En savoir plus », voilà. Je vais le diriger vers la page du projet, et il dit simplifier plus, je peux faire défiler vers le bas, j'ai d'autres projets aussi bien. Je peux cliquer sur « Dashcoin », je serai redirigé vers la page dashcoins, parfait. Je vais retourner à la page d'accueil maintenant et essayons encore une fois. Je vais sélectionner « Vectorify », et tout est superbe. La seule chose que nous devons faire ici est juste changer la couleur de ces textes médias de portée parce que nous avons oublié de le faire. Si je vais de l'avant, et que je vérifie mon dossier de conception, ici nous pouvons voir qu'il n'utilise pas notre couleur foncée. Je vais aller de l'avant et sélectionner ce « Détail du projet », et je vais changer son style. Laissez-moi aller à la section typographie, et je vais modifier sa couleur en neutre, médium. Maintenant, ça a l'air beaucoup mieux. Les gars, c'est tout pour cette vidéo. J' espère que ça vous a plu. Je te verrai dans la prochaine. 55. Page de contact: Hé, dans cette vidéo, nous allons créer la page Contactez-nous ensemble. Cela va être une page statique, donc nous ne allons pas travailler avec notre CMS et tout contenu dynamique. Nous avons juste besoin de créer ce formulaire et c'est tout. Permettez-moi d'aller de l'avant et d'analyser tous les éléments de cette page. En haut, nous devons avoir la barre de navigation, comme d'habitude. Ensuite, nous devons avoir cette section Contactez-nous, et enfin le pied de page. Pour la barre de navigation et un pied de page, nous pouvons utiliser nos symboles, alors nous devons créer cette section Contactez-nous. A l'intérieur, nous devons mettre un conteneur, comme d'habitude, et ensuite nous devons avoir un en-tête et un bloc de formulaire. Ce bloc de formulaire va avoir différents champs de texte, comme nom complet, email, téléphone. Ici, au lieu d'utiliser un champ de texte, nous allons utiliser une zone de texte. Pourquoi ? Parce que le message de l'utilisateur peut être long et donc un champ de texte serait trop petit pour collecter ce type de données. Enfin, nous aurons ce grand bouton de soumission. Rien de compliqué. Commençons. Tout d'abord, je vais aller à Webflow, et je vais aller de l'avant et créer une nouvelle page statique. Si je vais à Pages, je peux appuyer sur ce bouton Créer une nouvelle page, puis je vais l'appeler Contactez-nous, et appuyer sur le bouton Créer, comme ça. Maintenant, il est temps d'ajouter notre barre de navigation et notre pied de page ici. Je vais aller à la section des symboles, et je vais glisser et déposer notre barre de navigation juste en haut, puis laissez-moi glisser et déposer notre pied de page juste en dessous. Entre les deux, nous allons créer une section, donc je vais sélectionner mon corps, et appuyez sur Commande K ou Contrôle K. Laissez-moi créer une section. Alors je vais lui donner un cours, un cours de section. Enfin, je vais le déplacer et le mettre entre ces deux symboles. A l'intérieur, on va avoir besoin d'un conteneur. D' abord, je vais donner à cette section une classe combo, et je vais l'appeler Contact. Ensuite, alors qu'il est sélectionné, voyons la touche Commande ou la touche Contrôle et cherchez un bloc div. Ensuite, je vais donner à ce bloc div la classe de conteneur, et nous sommes bons à y aller. A l'intérieur de ce conteneur, nous allons avoir besoin d'un cap. Tant qu'il est sélectionné, utilisons la recherche rapide et je vais écrire Heading, et ce sera H1. Alors donnons-lui un cours. Je vais écrire Contact__Heading. Enfin, nous devons modifier certaines de ses propriétés typographiques. Je vais commencer par sa taille de police, c'est 38 pixels. Je vais écrire 60 pixels, parce que nous avons utilisé 60 pixels pour nos en-têtes H1 avant, puis je vais changer sa couleur en noir neutre. Permettez-moi également de modifier sa hauteur de ligne. Je vais le changer à cent et peut-être dix pour cent. Enfin, nous allons lui accorder des marges inférieures. Je vais aller à mon fichier de conception, et si je le sélectionne, je peux voir qu'il a une marge inférieure de 80 pixels. abord, pendant qu'il est sélectionné, je vais supprimer sa marge supérieure par défaut. Je vais le mettre à 0. Ensuite, je vais changer sa marge inférieure par défaut à 80 pixels. De quoi d'autre ai-je besoin ? Juste en dessous, je vais avoir besoin d'un bloc de formulaire. Je vais sélectionner ce conteneur et je vais appuyer sur la touche de commande ou la touche de contrôle. Cherchons un bloc de formulaire. Voilà, notre bloc de formulaire est prêt. Maintenant, à l'intérieur de ce bloc de formulaire, comme d'habitude , nous avons deux champs de texte différents , et deux étiquettes, et un bouton, et nous allons modifier cela. Je vais aller de l'avant et supprimer un de ces champs de texte et une de ces étiquettes jusqu'à ce que je n'obtienne qu'un seul champ de texte et une étiquette. Je vais commencer par créer le champ Texte de nom. Je vais aller à mon dossier de conception. Ici, si je sélectionne ce nom complet, vous pouvez voir qu'il utilise la couleur moyenne neutre, et qu'il utilise le style de texte normal du corps, et sa taille de police est de 20 pixels ou 20 points. Je vais aller à Webflow et je vais lui donner un cours. C' est vrai, contact__Titre. Ensuite, je vais modifier certaines de ses propriétés typographiques. Commençons par son poids. Ça va être normal, et sa taille va être de 20 pixels. Enfin, la couleur va être neutre moyen. Cool. Notre étiquette est prête. Maintenant, je vais aller de l'avant et copier le texte ici, nom complet, avec cet astérisque, parce que ce champ va être requis. Voilà, notre label est prêt. Je vais le sélectionner. Permettez-moi de lui donner d'autres marges de bouton. Si je sélectionne cette étiquette ici, et que je vérifie la marge inférieure, si je maintiens la touche Option de mon clavier, ou la touche Alt, vous pouvez voir qu'elle a une marge inférieure de 10 pixels, donc je vais augmenter sa marge inférieure ici comme bien à 10 pixels. Mais qu'en est-il du champ de texte ? Je vais sélectionner ce champ de texte, et je vais vous donner la classe, parce que je vais changer son style. Écrivons le champ Contact__Form__Texte. Juste comme ça. Ensuite, je vais changer sa largeur à 100 pour cent, qu'il occupe toujours 100 pour cent de sa largeur parent. Aussi, je vais changer sa hauteur. Laissez-moi aller de l'avant et vérifier la hauteur que j'ai utilisée pour ce champ de texte. Comme vous pouvez le voir, sa hauteur est réglée à 70 pixels. Je vais régler sa hauteur ici à 70 pixels aussi. Ensuite, je vais aller de l'avant et modifier la couleur de son arrière-plan. Laissez-moi aller à mon dossier de conception. Ici, comme vous pouvez le voir, j'utilise ce code couleur avec une opacité de 10 pour cent. Je vais copier ces code couleur hex, c'est 6B708D. Ensuite, je vais le coller ici dans le champ de couleur de ce fond. Il fait trop sombre. Enfin, je vais diminuer son opacité, c'est tout beau montant, à 10 pour cent. C' est là. Mais comme vous pouvez le voir, il a une frontière. Si je le sélectionne, vous pouvez voir qu'il n'y a pas de bordure ici. C' est parce que les champs de texte ont par défaut des bordures. Comment pouvons-nous réparer ça ? Nous pouvons simplement changer le style de cette bordure ici en solide, et la retourner à None. Mais qu'en est-il du texte de l'espace réservé ? Eh bien, si vous vous souvenez, si vous double-cliquez sur votre champ de texte, ici vous pouvez entrer votre texte d'espace réservé. Je vais écrire Entrez votre nom complet. On y va. Le type de texte va être clair parce que c'est juste le nom et le nom, et il va être nécessaire. Je vais vérifier cette case à cocher requise. Cool. Mais qu'en est-il du style de l'espace réservé ? Eh bien, je vais aller à l'état réservé, juste comme ça, et je vais modifier sa couleur. Voyons ce que nous avons ici. Si je sélectionne ce texte, il utilise un médium neutre. Laissez-moi aller de l'avant et changer sa couleur en milieu neutre. Je vais augmenter sa taille de police à 17 pixels. Cool, notre champ de texte est prêt. Maintenant, je vais aller de l'avant et créer d'autres champs de texte, comme e-mail et téléphone. D' abord, je vais sélectionner ce bloc formé, et je vais lui donner une classe. Écrivons Contact__Form__Wrapper, puis pendant qu'il est sélectionné, je vais créer un nouveau bloc div. Touchons la commande K ou le contrôle K. Je vais chercher un bloc div. Ce bloc div va contenir ce champ de texte et cette étiquette. Je vais faire glisser cette étiquette à l'intérieur de ce bloc div, et je vais faire glisser ce champ de texte à l'intérieur de ce bloc div aussi. Assurez-vous qu'ils sont imbriqués correctement à l'intérieur. Ensuite, je vais sélectionner ce nouveau bloc div, et je vais lui donner une classe. Écrivons, contact__textField et je vais le mettre au-dessus de mon bouton Soumettre. Notre premier champ de texte est prêt. Cool. Maintenant, je vais sélectionner ce bloc div Contact__TextField, et je vais le dupliquer deux fois, juste comme ça. Ensuite, je vais modifier l'étiquette de la seconde pour envoyer un e-mail. Comme vous pouvez le voir ici, nous avons un e-mail et ce n'est pas obligatoire, donc nous n'avons pas besoin de cet astérisque. Le prochain sera le téléphone, et aussi, nous devons changer l'espace réservé ici. Je vais double-cliquer dessus et je vais changer l'espace réservé à autre chose. Essayons-le, entrez votre adresse e-mail. Je vais changer le type de texte en email et il ne sera pas nécessaire. Ici, modifions le nom de cette entrée en email. Double-cliquez sur ce champ de texte et je vais changer l'espace réservé pour entrer votre numéro de téléphone et aussi je vais changer le type de texte de simple en téléphone, et il ne sera pas nécessaire aussi. Changeons le nom ici en téléphone. Cool. Nos champs de texte sont prêts. Maintenant, nous avons besoin d'un champ de plus et nous allons utiliser une zone de texte pour cela. Laissez-moi aller de l'avant et sélectionnez l'un de ces blocs div. Ce contact__textField, je vais le dupliquer une fois de plus, il est là. Voici celui que je viens de dupliquer. Je vais modifier l'étiquette en message avec un astérisque. Cependant, ce champ de texte est trop petit pour notre message. Si je jette un coup d'oeil à la conception, vous pouvez voir ici nous avons une zone de texte pas un champ de texte. Par conséquent, je vais supprimer ce champ de texte, appuyer sur Retour arrière ou Supprimer sur votre clavier, et je vais sélectionner ce bloc div Contact__TextField qui est l'élément parent ici. Touchons la commande K ou le contrôle K et recherchons la zone de texte. C'est là. Puisque je vais utiliser le même style que celui que j'ai utilisé pour d'autres champs de texte, je vais juste utiliser la même classe que j'utilise pour ces champs de texte. C' est contact_form_textField. Permettez-moi de lui donner la même classe, Contact_Form_TextField. Laissez-moi double-cliquer sur cette zone de texte et je vais changer son nom en message, et l'espace réservé va écrire votre message ici et quelques points, et il va être nécessaire. Maintenant, il est temps de modifier notre bouton Soumettre. Laissez-moi revenir à mon dossier de conception. Comme vous pouvez le voir, ce bouton Soumettre aura le même style que celui que nous avons utilisé pour notre bouton principal, le bouton Contactez-nous, et aussi ce bouton Get in Touch. Sa hauteur va être de 80 pixels. Allons de l'avant et sélectionnez ce bouton. Je vais lui donner un cours. Ce sera le bouton Primaire, et puis, je vais lui donner une classe combo. Écrivons contact et le texte est superbe. Maintenant, nous devons modifier la mise en page de ce formulaire. Ici, comme vous pouvez le voir, ce champ de texte Nom complet prend toute la largeur de son parent, notre conteneur. Ensuite, ici sur la deuxième ligne, nous avons deux champs de texte et finalement, ce message va prendre toute la largeur de son élément parent. Ce bouton va prendre toute la largeur de son conteneur aussi. Comment pouvons-nous créer cette mise en page ? Eh bien, nous pouvons le faire en utilisant flexbox, mais ce serait beaucoup plus facile si nous pouvions le créer à l'aide d'une grille, car plus tard, lorsque nous voulons rendre notre site web réactif, il sera beaucoup plus facile de modifier notre grille plutôt qu'une flexbox. Je vais aller de l'avant et créer une enveloppe ici. Je vais sélectionner ce bloc de formulaire, et je vais lui donner une classe. Écrivons Contact__Form. Ce que nous devons faire est juste d'aller de l'avant et de sélectionner ce Contact_Form_Wrapper que nous avons créé avant et puis, je vais changer son paramètre d'affichage de bloc en grille. On y va. Pour cette grille, je vais avoir besoin de six colonnes et six lignes. Laissez-moi aller de l'avant et ajouter quatre colonnes supplémentaires en utilisant ce bouton Plus et quatre autres lignes. Aussi, je vais changer l'écart à 40 pixels et ici aussi, nous y allons. Mais ils n'ont pas l'air bien, c'est tout à fait bien. Je vais appuyer sur « Terminé » et si je sélectionne ce bloc div, et si je passe la souris sur ce petit cercle et je clique et fais glisser, je peux prendre toutes ces six cellules, juste comme ça. Ensuite, je vais faire la même chose pour le champ de texte de l'e-mail. Je vais le sélectionner et je vais cliquer sur ce cercle et juste faire glisser pour prendre trois cellules. Faisons la même chose pour le champ de texte du téléphone. Il va prendre les trois prochaines cellules. Le champ de texte du message va prendre tellement de cellules différentes. En fait, ça va prendre trois rangées entièrement. Ensuite, je vais sélectionner ce bouton primaire et il va prendre toutes ces six cellules. Jusqu' à présent, si bien. Laissez-moi prévisualiser mon projet. Comme vous pouvez le voir, ça a l'air bien. Cependant, cette zone de texte ressemble à un simple champ de texte, n'est pas ce que nous voulons. Allons-y et réparons ça. Si je sélectionne cette zone de texte, vous pouvez voir que sa hauteur est définie sur 70 pixels. Pourquoi ? Parce que nous lui avons donné ce contact_form_textField. Maintenant, je vais aller de l'avant et lui donner une classe combo. Écrivons un message. Je vais remplacer cette hauteur par défaut à 200 pixels. Maintenant, ça a l'air beaucoup mieux, laissez-moi en prévisualiser. Joli. Mais qu'en est-il de notre bouton ? Je vais le sélectionner et je vais lui donner une hauteur spécifique. Ça va être de 80 pixels, comme ça. Maintenant, nous allons prévisualiser notre projet. Ça a l'air sympa. Comme vous pouvez le voir, dès que j'ai prévisualisé mon projet, ce bouton s'est légèrement déplacé vers le haut. C' est parce que nous utilisons cette zone de texte et c'est très bien. Il ne va pas casser notre site Web puisque cette zone de texte ne remplit pas toute la hauteur de son conteneur, qui est ce bloc div Contact__TextField, ce bouton se déplace un peu vers le haut. D' accord. Maintenant, je vais sélectionner cette rubrique et je vais la changer pour nous contacter. Maintenant, nous allons prévisualiser notre projet. Ici, nous avons la barre de navigation, nous avons le Contact, le formulaire, le bouton Soumettre et le pied de page en bas. Tout semble bien sauf une chose, le remplissage de ce texte d'espace réservé. Allons-y et réparons rapidement ça. Si je vais à mon fichier de concepteur ici, vous pouvez voir que ce texte, a plus de remplissage. Il dispose de 22 pixels en haut et d'un rembourrage de 20 pixels à gauche. En fait, je vais changer le remplissage de tous ces champs de texte parce que si vous jetez un oeil à la conception ici, vous pouvez voir que tous ces champs de texte ont un remplissage différent. Comme vous pouvez le voir, 22 pixels en haut et 20 pixels à gauche. Que dois-je faire ? Au lieu de changer le remplissage ici pour cette classe de combo de message, je vais sélectionner mon Contact_Form_TextField, c'est notre champ de texte de base principal, et je vais changer le remplissage ici et le changement que je fais ici sera également appliqué à ce message. Laissez-moi sélectionner ce champ de texte et je vais changer son remplissage supérieur à 20 pixels, c'est le remplissage inférieur à 20, et c'est le remplissage gauche à 20. Maintenant, ça a l'air beaucoup mieux, n'est-ce pas ? Les gars, c'est tout pour cette vidéo. J' espère que ça vous a plu, et je vous verrai dans la prochaine. 56. Introduction à la réactivité: Maintenant que nous construisons notre site Web avec succès, il est temps de rendre notre site web réactif. Nous avons déjà parlé des bases des points d'arrêt. Mais maintenant, il est temps d'appliquer tout ce que vous avez appris auparavant à notre projet. En ce qui concerne la réactivité, nous pouvons choisir deux façons différentes. Nous pouvons aller de l'avant et rendre notre site web réactif section par section, ou nous pourrions faire de notre site Web des points d'arrêt réactifs par point d'arrêt. Les deux façons sont correctes. C' est une question de préférence. C' est à vous que vous devez choisir. Laissez-moi vous montrer comment ça marche. Je vais commencer par la première façon, qui est section par section. Cela signifie que je dois aller de l'avant et rendre cette barre de navigation réactive dans tous les points d'arrêt. En tablette, paysage mobile et portrait mobile. Cependant, dans la deuxième manière, qui est point d'arrêt par point d'arrêt, nous devons aller au point d'arrêt de la tablette et nous devons modifier toutes les sections ici jusqu'à ce que nous soyons satisfaits du résultat de ce point d'arrêt particulier et ensuite nous passerons au prochain point d'arrêt. C' est exactement ce que nous allons faire. abord, nous allons aller au point d'arrêt de la tablette et nous allons modifier tous les éléments ici. Ensuite, nous irons au paysage mobile et enfin, nous irons au portrait mobile. Mais vous êtes libre de choisir entre ces moyens. D' accord, les gars. C' est tout pour cette vidéo et nous commencerons à rendre notre site web réactif dans la prochaine vidéo. On se voit là-bas. 57. Tablette résolubilité: Dans cette vidéo, nous allons commencer à rendre notre site web réactif. Comme je l'ai déjà mentionné, nous irons point d'arrêt par point d'arrêt sur toutes les pages. On va commencer par la tablette. moment sur le bureau, tout semble bien, mais si je vais au point d'arrêt de la tablette, tout est foiré ici. Mais ne vous inquiétez pas, nous allons arranger ça. On va commencer par la barre de navigation. Comme vous pouvez le voir ici en haut, cette barre de navigation a quelques problèmes. La façon dont ces éléments sont alignés est erronée, car sur la tablette, nous n'avons plus besoin d'obtenir ce bouton Contactez-nous. On doit cacher ça. En outre, ce bouton de menu hamburger doit être placé sur le côté droit. Nous avons ici cette marge supplémentaire, cette marge supérieure supplémentaire. Allons-y et réparons ça. Tout d'abord, je vais double-cliquer dessus parce que pour changer ce symbole, nous devons entrer dans le symbole maître. Commençons par cacher ce bouton. Je vais le sélectionner, et si vous vous souvenez, lorsque vous voulez masquer un élément, vous pouvez vous diriger vers le paramètre Affichage de la mise en page, et vous pouvez changer son paramètre d'affichage à zéro. On y va. Il est caché maintenant, mais ici ce logo touche le bord de notre port de vue, qui n'est pas exactement ce que nous voulons. Je vais sélectionner ce conteneur, le conteneur à l'intérieur de notre barre de navigation. Comme vous pouvez le voir, le rembourrage est réglé sur 0. Je vais aller de l'avant et maintenez la touche d'option mon clavier ou de la touche Alt enfoncée et cliquez et faites glisser et ajouter 30 pixels de remplissage gauche et droit simultanément. Maintenant, ça a l'air beaucoup mieux. Mais qu'en est-il de cette marge supérieure ? Comme vous pouvez le voir ici, nous avons 70 pixels de marge supérieure, et je vais le sélectionner, puis je vais le définir à 0. Voilà, parce que sur tablette, nous n'avons pas besoin de cette marge supplémentaire. Rappelez-vous que les modifications que j'apporte ici affecteront également d'autres points d'arrêt. Plus tard, lorsque nous passons au paysage mobile et au portrait mobile, il serait beaucoup plus facile de changer la mise en page de ces points d'arrêt. Puisque nous sommes satisfaits du résultat, nous pouvons cliquer sur ce bouton de retour à Instance, et nous pouvons passer à la section suivante, qui est notre section héros. Notre section de héros est complètement désorganisée ici. Pourquoi ? Parce que si vous vous souvenez, pour ce conteneur, nous définissons la direction des pics de flux à l'horizontale. Cela était logique pour le point d'arrêt du bureau, mais pour la tablette et les points d'arrêt plus petits, il serait beaucoup plus logique de changer la direction à la verticale. Je vais sélectionner ce conteneur ici. Je vais modifier la direction à la verticale. Il semble déjà beaucoup mieux maintenant. Alors je vais tout aligner au centre ici. Cool. Maintenant, il est temps de sélectionner notre titre, puis je vais changer son alignement topographique de gauche en centre. Je vais aligner toutes ces couches de prise au centre. Je vais sélectionner cette Hero_Description, et je vais faire la même chose ici, mais leur alignement n'a pas l'air bon. Pourquoi ? Parce que si je sélectionne ce bloc de contenu de héros et que je fais défiler vers le haut, je peux ouvrir cet alignement et cet ordre ici. Ici, je peux modifier les alignements de l'enfant flex. Dans ce cas, ce bloc de contenu de héros Div est l'enfant flex de ce conteneur, parce que notre conteneur est une Flexbox, ce contenu de héros est son enfant. Je vais changer son alignement au centre. Ensuite, je vais changer la largeur maximale de ce contenu de héros. moment, la largeur maximale de ce bloc Div contenu héros est définie à 530 pixels. C'est très bien. Cependant, puisque nous avons changé la direction de notre Flexbox de l'horizontale à la verticale, il serait beaucoup plus logique d'augmenter la largeur maximale ici, puisque nous alignons tout verticalement maintenant. Je vais changer la largeur maximale de 530 pixels à 700 pixels. Joli. Ensuite, je vais sélectionner cette Hero_Description, et je vais faire la même chose pour ces blocs de texte aussi. Je vais augmenter sa largeur maximale à 600 pixels, mais il n'est pas aligné au centre. Comment puis-je réparer ça ? Eh bien, je peux simplement sélectionner ce contenu de héros de la chance et je peux changer son réglage d'affichage en Flexbox, puis je peux changer sa direction à la verticale. Enfin, alignez tout au centre, juste comme ça. Jusqu' à présent, si bon. Maintenant, il est temps d'aller à notre héros boutons Div bloc. Comme vous pouvez le voir, notre bouton « get in touch » a disparu. Pourquoi c'est ça ? C' est parce que lorsque nous changeons le paramètre d'affichage de notre bouton dans la barre de navigation, nous avons oublié d'ajouter une classe combo. Laisse-moi te montrer. Si je vais à la barre de navigation et si je sélectionne ces boutons primaires, vous pouvez voir que ce bouton n'a qu'une seule classe. Il s'agit de la classe de base du bouton principal. Notre bouton get in touch ici a également cette classe de bouton primaire. Laisse-moi aller dans ce bloc de Div. On y va. Si je le sélectionne dans le navigateur, vous pouvez voir que la classe de base est le bouton principal, et ici nous avons une classe combo. Par conséquent, j'ai deux façons de réparer cela. Je peux soit remplacer le paramètre d'affichage ici ou je peux aller avant et ajouter une classe combo au bouton dans notre barre de navigation. Je pense qu'il serait beaucoup plus facile de remplacer le paramètre d'affichage en noir ici. Depuis que nous avons ces héros combo classe. Je vais le mettre en noir, et c'est là. Il apparaît à nouveau. Mais ces boutons devraient s'asseoir l'un à côté de l'autre. Ils ne devraient pas s'empiler l'un sur l'autre. Je vais sélectionner ces boutons héros, bloc Div, puis je vais changer son réglage d'affichage Flexbox et la direction est réglée sur horizontale. Joli. Nos boutons sont également superbes. Ici, comme vous pouvez le voir, nous avons tellement de marges supérieures et ce n'est pas ce que nous voulons. Si je sélectionne ce contenu de héros, vous pouvez voir que par défaut il a une marge supérieure de 114 cellules de pointe. C' est la marge que nous avons définie dans le point d'arrêt du bureau. Je vais remplacer ça à 0 maintenant, mais nous avons encore tellement d'espace vide ici. Je vais sélectionner ma section. Ici, la marge supérieure est définie sur 100 pixels. Je vais le changer à 50. Maintenant, tout a l'air super. Mais qu'en est-il de la section image ? Comme vous pouvez le voir, elle a l'air si grande. Allons-y et réparons ça. Laissez-moi sélectionner cette image de héros, bloc Div, et je vais aller à l'intérieur et laissez-moi choisir cette image principale. Comme vous pouvez le voir, on ne lui a pas donné de cours. Je vais aller de l'avant et lui donner un cours. Maintenant, écrivons Hero__ Image__Main. Je peux double-cliquer dessus. Comme vous pouvez le voir, la largeur est définie sur auto. Je vais le réduire à quelque chose autour de 500 et peut-être 60 ou 70 pixels. Vous pouvez essayer différents nombres ici si vous n'avez pas de nombre spécifique et voir si cela semble bien ou non. Maintenant, ça a l'air beaucoup mieux. Ces cartes sont trop grandes aussi. Je vais sélectionner ces cartes de héros 1, et je vais la réduire un peu comme ça. Ici, la largeur est de 328 pixels. Pour celui-là, je vais le mettre à 328 aussi. Mais comme vous pouvez le voir ici, nous n'avons pas assez d'espace entre nos boutons et nos images. Eh bien, je vais sélectionner cette image de héros, et je vais lui donner une marge supérieure. Permettez-moi d'augmenter la marge supérieure à environ 40 pixels. Notre section de héros est géniale maintenant. Maintenant, nous pouvons passer à la section suivante. Si je sélectionne cette grille, vous pouvez voir que sur tablette nous n'avons pas autant d'espace. Par conséquent, nous pouvons supprimer l'un de ces logos lorsque nous allons à la tablette ou des points d'arrêt plus petits. Comment pouvons-nous faire ça ? C' est si simple. Je peux simplement sélectionner ce bloc Amazon Div, le dernier logo. Je vais lui donner une classe combo parce que nous allons changer son paramètre d'affichage à zéro, et nous n'allons pas affecter les autres logos. Écrivons Amazon ici. Ensuite, je vais changer son paramètre d'affichage de flex à none. On y va, il a disparu, mais ici nous avons tellement d'espace. Ne serait-ce pas mieux si nous pouvions avoir deux lignes de logo au lieu d'une ligne ? Je pense que oui. Je vais éditer cette grille. Si je sélectionne ce logo de grille, et si je clique sur ce bouton rose ici, je peux simplement ajouter une ligne de plus et je peux supprimer certaines de ces colonnes. Laissez-moi supprimer ces colonnes. Maintenant, j'ai une grille deux par deux. Je vais changer l'écart ici pour la colonne à 40 pixels. Laisse-moi frapper « Terminé ». Ils ont l'air bien, mais ils ne sont pas centrés, comme vous pouvez le voir ici, ils sont alignés sur le côté gauche de leurs cellules. Comment pouvons-nous réparer ça ? Alors que ce Grid_Logos est sélectionné, je peux changer son alignement au centre et ici, au centre aussi. Maintenant, ils ont l'air incroyables. La section de notre client est également prête. Maintenant, nous pouvons passer à la section suivante. Ici, nous avons la section du projet récent, et je pense que nous n'avons pas besoin de modifier quoi que ce soit ici. Permettez-moi de changer la dimension de cet écran pour voir si nous devons changer quelque chose ou non. Si je prends cette poignée sur le côté droit et que je traîne en termes de fluidité, ils ont l'air bien. Mais ici, nous avons un problème. Comme vous pouvez le voir, ces boutons en savoir plus, déplacer un peu vers le bas. C' est parce que cette description de projet a des marges inférieures. Je vais le sélectionner, et je vais réduire cette marge de 40 à 10. Maintenant, ça a l'air beaucoup mieux. On y va. Maintenant, nous pouvons aller à l'autre section, qui est la section du témoignage. Que devrions-nous faire ici ? Eh bien d'abord, nous devons diminuer sa marge supérieure. Je vais sélectionner cette section, et je vais diminuer sa marge supérieure de 200 pixels à 100 pixels parce que c'est trop maintenant. Ça a l'air beaucoup mieux, alors je vais sélectionner cette rubrique de témoignage. Je vais définir la largeur maximale pour que cela ait un vrai texte de ligne ici. Je vais écrire 400 pixels. On y va. Ensuite, je vais modifier son alignement de texte ici au centre et permettez-moi d'augmenter la hauteur de la ligne à 150. Cinquante pour cent et la prochaine chose que nous devons réparer ici, c'est l'arrière-plan de notre orbite. Comme vous pouvez le voir, notre orbite a été répétée. Je vais sélectionner ma section et je vais me diriger vers les milieux ici. Si je clique sur cette image d'orbite, vous pouvez voir que la position est définie en haut à gauche et que l'option de tuile est activée. Je vais mettre la tuile sur la tuile aube, puis je vais la repositionner au centre et enfin, je vais changer sa taille pour couvrir au lieu de contenir, maintenant il a l'air génial. La prochaine chose que je vais modifier ici est la taille de ces Memojis. Si je les sélectionne ici, vous pouvez voir que sa largeur et sa hauteur sont réglées à 150 pixels. Puisque nous avons moins d'espace sur une tablette, je vais aller de l'avant et la réduire à 130 par 130 pixels. Puisque ces Memojis ont leurs propres classes de combo, les modifications que j'apporte à ce premier Memoji ne s'appliquent pas aux autres Memojis ici. Nous pouvons soit aller de l'avant et modifier la taille de chaque memoji, ou je pourrais juste annuler cette opération, c'est la commande Z ou CTRL+Z. Je peux supprimer ces classes combo. Il a été déplacé vers le bas, c'est tout à fait bien. Ensuite, je peux diminuer sa largeur et sa hauteur à 130 par 130 pixels et encore une fois, je vais y ajouter sa classe combo, une là nous allons. Notre section sur les témoignages est également faite. Passons maintenant à la section Services. Je pense que tout va bien ici, mais il y a un problème. Si je diminue simplement cette dimension, vous pouvez voir que ce bouton En savoir plus se déplace vers le bas et qu'il n'est pas aligné avec d'autres boutons en savoir plus. C' est un problème, alors comment pouvons-nous résoudre ça ? Je vais sélectionner cette description du projet et je vais augmenter sa marge inférieure de 10 à, disons, 50 pixels. Ensuite, je vais sélectionner le bloc div de contenu de service. C' est le bloc div qui contient le texte du service et ce bouton, comme nous pouvons le voir ici. Je vais mettre un haut spécifique à ça. En ce moment, il est réglé sur auto je vais le mettre à 100 pour cent, qu'il prend toute la hauteur disponible de ma carte, juste comme ça maintenant c'est réparé. Laissez-moi vérifier une fois de plus, tout semble parfait maintenant. Passons maintenant à la section suivante, qui est notre CTA. Comme vous pouvez le voir, notre bouton a disparu ici à nouveau. C' est le même problème que nous avons eu avec ce bouton ici, avec ce bouton tactile obtenir donc nous devons juste remplacer son paramètre d'affichage pour bloquer. Je vais double-cliquer sur cette section CTA et si je vais au conteneur et je cherche mon bouton à l'intérieur du formulaire ici, je peux le sélectionner et je peux le remplacer pour le bloquer. n'y a rien d'autre que nous devons faire, tout a l'air bien. Mais qu'en est-il du pied de page ? Laisse-moi vérifier. Le pied de page semble aussi bien. La seule chose que je vais faire est de diminuer sa marge supérieure parce qu'ici nous avons trop d'espace. Je vais double-cliquer dessus. Ici, comme vous pouvez le voir, il a une marge supérieure de 200 pixels. Je peux le réduire à 100 pixels, maintenant il semble beaucoup mieux. Je vais faire la même chose pour la section CTA. Si je double-clique dessus, vous pouvez voir que sa marge supérieure est réglée à 200, je vais la mettre à 100 ici pour avoir un espacement cohérent. Et ça, nos services ici ? La même chose ici aussi. Cependant ici, je n'ai pas de classe combo, donc je vais ajouter une classe combo ici. Je vais écrire nos services et ensuite je vais diminuer sa marge supérieure de 200 à 100 pixels. Ça a l'air beaucoup mieux maintenant. Mais ici, comme vous pouvez le voir, nous avons toujours le problème avec ce bouton En savoir plus. Ici, si je sélectionne cette description du projet, vous pouvez voir que sa marge inférieure est définie sur 50, c'est trop, donc je vais la réduire à 10 pixels, et maintenant le problème est résolu. La dernière chose que je vais faire ici est de sélectionner cette section, cette section récente du projet, et je vais diminuer sa marge supérieure de 200 à 100 pixels. Maintenant, tout a l'air super. Allons-y et vérifions tout. Notre Nav bar a l'air bien, je vais vérifier sa fluidité. Notre section héros a l'air bien, je vais faire défiler vers le bas, notre section logo semble bien, les projets récents, la section témoignage, puis nous avons nos services, la section CTA, et notre pied de page. Tout a l'air super. Notre page d'accueil est terminée, mais qu'en est-il des autres pages ? Maintenant, il est temps d'aller de l'avant et de rendre nos autres pages réactives aussi, comme nous contacter et la page du projet. Laissez-moi aller aux pages. De là, je vais aller à la page Contactez-nous. Comme vous pouvez le voir, tout est prêt semble bien. Pourquoi c'est ça ? C'est parce qu'on a utilisé une grille ici. Lorsque vous utilisez des grilles au lieu de flexibles, elles sont réactives par défaut. Comme vous pouvez le voir, c'est fluide et tout est superbe, donc nous n'avons pas besoin de changer complètement la mise en page. La seule chose que nous devons faire ici est de sélectionner notre bouton et juste remplacer ce paramètre d'affichage de zéro à bloquer, juste comme ça. Maintenant, vous pouvez voir que ça a l'air super, sympa, si je prévois ça. Une autre chose que j'ai remarqué ici, c'est cette marge supérieure. On a tellement d'espace ici en haut. Je vais aller de l'avant et rapidement réparer ça. Si je sélectionne cette section, vous pouvez voir qu'elle a une marge supérieure de 200 pixels. Je vais le réduire à 100 pixels et voilà, notre page Contactez-nous est aussi réactive. Maintenant, allons de l'avant et consultez notre page de projet. Si je vais à la page de collection CMS et si je vais à la page du projet, ici je peux vérifier si tout semble bien ou non. Permettez-moi de diminuer la dimension, jusqu'à présent si bonne. Nous n'avons pas besoin de modifier la partie supérieure. Et ici ? Eh bien, je pense que nous pouvons augmenter la taille de la police de ce texte de portée, mais pas seulement pour la tablette, nous pouvons l'augmenter pour le bureau aussi. Je vais aller au point d'arrêt du bureau pendant une seconde et pendant qu'il est sélectionné, je vais l'augmenter à 20 pixels. Ensuite, je vais augmenter la hauteur de la ligne à 150 pour cent. Ça a l'air beaucoup mieux. Nous avons oublié de l'augmenter avant, et maintenant c'est réparé. Laisse-moi voir si j'ai besoin de changer quelque chose d'autre ici, ça a l'air bien. Qu' en est-il de ces autres cartes de projets ? Laisse-moi voir, non, ils sont superbes. Qu' en est-il de la section CTA ? Il a l'air bien aussi, le pied de page semble bien aussi. Je n'ai pas besoin de modifier quoi que ce soit d'autre. C' est la beauté de créer des sites Web avec Webflow, la plupart des choses sont réactives par défaut, donc nous n'avons pas besoin d'apporter autant de changements différents. Les gars, c'est tout pour le point d'arrêt de la tablette. Nous avons modifié avec succès notre page d'accueil, page Contactez-nous et la page Projet. Maintenant, il est temps de passer au paysage mobile. C' est la tâche de notre prochaine leçon. se voit dans la vidéo suivante. 58. Rétivité Paysage mobile: Hey, maintenant il est temps d'aller de l'avant et de travailler sur le point d'arrêt du paysage mobile. Êtes-vous prêt ? Commençons. Je vais aller dans le paysage mobile ici, et voyons si nous devons faire quelques changements ici. Cette rubrique semble un peu grande pour la dimension paysage mobile. Par conséquent, je vais le sélectionner et je vais diminuer sa taille de police de 60 pixels à 40 pixels. Je vais faire la même chose ici, description. Je vais le sélectionner. Comme vous pouvez le voir, sa taille est réglée à 20 pixels, je vais le définir à 17 pixels. Nous n'avons pas besoin de modifier nos boutons. Cette section a l'air bien aussi. Cependant, pour le paysage mobile et le portrait mobile, je pense qu'il est beaucoup plus logique de cacher ces deux petites cartes, parce que sur les écrans mobiles nous n'avons pas tellement d'espace. Par conséquent, nous n'avons pas besoin de rendre notre design bruyant. Je vais sélectionner cette carte de héros 1, et je vais aller de l'avant et définir son paramètre d'affichage sur zéro, ici aussi bien pour ces cartes de héros 2. On y va, et ils sont cachés sur le paysage mobile et sur mobile portrait. Parce que, comme vous vous en souvenez, les changements que nous apportons à nos points d'arrêt vont tomber en cascade. Passons à la section suivante. Notre section de héros a l'air bien. Je vais faire défiler vers le bas. Et la section client ? Ça a l'air bien aussi. Cependant, ici nous avons tellement d'espace, donc je vais sélectionner cette section client ici, et ensuite je vais définir sa marge supérieure à zéro au lieu de 130 pixels, juste comme ça. Maintenant, cela semble beaucoup mieux, parce qu'en ce qui concerne l'interaction mobile, nous ne voulons pas que l'utilisateur autant défiler pour pouvoir consommer le contenu. Par conséquent, si nous le pouvons, nous devrions réduire les marges entre nos sections. Qu' en est-il de la section des projets récents, ici nous avons un problème. Comme vous pouvez le voir, ces cartes sont en dehors de notre écran. On y va. Comment pouvons-nous réparer ça ? Eh bien, la meilleure solution est de simplement sélectionner cette liste de collection. Si vous vous en souvenez, nous utilisons la grille pour cela. Je vais modifier l'écran. Ici, nous avons une ligne et trois colonnes. Je vais cliquer sur ce bouton rose, et je vais supprimer deux colonnes et ajouter deux lignes pour les empiler verticalement. Permettez-moi d'aller de l'avant et d'enlever deux colonnes ici, et d'ajouter deux lignes. On y va, mais ici on a un problème. Comme vous pouvez le voir, cette carte ne prend pas toute la largeur de son parent. Comment pouvons-nous réparer ça ? Si je vais de l'avant et sélectionnez mon bloc div ici, ce bloc div de voiture de projet, vous pouvez voir que nous avons défini une largeur maximale pour cela. Je vais changer cette largeur maximale de 340 pixels à 100 pour cent pour prendre toute la largeur de son élément parent. On y va. Maintenant, nous prenons toute la largeur de sa cellule dans notre grille et le problème est résolu. Maintenant, laissez-moi vérifier. On y va. Tout a l'air fluide, ça a l'air incroyable. Et la section suivante ? Wow, ici tout est désorganisé. Allons-y et réparons ça. abord, je vais sélectionner ce titre et je vais réduire sa taille de police de 40 pixels à 30 pixels. Aussi, je vais augmenter sa largeur maximale de 400 pixels à 500 pixels, juste comme ça. Ensuite, je vais sélectionner notre conteneur ici. Si je fais défiler vers le haut, vous pouvez voir que la justification est définie sur l'espace autour. Je vais le changer en centre. Permettez-moi de sélectionner ce texte de témoignage et de réduire sa taille de police à 17 pixels. Il est trop grand pour notre écran mobile, et je vais lui donner des marges inférieures. C' est à 30 pixels de marge inférieure ici. Je vais sélectionner mon titre ici, et je vais augmenter sa marge inférieure à 30 pixels pour avoir un espacement cohérent pour tous nos éléments. Maintenant, tout a l'air bien. Comme vous pouvez le voir en termes de fluidité, ça a l'air bien, donc nous sommes prêts à y aller. Passons à la section suivante. Ici, nous avons le même problème que nous avons eu pour cette section récente du projet. La solution est la même. Je vais aller de l'avant et sélectionner cette grille de services, puis je vais changer cette grille. Je vais supprimer deux colonnes. Ensuite, je vais ajouter deux lignes ici. Ensuite, je vais sélectionner cette carte de service et changer sa largeur maximale de 340 pixels à 100 pour cent, qu'elle prenne toute la largeur de son élément parent. Tout a l'air bien sauf cette icône. Sélectionnons-le. Comme vous pouvez le voir, il s'agit d'un enfant flexible, et si nous nous dirigeons vers la taille ici sur le côté droit, vous pouvez voir qu'il est réglé pour rétrécir si nécessaire. Nous avons deux autres options. Nous avons grandi si possible et nous n'avons pas de rétrécissement ou de croissance. Je vais le mettre pour ne pas rétrécir ou grandir, annonce là où on va, ça semble bien maintenant. Cependant, comme il a une classe combo, le changement s'applique uniquement à ce bloc div particulier. Je vais réinitialiser cette propriété, maintenez la touche « Option » ou « Alt » enfoncée sur votre clavier et cliquez dessus. Ensuite, je vais supprimer cette classe de combo. Maintenant, je vais changer la taille pour ne pas rétrécir ou grandir. Enfin, je vais y ajouter la première classe combo. Maintenant, tout a l'air bien. Laisse-moi vérifier. Mais ici, nous avons un autre problème. Comme nous pouvons le voir, cette description de projet n'a pas assez de marge inférieure. Pendant que nous sommes dans le point d'arrêt du paysage mobile, je vais sélectionner cette description du projet et je vais l' augmenter de 10 pixels à 40 pixels. Maintenant, ça a l'air beaucoup mieux. Pouvez-vous voir à quel point il est facile de rendre votre site web réactif ? Vous avez juste besoin de modifier les styles sur différents points d'arrêt. Cette section a l'air bien aussi. Qu' en est-il de la section CTA ? Cette section nécessite quelques modifications, alors continuons et apportons quelques modifications. Tout d'abord, je vais sélectionner ce titre et je vais diminuer sa taille de police de 40 pixels à 30 pixels. Ce sous-titre semble bien, et ici notre forme a une direction horizontale. Je vais le changer à la verticale, mais ce bouton ne prend pas toute la largeur de son parent. Eh bien, laissez-moi sélectionner ce bouton « S'abonner » ici, et je vais régler sa largeur à 100 pour cent. Je vais supprimer cette marge de gauche ici de 20 pixels à zéro. Joli. Aussi, je vais définir une hauteur spécifique à cela, alors laissez-moi écrire 80 pixels. La seule chose qui reste est d'ajouter quelques marges supérieures ici. Je vais lui donner une marge supérieure de 20 pixels, juste comme ça. Maintenant, laisse-moi retourner à mon intérieur. Ici, c'est. Ça a l'air incroyable. N'est-ce pas ? La dernière chose que nous devons changer ici, c'est notre pied de page. Comme vous pouvez le voir, ces mises en page ne sont pas bonnes pour notre paysage mobile et notre portrait mobile, alors que devrions-nous faire ? Ici, nous avons une direction horizontale. Je vais double-cliquer sur ce pied de page, et je vais sélectionner mon conteneur, puis je vais modifier la direction de l'horizontale à la verticale. Aussi, je vais changer l'alignement au centre. Ensuite, je vais sélectionner ce bloc div de contenu de pied et aligner tout au centre. Aussi, je vais sélectionner cette adresse et changer son alignement topographique au centre. Enfin, je vais sélectionner ce bloc div de contenu de pied de page, et je vais ajouter quelques marges du bas ici. Ajoutons une marge inférieure de 30 pixels ici. Ça a l'air fantastique. Notre page d'accueil semble bien. Maintenant, allons de l'avant et modifions d'autres pages. Je vais aller à ma page de contact. Voyons à quoi ça ressemble ici. Ici, nous avons un problème. abord, je vais sélectionner ce titre et je vais diminuer sa taille de police de 60-40. Ensuite, nous devons modifier la mise en page de notre formulaire. Je vais sélectionner ce wrapper de formulaire de contact, la grille que nous avons créée. Si je clique sur ce bouton rose, vous pouvez voir que nous avons six colonnes et six lignes. À mon avis, ce n'est pas une bonne grille pour ces paysages mobiles et même pour le portrait mobile. Au lieu d'avoir ces deux champs de texte, l'e-mail et les champs de texte du téléphone sont assis l'un à côté de l'autre. Je vais faire en sorte que tous ces champs de texte s'empilent les uns sur les autres. Laissez-moi aller de l'avant et supprimer trois colonnes d'ici, juste comme ça, et je vais supprimer une ligne aussi bien. Rien n'a changé. C' est vrai, parce que nous devons aller de l'avant et sélectionner manuellement notre bloc div, le premier. Comme vous pouvez le voir, ce bloc div prend six colonnes. Ce n'est pas ce qu'on veut. Je vais cliquer sur ce petit cercle et le faire glisser le côté gauche jusqu'à ce qu'il prenne trois cellules. Cool, je vais faire la même chose pour ce bloc div message aussi. C' est notre dernier bloc div. Allons de l'avant et faisons en sorte qu'il ne prenne que trois cellules. Ça a l'air sympa, mais qu'en est-il de ce bouton ? Je vais le sélectionner et je vais faire la même chose ici. Il est là. Maintenant, notre mise en page semble beaucoup mieux. Prévisualisons ça. Voici notre forme, elle a l'air génial en termes de fluidité et de réactivité. Avez-vous remarqué que notre pied de page a également été modifié sur cette page. Puisque nous utilisons des symboles, lorsque nous rendons nos symboles réactifs sur une page, ils changeront également sur d'autres pages. Passons maintenant à la page du projet. Je vais aller de l'avant et laissez-moi sélectionner ce modèle de projets, cool. Voyons ce que nous avons ici. Comme je peux le voir, le titre semble bien. Le type de page du projet semble bien. Tout d'abord, je vais sélectionner ce wrapper de type de projet et je vais changer sa direction à verticale, agréable. Ensuite, permettez-moi de sélectionner ce bloc de texte de type de page de projet et ajoutons des marges inférieures à celui-ci. Je vais ajouter 10 pixels ici, ça a l'air sympa. Que devons-nous faire d'autre ici ? Comme vous pouvez le voir ici, la marge supérieure de cette image est trop importante. Si je sélectionne ce wrapper de type de projet, vous pouvez voir qu'il a une marge inférieure de 80 pixels. Je vais aller de l'avant et le réduire à 40 pixels. Maintenant, ça a l'air beaucoup mieux. Je vais faire défiler vers le bas. Ici, comme vous pouvez le voir, nous avons trop d'espace aussi. Choisissons ces textes riches ici. Ensuite, je vais diminuer sa marge supérieure de 70 pixels à 20 pixels. En outre, je vais aller de l'avant et diminuer sa taille de police de 20 pixels à 17 pixels. Parce qu'en ce moment nous sommes sur les écrans mobiles. Je vais faire défiler vers le bas, je vais sélectionner ces autres projets en-tête, et je vais réduire sa taille de police à 30 pixels. Ici, comme vous pouvez le voir, nous avons trop d'espace. Laissez-moi sélectionner ma collection ce wrapper, et je vais diminuer sa marge supérieure de 70 pixels à 30 pixels. Je vais faire défiler vers le bas. Tout a l'air bien. Ici tout a l'air bien aussi. Maintenant, laissez-moi vérifier la fluidité de mes éléments, gentil. Tout est réactif. Et ici, génial. Je pense que si je sélectionne ce type de page de projet et j'ajoute plus de marges de bouton, ce serait beaucoup mieux. Je vais définir la marge inférieure à 20 pixels. Ça a l'air beaucoup mieux maintenant. Ici, nous n'avons pas d'espacement cohérent. Je vais sélectionner ce wrapper de type de projet. J' ai ajouté une marge inférieure de 40 pixels ici. Pour ces textes enrichis, j'ai ajouté une marge supérieure de 20 pixels. Je vais augmenter cette marge supérieure à 40 pixels pour avoir un espacement cohérent. Maintenant, ça a l'air génial. Très bien, les gars, c'est tout pour cette vidéo. Nous modifions avec succès les propriétés CSS de nos éléments sur les points d'arrêt du paysage mobile et nous vérifions la fluidité de tous nos éléments. J' espère que vous avez apprécié cette vidéo et je vous verrai dans la prochaine. 59. Portrait mobile: Hé, bienvenue. Dans cette vidéo, nous allons aller de l'avant et rendre notre site web réactif sur le point d'arrêt du portrait mobile. Si vous êtes prêt, commençons. Je vais aller au point d'arrêt du portrait mobile et voyons ce que nous avons ici. Je vais vérifier la fluidité. La plupart de nos éléments ont l'air bien parce que nous avons déjà fait quelques changements sur le point d'arrêt du paysage mobile. Nous n'avons pas besoin de faire autant de changements ici. La première chose que je remarque ici est la taille de police de ce titre. Pour le portrait mobile, il semble trop grand. Je vais le sélectionner et je vais réduire la taille de la police à 30 pixels. La taille de police de cette description de héros semble bien. Je ne vais pas changer ça. Et ces boutons ? Ils ont l'air bien, mais voyons si je rends cet écran plus petit, à quoi ils ressemblent. Comme vous pouvez le voir, ils seront réduits et ce n'est pas ce que je veux. Je vais sélectionner ce bloc, boutons de héros. Laisse-moi faire défiler. La direction de cette flexbox est horizontale. Je vais le changer à la verticale. Ensuite, je vais sélectionner ce bouton « Get in touch » et laissez-moi supprimer sa marge droite. Je vais le mettre à 0, gentil. Enfin, je vais y ajouter des marges inférieures. Réglons sa marge inférieure à 20 pixels. Maintenant, si je vérifie la fluidité de mes éléments, vous pouvez voir qu'ils ne sont plus rétrécies. Bien, l'image a l'air bien. On a déjà enlevé ces cartes. Les logos ont aussi l'air bien. Cependant, puisque nous avons ici moins d'espace pour travailler avec. Je pense que nous pouvons aller de l'avant et modifier le rembourrage gauche et droit de nos sections. Qu' est-ce que tu en penses ? Je pense que c'est une bonne idée ? Je vais sélectionner cette section. Comme vous pouvez le voir, les rembourrages gauche et droit sont réglés sur 30. Je vais le réduire à 20 pixels. Mais puisque je vais appliquer cette modification à Toutes les sections, d'abord, je vais supprimer la classe combo de héros parce que je dois apporter cette modification à ma classe de base, cette classe de section. Je vais supprimer cette classe de combo de héros. Ensuite, je vais maintenir la touche Option ou Alt enfoncée sur mon clavier et réduire le remplissage à 20 pixels. Encore une fois, je vais ajouter la classe de combo de héros à elle. Joli. Maintenant, comme vous pouvez le voir, le remplissage gauche et droit de toutes les sections ont été modifiés. Si je sélectionne ces clients section, voilà, le rembourrage a été changé. Si je sélectionne cette section des projets récents, il est là, et maintenant ils ont l'air beaucoup mieux. La section des projets récents semble bien. Je vais faire défiler ici. Je pense que nous devons supprimer certains de ces emojis parce que cette section est trop bruyante. Comment puis-je supprimer ces emojis ? Je ne peux pas simplement appuyer sur Retour arrière ou Supprimer car dans ce cas, il sera supprimé de tous les points d'arrêt. Par conséquent, je vais définir son paramètre d'affichage sur none. Je vais choisir celui-là et je vais faire la même chose. Ensuite, je vais sélectionner ces deux emojis et changeons leur position ici. Mettons-le en haut à gauche. Pour celui-là, je vais le mettre en haut à droite. Déplaçons-les un peu vers le bas. Peut-être que je pourrais changer un peu sa position supérieure. Je vais le fixer à 5 pour cent pour les deux. Ça a l'air sympa. Qu' en est-il de la taille de la police ici ? La taille de la police semble bien. À mon avis. Nous n'avons pas besoin de modifier cela, mais ici nous avons trop d'espace. Peut-être que je peux sélectionner cette section et je peux diminuer sa hauteur de 622 pixels à peut-être 550 pixels. Maintenant, il semble beaucoup mieux, à mon avis. La dernière chose que je vais faire est de changer la taille de ces emojis. Je vais sélectionner cet emoji et je vais diminuer sa largeur et sa hauteur à 100 pixels. Je vais faire la même chose ici puisqu'ils ont des classes combo. Ils ont l'air beaucoup mieux maintenant. Maintenant que je les ai rendus plus petits, je vais changer de position à nouveau. Laisse-moi le déplacer sur le côté gauche de 5 pour cent. Je vais déplacer cet emoji du côté droit de 5%. Incroyable. Laissez-moi vérifier la fluidité de mes éléments. Joli. Tout a l'air réactif et il a l'air génial. Passons à la section suivante, qui est nos services. Ces cartes ont fière allure. Nous n'avons pas besoin de faire des changements. Je vais passer à la section suivante, qui est la section CTA. abord, je vais sélectionner ces titres CTA et je vais l' aligner au centre dans la section typographie, probablement je peux augmenter la hauteur de ligne aussi bien à 150 pour cent. Qu' en est-il de ce formulaire ? Eh bien, je peux sélectionner ce bloc de formulaire et sa largeur est définie sur auto. Je peux le définir à 90 pour cent et je vais sélectionner ce champ de texte dans le rappeur de champ de texte CTA, et je vais changer sa largeur à 100 pour cent. Maintenant, il faut 100 pour cent de son parent avec rien de plus et rien d'autre n'est nécessaire. En fait, ça a l'air assez bien. Pied de page semble bien aussi. Notre page d'accueil est prête. Regardons ça une fois de plus. Si j'essaie de rendre cette dimension encore plus petite, ils seront en dehors de notre fenêtre. Eh bien, on peut arranger ça. Nous pouvons simplement sélectionner ces logos de grille, puis modifier la grille. Nous pourrions simplement ajouter deux lignes supplémentaires et simplement supprimer l'une de ces colonnes. Juste comme ça. Maintenant, nous ne ferons plus face à ce problème. Notre page d'accueil est incroyable. Maintenant, allons de l'avant et regardons d'autres pages. Je vais aller à la page Contactez-nous ici tout semble bien. Je vais juste en prévisualiser et me laisser voir si cela fonctionne bien en termes de fluidité, il semble très bon. C' est parce qu'on a utilisé la grille. Notre bouton a l'air bien aussi. Qu' en est-il de notre page de projet ? Laissez-moi aller à la page du projet ici et laissez-moi vérifier si cela fonctionne parfaitement. Tout a l'air bien. Comme vous pouvez le voir, j'ai besoin d'augmenter la hauteur de ligne de ce type de page de projet. Je vais le sélectionner et je vais augmenter la hauteur de la ligne à 150 pour cent. Maintenant, ça a l'air beaucoup mieux. Vérifions d'autres éléments. La taille de la police semble bien. La section des autres projets semble aussi bien. Je vais faire défiler la section CTA semble bien puisque c'est un symbole. Mais ici, dans la section CTA, nous avons un problème : le rembourrage. Le rembourrage ici n'est pas cohérent. Pour d'autres sections, nous avons utilisé un rembourrage de 20 pixels à gauche et à droite. Mais pour ces CTA, je vais sélectionner cette section. Comme vous pouvez le voir, nous avons le rembourrage 20 pixels gauche et droit. Voyons comment on peut arranger ça. Si je sélectionne ce bloc de formulaire, nous définissons déjà la largeur à 90 pour cent. Je pense qu'on peut le mettre à 100 pour cent pour résoudre ce problème. Voyons si nous allons faire face à des problèmes en termes de fluidité. Je vais retourner à mon encens. Ici, je vais en prévisualiser. Non, ça a l'air bien. Juste comme ça. Ça a l'air beaucoup mieux maintenant. Tous les bons gars maintenant, nous avons un site entièrement réactif. Avez-vous vu à quel point il est facile de travailler avec des points d'arrêt et des propriétés CSS ? Si vous vous en tenez aux règles et aux bases, tout est facile. Je vais aller de l'avant et vérifier toutes les pages maintenant. Je vais aller à la page d'accueil. Je vais en prévisualiser. Le bureau a l'air bien. Tout a l'air bien ici sur tous les appareils. Permettez-moi de passer à d'autres sections, les logos. Joli. Qu'en est-il des projets récents ? Il a l'air génial sur tous les points d'arrêt. Qu' en est-il du témoignage ? Super. Nos services, laissez-moi vérifier. Oups, ici nous avons un problème avec les icônes. Laisse-moi aller de l'avant et arranger ça. Je vais sélectionner cette icône de service et je vais changer leur taille pour ne pas diminuer ou croître. Je vais faire la même chose pour tous. Génial, et vérifions encore une fois. Cool. Qu'en est-il de la section CTA ? Il a l'air incroyable et le pied de page a l'air bien aussi. Maintenant, allons à la page Contactez-nous et je vais l'afficher en prévisualiser. La version de bureau semble bien, la tablette semble bien ainsi. Paysage mobile semble incroyable et mobile portrait. Mais si nous allons à la page du projet, vérifions ça. Je vais en prévisualiser. Ça a l'air bien ici sur le bureau. Je vais aller aux tablettes. On y va. Je vais faire défiler tout semble bien. Laisse-moi aller au paysage mobile. Toutes les sections ont fière allure et les portraits mobiles, agréable. Une chose que j'ai remarqué ici est quand nous sommes sur le point d'arrêt de bureau et quand je fais l'écran plus petit, juste comme ça, vous pouvez voir à un moment donné ce bouton Contactez-nous touche les bords de nos rapports. Ce n'est pas ce qu'on veut, alors on doit réparer ça. Comment pouvons-nous réparer ça ? Laisse-moi y aller et aller à mon Navbar. Si je sélectionne cette barre de navigation dans le navigateur, vous pouvez voir qu'il n'y a pas de remplissage. Pendant que je suis sous le point d'arrêt du bureau, je vais ajouter un rembourrage de 30 pixels à gauche et à droite ici. Permettez-moi de maintenir la touche Option ou Alt enfoncée sur mon clavier et d' ajouter du remplissage gauche et droit à ma barre de navigation. Mais ici, nous avons un autre problème, ce conteneur a aussi un rembourrage. Je vais aller de l'avant et enlever le rembourrage ici de 30 pixels à 0. En outre, le bon rembourrage va être 0 aussi. Voyons maintenant si ça marche. Je vais le rendre plus petit. On y va. Sur le bureau, il a l'air génial maintenant parce que nous avons ces rembourrages supplémentaires sur le côté droit et gauche. Mais que faire si je vais à la tablette ? Voyons ce qui se passe. Ici, nous avons ce rembourrage supplémentaire et nous devons aller de l'avant et modifier cela. Pendant que je suis sur le point d'arrêt de la tablette, je vais sélectionner le « Navbar », et je vais réinitialiser ce 30 pixel de remplissage gauche et droit. Je vais le mettre à 0. Ici, je vais le mettre à 0 aussi. Génial, et voyons ce qui se passe maintenant. On y va. Il semble bien si je vais à la tablette, il semble bien si je vais au paysage mobile, tout est beau et portrait mobile. Tous les bons gars notre site Web est maintenant entièrement réactif. J' espère que ça vous a plu et je vous verrai dans la prochaine vidéo. 60. Animations et interactions - Partie 1: Tout site web moderne utilise aujourd'hui des animations et des interactions afin d'améliorer la convivialité et l'expérience utilisateur, et éventuellement, il peut améliorer le taux de conversion. Jetons un coup d'oeil au site Web d'Apple à titre d'exemple, si je fais défiler ici, vous pouvez voir que ces éléments s'estompent. Je vais faire défiler vers le bas. Vous pouvez voir que nous avons cette interaction, ce bloc de texte est animé. Je vais faire défiler vers le bas. Ici, quand je fais défiler, vous pouvez voir que ces textes bloquent les échelles à mesure que je fais défiler vers le bas, et ces éléments, cette image et ce texte bloquent le fondu dans. Ce sont les animations qui font une différence quand il s'agit de développement web, construction d'un site web réactif est une chose, mais le rendre plus intéressant est une autre chose. En ajoutant des interactions et des animations à notre site Web, nous pouvons améliorer l'expérience utilisateur et nos utilisateurs aiment vraiment interagir avec notre produit. Permettez-moi de vous montrer comment fonctionnent les interactions sur Webflow. En ce qui concerne les interactions, nous avons deux composants principaux avec lesquels travailler, le déclencheur et l'animation. C' est quoi un déclencheur ? Eh bien, un déclencheur est quelque chose qui déclenche l'animation. En termes simples, quand quelque chose arrive, alors une autre chose devrait arriver. Par exemple, si un bouton est cliqué, il devrait augmenter. Si l'utilisateur survole quelque chose, un autre objet doit se déplacer. En général, nous avons deux types de déclencheurs. Nous avons le déclencheur de l'élément et nous avons le déclencheur de la page. Laissez-moi vous montrer comment ça marche. Si je me dirige vers le panneau d'interactions sur le côté droit ici, comme vous pouvez le voir il y a cette icône de tonnerre, je vais cliquer dessus. Voici où nous pouvons créer un déclencheur. Comme je l'ai mentionné précédemment, nous avons le déclencheur de l'élément et nous avons le déclencheur de la page. Eh bien, quelle est la différence entre le déclencheur de l'élément et le déclencheur de la page ? Nous utilisons le déclencheur d'élément, lorsque le déclencheur est un élément, par exemple, un bouton, une image, un bloc de texte, un titre, n'importe quoi. Nous pouvons sélectionner notre élément et ensuite nous pouvons créer ce déclencheur d'élément. Lorsque l'utilisateur interagit avec cet élément, il déclenche notre animation. Mais qu'en est-il du déclencheur de page ? Eh bien, le déclencheur de page déclenche notre animation lorsque notre état de page est modifié. Par exemple, si je clique sur cette icône plus, vous pouvez voir que nous avons la souris déplacer dans la fenêtre, tandis que les pages défilent, chargement de page, page défilé. Dans ce cas, nous n'avons pas besoin de cliquer sur quelque chose ou d'interagir avec n'importe quel élément. Le déclencheur est notre page elle-même, donc nous pouvons spécifier quand la page est complètement chargée, puis jouer cette animation particulière. Permettez-moi de vous montrer quelques exemples ici. Comme vous pouvez le voir ici, j'ai quelques éléments simples. J' ai un cercle, j'ai un carré ici. Je vais prévisualiser ceci et je vais vous montrer quelques exemples du déclencheur d'élément. Ici, ce cercle est notre déclencheur. J' ai déjà créé une interaction pour cela, et quand je clique dessus, quelque chose devrait arriver. Vous devez garder à l'esprit que le déclencheur ne devrait pas toujours s'animer, donc si je clique sur ce cercle, l'animation ne devrait pas nécessairement apparaître sur cet objet. Je peux définir un déclencheur sur cet objet et je peux faire animer d'autres éléments. Dans ce cas, si je clique sur ce cercle, ce carré devrait se déplacer vers le côté droit. Laisse-moi te montrer. On y va. Dans ce cas, le cercle est notre déclencheur, et une fois qu'il est déclenché, ce carré se déplace. Mais que faire si je veux animer le déclencheur lui-même ? Nous pouvons le faire aussi. Par exemple, nous pouvons définir un déclencheur d'élément, et nous pouvons dire, si l'utilisateur survole ces éléments, ces éléments devraient changer. Par exemple, il devrait grandir, il devrait bouger, il devrait disparaître, tout ce que vous pouvez imaginer, donc si je survole ces cercles orange, nous obtenons cette animation de rebond. Dans ce cas, le déclencheur lui-même est animé. Je vais vous montrer un autre exemple. Si je clique sur ce carré sur le côté droit, il va s'animer aussi, juste comme ça. Récapitulons. Afin de comprendre le fonctionnement des animations, vous devez comprendre comment fonctionne l'interaction. En général, nous avons deux composantes principales. Nous avons le déclencheur et l'animation. Si notre déclencheur est déclenché, alors l'animation devrait se produire. Laissez-moi vous montrer comment j'ai créé ces animations. Je vais aller voir mon designer. Si je vais aux interactions, ici comme vous pouvez le voir, je n'ai pas de déclencheur, donc je vais aller de l'avant et sélectionner ce cercle, et une fois que je l'ai sélectionné, vous pouvez voir que le déclencheur d'élément que nous avons déjà créé est là . Je vais supprimer ça une seconde parce que je vais vous montrer comment je l'ai créé. Si je clique sur cette icône, je peux le supprimer. Maintenant, je n'ai aucun déclencheur d'élément. Puisque ce cercle va être notre déclencheur, je vais le sélectionner, et ensuite je vais appuyer sur ce bouton plus ici. Ici, je peux choisir parmi différentes options. Voyons ce que nous avons. Nous avons le robinet de souris, nous avons le survol de la souris, nous avons la souris déplacer sur l'élément, nous avons défiler dans la vue, et nous avons tout en faisant défiler en vue, nous avons d'autres options qui ne sont pas disponibles maintenant. Par exemple, Navbar ouvre ne fonctionne que pour les barres de navigation ou la liste déroulante ne fonctionne que pour les menus déroulants. Mais dans ce cas, nous allons utiliser le clic de souris. Lorsque l'utilisateur clique sur le cercle, l'animation doit être lue. Je vais choisir le robinet de souris, nous y allons, et voici où nous pouvons spécifier notre action. Il dit au premier clic et au deuxième clic, cela signifie que je peux spécifier une animation pour le premier clic , puis spécifier une autre animation pour le second clic. Pour cet exemple, nous ne voulons qu'une seule animation, donc je vais aller au premier clic. Si j'ouvre ce menu déroulant, je peux sélectionner une action. Je peux soit créer une animation personnalisée en utilisant cette option de démarrage d'une animation ou je peux utiliser des effets rapides. Par exemple, fondu, diapositive , flip, grandir, grossir, etc. Nous allons en parler, mais pour l'instant, je vais vous montrer comment vous pouvez créer une animation personnalisée. Je vais cliquer sur Démarrer une animation et voici l'animation que nous avons déjà créée. Je peux choisir cette animation ou je peux créer une nouvelle animation. Je vais aller de l'avant et enlever ça une seconde. Ici, nous n'avons pas d'animations, et je vais créer une nouvelle animation ici, et je dois nommer ça. Écrivons Move Square. Pourquoi je l'ai appelé comme ça ? Parce que ce déclencheur va faire bouger ce carré. Je vais appuyer sur Entrée. Maintenant, je dois créer quelques actions. Voici notre chronologie. Si je clique sur ce bouton plus, je peux choisir entre différentes options, déplacer, mettre à l'échelle, faire pivoter, incliner, filtre d'opacité, couleur BG, couleur de bordure, couleur de texte, etc. Ce sont les propriétés que je peux animer. Mais d'abord, voyons comment nous devrions animer nos éléments. Ce cercle est notre déclencheur, et jusqu'à présent nous avons créé notre déclencheur. Maintenant, nous voulons animer la place. Par conséquent, une fois que nous sommes dans la chronologie, vous devez sélectionner l'élément que vous voulez animer. Dans ce cas, c'est notre carré, donc je vais le sélectionner, et une fois qu'il est sélectionné, je vais cliquer sur ce bouton plus. Puisque je vais le déplacer, je veux juste changer d'emplacement. Je vais sélectionner Déplacer. Nous avons créé un point ou une image-clé. Ici, j'ai un avertissement et il dit que cette action de déplacement n'a pas de valeur appliquée, c'est bien parce que nous n'avons rien modifié ici. Dans la chronologie ici, nous avons le temps, et nous avons le point de départ et le point de terminaison. Jusqu' à présent, nous avons créé la première image-clé, maintenant je vais aller au point de terminaison et je vais cliquer pour créer une autre image-clé, ce sera Move. On a aussi cet avertissement parce qu'on n'a rien changé. Voyons ce que nous voulons faire, lorsque l'utilisateur clique sur ce cercle, ce carré devrait se déplacer vers le côté droit. Par conséquent, nous avons créé notre première image clé ici, et nous n'avons pas besoin de modifier sa position parce que l'animation devrait commencer à partir d'ici et ensuite elle devrait se déplacer vers le côté droit, donc je vais sélectionner cette seconde image clé que nous créé, puis si je fais défiler ici, vous pouvez voir que j'ai ces options Move. Nous avons beaucoup de propriétés ici dont nous allons parler, mais maintenant modifions les propriétés Move. Je peux changer les axes x, y et z. Je vais changer l'axe des x, donc utilisons ce curseur. Je vais le déplacer de 100 pixels, c' est vrai, à 100 pixels, sympa. Maintenant, je vais cliquer sur Enregistrer et notre animation a été créée, comme vous pouvez le voir, il est dit Move Square, et si vous voulez apporter des modifications à votre animation, vous pouvez simplement cliquer dessus et vous allez à l'intérieur de votre timeline. Vous pouvez sélectionner ces images-clés et apporter les modifications souhaitées. Mais pour l'instant, ça a l'air bien. Laissez-moi en prévisualiser, et maintenant ce cercle est notre déclencheur, je vais cliquer dessus. On y va, cette place a été déplacée. C' est généralement comme cela que l'interaction et les animations fonctionnent sur Webflow, vous pouvez simplement créer des animations complexes visuellement sans écrire une seule ligne de code, qui est si puissant. Je vais vous montrer un autre exemple. Supposons que ce cercle soit le déclencheur, mais qu'il va s'animer. Je vais vous montrer comment c'est possible. Si l'utilisateur clique dessus, il va se déplacer, donc le déclencheur d'élément est créé, comme vous pouvez le voir, nous avons déjà créé cela, je vais cliquer dessus, et à l'intérieur, je ne veux pas utiliser ce Déplacer Animation carrée parce que je vais animer ce cercle lui-même, donc je vais créer une autre animation chronométrée ici, et je vais écrire Move Circle. Ensuite, créons une action, et je vais choisir Déplacer. Je vais créer une autre image-clé ici, et choisissons Déplacer. Ici, je vais le déplacer à nouveau sur le côté droit. Laisse-moi le sauver. Ici, assurez-vous de choisir l'animation Déplacer le cercle, et non le carré Déplacer. Je peux cliquer sur Aperçu pour prévisualiser cela, et aussi je peux aller ici, et si je clique dessus, maintenant ce cercle est animé, pas le carré. Vous devez comprendre la différence entre un déclencheur et l'animation. Vous devez toujours créer un déclencheur, puis vous devez décider quels éléments doivent être animés. Rappelez-vous, lorsque vous créez un déclencheur, vous n'êtes pas limité à animer un seul élément, vous pouvez animer plusieurs éléments. Laissez-moi vous montrer comment ça marche. Supposons que lorsque je clique sur ce cercle, je veux que ces deux carrés bougent. Comment peux-tu faire ça ? C'est si simple. D' abord, je vais aller de l'avant et créer un déclencheur. Le déclencheur est déjà créé. Je vais aller à la section Animation, au premier clic, et ici je vais choisir Move Square parce que nous allons déplacer ce carré ici. Si je vais à l'intérieur, j'ai créé deux images clés ici. Mais pour ce carré, si je vais de l'avant et que je sélectionne Square 2 et que je crée une autre image clé ici, et que je dis bouge, alors je peux la déplacer sur le côté droit aussi. Déplaçons-le de 100 pixels, comme ça, et laissez-moi le sauvegarder. Maintenant, si je clique sur ce cercle, ces deux carrés devraient se déplacer simultanément. Voyons ce qui se passe. Mais avez-vous vu ce qui s'est passé ? Tout d'abord, ce carré s'est déplacé, puis le carré s'est déplacé. Pourquoi ? On ne peut pas les déplacer en même temps ? Nous pouvons, si je me dirige vers ma chronologie, si je sélectionne cette animation Move Square ici, comme vous pouvez le voir, cet élément Square 2 a une image-clé séparée. Si je veux que ces deux éléments s'animent en même temps, je dois sélectionner ce Square 2, et je dois le faire glisser et le regrouper avec mon premier carré, juste comme ça. Maintenant, l'animation se produit en même temps, je vais appuyer sur Enregistrer, et voyons ce qui se passe, nous y allons. Ils sont trop lents. Puis-je modifier leur vitesse ? Bien sûr, vous pouvez. Allons à notre chronologie. Ici, si je sélectionne mes deux carrés, je peux maintenir la touche Maj enfoncée de mon clavier et cliquer dessus un par un. Ici, dans le timing, j'ai différentes options. J' ai l'option delay, j'ai l'assouplissement, et j'ai la durée. La durée est réglée à une demi-seconde, je vais la diminuer à 0,2, et si j'économise, maintenant je vais en prévisualiser, c' est beaucoup plus rapide maintenant. Jusqu' à présent, vous avez appris comment les interactions et les animations fonctionnent dans Webflow. Dans la vidéo suivante, nous allons commencer à créer des animations pour notre projet de cercle, et nous parlerons du déclencheur de page et des animations avancées. se voit dans la vidéo suivante. 61. Animations et interactions - Partie 2: Hé, bienvenue. Dans cette vidéo, nous allons commencer à créer interactions et des animations pour notre site Web. Es-tu prêt ? Commençons. Tout d'abord, nous allons penser aux types d'animation que nous allons créer. De quoi avons-nous besoin ici ? Prévisualisons ce site Web. Comme vous pouvez le voir, tous ces éléments se chargent en même temps, et c'est bien, mais nous pouvons le rendre meilleur. Ce que je veux faire ici, c'est que je veux que tous ces éléments s' estompent un par un une fois que la page est chargée. abord, cette barre de navigation devrait s'estomper, puis cette rubrique , puis la description, ces boutons, l'image principale et ces cartes. Nous pouvons également déplacer ces éléments légèrement pour créer une animation plus avancée. D' accord. Que devrions-nous faire ? Pour cette animation, nous n'avons pas besoin d'un déclencheur d'élément. Comme je l'ai mentionné dans la vidéo précédente, un déclencheur d'élément est requis lorsque nous avons besoin que l'utilisateur interagisse d'abord avec quelque chose, puis l'animation devrait jouer. Mais dans ce cas, il n'y a pas d'interactions impliquées, donc lorsque la page se charge, ces éléments doivent être animés. Je vais aller de l'avant et créer un déclencheur de page. Comment puis-je faire ça ? Laissez-moi aller aux interactions ici, et cette fois, au lieu de créer ce déclencheur d'élément, je vais créer un déclencheur de page. Laissez-moi cliquer sur ce bouton « Plus ». Quelle option devrions-nous utiliser ? Déplacement de la souris fenêtre, Alors que la page fait défiler, chargement de la page, page défilé, nous avons besoin d'utiliser un chargement de page et vous pouvez lire quelle interaction nous pouvons atteindre en utilisant ces déclencheurs. Il est dit, « Animer lorsque la page commence ou termine le chargement. » C' est exactement ce qu'on veut. Je vais cliquer sur « Chargement de la page ». Super. Ici, nous avons deux sections différentes. Lorsque la page commence à se charger, lorsque la page termine le chargement, je vais l'utiliser lorsque la page termine le chargement. Pourquoi ? Parce que je veux que tout le contenu du site Web se charge avant de jouer l'animation, ces images doivent être chargées, ainsi que ces textes, blocs et boutons. Je vais aller avec quand la page termine le chargement et je vais créer une action. Ici, je vais commencer une animation. Ce sera une animation personnalisée, puis je vais cliquer sur ce bouton « Plus ». On y va. Donnons un nom à cette animation de héros car elle est liée à la section héros. Je vais appuyer sur « Entrée ». Joli. Maintenant, il est temps d'aller de l'avant et de créer nos actions. Que devrions-nous faire ici ? Comme je l'ai déjà mentionné, je veux que tous ces éléments s'estompent. Certains d'entre eux devraient être mis à l'échelle, certains d'entre eux devraient être déplacés aussi, mais allons-y un par un. Si je veux qu'ils s'estompent d'abord, je dois mettre leur opacité à zéro. Pourquoi ? Parce qu'en ce moment l'opacité est réglée à 100 pour cent et il n'y a aucun moyen que je puisse réaliser cette animation. J' ai deux options. Je peux soit aller de l'avant et sélectionner tous ces éléments ici. Par exemple, cet en-tête, et je peux aller au panneau de style, réduisez l'opacité à zéro pour cent ici. Ou je peux faire exactement la même chose ici dans la section interaction, je vais au chargement de la page. Je vais cliquer sur « Animation Héros ». Ici, je peux créer une action, par exemple, l'opacité, et je peux transformer son opacité à zéro pour cent, mais commençons par la barre de navigation. Je vais sélectionner cette barre de navigation et je vais créer une action ici, mais pour créer une action pour un symbole, abord, vous devez double-cliquer dessus. Maintenant, cette barre de navigation est sélectionnée le symbole maître et je peux créer une action. Ensuite, je vais choisir l'opacité, et tournons son opacité de 100 pour cent à zéro pour cent. Joli. Il a disparu et c'est exactement ce qu'on veut. C' est ce que nous appelons l'état initial, et ici, si vous passez à la section de synchronisation, vous pouvez voir que nous avons ce commutateur qui dit, « Définir comme état initial ». Si je survolais ce point d'interrogation, il est dit, « Définir l'état initial applique des styles à l'élément avant le chargement de la page. C' est utile pour cacher des éléments avant de les animer en vue. » C' est exactement ce que nous devons faire. Puisque j'ai mis son opacité à zéro pour cent et que ce sera notre état initial, je vais activer ce commutateur. Que devrions-nous faire d'autre ? Je vais sélectionner tous ces éléments un par un, et je vais aussi diminuer leur opacité à zéro pour cent. Sélectionnez cette rubrique, puis je vais revenir à mon animation ici une fois de plus, et je vais créer une nouvelle opacité d'action. Réglons son opacité à zéro pour cent, et n'oubliez pas d'activer ce commutateur comme ça, défini comme état initial, et comme vous pouvez le voir maintenant, ceux-ci sont regroupés parce que ce groupe supérieur contient toutes les actions que nous avons la première état sur. Maintenant, je vais sélectionner cette description. Je vais faire la même chose, l'opacité, et je vais tourner son opacité à zéro pour cent, et je vais le définir comme l'état initial. Je vais faire la même chose pour ces boutons. Un en passant. Je vais sélectionner ce bouton principal et créons de l'opacité. Je vais diminuer son opacité à zéro pour cent. Ça va être un état initial. Faisons-le pour ces boutons de textes aussi bien. Je vais sélectionner la capacité. Diminons-le à zéro pour cent et ce sera l'état initial. Ensuite, sélectionnons cette image, et diminuons son opacité à zéro pour cent également. Ça va être l'état initial. Enfin, nous devons sélectionner ces deux cartes et faire la même chose. Choisissons l'opacité, diminuons son opacité, et enfin activez l'état initial, et enfin, je vais sélectionner cette carte et je vais faire la même chose ici. Réduisons son opacité et actionnons l'état initial, mais attendez une seconde, pourquoi tous ces éléments ont disparu sauf notre barre de navigation ? Eh bien, c'est parce que notre barre de navigation est un symbole, en réalité, si je prévois mon projet maintenant, vous pouvez voir qu'il a disparu, mais comme c'est un symbole, nous le verrons. C' est la raison, mais ne vous inquiétez pas, ça fonctionne parfaitement. Nous avons créé nos états initiaux. Nous fixons l'opacité de tous nos éléments à zéro pour cent. Maintenant, il est temps de créer l'image-clé suivante afin de les fondre. Nous devons augmenter l'opacité à 100 pour cent. Pour ce faire, je vais sélectionner ma barre de navigation. Encore une fois, double-cliquez dessus, et je vais cliquer dessus et ici pour créer une nouvelle image clé, Choisissons l'opacité, et cette fois son opacité devrait être réglée à 100 pour cent. Assurez-vous qu'il est réglé sur 100 %. Nous ne modifierons pas la durée et le calque maintenant, mais dans quelques minutes, nous allons les modifier. Pour l'instant, nous avons juste besoin de ramener toutes vos opacités à 100 %. Maintenant, je vais sélectionner ma rubrique ici. Je peux le choisir dans le navigateur, puis allons à mon animation et créons une nouvelle image-clé ici, opacité, et je vais régler l'opacité à 100 pour cent. Je vais faire la même chose pour tous nos éléments ici. Choisissons la description. Je vais créer une nouvelle image-clé, l'opacité, et ensuite je vais régler l'opacité à 100 %. Je vais choisir les boutons un par un. Répétez le même processus et augmentez l'opacité à 100 pour cent. Je ne vais pas accélérer ce processus parce que je veux que vous vous habituiez au processus de création d'interactions. Je vais sélectionner le bouton « Suivant » ici. Créons une nouvelle image clé, l'opacité, et je vais régler l'opacité à 100 %. Maintenant, sélectionnons l'image principale. Créons une nouvelle image clé, opacité, et transformons son opacité à 100 %. Enfin, nous allons sélectionner nos cartes une par une opacité et définir son opacité à 100 pour cent, et enfin, nous devons sélectionner notre dernière carte, créer une nouvelle image-clé ici, opacité et définit son opacité à 100 pour cent. Joli. Maintenant, appuyez sur « Enregistrer » et prévisualisons notre projet. On y va. Tous ces éléments s'estompent un par un. Laissez-moi en prévisualiser une fois de plus. C' est exactement ce que je voulais. Pouvez-vous voir à quel point il est facile de créer des animations dans Webflow sans codage, c'est incroyable. Mais attendez, ne pouvons-nous même pas améliorer la situation en ajoutant plus d'animations à nos éléments ? Oui, on peut. C'est exactement ce que nous allons faire. Maintenant, c'est notre animation de fondu est créé avec succès. Je vais aller de l'avant et ajouter d'autres actions à ces éléments. Par exemple, je vais faire en sorte que cette rubrique et cette description se déplacent légèrement vers le bas. Aussi, je vais faire en sorte que ces deux cartes augmentent un peu. Enfin, je vais faire avancer cette image de héros aussi. Commençons par cette rubrique. D' abord, je vais aller à mon animation. Je vais aller à Here Animation, puis je vais sélectionner ma rubrique. Une chose à mentionner ici est que je ne veux pas cette rubrique descende de sa position d'origine, qui est ici. Je veux le déplacer légèrement vers le haut et définir l'état initial pour cela et le retourner à sa position d'origine. C' est ce qu'on va faire. Je vais sélectionner ce titre et je vais créer une action Move, il a été créé à l'intérieur du groupe d'états initial, et c'est exactement ce que je veux. Si vous le créez ailleurs, vous pouvez simplement activer ce commutateur comme état initial et il sera regroupé avec d'autres éléments d'état initial. Ensuite, je vais le déplacer de 20 pixels. Je vais écrire moins 20. On peut le voir, mais il a légèrement augmenté. Alors je vais faire la même chose pour la description du héros. Laisse-moi le sélectionner. Je vais créer une nouvelle action ici, Déplacer et laissez-moi le déplacer de 20 pixels moins 20. Maintenant, je vais sélectionner mon image principale, mais cette image ne devrait pas se déplacer de haut en bas. Il devrait se déplacer de bas en haut. Je vais créer l'action Déplacer. Mais cette fois, je vais régler le y à 20 pixels, pas moins 20 pour le déplacer vers le bas. Rappelez-vous que ce sont tous nos états initiaux. Enfin, comme je l'ai déjà mentionné, je vais mettre à l'échelle mes cartes, ces deux petites cartes jusqu'à un peu. D' abord, je vais sélectionner cette carte de héros 1, et je vais la réduire comme état initial. Laissez-moi créer une action ici. Je vais choisir Échelle et je vais définir x à 0,8 et l'axe y sera changé aussi. Puisque ceux-ci sont liés, alors je vais sélectionner Hero Card 2, créons la même échelle d'action et je vais modifier son x à 0,8. Cliquez sur « Entrée », mais celle-ci n'est pas groupée avec d'autres actions d'état initiales. Je peux soit le glisser et le déposer à l'intérieur de ce groupe, soit je peux simplement activer les ensembles de commutateurs en tant qu'état initial, et maintenant il est groupé avec d'autres actions d'état initial ici. Joli. Maintenant, nous devons aller de l'avant et les ramener à leur position d'origine. Mais comment devrions-nous le faire ici, nous avons beaucoup de cadres clés. Devrions-nous créer une image-clé ici après la dernière image-clé ? Non. Pourquoi ? Parce que si nous faisons cela, d'abord, tous ces éléments vont s'estomper et ensuite ils commencent à se déplacer et à se mettre à l'échelle. Ce n'est pas ce qu'on veut. Nous voulons qu'ils se déplacent et s'estompent simultanément. Pour les cartes, nous voulons qu'elles soient à l'échelle et à la décoloration en même temps. Je vais aller de l'avant et sélectionner ce titre de héros. Je vais créer une nouvelle action ici, et elle va être déplacée. Nous avons créé une nouvelle image-clé ici. Alors je vais changer son y ici à 0. De cette façon, nous le retournons à sa position d'origine. Enfin, je vais le faire glisser et le mettre au-dessus de l'image-clé opacité. De cette façon, nous pouvons les regrouper et l'opacité et déplacer des actions un soin en même temps, tout comme ça, comme vous pouvez le voir maintenant ils sont regroupés. Je vais faire la même chose pour la description. Sélectionnons-le. Je vais créer une nouvelle action Déplacer. Ensuite, je vais régler le y à 0. Laissez-moi les regrouper. Je vais le faire glisser et le déposer dessus. Faisons la même chose pour le héros principal. Je vais le sélectionner et je vais créer une nouvelle action. Déplacer et je vais mettre son y à 0. Regroupez-le avec l'image-clé opacité. Enfin, je vais sélectionner cette Carte Héros 1. Je vais créer une nouvelle action. Il va être à l'échelle parce que nous allons l'augmenter cette fois. Je vais régler les x et y à 1. Regroupez-le avec l'image-clé d'opacité Hero Card 1. Alors je vais faire la même chose pour la deuxième carte. Laissez-moi créer cette action d'échelle et je vais définir les x et y sur 1. Joli. Enfin, nous allons les regrouper ensemble, c'était beaucoup. Maintenant, sauvegardons notre animation. Je vais aller de l'avant et prévisualiser ça. C' est cool ? Laissez-moi en prévisualiser une fois de plus. abord, le nav s'estompait, puis ces éléments, ils se déplacent et ils se mettent à l'échelle en même temps. Mais ici, nous avons un problème. Comme vous pouvez le voir, la durée de cette animation est trop. Nous allons devoir aller de l'avant et modifier la durée de ces images clés. D' abord, je vais aller à l'animation Héros ici. Je vais sélectionner cette opacité. Je vais diminuer la durée de 1/2 à 0.3. Nous devons également répéter le même processus pour l'action de déménagement. Je vais le réduire à 0,3. Ensuite, faisons la même chose pour d'autres éléments. Je vais aller de l'avant et sélectionner ce Hero Description Opacité. Ça va être 0,3. Ensuite, je vais sélectionner le Déplacer. Ça va être de 0,3 aussi. Faisons la même chose pour ce bouton primaire, 0.3. Ici, 0.3, je vais accélérer ce processus. Je vais aller de l'avant et sélectionner tous ces éléments un par un et diminuer la durée à 0.3. Fait. Maintenant, laissez-moi enregistrer cette animation et nous allons la prévisualiser une fois de plus. Cool. Comme vous pouvez le voir, c'est beaucoup plus rapide maintenant. Prévisualisons à nouveau. Magnifique. J'espère que ça vous plaira, mais je vais vous montrer encore une chose. Tu te souviens quand on a parlé d'animations et d'interactions, je t'ai parlé de la méthode d'assouplissement. J' ai dit que nous en parlerons plus tard et c'est exactement ce que nous allons faire. Si je vais à la section interaction et si je choisis cette animation, je vais sélectionner, par exemple, l' une de ces actions. Choisissons ce mouvement de tête de héros. Si je passe au timing, vous pouvez voir que nous avons cet onglet d'assouplissement et nous avons des préréglages ou des coutumes. Pourquoi par défaut ? Toutes les actions ont la méthode linéaire de non-assouplissement, et cela signifie que l'animation joue de manière linéaire. Mais si j'ouvre le menu déroulant, vous pouvez voir que nous avons beaucoup de méthodes d'assouplissement différentes. Nous avons la facilité, l'assouplissement, la facilité d'entrée-sortie. Quelle est la différence entre eux ? Je vais vous montrer un site très cool créé par M. Christopher Travers qui illustre la différence entre toutes les méthodes d'assouplissement. C'est très cool. Ça s'appelle easing.webflow.io. Vous pouvez aller de l'avant et vérifier. La différence entre ces méthodes d'assouplissement est généralement la vitesse. Ici, lorsque nous avons cet assouplissement, l'animation commence lentement et se termine plus vite. D' un autre côté, si nous choisissons, relâchez, l'animation commence rapidement et puis elle ralentit. Ici, vous pouvez comparer toutes ces options et vous pouvez voir laquelle convient à vos besoins. Revenons à Webflow pour rendre nos animations plus belles, je vais aller de l'avant et définir toutes ces animations pour faciliter la sortie. Allons-y et faisons-le un par un. On peut changer les états initiaux ici et on n'a pas besoin de le faire. Comme vous pouvez le voir, il est désactivé car il n'y a pas d'animations jouées dans les états initiaux. Je vais sélectionner cette Navbar Opacity et je vais changer sa méthode d' assouplissement à l'assouplissement. Je vais le faire pour tous ces éléments. Permettez-moi de faire avancer rapidement ce processus pour vous faire gagner du temps, c'est fait et maintenant je vais enregistrer l'animation et laissez-moi aller de l'avant et en prévisualiser. On y va. Ça a l'air beaucoup mieux. Les gars, j'espère que vous avez aimé cette vidéo. Nous avons créé avec succès quelques animations pour notre section héros. Dans la prochaine vidéo, nous allons continuer à créer des interactions pour d'autres sections du site Web. On se voit alors. 62. Animations et interactions - Partie 3: Hé, dans cette vidéo, nous allons aller de l'avant et ajouter des animations à d'autres sections de notre site Web. Par exemple, comme vous pouvez le voir ici, ces logos sont en noir et blanc et nous allons les rendre interactifs. Lorsque l'utilisateur survole chacun de ces logos, ils devraient devenir colorés. Ici, par exemple, nous avons cette ombre portée, lorsque l'utilisateur survole cette carte, cette ombre portée devrait apparaître et sinon elle devrait disparaître. Mais qu'en est-il de la section des témoignages ? Ici, lorsque la section entre dans la fenêtre, nous voulons commencer à animer ces memojis et ces éléments intermédiaires un par un. On veut juste qu'ils s'estompent. Laisse-moi faire défiler. Et cette section ? Qu' est-ce qu'on va faire pour ces cartes ? Pour cette carte, lorsque l'utilisateur survole, couleur de son arrière-plan va être changée à notre couleur principale, puis la couleur de ces calques de texte doit également être changée. Allons de l'avant et commençons à travailler sur notre section client ici. Je vais aller à Webflow, et je vais aller à la section logo ici. Nos logos sont colorés par défaut. Comment peut-on les rendre noirs et blancs ? Tu te souviens quand on a parlé des filtres ? C' est exactement ce que nous allons utiliser. Je vais sélectionner cette image ici. Laisse-moi aller au panneau Style. Comme vous pouvez le voir, nous n'avons pas ajouté de classe à ces logos. Pendant que cette image est sélectionnée, je vais aller de l'avant et ajouter une classe à elle, écrivons Logo. Maintenant, je vais ajouter cette classe à chacun de ces logos. Permettez-moi d'y ajouter rapidement cette classe. Juste comme ça. Je vais l'ajouter à tous les logos, laissez-moi sélectionner celui-ci aussi, et je vais l'ajouter ici. Enfin, je vais sélectionner le logo Amazon et je peux l'ajouter ici. Parfait. Maintenant, pendant que l'un de ces logos est sélectionné, je vais faire défiler vers le bas et je vais aller à la section Effets. De là, je vais aller de l'avant et créer un filtre. Si je clique sur ce bouton plus, par défaut, le filtre est flou. Je ne vais pas utiliser un filtre de flou. Je vais changer le filtre en niveaux de gris, et comme vous pouvez le voir, le montant est réglé à 100 pour cent. C' est tout à fait bien. Maintenant, que devrions-nous faire ? Si je passe à l'état de vol stationnaire ici, je peux sélectionner ce filtre en niveaux de gris et je peux diminuer ce montant à zéro pour cent. Juste comme ça. Maintenant, laisse-moi aller à l'état zéro et passons un aperçu. On y va. Cela fonctionne parfaitement pour tous les logos, mais ici nous n'avons pas une transition en douceur entre ces deux états. Allons de l'avant et ajoutons une transition, mais assurez-vous que vous êtes dans l'état zéro, pas l'état de vol stationnaire, sinon, cela ne fonctionnera pas. Ajoutez toujours vos transitions à l'état none. Je vais ajouter une transition ici, je vais changer le type en Filter et la méthode d'assouplissement va être facile. C'est très bien. La durée sera de 200 millisecondes. Prévisualisons une fois de plus. Maintenant, ça a l'air beaucoup mieux, n'est-ce pas ? Que devrions-nous faire d'autre ? Eh bien ici, quand je prévois ce projet, vous pouvez voir que notre section d'en-tête est animée. Mais qu'en est-il de cette section ? Ce que je veux faire est d'ajouter un déclencheur d'élément au conteneur de ces logos, et une fois qu'il fait défiler dans la fenêtre, ce conteneur devrait s'estomper. Laissez-moi vous montrer ce que je veux dire. Je vais sélectionner un conteneur ici et je vais vous donner la classe combo. Écrivons des logos. Maintenant, laissez-moi aller aux interactions, et à partir de là je vais ajouter un déclencheur d'élément. Ici, comme vous pouvez le voir, nous avons défiler vers la vue. C' est ce dont nous avons besoin. Ensuite, il est dit, lorsqu'il est défilé dans la vue, lorsqu'il est défilé hors de la vue. Nous allons avoir besoin de la première option, lorsque vous faites défiler dans la vue. Ensuite, je vais utiliser ces effets rapides, Fade, juste comme ça, et ici nous avons fondu, fondu. Nous pouvons modifier le délai ou le décalage, donc il va être fondu. Laissez-moi en prévisualiser. On y va. C' est trop rapide, donc je vais ajouter un peu de retard ici. Ajoutons un délai de 400 millisecondes. Je vais en prévisualiser. Joli. Laissez-moi prévisualiser le projet. Nous ne pouvons pas voir l'effet maintenant parce que j'utilise un grand écran et dès que cette page est chargée, cette section est à l'intérieur de ma fenêtre. Mais si j'utilise un écran plus petit, il apparaîtra lorsque je commencerai à faire défiler. Par exemple, si je vais au point d'arrêt de la tablette ici et que je viens juste de prévisualiser le projet une fois de plus, vous pouvez voir que notre section d'en-tête, éléments, sont animés. Je vais faire défiler vers le bas. Dès que cette section fait défiler dans la vue, elle s'estompe. Laisse-moi te montrer une fois de plus. Je vais faire défiler vers le bas, on y va. Il s'estompe. C'est exactement ce dont j'avais besoin. Gardez à l'esprit que lorsque nous ajoutons l'animation au point d'arrêt du bureau, l'animation sera ajoutée à tous les points d'arrêt. Si je vais au portrait mobile et que je l'ai prévisualisé, tout fonctionne comme prévu. Super. Maintenant, nous pouvons passer à la section suivante, et il s'agit des projets récents. Je vais faire la même chose pour ce conteneur. Je vais sélectionner ce conteneur et je vais ajouter un déclencheur d'élément ici, faire défiler dans la vue, puis je vais ajouter une action ici, fondu, et un délai de 400 millisecondes, juste comme ça. Cool. Puisque ces conteneurs ont des classes combo, l'interaction sera ajoutée à ce conteneur particulier. Mais si j'ajoute l'interaction au conteneur, à la classe de base, elle sera ajoutée à tous les éléments en utilisant cette classe de base de conteneur. Gardez ça à l'esprit. Allons-y et prévisualisons-le. Je vais faire défiler vers le bas. On y va. Regardons ça une fois de plus. Je vais faire défiler vers le bas, il s'estompe. Super. Comme je l'ai mentionné, lorsque l'utilisateur survole ces cartes, une ombre portée douce devrait également apparaître. Comment pouvons-nous réaliser cette interaction ? C' est si simple, on en a déjà parlé. Tout d'abord, je vais aller de l'avant et sélectionner cette carte de projet. Laissez-moi voir, vous pouvez le trouver facilement dans le navigateur, et ensuite je vais aller à l'état de vol stationnaire à partir d'ici. Enfin, je vais aller de l'avant et y ajouter des ombres de boîte. Maintenant, modifions les propriétés de cette ombre de boîte. Je vais changer l'angle à 180. Je vais changer le flou à 50 pixels et la distance à 25 pixels. Enfin, je vais changer la couleur du noir au neutre, moyen. Laissez-moi diminuer l'opacité de 100 à 10 pour cent pour obtenir cette ombre portée douce. Ça a l'air génial. Maintenant, revenons à notre état zéro et nous allons le prévisualiser. On y va. Ça fonctionne parfaitement. Tu vois ça ? Mais nous n'avons pas de transition en douceur ici. Permettez-moi d'aller de l'avant et d'ajouter une transition. Assurez-vous que vous êtes dans l'état zéro. Je vais faire défiler vers le bas et pendant que cette carte de projet est sélectionnée, je vais ajouter une transition. Le type va être l'ombre de la boîte et la durée sera de 200 millisecondes. Je ne vais pas changer la méthode d'assouplissement. Prévisualisons une fois de plus. On y va. Maintenant, ça a l'air beaucoup mieux. Cool. Maintenant, nous pouvons passer à la section suivante, qui est la section du témoignage. Que devrions-nous faire ici ? Eh bien, d'abord, je vais sélectionner cette section et je vais y ajouter un déclencheur d'élément. Laissez-moi aller aux interactions, et à partir de là je vais ajouter un déclencheur d'élément. Nous allons utiliser défiler dans la vue parce que nous voulons que les éléments s'estompent une fois que cette section défile dans la vue. C' est pourquoi nous utilisons défiler dans la vue. Ensuite, je vais créer une animation personnalisée ici parce que nous allons animer ces éléments un par un. Je vais utiliser démarrer une animation. Laisse-moi appuyer sur ce bouton plus pour aller à notre chronologie. On y va. Ici, nous allons écrire Témoignage, vous pouvez le nommer comme vous voulez, Enter. Ensuite, je vais sélectionner un de nos memojis et créons une action ici. Ça va être de l'opacité parce que nous allons les faire disparaître. Comme d'habitude, d'abord, nous devons créer l'état initial. Par conséquent, je vais diminuer l'opacité à zéro pour cent et je vais le définir comme l'état initial. Ensuite, je vais créer une nouvelle image-clé ici. Je vais utiliser l'opacité et je vais augmenter l'opacité à 100 pour cent. Laisse-moi jouer l'animation. Joli. Mais il y a un problème ici. Comme vous pouvez le voir, cette animation ne fonctionne que pour ce premier memoji. Devrions-nous aller de l'avant et sélectionner ces memojis un par un ? Bien sûr, pas parce qu'il y a une alternative à cela. Puisque nous avons la classe de base memoji ici, nous pouvons simplement nous diriger vers cette section, qui est appelée classe, et ensuite nous pouvons supprimer cette classe combo ici. Je veux juste écrire Memoji. Je vais choisir mon memoji et m'assurer que cette option est sélectionnée, seuls les enfants de cette classe. Je vais sélectionner l'état initial, et maintenant si je le joue, maintenant l'animation fonctionne pour tous les memojis. Pourquoi ? Parce que maintenant cette animation fonctionne pour cette classe, la classe memoji avec tous ses enfants. C' est exactement ce que nous voulions, mais qu'en est-il des autres éléments ? Eh bien, nous allons aller de l'avant et les sélectionner un par un, et nous allons les animer. Commençons par ces rubriques. Je vais le sélectionner, je vais créer une action, opacité, et je vais mettre son opacité à zéro pour cent. Définissons-le comme état initial. Il sera groupé avec notre état initial memoji, et je vais créer une nouvelle image-clé ici. Je vais choisir l'opacité. Tournons son opacité à 100 pour cent. Joli. Maintenant, nous allons aller de l'avant et sélectionner ce texte de témoignage. Créons une action pour cela, l'opacité. Je vais régler l'opacité à zéro pour cent. Définissons comme état initial, et créons une nouvelle image-clé ici et choisissons l'opacité et revenons-la à 100 pour cent. Enfin, je vais sélectionner ces blocs div client, créer une nouvelle action, opacité, tournons son opacité à zéro pour cent, définissez-le comme état initial, et créer une nouvelle image clé, opacité et retournez-le à 100 pour cent. Juste comme ça. Maintenant, laissez-moi enregistrer cette animation et je vais aller de l'avant et en prévisualiser. Voyons ce que nous allons obtenir. Je vais faire défiler vers le bas et dès que la section de témoignage défile dans la fenêtre, l'animation se joue, mais ces memojis ont disparu si rapidement. Allons-y et réparons ça. Je vais aller à l'animation du témoignage ici sur le côté droit, et je vais sélectionner cette opacité memoji ici, et je vais y ajouter un peu de retard. Ajoutons un délai d'une seconde et nous allons le prévisualiser. Je vais le sauvegarder et voyons si cela fonctionne correctement ou non. Je vais faire défiler vers le bas, gentil. Mais une seconde semble trop, donc je vais la réduire à une demi-seconde. Laissez-moi sélectionner cette opacité Memoji et juste diminuer le délai à 0,5 et l'enregistrer. Prévisualisons une fois de plus. Je vais faire défiler vers le bas, on y va, fantastique. Voyons cela sur d'autres points d'arrêt aussi. Je vais aller de l'avant et en prévisualiser. Laisse-moi faire défiler. Plutôt bien. Ça a l'air génial, n'est-ce pas ? Passons maintenant à la section Services. Ici, comme je l'ai déjà mentionné, nous allons modifier la couleur de l'arrière-plan, la couleur de ces blocs de texte, ainsi que ce bouton de lien. Alors pouvons-nous simplement sélectionner cette carte de service et passer à l'état de vol stationnaire et modifier la couleur de nos arrière-plans, comme ce que nous avons fait pour cette section récente du projet ? Malheureusement non. Pourquoi ? La raison est que pour ces cartes, nous venons de modifier une propriété, donc nous sommes allés à l'état de vol stationnaire et nous avons ajouté l'ombre portée à cette carte. Cependant, ici, lorsque l'utilisateur survole cette carte, nous voulons modifier plusieurs éléments. C' est pourquoi il n'est pas possible d'animer tous ces éléments ici dans les effets. Par conséquent, nous allons devoir aller de l'avant et créer une interaction dans la section Interaction. Alors, que devrions-nous faire ? Tout d'abord, je vais sélectionner cette carte de service. Assurez-vous que le bloc diff de carte de service est sélectionné, comme vous pouvez le voir à l'intérieur de notre grille de services, puis je vais aller de l'avant et créer un arbre d'éléments ici et cette fois, je vais choisir le survol de la souris, pas cliquez sur la souris, ne faites pas défiler dans la vue, survolez la souris. Je vais le sélectionner et ici nous avons en survol, en survolant. Par conséquent, nous allons créer deux animations différentes ici. Pourquoi ? Parce que d'abord, nous voulons animer tous ces éléments une fois que l'utilisateur survolera cette carte, puis nous voulons transformer tous ces éléments à leurs couleurs d'origine lorsque l'utilisateur survolera. Donc, d'abord, allons de l'avant et créer une animation personnalisée ici, sur le vol stationnaire, je vais créer une animation et appelons-ça carte hover. On y va. Alors, que devrions-nous faire ? Avons-nous besoin de créer un état initial ? Non, parce qu'on n'a pas besoin d'un état initial. L' état initial est ce que nous avons ici. Nous avons juste besoin de changer la couleur de l'arrière-plan et la couleur de ces éléments. Pendant que cette carte de service est sélectionnée, je vais créer une action, parce que je veux modifier la couleur de l'arrière-plan de ce bloc d'acier et ici, sous le style, je vais choisir la couleur BG, la couleur de l'arrière-plan. Là, nous allons et ici je peux choisir la couleur d'un nouveau fond pour cela. Laissez-moi choisir par défaut primaire, sympa, puis je vais modifier l'assouplissement de linéaire à easing out. La prochaine chose que nous devons modifier est la couleur de ce titre de projet. Je vais le sélectionner. Je vais créer une nouvelle action, et ce sera la couleur du texte cette fois. Laissez-moi aller de l'avant et changer la couleur de ce texte en blanc, juste comme ça, puis je vais sélectionner cette description du projet et ajoutons une nouvelle action ici, couleur du texte et je vais choisir le blanc. Ensuite, je vais diminuer l'opacité de 100 % à 60 % juste comme ça, pour avoir une bonne hiérarchie visuelle ici. Enfin, je vais sélectionner ce bouton de lien et je vais créer une nouvelle action, et ce sera à nouveau la couleur du texte, mais cette fois, ce sera notre couleur secondaire, cette orange. Laissez-moi jouer cette animation et voir si tout fonctionne parfaitement. Eh bien, il y a un problème. Ces animations doivent être regroupées. Nous voulons qu'ils jouent en même temps. En ce moment, ils jouent un par un, ce n'est pas ce qu'on veut. Je vais donc sélectionner cette couleur de texte, et je vais la faire glisser et la déposer au-dessus de notre première action, qui est la carte de service. Je vais faire la même chose pour ces deux éléments aussi, il suffit de le faire glisser et de le déposer et maintenant ils sont regroupés. Ainsi, l'animation se produit en même temps. Laisse-moi jouer une fois de plus. Fantastique. Laissez-moi enregistrer l'animation et voir si cela fonctionne parfaitement. Je vais le sauver. Je vais en prévisualiser, et je vais planer dessus. Ça a l'air génial. Mais cela fonctionne-t-il pour toutes les cartes ? Non, ça ne le fait pas. Que devrions-nous faire ? Devrions-nous aller de l'avant et animer ces cartes une par une ? Bien sûr que non, parce que ce n'est pas un moyen efficace. Puisque nous utilisons des classes, nous n'avons pas besoin de le faire. Alors, que devrions-nous faire ? Eh bien, je vais sélectionner cette carte stationnaire, et comme vous pouvez le voir ici, si je sélectionne cette carte de service, la première image clé ici dans la section Affecter, il est dit déclencheur d'interaction, et il dit, « Vous n'affectent maintenant que les éléments déclencheurs. » Donc, je vais ouvrir ces menus déroulants et je vais le changer en classe. Ensuite, je vais ouvrir ce menu déroulant et je vais le changer pour seulement les enfants avec cette classe. Maintenant, laissez-moi l'enregistrer et ici, comme vous pouvez le voir sous les paramètres de déclenchement, nous avons deux options différentes. Nous avons des éléments, nous avons de la classe. Par défaut, l'élément est sélectionné. Il est dit, « Déclencher uniquement sur l'élément sélectionné. » Ce n'est pas ce que nous voulons. Nous voulons que cette animation fonctionne pour toutes ces cartes. Donc, je vais le changer d'élément en classe et la classe va être carte de service. Comme vous pouvez le voir ici, toutes ces cartes ont la même classe, carte de service. Maintenant, si je l'ai prévisualisé, si je passe la souris sur ces cartes, vous pouvez voir que l'animation fonctionne pour toutes les cartes. Mais si je survolais, ils ne changent pas. C' est parce que nous n'avons pas créé l'animation survolante. Laisse-moi aller de l'avant et en créer un. Que devrions-nous faire ? Eh bien, ici, comme vous pouvez le voir, nous avons sur le vol stationnaire, nous allons créer une nouvelle action, début et animation. Cette fois, au lieu de créer une nouvelle animation personnalisée, je vais vous montrer un moyen rapide de le faire. Puisque nous voulons juste retourner leurs couleurs à leurs couleurs d'origine, je vais aller de l'avant et passer la souris sur ces cartes survolent et ici comme vous pouvez le voir, nous avons deux icônes. Si je clique sur ces icône point, je peux dupliquer cette animation et j'ai la carte hover aussi. Alors je vais le renommer. Je vais cliquer sur cette icône de point et laissez-moi le renommer en Carte Hover Out. Maintenant, je vais le sélectionner, cliquer dessus, et ici je vais sélectionner tous ces éléments, et je vais changer leur couleur à leurs couleurs d'origine. Pendant que la carte de service est sélectionnée, je vais aller de l'avant et changer la couleur en blanc. Maintenant, je vais sélectionner le titre du projet et je vais changer sa couleur en noir neutre. Maintenant, je vais sélectionner la description du projet et je vais changer sa couleur en milieu neutre. Enfin, je vais sélectionner ce bouton de lien et je vais changer sa couleur en principal par défaut. Juste comme ça. Je vais appuyer sur « Enregistrer » et maintenant si je prévisualise mon projet et si je survole ces cartes, vous pouvez voir que cette animation fonctionne dans les deux sens. Juste comme ça. Pouvez-vous voir à quel point il est facile de créer des interactions et des animations sur Webflow ? Tous les bons gars. C'est tout pour cette vidéo. J' espère que ça vous a plu et je vous verrai dans la prochaine vidéo. 63. Accessibilité: Dans cette vidéo, nous allons parler de l'accessibilité. En tant que concepteur web et développeur web, nous devons toujours nous assurer que notre site Web est accessible à tous. Peu importe si quelqu'un est aveugle ou a une déficience visuelle, il devrait être en mesure d'utiliser notre site Web facilement et facilement. Mais comment rendre notre site Web plus accessible ? Eh bien, dans cette vidéo, vous allez apprendre quelques points importants sur l'accessibilité, et vous apprendrez quelques techniques pour rendre votre design plus accessible. Es-tu prêt ? Commençons. Lorsque vous concevez votre site Web, vous devez vous assurer de vérifier le rapport de contraste de vos couleurs car certaines personnes ont des déficiences visuelles et peuvent ne pas traiter les couleurs comme nous le faisons. Par conséquent, il est important de s'assurer que nos couleurs ont suffisamment de contraste et qu'elles réussissent le test de rapport de contraste. Nous vérifions généralement le rapport de contraste de nos couleurs lorsque nous concevons l'interface utilisateur, mais en tant que développeur web, il vaut la peine de vérifier le rapport de contraste de vos couleurs lorsque le développement de votre projet se fait comme Eh bien. Comment peux-tu faire ça ? Nous en avons déjà parlé, mais je vais le mentionner une fois de plus rapidement. Donc ici, si je sélectionne ce texte, cette rubrique, et si je passe à la section typographie, je vais cliquer sur Couleur. Ici, nous avons la section qui dit rapport de contraste. Il y a un point d'interrogation ici. Si je clique dessus, vous pouvez voir que le rapport de contraste affecte l'accessibilité de votre site. contraste suffisant dépend des couleurs de premier plan et d'arrière-plan, la taille de la police et du poids de la police. C' est absolument vrai. Fondamentalement, ce qui nous intéresse est la couleur de notre premier plan et la couleur de notre arrière-plan. Dans ce cas, la couleur de ce texte est notre couleur de premier plan, et cette couleur bleu clair est notre couleur d'arrière-plan. Ici, comme vous pouvez le voir, nous avons la note triple A, et cela signifie que nous avons le taux de contraste le plus élevé, ce qui est incroyable. Donc, visez toujours le triple A, mais parfois vous pouvez obtenir le double A aussi. C' est acceptable aussi. Laissez-moi vous montrer un exemple. Si j'essaie de modifier cette couleur, on y va, maintenant j'ai le double A. Il est encore lisible, mais le rapport de contraste n'est pas beaucoup. Comme vous pouvez le voir, c'est quatre contre un. Je vais annuler le processus, Command Z ou Control Z. Lorsque vous terminez le développement de votre projet, vous devez aller de l'avant et vérifier toutes vos couleurs un par un et voir si vous réussissez le test de rapport de contraste. Si vous voyez ce triple A ou double A, cela signifie que vous êtes prêt à partir. Vous devez aller de l'avant et vérifier vos couleurs un par un. Je vais faire défiler ici. Laissez-moi sélectionner ce bouton, En savoir plus, et si je me dirige vers la couleur, vous pouvez voir que j'ai triple A aussi. Et ici ? sûr que c'est triple A. On y va, parce qu'on a déjà vérifié cette couleur. Qu' en est-il de cette description du projet ? Ça a l'air bien. On a le double A, c'est toujours acceptable. Fondamentalement, vous devez aller de l'avant et vérifier tous vos éléments un par un. Ici, nous avons triple A. Et celui-là ? Nous avons aussi le triple A. C' est la première chose que vous devez vérifier en termes d'accessibilité. Passons maintenant au point suivant. Je vais faire défiler vers le haut. Dans presque tous les projets, nous utiliserons des images. Nous pouvons utiliser des images décoratives ou des images significatives. Par exemple, ici, dans cette section récente du projet, vous pouvez voir que nous avons l'image du projet sur ces cartes. Je vais faire défiler vers le bas. Ici, nous avons quelques memojis décoratifs. Ce sont des images décoratives. Je vais faire défiler vers le bas. Ces icônes sont également décoratives. Qu' est-ce que je veux dire par décoratif ? Eh bien, quand quelque chose n'ajoute pas de valeur à notre site Web et que cela n'aide pas le moteur de recherche à comprendre la structure de votre site, cela signifie qu'il est décoratif. Je vais faire défiler ici. Nous n'avons pas d'autres images. Si je vais à la page Mes projets ici, cette image n'est pas décorative car il s'agit d'une des images de notre projet. Mais comment faire comprendre aux moteurs de recherche la structure de notre site et la signification de nos images ? On peut utiliser quelque chose appelé Alt Text. Laissez-moi aller à ma page d'accueil, et ici je vais sélectionner ces cartes. Si je clique sur l'icône Paramètres, comme vous pouvez le voir ici, nous avons le texte Alt. Alt est la forme courte de l'alternative, donc c'est un texte alternatif. Pour chaque image, nous pouvons spécifier un texte alt, mais pourquoi devons-nous le faire ? Eh bien, il y a beaucoup de raisons différentes pour spécifier un texte alt pour vos images. Numéro 1, les moteurs de recherche pourraient facilement comprendre la signification derrière vos images, et par conséquent, ils peuvent classer votre site Web plus haut. De cette façon, vous pouvez améliorer votre référencement. La deuxième raison est que parfois nos images peuvent ne pas être complètement chargées. Dans ce cas, le navigateur affichera le texte alt ou le texte alternatif à l'utilisateur. La dernière raison est que le texte alternatif ou le texte alternatif pourrait être utile aux personnes ayant une déficience visuelle qui utilisent des lecteurs d'écran. Les personnes ayant une déficience visuelle utilisent généralement des lecteurs d'écran pour lire le contenu d'une page Web. Lorsque nos images n'ont pas de texte alternatif, le lecteur d'écran lit simplement son nom. Par exemple, si je vais à Mes actifs, je vais faire défiler vers le bas, il est indiqué Carte 1. Ce n'est pas descriptif, donc l'utilisateur peut être confus. Si je fais défiler ici, vous pouvez voir que ces images de projets n'ont pas de noms descriptifs. Ici, nous avons 1, 2, 3, 4, 5, 6. Nous devrions ajouter du texte alt à nos images afin d'aider un utilisateur ayant déficience visuelle à comprendre la signification de votre image. Mais comment pouvons-nous ajouter du texte alt à nos images ? Il y a plusieurs façons de le faire. La première et la plus simple est d'aller dans les Ressources, puis si vous passez le curseur sur l'une de vos images, vous pouvez cliquer sur l'icône Paramètres. Ensuite, vous pouvez écrire votre texte alt. Ici, nous avons un indice. Il dit écrire une description de cette image. Le texte Alt est utilisé par les lecteurs d'écran et/ou si une image ne se charge pas. Ici, nous avons deux onglets différents. Nous avons descriptif, nous avons décoratif. Lorsque notre image est décorative, nous pouvons simplement la mettre en décoratif comme ça. Ici, il est dit, les images décoratives ne transmettent pas de sens et ne nécessitent pas de texte alt. C' est vrai. Par conséquent, nous n'avons pas besoin d'ajouter du texte alt à nos images décoratives. Mais si notre image a un sens, nous devons écrire une description pour cela. Nous devons sélectionner Descriptive, et ici nous devons écrire quelque chose. Cette image n'est pas décorative. Si je vais à la section Témoignage, c'est l'image de notre client. Ici, nous pouvons simplement écrire l'image de Kristine Watson. Fait. A partir de maintenant, chaque fois que vous utilisez cette image sur votre site, elle aura ce texte alt. Mais il y a quelque chose que vous devez garder à l'esprit. Lorsque vous ajoutez une image à l'aide de la section d'arrière-plan, elle n'a pas de texte alt. Donc ici, cette icône n'a pas de texte alt. Mais si vous voulez utiliser cette icône ailleurs en utilisant un élément d'image, comme vous pouvez le voir ici, vous pouvez aller à vos actifs et vous pouvez simplement cliquer sur l'icône Paramètres et définir son texte alt sur décoratif comme ça. Je vais faire la même chose pour ces deux icônes aussi. Décoration et décorée. En règle générale, nos icônes sont toujours décoratives. Laisse-moi faire défiler un peu vers le haut. Mais qu'en est-il de ces images dynamiques ? Comme vous vous en souvenez, cette image provient de notre CMS. Il ne vient pas de nos actifs ici quand nous avons créé notre collection dans notre CMS ici. Lorsque nous avons créé nos articles de collection, par exemple, Simplify+, nous avons téléchargé cette image à partir de notre ordinateur. Ici, nous pouvons spécifier n'importe quel texte alt. Que devrions-nous faire ? Eh bien, pour résoudre ce problème, vous pouvez simplement aller à votre collection Projects ici. Ensuite, si vous cliquez sur cette icône Paramètres, ici vous pouvez créer un nouveau champ personnalisé. Je vais ajouter un champ ici, et ce sera du texte brut, et l'étiquette sera texte ALT. Juste comme ça. Cela ne sera pas nécessaire, donc je ne vais pas cocher cette case requise. Je vais cliquer sur « Enregistrer le champ » et « Enregistrer la collection ». Maintenant, si je vais à ce projet Simplify+. Tout d'abord, permettez-moi d'aller de l'avant et de changer son nom pour Simplifier. Si je fais défiler vers le bas, nous avons ici ce nouveau champ de texte alt. Nous pouvons simplement décrire cette image. Pour l'instant, je vais juste écrire quelque chose comme exemple. Image du projet Simplifier. Pas le meilleur texte alt en passant. Je vais le sauver. Laisse-moi passer à mon projet. Si je sélectionne cette image et si je clique sur l'icône « Paramètres », ici, comme vous vous en souvenez, nous avons connecté cet élément à notre image de projet. Ici, je peux simplement obtenir le texte alt de mes collections. Si je coche cette case, je peux choisir le texte alt, le texte brut, et c'est fait. Maintenant, chacune de ces images aura son propre texte alt. Bien sûr, si vous avez déjà défini le texte alt pour eux. Nous pouvons faire la même chose pour la page des projets. Si je vais au modèle de projet, je vais sélectionner cette image, et je vais cliquer sur cette icône « Paramètres », je vais obtenir le texte alt de Projets, et laissez-moi choisir le champ ALT Texte comme ça. C' est tout au sujet du texte alt. Mais il y a encore une chose à propos de l'accessibilité, c'est votre hiérarchie des en-têtes. Comme je l'ai déjà dit, nos rubriques devraient avoir une structure claire. Si je vais sur ma page d'accueil et si je me dirige vers la section Héros, je peux voir que ce titre a la balise HTML H1. Si je clique sur l'icône Paramètres, vous pouvez voir que nous avons H1 à H6. Mais comment devriez-vous choisir votre type de titre ? Laisse-moi te dire une règle. H1 est réservé aux mots les plus importants de votre page. Ce sont généralement les premiers mots que l'utilisateur voit sur votre page. Dans ce cas, c'est notre titre de section Héros. N' oubliez pas que vous devez toujours utiliser le type d'en-tête H1 une fois sur chaque page. Vous ne devriez pas l'utiliser plusieurs fois. Mais pourquoi cela a-t-il de l'importance ? Parce que les moteurs de recherche peuvent facilement comprendre la structure de votre site Web lorsque vous définissez les types d'en-tête correctement. Si vous vous souvenez, lorsque nous concevons cette section de projet récente, j'ai dit qu'ils ont délibérément défini son type de titre sur H3. Ce n'est pas juste. Pourquoi ? Parce que vous ne devriez pas ignorer un type d'en-tête lorsque vous créez une page Web. Lorsque vous utilisez H1, le deuxième texte le plus important de votre page Web doit avoir la balise H2. Dans ce cas, je l'ai mis sur H3 pour vous expliquer la différence ici. Si je saute un type de titre, les moteurs de recherche comme Google ne peuvent pas comprendre correctement la structure de votre site Web, et par conséquent, ils ne donneront pas un rang plus élevé à votre site Web. Je vais aller de l'avant et rapidement réparer ça. Mais avant de le faire, je vais vous montrer une fonctionnalité très utile, la section Audit. Si vous vous dirigez vers le coin inférieur gauche ici, vous pouvez voir que nous avons différentes options. Nous avons ce bouton d'aide, nous avons des didacticiels vidéo, nous avons QuickFind, puis nous avons la section Audit. Si je clique dessus, ici nous pouvons trouver les images de texte alt manquantes et le niveau de titre ignoré. Comme vous pouvez le voir, il est dit : « Les audits vérifient la page actuelle pour trouver des occasions d'améliorer les performances et la convivialité de votre site. » Je vais le rejeter. Ici, si je clique sur ce texte alt manquant (13), vous pouvez voir qu'il nous montre toutes les images qui n'ont pas de texte alt. Il nous montre même la collection de projets ici et tous les éléments à l'intérieur qui n'ont pas de texte alt. Nous avons déjà spécifié le texte alt pour ce projet Simplify, mais jetez un oeil, les autres projets n'ont pas de texte alt. Nous avons deux options ici. On peut ignorer ça. Par exemple, si cette Carte 1 n'a pas besoin d'un texte alt, nous pouvons simplement cliquer sur cette icône de cloche pour l'ignorer, ou si vous voulez simplement aller de l'avant et ajouter un texte alt à notre image, nous pouvons simplement cliquer sur ce bouton flèche droite. Il est écrit : « Emmenez-moi à la solution. » Si je clique dessus, nous allons prendre le côté Asset, et nous pouvons spécifier un texte alt descriptif ici. Mais qu'en est-il de l'autre section ? Comme vous pouvez le voir ici, nous avons ce niveau de titre ignoré. Si je l'ouvre, il est écrit ici « Les en-têtes ordonnés aident les visiteurs à comprendre la structure de la page et à améliorer la navigation de la page. » Il est écrit, « Projets de la rubrique H3 ». Quelque chose ne va pas avec le cap de ces projets. C' est exactement ce que nous allons aller de l'avant et réparer. Soit je peux l'ignorer, soit dire emmenez-moi à la solution. Si je clique sur cette flèche droite, je peux changer le type de titre sur le côté droit ici. Je vais le changer en H2, et maintenant nous avons une structure correcte. Je vais faire défiler vers le bas. Permettez-moi également de sélectionner cette rubrique. Ça va être H2 aussi. Je vais le mettre à H2. Joli. Laisse-moi faire défiler. Tout a l'air bien. Maintenant, laissez-moi passer aux vérifications. On y va. Cet avertissement a disparu parce que maintenant notre site Web a une structure claire en termes de types de rubriques. Je peux simplement aller à d'autres pages, par exemple, Contactez-nous. Ici, ce titre « Contactez-nous » est le titre le plus important de cette page. Par conséquent, nous utilisons le type de titre H1. Si je vais à la vérification, il est dit : « Aucun problème n'a été trouvé. » C'est génial. Maintenant, laissez-moi aller à une autre page dans notre modèle de projets. Ici, je vais l'auditer. Il est écrit, « Niveau de titre ignoré », encore une fois, titre de projet. nom de ce projet a le type d'en-tête H1. Nous n'avons pas d'autre cap ici, sauf ici, ça va être H2, donc je vais le changer en H2 comme ça. Maintenant, si je le vérifie, on y va, cet avertissement est parti. Tous les bons gars. C'est tout au sujet de l'accessibilité. Lorsque vous créez un site Web, assurez-vous de le rendre accessible à tout le monde. C' est très important parce que c'est ce qui fait de vous un grand concepteur web et développeur web. J' espère que vous avez apprécié cette vidéo. Je te verrai dans la prochaine. 64. Paramètres du projet: Hé, dans cette vidéo, nous allons parler d'un cadre de projet. Nous en avons déjà parlé avant, mais dans cette vidéo, je vais vous montrer d'autres fonctionnalités du paramètre du projet. Comme vous vous en souvenez, afin d'aller aux paramètres du projet, vous devez vous diriger vers le coin supérieur gauche et vous devez cliquer sur cette icône « W » ici, puis d'ici, vous pouvez aller aux paramètres de votre projet, et ici nous avons différentes options. Nous avons General, Hosting, Editor, etc Nous ne allons pas plonger dans chacun d'eux parce que, par exemple, nous avons une vidéo dédiée sur le référencement et aussi les plans d'hébergement. Je vais seulement vous accompagner dans les onglets et les champs les plus importants ici. l'onglet Général, nous avons ce nom, c'est le nom de notre projet. Comme vous pouvez le voir ici, nous avons un indice : « C'est le titre du projet dans Webflow. » Ensuite, nous avons le sous-domaine. Il s'agit d'un domaine intermédiaire que Webflow nous fournit. C' est totalement gratuit et vous pouvez publier votre site web sur ce domaine. Pour le moment, ce projet n'est pas encore publié. Vous pouvez aller de l'avant et modifier cela, et si ce sous-domaine est disponible, vous pouvez utiliser ce domaine. Ici, nous pouvons sélectionner un dossier et il est dit « Les projets peuvent être déplacés dans et hors des dossiers ici ». Nous n'avons pas besoin de déplacer notre projet dans un dossier quelconque. Ensuite, nous avons ces icônes. Ici vous pouvez télécharger un Favicon. Un Favicon est cette petite icône que vous pouvez voir sur l'onglet de chaque navigateur. Il devrait s'agir d'une icône de 32 pixels par 32. Vous pouvez voir tous les formats pris en charge ici, PNG, GIF ou JPG. Vous pouvez également télécharger un Webclip. Il s'agit simplement d'une icône qui s'affiche lorsque lien de votre site Web est enregistré sur l'écran d'accueil d'un iPhone. Ceux-ci sont facultatifs, mais assurez-vous de télécharger le Favicon toujours pour votre site Web. Ensuite, nous avons la localisation. Ici, vous pouvez choisir le fuseau horaire dans cette liste. Ensuite, vous pouvez spécifier un code de langue. Il est dit : « Définissez le code de langue de votre site pour permettre aux navigateurs, applications de traduction et à d'autres outils d'effectuer des tâches sensibles à la langue. » C' est aussi facultatif. Vous pouvez accéder à la liste des codes de langue si vous cliquez sur ce lien, mais pour l'anglais, vous pouvez écrire EN, par exemple. Ensuite, nous avons le mot de passe du site Web Certaines de ces options sont verrouillées pour le forfait gratuit. Si vous voulez les utiliser, vous devez aller de l'avant et mettre à niveau votre compte ou vous devez ajouter un plan d'hébergement à votre projet. Nous allons parler des plans de compte et des plans d'hébergement, mais pour l'instant, vous avez juste besoin de savoir que certaines fonctionnalités ne sont disponibles dans les plans Pro ou pour les projets avec un plan d'hébergement. Par exemple, si vous voulez présenter votre projet, vous devez avoir un plan payant. Une autre chose importante est l'image de marque Webflow. Il est dit « Pour masquer la marque Webflow à partir du site publié, ajoutez de l'hébergement ou mettez à niveau votre compte vers Pro. » Quelle est la marque Webflow ? Laisse-moi aller voir le designer une seconde, et je vais te montrer ce que c'est exactement. Si vous publiez votre site Web, si vous cliquez sur ce bouton « Publier », c'est notre domaine de mise en scène que je viens de vous montrer. Si vous cliquez sur « Publier » pour sélectionner un domaine, vous pouvez publier votre site Web, et maintenant il est publié, et si je clique sur cette petite icône, nous y allons. Voici notre projet. Vous pouvez voir que dans le coin inférieur droit il y a ce badge « Made in Webflow », et il apparaîtra sur vos sites Web si vous utilisez le domaine de transit gratuit et si votre site Web est publié sur ce domaine. Si vous ajoutez un plan d'hébergement à votre projet, vous pouvez simplement le désactiver. Laissez-moi revenir aux paramètres du projet, voyons si nous avons autre chose. Ici, nous avons la vue d'ensemble de notre projet, la taille totale de l'actif, dernière publication, la dernière mise à jour, le nombre de pages, les soumissions de formulaires. Ce sont nos statistiques. Ici, nous avons l'activité du site, je vais faire défiler vers le haut. Si vous allez dans Hosting, vous pouvez ajouter un hébergement à votre projet. Nous en parlerons plus tard. Ensuite, nous avons le rédacteur en chef. Ici, vous pouvez ajouter des collaborateurs à vos projets afin que quelqu'un d'autre puisse modifier le contenu de votre projet, mais il n'est disponible que si vous disposez du plan de site CMS ou Business. Ensuite, nous avons la facturation. Nous n'allons pas en parler maintenant parce que nous avons une vidéo dédiée pour ça. Ensuite, nous avons SEO, le même cas. Nous en parlerons plus tard. Ensuite, nous avons des formulaires. Nous avons parcouru tous ces champs avant. Ensuite, nous avons des polices. Ici, vous pouvez ajouter vos polices personnalisées, nous en avons déjà parlé. Ensuite, nous avons des sauvegardes. Cette baignoire est si utile. Vous devez savoir que Webflow sauvegarde votre projet lorsque vous appuyez sur Command Shift S ou Control Shift S sur Windows. Pourquoi cela a-t-il de l'importance ? Parce que parfois vous pouvez changer quelque chose et que vous voulez revenir à la version précédente de votre projet. Dans ce cas, vous pouvez simplement vous diriger vers les sauvegardes et vous pouvez trouver la version appropriée ici, par exemple, celui-ci dit il y a deux jours, sauvegarde automatique , trois pages, 102 styles, etc. vous pouvez trouver la version appropriée ici, par exemple, celui-ci dit il y a deux jours, sauvegarde automatique, trois pages, 102 styles, etc. cette version, puis vous pouvez la restaurer. Mais gardez à l'esprit que si vous souhaitez restaurer certaines anciennes sauvegardes, vous avez besoin d'un plan d'hébergement ou d'un compte payant. Mais vous pouvez restaurer facilement ces sauvegardes récentes. Ensuite, nous avons des intégrations. Dans cet onglet, vous pouvez réellement connecter votre projet avec des services tiers. Par exemple, Google Analytics, Google Maps, Facebook Pixel, et aussi vous pouvez générer un jeton API. Nous allons parler des intégrations dans une vidéo séparée, mais pour l'instant, vous avez juste besoin de savoir qu'il existe dans les paramètres du projet. Enfin, nous avons le code personnalisé, qui est également disponible pour les plans payants. En utilisant cette section, vous pouvez ajouter du code personnalisé à votre site Web si nécessaire. Mais la plupart du temps, pour la plupart des sites Web, vous n'avez pas besoin d'ajouter de code personnalisé. Mais si vous avez besoin d'étendre les capacités natives de Webflow, vous pouvez simplement mettre à niveau votre forfait et profiter de ces fonctionnalités utiles. Qu' avons-nous ici dans la barre d'outils ? Ici, nous avons quelques icônes. Le premier est l'icône Transférer. Si je clique dessus, il est dit « À un utilisateur, À une équipe ». À l'aide de ce bouton, vous pouvez transférer votre projet vers un autre compte Webflow. Mais pour ce faire, encore une fois, vous devez mettre à niveau votre plan vers un compte payant. Vous pouvez également transférer votre projet à une équipe si vous accédez à cet onglet, c'est une option utile si vous voulez transférer le projet du client son propre compte et que vous ne voulez pas héberger son projet sur votre propre compte. Nous parlerons des avantages de cette option plus tard. L' option suivante est Supprimer. Si vous voulez supprimer votre projet, vous devez simplement entrer ce code rouge ici, puis supprimer votre projet pour toujours. Rappelez-vous, une fois que vous avez supprimé votre projet, il est supprimé définitivement et vous ne pouvez pas annuler cette opération. Veillez à réfléchir à deux fois avant de supprimer votre projet pour toujours. Ensuite, nous avons l'option Dupliquer. Parfois, vous pourriez avoir besoin de dupliquer un projet pour une raison spécifique, peu importe si vous voulez juste archiver un projet ou si vous voulez juste apporter quelques modifications à la version dupliquée, vous pouvez simplement cliquer sur ce bouton « Dupliquer », et ici vous pouvez simplement dupliquer votre projet. La dernière option ici est Dépublier. Si vous cliquez dessus, votre site Web ne sera pas publié et vous devez le publier à nouveau. Ici, nous avons également d'autres options. Nous avons Share. Parfois, vous pourriez avoir besoin de partager votre projet avec d'autres concepteurs ou disons d'autres collaborateurs ou même avec le client. Si vous cliquez sur ce bouton « Partager », ici vous pouvez simplement activer ce commutateur, puis Webflow génère un lien de partage unique pour votre projet. Si vous copiez simplement ce lien et le partagez avec votre client ou quelqu'un d'autre, il ou elle peut facilement accéder au projet, mais avec un accès en lecture. Qu' est-ce que ça veut dire ? Cela signifie qu'ils peuvent apporter des modifications sur le site Web, mais ces modifications ne seront pas enregistrées, c'est pourquoi il est appelé lecture seule. Vous pouvez être sûr à 100% qu'ils ne peuvent pas casser votre site Web. Je vais l'éteindre et ensuite on a le Designer. Si vous cliquez dessus, vous serez redirigé vers le concepteur. Ensuite, nous avons rédacteur en chef. Il est écrit, « Publiez votre projet afin d'accéder à l'éditeur ». Nous parlerons de l'éditeur dans la prochaine vidéo. Les gars, c'est tout pour les paramètres du projet. Il y a beaucoup de choses dont nous n'avons pas parlé, comme la section SEO ou l'éditeur, mais nous allons certainement y plonger. Je vous ai aimé cette vidéo et je vous verrai dans la prochaine. 65. Editeur: Hé, dans cette vidéo, nous allons parler de l'éditeur de workflows. Mais avant cela, nous allons aller de l'avant et vérifier nos liens parce que nous allons publier notre site Web. Lorsque nous construisions ce projet, nous avons créé des liens, mais ce sont des liens vides. n'y a pas d'URL, nous n'avons donc pas créé de destination pour ces liens. Allons-y et réparons rapidement ça. Je vais commencer par la barre de navigation. Si nous cliquons sur ce lien de logo, cela ne nous emmène nulle part. Laisse-moi te montrer. Si je l'ai prévisualisé et si je clique dessus, rien ne se passe. C' est parce qu'il n'y a pas de destination pour ce lien. Je vais double-cliquer sur cette barre de navigation, et je vais sélectionner ce lien de logo de la barre de navigation. Ensuite, sur le côté droit, vous pouvez voir que nous avons les paramètres de la marque et ici nous avons différentes options. Ce qui nous intéresse, c'est le type et l'URL. Quel genre de comportement recherchons-nous ? Nous voulons y parvenir. Lorsque l'utilisateur clique sur ce logo, il doit l'amener à la page d'accueil. Je vais sélectionner le type. Par défaut, il est défini sur URL externe. Je vais le changer en page. Ensuite, à partir de ce menu de dépôt de page, nous avons créé deux pages statiques d'accueil et nous contacter. Je vais choisir la page d'accueil. Juste comme ça. Ensuite, nous pouvons spécifier s'il doit l'ouvrir dans le même onglet ou dans un nouvel onglet. Je vais le mettre sur cet onglet. Maintenant, allons-y et vérifions. Si je clique dessus, on y va. C' est exactement ce qu'on veut. Qu' en est-il des autres liens ici ? Je vais double-cliquer dessus. Je vais sélectionner ce lien d'accueil. Je vais changer le type en page et la page va être à la maison. Qu' en est-il des projets et services et contactez-nous ? Laissez-moi d'abord sélectionner ce Contactez-nous, puis je vais changer le type en page, et cela va amener l'utilisateur à la page Contactez-nous. Mais qu'en est-il des projets et des services ? Eh bien, comme vous vous en souvenez, nous avons créé la section projet et la section services sur notre page d'accueil. Donc, lorsque l'utilisateur clique sur le lien de ces projets, l'utilisateur doit être amené à cette section particulière de notre page d'accueil. Comment est-ce possible ? C' est très simple. Tout d'abord, laissez-moi revenir à mon instance et je vais faire défiler vers le bas. Laissez-moi aller à la section du projet récent et je vais sélectionner cette section. Ensuite, si vous vous dirigez vers les paramètres de l'élément sur le côté droit, ici nous avons ce champ, ID. Je vais spécifier un ID pour cette section particulière. Il doit s'agir d'un identifiant unique. Souvenez-vous de ça. Je vais écrire, projets. Cool. Mais qu'en est-il des services ? Je vais faire défiler vers le bas. Je vais faire la même chose pour cette section des services, et ici je vais écrire des services. Joli. On y est presque. Je vais faire défiler vers le haut et je vais double-cliquer sur ma barre de navigation. Si je sélectionne ces projets lien, sur le côté droit, si j'ouvre ce menu déroulant de type, nous avons différentes options en dehors de l'URL externe et la page que nous utilisons avant, nous avons téléphone, e-mail, section et bien. Je vais choisir la section, puis nous avons ce nouveau menu déroulant de section, et si je l'ouvre ici, nous avons différentes sections. Ces deux-là sont pour nos formulaires, je vais sélectionner des projets. C' est la section que nous venons de créer. Voyons maintenant ce qui se passe si je retourne à mon instance et si je prévisualise ce projet, je vais cliquer sur les projets. On y va. Nous sommes amenés à la section projet. Vous pouvez trouver ce comportement sur de nombreux sites Web différents de nos jours. Allons de l'avant et faisons la même chose pour les services. Laissez-moi sélectionner ce type. Je vais choisir la section et me laisser sélectionner les services. On a fini, sauf que ce n'est pas le cas. Laissez-moi revenir à l'instance. Je vais en prévisualiser. Je vais cliquer sur les services. On y va. Ça a l'air bien. Cependant, nous avons un problème. Si je vais à une autre page, par exemple, notre page Contactez-nous, laissez-moi vous montrer ce qui se passe. Je vais le prévisualiser et si je clique sur les projets, comme vous pouvez le voir, rien ne se passe parce que nous n'avons pas la section projet ici. La même chose se produit si je clique sur ce service. Comment pouvons-nous réparer ça ? Laissez-moi vous montrer comment. Je vais revenir à ma page d'accueil, et je vais double-cliquer sur cette barre de navigation et me laisser sélectionner le lien de ce projet. Ici, le type est défini sur section et vous allez le retourner à l'URL externe. Ici, je vais supprimer ce signe de hashtag et nous pouvons simplement écrire une coche arrière et une barre oblique avant, puis je vais ajouter un signe de hashtag. Enfin, nous devons spécifier nos sections ID. Laissez-moi écrire des projets. Je vais faire la même chose pour ces services. Laissez-moi sélectionner ce lien. Je vais changer son type en URL externe, et je vais écrire une barre oblique en avant, un signe de hashtag et des services. De cette façon, nous utilisons un lien d'ancrage. Cela signifie aller à notre page d'accueil, puis ce hashtag services signifie aller à cette section particulière. Maintenant, allons-y et voyons si ça marche. Mais pour le vérifier, vous devez d'abord publier votre site Web parce qu'il ne fonctionne pas si nous allons simplement l'avant et le prévisualiser. Je vais le publier. Je vais sélectionner ce domaine intermédiaire, et appuyez sur cette publication pour sélectionner un domaine. Joli. Ensuite, si je l'ouvre ici, je peux cliquer sur les projets et je serai amené à cette section. Si je clique sur les services, je serai redirigé vers cette section. Mais ce qui est cool, c'est que si je vais à la page Contactez-nous, par exemple, et si je clique sur les projets, nous reviendrons à notre page d'accueil, directement à cette section du projet. C' est si utile. N'est-ce pas ? Maintenant, allons de l'avant et sélectionnez ce bouton entrer en contact. Je vais cliquer sur l'icône des paramètres, puis ici je vais aller à la section de la page. Laissez-moi choisir Contactez-nous. Qu' en est-il du travail CR ? Je vais le sélectionner et je vais choisir la section ici, section page, et laissez-moi choisir des projets. Laisse-moi faire défiler ici. Ces boutons en savoir plus ont des URL dynamiques, donc nous n'avons pas besoin de les modifier. Qu' en est-il de ces boutons apprendre plus ? Nous n'avons pas créé de page pour nos services car il s'agit d'un projet fictif et nous n'avons pas besoin de créer des pages simples encore et encore. Jusqu' à présent, vous avez appris à créer une page moderne avec des interactions complexes. Si vous le souhaitez, vous pouvez aller de l'avant et créer une page pour ces services, mais ce n'est pas nécessaire pour ce cours. Je vais faire défiler vers le bas. Ici, nous avons également différents liens. Nous n'avons pas créé de page pour eux aussi. C' est très bien parce que je voulais juste vous montrer comment vous pouvez créer un pied de page avec différents liens. Vous pouvez toujours aller de l'avant et créer d'autres pages et définir une destination pour ces liens. Passons maintenant à notre sujet principal qui est l'éditeur. Lorsque vous développez un site Web, votre client ne sait pas comment travailler avec le concepteur de flux web et il ne devrait pas le faire. Pourquoi ? Parce que c'est trop complexe pour eux d' apprendre toutes les choses que vous avez apprises dans ce cours, et c'est tout à fait compréhensible. Doivent-ils toujours vous contacter s'ils veulent modifier quelque chose, modifier le contenu de leur site Web ? Bien sûr que non. Il peut utiliser l'éditeur. Si vous vous dirigez vers ce haut de votre icône dans le coin supérieur gauche, et si vous cliquez dessus, vous pouvez trouver l'éditeur. Je vais cliquer dessus et nous serons amenés à l'éditeur. Voici le rédacteur en chef. Comme vous pouvez le voir, nous avons cette barre d'outils en bas, nous avons des pages, des collections, des paramètres. Ensuite, nous avons deux boutons, retour au site en direct et publier. Comment les clients peuvent-ils aller de l'avant et modifier le contenu ici ? C'est si simple. Supposons que vous souhaitiez modifier le titre. Ils peuvent simplement passer le curseur sur ce titre, ils peuvent cliquer dessus et ensuite ils peuvent commencer à le modifier. Supposons que je veux changer ce mot étonnant avec incroyable, juste comme ça. C' est si simple. Ils n'ont pas besoin d'aller voir le concepteur et de tout modifier. Ils peuvent également insérer un lien ici. Ils peuvent l'envelopper avec span, toutes sortes de choses, mais ils ne peuvent pas modifier la mise en page du site Web. C' est très important. Ils peuvent modifier vos paramètres d'affichage, les propriétés CSS et ce genre de choses. Supposons qu'ils veulent changer ce bouton toucher. Ils peuvent passer la souris dessus, et s'ils cliquent sur cette icône de paramètres ici, ils peuvent modifier le texte. Ils peuvent également modifier le lien. Je vais cliquer sur Modifier le texte, et ici je vais le modifier pour commencer, par exemple. Juste comme ça. Je vais l'annuler. Et les images ? Et bien, changer d'image est aussi facile. Ils peuvent survoler une image et, s'ils cliquent dessus, ils peuvent sélectionner une nouvelle image à partir de leur ordinateur. Je vais faire défiler vers le bas. Ils peuvent même modifier le contenu de leur liste de collections. Laissez-moi cliquer sur ce bouton « En savoir plus » et maintenant nous sommes sur la page du projet. Tu te souviens quand on a parlé du texte riche, celui que nous avons utilisé ici pour les détails ? Lorsque nous utilisons un texte enrichi, le client peut simplement le modifier ici. Ils peuvent l'éditer, ils peuvent le formater, ils peuvent le rendre gras, ils peuvent ajouter des liens, ils peuvent même ajouter des images et des vidéos à cette section. Comment ? Si je clique ici, je peux cliquer sur ce bouton plus, et voilà. Je peux choisir une image, une vidéo. Il peut même incorporer un code. Il est uniquement disponible pour un site payant ou un compte payant. Ils peuvent ajouter une liste de puces, etc. C'est pourquoi l'utilisation d'un texte enrichi est si bénéfique lorsque vous concevez un site Web pour un client parce qu'ils n'ont pas besoin de savoir comment modifier les paragraphes, les en-têtes, etc. Ils peuvent même ajouter un s'ils le veulent. Mais qu'en est-il du contenu dynamique ? Je vais aller à la page d'accueil. Ici, dans cette barre d'outils en bas, si je clique sur les pages, je peux voir toutes les pages. Je peux voir une pages statiques, pages de projet. Je peux modifier les paramètres de ces pages un par un, mais que se passe-t-il si je veux ajouter encore plus de projets à mon site Web ? C'est si simple. Je peux me diriger vers les collections. Je peux aller à la collection de projets et tous mes projets sont ici. Je peux simplement sélectionner l'un d'entre eux si je veux les modifier. Voici tous les champs que nous avons créés avant, comme l'image, le type de projet, la date d'achèvement, les détails du projet, même le texte complet. Si je veux créer un nouveau projet, je peux appuyer sur ce bouton vert et je peux créer un projet et le client peut simplement gérer son site Web sans votre aide. Bien sûr, s'ils veulent modifier la mise en page ou faire quelques modifications complexes, ils peuvent vous contacter. Sinon, ils peuvent simplement modifier le contenu, ajouter du nouveau contenu sans vous contacter. Enfin, une fois les modifications effectuées, ils peuvent cliquer sur ce bouton de publication pour publier toutes les modifications. Comme vous pouvez le voir ici, il dit que deux sont des changements inédits. Si je clique dessus, vous pouvez prévisualiser les modifications que vous avez apportées et vous pouvez cliquer sur « Publier ». Publiez dans les modifications, et maintenant ces modifications sont en ligne. C' est tout au sujet de l'éditeur. C' est un outil très utile pour modifier le contenu et ajouter de nouveaux contenus, en particulier pour vos clients. Parce que maintenant vous êtes un utilisateur professionnel de webflow et vous n'avez pas besoin d'utiliser l'éditeur, mais votre client ne l'est pas. Par conséquent, il ou elle doit utiliser l'éditeur afin d'ajouter du contenu ou de modifier le contenu. Les gars, c'est tout pour cette vidéo. J' espère que ça vous a plu et je vous verrai dans la prochaine vidéo. 66. Publier votre site Web: Maintenant que notre site est prêt, il est temps de publier notre site web. Mais avant cela, vous devrez peut-être connecter votre domaine personnalisé à votre projet. Je vous ai déjà montré que si vous vous rendez à cette section de publication ici et si je clique sur ce bouton « Publier », vous pouvez voir que webflow crée un domaine de transit pour votre projet. C' est totalement gratuit et vous pouvez aller de l'avant et modifier cette URL dans les paramètres du projet. Toutefois, si vous construisez un projet pour un client, vous ne voulez pas utiliser le domaine intermédiaire car il n'a pas l'air professionnel. Par conséquent, vous devez connecter le domaine personnalisé à votre projet. Comment peux-tu faire ça ? Eh bien, vous pouvez simplement cliquer sur ce bouton ici ou vous pouvez directement aller aux paramètres du projet et aller à l'onglet hébergement. Je vais cliquer dessus et je serai redirigé vers l'onglet hébergement des paramètres du projet. Voici où nous pouvons ajouter un plan de site pour notre projet. Tous les projets de votre plan de démarrage sont livrés avec la mise en scène gratuite, comme vous pouvez le voir, il est indiqué ici et si vous voulez connecter le domaine personnalisé à votre projet, vous devez mettre à niveau vers un plan de site payant. Donc, vous devez ajouter un plan de site ici, vous pouvez choisir entre différentes options, comme de base, CMS, entreprise. Nous parlerons des différences plus tard, mais le processus ressemble à ceci. abord, vous allez ajouter un plan d'hébergement, un plan de site à votre projet, puis l'option de domaine personnalisé sera disponible. Si vous avez déjà un domaine, vous pouvez simplement l'écrire ici et ensuite vous devez aller de l'avant et mettre à jour votre DNS. Nous n'allons pas plonger dans les questions techniques maintenant, car la connexion d'un domaine personnalisé à votre projet dépend de votre fournisseur DNS. Si vous avez acheté votre domaine à partir du domaine Google, votre fournisseur DNS est le domaine Google, et chaque fournisseur a son propre processus d'installation. Par conséquent, il n'est pas possible d'aller de l'avant et d'expliquer le processus de connexion de domaine personnalisé à partir de tous les fournisseurs de domaine. Ce processus d'installation peut changer fréquemment, donc la meilleure façon d'en savoir plus est de se diriger vers ces sections de domaine personnalisées et vous cliquez dessus, apprenez à configurer l'hébergement de domaine personnalisé. Si vous cliquez dessus, vous serez redirigé vers une autre page et ici il y a une très bonne vidéo que vous pouvez regarder expliquant comment vous pouvez connecter un domaine personnalisé à votre projet. Vous pouvez également aller de l'avant et lire cet article car Webflow met à jour ces articles fréquemment s'ils décident de changer quelque chose. C' est un processus simple. Cependant, comme le processus semble différent pour chaque fournisseur, nous n'allons pas plonger dans les problèmes techniques, mais le processus est si simple et cela ne prend pas de temps. Une fois que vous avez connecté votre domaine personnalisé, vous pouvez aller avant et publier votre site Web sur votre domaine personnalisé. Comment peux-tu faire ça ? C'est si simple. Vous pouvez simplement vous diriger vers ce bouton « Publier », vous pouvez cliquer dessus et ensuite ici, dehors de ce domaine intermédiaire, vous pouvez choisir votre domaine personnalisé et cliquer sur « Publier » pour les domaines sélectionnés. N' oubliez pas que vous pouvez toujours dépublier votre site web également. Vous pouvez également aller au concepteur et vous pouvez cliquer sur ce bouton « Publier » dans la barre d'outils et vous pouvez choisir votre domaine personnalisé ici aussi, puis cliquer sur le bouton « Publier ». Actuellement, notre domaine de transit est sélectionné. Publions notre projet une seconde, et maintenant il est publié et vous pouvez l'ouvrir si vous cliquez sur cette petite icône. Chaque fois que vous apportez des modifications à votre site Web, vous devez vous assurer d'aller de l'avant et de le publier. Sinon, ce changement est privé et personne ne peut le voir. Assurez-vous de publier votre site Web une fois que vous avez apporté certaines modifications. Si vous souhaitez dépublier votre site Web, vous pouvez simplement cliquer sur ce bouton Dépublier et il sera inpublié. Si vous voulez modifier cette URL intermédiaire, comme je l'ai mentionné précédemment, vous pouvez vous diriger vers les paramètres du projet, puis sous l'onglet général ici vous avez un sous-domaine et vous pouvez simplement modifier ce sous-domaine. Permettez-moi de le changer pour autre chose : cercledesign. webflow.io, je vais enregistrer les modifications et puis je vais le publier maintenant. Actuellement, notre site Web est publié sur ce domaine intermédiaire et personne d'autre ne peut utiliser cette URL. Il s'agit d'une URL unique pour notre projet. Je vais l'ouvrir. Voilà, l'URL a été changée. Dans les prochaines vidéos, nous allons parler différents plans d'hébergement que vous devriez héberger sur Webflow ou non, donc si vous ne savez pas quel plan est adapté pour vous ou vos clients, ne vous inquiétez pas, nous allons y entrer. Les gars, c'est tout pour cette vidéo. J' espère que ça vous a plu et je vous verrai dans la prochaine. 67. Plans de flux Weben: Maintenant que notre site Web est prêt, il est temps de parler des plans de Webflow. Webflow a des plans différents. Il a des plans de compte et des plans de site. Dans cette vidéo, nous allons parler de différents plans. Vous allez apprendre quelle est la différence entre eux, et vous pouvez décider quel plan correspond à vos besoins. Si vous êtes prêt, commençons. Si vous allez sur webflow.com/pricing, vous pouvez ouvrir cette page, et voici toutes les informations dont vous avez besoin sur les différents plans. Si je fais défiler vers le bas, vous pouvez voir que Webflow a deux types de plans : les plans de site et les plans de compte. Quelle est la différence entre eux ? Eh bien, chaque fois que vous voulez connecter votre domaine personnalisé à votre projet, vous devez ajouter un plan de site à votre projet. ce moment, nous utilisons le plan de mise en scène. Tous les projets ont par défaut le plan de transition. Mais si vous souhaitez accéder à plus de fonctionnalités et connecter votre domaine personnalisé à votre projet, vous devez ajouter un plan de site. Il s'agit essentiellement d'un plan d'hébergement. Si je clique sur cette section « Plan du site », je serai redirigé vers cette section. Voyons ce que nous avons. Comme vous pouvez le voir, nous avons quatre options différentes. Nous avons de base, CMS, entreprise et entreprise. Commençons par basique. On peut voir le coût ici. C' est le coût mensuel. Il est dit, le mieux pour un site simple qui n'a pas besoin d'un CMS. Fondamentalement, ces plans ne prennent pas en charge CMS. Si vous souhaitez publier un site Web qui n'a que des pages statiques, ce plan vous convient le mieux. Vous pouvez voir toutes les fonctionnalités disponibles ici, vous pouvez créer jusqu'à 100 pages statiques différentes, vous pouvez obtenir jusqu'à 25 000 visites mensuelles, vous obtiendrez 100 soumissions de formulaires par mois, et d'autres fonctionnalités différentes. Ensuite, nous avons CMS, ce qui est bon pour les sites Web qui ont besoin d'avoir des pages dynamiques et de travailler avec CMS. Encore une fois, vous pouvez créer jusqu'à 100 pages statiques, vous pouvez obtenir jusqu'à 100 000 visites mensuelles. À l'aide de cette procédure, vous pouvez créer jusqu'à 2 000 articles de collection. Dans notre projet, l'élément de collection est l'endroit où les projets que nous avons créés pour notre collection de projets. Si vous vous souvenez, nous avons créé différents projets comme simplifier, crypto pi, etc. Voici le nombre de formulaires soumis est beaucoup plus élevé. Vous pouvez aller de l'avant et lire toutes ces informations. On ne va pas y plonger. Je ne vais pas les lire un par un. Mais vous devez comprendre que si vous souhaitez connecter un domaine personnalisé à votre projet, vous devez ajouter un plan de site à votre projet. N' oubliez pas que les plans de site seront ajoutés aux projets, et non à votre compte, car nous avons également des plans de compte et nous allons en parler dans quelques minutes. Mais la prochaine chose que je vais mentionner ici, c'est les plans de commerce électronique. Ces plans de site sont bons pour les sites personnels, blogs et les sites d'affaires. Si vous souhaitez créer un site Web de commerce électronique à l'aide de Webflow, vous devez ajouter un plan de commerce électronique à votre projet. Ici, vous avez standard, plus, et avancé. Vous pouvez aller de l'avant et lire les informations ici et en apprendre plus sur les différentes plantes ici. Je vais revenir aux plans du site, et maintenant je vais parler des plans de compte. Lorsque vous travaillez avec Webflow, la plupart des fonctionnalités sont gratuites, mais il y a aussi des fonctionnalités payantes. Voici quelques fonctionnalités supplémentaires que vous devrez peut-être utiliser pour créer des projets étonnants. Maintenant, je vais cliquer sur ce « Plans de compte ». On y va. Ici, nous avons des plans individuels et des plans d'équipe. Si vous êtes un pigiste et que vous travaillez seul, vous n'avez pas besoin d'avoir un plan d'équipe. Mais si vous voulez collaborer avec d'autres développeurs et autres concepteurs, vous devrez peut-être aller de l'avant et obtenir un plan d'équipe. Mais parlons de plans individuels. Lorsque vous créez un compte sur Webflow par défaut, le plan de démarrage est affecté à votre compte. Ici, comme nous pouvons le voir, il est dit, tout ce dont vous avez besoin pour commencer à construire avec Webflow et c'est gratuit pour toujours. Vous pouvez créer jusqu'à deux projets à l'aide du plan de démarrage. Si je clique dessus, vous pouvez voir que les projets sont sur des sites hébergés que vous construisez dans Webflow. Si vous créez deux projets et si vous ajoutez un plan de site à ces projets, vous pouvez toujours créer deux autres projets à l'aide du plan de démarrage. Ici, il est dit que vous pouvez les publier dans un sous-domaine webflow.io à partager en tant que prototypes ou ajouter un plan de site pour passer en direct sur un domaine personnalisé. Ensuite, vous avez la facturation client. Nous parlerons de cette option plus tard. La mise en scène, c'est gratuit. Si je clique dessus, nous verrons l'information ici. Il indique jusqu'à deux pages statiques et 50 articles CMS. Cela signifie que vous pouvez créer plus de deux pages statiques et plus de 50 éléments CMS. N' oubliez pas que vous ne pouvez pas créer plus de pages dynamiques, mais vous pouvez créer plus de deux pages statiques. Dans notre projet, nous n'avions que deux pages statiques : notre page d'accueil et notre page de contact. Laisse-moi aller de l'avant et te montrer. Si je vais à la « Pages (P) », ici vous pouvez voir sous Pages statiques que nous avons Accueil et Contactez-nous. Si j'essaie d'ajouter une nouvelle page ici, cela ne me permet pas de le faire. Laisse-moi te montrer. Il dit que vous avez créé toutes les pages autorisées par votre forfait gratuit. Pour en ajouter davantage, mettez à niveau votre plan de site. C' est la limite quand il s'agit de plan de démarrage. Vous ne pouvez pas transférer votre projet, vous ne pouvez pas exporter votre code également. L' une des principales fonctionnalités de Webflow est que vous pouvez exporter votre projet. Si je clique sur cette « exportation de code », il est dit, exportez des fichiers HTML et CSS propres et sémantiques à remettre à votre équipe de développement. Parfois, vous devrez peut-être héberger votre projet ailleurs. Ne pas utiliser l'hébergement de Webflow. Dans ce cas, vous pouvez vous diriger vers la barre d'outils ici, et en haut, vous pouvez voir cette option Exporter le code. En utilisant le plan de démarrage, il n'est pas possible d'exporter votre code. Comme vous pouvez le voir, il affiche l'aperçu HTML ici. Ce n'est pas tout le code de votre site. Si vous allez à CSS, vous pouvez également voir votre code, JavaScript, et les actifs. Si vous avez un compte payant, vous pouvez simplement exporter votre projet et l'héberger ailleurs ou apporter les modifications que vous souhaitez. C' est tout à fait à vous de décider. C' est quelque chose à considérer. Ensuite, vous n'avez aucun transfert de projet en utilisant starter. Laisse-moi te montrer. Vous pouvez transférer des projets à des équipes ou à toute personne disposant d'un compte webflow et vous ne pouvez pas utiliser d'étiquetage blanc. Il est dit, ajoutez votre propre logo au CMS et aux formulaires de paiement de facturation client et supprimez l'image de marque Webflow des formulaires, e-mails et sites de transit. Vous n'avez pas non plus de protection par mot de passe du site. Si vous voulez travailler en tant que freelancer et que vous obtenez plus de projets en tant que développeur web, vous pouvez probablement opter pour un plan léger qui vous permet d'avoir 10 projets non hébergés avec un hébergement de mise en scène amélioré et aussi des transferts de projets. Mais vous n'avez toujours pas l'option d'étiquetage blanc. Si vous avez de nombreux clients et de nombreux projets sur lesquels travailler, vous pouvez aller et obtenir un compte pro. En utilisant le compte, vous êtes libre d'utiliser toutes ces fonctionnalités. Une autre chose que je vais mentionner à propos des plans gratuits et des plans de paiement est qu'en utilisant le plan gratuit, vous ne pouvez pas ajouter de code personnalisé à votre projet. Si je vais au projet Circle, si je vais juste à « Pages statiques » ici, et si je clique sur l'icône des paramètres, je vais faire défiler vers le bas, ici en bas, vous pouvez voir que nous avons cette option, Code personnalisé. Cependant, il n'est pas disponible. Si vous souhaitez ajouter du code personnalisé avancé à votre projet, vous pouvez simplement passer à un plan payant, puis cette option sera disponible. Vous pouvez également ajouter un plan d'hébergement à votre projet et encore une fois, cette option sera disponible. Si je vais dans les « Paramètres du projet » et si je vais dans l'onglet « Code personnalisé », vous pouvez voir que cette option n'est pas disponible ici aussi. Encore une fois, nous avons besoin d'un plan de site payant ou nous devons mettre à jour notre plan de compte pour ajouter du code personnalisé à notre site Web. Nous parlerons du code personnalisé dans nos futures leçons. Mais pour l'instant, vous avez juste besoin de savoir qu'en utilisant le plan stater gratuit, vous ne pouvez pas utiliser de code personnalisé, et c'est totalement correct parce que le plan de démarrage est utile pour les gens qui apprennent. Si vous voulez simplement expérimenter avec différentes options et apprendre comment Webflow fonctionne, c'est le meilleur plan que vous pouvez utiliser. n'y a pas de période d'essai et aucune carte de crédit n'est requise. Mais si vous obtenez des clients et que vous travaillez sur des projets payants, vous pouvez certainement passer à des plans payants afin d'utiliser ces options supplémentaires. Récapitulons. N'oubliez pas que lorsque nous parlons de plans sur Webflow, nous avons deux types de plans : les plans de site et les plans de compte. Si vous exploitez vos plans de compte, nouvelles fonctionnalités seront disponibles pour tous vos projets au sein de votre compte. Mais si vous ajoutez un plan de site à un projet , seul ce projet pourra utiliser ces fonctionnalités supplémentaires et gardez à l'esprit que si vous souhaitez connecter un domaine personnalisé à votre projet, vous devez ajouter un plan de site à votre projet. Mais comment pouvons-nous ajouter un plan de site à notre projet ? C'est si simple. Si vous accédez aux paramètres du projet de votre projet, vous pouvez voir que nous avons ces onglet hébergement. Sous cet onglet d'hébergement, nous avons différents plans de site. Ici, comme vous pouvez le voir, nous avons de base, CMS, entreprise et entreprise et vous pouvez voir toutes les options disponibles pour chaque plan. Vous pouvez simplement ajouter l'un de ces plans à votre compte. Assurez-vous de vérifier le type de facturation ici car vous disposez des options de facturation annuelle ou mensuelle. Les gars, c'est tout pour cette vidéo. J' espère que ça vous a plu, et je vous verrai dans la prochaine. 68. Introduction au SEO: Maintenant que le processus de développement est terminé, il est temps de parler de référencement. En tant que développeur web, vous devez comprendre que votre travail ne se termine pas lorsque le processus de développement est terminé. Une fois que vous avez développé le site Web, vous devez optimiser votre projet pour obtenir un rang plus élevé sur Google et d'autres moteurs de recherche, mais comment pouvez-vous le faire ? Eh bien, c'est le sujet de cette vidéo. Qu' est-ce que le SEO ? SEO est synonyme d'optimisation des moteurs de recherche. Laissez-moi vous montrer un exemple. Chaque fois que vous allez à Google et que vous cherchez quelque chose, permet d'écrire pomme, lorsque le rang de ce site est élevé, il apparaîtra plus haut dans le moteur de recherche et sur la première page parce que si votre site n'apparaît pas sur les trois premières pages, cela signifie que votre site Web n'est pas optimisé et il est probable que les visiteurs ne puissent pas trouver votre site Web parce que la plupart des gens ne vont pas à la quatrième ou à la cinquième page. Nous devons donc optimiser notre site Web afin d'être plus élevé sur les moteurs de recherche. Nous avons déjà parlé de certains points auparavant, tels que la hiérarchie des titres, mais nous allons faire encore plus de choses. Une fois que vous avez développé votre projet, d'abord, vous devez aller de l'avant et vérifier votre hiérarchie des titres, comme ce que nous avons fait auparavant, vous devez vous assurer que vous n'utilisez pas plus d'un H1 sur chaque page et que vous ne sautez pas sur votre page, vous devez vous assurer que vos images contiennent tout le texte. Enfin, ce que vous pouvez faire est juste d'aller de l'avant dans le panneau Pages et si vous allez dans les paramètres de page ici, vous pouvez voir que nous avons quelques paramètres ici. En haut, nous avons le nom de la page. Ceci est uniquement pour un usage interne afin d' organiser toutes nos pages ici, mais pour un usage externe, nous devons nous diriger vers les paramètres SEO. Voyons ce que nous avons ici. Il est dit, spécifiez le titre et la description de cette page. Nous pouvons voir à quoi ils ressemblent dans les pages de résultats des moteurs de recherche dans l'aperçu ci-dessous. Ici, ce que nous pouvons faire est d'entrer une balise de titre et une meta description. C' est essentiellement ce qui apparaîtra sur les pages de résultats de recherche Google et aussi sur les résultats d'autres moteurs de recherche. Ici pour le titre, je vais écrire Circle, qui est le nom de cette agence fictive, une ligne verticale, et puis je peux écrire les principaux services que cette société offre. Écrivons l'agence de design et de développement comme ça. Mais qu'en est-il de la méta-description ? Eh bien, ici, vous devez expliquer ce que cette société fait brièvement. Je vais écrire, nous aidons les startups à donner vie à leurs idées en concevant des interfaces étonnantes et des expériences utilisateur comme ça, vous pouvez voir l'aperçu des résultats de recherche et il dit, cet aperçu utilise les limites de caractères typiques pour Pages de résultats de recherche Google sur le bureau. Les moteurs de recherche expérimentent leurs limites de caractères et peuvent décider d'afficher un contenu différent. C' est à 100 pour cent exact. Je vais faire défiler vers le bas. Ici, nous avons Open Graph Settings. Les informations que nous ajoutons ici apparaissent lorsque nos utilisateurs partagent notre contenu sur leurs comptes de médias sociaux comme Facebook, Twitter, LinkedIn, Pinterest, etc. Si je fais défiler ici pour Open Graph Title, je vais vérifier ce même comme case à cocher Étiquette de titre SEO. Pour Open Graph Description, je vais également cocher cette case. Ici, nous avons Open Graph Image URL. Assurez-vous d'ajouter une URL d'image ici. Par exemple, vous pouvez accéder à vos ressources. D' abord, laissez-moi enregistrer cette page, puis je vais aller à Actifs. Laissez-moi choisir une de ces images. Par exemple, je vais choisir celui-là. Si je clique sur cette icône de paramètres, ici je peux obtenir le lien de cette image. Si je clique dessus, je peux le copier. Ensuite, laissez-moi aller à Pages, Accueil, et si je le colle ici, là nous allons, cette image apparaîtra lorsque l'utilisateur partage notre contenu sur ses comptes de médias sociaux l'image, le titre et la description. Jusqu' à présent, si bon. Maintenant, laisse-moi le sauver. Maintenant, nous devons aller de l'avant et optimiser nos autres pages comme le Contactez-nous. Si je vais dans les paramètres de la page Contactez-nous ici, pour la balise titre, je vais écrire Contact Us, une ligne verticale, agence Circle. Pour la méta description, laissez-moi écrire, si vous voulez obtenir un code pour votre projet, n' hésitez pas à nous contacter. Laisse-moi vérifier. Si vous souhaitez obtenir un code pour votre projet, n' hésitez pas à nous contacter. C' est génial. Je vais faire défiler vers le bas. Ici, nous avons aussi les paramètres Open Graph et nous allons simplement cocher ces cases à cocher pour obtenir le même titre et la même description. Pour l'image, je vais coller le même lien ici. Génial, laisse-moi le sauver. Fait. Maintenant, nous devons aller à notre page de modèles de projets. Si je vais aux paramètres, ici nous avons à nouveau titre, meta description, et tous ces champs à une exception près. Cette page est une page dynamique, donc son contenu change constamment. Comment pouvons-nous ajouter le titre et la meta description pour chaque projet ? Eh bien, c'est si simple. Comme vous pouvez le voir ici, nous avons cette option de champ, par conséquent, nous pouvons remplir ces champs de texte dynamiquement, avec du contenu dynamique. C' est tellement cool. Supposons d'abord ici, nous voulons ajouter le nom du projet. Si je clique sur ce champ, je peux choisir le bon champ. Ça va être un nom. On y va. Vous pouvez prévisualiser les résultats de la recherche ici. C' est le nom de notre projet, espace, ligne verticale, espace, alors je vais ajouter le type de projet. Je vais ajouter un nouveau champ. Ça va être du type de projet. Ici, nous avons la conception d'interface utilisateur et le développement d'applications. Toutes ces informations proviennent de notre CMS puis d'une ligne verticale. Ici, je vais écrire agence Circle mais qu'en est-il de la méta description ? Écrivons, vérifions le, et maintenant je vais ajouter un champ, type de projet, projet que nous avons fait pour le, nom du projet, société. Prévisualisons ça. Découvrez le projet de conception de l'interface utilisateur et de développement d' applications que nous avons réalisé pour la société Simplify. C' est génial, n'est-ce pas ? Puisque nous utilisons des champs, si j'utilise ces flèches, je peux facilement prévisualiser les résultats de recherche d'autres projets. Vérifions ça. Je vais cliquer sur cette flèche droite et comme vous pouvez le voir, le contenu change ici. C' est très gentil, n'est-ce pas ? Je vais faire défiler vers le bas et ici pour le titre Open Graph, je vais cocher ces cases à cocher. Pour l'image, je vais choisir l'image du projet dans ce menu déroulant et l'image sera changée dynamiquement aussi. Si l'utilisateur partage le lien de ce projet, Simplifier, la vignette sera cette image, mais pour les autres projets, la vignette sera différente, comme ça, et l'image correspond à la contenu ici. D' accord, cool. Maintenant, laisse-moi le sauver. Que pouvons-nous faire d'autre en termes d'optimisation des moteurs de recherche ? Eh bien, il y a beaucoup de choses que nous pouvons faire, et nous allons couvrir les plus importantes dans les prochaines vidéos. J' espère que vous avez apprécié cette vidéo, et je vous verrai dans la prochaine. 69. Vérification du site et Google Analytics: Hé, bienvenue. Jusqu' à présent, vous avez appris ce qu'est le SEO et comment nous pouvons optimiser vos pages Web afin de vous classer plus haut sur différents moteurs de recherche. Mais dans cette leçon, nous allons parler de la vérification du site et de Google Analytics. Lorsqu' un nouveau site Web est publié, Google essaie généralement de l'indexer automatiquement, mais il faut parfois tellement de temps pour que Google puisse aller de l'avant et consulter notre site Web, vérifier différentes pages et classer notre site Web. Par conséquent, nous pouvons aller de l'avant et présenter notre site Web à Google manuellement. Comment pouvons-nous faire ça ? Pour ce faire, nous devons travailler avec deux plateformes différentes. Si vous allez de l'avant et cherchez Google Search Console, et ici vous pouvez trouver Google Search Console. Je vais l'ouvrir. Voici la plateforme. Il est dit que les outils et les rapports de la Search Console vous aident à mesurer le trafic de recherche et les performances de votre site, résoudre les problèmes et à faire briller votre site dans les résultats de recherche Google. C' est exactement ce dont nous avons besoin. L' autre plateforme avec laquelle nous allons travailler s'appelle Google Analytics. Mais d'abord, nous allons aller de l'avant et vérifier notre site Web à l'aide de Google Search Console. Comment pouvons-nous faire ça ? Eh bien, c'est si simple. Tout d'abord, assurez-vous d'aller de l'avant et de créer un compte gratuit. Ensuite, si je vais aux paramètres du projet, et si je vais à l'onglet SEO ici, je peux faire défiler vers le bas. Ici, il est dit vérification du site Google, et ici il y a un lien. Vous pouvez également cliquer sur ce lien pour accéder à ce site Web. C' est totalement à vous de décider puisque je suis déjà connecté, je vais cliquer dessus. On y va. Si vous avez déjà vérifié un site Web auparavant, vous pouvez voir cette page, mais si vous n'avez pas vérifié de site Web auparavant, vous pouvez voir une boîte de dialogue. Si vous voyez un dialogue, ne vous inquiétez pas, je vais aller de l'avant et vous montrer ce qu'il faut faire. Mais dans le cas où vous avez déjà vérifié certains sites Web, vous devez retourner et cliquer sur ce lien et vous devez ajouter une propriété ici. Il suffit d'ajouter une propriété. Ensuite, nous avons deux options. Nous avons domaine, nous avons le préfixe URL. Je vais sélectionner la bonne option ici. Voici où vous devez suivre l'URL de votre site Web. Si j'accède à mon site web, je peux aller de l'avant et publier mon site web. Je vais publier sur les domaines sélectionnés, et voici notre domaine. Dans votre cas, c'est certainement différent parce que cette URL est unique à chaque projet. Tu dois l'ouvrir. Ici, vous devez copier cette URL. Rappelez-vous, copiez complètement cette URL, y compris Https ou Https. Je vais le copier. Je vais aller de l'avant et aller à la Google Search Console. Laissez-moi aller de l'avant et créer une propriété et laissez-moi la coller ici. Appuyez sur « Continuer ». On y va. Ici, il existe de nombreuses façons de vérifier la propriété de ce site Web. Mais laissez-moi vous montrer la plus simple. Je vais aller à la balise HTML ici. Ici comme vous pouvez le voir, nous avons cette balise cliquez sur ce « bouton Copier » et collez-le sur un éditeur de texte. On y va. Permettez-moi d'augmenter la taille de la police. Une fois que vous le collez ici, vous devez saisir ce code de contenu comme ça. Assurez-vous de saisir uniquement le texte entre ces guillemets. Je vais le copier. Ensuite, si je vais aux paramètres de mon projet, je peux le coller ici. Il s'agit de notre identifiant de vérification du site Google. Ensuite, appuyez sur « Enregistrer les modifications ». Bien, mais voici la partie importante. Une fois que vous avez enregistré les modifications, vous devez aller de l'avant et publier votre site Web une fois de plus, sinon cela ne fonctionnera pas. N' oublie pas cette étape. Je vais publier pour sélectionner les domaines. Joli. Maintenant, allons à la console Google, et ici je vais appuyer sur ces « bouton Vérifier ». On y va. Propriété vérifiée. Maintenant, je peux cliquer sur « Terminé », sympa, mais puisque j'ai des projets différents, je dois aller de l'avant et choisir cette URL particulière ici. Si vous n'avez que ce projet, vous n'avez pas besoin de vous en soucier. Ici, sur cette barre de recherche, je vais aller de l'avant et coller l'URL de notre site, qui est celui-ci. Je vais le copier, le coller ici, entrer. Ici, il dit URL n'est pas sur Google, mais c'est tout à fait bien. Il dit que cette page n'est pas dans l'index, mais pas à cause d'une erreur. C' est bien parce que ça prend du temps pour travailler. Cependant, nous pouvons aller de l'avant et cliquer sur cette « Demande d'indexation ». Il dit tester si l'URL en direct peut être indexée, cela prend une minute ou deux demande de soumission. On y va, l'indexation a demandé. Je vais cliquer sur « Got It ». Mais comment pouvons-nous nous assurer que tout s'est bien passé ? Eh bien, nous pouvons aller de l'avant et cliquer sur ce « Test Live URL ». Comme vous pouvez le voir, il dit URL est disponible pour Google. URL peut être indexée et aussi nous pouvons cliquer sur cette « Afficher la page testée ». Sur le côté droit, nous pouvons voir le code de notre site Web. On peut aller à la capture d'écran. Comme vous pouvez le voir, il y a une capture d'écran de notre site Web et plus d'informations. Parfait. Maintenant, notre site Web est vérifié. L' étape suivante consiste à créer un compte sur Google Analytics. Si vous faites une recherche Google Analytics sur Google, vous pouvez créer un compte, c'est totalement gratuit en utilisant votre compte Gmail. Ensuite, une fois que vous êtes connecté, vous verrez quelque chose comme ceci. Que devriez-vous faire ici ? Vous devez aller à l'administrateur ici au bas de cette page. Ici, nous avons différentes options, compte et propriété. Vous devez créer une nouvelle propriété. Ici, il est dit de créer une propriété Google Analytics 4 pour mesurer votre nom de propriété de données Web ou application. Je vais écrire l'agence de design de cercle. Ici les rapports de fuseau horaire, peu importe pour l'instant, la monnaie n'a pas d'importance. Vous pouvez aller de l'avant et les modifier si vous le souhaitez. Appuyez sur « Suivant ». Ici, vous devez choisir une industrie. Je vais choisir l'ordinateur et l'électronique. Taille de l'entreprise : petite et vous pouvez simplement vérifier certaines de ces boîtes de forme, par exemple, elles n'ont pas d'importance. Je vais cliquer sur le bouton « Créer ». Parfait. Maintenant, nous devons choisir une plate-forme, web, application Android et application iOS. Je vais aller avec le web parce que c'est notre site web. Ici, nous devons coller l'URL de notre site Web. Nous avons les Https ici. Je vais aller de l'avant et copier seulement cette partie de l'URL et la coller ici. Le nom du flux va être juste écrire quelque chose comme agence de cercle et créer flux. Il a été créé. Ce dont nous avons besoin ici, c'est cet ID de mesure. Si vous cliquez sur ce bouton « Copier », vous pouvez le copier. Si vous vous dirigez vers les paramètres du projet, vous pouvez aller à l'onglet Intégrations, ici nous avons Google Universal Analytics Tracking ID. Vous devez coller l'ID de mesure que vous avez copié ici. Joli. Assurez-vous que ce commutateur est activé, utilisez la balise de site globale et cliquez sur « Enregistrer les modifications ». Joli. N'oubliez pas de publier votre site web une fois de plus. Publié avec succès. Maintenant, nous pouvons réellement mesurer la performance de notre site Web. Google Analytics vous aide à comprendre le comportement des utilisateurs, ce qu'ils aiment, où ils se trouvent, comment ils interagissent avec votre site Web, et bien plus encore. Il est essentiel pour tout site Web de s'intégrer à Google Analytics. Si je vais aux rapports ici, je peux voir quelques statistiques ici. Je peux aller en temps réel. On y va. Je peux aller à différentes sections telles que les données démographiques, par exemple, l'aperçu démographique. Pour l'instant, comme nous n'avons pas de téléspectateurs, nous n'obtiendrons aucune donnée. Mais une fois que nous publions notre site Web et que nous y acheminons le trafic, vous pouvez vous diriger vers la section Rapport et vous verrez toutes les statistiques et les données. Maintenant, je vais mentionner quelque chose d'important, lorsque vous connectez un domaine personnalisé à votre site Web et que vous le publiez, vous devez vous diriger vers la section SEO ici, et vous devez vous assurer de désactiver l'indexation des sous-domaines Webflow. C' est très important, si vous ne le désactivez pas, Google et d'autres moteurs de recherche pourraient classer votre site Web plus bas car il existe une version dupliquée de votre site Web publiée sur un sous-domaine. Assurez-vous toujours de désactiver l'indexation des sous-domaines Webflow comme ça, et enregistrez les modifications et publiez votre site Web. C' est très important. Les gars, c'est tout pour cette vidéo. J' espère que ça vous a plu et je vous verrai dans la prochaine vidéo. 70. Optimisation d'image et charge Lazy: Salut, bienvenue. Dans cette vidéo, nous allons parler de l'optimisation de l'image. Lorsque vous voulez commencer à construire votre projet et Webflow, la première chose à faire est de préparer vos actifs. Vous devez exporter vos ressources à partir de votre logiciel de conception, peu importe s'il s'agit de Figma, Adobe XD, Sketch ou tout autre logiciel que vous utilisez, puis importer vos ressources dans Webflow. Dans cette vidéo, je vais vous montrer quelle est la bonne façon d'exporter vos actifs et comment vous devez les optimiser afin d'améliorer la convivialité de votre site web, et aussi afin d'améliorer le classement de votre site web sur la recherche moteurs. Si vous êtes prêt, commençons. Je vais aller à mon dossier de conception. Ici, c'est Figma. Ici, comme vous pouvez le voir, nous avons différentes images que nous avons utilisées dans notre projet et vous les avez déjà exportées, mais je vais vous montrer comment vous devez les faire correctement. Supposons que je veuille exporter cette carte. abord, je vais le sélectionner, puis si je me dirige vers l'inspecteur sur le côté droit, je peux juste aller à la section d'exportation et je peux cliquer sur ce bouton plus, et ici, je peux spécifier quelques préférences. Tout d'abord, je vais spécifier le format. Par défaut, il est défini sur PNG. Vous pouvez choisir JPG, SVG et PDF. Selon le logiciel que vous utilisez, ces formats peuvent changer. Mais la plupart des logiciels de conception prennent en charge PNG, JPG, PNG et SVG. Quelle est la différence entre ces formats ? Eh bien, commençons avec JPG ou JPEG. JPEG est l'un des formats les plus populaires que vous pouvez utiliser pour vos images. Il a un très bon niveau de compression donc, vos tailles d'image seront plus petites si vous utilisez JPEG. Cependant, le compromis est que vous n'obtenez pas d'arrière-plan transparent lorsque vous utilisez JPEG. Dans ce cas, puisque nous avons des coins arrondis ici et que nous avons besoin d'arrière-plans transparents pour ces cartes, nous ne pouvons pas utiliser JPEG. Au lieu de cela, nous devons utiliser PNG. PNG est un autre format populaire que vous pouvez utiliser pour vos images et il vous permet d'exporter vos ressources avec des arrière-plans transparents. Par conséquent, nous pouvons créer des graphiques superposés et c'est si utile. Mais qu'en est-il de SVG ? SVG est un format de fichier vectoriel. Si vous créez une forme simple, par exemple, si vous créez un cercle, laissez-moi vous montrer, comme cela, vous pouvez l'exporter en utilisant le format SVG. Quelle est la différence ? Lorsque vous utilisez le format SVG, ce fichier sera évolutif sans perdre de qualité car il s'agit d'un fichier vectoriel. Mais lorsque nous exportons une image, il s'agit d'un fichier raster, et lorsque nous l'mettons à l'échelle, elle perd de la qualité. Chaque fois qu'il est possible d'exporter vos fichiers à l'aide de SVG, assurez-vous de le faire. Cependant, ce n'est possible que pour les fichiers vectoriels. Par exemple, lorsque vous créez un logo et que votre logo est un fichier vectoriel, assurez-vous de l'exporter à l'aide de SVG. Mais pour ces images, il n'est pas possible d'utiliser SVG car ce ne sont pas des fichiers vectoriels, ce sont des fichiers raster. Je vais enlever ce cercle. Le format SVG vous fournit de petites tailles de fichiers, puis JPEG vous fournit la plus petite taille de fichier, et enfin PNG. Lorsque vous n'avez pas besoin d'obtenir des arrière-plans transparents, vous pouvez simplement utiliser JPEG. Mais si vous avez besoin d'arrière-plans transparents, vous devez aller avec PNG. Mais pourquoi en parlons-nous ? Le format que nous utilisons est-il vraiment important ? Oui, c'est le cas. Pourquoi ? Étant donné que la taille de votre fichier a une relation directe avec la vitesse de chargement de votre page, et lorsque vous avez une vitesse de chargement de page faible, Google classe votre site Web plus bas. Ce n'est pas ce que nous voulons, c'est pourquoi nous devons optimiser nos ressources afin de charger nos pages plus rapidement et afin d'améliorer la convivialité de notre site Web. Laissez-moi vous montrer comment vous devez exporter vos images. Supposons que vous vouliez exporter cette carte. Tout d'abord, vous devez le sélectionner. Ensuite, vous vous dirigerez vers la section export. Ici, vous spécifierez PNG car vous aurez besoin d'arrière-plans transparents. Ici, nous pouvons spécifier si nous voulons que cet élément soit exploité à 1x, 2x, etc. Quand il est réglé sur 1x, cela signifie que vous obtiendrez exactement ce que vous avez ici. Comme vous pouvez le voir, sa largeur est définie sur 190 pixels et sa hauteur est définie sur 216 pixels. C'est bon. Cependant, de nos jours, de plus en plus de gens utilisent des écrans de rétine, et ces écrans affichent deux fois pixels. Au lieu d'exporter nos actifs à 1x, nous pouvons le définir à 2x et maintenant, lorsque nous l'exportons, la largeur de notre fichier sera de 380 pixels et la hauteur sera de 432 pixels. Si un utilisateur dispose d'un écran large, il ne perd pas de qualité. La raison pour laquelle vous devez exporter à 2x. Mais si votre image est déjà trop grande, vous n'avez pas besoin de l'exporter à 2x. Par exemple, si la largeur est définie sur 2000 pixels, vous n'avez pas besoin de l'exporter à 2x. N' oubliez pas que lorsque vous utilisez un élément d'image sur Webflow, Webflow crée automatiquement des variations de votre image pour différentes tailles d'écran. Fondamentalement, il optimise automatiquement vos images. Mais qu'en est-il des autres images ? Supposons que vous souhaitiez exporter cette image de projet. Vous devez d'abord le sélectionner. Encore une fois, vous pouvez l'exporter à 2x ou vous pouvez changer le format de l'image en JPEG puisque nous n'avons pas besoin d'arrière-plan transparent et ainsi de suite. Laissez-moi l'exporter à 2x. On y va. Eh bien, la plupart des logiciels conçus ne vous permettent pas compresser vos images de sorte qu'elles ne sont pas bonnes avec l'optimisation d'image. Laissez-moi vous montrer ce que je veux dire. Je vais aller de l'avant et ouvrir une de ces images ici dans le fichier d'actifs. Par exemple, le premier. Si je vérifie sa taille de fichier, vous pouvez voir qu'il est de 600 kilo-octets, mais nous pouvons le compresser encore plus afin d'augmenter la vitesse de chargement de la page. Mais comment ? Vous pouvez utiliser Adobe Photoshop de différentes manières et vous pouvez utiliser l'option Enregistrer pour le Web. Cependant, il existe une meilleure alternative. Il existe un site Web appelé TinyPng. Si vous allez sur tinypng.com, vous pouvez simplement glisser-déposer vos images avec les formats PNG ou JPEG et il compresse vos images pour vous sans perdre de qualité. C' est incroyable. Laissez-moi vous montrer comment ça marche. Je vais aller de l'avant et déposer une de mes images ici. Par exemple, celui-ci. On y va, c'est déjà fini. Comme vous pouvez le voir, la taille du fichier d'origine était de 600 kilo-octets et la version compressée est de 146 kilo-octets. C'est génial. Nous réduisons sa taille de fichier de 76 pour cent. Je vais le télécharger. On y va. C'est notre nouvelle image. Bien que nous l'avons compressé, il a toujours une haute qualité. Vous devez toujours aller de l'avant et compresser vos images avant de les importer dans Webflow. C' est tout au sujet de l'optimisation de l'image. Maintenant, je vais parler de charge paresseuse. Quand j'expliquais différentes fonctionnalités de Webflow, je vous ai dit que nous allons parler de charge paresseuse plus tard et c'est exactement ce que je vais faire maintenant. Chaque fois que vous utilisez un élément image, si vous allez dans le panneau Ajouter et si vous faites glisser un élément image, laissez-moi vous montrer ce qui se passe. Ici, nous avons différents paramètres. Si vous vous souvenez, nous avons le texte Alt et ici nous avons les options Charger. Depuis 2020, toutes les images par défaut sont définies sur charge paresseuse. Mais qu'est-ce que cela veut dire ? Permettez-moi de supprimer cet élément d'image. Je vais sélectionner cette image de héros. Si je clique sur l'icône « Paramètres », je peux également voir l'option de chargement. Si j'ouvre ce menu déroulant, vous pouvez voir que nous avons trois options différentes ; nous avons paresseux, avide, et auto. Qu'est-ce qu'ils veulent dire ? Quand il est réglé sur paresseux, le navigateur chargera cette image une fois qu'elle sera en vue. Par exemple, si je fais défiler ici, nous avons des images différentes. Ces images ne seront pas chargées tant qu'elles n'auront pas été visualisées. Lorsque nous faisons défiler ici, le navigateur chargera ces images. De cette façon, nous pouvons nous assurer que notre page Web se charge très rapidement et c'est très bon pour le référencement. Mais nous pouvons également remplacer ce paramètre. Je peux sélectionner cette image, je peux aller aux paramètres de l'image et à partir de là je peux le définir trop impatient charges avec la page. Si je sélectionne cette option lors du chargement de la page, cette image sera également chargée. Par conséquent, il est plus long pour le navigateur de charger notre page Web. Nous pouvons également le définir sur auto, et il se comportera en fonction des préférences des navigateurs. Ma suggestion est que vous devriez toujours le mettre trop paresseux. Comme je l'ai déjà mentionné, par défaut, toutes vos images sont trop paresseuses. Mais je vais vous parler d'une autre chose. Cette option ne fonctionne que pour les éléments d'image. Si vous créez simplement un bloc div et si vous utilisez l'image d'arrière-plan, cela ne fonctionne pas pour cela. Tu dois garder ça à l'esprit. D'accord, les gars. C' est tout pour cette vidéo. J' espère que ça vous a plu et je vous verrai dans la prochaine. 71. Attributes personnalisés: Hé, dans cette vidéo, nous allons parler d'attributs personnalisés. Que sont les attributs personnalisés ? Eh bien, selon Webflow, vous pouvez utiliser des attributs personnalisés pour définir les caractéristiques des éléments HTML. Est-ce que ça a du sens ? Si ce n'est pas le cas, laisse-moi te montrer comment ça marche. Pour chaque élément HTML, nous pouvons spécifier des attributs personnalisés pour modifier leurs comportements ou ajouter des caractéristiques personnalisées. Par exemple ici, si je sélectionne des éléments HTML comme en-tête, et si je me dirige vers les paramètres des éléments sur le côté droit, vous pouvez voir ici nous avons la section des attributs personnalisés. À l'aide de ce bouton plus, vous pouvez créer un attribut personnalisé. Tout attribut a un nom et une valeur. Parfois, ils sont très utiles, mais la plupart du temps vous n'en aurez pas besoin. Laissez-moi vous montrer comment ça marche. Si je prévisualise mon projet et si je passe la souris sur ce bouton tactile Get in, vous pouvez voir que rien n'apparaît et c'est bon. Mais parfois, nous pourrions avoir besoin d'obtenir une info-bulle indiquant ce qu'il fait réellement. Par exemple, lorsque l'utilisateur survole ce bouton, l'info-bulle doit afficher un mot ou une phrase comme cliquer sur moi ou nous contacter, de cette façon, les moteurs de recherche peuvent également comprendre ce que fait ce bouton ou ce qu'un lien fait. Laissez-moi vous montrer comment ça marche. abord, je vais sélectionner ce bouton, et si je me dirige vers la section des attributs personnalisés, je peux créer un nouvel attribut personnalisé. Ici pour le nom, Je vais écrire le titre et pour la valeur, Je vais écrire Cliquez sur moi, Enregistrer, et nous avons terminé. Maintenant, publions notre site, et je vais l'ouvrir. Maintenant, si je passe la souris sur ce bouton, je devrais voir une info-bulle qui dit, cliquez sur moi. Voyons ce qui se passe. On y va. Tu vois cette minuscule info-bulle ? C' est exactement ce qu'on cherchait. Mais laissez-moi vous montrer un autre exemple. Si je vais à la page Contactez-nous et ici dans le champ de texte du nom complet, je vais écrire quelque chose de aléatoire comme ça. Comme vous pouvez le voir, vérifie l'orthographe. Tu vois cette ligne rouge sous ce nom bizarre ? Mon navigateur est en train de vérifier l'orthographe de ce nom. Ce n'est pas ce que nous voulons pour le champ de texte intégral, alors comment pouvons-nous le désactiver ? Nous pouvons utiliser un attribut personnalisé. Laissez-moi vous diriger vers le panneau des pages. Si je vais à la page Contactez-nous ici, je peux sélectionner ce champ de texte, et si j'accède aux attributs personnalisés sur le côté droit, je peux créer un nouvel attribut. Ici, je vais écrire orthographe sans espace, et pour la valeur, je vais écrire false. Le navigateur devrait-il vérifier l'orthographe ? Non. C'est pourquoi nous définissons la valeur sur false et l'enregistrons. Ensuite, publiez votre site Web. Je vais aller à la page Contactez-nous, assurez-vous de rafraîchir votre page. Maintenant, si j'écris quelque chose de bizarre, mon navigateur ne vérifie pas l'orthographe. C' est l'un des cas d'utilisation les plus populaires des attributs personnalisés. En fait, il existe de nombreux attributs HTML différents que vous pouvez utiliser, et vous pouvez obtenir la liste complète ici. Si vous allez sur W3Schools.com, vous pouvez trouver la référence des attributs HTML. Ici, il y a une liste de tous les attributs, mais la plupart du temps nous ne les utilisons pas. Mais si vous le souhaitez, vous pouvez aller de l'avant et jeter un oeil. Les gars, c'est tout pour cette vidéo, j'espère que ça vous a plu, et je vous verrai dans la prochaine. 72. Comment créer une pop up ?: De nos jours, de plus en plus de sites Web utilisent des fenêtres contextuelles pour demander aux utilisateurs de faire quelque chose. Par exemple, en vous inscrivant à la newsletter en saisissant leurs adresses e-mail ou en envoyant un formulaire. Dans cette vidéo, je vais vous montrer comment vous pouvez créer un pop-up facilement et commodément. Es-tu prêt ? Commençons. Afin de créer une fenêtre contextuelle, vous devez d'abord comprendre la structure d'une fenêtre contextuelle. Une fenêtre contextuelle interrompt réellement l'interaction de l'utilisateur avec votre site Web. Il bloque effectivement l'utilisation du site Web jusqu'à ce que l'utilisateur prenne certaines mesures, par exemple en remplissant un formulaire ou en soumettant un formulaire. Comment pouvons-nous créer une telle interaction ? Eh bien, d'abord, nous avons besoin d'un bloc Div. Laissez-moi appuyer sur la touche « Commande » ou « Contrôle ». Je vais écrire Div Block. On y va. Je vais mettre ce bloc Div juste en dessous de mon corps. Peu importe où il est, mais pour tout organiser correctement, je vais le mettre en haut de mon Navigator. Laisse-moi lui donner un cours. Je vais écrire un wrapper pop-up. Cette fenêtre contextuelle doit être corrigée, peu importe si l'utilisateur fait défiler la page. Allons de l'avant et changeons sa position de statique à la position fixe, juste comme ça, et puis je vais définir sa position à pleine. Comme vous pouvez le voir, il prend toute la largeur et la hauteur de notre rapport. Ici, il est écrit par rapport au corps. Ensuite, je vais faire défiler vers le bas et laissez-moi lui donner une couleur d'arrière-plan. Je vais lui donner une couleur de fond noir, et je vais diminuer son opacité pour créer cet effet de superposition. Je vais le réduire à 70 pour cent. Joli. Comme vous pouvez le voir, ce wrapper pop-up est maintenant au-dessus de certains de nos éléments, mais il y a encore quelques éléments qui sont au-dessus de ce wrapper pop-up, bien qu'il soit placé au-dessus de notre navigateur. Si vous vous souvenez, je vous ai dit que peu importe où notre élément est dans le Navigator, nous pouvons toujours mettre nos éléments dessus si nous modifions l'index Z. Ici, je vais définir l'indice Z à 9999. De cette façon, je peux m'assurer que ce wrapper pop-up sera toujours au-dessus de tous les éléments, juste comme ça. Maintenant, comme vous pouvez le voir, tous les autres éléments sont derrière ce wrapper pop-up. Si je fais défiler vers le bas, vous pouvez voir que c'est réparé. La première partie est faite. Maintenant, à l'intérieur de ce wrapper, je vais créer un nouveau bloc Div, et ce bloc Div peut contenir n'importe quoi. Il peut contenir un bloc de formulaire ou un texte, tout ce que vous voulez. Mais dans cet exemple, je vais créer un bloc de formulaire. Pendant que ce wrapper est sélectionné, je vais appuyer sur la touche « Commande » ou « Contrôle ». Cherchons un bloc Div. On y va. Ici, je vais lui donner un cours. Cette fois, je vais écrire pop-up__model. Ici, je vais spécifier la largeur et la hauteur. Ça va être de 500 pixels par 300 pixels. Laissez-moi aller de l'avant et lui donner une couleur de fond blanc. Maintenant, il est positionné dans le coin supérieur gauche, mais nous voulons le centrer. Comment pouvons-nous faire ça ? C'est si simple. abord, nous devons sélectionner notre emballage pop-up, puis nous devons simplement changer le réglage de l'affichage pour les vélos flexibles. Comme vous le savez, nous devons modifier l'alignement au centre et la justification au centre également. Dans ce modèle pop-up, nous allons avoir un bloc de formulaire. Pendant qu'il est sélectionné, je vais appuyer sur la touche « Commande » ou sur la touche « Contrôle », et cherchons un Bloc de formulaire. On y va. Le bloc de formulaire a été ajouté. Ici, je vais donner à ce Form Block une classe. Écrivons pop-up__form. Réglons la largeur à 100 pour cent, et je vais définir la largeur maximale de 400 pixels pour cela, mais ce n'est pas centré. Je vais sélectionner ce modal pop-up et je vais changer son paramètre d'affichage pour flex max, et laissez-moi changer l'alignement au centre, juste comme ça. Voici notre formulaire simple. Nous ne allons pas changer le style parce que je veux juste vous montrer comment vous pouvez créer un pop-up. Une fois que la fenêtre contextuelle s'affiche, l'utilisateur devrait pouvoir la fermer également. Nous allons avoir besoin d'un bouton de fermeture. Je vais aller de l'avant et ajouter un lien texte ici à l'intérieur de notre emballage pop-up. Assurez-vous qu'il est imbriqué dans notre wrapper pop-up. C'est là. Je vais lui donner un cours. Permet d'écrire à droite pop-up__close. Je vais changer sa couleur en blanc que nous pourrions voir ça, laissez-moi modifier la déclaration à zéro. Ici, je vais écrire près, mais sa position est querelle. Je vais le placer dans le coin supérieur droit. Pendant qu'il est sélectionné, je vais changer sa position en absolu, gentil, puis laissez-moi la positionner en haut à droite. C'est là. En utilisant ces montants ici, je vais définir sa bonne position à peut-être 8 pour cent, sa position de tête à 8 pour cent également. Notre pop-up est prêt, mais comment pouvons-nous réellement l'utiliser ? En ce moment, si je l'ai prévisualisé, vous pouvez voir que je ne peux pas interagir avec le site Web. Si je clique sur le bouton « Fermer », rien ne se passe parce que nous n'avons pas créé d'interactions. Maintenant, il est temps d'aller de l'avant et de créer notre interaction. Mais d'abord, je vais sélectionner ce wrapper pop-up, puis je vais changer son paramètre d'affichage de flex max à none parce que je vais le cacher pour l'instant. Maintenant, nous allons devoir aller de l'avant et créer l'interaction, mais quel type de déclencheur devrions-nous créer ? Si je vais à l'interaction, comme vous vous en souvenez, nous pouvons créer le déclencheur d'élément ou le déclencheur de page. C' est totalement à toi de décider. Vous pouvez créer un déclencheur d'élément par exemple, si l'utilisateur clique sur un bouton, cette fenêtre contextuelle devrait apparaître ou même vous pouvez créer un déclencheur de page. Par exemple, lorsque tout est chargé après trois ou quatre secondes, cette fenêtre contextuelle doit s'afficher. Tout d'abord, je vais aller de l'avant et créer un déclencheur de page. Nous avons déjà créé le chargement de la page et nous utilisons cette animation de héros. Nous pouvons utiliser celui-ci ou vous pouvez utiliser un autre déclencheur de page. Je vais utiliser le chargement de la page à nouveau. Ici, quand la page commence à charger, super , démarrer une animation, et je vais créer une nouvelle animation. Appelons ça une pop-up ouverte, gentil. Ici, nous devons créer quelques actions. abord, pendant que cette fenêtre contextuelle est sélectionnée, allez-y et créez une action. La première action sera l'opacité. Par défaut, son opacité devrait être définie à zéro pour cent et nous allons activer l'état initial comme ça. Ensuite, je vais créer une nouvelle image-clé et je vais choisir l'opacité. Retournons son opacité à 100 pour cent et entre les deux, je vais créer une autre action, mais cette fois je vais choisir Masquer/Afficher. Si vous vous souvenez, nous définissons son paramètre d'affichage sur none, maintenant nous devons le changer pour flex max comme ça. Laisse-moi le briser pour toi. abord, nous définissons son opacité à zéro pour cent par défaut parce que lorsque la page se charge, nous ne devrions pas la voir et elle est également cachée pour que nous puissions interagir avec la page. Nous allons changer son paramètre d'affichage pour flex max, donc maintenant il bloque l'utilisation de nos sites Web, puis nous augmenterons son opacité à 100 %. Cependant, il y a un problème, si je l'sauvegarde et si je l'ai prévisualisé, vous pouvez voir que lorsque la page se charge, la fenêtre contextuelle apparaît également. Ce n'est pas ce que je veux. Je veux que tous ces éléments se chargent en premier et après trois secondes, cette pop-up devrait apparaître. Permettez-moi d'aller de l'avant et de modifier le délai. Je vais sélectionner l'emballage pop-up Hide/Show, et je vais augmenter le délai à trois secondes, juste comme ça. Laisse-moi le sauver. Maintenant, laissez-moi le prévisualiser à nouveau, tout se charge. On y va. Tout d'abord, tout est chargé et puis cette pop-up est apparue. C' est exactement ce qu'on voulait. Mais comment pouvons-nous fermer cette pop-up ? C' est si simple. Nous devons aller de l'avant et créer un nouveau déclencheur. Si je ferme juste ce chargement de page ici, nous pouvons aller de l'avant et sélectionner notre lien de fermeture pop-up que nous avons créé, puis nous pouvons créer un déclencheur d'élément cette fois. Je vais choisir un clic de souris ou appuyez sur. Au premier clic, je vais créer une animation personnalisée, nous allons créer une nouvelle animation, et je vais l'appeler pop-up close. Que devrions-nous faire ici ? Nous devons faire deux choses. abord, nous devons réduire l'opacité de notre wrapper pop-up à zéro pour cent, puis nous devons définir son paramètre d'affichage sur none. Pourquoi devrions-nous faire ça ? Parce que si nous diminuons l'opacité de 100 % à 0 %, nous la cacherons, mais elle est toujours là. Cela bloque toujours l'utilisation de notre site Web. Nous devons définir son paramètre d'affichage sur aucun pour que l'utilisateur puisse interagir avec notre site Web. C' est très important. Assurez-vous de ne pas oublier ça. Je vais sélectionner le wrapper pop-up. Je vais créer une nouvelle action, l'opacité, et changeons son opacité à zéro pour cent. Créons une nouvelle image-clé, Masquer/Afficher, et je vais définir son paramètre d'affichage sur none et enregistrer. Laisse-moi aller de l'avant et prévisualiser ça. On y va. Tout se charge, gentil. C' est notre pop-up. Je peux faire défiler vers le bas, il est toujours là. Si je clique sur près, on y va, c'est fermé. Je peux à nouveau interagir avec mes éléments. Les gars, c'est comme ça que vous pouvez créer un pop-up dans Webflow. J' espère que ça vous a plu et je vous verrai dans la prochaine. 73. Code et intégration: Hé, bienvenue. Dans cette vidéo, nous allons parler du code constant et de l'intégration de tiers. Je sais que je vous ai dit que nous n'allons pas coder et c'est 100% vrai, mais parfois si vous voulez ajouter des fonctionnalités à votre projet que Webflow n'offre pas, vous pouvez intégrer certains services tiers dans votre projet Webflow en copiant et en collant simplement du code. Vous n'avez pas besoin de savoir comment écrire du code, vous avez juste besoin de savoir comment l'utiliser. Comme je l'ai mentionné précédemment, la fonctionnalité de code personnalisé n'est disponible que pour les plans payants, donc si vous utilisez le forfait gratuit, malheureusement, vous ne pouvez pas l'utiliser. Cependant, je voulais vous montrer comment cela fonctionne au cas où vous vouliez mettre à jour votre plan à l'avenir. Si vous êtes prêt, commençons. Tout d'abord, nous avons ici cette toile vide. C' est un nouveau projet et si je veux utiliser du code personnalisé, j'ai différentes options. Si je veux ajouter le code constant à l'ensemble du projet, à toutes les pages de l'ensemble du site, je peux me diriger vers les paramètres du projet et je peux aller à l'onglet de code personnalisé ici et j'ai le code tête et j'ai le code de pied de page. Mais si nous voulons ajouter du code personnalisé à une page spécifique de mon projet, je peux le faire directement dans le concepteur. Laissez-moi vous montrer comment. Voici notre toile vide. Je vais aller dans le panneau Ajouter et je vais faire défiler vers le bas. Ici, sous les composants, vous pouvez voir que j'ai cette intégration. Il n'est pas disponible pour un forfait gratuit. Par conséquent, si vous voulez l'utiliser, vous devez mettre à niveau votre forfait. Je vais le glisser et le déposer ici. On y va. Maintenant, nous avons ce composant HTML embed, et ici nous pouvons coller notre code personnalisé. Cela fonctionne comme tous les autres éléments. Vous avez juste besoin de coller du code personnalisé ici et enregistrer et fermer et assurez-vous de publier votre projet. Laissez-moi vous montrer comment ça marche. Supposons que vous souhaitiez créer un sondage ou un formulaire qui obtient les informations des utilisateurs pour une raison spécifique. Vous pouvez utiliser un service appelé Typeform. C' est un service très populaire. Laissez-moi vous montrer comment ça marche. Voici leur page de destination. Il vous permet en fait de créer des enquêtes ou des formulaires facilement et facilement et vous pouvez modifier la conception de votre formulaire, les paramètres, tout ce que vous pouvez imaginer, et il a aussi un plan gratuit, sorte que vous pouvez l'utiliser gratuitement. Vous devez d'abord aller de l'avant et vous inscrire, créer un compte gratuit, puis vous pouvez simplement créer un formulaire. Nous n'allons pas plonger dans les détails car il est si simple de créer un Typeform, je veux juste vous montrer comment vous pouvez intégrer ce formulaire dans votre projet. Voici le formulaire que j'ai créé auparavant. Laisse-moi te montrer. Si je vais à mon tableau de bord, j'ai ces RSVP, je peux cliquer dessus. Je peux modifier les questions, je peux modifier les choix ou les réponses ici, puis je peux les publier. Une fois qu'il est publié, je peux me diriger vers l'onglet de partage en haut et ici je peux me diriger vers l'intégration dans une section de page Web. Vous pouvez choisir l'option que vous voulez. Si vous avez besoin d'une fenêtre contextuelle, vous pouvez utiliser cette option. Si vous avez besoin de l'onglet diapositive, vous pouvez utiliser cette option. Je vais utiliser la norme et ici je vais obtenir le code juste comme ça. Je vais copier le code et si je me dirige vers mon projet Webflow et je le colle ici, vous pouvez voir que le code est sur une ligne, donc, si vous voulez le vérifier, vous pouvez simplement faire défiler horizontalement comme ça. Maintenant, je vais enregistrer et fermer et m'assurer de publier votre site Web parce que cela ne fonctionne pas si vous venez de prévisualiser votre site Web ici, donc vous devez le publier, puis vous devez l'ouvrir et nous allons voir ce que nous avons. On y va. Voici notre Typeform intégré dans notre projet. Si j'écris Arash, puis le nom de famille. Ici, nous allons écrire test@ gmail.com et puis je peux choisir parmi l'une de ces options. Écrivons au Royaume-Uni, et puis je vais choisir l'une de ces options, par exemple, Figma, et soumettre. On y va. Fait. Vos informations ont été envoyées parfaitement. Si je me dirige sur le site Typeform ici, si je vais à l'onglet Résultats ici, je peux voir le formulaire que nous venons d'envoyer. Si je vais aux réponses, voilà. Je peux simplement voir toutes les réponses ici. C' est un service très utile que vous pouvez intégrer à votre projet Webflow et vous pouvez également l'utiliser pour vos futurs projets clients. Pouvez-vous voir à quel point il est simple de copier et coller code personnalisé et d'améliorer la facilité d'utilisation de votre site Web ? Maintenant, laissez-moi vous montrer un autre exemple. Supposons que votre client veuille que vous créiez un système de réservation pour lui. Comment peux-tu faire ça ? Eh bien, vous pouvez utiliser un autre service. Il y a en fait beaucoup de services là-bas que vous pouvez utiliser. Cependant, je vais vous montrer un service très populaire appelé Calendly. Si vous venez de créer un compte sur leur site Web, voici leur page de destination. Vous pouvez l'utiliser gratuitement aussi. Je vais aller de l'avant et vous montrer comment ça marche. abord, vous devez simplement créer un événement. Par défaut, vous aurez cet événement de démonstration. Vous pouvez également aller de l'avant et créer vos propres événements ou une réunion unique ici. Une fois votre réunion créée, vous devez cliquer sur ce bouton de partage, puis vous devez aller à l'onglet Ajouter au site Web, et ici je vais utiliser embed en ligne. Juste comme ça, et continuez. Ici, nous allons obtenir le code. Vous pouvez modifier le design simplement ici. Vous pouvez également modifier les paramètres. Ensuite, si vous venez de copier le code et de vous diriger vers votre projet Webflow et que vous le collez ici, je vais supprimer le code personnalisé précédent que nous avons ajouté, et je vais le coller ici, enregistrer le code, publier et nous avons fini. Laisse-moi l'ouvrir, voilà. Notre système de réservation est prêt pour nous et nos utilisateurs peuvent simplement réserver une réunion avec nous. Permettez-moi de choisir une date, par exemple, celle-ci, puis l'heure. Confirmez. Ici, je vais juste écrire Arash et test@gmail.com et enfin, je vais écrire un message. Nous parlons de code personnalisé. Ensuite, je vais programmer l'événement et voilà, la conformation, vous êtes programmé avec Arash et voici l'information. Si vous allez à Calendly et ici sous l'onglet Événements programmés, vous pouvez trouver tous les événements à venir ici comme ça. Si vous voulez modifier ou replanifier l'événement, vous pouvez simplement le faire. Vous pouvez simplement annuler l'événement aussi, voici le message. Il y a des tonnes d'options que vous pouvez utiliser ici. Très bien, si vous voulez obtenir une liste de tous les services que vous pouvez intégrer dans votre projet Webflow, vous pouvez vous diriger vers cette URL university.webflow.com/ intégrations et puis ici, il y a un moins de tous les services que vous peut s'intégrer dans votre projet Webflow comme ça. Nous avons Shopify, Zapier. Zapier est aussi utile. Si vous voulez simplement connecter différents services et les intégrer à votre projet, vous pouvez utiliser Zapier, certainement vérifier cela. Vous pouvez également utiliser d'autres services. Vous pouvez appuyer sur ce bouton suivant pour voir d'autres services. Il existe de nombreux services différents que vous pouvez utiliser et ils sont si pratiques. C' est pourquoi je voulais vous montrer comment vous pouvez utiliser du code personnalisé dans votre projet, car vous pouvez simplement copier et coller une ligne de code et ajouter facilement une fonctionnalité avancée à votre site Web. Le dernier exemple que je veux vous montrer est le suivant. Il y a un site très cool appelé CodePen, CodePen.io et si vous allez de l'avant et créez un compte gratuit ici, vous pouvez simplement utiliser quelques effets cool. Il y a beaucoup d'effets différents ici que vous pouvez utiliser et comme vous pouvez le voir, pour chaque effet, vous aurez le code HTML sur le côté gauche, le CSS ici, juste au milieu, et le JavaScript. Laisse-moi te montrer comment tu peux t'en servir. Voici l'effet de fait que j'ai choisi, comme vous pouvez le voir, c'est si cool, mais comment puis-je l'utiliser ? C'est si simple. abord, vous devez saisir le code HTML sur le côté gauche, je vais le copier et si je me dirige vers mon code personnalisé ici, je vais le coller ici, je vais supprimer le code constant précédent que nous collé et je vais le coller ici, enregistrer et fermer. Le premier pas est fait, mais nous n'avons pas encore terminé. Pourquoi ? Parce que cet effet nécessite le CSS ou le style et aussi il utilise le JavaScript, nous devons également ajouter le CSS et le script dans notre page. Comment pouvons-nous faire ça ? Si vous allez à vos paramètres de page ici, et si vous faites défiler vers le bas, nous avons ici la tête et la balise body. Nous devons coller le code CSS ici dans la balise head, et nous devons coller le code JavaScript ici dans la balise body. Alors laissez-moi aller de l'avant et copiez le code CSS et je vais le coller ici, mais comme vous pouvez le voir, Webflow ne reconnaît pas ce code CSS. Pourquoi ? Parce que tout est blanc. abord, je vais supprimer ces lignes de code supplémentaires en haut, nous n'avons pas besoin de cela. Nous devons avoir le corps, et pour que Webflow comprenne qu'il s'agit d'un code CSS, nous devons utiliser la balise style. Pourquoi ? Parce que CSS est en fait pour le style. Donc, je vais créer cette étiquette de titre juste comme ça et on y va. Maintenant, nous avons toutes ces couleurs et cela signifie que Webflow comprend qu'il s'agit d'un code CSS. Mais une fois que vous avez créé la balise de style, vous devez aller de l'avant et fermer cela, c'est si simple. Vous avez juste besoin d'écrire une barre oblique avant et juste écrire le style. On y va. La première partie est faite. Maintenant, nous devons aller de l'avant et copier notre code JavaScript. Maintenant, je vais le copier. Laissez-moi aller à Webflow et ici dans la balise body, je vais le coller, mais encore une fois, Webflow ne reconnaît pas cela comme un code JavaScript parce que tout est blanc. Donc, d'abord, je vais aller de l'avant et supprimer ces commentaires en haut. Comme vous pouvez le voir, c'est un commentaire qui n'est pas un code, je vais le supprimer et ici nous devons créer une autre balise. Quel genre de tags ? Comme il s'agit d'un code JavaScript, nous devons créer une balise de script. Alors écrivons un script. Oups, script là, on y va. Maintenant, nous avons toutes ces couleurs, je vais aller de l'avant et fermer cette étiquette, un script de barre oblique, cool. Maintenant, laissez-moi le sauvegarder et si je publie mon projet, et si je l'ouvre là, c'est. Voici notre effet cool, c'est incroyable, n'est-ce pas ? Mais comment pouvons-nous changer ces mots ? C'est si simple. Vous devez vous diriger vers les paramètres de votre page ici si je fais défiler vers le bas à droite dans le code JavaScript ici, nous avons ce texte contre, et nous avons tous les mots, et chaque mot est entre deux guillemets. Vous pouvez simplement aller de l'avant et le modifier. Je vais juste modifier l'un de ces mots, par exemple, pourquoi est-ce si satisfaisant à la conception ? Je vais le sauver et je vais le publier. N' oubliez pas de publier votre site Web chaque fois que vous utilisez du code personnalisé et laissez-moi l'ouvrir. Pourquoi est-ce si satisfaisant à la conception ? Il est là. C'est cool ? Tous les bons gars pouvez-vous voir à quel point il est simple d'utiliser du code personnalisé dans Webflow ? J' espère que vous avez apprécié cette vidéo et assurez-vous d'aller de l'avant et consulter la liste des intégrations Webflow car il existe nombreux services différents que vous pouvez intégrer dans vos projets Webflow en copiant et collant des code. J' espère que vous avez apprécié cette vidéo et je vous verrai dans la prochaine. 74. Animation Lottie: Hé, dans cette vidéo, je vais vous montrer comment vous pouvez utiliser les animations Lottie dans vos projets. Si vous ouvrez notre projet de cercle que nous avons créé ensemble, vous pouvez vous rendre sur la page Contactez-nous. Ici, comme vous vous en souvenez, notre formulaire avait trois états différents. Il avait l'état normal, le succès et l'erreur. Si je sélectionne simplement ce formulaire de contact dans le navigateur et que je passe à l'état de réussite ici, vous pouvez voir que nous avons ce message simple avec un fond gris. C' est bon, mais on peut le rendre encore mieux en ajoutant une animation Lottie ici. Par exemple, nous pouvons ajouter une animation de conformation ici. Comment pouvons-nous faire ça ? Tout d'abord, je vais sélectionner ce bloc de message de succès ici. Ensuite, je vais passer à l'image de l'arrière-plan et je vais la rendre transparente parce que nous n'avons pas besoin d'obtenir une couleur de fond juste comme ça. Je vais diminuer l'opacité à zéro pour cent. D'accord, cool. Maintenant, je vais ajouter un élément Lottie à ce bloc profond. Pendant que ce bloc profond est sélectionné, je vais me diriger vers le panneau d'ajout. De là, je vais glisser et déposer cette animation Lottie et mettre chacun juste au-dessus de mon bloc de texte. On y va. Voici notre élément d'animation Lottie, mais nous n'avons pas de fichier d'animation Lottie. Où peut-on en trouver un ? Eh bien, vous pouvez aller sur un site appelé lottiefiles.com et c'est le site officiel de Lottie. Il y a d'excellentes ressources que vous pouvez trouver ici, mais ce dont nous avons besoin, c'est juste un feu vert au menu Découvrir. De là, je vais aller à des animations gratuites. Ici, vous pouvez explorer de nombreuses animations gratuites différentes créées par différents contributeurs ici. Comme vous pouvez le voir si je fais défiler vers le bas, il y a beaucoup d'animations cool ici, et vous pouvez simplement les utiliser gratuitement. Vous pouvez également aller à d'autres pages. Selon vos besoins, vous pouvez choisir entre eux. De quoi avons-nous besoin en fait ? Nous cherchons une animation de confirmation. En utilisant cette barre de recherche en haut, je vais chercher confirmation. Très bien, frappe « Enter » et voyons ce que nous obtenons. Comme vous pouvez le voir ici, nous avons des tonnes d'options différentes. Laisse-moi voir. Je vais choisir celui-ci, le troisième, vous pouvez choisir ce que vous voulez. Je vais y aller avec celui-là. Maintenant, je peux simplement cliquer sur ce bouton « Télécharger » et j'ai besoin de télécharger le fichier Lottie JSON. Pour télécharger le fichier, vous devez créer un compte gratuit. Assurez-vous d'aller de l'avant et de vous inscrire d'abord. Maintenant, je vais me diriger vers Webflow et je vais aller sur les actifs, et je vais glisser et déposer mon fichier Lottie dans mes actifs. C'est là. Ensuite, je vais sélectionner cet élément d'animation Lottie, si je double-clique dessus, je peux remplacer cette séquence Lottie. Je vais choisir ce fichier JSON et je peux prévisualiser cette animation. Cependant, c'est trop grand. Pendant qu'il est sélectionné, je vais aller de l'avant et lui donner un cours, laissez-moi écrire l'animation Lottie. Ensuite, je vais vous donner la largeur maximale spécifique. Écrivons à 100 pixels. C' est bon, mais ce n'est pas centré. Je vais cliquer sur ce petit bouton dans la section d'espacement pour définir la marge gauche et droite sur auto. Alors je vais lui donner une marge de fond. Ajoutons une marge inférieure de 20 pixels ici, je pense que ce serait suffisant. Gentil, laissez-moi en prévisualiser. Ça a l'air bien. Cependant, nous devons aller de l'avant et publier notre site Web et le tester réellement sur notre site Web publié. Je vais le publier et si je l'ouvre ici, je vais remplir ce formulaire. Écrivons Arash et ici je vais écrire test@gmail.com. Ensuite, nous allons écrire un message, bonjour et « Soumettre » Nous allons voir cette image, mais l'animation ne joue pas. Qu' est-ce qui ne va pas ? Comment pouvons-nous réparer ça ? Pour résoudre ce problème, nous devons utiliser la section Interaction Webflow. Pourquoi ? Parce que nous devons créer un déclencheur d'élément pour déclencher cette animation. Laissez-moi vous rendre au panel d'interactions. De là, je vais créer un déclencheur d'élément. Notre élément sera notre bouton de soumission, ce bouton primaire. Veuillez le sélectionner dans le navigateur et créer un déclencheur d'élément, cliquez sur la souris, appuyez sur. Ensuite, je vais créer une nouvelle action ici, ce sera une animation personnalisée. Ici, je vais créer une nouvelle animation et écrire l'animation Lottie. Que devrions-nous faire ici ? Maintenant, nous devons sélectionner notre élément d'animation Lottie et ensuite nous devons créer une action. Ici, comme vous pouvez le voir sous les intégrations maintenant nous avons Lottie. Je vais choisir Lottie. Si je fais défiler ici sous la section Lottie, vous pouvez voir que je peux contrôler les cadres. Je vais le mettre à zéro pour cent parce que c'est notre point de départ. Ensuite, je vais créer une nouvelle action Lottie et puis passons à 100 pour cent. Si je l'ai prévisualisé, il semble bien, mais il joue si vite, donc je vais changer sa durée à deux secondes. Laissez-moi en prévisualiser. C' est beaucoup plus agréable, n'est-ce pas ? Permettez-moi de sauver et nous avons fini. Maintenant, je vais publier mon site web ici et ensuite je vais aller de l'avant et rafraîchir cette page Contactez-nous. Permettez-moi de remplir à nouveau ce formulaire. Je vais écrire Arash et ici nous allons écrire test@gmail.com et pour le message, écrivons bonjour. Je vais appuyer sur le bouton « Soumettre ». On y va. Notre animation Lottie joue parfaitement. C' est essentiellement comme cela que vous pouvez ajouter une animation personnalisée à votre site Web. Si vous voulez créer votre propre animation, et si vous connaissez le logiciel Adobe After Effects, vous pouvez facilement télécharger les plugins Lottie, puis créer votre animation dans Adobe After Effects et exporter votre fichier Lottie JSON et l'importer dans Webflow, c'est très simple. De cette façon, vous pouvez créer des animations personnalisées pour votre projet. Vous pouvez également demander à un concepteur graphique de faire cela pour vous. C' est tout pour cette vidéo. J' espère que ça vous a plu et je vous verrai dans la prochaine. 75. Convention: Hé, dans cette vidéo, on va parler de la convention de nommage. Eh bien, quand vous construisez un site Web, vous utilisez beaucoup de classes CSS différentes, tout comme ce que nous avons fait dans notre propre projet, le projet Circle Agency. Comme vous créez de plus en plus de classes, il devient de plus en plus difficile de maintenir et d'organiser toutes les classes, classes combo, les classes globales, tout. Dans cette vidéo, je vais vous présenter une convention de nommage très populaire que vous pouvez utiliser dans vos projets, elle s'appelle BEM. BEM signifie bloc, élément et modificateur. Est-ce que ça a l'air compliqué ? Ne vous inquiétez pas, je vais le décomposer pour vous. D' abord, je vais aller de l'avant et créer un élément. Je vais juste faire glisser et déposer cet élément de barre de navigation ici. Cette barre de navigation n'a pas de classe. Supposons que nous voulons créer une classe ici. Comment devrions-nous le nommer ? Fondamentalement, c'est totalement à toi de décider. Vous pouvez utiliser votre propre convention de nommage tant que vous pouvez garder vos cours organisés et que vous comprenez ce que vous faites, c'est tout à fait bien. Mais si vous travaillez avec une équipe de développeurs et de concepteurs, il serait préférable d'utiliser un système de convention de dénomination que tous les autres développeurs comprennent. Comment fonctionne le système BEM ? Eh bien, comme je l'ai mentionné précédemment, cela signifie bloc, élément et modificateur. À quoi se réfère le bloc ? Le bloc est notre élément principal. Par exemple, ici dans ce cas, cette barre de navigation est notre bloc. Par conséquent, nous allons simplement le nommer navbar. Nous avons créé notre classe de base. Ensuite, si je l'étend dans le navigateur, nous avons un conteneur ici, et ce conteneur va être nommé conteneur parce que c'est un autre bloc. C' est le bloc principal. Puis à l'intérieur, nous allons avoir différents éléments comme ce lien de marque, nous avons ce menu Nav et ces liens Nav et aussi ce bouton Menu qui est caché. Supposons que nous voulions nommer ce lien de marque, comment pouvons-nous le faire ? D' abord, nous devons écrire notre nom de bloc. Quel est notre bloc principal ? C' est Navbar. Nous écrivons navbar, puis nous utilisons deux traits de soulignement juste comme ça, et puis vous devez écrire le nom de l'élément. Ici, ce sera le logo, juste comme ça. Maintenant, nous avons notre nom de bloc et notre élément ici. Mais qu'en est-il du modificateur ? Eh bien, le modificateur fait référence à nos classes combo. Par exemple, si je vais juste de l'avant et sélectionnez ce lien de navigation et je lui donne juste une classe, écrivons le trait de soulignement du menu de navigation, lien de navigation de soulignement. Donc ici, nous avons notre bloc et ensuite nous avons notre élément, et ce lien a quelques propriétés. Mais supposons que nous voulons écraser ces propriétés en utilisant une classe combo. Ensuite, nous pouvons aller de l'avant et créer une classe combo. Cette classe combo va être notre modificateur. Supposons que nous voulions changer la couleur de ces liens Home, par exemple, en rouge. Dans ce cas, je peux créer une nouvelle classe combo et vous pouvez écrire quelque chose comme ceci. Vous pouvez écrire .is tiret rouge, puis vous pouvez aller de l'avant et modifier la couleur à droite dans la section typographie en rouge. Ici, c'est tiret rouge est notre modificateur. Vous pouvez le nommer comme vous le souhaitez, mais c'est ainsi que fonctionne le système BEM. Si je veux créer un nouveau modificateur, je peux supprimer cette classe et ensuite je peux écrire .is tiret vert, par exemple. Permettez-moi d'aller de l'avant et de modifier cette couleur en vert, quelque chose comme ça. Maintenant, je peux simplement basculer entre ces modificateurs. Il dit qu'il est vert, rouge. Le but de l'utilisation de ce système de convention de nommage est que vous pouvez simplement comprendre ce que chaque classe fait. Par exemple, ici vous pouvez immédiatement comprendre que c'est un modificateur, est vert, est rouge. Vous pouvez créer différents modificateurs comme ; est grand, est grand. Par exemple, si je choisis le logo de la barre de navigation ici, vous verrez immédiatement le nom du bloc qui est la barre de navigation, puis l'élément, le logo. Vous pouvez simplement organiser tous vos éléments dans le navigateur lorsque vous utilisez cette convention de dénomination. Mais encore une fois, c'est totalement à vous de décider comment vous nommez vos cours. Tant que vous les gardez organisés et compréhensibles, vous êtes libre d'utiliser n'importe quel système de convention de dénomination que vous voulez. Mais rappelez-vous, vous pouvez travailler sur un petit projet et vous pouvez utiliser votre propre système de convention de nommage et cela fonctionne parfaitement. Cependant, si vous appliquez la même convention de nommage à un projet à grande échelle, vous pouvez rencontrer des difficultés car si vous créez des centaines de pages différentes et des centaines de classes différentes, il serait difficile d'organiser et de comprendre toutes les classes combo et classes que vous créez. Dans ce cas, vous pouvez utiliser la convention de dénomination BEM. D' accord, j'espère que vous avez trouvé cette vidéo utile. Je te vois dans la prochaine vidéo. 76. Introduction au monde en soi: Construire une entreprise de conception Web réussie est une tâche difficile qui nécessite une énorme quantité d'énergie et de nombreuses compétences. Jusqu' à présent, vous avez appris à construire un site web moderne et entièrement réactif avec interactions et des animations complexes et je suis si fier de vous, mais vous ne connaissez toujours pas le côté commercial du parcours des pigistes. Donc, dans les prochaines vidéos, je vais vous accompagner à travers le processus de freelance en tant que concepteur web et développeur web. Nous parlerons de l'acquisition de clients, préparation de propositions, de la tarification de votre travail, et bien plus encore. Donc, si vous voulez savoir comment créer une entreprise de design web réussie pour vous-même, assurez-vous de consulter les vidéos à venir. 77. Comment obtenir des clients ?: Peu importe la qualité de votre design, si vous ne pouvez pas vendre vos services, j'ai peur de dire que vous serez hors de cette entreprise tôt ou tard. Mais nous ne laisserons pas cela se produire. Supposons que vous n'ayez aucune expérience de conception web et de développement web préalable et que vous voulez commencer à partir de zéro. Que devez-vous faire pour obtenir votre premier client ? C' est une question simple. Mais la réponse n'est pas si simple. Pourquoi ? Parce qu'il y a un ensemble de choses que vous devez faire pour obtenir votre premier client. Pour obtenir le client, vous devez d'abord comprendre comment les clients pensent, ce qui compte pour eux et ce qu'ils veulent réaliser. Un client doit toujours faire confiance à votre premier avant de signer le contrat avec vous. Comment pouvez-vous gagner la confiance du client ? Eh bien, vous devez leur montrer que vous êtes capable de faire ce que vous offrez. Comment ? En présentant votre portfolio. Mais attendez, vous n'aviez pas de clients. Que devriez-vous leur montrer ? La réponse est, vous devez créer des exemples de projets. Pour ce faire, vous pouvez rechercher des entreprises locales autour vous et voir s'il y a des sites Web qui nécessitent des améliorations. Vous pouvez reconcevoir leurs sites Web et les construire rapidement dans Webflow. Souviens-toi, ça ne devrait pas être parfait. Ensuite, vous pouvez les contacter et leur montrer ce que vous avez fait. Vous pouvez simplement dire, « Hey, je suis un concepteur web et j'ai pensé que peut-être votre site Web devait être mis à jour. Voici l'avant et l'après de votre site Web, et il serait heureux de vous offrir mes services. » C' est la façon la plus simple de commencer et d'obtenir votre premier client. De plus, vous pouvez publier vos exemples d'œuvres sur les réseaux sociaux comme LinkedIn, Instagram, Facebook, etc. De cette façon, de plus en plus de clients potentiels verront votre travail et ils pourront vous contacter. Vous pouvez également poster vos projets échantillons sur Behance et Dribbble. Ces plateformes sont un endroit idéal pour montrer vos compétences en matière de design et de développement web. La prochaine chose que vous devez faire est de créer un compte sur un site de vente indépendant. Il y a beaucoup de places de marché qui vous aident à obtenir des clients commodément, comme Fiverr, Freelancer, Upwork, etc. Je suggère freelancer.com, mais vous pouvez être sur n'importe lequel d'entre eux. Créez votre profil et ajoutez vos exemples de travaux. Au début, il est plus difficile d'obtenir des clients parce que vous n'avez pas reçu d'avis, mais une fois que vous avez terminé quelques projets et obtenu de bonnes critiques, il devient beaucoup plus facile d'acquérir de nouveaux clients. J' aimerais que vous sachiez que le freelance est une question de relations et de relations. Si vous avez lié des clients différents, mais qu'ils ne vous ont pas donné le projet, c'est bon. Ça fait partie du processus. Ils peuvent vous contacter au bout d'un an environ et vous donner un autre projet. Il est si important de créer de bonnes relations avec tout le monde parce que qui sait ? Ils peuvent être vos futurs clients. 78. Envoyer une proposition: Une fois que vous avez trouvé votre client potentiel, ils vous demanderont de lui envoyer une proposition et c'est l'une des étapes les plus importantes du freelance. Si vous le faites correctement, vous augmenterez considérablement les chances d'obtenir le projet. Beaucoup de débutants luttent avec cette étape parce qu'ils préfèrent passer du temps sur la conception et la construction d'un projet plutôt que sur la préparation d'une grande proposition. Mais laissez-moi vous rappeler quelque chose. Si vous ne pouvez pas obtenir le client, il n'y a pas de projet à faire. Il vaut la peine de se concentrer davantage sur cette scène. Parlons maintenant de la proposition elle-même. Comment devrait-il être structuré ? Quelles informations devraient être incluses ? Quand il s'agit de préparer des propositions, il n'y a pas de bonne ou de mauvaise façon. Vous pouvez choisir entre différents styles, différentes mises en page, etc. Voici comment je structure mes propositions. Chaque proposition devrait comporter sept éléments principaux. Numéro 1, introduction. Cette section est principalement rédigée sur la base des conversations précédentes que vous avez eues avec le client. Vous pouvez inclure le nom du client, le titre du projet, le nom de votre point de contrat, votre nom et votre titre, et enfin, la date de soumission. Voici un exemple d'une bonne introduction. Numéro 2, aperçu du problème. Une fois que vous vous présentez au client, la prochaine section importante qui suit est la présentation du problème. Dans cette section, vous devez clairement définir le problème et le client doit comprendre qu'il y a un problème avec le site Web qui a un impact négatif sur son entreprise. Le client doit également comprendre que vous avez une compréhension approfondie de ses problèmes et que vous pouvez clarifier vos responsabilités et la portée du projet ici. Rappelez-vous que l'objectif principal d'une proposition de projet est de faire croire à votre client que vous pouvez résoudre ses problèmes. Concentrez-vous toujours sur les besoins et les problèmes du client. Voici un exemple d'aperçu du problème. Numéro 3, vue d'ensemble de la solution. Après avoir défini les problèmes de l'entreprise en effectuant différents travaux de recherche, il est temps de les convaincre que vous pouvez résoudre leurs problèmes en fournissant une solution détaillée. Dans cette section, vous devez expliquer comment ils peuvent profiter de l'utilisation de vos services pour résoudre leurs problèmes et surtout, une fois que vous allez faire pour résoudre leurs problèmes. Comme vous pouvez le voir ici, nous avons une très bonne vue d'ensemble de la solution. Numéro 4, livrables. Cette section devrait clairement définir ce que vous allez livrer dans le cadre du projet et, surtout, ce que vous ne livrerez pas. Vous pouvez penser qu'il est étrange d'exclure ce que nous ne livrons pas, mais croyez-moi, lorsque vous travaillez avec des clients inexpérimentés, parfois ils attendent de vous préparer le contenu, le logo, les images, et même optimiser leur site Web pour les moteurs de recherche. Il est de votre responsabilité de clarifier ce qui fait et ne fait pas partie de la portée du projet. Numéro 5, aperçu du processus. Après avoir défini les problèmes, les solutions et les livrables, vous devez expliquer à quoi ressemble votre processus. Cette section peut décrire les différentes étapes de votre processus. Comme les réunions initiales, la préparation des actifs, la conception d'un filaire, etc. Vous pouvez également indiquer combien de temps chaque étape prend et ce que vous attendez du client au cours de ce processus. Numéro 6, le coût. Maintenant, il est temps de décrire le coût de vos services. Si vous ne connaissez pas le budget de vos clients, assurez-vous de leur demander avant de préparer la proposition. Parce que sinon, vous pourriez demander un prix très élevé ou un prix maigre. Rappelez-vous, c'est tout à fait bien de demander au client son budget à l'avance, alors n'ayez pas peur de le faire. Si vous ne savez pas comment évaluer votre travail, ne vous inquiétez pas. Dans la leçon suivante, nous en parlerons profondément. Numéro 7, CTA ou appel à l'action. Dans cette section, vous devriez inviter le client à passer à l'étape suivante, acceptant la proposition et en signant le contrat. Si vous envoyez votre proposition au format PDF ou Word, vous pouvez lui demander de vous envoyer un courriel et de vous informer de leur décision. Je ne recommande pas vraiment de cette façon. Pourquoi ? Pour de nombreuses raisons telles que les fichiers PDF ne sont pas réactifs. Par conséquent, si le client veut le lire sur son téléphone, ce serait problématique. La deuxième raison est que les PDF ne laisseront pas le client accepter un projet et signer le contrat immédiatement. Au lieu de cela, vous pouvez utiliser un outil de proposition en ligne qui vous permet concevoir et de préparer la proposition de manière professionnelle et pratique. De cette façon, vous pouvez envoyer la proposition sous la forme d'une page Web réactive, protégée par mot de passe et modifiable. En outre, votre client peut simplement cliquer sur le bouton « Accepter » et signer immédiatement le contrat. Quelle est la commodité ? Personnellement, j'utilise ce site pour préparer cette proposition gratuitement. Il existe de nombreux outils comme celui-ci que vous pouvez utiliser à cette fin. C' est tout au sujet de la préparation des propositions. J' espère que vous avez aimé cette vidéo et je vous y verrai. 79. Fixer le prix de son travail: La tarification joue un rôle important dans toute entreprise. Vous, en tant que pigiste, devez savoir comment évaluer votre travail pour réussir dans cette entreprise. Beaucoup d'entre vous s'attendent à ce que je vous donne un numéro magique en ce moment. Mais il n'y a pas de chiffre magique quand il s'agit de prix. n'y a pas de formule standard qui vous donne le prix exact que vous devez choisir pour vos services. Comment pouvez-vous décider combien vous devez facturer votre client ? Surtout quand tu ne fais que commencer. Eh bien, il y a de nombreux facteurs que vous devriez prendre en considération en ce qui concerne la tarification. Tout d'abord, parlons des modèles de tarification. Il y a généralement trois modèles de tarification que vous pouvez choisir. Tarif horaire, taux forfaitaire et taux récurrent. Commençons par le tarif horaire. Si vous facturez 60$ l'heure et que le projet prend 60 heures, vous facturez 3 600$. Ce modèle est assez simple parce que le client peut facilement comprendre combien de temps prend chaque étape. Mais il y a un inconvénient à cela. Vous devez garder une trace des heures que vous passez sur le projet, car parfois le client peut modifier la portée du projet et il peut prendre beaucoup plus de temps pour le livrer. Parlons maintenant du tarif forfaitaire. C' est un moyen efficace de charger votre client. Pourquoi ? Parce que vous définissez les attentes une fois et que vous facturez un prix fixe pour ce projet. Supposons que vous facturez 4 000$ pour un projet qui vous prend 60 heures à construire, c'est un tarif horaire de 66$. Mais voici le point, lorsque vous choisissez ce modèle de tarification, vous devez garder à l'esprit que vous devez toujours facturer un prix fixe, peu importe le temps qu'il faut pour terminer le projet. Si cela vous prend 80 heures au lieu de 60, c'est un tarif horaire de 50$. D' un autre côté, si vous parvenez à terminer le projet en 50 heures, c'est un tarif horaire de 80$. Le dernier modèle de tarification est le taux récurrent. Cela fonctionne comme ça, vous avez facturé à un client un montant fixe pour une période de temps, disons 600$ par mois pendant 12 mois. Il a quelques avantages et inconvénients. Lorsque vous facturez les clients une fois par mois, ils n'ont pas besoin de payer la totalité du prix à l'avance. En outre, vous pouvez leur fournir un service de support récurrent. Mais voici le problème, lorsque vous choisissez de facturer un client sur une longue période de temps, vous devez définir clairement ce que vous allez lui fournir, car sinon, ils peuvent s'attendre à ce que vous accomplissiez beaucoup de travail puisque vous les chargez encore et encore . Si vous êtes à la recherche d'une source de revenu stable, ce serait un bon choix pour vous. Mais personnellement, je n'utilise pas ce modèle de revenu parce qu'il y a tellement de variables différentes qui sont difficiles à gérer. Maintenant, parlons du prix lui-même. Le prix que vous définissez pour votre travail dépend de la valeur que vous fournissez. N' oubliez pas qu'il existe une corrélation entre le prix et la valeur, et vous devez toujours fixer le prix de votre travail en fonction de la valeur que vous fournissez à l'entreprise du client. Il y a toujours une valeur marchande pour tout, de l'or à l'immobilier en passant par les voitures. Mais vous devez comprendre que vous définissez votre propre valeur. Si vous évaluez votre travail à un prix très bas, vous diminuez automatiquement votre propre valeur. D' un autre côté, si vous évaluez votre travail de façon déraisonnable, vous serez hors de cette entreprise parce que vous pouvez difficilement trouver quelqu'un qui est d'accord sur votre valeur. Mais de toute façon, c'est la décision que vous devriez prendre, et vous devriez définir votre propre valeur. Bien sûr, lorsque vous appréciez votre travail très élevé, vous devriez également livrer un projet de premier ordre. Parfois, un client vous approche et vous demande de faire quelque chose gratuitement, et ils disent que vous pouvez ajouter ce projet à votre portefeuille, et c'est bon pour votre future carrière. Permettez-moi de vous dire quelque chose de jamais, jamais faire un projet gratuitement, parce que votre travail a de la valeur et personne ne devrait sous-estimer votre travail. Même lorsque vous commencez tout juste, ne faites pas de projets gratuits. Vous pouvez commencer avec un prix plus bas, mais pas totalement gratuit. Si vous allez sur différents sites indépendants, vous pouvez facilement trouver le prix moyen pour les services que vous proposez et fixer les prix en conséquence. Vous pouvez également les ajuster en fonction de votre expérience et de la valeur que vous fournissez. Quand vous définissez vos chiffres, respectez-vous. Si un client a dit que j'ai trouvé quelqu'un d'autre qui fait la même chose pour un prix inférieur, vous pourriez poliment répondre, je comprends, mais en fonction de la valeur que je vous apporte à vous et à votre entreprise, je pense que mon prix est raisonnable. Quel modèle de tarification dois-je vous suggérer d'utiliser ? Personnellement, je préfère le modèle de revenu forfaitaire. Pourquoi ? Parce qu'à mesure que vous devenez de plus en plus confiant et que vous gagnez de l'expérience dans la conception web et le développement web, vous pouvez réaliser les projets plus rapidement. Par conséquent, il serait plus avantageux pour vous d'utiliser le modèle de revenu forfaitaire parce que vous ne facturez pas l'heure et de cette façon, votre taux horaire augmentera à mesure que vous parviendrez à terminer vos projets plus rapidement. Rappelez-vous que lorsque vous terminez un projet plus rapidement, cela ne signifie pas que vous devriez sous-estimer votre travail. La raison pour laquelle vous êtes en mesure de réaliser des projets plus rapidement est que vous êtes plus expérimenté et que vous pratiquez plus. Permettez-moi de vous donner un exemple. Supposons qu'un développeur web puisse développer un site Web en 60 heures et que son tarif horaire est de 50$. Nous l'appelons ou son développeur 1. Un autre développeur peut développer le même site Web en 30 heures et il ou elle facture 100$ l'heure. Nous l'appelons ou son développeur 2. Lequel est le plus bénéfique pour le client ? Oui, vous avez raison, développeur 2, parce qu'il ou elle facture le même montant d'argent que le développeur 1, mais livre le projet beaucoup plus rapidement. Le deuxième développeur pourrait facturer encore plus comme 200$ l'heure et encore être bénéfique pour les clients parce qu'il ou elle livre le projet plus rapidement que le premier développeur. N' oubliez pas que vous pouvez modifier vos points de prix quand vous le souhaitez. Par exemple, si vous avez fait des projets et que vous pensez que vous n'avez pas facturé suffisamment les clients, vous pouvez augmenter vos prix pour vos futurs projets, il n'y a pas de limite à cet égard. Mais gardez toujours une trace de vos points de prix et des changements que vous apportez afin de trouver le meilleur prix pour vos services à l'avenir. Les gars qui sont tout au sujet des modèles de revenus et des prix. J' espère que ça vous a plu. Je te vois dans la prochaine vidéo. 80. Répondre à votre client: Beaucoup de concepteurs et développeurs inexpérimentés pensent que nous rencontrons clients parce qu'ils veulent nous poser quelques questions sur nous et comment nous travaillons, mais ce n'est pas tout. La raison pour laquelle nous rencontrons les clients est d'échanger des informations. Ils posent des questions et nous posons des questions. Nous voulons vraiment comprendre comment fonctionne leur entreprise pour être en mesure de résoudre le problème. Préparez toujours quelques questions avant d'aller à une réunion. Ces questions peuvent varier en fonction du type de projet, mais le point principal est juste de vous familiariser avec leur entreprise. Certains clients peuvent vous poser des questions sur votre processus et c'est tout à fait bien. Vous pouvez leur expliquer à quoi ressemble l'ensemble du processus. Certains d'entre eux peuvent vouloir vous développer un site WordPress, peut-être parce qu'ils ont entendu que c'est bon ou ils sont tout simplement familiers avec l'interface WordPress. Deux scénarios pourraient se produire. abord, vous pouvez penser que selon leur budget et aussi leurs besoins, il serait préférable pour eux d'avoir un site WordPress et il est de votre responsabilité de les guider et de dire, vous devez chercher un développeur WordPress pour vous aider construire ce projet. Vous pouvez également les présenter à quelqu'un si vous connaissez un bon développeur WordPress parce que nous ne voulons pas obtenir un client à tout prix. Nous voulons qu'ils soient heureux une fois le projet terminé. Le deuxième scénario est que vous pensez qu'ils ont tort et qu'il serait beaucoup mieux pour eux d'avoir un site Web Webflow constant. Dans ce cas, vous devez les convaincre pourquoi Webflow est plus adapté à leurs besoins. Vous pouvez mentionner les fonctionnalités de Webflow et comment il est pratique de travailler avec l'éditeur Webflow et bien d'autres choses. Vous devriez réellement éduquer vos clients parce qu'ils n'ont peut-être jamais entendu un Webflow auparavant et ils viennent d'entendre parler de WordPress. Dans la prochaine vidéo, nous parlerons de vendre Webflow à vos clients. On se voit là-bas. 81. Pitch Webflow: Vous avez une réunion avec un client et vous voulez les vendre Webflow. Comment faire ça ? Tout d'abord, vous devez leur poser quelques questions pour voir si Webflow est le meilleur choix pour eux ou non. Parce que, comme je l'ai déjà mentionné, il n'est pas juste de les pousser à utiliser quelque chose qui ne leur est pas bon simplement parce que nous voulons obtenir le projet. Que devriez-vous leur demander ? Vous pouvez leur poser les questions suivantes. Qu' attendez-vous de votre site Web ? Quelles caractéristiques devrait-il avoir ? Avez-vous besoin d'un CMS ? Et la sécurité ? Est-ce important pour vous ? À quelle fréquence avez-vous besoin de mettre à jour le contenu de votre site Web ? Vous souciez-vous de la vitesse et de l'évolutivité ? Ces questions vous aideront à vraiment comprendre leurs besoins et à vous concentrer sur les choses qui comptent pour eux. Par exemple, s'ils se soucient de la vitesse, vous pouvez en parler. Vous pouvez leur faire savoir que Webflow est alimenté par AWS, qui signifie Amazon Web Services, ce qui rend leur site Web très rapide. En fait, AWS est l'une des options d'hébergement les plus sécurisées et rapides disponibles, approuvées par les grandes entreprises. S' ils se soucient de CMS, vous pouvez expliquer à quel point il est facile de travailler avec Webflow CMS. Qu' en est-il de l'évolutivité ? Vous pouvez leur dire qu'ils n'ont pas besoin de se soucier de quoi que ce soit, peu importe le trafic qu'ils conduisent vers leur site Web, Webflow peut gérer cela facilement. S' ils ont déjà travaillé avec WordPress, vous pouvez leur demander ce qu'ils aiment et n'aiment pas à ce sujet et juste se concentrer sur cela. Parlons maintenant des différences entre Webflow et WordPress. Ils sont comme Mac OS et Windows, chacun a ses propres avantages et inconvénients. Vous devez choisir entre eux en fonction de vos besoins et préférences. Workflow est un outil relativement nouveau, mais WordPress est bien connu et très ancien. C' est pourquoi la plupart des clients peuvent être familiers avec WordPress, mais cela ne signifie pas nécessairement qu'il est bon pour eux de l'utiliser. Webflow utilise les dernières technologies pour construire un site Web propre et moderne. D' autre part, WordPress utilise toutes les technologies comme PHP. Webflow ne nécessite pas de plug-ins pour créer des pages web personnalisées, mais WordPress s'appuie sur de nombreux plugins différents pour presque tout. C' est pourquoi Webflow génère un code beaucoup plus propre par rapport à WordPress. Les fonctionnalités de Webflow sont payantes et ce n'est pas open source, mais WordPress est totalement gratuit et vous avez juste besoin de payer pour l'hébergement. Webflow vous donne une liberté de conception complète, alors que WordPress est limité par des modèles. Ce sont les différences les plus importantes entre Webflow et WordPress. Maintenant, je vais vous montrer une façon très cool de présenter Webflow à vos clients. Webflow a créé une façon innovante de nous permettre convaincre facilement nos clients et amis d'utiliser Webflow. Si vous accédez à Webflow.com/Pitch, vous pouvez entrer votre nom et votre adresse e-mail et commencer à créer une présentation personnalisée. Vous pouvez écrire le nom de votre client ici, télécharger une capture d'écran de leur site Web actuel, puis vous pouvez parcourir les diapositives et personnaliser certaines d'entre elles. Par exemple, ici, je peux choisir une option dans le menu déroulant et l'image sera ajoutée en conséquence. Vous pouvez également désactiver les diapositives facultatives comme ça. Enfin, vous pouvez créer un message pour votre client et cliquer sur le bouton Enregistrer et envoyer. Dans quelques minutes, vous recevrez votre lien de présentation de costumes vers votre email et vous pourrez le partager avec votre client. C' est cool ? D' accord, c'est tout pour cette vidéo. J' espère que ça vous a plu et je vous verrai dans la prochaine vidéo. 82. Hosting Webflow: Hé, dans cette vidéo, nous allons parler des plans d'hébergement Webflow. On me demande souvent pourquoi l'hébergement Webflow est si cher par rapport à d'autres options d'hébergement comme Bluehost, HostGator, etc. Lorsque vous construisez votre site Web en utilisant Webflow, vous n'êtes pas obligé d'utiliser leur hébergement. Si vous avez un compte payant, vous pouvez simplement exporter votre projet et l'héberger ailleurs, soit gratuitement ou à bas prix. Pourquoi utiliseriez-vous l'hébergement Webflow ? Lorsque vous exportez le projet et l'hébergez ailleurs, vous ne pouvez plus utiliser la fonctionnalité CMS. Cela signifie que vos pages dynamiques ne fonctionneront pas. Disons que le projet n'a pas de pages dynamiques et qu'il n'a que quelques pages statiques informationnelles. Vous hébergez votre projet ailleurs et tout fonctionne bien. Après un certain temps, le client veut ajouter quelque chose ou modifier quelque chose sur le site Web, puis il devrait engager un développeur pour aller et changer le code de votre site Web, ce qui est tellement chronophage et frustrant. Ils devraient répéter ce processus encore et encore. Chaque fois que le développeur peut leur facturer quelque chose entre 100$ et 300$ pour effectuer ces changements. S' ils veulent modifier le contenu de leur site Web au moins une fois par mois, ils devraient payer entre 1 200$ et 3 600$ par année. Maintenant, comparons-le à l'hébergement Webflow. Pour la plupart des clients, le régime de SGC fonctionne le mieux et coûte 16$ par mois, facturé annuellement. C' est 192$ par an pour un plan d'hébergement qui est livré avec beaucoup de fonctionnalités. abord, ils peuvent modifier leur site Web à l'aide Webflow Editor et ils n'ont besoin de compter sur personne d'autre. Deuxièmement, ils peuvent utiliser toutes les fonctionnalités de Webflow comme CMS, Editor, Designer, etc. Troisièmement, Webflow crée automatiquement des sauvegardes pour eux. En outre, l'hébergement Webflow offre CDN, qui signifie réseau de diffusion de contenu qui assure chargements de pages plus rapides en fournissant du contenu à partir des serveurs les plus proches de l'utilisateur. Il est également livré avec un SSH gratuit qui rend leur site web sécurisé, gagne la confiance de Google, et finalement améliore leur référencement. À mon avis, l'hébergement Webflow en vaut la peine en fonction de la valeur qu'il fournit. Les gars, c'est tout au sujet de l'hébergement Webflow. J' espère que vous avez aimé cette vidéo et je vous verrai dans la prochaine. 83. Comment livrer le projet au client ?: Hé, dans cette vidéo, je vais parler de la remise du projet. Lorsqu' il est temps de livrer le projet au client, vous pouvez choisir l'une des options suivantes. Numéro 1, hébergez le projet sur votre compte webflow et ajoutez le coût d'hébergement à votre facture. Numéro 2, créez un compte Webflow pour le client, transférez le projet sur son compte et ajoutez un plan d'hébergement au projet. Quelle est la différence entre eux ? Lequel devriez-vous choisir et lequel dois-je choisir personnellement ? Eh bien, la première option fonctionne comme ça. Vous ajoutez un plan d'hébergement au projet, et vous le publiez, vous avez terminé. Sauf que vous ne l'êtes pas. Parce que maintenant chaque fois que le client veut modifier quelque chose, il devrait vous contacter et vous devriez le faire soit gratuitement ou comme un service payant. Lorsque vous choisissez de cette façon, vous pouvez utiliser l'option de facturation de flux Web. Qu' est-ce que c'est et comment ça marche ? Supposons que vous choisissiez le plan CMS et qu'il coûte 192$ par an. Mais vous pouvez facturer plus à vos clients pour l'hébergement. En utilisant l'option de facturation, vous pouvez définir votre prix d'hébergement, ainsi que les problèmes de webflow et la facture pour eux en votre nom. Disons que vous facturez 250$ par an pour l'hébergement. Webflow reçoit cet argent et vous envoie l'ajout de 58$ que vous avez facturé. De cette façon, vous pouvez gagner de l'argent supplémentaire. Parlons maintenant de la deuxième option. C' est assez simple. Vous transférez le projet sur le compte du client et ajoutez un plan d'hébergement au projet sur son compte. De cette façon, ils peuvent facilement modifier contenu de leur site Web et ils ne devraient pas compter sur vous ou sur un autre concepteur. Mais gardez à l'esprit qu'une fois que vous avez transféré le projet sur leur compte, vous ne pouvez pas y accéder dans votre compte, sorte que vous pouvez le dupliquer avant de transférer le projet pour votre référence. Personnellement, je préfère la deuxième façon parce que d'abord, je ne dirais pas que j'aime facturer un client pour l'hébergement, deuxièmement, je ne veux pas être responsable de la maintenance de leur site Web, et troisièmement, je n'ai pas besoin de gérer les paiements et facturation annuelle. Une fois que vous publiez le projet, il est temps de la session de formation. Vous pouvez avoir une réunion de 30 minutes avec le client et expliquer comment fonctionne webflow et comment il peut utiliser l'éditeur pour modifier le contenu par lui-même. Je leur demande personnellement de ne pas faire de changements en utilisant le concepteur parce qu'ils peuvent gâcher quelque chose et casser tout le site Web. Demandez-leur toujours d'utiliser l'éditeur à la place. S' ils veulent ajouter des éléments de collection, ils peuvent aussi le faire dans l'éditeur. Comme vous devez répéter cette étape pour chaque projet, je vous suggère d'enregistrer une vidéo de formation, expliquer tout une fois, et de l'envoyer à tous vos clients. Si vos clients ont besoin de plus d'aide, vous pouvez organiser une réunion et leur donner un coup de main. 84. Que faire Next ?: Bonjour à tous, bienvenue sur la dernière vidéo de ce cours. Félicitations pour avoir terminé le cours avec succès. Ce fut un long voyage pour nous deux et j'aimerais que vous sachiez que je suis tellement fier de vous d'avoir parcouru ce chemin. Maintenant, vous êtes officiellement un développeur Web et vous allez créer des projets incroyables. J'espère que vous avez apprécié ce cours et je vous serais reconnaissant de bien vouloir laisser une critique honnête du cours afin que je puisse l'améliorer de plus en plus pour vous. Si vous souhaitez être informé des mises à jour des cours et de mes nouveaux cours, vous pouvez me suivre sur Skillshare si vous souhaitez en savoir plus sur la conception UX de l'interface utilisateur et améliorer vos compétences en matière de conception. J'ai une bonne nouvelle pour toi. J'ai une chaîne YouTube où je mets des tonnes de trucs gratuits qui pourraient vous intéresser. Assurez-vous donc de vous abonner à ma chaîne pour ne pas rater mes prochains tutoriels. Si vous souhaitez en savoir plus sur la conception UI UX, vous pouvez consulter mon cours de design UI UX sur Skillshare. Ce fut un honneur d'être votre instructeur et je vous souhaite tout le meilleur. bientôt et au revoir.