Figma vers Webflow pour débutants : créer un site de portfolio à partir de Scratch

1. Introduction: Avez-vous déjà eu envie de développer un site Web moderne sans connaître le code ? Alors ce cours est pour toi. Bonjour, je m'appelle Tim See, développeur Webflow chez Victor Flow Agency, qui est un partenaire professionnel de Webflow. Je vais partager mes expériences sur la façon dont nous créons des sites Web ici Je vous expliquerai le processus pratique de création de sites Web du développement du flux de travail Figma Design. Workflow est un outil puissant qui nous a permis de créer des sites Web visuellement sans code. Cela s'adresse à tous ceux qui souhaitent créer des sites Web. Que vous soyez débutant ou designer, ou que vous souhaitiez devenir concepteur Web à plein temps pour vous, Webflow est la solution. Ce cours est totalement créé à partir de zéro. Chaque étape de la création d' un site Web est affichée dans son intégralité. Nous passerons en revue les éléments de flux, le style et bien plus encore. J'ai expliqué ici le modèle de boîte de commentaires dans chaque leçon. Pour mieux comprendre comment nous nous appuyons sur le fait d'être un débutant, vous pouvez facilement suivre un processus d'apprentissage. J'ai expliqué le CMS sur la création la page de liste des articles de blog et d'un seul article de blog. En développeur et illustrateur d'Overflow, j'ai pensé au développement d'un site Web de portfolio, qui contient tous les éléments nécessaires au dessin. Remarqué. Une fois le processus de développement terminé, nous créerons notre site Web adapté aux ordinateurs de bureau. Tablette. Le mobile c'est aussi, nous allons vérifier avec des conseils et astuces pour finaliser parfaitement le projet Webflow. Comme de meilleurs paramètres de référencement, des améliorations des performances pour obtenir résultats écologiques sur Google Chrome Lighthouse. Enfin, ce que nous créons est gratuit, vous pouvez le cloner et le personnaliser en fonction de vos besoins. Dans ce cours, vous obtiendrez les ressources du fichier Figma et du site Web du portfolio clonal. Vous suivez ce cours, l'une des icônes gratuites uniques de Figma et Webflow. Donc, si vous êtes prêt à devenir une ville d' Alep sans code et à créer un site Web permanent. Commençons. 2. Nous allons convertir: Dans cette leçon, nous allons analyser le dessin figma que nous allons convertir en overflow. Vous pouvez l'obtenir avec mon design dans la section des résultats. Et vous pouvez importer ce fichier dans votre Figma. Passons à la leçon. Voici donc notre design figma pour le modèle de site Web de notre artiste. Sur le côté gauche, nous pouvons voir le tas de couches que nous avons utilisées. Venons-en maintenant au design. Au début, nous avons un en-tête. À l'intérieur de l'en-tête, il y a un logo et les propriétés qui le concernent peuvent être correctes. Un autre design, qui se trouve sur le côté gauche, nous utilisons ce logo comme image. Nous pouvons définir le type de fichier lors de l'exportation. Il peut s'agir de PNG, JPEG, SVG et PDF. Ainsi, en choisissant le type de fichier lors de l'exportation, ce fichier particulier sera exporté dans notre fichier local et pourra être utilisé en excès. Maintenant, sous l'aperçu, nous pouvons voir l'aperçu de cette image. Ensuite, il y a un menu. Le menu est au format texte. Lorsque nous passons à l'inspection sur le côté gauche, nous pouvons voir les propriétés relatives au texte du menu. Dans les propriétés, nous pouvons trouver la largeur et la hauteur, la topographie utilisée, c' est-à-dire le style de poids étranger, la hauteur de ligne. Nous pouvons même voir les propriétés CSS. Dans l'en-tête. Nous avons un bouton d' inscription pour cocher la case. Nous avons utilisé un texte. En cliquant sur l'inscription. Encore une fois, nous pouvons trouver les propriétés du texte. Ensuite, nous avons un numéro de contact avec l'icône et un numéro de téléphone. Dans l'en-tête, nous avons un logo, Meno, qui est un format pour les accros, et un numéro de contact avec l'icône et un numéro de téléphone. L'en-tête est donc terminé. Ensuite, nous avons la bannière, c'est-à-dire la section des héros. À l'intérieur de la bannière, nous avons deux parties. L'un concerne le contenu et le second sert à contenir l'image qui traverse le contenu. Mais nous avons des sous-titres, dose morte, une icône de courrier et un identifiant de messagerie. Et vérifions le bouton. Pour en venir à la deuxième partie, nous avons ajouté une image supplémentaire. Il existe un arrière-plan pour le contenu et l'image. Nous avons maintenant vu la bannière. Ensuite, voyons le service. Dans les services, nous avons un titre et un sous-titre. Cette conception sera utilisée dans toutes les sections du flux de travail. Ainsi, en cliquant sur chaque élément, nous pouvons trouver les propriétés qui le concernent. Dans l'inspecteur. Sous la rubrique, nous avons ces articles, des boîtes, chacune des boîtes, un adulte MOD. Dans le flux de travail, nous verrons comment télécharger ce type de design. L'un des services a une ombre de fond. Nous verrons même comment le faire dans notre sonde. Passons maintenant au service individuel, en haut, nous avons l'icône et, comme toujours, le titre, et en dessous , une description à ce sujet. Et en bas se trouve un bouton en savoir plus. Même design que pour les deux autres. Donc des visas. Derrière ces trois éléments de services, il y a une image de fond. Nous avons analysé les services. Passons ensuite au projet. Ici, nous avons utilisé un titre et un sous-titre qui se trouvent en haut. Le même design que dans les services. C'est une boîte qui contient tout le titre et le contenu. Avec la colonne d'arrière-plan. dessous du titre. Nous utilisons quatre parties, chacune avec un bloc séparé. À l'intérieur de chaque bloc, nous avons un titre, une description et une image. Avec le contexte. Le même schéma sera suivi pour les trois autres blocs. C'est le même écart que nous faisons pour chacun des blocs. Vient ensuite l'atelier. L'atelier comprend deux parties. L'un concerne le contenu supplémentaire et l' autre concerne l'image. Pour en venir à la première partie, c'est la partie contenu. Nous avons un titre et un sous-titre, comme dans les deux couches précédentes, ainsi qu'une description à ce sujet. Et en dessous, nous avons un code QR qui sert à payer le montant par les visiteurs. À côté du code QR, nous avons une icône avec la description de l' utilisation de ce code QR. Et en dessous de tout, il y a un bouton. Pour réserver mon heure. Et dans la deuxième partie, nous avons des images avec le fond. Le suivant parle de moi. à propos de moi L'autre image à propos de moi se trouve à gauche et en dessous trouvent les icônes des réseaux sociaux. À côté. Une petite description de l'auteur accompagnée de celle-ci dans le lien de mon travail. Et à la perte, il y a une vidéo avec le bouton Play. Ensuite, nous avons la couche de licence OT. Dans cette étrange couche de licence, nous avons deux colonnes, c'est-à-dire les deux parties. La première colonne contient l'image. La deuxième colonne concerne le contenu. Dans la deuxième colonne, il y a un onglet pour les licences artistiques et une commission en cliquant sur cette première étape, le contenu qui y est associé sera affiché en cliquant sur la seconde moitié, c'est-à-dire que le comportement lié à la commission sera affiché. Nous verrons comment faire en sorte que ce flux sanguin soit suffisant. Pour en revenir à la conception des deux onglets, la conception du contenu sera la même, mais seul le contenu changera. Pour le contenu des onglets. Il a un titre en haut et une description à ce sujet. Et en dessous, il y a deux parties. La première consiste à détenir un pourcentage. Et dans la deuxième partie, en guise de brève description, nous avons vu la couche de licence OT. Vient ensuite une couche de témoignages. Cette couche de témoignages comporte deux colonnes. L'une concerne le titre et les sous-titres, et la deuxième colonne contient les témoignages. Le même design sera suivi pour chacun des témoignages. Voyons le design individuel de ce témoignage. En haut, nous avons utilisé le guillemet et une commande donnée par les visiteurs ou la perte. Nous avons à côté l'image du visiteur avec son nom et sa démission. Et dans le coin inférieur, nous avons une note attribuée par le visiteur. Le même dessin sera suivi pour les autres, une feuille avec des changements de couleur de fond. Et il y a une image de fond. Ce témoignage tout à l'heure. Voyons maintenant la couche de prix. Ce prix utilise la boîte avec la couleur de fond à l'intérieur. Il s'agit du titre et du sous-titre, ou du chien, comme nous l'avons utilisé dans les couches précédentes. En dessous, il y a deux colonnes. L'un est gratuit et l'autre est pour la sonde. Pour en venir à la première colonne contenant le titre, nous avons utilisé le bloc à une extrémité. Dans un autre n., il y a une rubrique qui parle des riches. dessous de ce titre, nous avons un tas de listes concernant le libre mouvement, avec le titre en haut, dans un coin, dans un autre coin, il y a un emoji et en dessous, voici une liste de la version gratuite. À la fin, nous avons un bouton pour accéder à la version gratuite. Dans cette liste, nous avons mis en évidence certains des bois. Le même design est suivi dans la deuxième colonne avec les modifications de la tarification. La tarification d'une couche a l'image d'arrière-plan deux, que nous avons vue au-dessus de la couche de prix. Voyons voir à propos du blog. Le blog a ce titre et le sous-titre en haut et en dessous de la section de titre, soit quatre octets. Le même dessin sera suivi sur chacune des pièces. Disons la conception des différentes pièces qu'il contient. Nous avons utilisé les deux blocs. La première consiste à conserver l' image et la seconde concerne le contenu qui se trouve dans un titre en haut, en dessous du titre, c'est-à-dire une date de publication, le nom de l'auteur et un blog supplémentaire, ainsi que le lien du mode de lecture. Le même design que le suivant pour trois. Après le blocage, nous avons une FAQ. Il utilise la boîte avec l'image d'arrière-plan et contient également les deux colonnes. La première consiste à conserver le titre et le sous-titre de celui-ci. Et dans le second, il y a un tas de listes déroulantes. Ici, nous avons une question modale de l'USDA avec l'icône en forme de flèche. Lorsque vous développez cette liste déroulante, la flèche doit être orientée vers le haut et le contenu de cette question doit également être inférieur à la taille de la question, ainsi que les changements de couleur, le suivant est inscrit. Il comporte deux blocs, l'un pour le titre et le sous-titre en haut. La seconde consiste à saisir l' adresse e-mail ainsi que le bouton sur la droite. L'ensemble de cette entrée et d' un bouton a la couleur de fond. La prochaine étape est le contact. Et le contact, c'est-à-dire une liste à deux colonnes, la première liste pour le contenu et la deuxième colonne pour les champs de saisie entrant dans la première colonne. Et le chien, c'est-à-dire un sous-titre, et le titre, ainsi que l' espacement inutile sur tous les premiers sites appartenaient au titre et au sous-titre. Nous n'avons pas de données principales, ainsi que le courrier, l'identifiant, le téléphone, le numéro de téléphone, et aussi cette adresse figurant dans la deuxième colonne. Il s'agit d'un espacement inutile sur tous les sites fruitiers. Il contient également les champs de saisie suivants : nom, e-mail, entreprise, téléphone et message, ainsi que le bouton d'envoi du message en bas. Nous en sommes maintenant à la dernière partie, à savoir la nourriture pour la connaître sous forme de photo, c' est-à-dire une ligne en haut de celle-ci. Alors maintenant, à l'intérieur, nous avons une rubrique en haut, en dessous. Nous avons un logo. En dessous de ces deux, nous avons un tas de liens vers les réseaux sociaux, à savoir Facebook, Instagram, Twitter et YouTube. Chaque lien vers les réseaux sociaux est accompagné d'un logo associé. Et quel type de réseau social est-ce, avec le lien, le même design, comme suit pour les trois autres chacun des liens de réseaux sociaux qui n'est pas approprié. Oui. Et il existe également une couleur de fond pour la boîte qui contient tous vos liens vers les réseaux sociaux. En bas, il y a les liens du menu ou à gauche. Et dans le coin droit, nous avons un texte sur les droits d'auteur. C'est donc le design de la Figma que nous allons convertir en flux de travail. Afin de développer cette conception dans un Webflow, nous devons connaître les bases du Webflow. Ainsi, dans la prochaine leçon, nous verrons les bases du Webflow qui sont nécessaires. À la prochaine leçon. 3. Les bases de Webflow: Webflow est un cmos, qui est un système de gestion de contenu. Il s'agit d'un système qui permet de gérer le contenu. Mais ce n'est pas seulement cela, mais c'est l'un des meilleurs grâce au designer. Et c'est une façon pour nous de manipuler visuellement le HTML et le CSS de la page. Nous travaillerons beaucoup avec le designer de cette classe. Jusqu'à présent, l'interface utilisateur peut être divisée en quatre sections. Ces quatre sections sont la barre d'outils de gauche, le canevas, les panneaux de droite et une barre d'outils supérieure. Commençons maintenant par la barre d'outils de gauche. Lorsqu'ils ouvriront le flux de travail, nous trouverons la barre d'outils de gauche sur le côté gauche. Ainsi, depuis la barre d'outils de gauche, nous pouvons accéder à la plupart des sections importantes. Nous avons un menu en haut qui nous permet de passer au bord, aux paramètres du projet ou à l'éditeur. Ensuite, nous avons le panneau d'ajout, qui nous permet d'ajouter des éléments et des composants dans notre page. Dans un premier temps, nous avons la disposition, les sections, la qualité du conteneur en colonnes. Si nous avons besoin d'aide, cliquez simplement sur le point d' interrogation qui se trouve ici. Nous obtenons donc une petite description de. Ensuite, nous avons un basique ici. Nous avons le chien, la liste, la liste, l'élément, le lien, le blog et le bouton. Vient ensuite le type de Rafi. Ici, nous avons un titre, un paragraphe, un texte, un lien, un bloc de texte, un blog, un texte de qualité et un texte enrichi. Ensuite, nous avons un CMS ici, nous avons une liste de collections. Nous verrons cela plus tard. Viennent ensuite les médias. Ici, nous avons une image, nous créons un YouTube et toutes les animations. Ensuite, euh, nous avons les formulaires. Ici. Nous avons du blob, du travail, de la saisie, du fichier, du téléchargement, zone de texte, de la case à cocher, du bouton radio, sélection, de la récupération, du bouton de formulaire. Ce sont tous les éléments principaux. Par conséquent, pour les invites. Et nous avons également une compétence dans les composants Zêta ou nous avons une nouvelle vidéo d'arrière-plan. Je suis Bud Light, Box Number, Search, Slider, Taps, Maps, Facebook et Twitter. Voici donc tout ce qui est disponible dans le panneau des éléments. Ensuite, nous avons une mise en page. Dans la mise en page, nous pouvons utiliser n'importe laquelle des mises en page prédéfinies fournies avec Webflow. Ainsi, en survolant les mises en page prédéfinies, nous avons pu voir une petite description de ces mises en page. Si nous exécutons cette barre à cocher maintenant, nous pouvons utiliser l'autocollant maintenant. Si nous avons besoin de la section héros, il s'agit du contenu de l'en-tête, du corps de l'image et d'un bouton d'appel à l'action bien visible lui-même. Nous pouvons utiliser ce privilège fatal. Ajoutez-y. Nous avons ici superposé la section Code, contenu principal, la section fonctionnalités, la section galerie, appel à l'action, un formulaire d' abonnement, formulaire de contact dans la nourriture ou dans la bannière publicitaire, ou nous l'avons vu avec les éléments et les mises en page. Ensuite, nous avons accès aux symboles. Ici, nous avons pu voir une petite description de tous les symboles. Les symboles vous permettent de réutiliser le contenu dans votre design. Vous ajoutez un symbole, cliquez avec le bouton droit sur un élément sur le canevas et sélectionnez Créer un symbole. Il contient également une directive sur la création d'un raccourci non lié. Il suffit d'utiliser Control Shift Eight. Nous avons donc ici une description des symboles et de leur état de santé. Pour créer un nouveau symbole, il suffit de cliquer sur ce bouton plus. Et si le symbole a été créé, nous pouvons consulter la liste de tous les symboles existants ici. Ensuite, nous avons Navigator. Cela nous permet de parcourir le contenu d'une page Web. Nous avons donc ici le corps dans le panneau de gauche et la sélection du corps de toutes les pages. Ainsi, en sélectionnant ce corps, la balise de toutes les pages et en définissant le style de cet onglet, tout cela se répercutera sur l'ensemble du projet. La page suivante. En cliquant sur cette icône, nous aurons accès à toutes les pages d'un document Word et nous pourrons facilement passer de l'une à l'autre. Donc, ici, nous avons des pages statiques à l'intérieur, nous sommes chez nous. Viennent ensuite les pages utilitaires qu'il contient. Nous avons un mot de passe pour ne pas commettre d'erreur. Et troisièmement, sous forme de pages de collection CMS. Toutes les pages des collections du CMOS seront affichées. Ici. Nous avons des pages de commerce électronique. Si nous souhaitons créer de nouvelles pages, il suffit de cliquer sur cette icône. En cliquant sur Créer une nouvelle page, nous obtenons les nouveaux paramètres. Avec l'aide de celui-ci. Nous pouvons donner les détails concernant nos pages et créer la nouvelle plage. Et puis nous avons accès à plus de collections CMS. Pour créer une nouvelle collection, il suffit de cliquer sur cette icône. En haut, nous avons des modèles de collection. À partir de là, nous pouvons choisir type de collection dont nous avons besoin. Nous avons donc ici des articles de blog, auteurs, des catégories, des projets, des clients, membres de l'équipe, des listes de victoires, éléments de menu, des chansons, des émissions, des recettes. Voici tous les modèles disponibles ici. Ensuite, nous avons les paramètres de collection. Ici, nous pouvons donner le nom de la collection. Et ensuite, nous avons l'URL de la collection. L'année prochaine, la collection se séparera des champs existants, ou nous pouvons ajouter de nouveaux champs. Dans les champs personnalisés. Nous pouvons choisir le type de champ dont il s'agit. Ici, nous avons des jours aveugles, Rich prend des images, des images multiples. Nous dissocions, associons, envoyons un e-mail, un téléphone, un numéro, une date ou une heure, changeons de couleur ou de fichier d'options, même si nous avons la possibilité de supprimer la collection. Ensuite, nous avons la collection de commerce électronique. Lorsque nous transformons notre site Web en boutique, cette option peut être utilisée. Ensuite, nous avons accès aux actifs. Pour ajouter un fichier dans les ressources, il suffit de déposer les fichiers ici. Pour ajouter les fichiers dans les actifs, nous pouvons utiliser l' icône de téléchargement dans le cloud dans ce panneau des actifs. Enfin, nous avons un accès aux paramètres. Ici, nous avons la recherche et les sauvegardes. C'est tout ce que nous avons pu faire pour soutenir notre projet. Ensuite, nous pouvons créer une nouvelle sauvegarde en cliquant sur cette nouvelle option de sauvegarde. Dans la barre d'outils de gauche en bas, vous trouverez des audits. Ce panel d'audit aborde les problèmes courants liés à l'accessibilité. Nous pouvons donc arrêter le nom avant de mettre en ligne notre site. Certains des problèmes courants sont l'absence de balises alt, de description, le contenu du lien, le titre du script bas. Nous nous tournons vers l'audit, nous avons une amende rapide. Ainsi, à l'aide de cette astuce rapide, nous pouvons ajouter des éléments sur le canevas. En dessous de l'amende rapide, nous avons des didacticiels vidéo. Si nous avons le moindre doute à ce sujet, nous pouvons accéder aux tutoriels en utilisant donc je clique sur cette semaine pour obtenir la page éditoriale. Enfin, nous y avons contribué. Nous avons des raccourcis clavier. À partir de là. Nous sommes en mesure de trouver de nombreux raccourcis clavier afin de réduire notre charge de travail. En plus de cela, nous avons un aperçu du CSS et nous l' augmentons, nous le parcourons. Nous avons donc tout terminé dans la barre d'outils de gauche. Ensuite, je vais parler de la toile. Il s'agit de la section la plus importante de l'interface utilisateur. C'est ici. Nous pouvons voir un aperçu de notre projet. Pour être plus détaillé, permettez-moi de sélectionner avec le corps à l'aide de l'option Ajouter un panneau. J'ajoute une section sur l' ajout de cette section dans le canevas. Ou nous pourrions voir que la section a été créée. Passons maintenant à cette sélection de section, permettez-moi d'ajouter un conteneur afin que le conteneur soit créé dans cette section. Maintenant dans le Canvas, ce conteneur a été créé dans cette section. Je vais maintenant passer aux panneaux de droite. Au lieu de proposer le panneau latéral droit, nous pouvons également l'appeler inspecteur parce que vous inspirez, ou nous pouvons inspecter les différentes propriétés de la sélection d'un élément. Ici, nous avons sélectionné la section. Toutes les propriétés qui y sont associées seront affichées ici. En ce qui concerne le personnel, nous avons des commandes pour la disposition de l'élément. En dessous. Nous avons le déplacement du rayon. Ensuite, nous avons l'espacement du week-end d' espacement et leur donnons les valeurs d'oxygène qui sont les nôtres et aussi la valeur de rembourrage de l'élément en question. Ensuite, nous avons le contrôle de la taille. À l'intérieur, le week-end, euh, donnez la valeur de largeur, la valeur de la hauteur. Même un week-end, définissez la largeur minimale, hauteur minimale, la largeur maximale et la hauteur maximale. Le trop-plein. Nous avons la possibilité de masquer le défilement, et lorsque nous avons l'option de l' ajuster, nous avons ensuite la position qui intéresse un DDA et la position de l'élément sur la page. Au lieu de la position, nous avons des valeurs statiques, relatives, absolues, fixes et collantes. Et nous avons également la possibilité de flotter et de nettoyer. Pour en venir à la suivante, il s'agit d'une question typographique. Ici, nous pouvons définir le type de police des textes particuliers. Et on peut en dire le poids, la taille, la taille, la couleur. Nous pouvons donc en dire l' alignement. Et il a également un style plus prononcé pour le texte. Et en ce qui concerne les options de type plus nombreuses. Il comporte un espacement entre les lettres, du texte , des colonnes d' intention et un week-end. Choisissez l' option en majuscule. Et il a également des options de rupture. a même un week-end où le texte fait des ombres. Ensuite, nous avons les antécédents. Pour définir l'image d' arrière-plan, utilisez l'option plus dans l'image et le dégradé. Ici, un week-end, choisissez type de fond à ajouter. Et nous pouvons également définir la taille de l'arrière-plan, c'est-à-dire une couverture personnalisée et même une position le week-end , l'image d'arrière-plan, ou nous pouvons définir les vignettes de l' image d'arrière-plan. L'image d'arrière-plan peut être fixe ou non fixe. En ce qui concerne le type d'arrière-plan, nous pouvons définir le type comme dégradé linéaire et dégradé radial. Enfin, nous avons notre DBA et un autre arrière-plan, ou nous avons des couleurs. Et il y a aussi une coupure avec l' arrière-plan de la vente aux enchères sur le fond du gant de frappeur sur le fond du Canton Club sur le texte. Ensuite, il y a des frontières. Nous pouvons définir la bordure pour qu'elle soit au coin de la rue. Pour cela, nous avons l'option radius. En donnant la valeur du pixel. Le coin arrondi peut être créé lorsque l'on peut dire la bordure d'un site particulier. Il y a aussi ce carrelage pour les bordures. L'épaisseur des bordures peut être fournie en l'utilisant, la couleur pouvant être donnée aux bordures. Après la guerre, nous avons une éthique. L'éthique est que nous avons un mode de mélange. Même un week-end, réglez l'opacité. Même un week-end et j'ai dit ce carrelage pour les grandes lignes. Nous pouvons donner l'ombre à la boîte ici, ou nous avons les deux types qu'il existe pour l'extérieur et l'intérieur. Même un week-end, je règle l'angle de l' ombre de la boîte et je l'annule. Nous avons la distance, le Blair, la taille et la couleur. Ensuite, nous avons un devoir et nous transformons réellement. Ceci est utilisé pour manipuler l'apparence et la position d'un élément sans affecter les éléments environnants. Pour donner une apparence 3D, nous avons la possibilité de déplacer, de redimensionner, de faire pivoter et de redimensionner. La prochaine concerne les transitions. Cette transition a permis de créer une animation fluide entre les différents états d'un élément. Nous pouvons définir le type de transition nécessaire pour un élément. Voici tous les types de transitions. Nous avons des transitions communes. Transition d'arrière-plan. Viennent ensuite les transitions de taille, les bordures, topographie, le coefficient, la marge, le rembourrage et la flexion. Et nous avons également des transitions avancées. Une durée et un type d'assouplissement peuvent être personnalisés pour créer une transition unique. Ensuite, nous avons la dose complète. dose complète nous donne une vrille au-dessus de laquelle se produiront des effets qui peuvent s'appliquer à n'importe quel élément. Les options du filtre sont les un filtre doux et nous avons des réglages de couleur et des effets de couleur. Enfin, nous l'avons fait, car nous pouvons personnaliser notre Gaza en utilisant cette option. Nous avons donc maintenant quelques options supplémentaires. Ensuite, en cliquant sur l'icône Paramètres, nous pouvons définir des identifiants pour différents éléments. Et nous avons également des attributs personnalisés. Prochaine étape à partir d'ici. Nous avons également accès à ce gestionnaire d'enfants. Et cela nous montrera toutes les classes utilisées dans le projet. Et enfin, voici le panneau des interactions. C'est ici que nous pouvons créer des animations dans Webflow. Dans cette instruction, nous avons deux déclencheurs. L'un est Element Trigger. À l'intérieur du déclencheur d'éléments, nous avons clic de la souris, le mouvement de la souris. Nos éléments, défilez jusqu'à la vue tout en faisant défiler la page. Enfin, nous passons à la barre d'outils supérieure, que vous trouverez ici en haut. En haut, nous avons l' icône pour exporter notre code HTML, CSS ou JavaScript. Ensuite, nous avons la possibilité de partager notre projet. À la fin, nous avons Publish. Ainsi, en choisissant le domaine, nous pouvons publier sur le domaine sélectionné. Et nous avons également des options avancées. Nous avons les options pour annuler et rétablir. Et nous avons des contrôles pour l'aspect réponses de la conception Web. Nous pouvons passer d'un point d'arrêt à un autre en cliquant sur chacun d'eux pour prévisualiser notre site Web dans différentes tailles d'écran. Et en utilisant cette option, nous pouvons également ajouter arrêt plus importants que les points d'enchère de base. Dans cette leçon, nous allons apprendre que Webflow est un CMS. Bien, maintenant que nous avons toutes les informations sur les bases, dans la prochaine leçon, nous verrons comment configurer notre site Web. 4. Projet du cours: Pour vous familiariser avec Webflow, publiez un article unique pour cloner le site Web. Remplacez les images, personnalisez les couleurs et le contenu. Vous créez votre propre site Web de portfolio, ce qui est très facile. Une fois que vous vous y serez familiarisé, recherchez le fichier Figma dans la section des ressources importées votre compte Figma et commencez à créer le site Web comme nous le faisons dans cette classe. Vous pouvez également modifier le design selon vos souhaits. Après avoir terminé tout cela, assurez-vous de soumettre vos projets afin que je puisse analyser les travaux de votre projet. 5. Pour commencer: Dans cette leçon, nous allons créer un site Web nécessaire à notre projet. Voyons comment procéder. À l'ouverture du flux de travail, nous obtenons cet écran, il suffit de cliquer sur le nouveau projet. Maintenant, nous allons avoir un écran comme celui-ci. Pour créer un nouveau projet. Choisissez l' option côté vide maintenant sélectionnée, donnez-lui maintenant le nom du site car j'ai déjà créé un projet. Alors je vais le fermer. Vous pouvez maintenant voir le projet que j' ai créé dans ce vert. Maintenant, j'ouvre le projet de site Web de cet artiste et cela nous amène au designer. Maintenant, nous obtenons la toile vierge. Nous allons maintenant importer les polices et nous vous attendons notre projet pour le faire. En sélectionnant le symbole du hamburger ici, nous pouvons trouver les paramètres des projets à partir d'ici, choisissez les polices. Maintenant, je vais sélectionner la police Poppins et l'attente pour cette police éclatante ou 300, 500600700800 ordinaires. Et maintenant, j'ajoute ce point. Encore une fois, j'ajoute un autre téléphone avec un nom. Et maintenant, ajoutons cette police. Maintenant, je le publie sur le domaine sélectionné. Revenons maintenant au designer. Maintenant, nous avons l'écran. Je vais voir le navigateur et je sélectionne le corps. Le corps est donc sélectionné sous le sélecteur. Je choisis la balise HTML, le corps, Toutes les pages et une autre typographie. Je choisis la police en Poppins et la taille entre les pixels. Je donne la couleur en valeur hexadécimale. Et que la hauteur soit 1,4 tiret. Ce style typographique tel qu' appliqué au corps de l'onglet Toutes les pages. Maintenant, je le publie sur le domaine sélectionné. Donc, dans cette leçon, nous avons expliqué comment créer un site Web et nous avons également ajouté une police obligatoire. Dans la prochaine leçon, nous allons donc commencer par la navigation dans les en-têtes. On se voit dans la prochaine leçon. 6. Section du en-tête - partie 1: Dans cette leçon, nous allons parler de la section d'en-tête de notre site Web. Nous devons maintenant connaître la planification par modèle de boîte. La planification du modèle de boîte vise à comprendre la structure de l'en-tête ainsi que la manière dont ils traitent les logos utilisés pour la structure de cet en-tête. Nous avons maintenant cette zone d'en-tête totale. Et à l'intérieur, il y aura deux sections. C'est une section de gauche pour un logo et Minow. Et la section de droite pour le bouton et le numéro de téléphone. C'est le désert que nous allons implémenter pour notre site Web. Passons à autre chose. Avant d'entrer dans la leçon. Voyons un modèle de boîte commune à Bouddha, qui sera appliqué à toutes les sections à l'intérieur du corps. Nous devons ajouter une section et fournir le nom de classe approprié pour cette section. Vient ensuite l'espacement pour cette section. C'est-à-dire que nous devons lui donner la valeur de rembourrage supérieure et inférieure. Après avoir créé une section à l'intérieur, nous devons ajouter un conteneur et le nom de classe doit être donné pour ce conteneur. Nous pouvons maintenant ajouter l' élément à l'intérieur du conteneur qui convient à la section nécessaire. Vérifiez si le tableau est sélectionné dans le navigateur. Maintenant, j'ajoute cette section. Maintenant, je donne le nom de la classe comme en-tête. Attraper. Ce nom de classe doit être compréhensible. Soyez toujours conscient de cela. Maintenant, sous l'enveloppe d'en-tête, j'ajoute un conteneur. Vous avez la taille dont la largeur maximale est de 15, 20 pixels. Cette valeur de taille particulière sera donc stockée dans la classe de conteneur. Ainsi, chaque fois que j'utilise la classe container, cette taille sera applicable à cet élément. À l'intérieur du conteneur. Je vais ajouter un logo et un minimum. Pour ce faire, je passe sous le composant et à l'intérieur se trouve un coude. Alors sélectionnez-le maintenant, mais en sélectionnant le menu maintenant acheté, les menus par défaut seront ajoutés à l'intérieur du conteneur. Dans le navigateur, nous pouvions voir le conteneur à l'intérieur, c' est-à-dire une barre de navigation. Et encore une fois à l'intérieur, il y a un contenant qui contient maintenant la marque au milieu et le bouton du menu. Contrairement au logo de la marque, le bouton de menu a pour but visualiser le site sur le mobile, alors qu'il sera affiché sous forme de symbole hamburger sur le mobile. Je sélectionne le contenant qui dure moins d'une heure. D'un autre côté, je choisis la classe de conteneur existante. Ainsi, cette taille, qui est appliquée dans le conteneur, sera appliquée au conteneur de la barre de navigation. Dans un premier temps, je vais ajouter un logo. Je choisis donc la marque. Donc, à l'intérieur, je dois ajouter une image pour un logo. Au lieu de passer à l'option Ajouter un élément encore et encore, j'utilise le raccourci pour l'amende rapide qui est contrôlée plus E pour Windows et Command plus E pour Mac OS. Vous verrez donc apparaître l' amende, tout ce qui est en votre pouvoir. Vous pouvez maintenant rechercher une image. Après avoir sélectionné l'image, vous aurez une fenêtre contextuelle laquelle vous pourrez choisir l'image requise, c' est-à-dire pour le logo. J'ai placé le logo pour ma section d'en-tête. Pour que vous puissiez voir l' image sous la marque dans le navigateur situé sous le conteneur pour créer une zone d'en-tête totale, j'ajoute un diblock en utilisant l'amende rapide. Je fais glisser le développement vers le haut. Et je nomme la classe en tant qu'en-tête en pleine largeur. Sous l'en-tête, sur toute la largeur, nous avons deux sections, à savoir une section de lèvre d'en-tête et une section d'en-tête de droite. Je crée donc un développé en utilisant une amende rapide. Et je donne le nom de la classe en en-tête de la section gauche. Dans la section d'en-tête, nous avons un logo et un minimum. Dans la section de l'en-tête et de la lèvre, je fais glisser le logo maintenant aminé, un bouton amino. Nous avons besoin d'un en-tête, de la bonne section. Donc, en sélectionnant l' en-tête sur toute la largeur, je crée un diblock à l'aide d'un QuickFind. La section d'en-tête sera donc l'enfant de l'en-tête sur toute sa largeur. Créez le nom de la classe en tant qu' en-tête, section droite. Nous allons maintenant effectuer l'alignement de la poignée sur toute la largeur en sélectionnant l'en-tête sur toute la largeur sur le côté droit, sous la couche, vous l'affichez sous forme de flocons et l'alignement le centre et justifiez que l'espace est réparti uniformément du début à la fin. Maintenant, pour les ménés, nous devons définir la typographie. Je choisis la police Poppins et le poids 500, taille moyenne S, 18 pixels. Maintenant, pour la couleur, je donne la valeur de couleur du dessin Figma pour cette couleur et je crée un échantillon. Si je crée un échantillon. Ainsi, cette couleur particulière peut être utilisée chaque fois que j'en ai besoin. Toutes ces valeurs typographiques seront stockées dans la classe de liens de navigation. Donc, si j'utilise cette classe de liens de navigation pour les autres menus existants, ces valeurs seront appliquées à ces menus. Fais. Nous avons donc pu voir clairement comment la classe est utilisée en fonction du design figma. Nous avons un total de 5 minutes. Je duplique donc les deux minutes supplémentaires. Maintenant, je renomme les menus en tant que projets et prix. Je dois donner l'espacement à une femme qui sélectionne tellement la vitre du lien de navigation sous l'espacement, je lui donne un rembourrage gauche de 30 pixels. Pour le bon rembourrage, je donne les 30 pixels. Nous avons maintenant besoin de l'espacement pour l'ensemble du menu. Je sélectionne donc le menu des noms sous l'espacement et je donne à la valeur de remplissage de 60 pixels. Pour l'ensemble de la barre de navigation. Par défaut, la couleur de fond est excellente. Mais dans le dessin de la figma, la couleur de fond est le blanc. Nous devons donc changer la couleur de fond du réseau. Je choisis le voisin. Je passe en revue la topographie dans la section couleur, je choisis la greffe. La couleur a donc changé dans le roman. Ce n'est pas un espacement suffisant haut et en bas du roman, je donne cet espacement pour le réseau. Donc, sous l'espacement, nous avons pu voir une panique concernant le rembourrage supérieur et inférieur Je donne la valeur à 40 pixels. Dans la prochaine leçon, nous verrons une section d'en-tête modale composée d'un bouton d'inscription et d'un numéro de téléphone. À la prochaine leçon. 7. Section du en-tête - partie 2: Nous allons maintenant voir à propos de la section en haut à droite. Nous l'avons vu précédemment avec la section d'en-tête qui peut détruire un logo et des aminos. Maintenant, dans la section de droite, nous aurons un bouton d'inscription et des coordonnées. Nous utiliserons le développeur ou séparerons le bouton d'inscription des coordonnées. Encore une fois, dans les coordonnées, nous aurons deux sections, l'icône Gall et une autre pour le numéro de téléphone. Le navigateur, je sélectionne la section d'en-tête à l'aide de Quick Fine, je recherche le bouton. Le bouton est ajouté dans la section d'en-tête. Je renomme ce bouton en « Inscription ». Maintenant, je dois donner la topographie du bouton d'inscription. Je définis la police comme Poppins, poids est de 500, taille moyenne avec 18 pixels. Et je donne la hauteur de la ligne sous la forme d'un tiret de 1,3. Le tiret est utilisé pour exclure les unités Asper dans le dessin de la figma Je donne la valeur de couleur dans la typographie. Maintenant, pour l'arrière-plan de ce bouton, en passant sous l'arrière-plan, je choisis la couleur blanche pour les bordures et en passant sous la section de bordure de cet onglet, je choisis ce solide d'un pixel la couleur provient de la grande Madison car il existe une couleur noire. Ensuite, le rayon, c'est-à-dire le coin arrondi du bouton. Je donne la valeur de 12 pixels pour donner l'espacement du bouton et la valeur de remplissage. Pour le haut et le bas, il y a 15 pixels. Et pour le rembourrage gauche et droit, la valeur est de 20 pixels. Je passe maintenant à la section sélectionnée afin sélectionner le nom de la classe et de sélectionner la classe de boutons. Maintenant, je renomme le bouton haut. Si je n'ai pas modifié le nom de classe de ce bouton, le style que j'ai donné sera également affecté pour les autres boutons. C'est pourquoi je renomme la classe. Nous pouvions maintenant voir le bouton d'en-tête et la section d'en-tête. Nous devons maintenant ajouter des coordonnées, décider de l'inscription en choisissant une section d'en-tête à l'aide de QuickFind, en ajoutant le bloc. Et je donne le nom de classe S à ce contact. À l'intérieur de la tête qui entre en contact avec le représentant. Nous avons les deux sections qui concernent l'icône du téléphone et une autre pour le numéro de téléphone. J'ajoute un développé à l'aide de QuickFind. Après avoir ajouté l'icône donnant le nom de la classe en tant que contact, enroulez. Sous le comptoir, je peux emballer. Nous allons ajouter l'icône du téléphone. Je cherche donc l'image. La fenêtre contextuelle apparaîtra à partir de celle-ci. Je choisis l'image , puis je place l' icône du téléphone dans le désert. Nous avons ajouté l'icône du téléphone. La taille est donc très petite, nous devons donc en changer la taille. Donc, en dessous de la taille, je donne les 50 pixels pour la largeur et 50 pixels pour la hauteur. Maintenant, pour la couleur d'arrière-plan de cette icône de téléphone, je donne la valeur de couleur du motif Figma. Maintenant, nous devons placer cette icône au centre. Je passe donc à la couche sous Display. Je choisis le flux, je m' aligne sur le centre et je le justifie. L'icône vient donc au centre. Ensuite, en carrelant la bordure, je passe à une autre bordure et donne la valeur à 15 pixels. Nous avons ajouté l'icône, mais nous avons besoin d'un numéro de téléphone pour être ajouté. Comme nous le savons, l' icône du téléphone est un autre contact. Avec l'aide de QuickFind. J'ajoute du texte au lien. Dans le link sitting. Choisissez l'icône du téléphone. Maintenant, renommez-le avec un numéro de téléphone. Maintenant, n'en choisissez aucune dans cette vignette pour ce lien texte. Maintenant, pour le nom de classe pour ce texte, le tuilage et le changement de nom, il contient l'en-tête « téléphone », Nick. Personne ne passe à la topographie Je choisis la police comme Poppins et le poids SY, taille moyenne avec 18 pixels, la hauteur de ligne comme un tiret de 1,3 et les valeurs de couleur extraites du dessin de la figma. Ici, le numéro de téléphone doit se trouver à côté de l'icône du téléphone. À l'intérieur de l'en-tête, contactez le site Web. Nous avons l'icône du téléphone ainsi que votre numéro de téléphone. Je sélectionne donc l' en-tête, contact, représentant, et je passe au Leo sur l'écran. Je choisis S flex et je l'aligne au centre. L'espacement sur le lien téléphonique d'en-tête n'est pas suffisant. Je sélectionne donc le caressage de l'en-tête et pour le remplissage, je donne la valeur à 20 pixels et section droite de l'en-tête n'est pas alignée conformément au design. Je sélectionne la section droite de l' en-tête. Autre disposition de l'écran, je choisis Flex et je l' aligne au centre. Nous avons besoin de l'espacement entre le bouton et les coordonnées. Je sélectionne donc l'enveloppe de contact de l' en-tête. Donc, sous l'espacement, je donne 30 pixels au rembourrage gauche. Maintenant, je sélectionne le projet publié. En sélectionnant la publication pour sélectionner un domaine, vous pouvez consulter un design sur notre site Web. Ainsi, chaque fois que vous avez besoin de voir votre design sur un site Web, cliquez simplement sur le bouton Publier en survolant chaque menu. s'est rien passé d'autre. Et ce n'est pas non plus un espacement suffisant en haut. Alors je vais y retourner. Tous les éléments se trouvent dans le roman. Je sélectionne donc la barre de navigation sous la section d'espacement. Le rembourrage du haut et du bas doit être de 40 pixels. Nous allons le publier. Nous pouvons maintenant voir l'espacement suffisant pour notre niveau. Nous devons maintenant créer l'effet de transition sur les menus. Maintenant, je sélectionne cette classe désormais liée. Maintenant, quels sont les changements que je suis en train de faire dans ce cours ? Elle sera affectée aux éléments qui utilisent tous cette classe. Maintenant, je dois faire la transition qui doit avoir lieu. Donc, à l' état normal, ce n'est pas le cas. Je passe à la transition. Je sélectionne le type comme couleur de police. Maintenant, en remontant, je change l'état pour surestimer. Sur l'hébergement, la couleur devrait changer. Donc, en fonction de la typographie, je change de couleur. Et j'ai donné la valeur de couleur du dessin de la figma. Maintenant, je crée l' échantillon en tant que couleur secondaire. Maintenant, laissons l'État, encore une fois Nan. Désormais, tous les menus auront ces propriétés car tous les menus utilisent cette vitre de navigation. Nous devons maintenant donner l' effet de transition à la liaison téléphonique. Je sélectionne donc ceci. Donc, pendant la transition, je choisis la couleur de la marée sous la topographie. Après avoir terminé le non-État, je passe à l'état stationnaire. Donc, pendant que je survole, laissez la couleur passer à notre couleur primaire, puis choisissez la couleur non étatique. Maintenant, je suis en train de le publier. Voyons comment fonctionne notre transition. En survolant les menus. Invoque très parfaitement. Même la liaison téléphonique fonctionne parfaitement. Mais nous n'avons apporté aucun effet de transition à notre bouton d'inscription. Alors faisons-le aussi. Maintenant, je sélectionne le bouton d'en-tête dans le non-État. Faisons la transition pour le bouton d'inscription, nous ferons la transition vers l'arborescence au total. Regardons-le un par un. Je vais passer à la transition. Je choisis le type comme couleur de police. Et encore une fois, je vais faire la transition et choisir le type comme couleur d'arrière-plan. La transition finale est l'aquarelle. Il s'agit de tous les efforts de transition. Nous allons jouer sur le bouton d'inscription. Nous devons maintenant spécifier quel effet va se produire lorsque vous passez le curseur sur le bouton. Je choisis donc l' état de survol sous la topographie, je choisis la couleur blanche. Nous lui donnons trois effets de transition. Donc pour la deuxième transition, c'est-à-dire l'arrière-plan, je choisis le noir comme couleur de fond. Et la troisième transition est la couleur de la bordure. Je choisis donc la couleur de la bordure comme couleur secondaire. Encore une fois. Nous allons le publier pour voir comment il fonctionne. Nous pouvons maintenant voir à quel point la transition se déroule sans heurts pour les ménés et le bouton d'inscription situé sous caresses fonctionne très bien. Dans la prochaine leçon, nous parlerons de la section des héros, qui se compose de deux colonnes. La première colonne concerne le contenu et la deuxième colonne concerne l'image. Mais dans la prochaine leçon, nous développerons le contenu du premier codon. Voyons comment nous allons y parvenir. 8. Section des bannières - Partie 1: Dans cette leçon, nous allons parler de la section des héros, qui se trouve sous la section d'en-tête. Pour cette section de héros, encore une fois, nous allons utiliser le modèle de boîte. Passons maintenant au plan, nous aurons une zone réservée aux héros à l'intérieur. Nous aurons une section supérieure, une section gauche et une section manège. Dans la section de gauche, nous aurons un bloc div pour chaque contenu. Cela concerne le sous-titre, le titre, l'e-mail, l'identifiant et le bouton de suivi. Dans la section de droite, nous aurons une image. C'est donc la planification que nous allons exécuter. Passons donc au développement. Avant d'entrer dans la leçon. Voyons le modèle de boîte commun, qui sera appliqué à toutes les sections à l'intérieur du corps. Nous devons ajouter une section et fournir le nom de classe approprié pour cette section. Vient ensuite l'espacement pour cette section. C'est-à-dire que nous devons lui donner la valeur de rembourrage supérieure et inférieure. Après avoir créé une section à l'intérieur, nous devons ajouter un conteneur et le nom de classe doit être donné pour ce conteneur. Nous pouvons maintenant ajouter l'élément à l'intérieur du conteneur, qui convient à la section nécessaire. Maintenant, cliquez sur le corps situé en dessous. Nous allons ajouter une section en utilisant l'amende rapide. Je donne le nom de la classe dans la section des représentants des héros. Dans la section représentant les héros, j'ajoute un conteneur. Donc, pour ce conteneur, classer une classe en tant que conteneur, qui existe déjà. J'utilise donc la classe existante sous le conteneur. Je vais ajouter un div blob. Maintenant, je donne le nom de la classe en tant que héros Alia content. Ce bloc contiendra l'intégralité du contenu du héros. Maintenant, pour ce qui est du contenu de la zone des héros, je vais ajouter une grille qui fait office de deux sections pour le contenu et l'image. Par défaut, la grille comportera deux colonnes et deux lignes. Maintenant, je vais supprimer une ligne de la grille d'édition, qui est en cours de mise en page. Nous n'aurons donc plus que deux colonnes avec une ligne. première colonne sera la zone du contenu et la deuxième colonne sera la zone de l'image. Maintenant, je renomme la classe en grille de zones de héros. Encore une fois, sous la grille d'édition, j'ajuste la taille de la première colonne à l'intérieur de chaque colonne Nous devons ajouter un aspect div. Ce sera donc l'endroit où l'image du contenu sera conservée. Maintenant, les blocs se trouvent ADA dans la grille des zones des héros. Maintenant, je donne le nom de la classe pour la première section développée en tant que Hero Lifts. Pour le deuxième bloc en tant que section héros. Je vais maintenant vous donner le contenu de la section Hero Live. Je sélectionne donc la section Hero Live en dessous. Je cherche un titre, qui sera pour le titre. J'ai choisi le type de titre comme haie, Asper dans le dessin Figma, on m'en donne le titre. Voyons la topographie du titre, pour le téléphone, je choisis Poppins et pour la hauteur en gras 800 et la taille en 70 pixels. J'ajuste la hauteur de ligne jusqu'à ce que j'obtienne la hauteur requise. Maintenant, je renomme la classe en tant que titre de zone de héros. Maintenant, je choisis la couleur typographique comme couleur secondaire. Dans la section de gauche, je dois ajouter un sous-titre. J'ajoute donc un autre titre, le titre de type B, H2. Je donne à ce contenu de sous-titres les deux dans le design de la figma. Attribuons maintenant le type de graphe V4 au sous-titre. Je choisis le type de police marée basse et le poids à 400, taille normale à 40 pixels et la hauteur à 1,3 tiret. J'ai changé le type de couleur graphique en tant que couleur primaire. Je dois conserver le sous-titre à propos du titre, donc je le fais glisser vers le titre de la zone réservée aux héros. Maintenant, je dois changer le nom de la classe. Que le nom de la classe soit héros, sous-titre de zone. Pour le sous-titre Dans options de saisie supplémentaires de la typographie, je choisis les minuscules pour l'espacement des lettres. Je nous donne de 0,0 à m. Ajustons l' espacement pour le titre. Je donne donc zéro à la marge, pour qu'elle soit plus proche du sous-titre. Dans la section de gauche, nous avons terminé le sous-titre du titre. Ensuite, nous devons ajouter un identifiant e-mail. Donc, dans la section gauche du héros, j'ajoute un autre diblock. Pour cela, je donne le nom de la classe tel que le héros peut s'enrouler, ce diblock couvrira l'icône du courrier du bateau, et je suis une femme qui tient l' espace pour l'icône du courrier, je dois ajouter un autre développement. Sous l'enveloppe masculine du héros. J'ajoute un autre diblock. Pour ça. Je donne le nom de la classe tel qu'il a écrit le graphique de l'icône du courrier. Ajoutons maintenant l'icône sous la capture de l'icône Hero Mail J'ajoute une image ici. Nous pouvons inclure l'icône du courrier. Ajustons la taille de cette icône. Je donne la largeur de 50 pixels et la hauteur de 50 pixels. Faisons l'alignement pour cela. Donc, sous la mise en page, choisissez le flex d'affichage, puis alignez-le au centre et justifiez-le. Que la couleur de fond soit la couleur blanche. Et pour les bordures, fixons 15 pixels comme rayon. Nous devons maintenant ajouter un identifiant e-mail. Je sélectionne Hero Mail, qui contient à la fois l' icône et je suis une femme. Donc, sous Hero Main Wrap, je cherche un lien texte. Le lien suivant est créé. Ensuite, j' ajoute et je peux allumer. Attribuons la topographie à l'identifiant de messagerie. Je donne le téléphone sous forme de Poppins, pesant 500, taille moyenne et 18 pixels, hauteur de ligne 1,3 tiret. Je choisis la couleur pour ce type de Ralphie comme couleur secondaire. Je n'en choisis aucun dans le style. Une autre typographie pour éviter le lien hypertexte. Maintenant, je renomme ce verre à maillons en tant que héros peut lier Nous devons apporter cet identifiant personnalisé en plus de l'icône principale. Je sélectionne donc l' intégralité de l'enveloppe masculine du héros. Donc, dans le cadre de la mise en page, je choisis Flex l'écran et je l' aligne au centre. Nous avons besoin de l' espacement entre l'identifiant de courrier. Je sélectionne donc le lien principal du héros. J'ajuste le rembourrage gauche de dix pixels. Il fera donc l' espacement nécessaire entre l'icône et la dame principale pour ajouter un bouton dans la section de gauche, je sélectionne la section Hero Live. Donc en dessous, je cherche le bouton. Le bouton est ajouté. Maintenant, attribuons la typographie à ce bouton, la police Poppins, attendez, est de taille moyenne et la taille est de 18 pixels. Choisissons la couleur blanche. Nous devons donner la couleur de fond du bouton. Je sélectionne la couleur d'arrière-plan comme couleur secondaire. Maintenant, pour l'espacement du bouton, je donne la valeur de rembourrage pour le haut et le bas à 15 pixels. Pour la gauche et la droite, 40 pixels. J'ai oublié de donner la valeur de la hauteur de ligne. Alors maintenant, je donne la valeur sous la forme d'un tiret de 1,3. Ensuite, je donne la valeur de la bordure, soit 20 pixels. Il faut donner du fil à retordre aux aquarelles. Je sélectionne donc la couleur de la bordure comme couleur secondaire. Le rembourrage du bouton ne semble pas correct. Je vais donc modifier la valeur du rembourrage. Supposons que la valeur de rembourrage maximale soit de 25 pixels. va de même pour le rembourrage inférieur et pour le rembourrage gauche sur le rembourrage droit. Et que la valeur du rembourrage gauche et droit soit de 60 pixels. Et donnons l'espacement des lettres 0,0 EM sous la typographie de ce bouton. Maintenant, renommons ce bouton. Le contenu du mail et les boutons semblent très proches, nous devons donc créer un écart entre les deux. Pour ce faire, je dois créer un espace de marge pour le représentant masculin. Je choisis l'enveloppe masculine Hero et je donne une valeur de marge de 20 pixels pour le bas. Cet espacement ne semble pas correct. Encore une fois, je change la valeur à 40 pixels. Maintenant, je change cette valeur de marge supérieure à 40 pixels. Maintenant, l'espacement entre les deux semble très fin. Dans la prochaine leçon, nous verrons la section de droite, qui consiste en une image . Nous allons également ajouter une image d'arrière-plan pour toute la section. De plus, nous allons ajouter un effet de transition pour le bouton. Voyons comment nous allons y parvenir. 9. Section des bannières - Partie 2: Nous avons vu un Bouddha dans la partie gauche. Nous allons maintenant voir quelle est la bonne section. Dans la section de droite, nous allons ajouter une image anamorphique de Madison, commençons par la doubler. J'ai sélectionné un héros, section droite en arrière-plan. Je choisis le contenu et la taille. Et laissez également la tuile ne pas être nulle. Maintenant, je choisis l'image pour ce fond d'écran. Faisons en sorte que notre position soit au centre. Comme nous l'avons vu dans le design, nous devons ajouter une autre image. Je choisis donc une image dans la section droite du héros. Si j'utilise directement l'image, qui est utilisée dans le dessin de la figma, la taille sera élevée. Afin de compresser la taille. J'utilise tiny png.com. À partir de là, j' obtiens l'image compressée. Vous pouvez maintenant voir que la taille a été réduite. Si j'active l'option image en Hetchy DPI, cette image claire peut être visualisée sur l'écran Retina. Également. Nous devons ajouter la couleur de fond pour cette section de héros. Je choisis donc la grille des zones des héros. Maintenant, en arrière-plan. J'ai donné la valeur de couleur du dessin de la figma. Dans la conception, nous avons inclus le coin arrondi. Je passe donc à la frontière. Je donne le rayon S 40 pixels. L'espace de rembourrage n'est pas suffisant en haut de cette grille de zones réservées aux héros. Je donne donc une valeur de rembourrage de 40 pixels en haut. Nous devons mettre ce contenu au centre. Je choisis donc aligné au centre. s'agit pas d'un espace de remplissage pour le contenu de la section Hero Live. Je choisis donc la section de gauche pour les héros. Donc, pour la valeur de remplissage gauche, je nous donne 140 pixels. Cela représente un peu plus d'espacement entre le titre et le contenu du courrier. Je choisis donc l'enveloppe masculine Hero et je donne une valeur de marge de 20 pixels. Prévisualisons le site. Dans l'aperçu, j'ai pu voir cela comme un problème d'espacement entre les diapositives entre le titre et le sous-titre. Rectifions-y donc au développement. Maintenant, je sélectionne le titre de la zone réservée aux héros. Permettez-moi de changer le produit de hauteur de ligne, je nous donne un tiret de 1,2. Maintenant, permettez-moi de modifier l' espacement du sous-titre à la valeur de la marge supérieure. Soit la valeur zéro. Nous devons maintenant ajouter l' effet de transition à l'identifiant de messagerie. Je sélectionne donc Hero May Link. Maintenant, dans le secteur non étatique, je passe à la transition. Je choisis le type pour le type que je choisis comme couleur de police. Donc, pendant que je survole, la couleur de la police devrait changer. Après l'avoir terminé. Maintenant, je choisis l'État dans son ensemble. Au moment de la récolte, la couleur devrait changer. Je vais voir la topographie dans la section des couleurs. Je choisis une couleur primaire S. Nous avons terminé l'envoi. Ensuite, il y a le bouton. Faisons-le en fin de compte. Sous la transition entre le type que je choisis et la couleur d'arrière-plan, nous allons donner la transition tumorale pour ce bouton. Encore une fois, je vais faire la transition pour le type que je choisis en fonction de la couleur de la bordure. Toujours dans le cadre de la transition pour l'époque, je choisis la couleur de police. Maintenant, je change d' état en tant que HOH. Maintenant, en ce qui concerne la typographie, je choisis la couleur comme couleur secondaire. Maintenant, pour le fond, je choisis la couleur blanche. Prévisualisons-en un aperçu. Dans l'aperçu, l'ensemble de la bague fonctionne très bien pour le lien et aussi pour le bouton. J'ai ajouté la transition pour la frontière, mais elle n'est pas nécessaire pour la frontière. Gardez-le simplement. Maintenant, ajoutons l'espacement en haut de cette section dédiée aux héros. Donc, pour cela, permettez-moi de donner la valeur de rembourrage supérieure 30 pixels afin que vous à 30 pixels afin que vous puissiez voir l' espacement en haut. OK, maintenant laisse-moi un aperçu. Dans cet aperçu, je peux donc voir l'espace entre la section d'en-tête et la section des héros. Permettez-moi de donner la valeur de rembourrage en bas à 40 pixels pour la deuxième section de ce héros. Dans la prochaine leçon, nous parlerons la section Soviets, qui comprend des titres en haut et trois articles de service en bas. 10. Section des services - Partie 1: Dans cette leçon, nous allons parler de la section service d'un site Web. Avant de poursuivre, examinons la planification de la section des services. Dans un premier temps, nous aurons deux sections principales. La section la plus haute contient le titre et le sous-titre. La deuxième section concerne la zone contenant les services que nous allons fournir sur leur site Web. Dans la deuxième section, nous aurons trois services, alors qu'avec trois blocs, ce modèle de contenu sera similaire. Dans le premier développement, nous aurons un espace pour l' icône et en dessous, pour l'élément. Et encore une fois ci-dessous, une description de ces services. Et encore une fois en dessous, un bouton pour en savoir plus. C'est un endroit où les autres blocs de division peuvent le faire. C'est donc la planification que nous allons mettre en œuvre sur notre site Web. Passons à sa création. Avant d'entrer dans la leçon. Voyons le modèle de boîte commun, qui sera appliqué à toutes les sections à l'intérieur du corps. Nous devons ajouter une section et fournir le nom de classe approprié pour cette section. Vient ensuite l'espacement pour cette section. C'est-à-dire que nous devons lui donner la valeur de rembourrage supérieure et inférieure. Après avoir nivelé la section à l'intérieur, nous devons ajouter un conteneur. Le nom de classe doit être indiqué pour ce conteneur. Nous pouvons maintenant ajouter l'élément à l'intérieur du conteneur, qui convient à la section nécessaire sous le corps. Créons une section à l'aide d'une recherche rapide. Maintenant, je donne le nom de la classe sous forme de section Wheezes, la valeur de remplissage supérieure et inférieure pour le pixel Section 100. Maintenant, en sélectionnant la section Services, créons un conteneur dans la section Services pour donner la classe à ce conteneur, sélectionnons le conteneur de classe existant. À l'intérieur du conteneur. Créons un bloc div pour contenir les titres. Donnons le nom de classe de ce diblock sous forme de section intitulée wrap. Dans la section intitulée Brad, je cherche une rubrique. Créons-le donc avec le type de titre comme couverture 3. Maintenant, je renomme cette rubrique en services. Donc, pour ce qui est de la typographie, je cherche une queue basse et une largeur normale de 400. Passons maintenant à la taille, changeons-la à 40 pixels pour la hauteur à 1,3 tiret. Je sélectionne la couleur de police comme couleur principale, et donnons l' espacement des lettres à 0,02 EM. Maintenant, je dois changer le nom de classe pour ce titre car cela ne devrait pas affecter les autres titres. Je renomme donc ce nom de classe de titre S section sous-titre. Ensuite, nous devons donner le titre. Je sélectionne donc le titre de cette section, représentant. Donc en dessous, je cherche une autre rubrique. Maintenant, je choisis le type de titre H2. Maintenant, je donne le nom du titre comme dans le dessin. Donc, sous la typographie, je cherche les Poppins pour la police, le type. Ensuite, pour le poids, je choisis 800 extra bold. Maintenant, je donne la taille 50 pixels et la hauteur sous la forme d' un point avec deux tirets. Pour en venir à la couleur de ce titre, je cherche la couleur de police. Je le donne comme couleur secondaire, comme nous en avons déjà discuté, nous devons changer le nom de la classe pour cette rubrique. Je donne le nom de la classe comme titre de section. Nous avons terminé la partie titre. Ensuite, nous devons nous concentrer sur le contenu des services et les autres conteneurs. Encore une fois, je crée un diblock qui figurera sous le titre. Maintenant, je donne le nom de classe pour ce diblock comme enveloppe de contenu. Il contiendra donc le contenu de tous les services sur ce blog de division. Nous avons maintenant créé l'espace pour organiser les services. Je vais donc créer une grille qui se trouve sous le contenu du service encapsulé. Par défaut, il sera composé de deux colonnes et de deux lignes. Ici, nous avons besoin de trois colonnes car nous utilisons les trois services. Je supprime donc une ligne et j'ajoute une autre colonne. Nous changeons maintenant le nom de classe de cette grille car cela n'affectera pas les autres grilles. Alors maintenant, je change le nom de la classe en. Donc il dit grille. Nous avons une grille plus grande à l'intérieur de chaque colonne, nous devons ajouter un blog pour contenir le contenu. Et aussi, une chose que nous devons comprendre c'est que le contenu conçu pour les services est similaire. Je vais donc me concentrer sur le premier élément de service. Si nous avons clairement développé le premier élément de service, il peut être dupliqué deux fois pour les deux autres. Donc des visas. Donc, dans la grille de service, je cherche un diblock. Maintenant, je renomme ce diblock S. Donc, avec l'élément sous l'élément de service, je crée un div contenant l'icône. Maintenant, je donne le nom de la classe pour ce diplômé en icônes Diblock S. Cela permet donc de maintenir efficacement l' icône. Nous avons maintenant créé l' espace pour contenir l'icône. Maintenant, je cherche une image. J'ai maintenant choisi une image pour l'icône. Supposons que la largeur et la hauteur de cet Eigen soient égales à un pixel. Pour que l'icône soit correctement alignée, je choisis le flux sur l'écran je choisis le flux sur l'écran, je l' aligne au centre et je le justifie au centre. Comme dans le design, nous devons donner la couleur de fond à l'icône. Je sélectionne donc l'image et le dégradé en arrière-plan. Et je choisis la taille de la couverture et je la positionne au centre. Maintenant, je choisis l' image à partir de la ressource. Nous devons lui donner un coin arrondi pour cette icône, je vais passer sous les bordures. Maintenant. Je donne le rayon à 30 pixels. Nous avons terminé la partie iconique. Ensuite, nous devons lui ajouter un titre. Je sélectionne donc l'élément de service en dessous. Je cherche une rubrique. Maintenant, j'en donne le titre. Passons au type de Roffey pour cette rubrique. Laissons le téléphone à Poppins pour le poids. Je choisis un médium 500. Donnons la taille à 30 pixels et la hauteur à 1,3 tiret. Pour la couleur de police, je choisis la couleur secondaire de l'échantillon. Renommons le titre comme nous l'avons indiqué. Comme le titre n'est pas correctement aligné. Je dois donc m'aligner sur le fait que nous avons établi que je sélectionne l' article de service sous la typographie. Je l'aligne au centre. Nous avons créé une icône. Ensuite, une description se trouve sous l'élément de service Je cherche un paragraphe. Maintenant, je choisis l'ancienne balise HTML de paragraphe pour cet élément de paragraphe. Passons à la typographie de ce graphique inférieur, un autre type de graphe V Je choisis la police Poppins pour un poids normal de 400, et je laisse la taille entre les pixels. Je vais maintenant choisir la couleur de cette police. Donc, comme dans le dessin, je donne la couleur en valeur hexadécimale. Maintenant, je crée de la gouache pour pouvoir l'utiliser encore et encore. Maintenant, je donne la valeur de la hauteur sous la forme d'un tiret de 1,3. Maintenant, voyons-le en mode aperçu. Nous n'avons pas ajouté de bouton pour cela, alors ajoutons-le. Cliquez sur l'élément de service. Donc en dessous, je cherche le bouton. Maintenant, je passe à la typographie de ce bouton, je sélectionne la police Poppins, poids comme descripteur de fichier Medium. Et je donne la taille à 18 pixels et la hauteur 1,1 tiret pour la couleur de police de ce bouton Je choisis la couleur secondaire à partir de ce coin. Passons à l' arrière-plan de ce bouton. Je choisis la couleur en guise d'attelle. Pour les coins arrondis, je passe aux bordures. Je donne à la valeur du rayon S 15 pixels. Que le style du Bordeaux soit une ligne continue. Et pour la couleur, je choisis la deuxième grande couleur. Permettez-moi de donner la valeur de remplissage en tant que pixel valide dans un premier temps. Cela ne semble donc pas aussi bon. Alors maintenant, je donne une autre valeur de 15 pixels. Maintenant, pour le rembourrage gauche et droit, je donne la valeur S Duan De pixel. J'ai envie de changer la hauteur de la police. Donc, sous le graphique dipolaire, à l'intérieur de la hauteur, je change comme un tiret de 1,3. Je pense donc que c'est bien maintenant. La mauvaise chose pour la gauche et la droite ne semble pas bonne. Encore une fois, je sélectionne la valeur de rembourrage pour la gauche et la droite. Je donne la valeur 30 pixels. Maintenant, je renomme ce verre en bouton transparent. Maintenant, à l'intérieur de l'élément de service, l'icône doit être au centre. Je sélectionne donc cette image. Maintenant, sous l'espacement, je sélectionne le bouton central de l'élément. Si vous sélectionnez ce bouton, les marges gauche et droite seront réglées automatiquement. Pour obtenir cet espacement suffisant sur l'ensemble de l'élément du programme, je donne une valeur de remplissage de 55 pixels pour le haut et le bas. Pour le rembourrage gauche et droit, je donne la valeur à 50 pixels. Nous obtenons donc maintenant espacement suffisant pour l' ensemble de l'article de service. Je dois donner la bordure de l' article de service comme dans le dessin. Donc, sous la bordure, je donne un style aussi uni à la couleur. J'utilise la valeur hexadécimale comme dans le dessin. Pour obtenir le coin arrondi, je donne le rayon à 40 pixels. Pour un espacement suffisant entre le titre et le contenu. Je choisis l'enveloppe du contenu du service En choisissant le représentant du contenu du service, je dois donner de la valeur au rembourrage. Je donne donc une valeur de rembourrage de 60 pixels pour obtenir l'espacement entre l' icône et le titre, je modifie la valeur de la marge pour l'icône. Je sélectionne donc cette enveloppe toujours iconique. Je donne la valeur de la marge, c' est-à-dire une valeur de marge inférieure 30 pixels pour l'espacement entre le titre et le paragraphe. Je choisis le titre de leur service. Maintenant, je modifie la valeur de la marge. Il s'agit de la valeur de la marge inférieure, soit 15 pixels. On obtient donc un petit espacement entre le titre et un paragraphe. Maintenant, je dois ajuster légèrement la hauteur du téléphone pour le paragraphe. Je sélectionne donc le paragraphe précédent. Permettez-moi de sélectionner cette balise pour ce paragraphe comme tout le paragraphe. Maintenant, en dessous de la hauteur, je l'ajuste sous la forme d'un tiret phi à un point. Passons maintenant à l'espacement entre le paragraphe et le bouton et à la sélection du bouton. Maintenant, je crée une autre classe qui s'appelle Service Button. Le style que nous avons subi sera donc conservé dans les deux classes. C'est un bouton de transplantation et ce bouton est toujours là. Maintenant, je donne la valeur de la marge supérieure à 20 pixels. Cette valeur sera donc stockée dans un bouton transparent et également dans un bouton de service. Chaque fois que j'utilise la classe de bouton de service pour un autre bouton, ce style s'applique à celui-ci. Maintenant, voyons-le en mode aperçu , je suis en train de le publier. Maintenant, je peux le voir. Alors maintenant, tout va bien. Maintenant, je duplique deux fois pour les deux autres services. Ainsi, lors de la duplication, l'élément soviétique sera placé dans les colonnes correspondantes de la grille. Nous avons besoin de l'écart entre chaque colonne sous la grille d'édition. Je donne la valeur de 30 pixels pour cet écart. Nous pouvons donc maintenant voir que l'espacement nécessaire entre chaque colonne est nécessaire. Dans la prochaine leçon, nous allons appliquer le style nécessaire aux articles de service de la section de service. À la prochaine leçon. 11. Section des services - Partie 2: Nous allons maintenant faire le style nécessaire à notre section de service. Conformément au design, nous avons terminé les titres et les sous-titres, mais nous avons également terminé la structure de base de l'article de service. Maintenant, nous devons créer le style Asper InDesign. Passons à son développement. Nous avons terminé le premier élément de service. Ensuite, nous devons nous concentrer sur le deuxième élément de service. Donc, dans le deuxième élément de la liste, je dois changer la couleur d'arrière-plan de l'icône. Je sélectionne donc cette icône en particulier. Et je passe à l'arrière-plan. Maintenant, je dois choisir l'image de fond. Je choisis donc l'image de fond. Maintenant, vous pouvez voir qu'en modifiant l'image d'arrière-plan, cela affecte également les deux autres articles de service. Laisse-moi le faire encore une fois. Encore une fois, je choisis l'image de fond. Maintenant, vous pouvez également voir que cela affecte les deux autres articles de service. De plus, la principale raison est que nous utilisons le même nom de classe pour les trois éléments de service. Tout le style que nous avons réalisé est stocké dans ce verre d'emballage en forme d' icône de service. Ainsi, les éléments qui utilisent tous l' icône de service enveloppent le verre, le style sera applicable à ces éléments. C'est donc la raison de tout cela. Pour éviter cela, nous devons donner un autre nom de classe avec cette icône de service en forme de verre. Les deux styles seront donc applicables à cet élément particulier. raison pour laquelle nous utilisons les deux classes est le style existant et le nouveau style sera également applicable à cet élément. Donc, en plus de l'icône du service, je crée un élément de classe 2. Maintenant, je passe à l'arrière-plan. Maintenant, je choisis l'image de fond. Vous pouvez voir que l'image d' arrière-plan a changé dans ce deuxième article de service. Maintenant, nous devons changer l'image de l'icône. J'utilise l'image de remplacement. J'ai maintenant remplacé l'image. Nous n'avons créé aucune classe pour cette image en particulier, elle n'affectera donc pas les autres icônes. Maintenant, je passe au troisième élément de service avec l' icône de service existante en verre enveloppant Je crée une autre classe avec un nom, le service item 3. Maintenant, sous l'image de fond, je choisis et une autre image d' arrière-plan. Maintenant, remplaçons l'image de l'icône. L'image ayant été remplacée. Passons en mode aperçu en utilisant le bouton Publier afin de voir comment il est affiché. J'ai déjà fait la récolte comme nous l'avons fait dans les leçons précédentes. Maintenant, nous devons réorganiser la position des articles de service comme dans la conception. Je sélectionne donc le deuxième article de service avec la classe d'article de service existante. Je crée une autre classe avec un deuxième élément du service de noms. Maintenant, je dois changer la position de ce deuxième élément de service. Je passe donc au poste que je sélectionne comme apparenté. Si nous utilisons le positionnement relatif, cet élément particulier peut chevaucher les autres éléments sans affecter sa position. Dans le design. Nous avons vu que chaque article de service se parlait un peu. J'utilise donc le poussoir S associé. Par défaut, le positionnement se fera en R2. Afin de superposer les éléments les uns aux autres, j'utilise la valeur -100 en haut. Permettez-moi de procéder de la même manière pour le troisième point. Maintenant, je sélectionne le troisième article de service avec la classe d'article de service existante. Je suis en train de créer une autre classe avec un nom. Nous nous sommes donc opposés à cela également. Je change de position par rapport au fait que le troisième article de service se trouve le troisième article de service se trouve légèrement en haut puis le deuxième article Je donne donc la valeur -200 en haut. Laissez-moi le publier pour voir l'aperçu. C'est bon Nous devons maintenant ajouter l'arrière-plan de l' ensemble de cet élément de service. Je sélectionne donc cette lecture de contenu, c' est-à-dire le résumé du contenu de la semaine, qui contient ces trois éléments. Maintenant, je passe à l'arrière-plan, et maintenant je choisis l'image. J'ai choisi l' image à partir de la ressource. Maintenant, je sélectionne la position au centre. Permettez-moi de donner la taille telle qu'elle est contenue. Il sera donc contenu dans ce diblock. Nous pouvons maintenant voir tout l'arrière-plan de l' élément de service en question est transparent Nous devons donc créer une couleur d'arrière-plan pour les articles de service. Maintenant, je sélectionne le premier élément de service et je passe à l'arrière-plan. Maintenant, je choisis la couleur car la couleur d'arrière-plan sera affectée aux autres articles de service car elle utilise la même classe d'articles de service. Nous allons le publier pour le voir en avant-première. Maintenant, il est sorti au fur et à mesure que nous en sommes au stade de la conception. Mais en survolant l'élément de service, cela n'a aucun sens. Nous devons donc donner un certain effet de transition aux articles de service. Allons-y. À présent. Je sélectionne l'article de service. Maintenant, je vais choisir cet État comme Howard. Maintenant en état de vol stationnaire, nous devons donner ce carrelage. Alors, pendant que je le survole, je vais créer l'effet d' ombre qui se cache derrière. Je vais donc passer aux effets. Dans les effets, je choisis les ombres encadrées. Dans le box-ombre, j' ajuste l'angle correspondant et j'ajuste l'effet de flou à six pixels. Maintenant, je dois ajuster l' opacité de la couleur. Je passe à la couleur et j'ajuste son opacité. Nous avons réalisé les effets de transition en vol stationnaire. Mais avant cela, nous devons sélectionner la transition qui aura lieu. Mais pour y parvenir, nous devons définir la transition, mais cela ne fonctionne pas car nous sommes toujours dans l'état de survol. Nous devons maintenant changer l'état en zéro. Je passe maintenant à la transition et je dois sélectionner son type. C'est l'ombre de la boîte. J'ajuste maintenant la durée requise pour cette transition. Et en cas d'assouplissement, je m' adapte en conséquence. Nous allons le publier pour le voir en avant-première. L'Irlande se prostitue. Il fonctionne parfaitement. J'ai déjà renommé les titres de ces articles de service 2.3. Nous avons donc terminé la section service avec succès. Dans la prochaine leçon, nous parlerons de la section galerie qu'elle contient. Nous développerons le titre en haut de l'échelle. Et l'un des objets de la galerie, qui se trouve à l'intérieur de la grille. On se voit dans la prochaine leçon. 12. Section des galeries - Partie 1: Dans cette leçon, nous allons parler de la section galerie, qui se trouve dans la section service. Dans la section galerie, nous aurons les derniers travaux que nous avons réalisés. Voyons la planification de la conception de cette section de la galerie. Tout d'abord, nous aurons une section contenant l' intégralité de cette section de la galerie. À l'intérieur. Nous aurons trois boîtes. Le premier diblock doit contenir le titre de cette section de la galerie. Les deux prochains rassembleront les dernières œuvres que nous avons réalisées. Nous utiliserons le modèle de grille pour ces derniers travaux. La première, nous aurons un excellent modèle avec les deux colonnes. va de même pour le second car, à l'intérieur de chaque colonne, nous utiliserons ce bloc. À l'intérieur de chaque division. Nous utiliserons l'image et le contenu pour cela. C'est le design que nous allons mettre en œuvre. Commençons à le développer. Avant. Écoutez, voyons voir le modèle de boîte commun, qui sera appliqué à toutes les sections à l'intérieur du corps. Nous devons ajouter une section et fournir le nom de classe approprié pour cette section. Vient ensuite l'espacement pour cette section. C'est-à-dire que nous devons lui donner la valeur de rembourrage supérieure et inférieure. Après avoir créé une section à l'intérieur, nous devons ajouter un conteneur et le nom de classe doit être donné pour ce conteneur. Nous pouvons maintenant ajouter l'élément à l'intérieur du conteneur, qui convient à la section nécessaire. Dans un premier temps, sous le corps, nous allons créer une section. Donnons-lui un nom de classe pour cette section en tant que section galerie. Maintenant, sous l'espacement, permettez-moi de donner la valeur de rembourrage pour le haut et le bas à 100 pixels. Maintenant, dans cette section, nous allons créer un conteneur. Le conteneur que je donne au nom de classe en tant que conteneur de classe existant. Nous allons développer le titre de cette section de la galerie. Ici. Je vais utiliser le titre de la section service. Je passe donc à la section service et je sélectionne la section intitulée Wrap. Et je suis en train de le dupliquer. Et je fais glisser cette section intitulée wrap vers cette section de la galerie. C'est-à-dire que pour se trouver à l'intérieur du conteneur, nous devons créer un autre nom de classe avec la section intitulée Rub glass. Je crée une classe nommée centre. Je passe maintenant à une section typographique. Maintenant, je m'aligne sur le centre. Le contenu viendra donc au centre. Maintenant, je renomme les titres et les sous-titres. Hasbro dans notre design. Nous n'avons pas besoin de modifier le style dans la topographie car nous utilisons déjà la classe existante, qui se trouve dans cette section OB. Maintenant, sous le conteneur, je classe et débloque. Il contient le contenu de la galerie. Maintenant, je vais donner le nom de la classe pour encapsuler le contenu de la galerie. J'ai maintenant ajusté la valeur de remplissage pour cette enveloppe de contenu de galerie. Maintenant, dans l'enveloppe du contenu de la galerie, je vais créer une grille. Le réseau a été plus grand. Permettez-moi de supprimer une ligne. Nous allons donc maintenant avoir deux colonnes. Ajustons donc la taille de cette grille en fonction du design. Nous devons renommer le nom de classe pour cette grille. Permettez-moi de renommer ce nom de classe en galerie First Grid car nous allons utiliser les deux grilles. J'ai donc nommé cette grille en tant que première grille de la galerie. Maintenant, dans la première colonne, nous devons créer un blog div. Et si je donne le nom de la classe en tant qu' élément de galerie dans le cadre du développement, nous allons en donner le contenu. Maintenant, en sélectionnant l'élément de la galerie, je recherche un titre et je le crée. Maintenant, je donne le type de titre comme couverture 3. Et maintenant, je renomme cette rubrique en dessin numérique. Il est maintenant temps de changer de typographie. Je vais voir la topographie sous le formulaire. Je choisis comme marionnettes et choisis le poids 700, en gras. Définissez la taille sur 30 pixels et la hauteur sur 1,3 tiret. Nous devons changer la couleur de la police. Je choisis donc la couleur comme couleur secondaire dans l'échantillon. Je vais opter pour l'option du type centre commercial. Sous l'espacement des lettres, je donne la valeur 0,02 EM. Nous devons changer le nom de la classe pour cela. Je renomme donc cette classe en tant que titre de la galerie. Nous avons donné le titre, et nous devons lui donner un titre. Je sélectionne donc l'élément de la galerie situé en dessous. Je crée et dirige. Laissez ce titre taper B, h4. Maintenant, je renomme contenu de cette rubrique en illustration de marque. Passons à la topographie. Définissez la police Poppins and the wait S 600, en demi-gras. Définissez la taille à 20 pixels et la hauteur à 1,3 tiret. Pour ce qui est de la couleur de police, je choisis la couleur secondaire de l'échantillon. Permettez-moi de donner un espacement des lettres de 0,01 EM. Nous devons attribuer la couleur de fond à cet élément de galerie avec une sélection d'éléments de galerie. Et passer à l'arrière-plan. Et je sélectionne l' image et le dégradé. Dans ce cas, je choisis comme couverture une autre taille. Ensuite, je place cette image au centre. Je vais maintenant choisir l'image parmi la ressource. Nous devons maintenant ajuster la taille de cet élément de la galerie. Je passe donc en dessous de l'espacement. Donnons une valeur de rembourrage. En haut, jusqu'à 90 pixels. À gauche, je donne la valeur 60 pixels. Et dans le Canvas, nous pouvons voir que nous avons besoin d'une taille beaucoup plus grande. Encore une fois, je suis en train de modifier la valeur de remplissage inférieure, faire 90 pixels, d' en faire un coin arrondi. Je vais aux bordures et je donne le rayon à 40 pixels. Nous avons quand même besoin d'une taille supplémentaire pour l'objet de la galerie. Je vais donc donner la valeur de la hauteur. Pour ce faire, je choisis une autre taille à la hauteur minimale, je donne la valeur sous forme de deux derniers pixels. Pour en revenir à cet article de la galerie, il y a plus d'espacement en haut du titre de cette galerie. Nous devons le réduire en sélectionnant lui-même un élément de galerie. J'enseigne une valeur de remplissage de 60 pixels en haut. Mais encore une fois, je pense que je dois modifier la valeur car elle nécessite un peu plus d'espacement. Je change donc la valeur à 70 pixels afin d'être dans la même valeur pour le haut et le bas, je change la valeur inférieure à 70 pixels. Sur l'image de fond, on peut voir la partie de la tête. Je vais donc passer à l'arrière-plan. Et en sélectionnant l'image sélectionnée, je sélectionne la position en haut au centre. Maintenant, je vais en donner un aperçu. Comme dans le mode de prévisualisation. Ça a l'air bien. Dans la prochaine leçon, nous travaillerons sur les deux prochains objets de la galerie dans la section Galerie. Nous verrons dans la prochaine leçon. 14. Section des galeries - Partie 3: J'ai presque terminé tout ce qui se trouve dans la section galerie, ainsi que le titre et les 123 éléments de la galerie, il ne reste que la dernière partie. Finalisons également le développement pour cela. Je vais maintenant accéder à la première grille de la galerie. Je choisis le premier élément de la galerie et je le duplique. Maintenant, je fais glisser l'élément de la galerie vers la deuxième grille et je fais la deuxième colonne. Nous passons maintenant à l' élément de la galerie, à la deuxième grille. Nous devons créer une nouvelle classe pour cet élément de galerie en plus de la classe existante. Maintenant, je donne le nom de la classe en tant que galerie pour que l'image d'arrière-plan du quatrième élément de la galerie soit modifiée. Je passe donc à l' arrière-plan et je choisis l'image de la ressource comme dans le design. Nous devons maintenant nous concentrer sur le contenu de cet article de la galerie. Je crée donc un diblock sous l'élément de la galerie. Je donne le nom de la classe à l'alignement du titre de la galerie. Je fais maintenant glisser le titre de la galerie et le titre catégorie de la galerie jusqu'à ce que le titre de la galerie s'aligne. Maintenant, avec le titre ou la ligne de la galerie sélectionné. Je passe à la mise en page je choisis le flux sur l'écran, et je m'aligne vers le centre. Justifier. Je choisis l'espace entre lequel les objets seront répartis d'un bord à l'autre. Comme nous avons pu le constater, le titre de la catégorie n'est pas correctement aligné. Je choisis donc le titre de la catégorie de la galerie. Nous devons indiquer l'espacement en haut du titre de la catégorie. Donc, avec la catégorie de galerie intitulée class et création d'une autre classe avec un nom et un espace. Et j'ajuste la valeur de rembourrage maximale en conséquence. Et finalisons avec les 15 pixels que le bon espacement pour le quatrième élément de la galerie n' est pas suffisant. Et je donne la bonne valeur de remplissage à 60 pixels, et je renomme également le contenu dans le design. Encore une fois, l'alignement n'est pas correct pour l'image de marque, donc je le sélectionne. Et j'ajuste à nouveau la valeur de rembourrage supérieure à 20 pixels. Pour obtenir un espacement uniforme, je sélectionne le titre de la galerie, l' aligne et je donne une valeur de dix pixels à la marge inférieure . Nous allons le publier pour le voir dans une version premium. Ou ici, nous pourrions remarquer que nous n'avons pas indiqué la couleur de fond pour cette section de la galerie. Je sélectionne donc la section galerie et je passe à l'arrière-plan. Maintenant, je donne la valeur hexadécimale comme dans le dessin. Maintenant, je suis en train de le publier. Nous avons pu remarquer que l'espacement en haut n'est pas une vision. Je vais donc revenir en arrière pour obtenir l'espacement entre la section service et la section galerie. Je sélectionne la section service et je donne une valeur de remplissage inférieure à 140 pixels. Nous avons maintenant terminé la section galerie, comme dans le design. Dans la prochaine leçon, nous parlerons de la section atelier. Il se compose de deux colonnes. Nous développerons le contenu de la première colonne dans la prochaine leçon. À la prochaine leçon. 15. Section de l'atelier - Partie 1: Dans cette leçon, nous allons parler de la section atelier. Voyons maintenant comment il est planifié. Dans un premier temps, nous allons créer une section , puis la grille sera créée avec les deux colonnes. Chaque colonne contiendra les blocs div. Le contenu de cette section consacrée à l' atelier se trouvera dans le bloc D de la première colonne. Dans la deuxième colonne, nous allons placer l'image pour revenir à la première colonne, elle comprend le sous-titre et un titre, et en dessous, il y aura un paragraphe. Nous allons créer le bloc do sous le paragraphe qui contient le code QR, l'image de l'icône et le contenu du code QR. Enfin, nous aurons du mal à réserver le calendrier de notre atelier. Encore une fois, une idée claire du design. Commençons donc à le développer. Avant d'entrer dans la leçon. Voyons le modèle de boîte commun, qui sera appliqué à toutes les sections à l'intérieur du corps. Nous devons ajouter une section et fournir le nom de classe approprié pour cette section. Vient ensuite l'espacement pour cette section. C'est-à-dire que nous devons lui donner la valeur de rembourrage supérieure et inférieure. Après avoir créé une section à l'intérieur, nous devons ajouter un conteneur. Le nom de classe doit être indiqué pour ce conteneur. Nous pouvons maintenant ajouter l'élément à l'intérieur du conteneur, qui convient à la section nécessaire. Maintenant, à l'intérieur du corps et en créant une section, nous devons donner le nom de classe de cette section. Je donne donc le nom de la classe en tant que section atelier. Ajustons la valeur de remplissage pour cette section à 100 pixels en haut et 100 pixels en bas. Ici, nous utiliserons la section intitulée représentant de la section service à notre section atelier. Parce qu'un bateau de ce titre brut a le même design. Avant cela, créons un conteneur dans la section atelier. Pour cela, sélectionnons le conteneur de classe existant. Je sélectionne la section intitulée Enveloppe dans la section sur la chirurgie. Et maintenant je suis en train de le dupliquer. Faisons glisser la section d'identification dupliquée intitulée wrap vers la section atelier qui se trouve sous le conteneur. Nous devons maintenant renommer le contenu du titre comme dans notre design. Maintenant, je crée le paragraphe sous la section dupliquée intitulée wrapper. Nous avons fait les choses de base pour le titre et le paragraphe. Et nous savons déjà que le design comporte un modèle de grille. Je crée donc une grille sous le conteneur. Maintenant. Je supprime une ligne. Maintenant, j'ajuste la taille de la première colonne à 0,9. Nous savons déjà que nous devons renommer la grille. Je renomme donc la grille en grille d'atelier. À l'intérieur de la grille, nous avons deux colonnes. À l'intérieur de chaque colonne, nous devons créer un journal div. Je crée donc un diblock sous la grille de l'atelier. Maintenant, je donne le nom de la classe pour ce diblock comme résumé du contenu de l'atelier. C'est ici que vous pouvez accéder à tout le contenu de cette section d'atelier. Nous savons que le contenu doit figurer dans la première colonne de la grille. Je fais donc glisser cette section intitulée grab dans l'emballage du contenu de l' atelier. Je crée maintenant un diblock sous la barre de contenu de l' atelier qui se trouve dans la première colonne pour contenir le contenu du code QR. Maintenant, je donne le nom de la classe ce porte-manteau transparent. Nous avons noté l'emballage du code QR. Nous devons donc ajouter l'image du code QR. Sous enveloppe par code QR, je crée une image laquelle j'ai déjà placé un code QR. Vous pouvez voir que plus loin, nous avons placé le code QR dans le code QR en tant que représentant. Et à côté, nous devons ajouter une autre image. Je crée donc un diblock et je donne le nom de la classe sous forme de quote author rap. Comme il s'agit d'une enveloppe, nous devons y ajouter une image. Je cherche donc une image et je l'ai créée. Choisissons donc l' image parmi la ressource. L'image a été placée ici, nous devons la rendre arrondie. Je vais donc passer sous les frontières. Maintenant, je dois donner une valeur de pixel pour le rayon sous la forme de cent. Maintenant, dans la toile, vous pouvez voir qu'il a été arrondi. L'espacement sur toute l' image est entièrement occupé car nous devons donner l'espacement sur toute l'image. Donc, au lieu de sélectionner l'image, je sélectionne le code ou le représentant pour donner la largeur et la hauteur sous la taille. Maintenant, je donne la valeur de la largeur 60 pixels et la valeur de la hauteur à 60 pixels. Comme nous avons pu le constater, il n'est pas complètement aligné. Je passe donc à la couche, je sélectionne la flexbox, je la laisse alignée au centre et justifiée au centre. Maintenant, il est correctement aligné. Nous devons appliquer le style à l'image comme dans notre design. Donc, sous les bordures, je choisis le style en pointillés. Je donne la couleur en tant que design Endeavor Figma. Je donne la valeur en hexadécimal. Et j'ajuste la valeur de largeur à deux pixels. Pour être arrondi, cercle en pointillés. Je donne le rayon à 100 %. Nous avons terminé le code QR et l'image de l'auteur. Ensuite, nous devons ajouter le contenu du code de numérisation. Donc, dans l'enveloppe du code QR, j'ajoute un paragraphe. Maintenant. J'ai donné le contenu tel que dans le design. Ensuite, pour la typographie, je change le type de police en Poppins et le poids en 500, taille moyenne, soit 16 pixels. Nous devons maintenant renommer le nom de la classe. Je donne donc le nom de Scan Goat Content. Maintenant, j'ai changé la couleur de police en couleur secondaire, pour changer la couleur du nom et sélectionner le nom. Et ils ont changé l' option en rap with span. Alors maintenant, sous la couleur de police, je donne la valeur hexadécimale, comme dans notre conception. Maintenant, je renomme le nom de la classe pour les textes incorrects *** , scan ou le nom. Maintenant, dans la topographie, sous l'option Plus, je nous donne la majuscule. Passons maintenant à l'alignement de l'ensemble de ce contenu, savoir le contenu du code QR et la sélection du code QR wrap. Dans le cadre de la mise en page, je choisis un flex l'écran et je l'aligne au centre. Et maintenant, je cherche un espace entre les deux, mais ce n'est pas comme prévu. Je choisis donc de commencer, afin que les éléments soient alignés à gauche. L'espacement entre le code QR et l'image n'est pas suffisant. Je choisis le code ou le rap. Maintenant, sous l'espacement, j'ajuste la valeur de la marge de gauche à 15 pixels. Pour l'espacement dans le contenu du code, je sélectionne le contenu du code de numérisation. Sous l'espacement, j'ajuste la valeur de la marge gauche à 15 pixels. Encore une fois, nous avons la couleur de fond de ce graphique de code QR. Je sélectionne donc votre code, je prends l'arrière-plan. Choisissons la couleur, car dans notre design figma, pour obtenir l'espacement à l'intérieur d'un emballage contenant un code QR, je donne une valeur de rembourrage inférieure ou égale à 15 pixels. Nous avons besoin d'un coin arrondi pour cela. Donc, sous les bordures, je donne la valeur 20 pixels pour le rayon. L'image de l'auteur et le contenu du code ne sont pas correctement alignés. Je sélectionne donc cette option pour recouvrir le contenu et je donne la valeur de modélisation du mortier une valeur nulle pour l'aligner correctement. Nous avons pu remarquer qu'il vient au centre. Selon la conception, cette zone n'est pas entièrement occupée. Pour établir cela, je sélectionne le contenu de l' atelier qui s'y trouve, je vais créer un bloc div. Maintenant, je vais placer ce code QR dans ce diblock. Nous devons donner le nom de classe pour ce diblock. Je sélectionne donc le diblock et je lui donne un nom de classe en tant que zone de code QR. Maintenant, sous la mise en page, je choisis le bloc intégré sur l'écran. La largeur et la hauteur seront déterminées par le contenu à l'intérieur. Nous pouvons donc maintenant voir que nous obtenons la structure comme dans notre conception, pour obtenir l'espacement ou la droite de l'enveloppe du code QR. Je donne une valeur de rembourrage de 40 pixels sous l'espacement. Faisons la vérification dans l'aperçu. Dans le film précédent, on pouvait voir que tout était parfait. Seul le bouton le rappelle. Développons-le. Nous allons ajouter le bouton dans la première colonne. Je sélectionne donc le contenu de l'atelier qui s'y trouve. Je porte un coup fatal, et je donne au nom de la classe un bouton Q enfoncé. Qu'à l'intérieur du drop, je crée un bouton. Nous devons maintenant donner le nom de classe pour ce bouton. Donc, dans le sélecteur, je choisis le nom de la classe comme bouton car il existe déjà. Ainsi, en décliquant sur le bouton du nom de classe existant, le style que nous avons fait précédemment sera appliqué à ce bouton. Vous remarquerez peut-être les modifications apportées à ce canevas. Maintenant, je renomme le nom de ce bouton pour réserver mon temps. Pour l'instant, nous avons terminé les tâches de base nécessaires au représentant du contenu de l' atelier. Dans la prochaine leçon, nous parlerons donc de l'amélioration de cette enveloppe de contenu en cours développement qui devrait être apportée dans la deuxième colonne, deuxième colonne. 16. Section de l'atelier - Partie 2: Nous avons presque terminé les éléments nécessaires au contenu de cet atelier. Il s'agit du titre du sous-titre, la description, de la cure, du bon contenu et du bouton. Un jour, certaines des améliorations qui doivent être apportées au style nous le rappellent. Nous devons également nous concentrer sur la deuxième colonne de cette grille. Commençons à le développer. Nous devons donner le même espacement entre le titre , le sous-titre et la description. Je sélectionne donc le titre de cette section et je donne une valeur de marge de dix pixels. Comme nous avons copié ce graphique du titre de cette section OB. Les modifications apportées ici seront affectées dans la deuxième section de ce service. Nous avons maintenant terminé la partie marémotrice. Ensuite, je sélectionne ce paragraphe et je donne nom de la classe S section intitulée contenu. Nous avons maintenant besoin d'un espacement en haut de cette zone de contenu. Je sélectionne donc ceci et je donne à la valeur de rembourrage ou au sommet dix pixels. Et maintenant, en ce qui concerne l'espacement à l'intérieur de la zone du code QR, je passe à l'espacement, puis je donne la valeur de rembourrage supérieure 25 et la valeur de rembourrage inférieure à 40 pixels. Nous obtenons maintenant l' espacement nécessaire ou inférieur. Nous allons le publier pour le voir en mode aperçu. En mode aperçu, nous avons pu voir chaque espacement est correctement aligné, comme dans le design. Passons maintenant à la deuxième colonne. Dans le cadre de la grille de l'atelier, je suis en train de créer un développeur. Et maintenant, je donne le nom de classe de ce diblock en tant que rap d'image d' atelier, car nous avons créé l' espacement pour cette image. Nous devons donc créer une image et l' élément d'image est plus grand. Maintenant, je clique sur le bouton Choisir une image et je sélectionne l' image dans la ressource. Nous devons donner la couleur de fond de cette image. Je choisis donc l'image de l'atelier, un rap, et je passe à l'arrière-plan. Et je sélectionne l'image et le dégradé qu'elle contient. Je sélectionne la housse en fonction de la taille et je la positionne au centre. Maintenant, choisissons l' image à partir de la ressource. Dans le design, nous avons les coins arrondis. Je vais donc aller aux bordures et donner la valeur du rayon sous la forme de 20 pixels. Nous devons l'aligner. Donc, sous la typographie, je clique sur l'alignement central. Ainsi, vous pourriez voir qu'il est aligné au centre. Maintenant, je sélectionne la grille de l'atelier, comme nous l'avons vu dans la conception. La deuxième colonne est plus grande que la première colonne et il n'y a pas non plus d'espace suffisant entre ces deux colonnes. Je sélectionne donc cette grille et je passe à la grille d'édition. Donc, en sélectionnant la première colonne, je donne la taille 0,7. Et permettez-moi également de donner la valeur de l'écart entre ces deux colonnes à 60 pixels. Le contenu de l'atelier, c'est-à-dire le contenu de la première colonne, se trouve tout en haut. Nous avons donc besoin d'oméga pour le même chien. Ainsi, en sélectionnant l' alignement central sous la couche, vous pourriez voir le contenu arriver au centre. Nous allons le publier pour voir comment il fonctionne. Nous avons donc pu constater que tout est parfaitement développé. Dans la prochaine leçon, nous développerons cette section, nous dirions qu'elle concerne l'auteur. 17. Section à propos de moi - Partie 1: Dans cette leçon, nous allons voir une section « À propos de moi » sur le bateau. Cette section sur l'auteur laquelle vous pouvez voir l'auteur des autres et les liens sociaux de celui-ci et quelques détails sur l'autre. Et vous pouvez également voir les œuvres de l'auteur. C'est donc dans ce but que nous allons créer cette section sur moi. Pour en venir à la planification du modèle de boîte, nous allons créer une section à cet effet. Et à l'intérieur, il y aura un dibloc. Et en utilisant la grille, nous aurons trois colonnes. La première colonne indiquera l'octet et les liens vers les réseaux sociaux. Dans la deuxième colonne, nous aurons une brève description de l'auteur et il y aura également un lien pour voir les œuvres de l'auteur. Et dans la troisième colonne, nous aurons une vidéo. C'est donc la planification que nous allons mettre en œuvre. Commençons à le développer. Avant d'entrer dans la leçon. Voyons le modèle de boîte commun, qui sera appliqué à toutes les sections à l'intérieur du corps. Nous devons ajouter une section et fournir le nom de classe approprié pour cette section. Vient ensuite l'espacement pour cette section. C'est-à-dire que nous devons lui donner la valeur de rembourrage supérieure et inférieure. Après avoir créé une section à l'intérieur, nous devons ajouter un conteneur. Le nom de classe doit être indiqué pour ce conteneur. Nous pouvons maintenant ajouter l' élément à l'intérieur du conteneur qui convient à la section nécessaire avec un corps choisi. Maintenant, je vais créer une section après avoir noté cette section Le nom de la classe sera C, ma section de travail. La valeur de remplissage pour cette section sera cent pixels en haut et de 100 pixels en bas. Nous avons créé une section. Puis, à moins de huit ans, nous créerons un conteneur. Désormais, le nom de classe de ce conteneur sera le conteneur de classe existant. Sous le conteneur, je vais créer un diblock afin que le diblock contienne tout le contenu que nous allons développer. Donnons-lui un nom de classe pour ce diblock, comme dans mon résumé de travail. Nous avons créé l'espace pour héberger ce contenu. Nous allons maintenant créer une grille. Dans la conception, nous avons déjà vu qu'il s'agit de trois colonnes. Je supprime donc une ligne et j'ajoute une nouvelle colonne. Nous devons renommer le nom de classe pour cette grille. Je renomme le nom de la classe en tant que grille de travail. Alors maintenant, créons le contenu de la pire colonne pour cela dans la grille My World, je suis en train de créer le blog. Soit la date de classe pour ce diblock comme auteur, intro rep. Le contenu de l'introduction de l'ATO sera donc intégré au représentant d'introduction de l' auteur. Nous avons créé l'espace pour l' ensemble de la commande en cours. Comme on peut le voir, il y a un espace pour contenir l'image de l'auteur. Nous devons donc créer un développé distinct pour conserver cette image. Donc, sous l'intro de l'auteur, drab et création d'un div. Et je donne le nom de la classe en tant qu' auteur de l'autre enveloppe à l'intérieur, l'image sera placée. Nous devons placer l'image. Je sélectionne donc l'auteur d'une autre image enveloppée dedans, je cherche une image. Maintenant, à l'aide de Choose Image, je choisis une image dans la ressource, afin que l'image ait été placée avec succès. Nous devons maintenant donner la bonne taille à l' enveloppe extérieure de l'auteur qui contient l'image. Je sélectionne donc l' auteur de l'autre enveloppe, et je donne la largeur de 253 pixels et la hauteur de 253 pixels. Il sera donc à la taille d'un Esquire. Nous devons donner la couleur de fond comme dans notre conception. Je passe donc à l'arrière-plan, je donne la valeur hexadécimale comme chiffre figma design, l'arrière-plan de l'image qui indique que l'auteur est le rap devrait être dans un cercle. Donc, sous la bordure, je donne la valeur sous forme de 100  % dans le rayon. Pour que le cercle ait été créé. Afin de faire l'alignement correctement pour l'image. Je sélectionne Flex sur l'écran. Je l'aligne sur le centre et je le justifie au centre. Mais dans le canevas, nous avons pu remarquer que l'image se chevauche. C'est tellement bon. Nous devons donc ajuster cela. Mais pour établir cela, je passe à la taille sous le trop-plein. Je choisis Hayden. Maintenant, vous pouvez voir dans le canevas que le chevauchement est masqué, que l'image est légèrement un oiseau. Pour le faire descendre sous cette couche, je le sélectionne en l' alignant vers le bas. Nous avons terminé l'autre image. Et ci-dessous, vous trouverez une ligue sur les réseaux sociaux. Pour créer cela, je sélectionne l'enveloppe d' introduction de l'auteur en dessous, je crée un bloc div. Ce développement créera donc l'espace nécessaire pour contenir tous les liens vers les réseaux sociaux. Donnons le nom de la classe en tant qu'auteur, représentant social. Nous devons créer les liens. Donc, avec l'aide de QuickFind, je cherche le lien. Une fois le bloc de liens créé, nous devons ajouter le type d' image de réseau social à inclure dans le bloc de liens. Donc, avec l'aide de Quick Fine. Je cherche une image. Maintenant, sous la ressource, j'utilise le logo Facebook. Nous devons créer l'espacement sur tout ce logo Facebook. Sous l'espacement, je donne la valeur de rembourrage à dix pixels ou moins. J'ai l'impression que l'espacement entre la gauche et la droite n'est pas suffisant. Je donne donc la valeur à 15 pixels. Maintenant, renommons le nom de classe de ce lien en lien social de l'auteur. Le même design s'applique aux deux autres liens de réseaux sociaux. Je duplique donc deux fois le lien social de cet auteur. Maintenant, je remplace l'image par ***** et la troisième par Instagram. Afin de placer le contenu de la première colonne au centre. Je justifie ce contenu auprès du centre. Même si nous faisons de l'ensemble le contenu à aligner au centre. Mais les liens sur les réseaux sociaux ne sont pas centrés. Je sélectionne donc Auto Social Rap, qui contient tous les liens vers les réseaux sociaux. Maintenant, sous la topographie, sous l'elaine, je sélectionne le centre S. Vous pouvez maintenant voir dans le canevas que tous les liens des réseaux sociaux sont alignés au centre. L'espacement entre l'image de l'auteur et le lien du réseau social n'est pas suffisant. Donc, en sélectionnant le souffle social de l'auteur, je donne à la valeur de rembourrage, c' est-à-dire la valeur de rembourrage maximale de 20 pixels. Nous avons terminé le contenu de la première colonne. Passons à la deuxième colonne. Pour ce faire, dans la grille My World, je crée un nouveau blob. Donnons-lui un nom de classe pour ce diblock guise de résumé de la biographie de l'auteur. Il en va de même pour le contenu de la biographie de l'auteur, le représentant est le même que dans la section précédente. Je passe à la section atelier et je sélectionne la section intitulée représentant. Maintenant, je duplique cette section intitulée wrap et je la fais glisser vers la biographie de l'auteur. Le même contenu est dupliqué ici. Nous devons maintenant donner le contenu en fonction de notre conception. En dehors de ces condensations, nous devons ajouter un lien avec une sélection de section intitulée rep. Je crée un lien. Je renomme ce lien en semi-œuvre. Ainsi, en décliquant sur ce lien, nous pouvons voir les œuvres de l'auteur. Nous avons créé ce lien comme nouveau, nous devons donc en modifier la typographie. Maintenant, renommons ce lien en lien professionnel. Nous devons maintenant créer un diblock qui contiendra ce lien. Dans la biographie de l'auteur. Je crée un nouveau bloc. Faisons glisser le diblock, The Work link. Maintenant, placez ce lien de travail dans ce bloc. Nous devons maintenant lui donner un nom de classe pour ce chien de division. Donnons le nom Walk Linked Wrap. Ainsi, en plaçant certains éléments à l'intérieur du diblock, nous avons pu créer l'espacement. C'est-à-dire l' espacement inutile dont nous avions besoin. Alors maintenant, afin de faire de l'espacement entre le paragraphe et le lien un sélecteur, je donne une valeur de rembourrage de 20 pixels vers le haut. Nous avons donc terminé le contenu des deux colonnes. Regardons-le en mode aperçu. Je clique donc sur Publié. Mais lorsque vous survolez le lien, il n'effectue aucune transition. Nous devons donc effectuer la transition vers ce lien. Revenons en arrière. À présent, nous sélectionnons le monde qui joue. Veuillez noter que nous ne sélectionnons pas le World Cling Wrap, sélectionnons simplement le lien. Désormais, dans le non-État, par défaut, l' État y sera. Je passe maintenant à la transition sous le type que je sélectionne s, la couleur du formulaire. Passons de l'État à l'OMS. Comme nous l'avons sélectionné, la transition est une couleur de police. Donc, un autre type de biographie, je donne la couleur de police à la couleur primaire de l'échantillon. Maintenant, voyons si cela fonctionne. Maintenant, dans l'aperçu, nous pouvons voir que ce lien fonctionne parfaitement. Nous avons terminé le contenu des deux colonnes. Dans la prochaine leçon, nous verrons le contenu de la troisième colonne. Passons à autre chose. 18. Section à propos de moi - Partie 2: Jusqu'à présent, nous avons terminé le contenu de la première colonne et de la deuxième colonne de la grille. Dans cette leçon, nous allons maintenant parler de la troisième colonne, à savoir le contenu vidéo. Et nous verrons également comment styliser la troisième colonne. De plus, nous n'avons pas donné couleur d'arrière-plan à l'ensemble de la section, et nous ne l'avons pas stylisée. donc tout ce que nous allons voir dans cette leçon. Plongeons-y avant de nous concentrer sur la troisième colonne Créons le bloc div sous la grille Mon travail. Maintenant, pour le nom de classe de ce journal de division, je vais nous donner du rap vidéo professionnel. Nous devons créer le lien pour la vidéo. Rap vidéo Under the Work. Je crée un blog de liens. Where does link block nous redirigera vers la vidéo. Commençons par le lien factice. Maintenant, dans le bloc de liens, nous devons ajouter une image. Nous allons donc choisir Image. Je sélectionne une image dans la ressource. Nous devons donner la taille appropriée à cette image. Je sélectionne donc ce lien blog. Donc, une autre taille, je donne la largeur de 75 pixels et la hauteur de 75 pixels. Faisons maintenant en sorte qu'il soit flexible depuis l'écran. Alignez cette image au centre et justifiez-la auprès du cento. Dans la conception, nous avons vu une image d'arrière-plan pour ce bloc de liens. Je passe donc à l'arrière-plan et je choisis un bureau qui doit être en cercle. Donc, en dessous du rayon le plus large, je donne la valeur du rayon à 100 % chacun. Je n'ai pas renommé le nom de classe pour ce bloc de liens. Je renomme donc ce bloc de liens en bloc de liens vidéo. Nous devons maintenant lui donner une image de fond. Je choisis donc le clip de travail, le rap. Avec ce sélecteur, je passe à l'arrière-plan, à une autre image et au dégradé. Je choisis la couverture de taille S en cliquant sur le bouton Choisir une image Je sélectionne une image dans la ressource. Et positionnons cette image au centre. Nous devons créer un dialogue pour y placer ce bloc de liens vidéo. Nous devons maintenant donner le nom de la classe pour ce développement. Je donne donc le nom de la classe S video. Je vais conclure que cet objectif développé est uniquement d'aligner ce lien vidéo. Maintenant que la sélection de vidéos est alignée, saisissez. Une autre couche. Je sélectionne le flex sur l'écran l'aligne au centre et je le justifie au centre. Pour que la vidéo apparaisse au centre, je donne la valeur de rembourrage pour cette capture alignée sur la vidéo. Donnons à la valeur de rembourrage 120 pixels en haut et 120 pixels en bas. Nous devons maintenant arrondir l'image. Je sélectionne donc l' enveloppe vidéo sous la bordure. Je donne la valeur à 40 pixels pour le rayon. Nous n'avons pas utilisé la couleur d'arrière-plan pour l'ensemble de ce contenu. Je choisis donc cette pochette de travail de l'EMA. Donc, en sélectionnant cela, je passe à l' arrière-plan sous la couleur, je donne la valeur hexadécimale. Maintenant, je donne la valeur de remplissage en haut à 140 pixels en bas, à 140 pixels à gauche et à droite, je donne la valeur sous forme d'espacement de cent pixels et la gauche et la droite semblent un peu grand. Je change donc la valeur à 80 pixels. Encore une fois, l'arrière-plan a le coin arrondi. Donc, en choisissant See my work wrap, je passe aux bordures et donne un rayon de 40 pixels. Le contenu de la première colonne semble donc être tellement plus proche de la deuxième colonne. Je sélectionne donc la première colonne, c' est-à-dire l'auteur dans Grow Wrap. Et je vais me justifier et choisir vers la gauche. Tout le contenu des trois colonnes a le même espacement, mais dans le design, cela ne lui plaît pas. Laissons donc redessiner ces contenus. Maintenant, je choisis la grille complète, c' est-à-dire la grille mondiale qui se trouve en dessous. Je choisis la grille d'édition. Sous la grille d'édition. Redimensionnons la première colonne. Maintenant, je redimensionne la deuxième colonne. Nous avons maintenant effectué l'ajustement comme dans notre design figma. Publions ceci pour le voir en mode aperçu. En mode aperçu, nous avons pu voir tous les liens vers les réseaux sociaux. Cela ne fait aucune transition. De plus, le lien vidéo ne fait aucune transition. Nous devons donc donner la transition à tout cela. Revenons en arrière avec une sélection de blocs de liens vidéo. Toujours dans le non-État, je passe à la transition et je sélectionne le type de couleur d'arrière-plan. Maintenant, changeons l'état selon lequel nous avons donné la transition vers la couleur d'arrière-plan. Donc, sous le fond et dans la couleur, je choisis comme couleur secondaire dans l'échantillon. Regardons-le en mode aperçu. Pour voir comment fonctionne la transition. Le même processus s'appliquera aux liens vers les réseaux sociaux. Suivez les mêmes étapes pour les liens vers les réseaux sociaux vers, pour obtenir l'effet de transition. Dans la prochaine leçon, nous parlerons la section de l'onglet Licences en deux clics. Et nous verrons également comment rendre les onglets utilisables. Nous verrons dans la prochaine leçon. 19. Section des onglets de licence - Partie 1: Dans cette leçon, nous allons développer la section des licences pour notre site Web. Avant cela, voyons la planification. Comme nous l'avons vu dans les leçons précédentes. Nous utiliserons une section et à l'intérieur il y aura un conteneur. Encore une fois, à l'intérieur du conteneur, nous utiliserons un bloc do pour contenir l'intégralité du contenu. Et à l'intérieur de ce div, nous utiliserons le modèle grec, qui se compose de deux colonnes, alors que la première colonne sera plus petite que la deuxième colonne. Dans la première colonne, nous allons placer une image. Et dans la deuxième colonne, nous aurons le contenu des licences. Et en haut, nous aurons l'onglet avec deux onglets. L'un concerne les licences artistiques et l'autre concerne la Commission. Et sous les onglets, vous trouverez le contenu de la licence avec un titre. Et une partie du paragraphe. Et en dessous du paragraphe, nous aurons les deux parties. C'est une pour la pose Alpha et h. Et la seconde est le contenu de cet alpha. C'est donc la planification que nous allons développer. Passons à son développement. Avant d'entrer dans la leçon. Voyons le modèle de boîte commun, qui sera appliqué à toutes les sections à l'intérieur du corps. Nous devons ajouter une section et fournir le nom de classe approprié pour cette section. Vient ensuite l'espacement pour cette section. C'est-à-dire que nous devons lui donner la valeur de rembourrage supérieure et inférieure. Après avoir noté la section qu'il contient, nous devons ajouter un conteneur et le nom de classe doit être donné pour ce conteneur. Nous pouvons maintenant ajouter l'élément à l'intérieur du conteneur, qui convient à la section nécessaire. Maintenant, avec la sélection du corps, créons une section. Je donne le nom de la classe pour cette section sous forme d'onglet de licence. Dans la section, créons maintenant un condyle. Comme nous l'avons fait dans les leçons précédentes, je vais à nouveau donner le conteneur de classe existant à celui-ci. Nous n'avons pas indiqué de valeur de remplissage pour cette section. Je sélectionne donc la section de l'onglet licence et je donne la valeur du rembourrage supérieur et du rembourrage inférieur à 100 pixels. Maintenant, sous le conteneur, créons un diblock. Donnons le nom de classe de ce diblock en tant que représentant de l'onglet licences, mais tout le contenu de ses licences sera intégré dans cet onglet de licence. Créons une grille sous le robinet de licence, comme nous l'avons vu dans le design, comme nous le savons déjà, qu'elle ne comporte que deux colonnes et une ligne. Je supprime donc une ligne. De plus, la première colonne est plus petite que la deuxième colonne. J'ajuste maintenant la taille de la première colonne. Comme nous devons renommer le nom de classe pour cette grille, cela ne devrait pas affecter l'autre grille, ce que nous avons fait dans les leçons précédentes. Renommons donc cette grille de licences S. Nous avons créé la grille, mais à l'intérieur de chaque colonne, nous devons ajouter le diblock pour en contenir le contenu. Créons donc un div, examinons sous la grille de licence où le bloc D sera placé, par exemple, dans la première colonne. Donnons-lui un nom de classe pour ce bloc de définition comme enveloppe d'image de licence. Maintenant, dans cette enveloppe, recherchez une image à l'aide d'une amende rapide. Et choisissons l' image parmi la ressource. Créons à nouveau un div pour placer l'image à l'intérieur de ce développement. Maintenant, je fais glisser le diblock sur l'image et je place l' image à l'intérieur de ce bloc. Donnons le nom en tant qu'image de licence, car l'image possède un coin arrondi. Donc, en sélectionnant l'image, je vais à la bordure et je donne valeur de rayon de 40 pixels. Maintenant, je renomme le nom de classe de cette image en tant qu'image de licence. Mais la classe existe déjà. Je vais maintenant changer le nom de cette image. Donnons-la donc comme image de bordure de licence. Nous avons terminé la première colonne, nous devons maintenant nous concentrer sur la deuxième colonne. Je choisis donc la grille de licences qui s'y trouve. Nous devons créer un doublon. Donnons le nom de la classe en tant que représentant du contenu sous licence. Nous l'avons vu dans le design. En haut, il comporte deux onglets. Nous allons donc ajouter un onglet en utilisant l'amende rapide, je recherche un onglet. Maintenant, l'onglet a été créé avec trois onglets, mais dans la conception, nous n' avons que les deux onglets. Nous devons donc supprimer l'onglet Ajouter. Maintenant, allez dans le navigateur, cliquez simplement sur les onglets. Nous aurons deux choses. Il s'agit du menu à onglets et appuyez sur le contenu. Le menu à onglets indique quels sont les menus que nous allons proposer. Ce contenu est destiné lorsque vous cliquez sur la première étape, le contenu associé sera affiché en dessous. Nous cliquons sur le deuxième onglet. Le contenu associé sera affiché en dessous. Si nous élargissons le menu à onglets, nous aurons deux liens créer un et essayer. Encore une fois, en élargissant ce champ, nous aurons le bloc de texte. C'est pour renommer cet onglet. Maintenant, je vais styliser l'onglet auquel il est lié. Je choisis donc le barboteur et je choisis le type de Roffey. Je sélectionne la police Poppins, avec un poids de 500, une taille moyenne avec 18 pixels et une hauteur de 1,3 tiret. Changeons la couleur de police. Renommons le nom de la classe pour ce barbotage, S, dabbling. Nous devons maintenant changer la couleur d'arrière-plan de cet onglet. Je passe donc en arrière-plan, je choisis la couleur blanche. Ajustons la valeur de rembourrage supérieure et inférieure pour cela à 20 pixels. Sur les valeurs de remplissage gauche et droite, 40 pixels réels. Faisons le coin arrondi pour cet onglet. Je passe donc à une autre bordure et je donne la valeur du rayon S, 20 pixels. Et donnons le style à cette bordure en tant que solide, puis en donnant la couleur de la bordure en valeur hexadécimale, nous avons terminé l'onglet. Allez-y, passons à celui du robinet. Le nom de classe pour la première étape sera le doublage, c'est-à-dire la classe existante. Ainsi, le style que nous avons appliqué à l'essai sur le nom de la classe sera appliqué à cet onglet, également dans le sélecteur, vous pourriez voir qu'il s'agit d'une nouvelle classe actuelle. La raison de cette classe actuelle est que nous utilisons l'onglet. L'un des onglets sera donc actif. Donc maintenant, la taverne est active. Donc, par défaut, nous avons cette classe actuelle en vert. Nous avons donc pu comprendre que nous travaillons dans cet onglet actif. En bref, si vous voyez cette classe actuelle, vous pourriez comprendre que cet onglet en particulier est l'onglet actif. Nous devons donc définir à quoi doivent ressembler les données lorsqu'elles sont actives. Avec dabbling et cours actuels sélectionnés. Je passe à la topographie et je sélectionne la couleur de police. Je choisis le blanc comme couleur de police. Changeons maintenant la couleur d'arrière-plan pour cette étape. Je vais donc passer à l' arrière-plan et je donne la couleur à la bobine secondaire de l'échantillon afin que nous puissions voir si elle active et que cette couleur sera la suivante. Nous avons besoin de l'espacement entre ces deux balises. Donc, avec la sélection de tap do, je donne la bonne valeur de marge à 20 pixels. La valeur que nous avons donnée sera stockée dans la classe dabbling, la classe tab, en utilisant également cette classe de dabbling. La valeur sera donc également appliquée à cet onglet. Il s'agit donc de créer un espace. La valeur de la marge sera appliquée à cet onglet. C'est aussi la raison pour laquelle elle crée un espace entre Taïwan et le robinet. Renommons ce menu à onglets. Pour l'onglet 1, je nous donne une licence artistique pour le tatouage. Je nous donne une commission sur la notation de l'onglet dont le contenu sera automatiquement créé sous la section des onglets dans le contenu de l'onglet, nous aurons cet appui et pour les onglets correspondants. Alors laisse-moi te montrer. Maintenant que je clique sur l'onglet et l'onglet 1 sur le côté droit, je vais dire des choses ici. Vous pouvez voir qu'il s'agit d'un bouton radio, c'est-à-dire d'un onglet actif. Si je clique sur cet onglet, l'onglet un sera activé avec l'onglet correspondant, et c'est le contenu de l'onglet. Si je clique sur l'onglet en tant qu'onglet actif, les deux premiers seront activés et le bouton d'onglet correspondant sera activé. C'est ainsi que nous allons développer le contenu de cet onglet. Dans la prochaine leçon, nous parlerons du contenu sous licence, voire de la dette. Passons à autre chose. 20. Section des onglets de licence - Partie 2: Dans la section des licences, nous avons terminé la première colonne ainsi que la section onglet, ainsi que la transition. Nous allons maintenant voir à propos du contenu de cet onglet en particulier. Autrement dit, si je clique sur ce robinet de licence artistique, son contenu sera affiché en dessous. Si je clique sur le bouton de commission, le contenu en question sera affiché en dessous. Voyons donc comment nous allons y parvenir. Passons à autre chose. Nous allons développer le contenu de cet onglet dans le navigateur que vous pouvez voir sous le contenu de l'onglet, nous devons appuyer sur panoramique. C'est pour l'onglet 1. à onglet, le contenu de l'onglet est si proche l'un de l'autre, nous devons créer un espacement entre eux. Je sélectionne donc le contenu de l'onglet. Je passe en dessous de l' espacement et je donne la valeur de la marge supérieure à 20 pixels. Maintenant, la sélection du panneau tactile, c' est-à-dire pour l'onglet 1, je vais en faire un coin arrondi. Je vais aux frontières. Je règle la valeur du rayon à 40 pixels. Vous êtes l'espacement pour ce sourd, je passe à l'espacement , puis je donne la valeur supérieure et inférieure. C'est-à-dire pour le rembourrage S, 90 pixels et pour la gauche et la droite, 70 pixels. Changeons la couleur de la bordure correspondante. Je vais donc utiliser une autre bordure et donner la couleur sous forme d'une valeur hexadécimale. Commençons donc à créer le contenu qu'il contient. Sous le bandeau. Pour le premier, je cherche le titre. À l'intérieur. Le titre sera créé et nous allons changer le titre de type 2, H2 et renommer le contenu de ce titre, en répertoriant la typographie correspondante. Donc, selon la typographie, je définis le type de police comme marionnettes. Attendez, S 800, très gras et taille 50 pixels. Et avec la hauteur sous forme de tiret de 1,3. Nous devons changer la couleur de la police. Faites-le sous la couleur, je sélectionne la couleur secondaire. Maintenant, je sélectionne l'option plus de type sous la majuscule. Je choisis la deuxième option. Nous allons maintenant renommer le nom de la classe d' en-tête en tant que titre de contenu. Nous devons maintenant ajouter une description à ce sujet. Donc, sous le volet, je cherche un paragraphe. Le paragraphe sera créé. Maintenant, en dessous du paragraphe, nous devons ajouter des offres dans R pour créer un bloc situé en dessous du paragraphe, je sélectionne la bande supérieure. Alors maintenant, je cherche diblock. Le bloc do sera donc créé. Changeons donc le nom de classe ce diblock au fur et à mesure que Alpha passe et que la barre H est AB. Ainsi, le pourcentage de l'offre et le contenu qui y est associé seront stockés dans ce rat. Maintenant, au lieu de proposer un pourcentage RAB, nous devrons faire des blocs. C'est pour le pourcentage du contenu qui y est lié. Alors, dans un premier temps, créons le premier chien de division. Ce sera dans le cadre de l' offre pour cent H Rap. Donnons le nom de classe pour ce diblock comme enveloppe d'offre. Maintenant, à l'intérieur de cela, nous pouvons donner la valeur en pourcentage afin de l'établir. Cherchons un titre sous cette enveloppe d'offre. Maintenant, le titre est plus grand. Changeons le type de titre en H3. Maintenant, je change le contenu de cette rubrique à 80 % h. Changeons la typographie correspondante. Je vais donc passer sous la topographie et définir la police comme Poppins et le même poids que notre cent boulon et tailles 50 pixels et un tiret hybride 1,3. Maintenant, changeons la couleur de police en couleur principale. Dans la section couleur, nous devons modifier le nom de classe pour cette rubrique. Je donne donc le Rename et je remplace par la pose de la valeur h. Nous n'avons besoin d'aucune valeur de marge pour ce pourcentage. Je mets donc la valeur de la marge à zéro. Nous devons faire en sorte que ce pourcentage soit à l'intérieur de la boîte. Comme nous le savons déjà, la valeur d'un personnage se trouve à l'intérieur de laquelle ils vont s'ancrer. C'est l' emballage de l'offre qui nous permet de définir la taille afin d'obtenir cette boîte. Pour cela, je sélectionne cette enveloppe d'offre et je donne cette valeur de taille 170 pixels pour la largeur et 150 pixels pour la hauteur. Maintenant, je sélectionne le flux l'écran, puis je l' aligne au centre et je le justifie par rapport au centre afin que nous puissions voir que la valeur en pourcentage arrive au centre. Maintenant, la couleur d'arrière-plan doit être modifiée. Pour cela, je passe à l' arrière-plan et je mets la couleur en valeur hexadécimale, comme dans notre dessin, pour en faire un coin arrondi, je passe à une autre bordure et je donne la valeur du rayon au format 30 pixels. Nous avons terminé la présentation de l'offre. Maintenant, à l'intérieur de ce pourcentage d'offre, nous devons y ajouter le contenu qui s'y rapporte. Créons un blog div pour que le bloc soit créé. Donnons-lui un nom de classe pour cela en tant qu' offre de capture de contenu. Nous avons fabriqué l'enveloppe à l'intérieur. Nous devons créer le contenu à cette fin avec une sélection de contenus d' offre intégrés. Je sélectionne le titre. Donnons le type de titre à la couverture 3, et changeons le contenu du titre, c' est-à-dire le contenu du titre. Pour ce qui est de la topographie de ce titre, je choisis la police Poppins et le poids 500 medium. Donnons une taille de 25 pixels et une hauteur de 1,2 tiret. Nous devons maintenant changer la couleur de police en une autre couleur. Je choisis une couleur secondaire. Nous n'avons pas changé le nom de la classe pour cette rubrique. Je choisis donc le titre et je renomme nom de la classe pour le titre en sous-titre de l'offre. Nous avons ajouté le sous-titre et en dessous huit, nous devons ajouter une description. Je sélectionne donc l'encapsulation du contenu de l' offre, qui contient tous les contenus. À l'intérieur. Nous devons créer un paragraphe. Nous avons maintenant créé le paragraphe pour le contenu. Le contenu n'est pas aligné comme dans notre conception, nous devons donc faire le bon alignement. Pour ça. Je sélectionne les quatre poses et chaque respiration en sélectionnant cette offre en pourcentage d'enveloppe. Dans la mise en page, je sélectionne Flex et je l'aligne sur l'expéditeur. pourcentage des deux offres sur le contenu de l'offre est proche l'un de l'autre. Nous devons faire l' espacement entre les deux. Je vais créer l'espacement lors de la préparation du contenu de l'offre. Pour le rembourrage de gauche, je donne la valeur S, 40 pixels. Maintenant, nous avons fait en sorte que l'espacement pour ce phasage du titre du contenu de l'onglet n'est pas bon. Je sélectionne donc le titre du contenu de l'onglet sous l'espacement, je donne à zéro la valeur de la marge pour le haut et le bas. Comme l'espacement entre le paragraphe et pourcentage de rap de l' offre n' est pas du tout suffisant. Je sélectionne donc le pourcentage RAB de l' offre et je donne la valeur de rembourrage maximale à 20 pixels. Maintenant, nous obtenons l' espacement nécessaire pour placer le sous-titre de l'offre en haut. Je donne la valeur de la marge maximale à zéro. Maintenant, je réduis la valeur de la marge inférieure à zéro. J'ai l'impression que le sous-titre et la description sont si proches l'un de l'autre. Je donne donc la valeur de la marge inférieure à cinq pixels. Pour obtenir un petit espacement, nous les faisons. Nous allons le publier pour le voir en mode péruvien. Donc, en mode aperçu, tout va bien pour la section des licences. Nous avons créé le contenu pour la première étape, savoir la concession de licences artistiques. Nous devons maintenant passer au deuxième onglet. Nous avons le même design pour le deuxième onglet. Faites-le sous le contenu de l'onglet, je sélectionne la bande d'onglets pour celle du haut de l'onglet. Nous avons pu voir quelles sont les choses que nous avons développées. Au début, je duplique le titre du contenu de l'onglet. Et je le fais glisser vers le volet tactile, c'est-à-dire pour l'onglet. Ensuite, dupliquons le paragraphe. Et faisons glisser cela vers le robinet pour que l'onglet annexe cette offre en pourcentage de frottement. Et encore une fois, en le dupliquant et en le faisant glisser vers le robinet. Et pour l'onglet correspondant à chaque contenu de l'onglet, un onglet est dupliqué dans l'onglet Maintenant, je vais dire des choses en tapant. Je sélectionne l'onglet pour, c'est-à-dire l'onglet actif. Le contenu de la première étape est un lead dupliqué lors de la deuxième étape, mais pas le style. Afin d'appliquer le style d' un contenu à un seul contenu, nous devons attribuer le même nom de classe. Mais dans le Navigator, nous avons pu voir qu'il comporte deux thèmes différents. Je sélectionne donc le panneau tactile pour celui du haut et je renomme le nom de cette classe pour revenir en arrière. Maintenant, je sélectionne le tap pan pour l'onglet 2 et je donne le nom de la classe en tant que classe existante, c'est-à-dire tap pan. Ainsi, en donnant la classe existante, vous pouvez voir que tout le style est appliqué à l' onglet au contenu. Maintenant, je change le titre de ce contenu , puis je modifie la valeur en pourcentage de celui-ci. Maintenant, publions-le pour le voir en mode aperçu. Voyons maintenant si l'onglet fonctionne correctement ou non. Je clique donc sur l'E-step, le contenu lié à l' onglet change respectivement. Premièrement, devons-nous modifier certains espacements dans cette section sur les licences ? Maintenant, je sélectionne le titre du contenu de l'onglet et je donne la valeur de la marge inférieure à dix pixels pour obtenir l'écart entre la première colonne et la deuxième colonne. Je passe à la grille de licence pour sélectionner la grille complète. Maintenant, sous la grille ADA, j'ajuste l' écart à 35 pixels. Maintenant, avec la sélection de la grille de licence elle-même, alignons-la sur le centre. Nous allons le publier pour voir comment il fonctionne. En mode aperçu, nous avons pu voir tout ce qui concerne la section des licences, c'est Dan Asper dans notre design. Dans la prochaine leçon, nous parlerons de la section des témoignages, qui se compose de deux colonnes. La première colonne contient les titres, et la deuxième colonne affiche tous les commentaires des visiteurs. Nous verrons comment passer le numéro dans la prochaine leçon. 21. Section des témoignages - Partie 1: Dans cette leçon, nous allons parler de la section des témoignages. Voyons maintenant la planification de cette section de témoignages. Dans un premier temps, nous allons niveler la section et à l'intérieur il y aura un conteneur. Et là encore, nous utiliserons un modèle de grille. Cette grille comportera deux colonnes. La première colonne contiendra un titre pour la commande. Dans la deuxième colonne, nous aurons le contenu du témoignage autant que nécessaire pour tout. Même pour le sous-titre et le titre, nous utiliserons un diblock séparé pour le contenu de l'image et du paragraphe. Ici aussi, nous utiliserons un diblock séparé afin que tout puisse être très bien organisé. Nous avons maintenant une idée de la planification. Commençons à le développer. Maintenant, sous le corps, je vais créer une section. Et donnons le nom de la classe pour cette section en tant que section de témoignage. Sous l'espacement, je donne la valeur de rembourrage pour le haut et le bas à 100 pixels. Nous savons déjà que nous allons ajouter un conteneur. Dans une autre section, je vais donner le nom de classe de ce conteneur en tant que conteneur de nom de classe existant avec une sélection de conteneur, ajoutons une grille. Android. Comme nous le savons déjà, nous n'avons besoin que des deux colonnes Je supprime donc une ligne et ajustons l'écart entre ces deux colonnes à 60 pixels. Donnez à la classe le nom de cette grande grille de témoignages. Nous avons créé une grille. Concentrons-nous donc sur la première colonne pour commencer à doubler la première colonne. Maintenant, je dois ajouter le bloc do. Désormais, le nom de classe de cette division sera le titre du témoignage. Nous l'avons vu dans le design. La première colonne contiendra le titre, le style du contenu du titre. C'est la même chose que dans la section précédente. Je passe donc à la section atelier et je sélectionne la section intitulée Wrap, et je duplique cette partie. Passons maintenant au titre du témoignage, car ce sera le titre de notre section de témoignages. Comme nous devons renommer ce titre comme dans notre design en sélectionnant le titre de cette section, je passe sous la typographie, je sélectionne l' option plus de type sous la majuscule. Je choisis la deuxième option. Maintenant, faisons un saut de ligne, comme dans notre conception. Nous avons maintenant terminé la première colonne de cette grille. Passons à la deuxième colonne. Pour cela, je sélectionne la grille de témoignages ci-dessous. Je cherche un bloc de chien. Maintenant, je donne le nom de classe de ce diblock en guise de résumé du contenu du témoignage. Le contenu de cette section de témoignages ressemblera à une commande. Et en dessous, il y aura une image, nom de l'auteur et de la destination, ainsi que la note. Alors maintenant, créons un guillemet en haut. Et en dessous, il y aura une commande. Commençons à le faire. Maintenant, dans le cadre du contenu des témoignages, je suis en train de créer un blog. Donnons-lui un nom de classe pour cet élément de témoignage diblock S. Maintenant, à l'intérieur, nous allons ajouter une image. Choisissez l'image dans la ressource. Nous devons ajouter la commande. Donc, sous le témoignage, j'ajoute un paragraphe. Maintenant, sous la typographie. Je fabrique ce carrelage, fais-le Alec. Maintenant, je donne la couleur de police de ce contenu en valeur hexadécimale en tant que design innovant. Je fais le nom de classe pour ce paragraphe en tant que contenu de témoignage. J'ajuste maintenant la hauteur de ce contenu à 1,6 tiret pour ajouter une image extérieure et le nom de l'auteur. Je crée un div, qui se trouve sous l'élément de témoignage. Je donne le nom de classe de ce diblock en tant que client de témoignage RAB. Nous avons créé l'enveloppe qui contient l'image, le nom de l'auteur et la note. Mais pour que l'image soit ajoutée, nous devons créer un Duplo pour placer l'image. Créons un bloc Do sous le témoignage du représentant du client. donc une image à l'intérieur de ce témoignage et de ce client Nous ajouterons donc une image à l'intérieur de ce témoignage et de ce client. Cherchons une image pour vous ajouter à une partie de la chute technique. La partie suivante n'est pas enregistrée. Donc, à la fin de ce contenu, mais j'ai réenregistré ce choix en choisissant à nouveau la partie Image parce que vous avez ajouté ce clip au milieu, vous pourriez voir le pavage du contenu changer. Donc, s'il te plaît, ignore-le. Concentrez-vous uniquement sur le choix de l'image. Alors maintenant, je choisis l' image à partir de l'acide. Pour arrondir l'image. Je vais aux frontières et je donne la valeur du rayon 200. Le nom de classe de cette image en tant qu'avatar du client. C'est donc la partie que nous avons manquée. Revenons à la normale pour la poursuite du développement. Dans le témoignage glycine, nous devons ajouter le contenu du client. Nous avons l'image du client et les détails du client. Donc, pour les informations sur le client, j'ai créé un blog et nommé le bloc do en tant que détails sur le client encapsulés dedans pour donner le titre du nom du client que j'utilise. Le titre est renommé au nom de l'auteur pour modifier la typographie. Choisir la police comme Poppins, le poids comme plusieurs centaines de bols. Et la taille sera de 20 pixels et la hauteur sera de 1,2 tiret. Je choisis la couleur de police comme couleur secondaire dans l'échantillon. Maintenant, je donne le nom de classe pour cette rubrique puisque Klein doit donner la démission de cet aveugle J'ajoute un titre sous la rampe détaillée du client. Soit le titre de type B H Phi. Maintenant, je donne la désignation de renonciation. Pour créer le style de cette rubrique, j'utilise une autre typographie. Je change la police en Poppin, en 600, en gras semi-gras , et la taille en 18 pixels avec un tiret de 1,2 de hauteur. Pour donner la couleur de police correspondante, je donne la valeur hexadécimale de notre dessin figma Le poids de ce titre semble être très gras. Je dois donc en modifier le poids. Changeons le poids en moyen. Maintenant, je renomme le nom de classe pour cette rubrique en job client. Pour que le nom du client soit plus proche de l'image. Je sélectionne le nom du client et je donne la valeur de la marge à zéro en haut et à zéro en bas. Le nom du client et la désignation de la renonciation à se rapprocher. Je sélectionne donc ce poste client, la valeur de la marge inférieure est ajustée à zéro et la valeur de la marge supérieure est ajustée à cinq pixels. Dans la prochaine leçon, nous développerons le reste du design. Passons à autre chose. 22. Section des témoignages - Partie 2: Nous avons terminé le développement de la première colonne. Et également dans la deuxième colonne, nous avons créé un contenu de base, ce qui n'est pas nécessaire. Dans cette leçon, nous verrons quel est le plus grand nombre de mises en forme qui doivent être effectuées dans le contenu de la deuxième colonne. Commençons à le développer. Le nom et la désignation de chaque client sont en baisse . Ensuite, nous devons ajouter la note du client. Donc, sous la ligne des témoignages, j'ajoute un bloc do. Maintenant, je donne le nom de classe pour le diblock en tant que Klein Rating Wrap. Maintenant, j'ajoute une image de l'acide. Maintenant, dans la liste des évaluations des clients, j'ajoute un titre. Supposons que le titre de type B couvre six. Je remplace le contenu du titre par la valeur d'évaluation. Pour modifier la typographie de cette valeur d'évaluation, je passe par la typographie, choisissant le type de police Poppins, poids avec le manche phi moyen et la taille avec 18 pixels, puis la hauteur sera de 1,2 valeur d' évaluation du trait d'union qui, pour être proche de l'image de leur cœur, j'ajuste la valeur de la marge de celle-ci. Je change la valeur supérieure de la valeur inférieure à zéro. Changeons le nom de classe pour cette rubrique en tant que valeur de notation. Pour placer la valeur d'évaluation à côté de l'image du cœur, je choisis la prise en compte de l'évaluation du client. Je sélectionne l' oxygène sous forme de flocons pour obtenir l'espacement entre l'image et la valeur. Avec la sélection de la valeur d'évaluation, je place le rembourrage sur dix pixels ou vers la gauche pour que les informations sur le client figurent sur une seule ligne. Je sélectionne un plan de témoignage. Ensuite, choisissons Flex dans l'écran. Alignons-le au centre. Et dans le cadre de la justification, je choisis l'option : l'espace entre les articles sera réparti uniformément pour que l' image du client, le nom du client et la destination soient plus proches autre, je vais créer un diblock et placer cette image de Kline et les détails du client dans les blocs div afin de pouvoir effectuer l'ajustement en fonction de notre conception. Maintenant que je sélectionne un client de témoignage en dessous, je crée un diblock. Maintenant, je fais glisser le diblock vers le haut. Maintenant, je place l'image client rap et Klein Detail Wrap dans ce blog de division. Maintenant, je vais donner le nom de classe de ce diblock en tant que détail Klein. Avec les coordonnées du client sélectionnées. J'utilise Flex pour l'affichage sous le schéma et je l'aligne à la même dose. Pour obtenir l'espacement entre l'image et le détail, nous devons indiquer la valeur de rembourrage située à gauche de l'enveloppe détaillée du client. Donc, avec la sélection de Klein Detail Wrap pour la valeur de rembourrage gauche, je nous donne Duan De pixel. L' espacement complet entre les éléments du témoignage n'est pas suffisant. Donc, avec la sélection de l'élément de témoignage, je donne une valeur de rembourrage de 70 pixels sur tous les côtés pour donner la couleur de fond à cet élément de témoignage, je passe à l' arrière-plan en donnant la valeur hexadécimale de la couleur comme impliquant mon dessin. Pour obtenir le coin arrondi, je passe sous les bordures et donne la valeur du rayon à 40 pixels. L'espacement entre le contenu du témoignage en haut et en bas. Je passe en dessous de l' espacement et j'ajuste la valeur de remplissage aux 30 premiers pixels. Pour une valeur de rembourrage inférieure de 30 pixels. Mais nous avons besoin d'un espacement plus important en haut. Encore une fois, je vais changer la valeur de remplissage à 40 pixels afin d'agrandir le contenu Je passe sous la topographie et je change la taille à 28 pixels, la hauteur à 1,4 tiret. Voyons si tout fonctionne bien ou non. Pour ce faire, je vais le publier pour que tout se passe bien. Nous allons ajouter d'autres commentaires juste en dessous. Nous devons donc donner l'espacement approprié entre le début d'une sélection d'éléments de témoignage. Je donne la valeur de la marge inférieure à 60 pixels. Dans la prochaine leçon, nous verrons quelles sont commandes les plus nombreuses en dehors de la première. Nous travaillerons également au style de chacune des commandes, ainsi qu'au design de la salle de bain. Allons-y. 23. Section des témoignages - Partie 3: ce jour, nous avons terminé le titre et le sous-titre de la section des témoignages dans la première colonne et avons développé le design de commande dans le deuxième codon. De plus, nous développerons la conception de la commande, car la perte se trouve dans la première commande. Ce sera une image de fond. Voyons comment procéder. Comme nous le savons déjà, le même design suivra pour les prochains articles. Je sélectionne donc le témoignage et je le duplique deux fois. Maintenant que j'ai sélectionné le deuxième élément de témoignage ainsi que la classe d'objets de témoignage existante, j'ajoute une autre classe avec l'élément nominatif pour différencier le premier du second, je dois changez la couleur de fond de celui-ci. Je vais donc choisir un autre parcours. Je suis en train de changer de couleur. La couleur du contenu doit correspondre à la couleur de fond. J'ai sélectionné le contenu du témoignage ainsi que le nom de la classe de contenu de témoignage existante Je crée un autre nom de classe, du client au contenu. Je suis en train de changer la couleur de ce contenu. Comme dans notre design figma, l'image du deuxième élément de témoignage doit être modifiée. Je sélectionne donc cette image client et je remplace l'image. Ensuite, pour modifier la désignation de cette Kline, je sélectionne ce poste de réclamation même temps que cette classe existante. Créons une nouvelle classe avec le nom client to job. Je change la couleur comme la couleur du contenu. Ensuite, j'ai changé le nom du client pour que maintenant la désignation de ce client change également le design. Passons maintenant au témoignage. En plus de l'élément de témoignage existant sur le nom de la classe, j'ajoute une nouvelle classe. Point trois. Changeons la couleur de fond de ce troisième témoignage. Point deux. Comme nous le savons déjà, le contenu de ce témoignage doit être modifié en fonction de l'image de fond. Je sélectionne donc le contenu du témoignage et je crée un nouveau nom de classe en plus de celui existant en tant que contenu Klein Three. Maintenant, sous la topographie, une couleur uniforme dans la valeur hexadécimale suffit. Madison. Maintenant, je sélectionne le travail d'escalade en plus de celui qui existe déjà. Je suis en train de créer une autre classe qui s' appellera Klein Three Job. Maintenant, je donne la couleur comme la couleur du contenu. Maintenant, je dois remplacer l'image, donc je sélectionne le client mh. Je vais le remplacer par le design. Changeons le nom de cette ligne ainsi que la désignation de ce client. Publions ceci pour voir à quoi il ressemble. Maintenant, en faisant défiler la fenêtre que la section de titre disparaisse, nous devons faire en sorte que la section de titre soit collée dans la fenêtre. Revenons en arrière pour développer celui-ci. Pour sélectionner la section de titre. Je passe sous le représentant du titre du témoignage, et je sélectionne la section intitulée rub, ainsi que la section existante sur le nom de classe intitulée wrap. J'ajoute une nouvelle classe avec le nom sticky title. Maintenant, je passe sous la pollution plutôt que dans l' électricité statique, je choisis Sticky. Donc, en faisant défiler le site Web, ce titre, mais nous allons nous en tenir à la fenêtre. Et maintenant, je change la valeur à zéro pour les trois côtés. Je passe maintenant à la couche et choisis le bloc intégré sur l'écran. La hauteur et la largeur seront donc ajustées en fonction du contenu à l'intérieur. Maintenant, en faisant défiler la page, nous pouvons voir que cette section de commentaires s'en tient au canevas. Nous allons le publier pour vérifier s'il fonctionne ou non. En mode aperçu, nous avons pu voir cela fonctionner, car nous pensons que l'espacement entre le haut de ce titre n'est pas suffisant en apparence. Il est si proche de la barre de recherche. Nous devons donc créer l'espace au sommet. Maintenant, je sélectionne le titre du témoignage. Maintenant, sous l'espacement, je donne la valeur de la marge supérieure, soit 20 pixels. Faisons le petit espacement pour ce contenu. Et je donne la valeur de la marge, c' est-à-dire une valeur de marge supérieure de 20 pixels, pour que la section de titre reste collée à la fenêtre avec un espacement approprié. En haut, je sélectionne la section intitulée Wrap. Je vais accéder à ce poste. Maintenant, pour la valeur de la position la plus élevée, je nous donne 40 pixels. Publions ceci pour voir à quoi il ressemble. Donc, pendant que je fais défiler cette page, nous pouvons voir que ce tube de titre colle à la fenêtre avec un espacement approprié en haut. Nous avons fait tout le nécessaire pour la section des témoignages. Ajoutons un arrière-plan et donnons la taille à la couverture. Et mettons la cohésion au centre de nos préoccupations. Nous n'avons besoin d'aucune vignette, donc je n'en sélectionne aucune. Alors maintenant, choisissons l'image de fond correspondante. Nous avons donc ajouté l'image de fond, publions-la pour la voir en mode aperçu. Dans le mode précédent, nous pouvions voir l'image de fond et la commande des clients, ainsi que le post-it et l'exèdre, tout va bien. Nous avons donc terminé la section des témoignages avec succès. Dans la prochaine leçon, nous parlerons la section des prix de ce site Web. Voyons voir à ce sujet. 24. Section des prix - Partie 1: Dans cette leçon, nous allons voir la section sur les prix. Maintenant, dans le design, nous pouvons voir que nous avons un titre en haut, c' est-à-dire le sous-titre et un titre. Et juste en dessous du titre, nous utiliserons un modèle de grille composé de deux colonnes car les conceptions des bateaux sont similaires. Permettez-moi donc d'expliquer la première colonne elle-même. Dans cette section de tarification, nous avons la version gratuite et la version pro ainsi que les prix. Dans la première colonne, dans le coin supérieur gauche, se trouve le titre. Il en va de même pour la version pro 2. Et juste en dessous de ce titre, nous aurons un autre débloc avec les titres, la liste des éléments et un bouton. Comme nous avons pu le constater, cette liste d'articles le blog chevauche son diblock parent. Dans cette leçon et dans les leçons à venir, nous verrons comment nous allons développer ce design. Commençons à le développer. Avant d'entrer dans la leçon. Voyons le modèle de boîte commun, qui sera appliqué à toutes les sections à l'intérieur du corps. Nous devons ajouter une section et fournir le nom de classe approprié pour cette section. Vient ensuite l'espacement pour cette section. C'est-à-dire que nous devons lui donner la valeur de rembourrage supérieure et inférieure. Après avoir noté la section qu'il contient, nous devons ajouter un conteneur et le nom de classe doit être donné pour ce conteneur. Nous pouvons maintenant ajouter l'élément à l'intérieur du conteneur, qui convient à la section nécessaire. Maintenant, je note la section sous le corps et je donne le nom de la classe comme section de tarification. Et pour ce qui est de l'espacement, je donne la valeur de rembourrage en haut et en bas à 100 pixels. Et maintenant, dans la section de sélection des prix, nous allons ajouter un conteneur. Donnons-lui le conteneur de classe existant. Dans le design que nous avons vu avec un titre en haut, comme dans la section galerie, nous avons un titre similaire à notre design. Donc, dans le navigateur, je sélectionne la section intitulée rep. Maintenant, je duplique et je le fais glisser sous la section des prix, qui se trouve également sous le conteneur. Tout le style sera hérité de la section des prix. L'une des principales choses que nous devons faire est de changer le titre et le sous-titre. Maintenant, à l'intérieur du conteneur, nous allons créer un diblock. Ecrivez qu'il contient la grille. Après avoir créé un diblock. Donnons-lui le nom de la classe. Dans le cadre du représentant des prix, nous allons ajouter une grille. Nous n'avons besoin que des deux colonnes. Je supprime une ligne. Renommons la classe de cette grille en grille de tarification. Dans un premier temps, nous allons développer la première colonne. Ainsi, dans le cadre de la grille de tarification, nous créons un nouveau bloc. Laissez le nom de la classe être l'article de tarification. Dans l'article tarifaire, nous ajouterons un titre une liste d'articles et les boutons. Nous avons donc créé l'espacement correspondant avec le nom de l'article tarifaire. Donc, sous l'élément tarifaire, nous créons un diblock. Et en utilisant le nom de la classe comme titre de tarification. Nous avons suffisamment d'espace pour conserver le titre, le prix. Nous devons maintenant ajouter un titre sous le représentant du titre de tarification, et un autre bloc D est créé. Ensuite, je donne le nom de la classe comme titre de tarification. Pour ajouter le titre sous le titre du prix, nous ajoutons un titre. Donnons le type de titre H2. Maintenant, je change cette rubrique comme dans notre design. Nous devons maintenant donner le prix. Donc, sous le titre de la tarification, je note et dans les autres diblock, je donne le nom de la classe sous forme de liste de prix. Maintenant, avec la sélection de l'enveloppe de prix en dessous, nous allons créer une rubrique. Maintenant, j'ai choisi le type de titre comme le fait la haie. J'ai donné la valeur de prix de notre conception Changeons cette épigraphie pour cette tarification. Voyons le titre du nom de la classe sous forme de prix. Une autre marée. Nous avons créé un paragraphe, désolé de ne pas l'avoir affiché. Je vais maintenant renommer cette classe de paragraphe en tant que durée de prix. Maintenant, je clique sur cette rubrique. Nous allons maintenant changer le nom de la classe pour cela. Qu'il s'agisse d'une date de prix pour que le titre apparaisse dans le coin gauche et le prix dans le coin droit. Vendons-le au prix de Tidal Rep. Maintenant, sous la mise en page, choisissons Flex depuis l'écran. Maintenant, je choisis l'espace entre dans le justifié et dans le Canvas. Nous pouvons voir qu'il est correctement aligné. J'en viens maintenant au prix Tidal pour que le titre du prix et le paragraphe juste en dessous soient proches l'un de l'autre. Je passe en dessous de l' espacement et je donne la valeur de la marge inférieure à zéro. Nous avons maintenant terminé le titre des prix. Juste en dessous, nous devons ajouter une liste avec la sélection de l'élément croissant. Créons un diblock. Maintenant, je donne le nom de la classe en guise de résumé de la liste de prix, et à l'intérieur, nous devons ajouter le titre de la liste. Pour cela, nous devons créer un autre diblock. Ce sera en guise de résumé avec la sélection de la liste de prix, nous allons créer un diblock. Maintenant, changeons le nom de la classe en tant que représentant du titre de l'annonce. Pour donner du contenu au titre, il faut ajouter le titre. Maintenant, je choisis le type de titre pour en couvrir trois. Maintenant, j'ai donné un titre à cette liste, puis je vais passer à la topographie. Nous devons modifier le nom de classe pour cette rubrique. Soit le nom de la classe que nous indiquons le titre. Dans le titre de l'annonce, nous avons le contenu. Et aussi l'un des emoji. Je choisis un porte-brides. Donc, dans ce RAB, nous allons ajouter l'image, donc en la sélectionnant, je cherche une image. J'ajoute une image d'élément. J'ai choisi l' image à partir de l'acide pour aligner le titre de l'annonce sur une ligne. Je sélectionne le représentant du titre de l'annonce et je sélectionne Flex sur l'écran. Maintenant, je choisis l'alignement central , puis l'espace entre les deux, justifié. Nous savons que vous avez besoin d'un espacement entre les marges à l'intérieur du titre de l' annonce. Je sélectionne donc le titre de la liste. Je donne à cette valeur de marge supérieure et inférieure un pixel. Dans le design, nous avons une ligne sous le titre de l'annonce. Donc, pour ce qui est de la sélection d'un film marécageux, je passe sous les bordures et je choisis la bordure en bas. Laissons cet enfant être solide. Et je donne la valeur hexadécimale la couleur du dessin de la figma. Comme la ligne est si proche du titre de l'annonce. En sélectionnant le représentant du titre de l' annonce, je donne la valeur de remplissage inférieure à 15 pixels et également la valeur de la marge, c' est-à-dire la valeur de la marge inférieure à 15 pixels. Le reste du développement sera poursuivi dans la prochaine leçon. 25. Section des prix - Partie 2: Dans cette leçon, nous aborderons le développement ultérieur dans la première colonne d'une journée de travail. jour, nous avons créé À ce jour, nous avons créé un titre pour cette tarification en haut, et juste en dessous, nous avons créé une grille à deux colonnes. Comme dans la première colonne, nous avons créé do block pour contenir le contenu de la première colonne. Et également au sommet, nous nous sommes développés avec la marée montante. Et en dessous, nous avons développé le titre de l'annonce en même temps que le MOG. Dans cette leçon, nous allons ajouter une liste des articles nécessaires pour cette section de tarification ainsi qu'un bouton. Passons à leur développement. Nous devons maintenant ajouter une liste d'articles. Donc, pour créer cela, nous devons ajouter un diblock contenant les éléments de la liste. Donc, dans le cadre de la liste de prix, je crée un div et je donne le nom de la classe sous forme de liste de prix. Avec la liste de prix sélectionnée, je recherche une liste. La liste est donc ajoutée en dessous. Maintenant, dans le canevas, vous pouvez voir que l'élément de liste est ajouté avec une liste contextuelle de paramètres. Par défaut, le type est sélectionné en tant que commande. Nous n'avons pas besoin de balles. Je choisis donc le style S, sans puces. Nous allons maintenant ajouter la liste des éléments à cette liste. Maintenant, je sélectionne la première liste, et maintenant je donne liste le contenu de l'élément de liste tel que dans le design. La typographie de cet élément de liste doit être modifiée. Pour cocher la case dans le coin gauche de cet élément de liste. Je vais passer en arrière-plan. Je choisis Image et dégradé. Que la tuile soit nulle. Choisissons la taille à contenir. J'ai maintenant choisi l'image parmi l' actif stigmatisé. J'y vais Et à la position et je choisis le coin central gauche, vous obtenez l'espacement entre le crochet et l'élément de la liste. Je passe en dessous de l'espacement. Je donne la valeur 40 pixels dans le remplissage de gauche pour changer la couleur de police de cet élément de liste. Je passe à un autre type de graphique V. Maintenant, Je passe à un autre type de graphique je donne la couleur dans la valeur hexadécimale à pour obtenir l' espacement des marges pour cet élément en sélectionnant le premier élément de la liste, je donne la valeur de la marge supérieure à dix pixels. En bas, la valeur est de dix pixels. Dans le navigateur, nous pouvons voir par défaut que les deux éléments de liste sont ajoutés. Mais nous avons déjà conçu le premier élément de liste. Je supprime donc l'élément de liste de tâches existant. Maintenant, je le duplique pour le prix. Maintenant, je passe à l'arrière-plan. Maintenant, je choisis la taille à personnaliser ici, c'est-à-dire plus d'espacement entre le crochet et le contenu de l'élément de liste. Je dois donc modifier la valeur du rembourrage en la sélectionnant. Je passe à l'espacement et je donne la valeur à 20 pixels. Mais ils sont si proches l'un de l'autre. Laisse la valeur bêta D pixel. Maintenant, je sélectionne le premier mot du deuxième élément de la liste , puis je modifie l'étendue informatique. Je passe à la typographie. Je choisis le poids 700, la couleur vive comme couleur primaire. Je change le nom de la classe pour ce texto Disband en Pricing Highlight. Maintenant, je vais au Navigator. Encore une fois. Je duplique cet article de liste pour le prix. Dans le Canvas, j'ai changé. Ou le contenu de cet élément de liste. Si nous concentrons le style sur un élément de la liste, ce style sera appliqué aux autres éléments de la liste. Changeons la valeur d'espacement pour cet élément de liste. Je sélectionne donc le premier élément de la liste. Maintenant, je passe en dessous de l'espacement. Je donne une valeur de marge de 30 pixels. Je choisis le deuxième élément de la liste. Maintenant, je fais la valeur de la marge qui est d' environ une valeur de marge de 30 pixels. Ces valeurs seront donc appliquées aux autres éléments de la liste. Fais. Je passe maintenant à l'élément de la liste des défauts. Je choisis l'illustration plus neuf. Je le remplace par texte en span. Maintenant, je donne le nom de la classe pour ce texte Japan, comme indiqué sur les prix. Nous avons terminé l' article de liste et le mini-article. Nous devons ajouter un bouton. Avant d'ajouter un bouton, nous devons ajouter un bloc, qui se trouvera sous le représentant de la liste de prix. Maintenant, je donne le nom de la classe pour cette enveloppe de boutons de tarification Diblock S. Je sélectionne donc ce bouton de tarification. Maintenant, je cherche un bouton. Cet élément sera donc créé sous cet élément. Maintenant, je donne le nom de classe de ce bouton en tant que bouton de marque, qui est le bouton de classe existant. Le style du bouton de transplantation sera donc appliqué à ce bouton. J'ajoute maintenant le bouton de tarification d'une autre classe ainsi que le bouton de transplantation de classe A. Dans la conception, nous avons vu que ce bouton est occupé sur toute la largeur. Je prends une autre taille. Je donne la largeur à 100 %. Faire en sorte que le contenu de ce bouton soit au centre. Je passe sous la topographie et je l'aligne au centre. Maintenant, j'ai changé le contenu de ce bouton en S. C'est gratuit. Changeons maintenant la couleur de cette bordure. Je passe donc sous les bordures et change les couleurs avec la valeur hexadécimale. Dans la prochaine leçon, nous parlerons du développement supplémentaire et du style nécessaire pour la section des prix. Passons à autre chose. 26. Section des prix - Partie 3: Dans cette leçon, nous allons terminer cette section de tarification en mettant forme le contenu de la première colonne et le contenu de la deuxième colonne. Et nous allons également voir comment faire en sorte que la liste des éléments à superposer. Commençons par le développer. Dans le design que nous avons déjà vu, il y a une couleur de fond pour l'article tarifaire. Donc, dans le navigateur, je sélectionne l'élément tarifaire, le bloc, et je passe à l'arrière-plan. Maintenant que j'ai donné la valeur de couleur en hexadécimal dans le canevas, nous pouvons voir que tout le contenu est aligné à gauche. Nous devons faire l'espacement sur tous les côtés. Je passe donc à un autre espacement. Maintenant, je considère que la valeur ou le chien de la reliure est vide, mais cela ne semble pas aussi bon. Je passe donc à 60 pixels et laisse la valeur inférieure être de 60 pixels. Maintenant, je donne la valeur de remplissage gauche à 70 pixels. Cela semblait être un endroit propice à la bonne interdiction. Fais. Ensuite, pour faire les coins arrondis, je passe à une autre bordure. Maintenant, je donne la valeur du rayon à 40 pixels. Nous devons maintenant donner la couleur de cette liste de prix. Je sélectionne donc cette liste de prix, pour un autre contexte. Je choisis la couleur comme lumière blanche. Encore une fois, utilisez la valeur du rayon comme 40 pixels et autres ordres. Comme nous avons pu le voir clairement, l'espacement n'est pas approprié. Je passe donc à l'espacement. Maintenant, je donne la valeur du haut et du bas du rembourrage sous forme de pixel xy. Et 50 pixels pour la gauche et la droite. Pour obtenir l'espacement entre le titre de la tarification et la liste de prix. Je sélectionne le wrap de la liste de prix. Si je donne la valeur de la marge en haut, nous pouvons ajuster l'espacement. Je donne donc la valeur de la marge supérieure à 40 pixels. Maintenant, je sélectionne ce bouton pour obtenir l'espacement entre les éléments de la liste et le bouton. Donnons la valeur de rembourrage pour cette enveloppe de boutons à 40 pixels en haut. Nous allons le publier pour voir à quoi il ressemble. Nous avons pu constater que l'espacement entre cet article tarifaire et le contenu du titre n'est pas suffisant. Je vais utiliser le navigateur, je sélectionne la saisie des prix. C'est tout. Donnons la valeur de rembourrage en haut à 60 pixels. Dans l'article tarifaire. J'ai l'impression que c'est un peu plus d'espace en haut. Avec la sélection de l'article tarifaire, je donne la valeur de rembourrage en haut à 40 pixels. Encore une fois, je vais ajuster la valeur de la marge pour l'encapsulation de la liste de prix. Maintenant, j'ai donné la valeur 50 pixels en haut. Revenons à ceci, la valeur de la marge pour l'élément de liste. Maintenant, je donne la valeur de la marge supérieure 35 pixels et la valeur de la marge inférieure à celle de I pixel. Nous avons effectué le développement nécessaire pour la section sur les prix dans la première colonne. Le même design est suivi pour la deuxième colonne. Je vais donc dupliquer cet article tarifaire pour une fois. Ainsi, cet article dupliqué sera automatiquement placé dans cette deuxième colonne pour obtenir l'écart entre la première colonne et la deuxième colonne, choisissant la grille de prix. Maintenant, sous la grille d'édition, donnons la valeur de l'écart à 50 pixels. Maintenant, je dois modifier ce contenu dans la deuxième colonne, comme dans notre design. En ce qui concerne la liste des prix, nous avons deux autres articles de liste. Donc, dans le navigateur avec la sélection de l'élément de liste, je le duplique deux fois. Et nous devons également modifier l'emoji dans la deuxième colonne, comme dans le design. Je sélectionne donc l'image. Je vais maintenant remplacer l'image de la ressource. Publions ceci pour voir à quoi il ressemble. Nous avons fait tout ce qui était nécessaire pour la section des prix. Ensuite, nous devons faire le style en fonction de notre design. Comme dans le design, nous avons vu que l'élément de la liste chevauchait son parent. Mais si toute la partie du diblock est statique, cette conception ne peut pas y être implémentée. Le blog du parent doit donc être interdépendant. Je vais donc choisir la section des prix et définir sa position par rapport à l'élément parent immédiat de cette liste de prix est l'article de tarification. Nous devons donc définir la position comme étant liée. Passons maintenant au résumé de la liste des prix. Réglons maintenant sa position S absolue. Dans le Canvas, nous avons pu voir cette liste de prix. Le rap est libre d' ajuster sa position et il sera également un lit dans cet article tarifaire. La principale raison de changer la position en position absolue et relative est que cela n'affectera pas la position des autres éléments ni leurs propriétés. Comme nous pouvons ajuster librement la position en fonction de nos besoins. Et aussi cet article tarifaire occupe de la place en fonction du contenu qui s'y trouve. Afin de respecter sa taille selon notre design, je passe en dessous de la taille et fixe la hauteur minimale à 600. Vous pouvez maintenant le voir ajuster sa taille sans affecter la position de l'élément de la liste. Afin de placer la liste des prix au centre sous la position, je vais m'ajuster à partir d'Otto. Maintenant, je règle la pollution de gauche à 8 % chacune et la position de droite à 8 % H. Donc, selon la valeur qu'elle a ajustée au centre, la hauteur de ces articles de tarification semble un peu faible. Donc, en dessous de la taille, je vais leur donner une hauteur minimale de 700 pixels. Afin de mettre en évidence cette liste de prix en arrière-plan, nous devons définir l'ombre, c' est-à-dire l'ombre encadrée. Je vais donc passer dans l'ombre car nous avons besoin d'une boîte en dehors de cette liste. Donc, par défaut, cela a été dit à l'extérieur, nous ajustons uniquement l' angle de l'ombre. Et l'effet flou, dont j'ai besoin d'une autre couleur. J'en ajuste l'opacité jusqu'à ce que je ne sois pas satisfaite. Encore une fois, je clique sur les ombres de la case, j'ajuste l'angle de flou. Delight se sent satisfait. Je vais maintenant le publier pour le voir en mode aperçu. Nous avons donc tout fabriqué, comme dans notre design. Pour le bouton, nous avons utilisé la classe existante. Le style que nous avons donné à cette classe sera donc hérité ici. Fais. C'est pourquoi vous pouvez voir cet effet de transition de ce bouton. Enfin, nous avons terminé la section sur les prix et chaque jour, dans la prochaine leçon, nous parlerons de la section blog. À la prochaine leçon. 27. Section du blog - Partie 1: Dans cette leçon, nous allons développer la section blog. ai juste besoin pour notre site Web. Voyons voir la planification. Dans un premier temps, nous allons créer une section puis un contenant sous les médicaments, qui se trouvent tous en ville. Dans un premier temps, nous aurons le titre qui consiste en un div. Et à l'intérieur, il y aura un titre et un sous-titre. Et encore une fois, juste en dessous du titre, il y aura un div à l'intérieur. Nous utiliserons la liste des collections. C'est-à-dire que nous utiliserons le CMS. Le style que nous allons créer dans un article sera affecté sur les autres articles. De plus, nous n'allons pas le modifier séparément. Nous allons simplement obtenir le contenu du CMS, c' est-à-dire du système de gestion de contenu. Ainsi, toutes les données relatives au blog seront extraites du cmos. C'est pourquoi nous utilisons la liste des collections. Revenons donc au design. Comme vous pouvez le voir dans chaque article, il y a une image dans le coin gauche. Et dans le coin droit, nous avons le titre du blog. Et en dessous, il y a une date de publication de ces blogs, bien qu'il s'agisse d'un extrait de ce bloc. Et encore une fois, nous en avons besoin. Ce sera un moteur de lecture pour rediriger vers le blog. Le même design, une place pour les autres objets de la collection. Vous avez maintenant quelques idées sur la façon dont nous allons nous développer. Voyons comment nous allons y remédier. Avant d'entrer dans la leçon. Voyons le modèle de boîte commun, qui sera appliqué à toutes les sections à l'intérieur du corps. Nous devons ajouter une section et fournir le nom de classe approprié pour cette section. Vient ensuite l'espacement pour cette section. C'est-à-dire que nous devons lui donner la valeur de rembourrage supérieure et inférieure. Après avoir créé une section à l'intérieur, nous devons ajouter un conteneur et le nom de classe doit être donné pour ce conteneur. Nous pouvons maintenant ajouter l'élément à l'intérieur du conteneur, qui convient à la section nécessaire. Dans un premier temps, sous le corps, nous allons créer une section. Donnons-lui un nom de classe pour cette section de blog de la section S. Créez maintenant le conteneur de moins huit et sélectionnez le nom de classe existant pour celui-ci. Nous devons ajouter le titre de cette section du blog. Nous avons également créé les titres des sections précédentes. Je suis allée dans la section des services et je la duplique, la section intitulée Wrap. Et ils ont fait glisser cette section intitulée wrap sous le conteneur dans la section blog. Vous pouvez donc maintenant modifier le contenu de ce titre en tant que genou. Nous ne nous avons pas donné d'espacement pour la section dans un premier temps. Maintenant, je sélectionne cette section de blog. Je donne une valeur de rembourrage de 100. En haut et en bas. Je sélectionne le contenant situé en dessous. Nous allons créer un diblock. Donnons le nom de la classe pour ce do block S, l'encapsulation du contenu du blog. À l'intérieur de cette enveloppe contenant le contenu du bloc, nous allons ajouter une liste de collections. Je sélectionne le CMS, c' est-à-dire le système de gestion de contenu. Ici, je sélectionne la nouvelle collection, qui se trouve dans le coin supérieur droit. Maintenant, dans la fenêtre, vous pouvez voir les modèles de collection, les paramètres de collection, les champs de collection. Donc, par défaut, nous avons les modèles ici. Nous allons créer un bloc. Je sélectionne donc comme article de blog. En cliquant sur le billet de blog, les champs qui y sont associés seront automatiquement créés. Juste en dessous des champs de collection. Vous pouvez voir dans le nom de la collection l'article de blog est plus volumineux et que dans l'URL de la collection, le message est créé. Par défaut, nous aurons les informations de base forme de nom et dormions en dessous. Ou il y aura des champs personnalisés dans lesquels nous pourrons personnaliser nos champs. Je n'ai pas besoin de ces longs métrages, donc je sélectionne les séances et je les supprime. De plus, je n'ai pas besoin de ces champs de couleur, donc je sélectionne les paramètres et je les supprime. Outre les champs existants, j'ai besoin d'un autre champ. En sélectionnant le champ d'ajout. Nous avons pu voir les nombreux types de champs. Ici. Je dois ajouter le nom de l'auteur. Donc, afin de stocker les noms des auteurs, je choisis du texte brut. Vous pouvez maintenant voir l'étiquette. Cette étiquette servira de nom de champ. Mais donnons au label un nom étrange. Nous avons besoin du texte d'aide. Il s'agit d'une description de l'utilisation de ce texte d'aide. C'est-à-dire que cela a aidé x à apparaître sous l'étiquette pour aider les collaborateurs à être détaillés. Ce texte d'aide a pour but de savoir à quoi sert cette étiquette. Maintenant, je vais saisir le texte d'aide, entrez l'auteur de cet article. Ensuite, il y a un type de champ de texte issu de celui-ci. Nous pouvons choisir s'il s'agit d'une seule ligne ou d'une ligne multiple. Sauvegardons ce champ. Après la voiture. J'ai besoin du champ date et heure pour enregistrer les données publiées du bloc. Donc, en cliquant sur Ajouter un champ, je vais sélectionner le type de champ comme date et heure. Donnons le nom de l'étiquette comme date de publication. Dans le texte d'aide que j'écris , sélectionnez les données publiées de la publication. Sauvegardons ce champ. Nous avons maintenant créé tous les champs nécessaires à notre collection. Toutes les données relatives à cet article de blog seront stockées dans les champs correspondants. Cliquez maintenant sur Créer une collection. La collection d'articles de blog sera donc créée. Nous voulons maintenant sélectionner le nombre d'échantillons dont nous avons besoin. Pour l'instant, je sélectionne cinq éléments. Après avoir sélectionné cela, les exemples Phi d'articles de blog seront créés. Maintenant, voici tous les exemples d'articles Phi de l'article de blog. Comme dans la conception, nous n'avons besoin que des quatre éléments. Nous n'avons besoin d'aucun de ces articles. Je sélectionne donc le dernier élément et je le supprime. Passons maintenant à l'édition de l'ensemble de l'article. Maintenant, je choisis la première pose. Ici, vous pouvez voir les informations de base, le nom et le sommeil. Dans le champ personnalisé. Nous disposons de tous les champs que nous avons créés précédemment. Par défaut, nous aurons un contenu factice sur chacun des champs. Nous devons changer tout cela en fonction de notre contenu. Passons aux informations de base sous le nom. Je vous explique comment développer vos compétences en dessin. Dans ce labo. Je donne comme nom dans le champ du nom. Nous recevons maintenant le message d'avertissement car la modification de l'URL supprimera les liens externes vers cet élément sur la plage de sable. Nous ne devrions pas avoir de liens brisés. Pour ça. À chaque fin de mot, il faut ajouter un tiret. Ajoutons donc un tiret entre les deux mots. Passons maintenant aux champs personnalisés, passons du corps du message à notre contenu. Pareil pour le résumé de l'article. Ensuite, je vais voir l'auteur. Donnons le nom de l'auteur de cet article de blog. Sauvegardons ça. Toutes ces données seront donc stockées dans leurs champs respectifs. Nous devons faire de même pour les trois autres points. Nous avons donc maintenant créé toutes les données à stocker dans leurs champs respectifs et dans la collection d'autres articles de blog. En accédant à cette collection d'articles de blog, les données du MIT peuvent être réessayées sur notre Canvas. verrons comment nous allons y parvenir dans la prochaine leçon. 28. Section du blog - Partie 2: Jusqu'à présent, nous avons créé la section de titre nécessaire pour nos articles de blog. Nous avons également entendu parler du CMS, c' est-à-dire du système de gestion de contenu, qui ressemble à une base contenant les champs contenant les données nécessaires à notre article de blog. Nous utiliserons dans les conditions de collecte. Donc, une feuille de cette collection, nous allons réessayer tous les articles de blog, une donnée qui en provient sur notre Canvas. Dans cette leçon, voyons comment nous allons récupérer toutes les données de la collection d' articles de blog vers notre Canvas. Comment allons-nous styliser notre grille d'articles de blog. Maintenant, avec la sélection du contenu du blog, enveloppons, créons une liste de collections. La fenêtre contextuelle est maintenant affichée. Ici. Nous devons choisir la source. Nous avons créé une collection d'articles de blog. La source de la liste des collections provient donc du billet de blog. Nous devons maintenant sélectionner la couche dont nous avons besoin en fonction de la conception. Nous avons les deux colonnes, donc je sélectionne la couche à deux colonnes. La liste des collections est créée sur le canevas. Nous pouvons donc réessayer les données nécessaires pour nos articles de blog. Dans le navigateur, je choisis le contenu du blog. À l'intérieur, il y aura un emballage de listes de collections. Encore une fois dedans, cette liste de souvenirs. Et encore une fois, à l'intérieur, il s'agit d'un article de collection, car il s'agit de chaque article individuel. Maintenant, à l'intérieur de cet élément de collection, je vais ajouter un bloc div au fur et à mesure que nous utilisons la collection. Si vous apportez certaines modifications à l'un des éléments, cela aura également une incidence sur tous les autres éléments. J'ai donc ajouté un diblock dans cet article de collection. Les journaux sont donc tous créés sur tous les autres éléments de la collection. Changeons le nom de cette classe de diblock en tant que représentant des images de blog. Nous allons maintenant ajouter une image. Si j'ajoute une image sur cet emballage d'images de blog, automatiquement, les images seront créées sur les trois autres éléments de la collection. Si j'utilise l'option Obtenir une image de la collection d' articles de blog, les images qui sont toutes stockées dans cette collection seront réessayées et seront affichées sur leur élément immédiat respectif. Comme nous avons sélectionné la collection d'articles de blog à partir de celle-ci, nous devons sélectionner le champ. Comme il s'agit d'une image sur le terrain, nous avons utilisé une image principale et une image miniature. Bonjour, nous avons besoin d'une image miniature. Je sélectionne donc l'image miniature du champ. Les images sont stockées dans un ordre dans les champs d'image miniature. Ainsi, en y accédant, toutes les images miniatures sont lues dans Drive et stockées dans leur élément de collection respectif. Nous avons ajouté l'image. Ensuite, nous devons créer un espace pour contenir le contenu du bloc. Maintenant, je sélectionne l'élément de collection. À l'intérieur de l'élément de collection, je vais créer un diblock. Donnons le nom de la classe pour cette zone de contenu de blog diblock S. Nous devons ajouter le titre du billet de blog. Dans la zone de contenu du blog, j'ajoute un titre et choisissons le type de titre H2. Comme nous utilisons la liste de collection, nous devons choisir le nom du champ dans la collection. Maintenant, dans le cadre de l'élection GetText from blog post, je choisis le nom du champ , afin que le titre des articles de blog soit récupéré et placé ici. Ensuite, nous devons donner le nom de l'auteur et les données publiées de la publication. Donc, dans la zone de contenu du blog, je crée à nouveau un nouveau bloc contenant la date de publication et le nom de l'auteur. Donnons-lui un nom de classe pour ce blog diblock S, Metal Wrap. En sélectionnant le bloc Metal Wrap, ajoutons un bloc de texte, activons le getText à partir des articles de blog et sélectionnons le nom du champ, la date de publication. Donc, pour l'éditeur, la date des articles sera affichée ici. Outre la date de publication, nous avons besoin de l'auteur de l'article. Encore une fois, sous le méta-wrap du blog, j'ajoute un bloc de texte. Maintenant, choisissons le champ comme automatique. Le nom de l'auteur et la date de publication seront donc ajoutés à tous les autres éléments de la collection. Maintenant, dans la zone de contenu du blog, je vais ajouter un paragraphe. Maintenant, utilisons le champ comme résumé de l'article. En tant que résumé, le message sera affiché sur tous les autres objets de la collection. Comme nous n'avons ajouté que le résumé de l'article. Pour en savoir plus sur l'article, nous devons ajouter un lien en savoir plus. Dans la zone de contenu du blog. J'ajoute un lien texte. Maintenant, dans la fenêtre contextuelle, je choisis la page de collection. Et puis dans la liste déroulante des pages, je choisis le billet de blog actuel. Donc, si nous cliquons sur ce lien, le contenu lié à cet article de blog actuel sera affiché. Passons au mode lecture du lien texte. Nous allons maintenant ajouter tous les articles du blog dans un diblock particulier. Donc, sous l'élément de collection, je crée et débloque. Et je fais glisser le diblock sur EPO, zone consacrée à l'image du blog, au rap et au contenu du blog. Maintenant, plaçons l'image du blog, rap et la zone de contenu du blog dans ce bloc div nouvellement créé . Donnons le nom de classe de cet article de blog diblock S. À l'intérieur de cet article de blog, nous aurons une image et son contenu, comme nous avons pu le voir sur le canevas. Dans chacun des objets de la collection. Les images se trouvent en haut et les titres, la date, l' auteur et le résumé de l'article ou en dessous l'un de l'autre. Mais il faut que l'image soit à gauche et que tous les titres et le contenu soient à droite. Afin d'établir que je choisis un article de blog. Une autre couche, je sélectionne le flex et je l'aligne au centre. Changeons maintenant le type de biographie du contenu du blog. Maintenant, je choisis le titre du premier élément de contenu et, en passant par la typographie, je choisis la police Poppins. Ensuite, le poids sera de 500 moyen et la hauteur, de 1,2 tiret. Maintenant, choisissons la couleur de police comme couleur secondaire dans l'échantillon, car nous devons donner le nom de la classe pour cette rubrique. Donc, avec la sélection de cette rubrique, je donne le nom de la classe comme titre de blog. Ensuite, je sélectionne l'enveloppe métallique dans laquelle il y a deux manuels. Maintenant, je sélectionne le premier bloc de texte car il contient la date de publication de ce blog. Apprenons-en la topographie à faire pour la police que je choisis comme Poppins et le poids sera de 500 moyen car une taille pour cette date ne devrait pas être grande. Je donne donc la taille à 16 pixels et la hauteur 1,2 tiret comme date et l'auto sera d'une couleur subtile. Permet à la couleur de police d'être la couleur du contenu. À partir de cet échantillon, nous devons donner le nom de classe de ce bloc de texte. Je renomme donc cette classe en log metal value. Le style de ce bloc de texte auteur sera identique à celui de l'éditeur, le bloc de texte de date étant donné que nous avons donné au nom de classe pour cette méta-valeur S blog. Nous allons maintenant donner le même nom de classe à ce bloc de texte. Alors maintenant, tout le style que nous avons fait dans cette classe sera appliqué à ce nom d'auteur. De plus, nous devons placer la date et le nom de l'auteur l'un à côté de l'autre. Je choisis donc le film métallique pour le blog. Je choisis Flex sur l' écran et je l'aligne au centre. Nous devons faire la distinction entre la date et le nom de l'auteur. Donc, dans le blog Mehta, je suis en train de créer un autre bloc de texte. Et j'utilise une ligne comme séparateur entre les deux. Maintenant, je donne le nom de classe de ce bloc de texte en tant que séparateur de blocs de métaux. Pour en modifier la topographie, j'utilise une autre typographie pour créer un espace de séparation. Je passe à l' espacement, puis je donne la valeur de rembourrage de la gauche et de la droite à dix pixels. Nous avons besoin d'un petit espacement entre le contenu du blog sur la pellicule métallique du blog. Donc, avec la sélection de l'enveloppe métallique du blog, je donne à la valeur de rembourrage inférieure S, dix pixels. Encore une fois, nous devons faire la distinction entre zone de contenu de ce blog Metal Wrap et Roll. Donc, avec la sélection de l'emballage métallique pour blog, je passe sous les bordures et je choisis la bordure en bas. Je suis en train de changer la couleur de ce séparateur. Passons maintenant à la zone de contenu du blog, qui est le paragraphe, et à ajuster la hauteur de celui-ci sous la topographie pour le finaliser avec un tiret 1,3. Ensuite, je choisis le lien. maintenant à la typographie, Passons maintenant à la typographie, donnons la police Poppins et attendons avec 500 medium et la taille 18 pixels. Donnons la couleur comme couleur secondaire à partir de l' échantillon et la largeur de la hauteur, 1,2 tiret, car ici nous utilisons le lien car cela ne semble pas très beau à voir. Donc, selon le style que j'ai choisi, aucun. Changeons la classe de ce lien en tant que blog, savoir plus sur, en savoir plus. En vol stationnaire, nous devons effectuer la transition. Donc, dans le non-État lui-même, je vais passer à la transition et je choisis le type de transition comme couleur de police. Passons maintenant à l'état de transport. Nous devons changer la couleur de la police. Je passe donc à une autre typographie, et je choisis la couleur de police comme couleur principale dans cet échantillon. Maintenant, choisissons à nouveau l' État sans aucun. Nous avons donc maintenant créé l'effet de transition pour ce lien. Nous avons ajouté l'exemple de titre d'image du blog, en effet, contenu automatique et un exemple de contenu et un modèle rouge. À partir de maintenant, dans la prochaine leçon, nous allons terminer toute la section du blog. verrons comment nous allons y parvenir dans la prochaine leçon. 29. Section du blog - Partie 3: Il s'agit de la dernière partie de cette section de blog. À ce jour, nous avons terminé l'exemple d'image nécessaire pour ce bloc, et nous avons ajouté le titre ou le nom et la date en tant que petit contenu. Et je vais faire un lien avec tout ce que nous avons fait dans la leçon précédente sur le design. Et nous procéderons à l'ajustement de l'espacement nécessaire à la conception de ce bloc. Voyons comment nous allons faire tout cela. Dans cette leçon, nous allons modifier la couleur d'arrière-plan de chacun de ces articles de blog. Voyons comment nous allons réaliser tout cela dans cette leçon. Nous allons maintenant modifier l'image d' arrière-plan de cet article de blog. Donc, sous l'élément de collection avec une sélection d'articles de blog, je passe sous les arrière-plans. Changeons la couleur du transparent à la couleur de notre design. Afin de faire le coin arrondi quatre côtés sous les bordures, je donne la valeur du rayon à 32 pixels. Le contenu et l'image de cet article de blog sont si proches de ses côtés. Nous devons donc faire l' espacement sur les quatre côtés. Maintenant, je passe en dessous de l'espacement. Donnons-lui une valeur de remplissage de 40 pixels pour tous les sites. Maintenant, pour donner l'espacement entre l'image et le contenu, nous devons choisir la zone de contenu concernée. Je choisis donc la zone de contenu du blog. Pour la valeur de rembourrage gauche. Je lui donne 40 pixels pour obtenir l'espacement de ces données publiées, pas le nom. C'est moi qui choisis. Bloquez la pellicule métallique. Je donne à la valeur de rembourrage les 210 pixels supérieurs et la valeur de rembourrage inférieure à 20 pixels. Et encore une fois, je donne la valeur de la marge inférieure à 20 pixels. Nous avons donc maintenant l'écart considérable entre le contenu et la date. Nous n'avons pas changé le nom de la classe pour ce paragraphe. Nous allons donc le renommer S block extra product, espaçant considérablement le paragraphe et le lien. Donnons une valeur de rembourrage dix pixels pour la partie inférieure. Nous devons maintenant modifier l'effet immédiat du bloc dans sa conception. Ici, j'utilise le petit site png.com pour obtenir l'image compressée. Téléchargeons l'image que nous avons maintenant. J'ai maintenant sélectionné l'image complète qui est pour l'image principale et une image miniature. L'image qui a la plus grande taille est considérablement réduite en raison de sa plus petite taille. Maintenant, je télécharge chacune des images pour changer les images du bloc. Maintenant, je vais accéder à la collection CMS sous le billet de blog, je sélectionne le premier bloc. En dessous. Nous avons pu voir l'image principale et l'image miniature. Sous l' image miniature, je suis en train de la supprimer. Laissons tomber l'image que nous avons téléchargée. À présent. la même chose que je vais faire dans l'image principale. Je supprime l'image existante car je remplace par une grande image comme l'image miniature. Je suis maintenant en train de suivre les mêmes étapes que celles que j'ai suivies dans le premier billet de blog. Aux trois autres articles de blog. Dans le canevas, nous avons pu voir que toutes les images des articles de blog ont été modifiées. Succès prêt à faire le coin arrondi sur chacune des images. Je sélectionne l'image sous la bordure. Je donne la valeur à 25 pixels. Nous n'avons pas vu le nom de classe de cette image. Je donne donc le nom de la classe comme image de liste de blog. Chacun des articles du blog se touche et est également si proche l'un de l'autre. Pour faire l'espacement entre chacun d'eux. Je choisis un article de collection, qui est une autre liste de collection. Passons en dessous de l'espacement. Maintenant, pour la valeur de remplissage, je donne 15 pixels à gauche et à droite. Et donnons une valeur de 30 pixels à la marge inférieure . Je change maintenant le nom de la classe de l'élément de collection en tant qu' élément de la collection de blogs afin d' obtenir l'espacement de la zone de contenu en haut. En choisissant le contenu d'un blog, faites du rap car il contient tout ce qu'il contient. L'espacement sera donc applicable à toutes les autres choses qu'il contient. Passons à l'espacement. Je donne la valeur de rembourrage ou le haut à 60 pixels pour que l'image utilise la largeur de cent pour cent de la taille. Je sélectionne le rap de l'image du blog, mais il maintient l' image en dessous de la taille. Je donne la valeur sous forme de 100  % sous la largeur. Et reprenons la largeur de l'image de la liste de blog à 100 %. Publions ceci pour le voir en mode premium. Nous avons développé la section en blocs, comme dans notre conception. Même la transition du mode de lecture fonctionne parfaitement. Enfin, nous avons terminé avec succès la section du bloc. Dans la prochaine leçon, nous parlerons de la section FAQ ainsi que de la liste déroulante. Dans la liste déroulante, il y aura l'animation. Voyons comment nous allons y parvenir. 30. Section FAQ - Partie 1: Dans cette leçon, nous allons parler de la section FAQ. Avant cela, voyons comment fonctionne le modèle de boîte. Comme d'habitude, nous allons créer une section puis un conteneur. Et à l'intérieur, nous utiliserons un modèle de grille, qui ne peut afficher que deux colonnes. Dans le bloc D de la première colonne, nous utiliserons un blog à faire, pour contenir un titre et sous-titre. Pour accéder au bloc D de la deuxième colonne, nous utiliserons une liste déroulante. Nous aborderons l'animation qui est nécessaire pour la liste déroulante. En cliquant sur la flèche, elle doit pivoter tout en ouvrant le contenu qu'elle contient. Et il devrait également revenir en arrière et fermer cette liste. Et dans la prochaine leçon de la section FAQ, nous aborderons l'animation nécessaire pour cette liste déroulante. Dans cette leçon, nous aborderons uniquement la structure de base requise pour la liste déroulante. Laissons-en plus. Avant d'entrer dans la leçon, examinons le modèle de boîte commun, qui sera appliqué à toutes les sections à l'intérieur du corps. Nous devons ajouter une section et fournir le nom de classe approprié pour cette section. Vient ensuite l'espacement pour cette section. C'est-à-dire que nous devons lui donner la valeur de rembourrage supérieure et inférieure. Après avoir créé une section à l'intérieur, nous devons ajouter un conteneur et le nom de classe doit être donné pour ce conteneur. Nous pouvons maintenant ajouter l'élément à l'intérieur du conteneur, qui convient à la section nécessaire avec une sélection du corps et la création d'une section. Passons à la section FAQ. Maintenant, dans cette section FAQ, je suis en train de créer un conteneur. Utilisons le conteneur de noms de classe existant. Maintenant, avec la sélection de ce conteneur, je crée un bloc do, Class Name produce tilde log S FAQ content read. Cela contiendra donc tout le contenu et la section FAQ supplémentaire nécessaire Comme nous l'avons vu précédemment, nous allons créer une grille sous l'enveloppe du contenu de la FAQ. Dans la grille d'édition, je supprime la flèche. Maintenant, je le renomme en grille de FAQ. Nous avons besoin de l'espacement entre les grilles. Je sélectionne donc la section FAQ et je donne la valeur de remplissage en haut et en bas sur 200 pixels. en revenir à la grille des FAQ, nous avons vu que la quatrième colonne est plus petite que la deuxième. J'ajuste donc la taille de la colonne à 0,5. Nous devons maintenant créer un dialogue pour chaque colonne. Donc, la sélection de la grille et du dégradé de la FAQ. On y va. Il passera donc automatiquement à la quatrième colonne. Maintenant, j'enseigne le nom de la classe pour ce diblock en tant que représentant du titre de la section FAQ, car cela ressemble à contenir les titres. Maintenant, j'ai copié la section intitulée rep de la section du bloc car ici, le même style suit. Je suis en train de créer une autre zone de contenu sur le produit Diblock qui doit contenir une liste déroulante. Maintenant, je donne le nom de la classe en tant que zone de contenu de la FAQ. Je me vante du titre de la section FAQ. Pour être le deuxième blog de développement, je le fais à nouveau glisser sous les titres des sections FAQ. Dans la deuxième colonne, nous avons classé le bloc dans la zone de contenu de la FAQ. À l'intérieur du bloc d'acier, nous allons ajouter une liste déroulante. Donc, avec la sélection de la zone de contenu de la FAQ, je recherche une capture vers le bas pour que la liste déroulante ait été créée à l'intérieur. Personne ne développe cette liste déroulante. Par défaut, nous avons tout ce qui est nécessaire pour la liste déroulante. Nous avons un DOE déroulant et une liste déroulante. Maintenant, je vais revenir à la larve afin occuper tout l'espacement de cet élément parent. Et en dessous de la taille, je donne la largeur à 100 %, qu'elle occupe toute la largeur. Maintenant, changeons le nom de la classe, un produit, cette liste déroulante en tant qu'élément accordéon. Maintenant, je sélectionne le chien déroulant. Nous voulons que le contenu se trouve dans la liste déroulante et le chien le fera pour remplir l'espace. Et en rendant cette zone saisie cliquable. Nous devons changer le paramètre d'affichage en Flexbox. Renommons cette liste déroulante, le chien fera double accordéon. Une chose à noter : au fur et à mesure que nous construisons, nous préparons notre liste déroulante pour qu'elle s'effondre. Nous voulons que notre interaction s' arrête derrière le bouton pour masquer la réponse. Puisque nous en avons besoin, ajoutons ici une hauteur que nous utiliserons plus tard pour masquer cette réponse. Je donne donc ici sous forme de pixel. Maintenant, j'aligne le contenu au centre. Comme nous connaissons déjà cette option, nous allons garder nos questions en suspens. Posons donc une question et disons que je dois changer la typographie de cette question. Je change la police en Poppins. Attendez 500 de taille moyenne avec 30 pixels et un tiret de 1,2 de hauteur. Je change la couleur en couleur secondaire. Changeons maintenant la classe de ce bloc de texte. Posez une question à l'accordéon. Ensuite, bienvenue dans la liste déroulante. Nous ne pouvons pas voir le contenu de la liste déroulante. Je choisis donc l' objet accordéon, je vais dans les paramètres et je choisis Afficher sous le domaine. Le contenu par défaut de cette liste déroulante en est donc retiré. Mais bien sûr, ce n'est pas ce que nous voulons. Mais cela se produit parce que la position par défaut de la liste déroulante est définie sur la position absolue. C'est très pratique lorsque vous utilisez une barre de navigation, par exemple pour créer un menu déroulant. Mais nous n'en avons pas besoin. Nous voulons donc que notre réponse prenne de la place et ne soit pas supprimée du flux de documents. Nous allons donc apporter quelques modifications à notre position. Nous allons le changer en statique. Et deuxièmement, nous devons nous assurer que le paramètre d'affichage est en bloc. Maintenant, changeons la couleur de fond en blanc. L'ego, l'objet de l'accordéon. Réglons ce paramètre pour qu'il déborde masqué. Et c'est un point important , car nous voudrons masquer le contenu diffusé en dehors de cette zone. Nous avons donc créé toutes les choses inutiles nécessaires pour la section FAQ et pour la liste déroulante. Dans la prochaine leçon, nous aborderons l'animation qui doit être réalisée pour la liste déroulante. 31. Section FAQ - Partie 2: Dans la leçon précédente, nous avons défini les paramètres de base, ni pour la section FAQ, ni pour la liste déroulante. Dans cette leçon, nous aborderons l'animation. Il faut le faire pour la liste déroulante. Il s'agit de faire pivoter la flèche lors de l'ouverture du contenu, et de la faire pivoter à nouveau lorsque vous la fermez. Et nous ajouterons également le contenu dans une liste aléatoire. Voyons comment nous allons y parvenir. Nous allons rendre quelque chose fonctionnel avec une infraction. La clé ici est l'article correspondant. Assurez-vous que cet accordéon est doté d'un sélecteur dans le navigateur pour accéder directement à notre panneau d'interaction. Puisque nous utilisons et volons un élément, nous pouvons sélectionner un déclencheur spécifique, déroulant, ouvert ici. Nous ferons deux choses différentes, menu ou virages, et l'article correspondant s'attend à ce que le menu soit le plus proche de notre côté. Créons la première animation lorsqu'un menu s'ouvre. Et je vais l' appeler S selon Open. Et comme nous le savons, nous voulons animer cette rigueur. Et c'est ce que nous voulons nous assurer qu'il est actuellement sélectionné dans le navigateur. C'est l'objet de l'accordéon. Nous allons donc entrer et ajouter une action pour définir la taille. Au fur et à mesure que nous descendrons et réglerons le soin élevé à 80 pixels. Cela signifie que nous réduisons le contenu à la même taille que dans le bouton. Nous savons déjà que la taille double est de 80 pixels. Et comme nous avons masqué le débordement, la réponse ne sera pas affichée initialement. C'est pourquoi nous l'avons configuré pour qu'il déborde masqué. Dans un premier temps, définissons cette astuce comme état initial afin qu' elle soit initialement fermée. Alors maintenant, pour vraiment personnaliser notre accordéon, faisons tourner l'icône déroulante, la flèche ici, lorsqu'il est ouvert. Maintenant que l'icône est sélectionnée, je donne le nom comme icône correspondante. Maintenant, je sélectionne à nouveau l'accordéon. Je vais passer à l'interaction. L'accès au menu s'ouvre. Et maintenant, assurez-vous que nous avons sélectionné l'icône correspondante. Et ajoutons une rotation avec cette action initiale. Et nous allons définir la rotation initiale de l'axe Z. Nous allons le faire tourner d' ici à zéro degré. C'est par là que tout va commencer. Les modifications que nous avons apportées devraient affecter la classe. Assurez-vous donc que nous avons sélectionné la classe et l'effet et que nous choisissons également l'option dans le verre en tant qu'enfants Wanli avec ce cours. C'est-à-dire que nous voulons qu'il fasse pivoter l'icône, seules quatre icônes se trouvent à l'intérieur. Maintenant, dans le navigateur, je vais laisser sélectionner l'élément en question. Et ajoutons une action sous forme d'animation de taille. Cela revient à ouvrir la taille de l'accordéon à sa hauteur en mode automatique. La raison pour laquelle on donne l' ATO est que l'élément expand, euh, en fonction du contenu qu'il contient. Revenons maintenant à l'effet d'effondrement. Passons maintenant au groupe amino passons à l'action et commençons une animation. Maintenant, je donne le nom des gants d' accordéon et je sélectionne les sites d'action. Alors maintenant, en fonction de l'élément comme sélecteur, je donne la hauteur en pixel AD. Il faudra donc la taille de la hauteur en fonction de la largeur, selon l'icône sélectionnée. Je vais laisser sélectionner la rotation. Encore une fois. Je donne la valeur de l'axe Z à zéro. Nous avons donc ouvert et fermé le suivant. Et maintenant, pour en venir à la liste déroulante, j'ajoute dans le paragraphe le contenu de la liste déroulante. Supprimons maintenant tous les liens des listes déroulantes. Afin de montrer le paragraphe. Je sélectionne l'élément correspondant et le paramètre que je choisis pour afficher le contenu de la liste déroulante sera affiché ici. Je suis en train de modifier le contenu de ce paragraphe. J'ai maintenant sélectionné le double accordéon. Afin de réduire l' espacement sur la gauche, je change la valeur du rembourrage ou de la gauche à zéro. Je copie deux fois la même liste déroulante. Maintenant, nous allons en avoir un aperçu. Sur l'extension du H dans la liste déroulante. Il s'agit d'un décalage et d'un espacement. Nous devons donc le corriger. en revenir à une erreur que nous avons commise, nous avons fait espacer un Discman lors de l' ouverture à l'état fermé, nous devons donner l' espacement et le rejeter. Encore une fois, dans l'article en accordéon avec une sélection d' accordéon, changeons la valeur de rembourrage à zéro. Ainsi, même dans un état fermé, l'espacement et cet homme ont été compris. Et maintenant, nous allons en avoir un aperçu. Maintenant, il fonctionne parfaitement. Dans cette leçon, nous avons donc terminé l'animation requise dont j'avais besoin pour la liste déroulante. Dans la prochaine leçon, nous allons accomplir tout ce dont j'avais besoin pour la section FAQ. 32. Section FAQ - Partie 3: Cette leçon sera la dernière partie de la section FAQ. Nous avons une structure inutile nécessaire pour la section FAQ et également l'animation pour la liste déroulante. Dans cette leçon, nous allons compléter tout ce qui est nécessaire pour la section FAQ. C'est l' image de fond. Et certains des ajustements nécessaires. Voyons comment nous allons y parvenir. Nous devons modifier l'équation de ces listes déroulantes. Je change donc les questions. Et nous avons également besoin d'un autre article correspondant. Encore une fois, je le duplique car sinon nous n'avons pas d' espacement entre les grilles en haut et en bas. Donc, avec la sélection de l'enveloppe du contenu de la FAQ, je donne la valeur de remplissage en haut et en bas de 200 pixels. Et pour la gauche et la droite, je le donne en tant que pixel AD. Maintenant, il ne nous reste plus qu'à lui donner une image de fond. Donc, avec la sélection du contenu de la FAQ, je passe aux arrière-plans et je change la couleur selon nos besoins. Disons le rayon de la bordure avant le pixel. Maintenant, je vais imaginer le dégradé. Ajoutons une image de fond dans les options. Sélectionnez la couleur à partir de la taille, placez la position au centre. Je vais maintenant choisir l'image requise. Maintenant, nous pouvons voir dans le paragraphe qu'il s'agit d'une couleur de fond, nous devons la changer. Même avec la sélection du paragraphe, nous pourrions voir que la couleur de fond est transparente, il doit donc s'agir d'autre chose. Donc, dans le navigateur, je sélectionne la liste déroulante. Dedans. Nous pouvons voir qu'il y a de la couleur en arrière-plan. Et maintenant, je vais le rendre transparent. Maintenant, nous allons le prévisualiser. Dans l'aperçu, nous pouvons facilement développer et réduire la liste déroulante à l'aide d'une encre. Et nous devons également changer la flèche ci-dessous. Donc, en sélectionnant l'icône d' enregistrement et les autres topographies, je change la couleur de notre environnement. Maintenant. Encore une fois, je suis en train de le prévisualiser. Pour voir s'il a été modifié. Nous devons effectuer ce léger ajustement entre les deux colonnes. Donc, dans la grille FAQ, sous la grille d'édition, je change la taille de la colonne à 0,6. Et donnons 60 à l'écart entre les colonnes. Ainsi, en mode aperçu, nous pouvons voir l'espacement entre les deux colonnes. Nous avons donc terminé toute la section FAQ, mais dans la prochaine leçon, nous parlerons de la section newsletter. Voyons voir ça. 33. Section du bulletin: Dans cette leçon, nous allons voir comment créer un abonnement à partir duquel nous donnerons l'identifiant e-mail afin pouvoir accéder à la newsletter sur notre site principal. Pour en venir à la planification, en haut de la page, nous aurons un titre et un sous-titre avec le nom newsletter et nous nous abonnerons à notre newsletter. Et beaucoup l'ont fait. Nous utiliserons le formulaire d'abonnement contenant un formulaire de saisie afin d'obtenir l'identifiant e-mail. Et sur le côté droit, nous aurons un bouton pour vous abonner. Chacun des objets utilisera ce dibloc vertical. Passons à la leçon sur la façon de développer ce design. Avant d'entrer dans la leçon, examinons le modèle de boîte commun, qui sera appliqué à toutes les sections à l'intérieur du corps. Nous devons ajouter une section et fournir le nom de classe approprié pour cette section. Vient ensuite l'espacement pour cette section. C'est-à-dire que nous devons lui donner la valeur de rembourrage supérieure et inférieure. Après avoir créé une section à l'intérieur, nous devons ajouter un conteneur et le nom de classe doit être donné pour ce conteneur. Nous pouvons maintenant ajouter l'élément à l'intérieur du conteneur, qui convient à la section nécessaire. Un autre organisme avec une amende rapide, je cherche un formulaire d' abonnement. développant le formulaire d'abonnement, nous avons pu voir un conteneur nommé conteneur centré. Comme dans le design que nous avons vu, il y a un titre et un sous-titre. Nous allons utiliser le style de section titre, ce que nous avons déjà fait dans la section précédente. Comme je copie le titre de cette section depuis la section des prix et que je l'utilise dans le formulaire d'abonnement. même style est donc utilisé ici aussi. Maintenant, changeons le titre et sous-titre du formulaire d' abonnement. Nous avons terminé cette section de titre en accédant au formulaire d'abonnement où se trouve un conteneur central. Je choisis qu'en agrandissant ce conteneur central, nous pourrions voir les éléments utilisés dans le formulaire d'abonnement. À l'intérieur, nous avons un titre, mais selon notre conception, il n'y en a aucun. Je suis donc en train de le supprimer. Prochaine. Par défaut, il y a un paragraphe. Encore une fois, nous n'avons besoin d'aucun paragraphe comme dans le design. Je supprime donc à nouveau cela dans les flocons du formulaire d' abonnement. existe un autre développé le nom de wrapper de saisie du formulaire d'abonnement, où ce wrapper doit contenir l'e-mail et le champ de saisie de texte. Et encore une fois, en développant cela, il existe une étiquette de champ et une saisie dans le formulaire d'abonnement. Comme dans le design, nous n'avons aucune étiquette. Donc je sors avec cette étiquette de terrain. Maintenant, nous n'avons que le champ de saisie de texte et un bouton. Maintenant, je sélectionne le bouton Soumettre pour donner le nom de classe à ce bouton, je choisis le bouton de nom de classe existant. Dans la toile. Nous avons pu voir que le style stocké dans cette classe de boutons est hérité de ce bouton. Ensuite, nous devons nous concentrer sur la saisie du formulaire. Donc, avec la sélection de la saisie du formulaire d' abonnement, je passe à une autre limite dans le design, nous avons une ligne en bas de la cellule. Je sélectionne la bordure en bas. Je donne la couleur, car dans notre design, nous n'avons besoin que d'une ligne en bas, mais pas des trois autres. Je choisis donc trois autres bouteilles. Je ne choisis aucun style. Pour gagner de l'espacement grâce à la sélection de la saisie du formulaire d' abonnement. J'utilise un autre espacement et je donne la bonne valeur de marge de 20 pixels pour obtenir toute la largeur. Pour cette saisie de formulaire, nous devons sélectionner le wrapper, c' est-à-dire le wrapper de saisie du formulaire d'abonnement. Et une autre taille, je donne une largeur de 200 personnes. La largeur sera donc occupée par une centaine de personnes. Nous avons ajusté la taille à la largeur. Maintenant, je sélectionne l'entrée du formulaire d' abonnement. Et je vais passer à ce paramètre de champ de saisie de texte. Et nous avons pu voir un champ de texte avec le nom et le lieu d'enregistrement. Quels sont ceux-là ? Parcourez notre site Web. Nous devons préciser à quoi sert ce champ de texte. Pour ce faire, nous utilisons ce support de table. À l'intérieur de cet espace réservé, je tape votre adresse e-mail. Dans la toile. Ce contenu, que nous avons saisi dans le paramètre, est reproduit ici. Et maintenant, il ne nous reste plus qu'à donner le type de graphique ou ce texte d'espace réservé. Je préfère mettre cette fois en italique. Nous avons apposé ce pavage sur le texte de l'espace réservé. Nous devons donc définir l'état. Maintenant, je passe au sélecteur et je choisis l'État dans lequel je souhaite placer le titulaire. Le but du choix de cet espace réservé est de nous permettre de styliser les cases du marqueur séparément de la saisie du texte. Le texte du titre héritera du style typographique de l'état par défaut. Nous avons maintenant sélectionné l'état du lieu, comme nous l'avons déjà fait le type de graphe G pour cet espace réservé. Passons maintenant à la neuvième. Avez-vous compris l'espacement entre le titre et le formulaire ? Je choisis le même conteneur de tons et je donne à la valeur de remplissage en haut de 20 pixels, car ce journal de formulaire occupe beaucoup d'espace. Je dois donc ajuster la largeur de ce journal de formulaire à 600 pixels. La largeur est donc considérablement réduite. Nous devons définir la couleur de fond de celui-ci avec la sélection de couleur que je donne une valeur hexadécimale. Et pour obtenir le coin arrondi, je donne la valeur du rayon sous les bordures à 20 pixels. Comme les champs de texte et les boutons sont si proches sur son h, nous devons indiquer l' espacement sur tout cela indique la sélection de la formule. Je donne à la valeur de remplissage en haut et en bas 30 pixels et une valeur de remplissage à gauche et à droite à 40 pixels. La couleur de ce champ de texte n'est pas appropriée en tant que designer. Je sélectionne donc cette entrée de formulaire d' abonnement. Je passe à un autre arrière-plan et je choisis la couleur transparente. Maintenant, faisons entrer la hauteur de ce formulaire à la hauteur du bouton situé sous la taille. Donnons-lui une valeur de hauteur sous forme de pixel. Pour gagner à nouveau l'espacement, nous faisons la section titre et le formulaire. Je choisis le conteneur central et pour la valeur de remplissage en haut, je change la valeur S, 25 pixels. Renommons cette classe de droit des formulaires en bloc de formulaire d'abonnement. Je vais maintenant le publier sur Suite en mode aperçu. En mode preview, j'ai pu voir que nous avons évolué, comme dans notre design, et que tout fonctionne parfaitement. Nous avons développé le formulaire d'inscription afin de vous inscrire et de recevoir la newsletter. Dans la prochaine leçon, nous verrons comment créer ce formulaire de contact. 34. Section du formulaire de contact - Partie 1: Dans cette leçon, nous allons parler de la section du formulaire de contact. Avant d'entrer dans le vif du sujet, voyons la planification. Ce sera une grille avec les deux colonnes. Dans la quatrième colonne, nous avons un titre et un sous-titre qui précisent l'utilisation de cette section. Et sous ce titre, nous aurons une série de coordonnées avec moi pour une adresse. Et pour en venir à la deuxième colonne, nous avons un ensemble de champs de saisie avec le nom, adresse e-mail, la société pour MSH. Et avec tous ces détails, nous pouvons contacter l'artiste. Nous avons maintenant une idée de la section du formulaire de contact. Voyons comment nous allons développer ce design. Passons à autre chose. Avant d'entrer dans la leçon. Voyons le modèle de boîte commun, qui sera appliqué à toutes les sections à l'intérieur du corps. Nous devons ajouter une section et fournir le nom de classe approprié pour cette section. Vient ensuite l'espacement pour cette section. C'est-à-dire que nous devons lui donner la valeur de rembourrage supérieure et inférieure. Après avoir créé une section à l'intérieur, nous devons ajouter un conteneur et le nom de classe doit être donné pour ce conteneur. Nous pouvons maintenant ajouter l' élément à l'intérieur du conteneur qui convient à la section nécessaire. Dans un premier temps, je crée une section. Donnons-lui un nom de classe pour la section en tant que section du formulaire de contact. Et à l'intérieur de la section, nous créons un conteneur. Je donne le nom de classe de ce contenant en tant que contenant lui-même, tant que verre existant. Maintenant, dans le conteneur, nous créons un blog. Donnons le nom de classe pour ce diblock S, contactez le représentant du formulaire. Comme dans la conception, nous avons un modèle de grille. Donc, à l'intérieur de ce représentant, nous créons une grille. Et je dédie l'une des routes. Je donne la valeur de l'écart à 50 pixels. Dans la conception, nous avons déjà vu la première colonne est plus petite que la deuxième colonne. Je dois donc ajuster la grille en sélectionnant la grille d'édition et en ajustant la colonne. Nous devons maintenant renommer la classe pour cette grille. Donnons-lui un nom de classe sous forme de grille de formulaire de contact. Avec la sélection de la grille téléphonique de contact, je vais ajouter un div, qui sera créé dans la première colonne. Donnons-lui un nom de classe pour ce diblock S Contact Form Detail Rep. Maintenant, je crée un autre div, qui sera créé dans la deuxième colonne. Donnons-lui un nom de classe pour ce formulaire de contact diblock S, rep. Comme ce div sert à créer un formulaire avec les ajustements d'entrée. Nous n'avons pas ajusté l' espacement de la section. Je sélectionne donc la section du formulaire de contact et je donne la valeur de remplissage en haut et en bas, s 100 dans la première colonne. Au début, nous avons le pot de titre avec un sous-titre et le titre, comme nous avons créé une section de nombreux titres. Copions donc ici le titre du formulaire d'abonnement. Et je duplique n et je fais glisser titre de cette section vers l'enveloppe détaillée du formulaire de contact. Cette section de titre est plus complète ici. Nous avons pu voir dans le sélecteur que nous avons utilisé un centre nommé underclass. Parce que dans ce qui précède, il s'agit d'un formulaire d'abonnement, nous avons placé ce titre au centre. Nous avons utilisé un autre nom de classe, center. Mais c'est ce que nous désignons ici. Supprimons cette classe centrale. Le contenu de ce titre sera donc indenté vers la gauche. Prenons maintenant le contenu de deux sous-types et le titre, comme dans notre conception. Nous aidons à terminer le titre , puis nous devons donner les coordonnées. Donc, avec la sélection du contact à partir du rat détaillé et la création d'une division qui sera plus grande. Et dans le titre. Donnons-lui un nom de classe pour le bloc d'acier en tant qu'élément de contact. Nous avons fait l'espacement nécessaire pour conserver les coordonnées. Et à l'intérieur des détails de cet élément de contact, créons un titre. Choisissons le type de titre S, H trois. Je change le contenu du titre en mai. Et maintenant, nous devons modifier la typographie de cette rubrique. Maintenant, je change le nom de classe pour cette rubrique en tant que titre détaillé. Nous avons créé un titre , puis tout ce dont nous avons besoin est un lien qui mène à la cellule d'identification du courrier à l'intérieur d'un élément de coordonnées et à la création d'un lien. Changeons donc le lien texte vers la dame principale. Pour ce qui est de la typographie de ce lien, je choisis la police Poppins, avec un poids de 400 normal et une taille avec le pixel dont la couleur de police soit la couleur du contenu de l'échantillon. Et la hauteur sera de 1,2 tiret. Ou nous n'avons pas besoin de cet hyperlien. Je vais donc participer à cette discussion et n'en choisir aucune. Comme nous avons utilisé le lien, nous pouvons simplement le conserver tel quel. Nous devons fournir la transition pour ce lien. Dans la section Effets, je choisis la transition et je souhaite également choisir le type de transition à choisir. J'ai sélectionné la couleur de police de type S. Nous devons donner la transition de couleur de police à ce lien de mai. Maintenant, dans le secteur, je dois sélectionner l'État, c' est-à-dire l'État dans son ensemble. Donc, en survolant, nous devons changer la couleur de la police. Maintenant, je passe à une autre typographie et je choisis la couleur primaire de cette montre. Pendant que je survole le lien, la couleur change. Maintenant, voyons bien dans ce gène. Maintenant, je dois changer le nom de classe pour ce lien. Le nom de la classe doit être un lien de contact. Nous devons indiquer l' espacement au bas de cet article de vente au détail afin d' obtenir l'espacement nécessaire pour les prochaines coordonnées. Je sélectionne donc l'élément de coordonnées et je donne la valeur de remplissage en bas, S, 20 pixels. Le même design sera suivi pour le prochain contact avec lui sur le choix de cette conduite, ou l'autre élément lui-même, je le duplique. Changeons cette rubrique pour former les textes liés au numéro de téléphone. Maintenant, encore une fois, je duplique cette information de contact et je change le titre en adresse. Ici, nous utilisons l'adresse , nous n'avons donc pas besoin du lien texte. Je supprime donc ceci. Sous cet élément de coordonnées, nous créons un bloc de texte. Le bloc suivant est plus grand ici, et je donne le contenu de l'adresse tel qu'il a été conçu. Nous devons maintenant modifier la typographie de ce bloc de texte. Maintenant, je vais changer le nom de la classe de bloc de texte, S, adresse, détail. Nous avons terminé les coordonnées nécessaires dans la première colonne. Dans la prochaine leçon, nous parlerons de création du formulaire de contact dans la deuxième colonne. Voyons comment nous allons y parvenir. 35. Section du formulaire de contact - Partie 2: Nous avons terminé les coordonnées dans la première colonne de la grille. Dans la deuxième colonne, nous allons créer un formulaire de contact, champs avec le nom, adresse e-mail, la société, le message téléphonique et le bouton. Dans cette leçon, nous verrons comment développer ce formulaire de contact, comme dans notre conception, Plongeons-nous dedans. Nous avons déjà créé ce formulaire de contact avec une sélection de huit champs. Je recherche un bloc de formulaire. Maintenant, ce journal des formulaires est créé dans ce formulaire de contact. Par défaut, en cas de retard dans le formulaire, nous avons le modèle contenant le nom, adresse e-mail et le bouton d'envoi. Ou en élargissant les champs de ce formulaire de contact, nous pourrions trouver ce bloc de formulaire. Encore une fois, en l'agrandissant, nous avons pu trouver un formulaire, un message de réussite et un message d'erreur. Il s'agit du modèle par défaut pour ce bloc de formulaire. J'en viens maintenant au formulaire et je le développe ici. Nous avons pu trouver un libellé de champ et un champ de texte. Et en plus du bouton d' envoi, nous avons maintenant vu quels sont tous les éléments contenus dans le formulaire. Je vais créer un diblock contenant ce champ de texte. Maintenant, je fais glisser le diblock vers le haut. Maintenant, je place le libellé du champ et le champ de texte dans ce blog nouvellement créé. Donnons-lui un nom de classe pour ce wrapper d'entrée de formulaire div log S. Maintenant, je développe ce wrapper de saisie de formulaire. Ici. Je choisis ce champ de texte. Donnons-lui un nom de classe pour ce champ de texte tant que champ de saisie dans le design, nous n'avons pas l'étiquette. Je supprime donc ce libellé de champ. Le même style sera suivi pour tous les autres textes à remplir. Je duplique donc le wrapper de saisie du formulaire jusqu'à ce que j'en aie besoin. Ainsi, les modifications que nous effectuons dans ce champ de saisie seront affectées sur tous les autres champs de saisie. Maintenant, je choisis le premier wrapper de saisie de formulaire et je sélectionne ce champ de saisie. Maintenant, je passe sous les frontières. Nous avons besoin d'un résultat net. Je choisis donc le résultat net et je choisis le style comme solide. Je donne la couleur comme dans notre design. Ainsi, dans le canevas, vous pourrez voir que le style est appliqué à tous les autres champs de saisie. En fait, nous n'avons pas besoin de boîte. Nous devons donc sélectionner toutes les autres bordures sauf la bordure inférieure. Je dois choisir le style qui ne convient pas. Donc, au début, je sélectionne la bonne bordure et je ne choisis aucun style. Il en va de même pour les autres modèles. Maintenant, la ligne inférieure est créée dans le canevas. Nous devons maintenant lui donner un espace réservé pour ces champs de saisie. En sélectionnant la valeur de saisie, je vais accéder aux paramètres sous les paramètres du champ de texte, je donne le nom de l' espace réservé. Découvrons la typographie de cet espace réservé. Pour ce qui est de la typographie, je choisis la police car le cuir Poppins attend avant la normale. La taille 20 pixels et la hauteur est de 1,2 tiret. Donnons maintenant la couleur de police pour cette couleur de contenu S à partir de ce coin. Le même processus sera appliqué à tous les autres champs de texte. Je dois faire en sorte que tout l'espace réservé soit orienté vers la gauche. Donc, dans l'espacement, je donne la valeur de remplissage gauche à zéro. L'espacement entre ces remplissages de textes n'est pas suffisant. Je sélectionne donc l'intégralité de cette enveloppe de saisie du formulaire et je donne à la valeur de la marge en bas de 40 pixels. Maintenant, je sélectionne le bouton Soumettre. Maintenant, dans le sélecteur, je vais donner le nom de la classe pour le bouton d'envoi en tant que bouton de classe existant. Le style, qui est enregistré dans ce bouton de nom de classe, sera hérité du bouton d'envoi. Dans la conception, nous n' avons pas de pleine largeur hors ligne pour chaque échec de texte. Nous devons donc le réduire de moitié. Je sélectionne donc cette entrée de formulaire avec la classe existante. Je crée une nouvelle classe avec le nom half width. Maintenant, en dessous de la taille, je donne la valeur de largeur à 50 %. La ligne se raccourcit jusqu'à 50 %. Maintenant, je sélectionne le deuxième wrapper de saisie de formulaire et j'utilise le nom de classe existant pour cela . Le style sera appliqué à ce grep de saisie de formulaire. Le même processus sera appliqué pour cette entreprise et un téléphone. Nous avons besoin d'une largeur de ligne complète pour ce message, donc je ne vais pas le modifier. Nous devons placer ce champ de saisie l'un à côté de autre sous le formulaire et créer un diblock. Je fais glisser le diblock en haut. Maintenant, je donne le nom de la classe pour cela comme enveloppe des champs de saisie. Maintenant, je fais glisser le premier pour former un wrapper de saisie dans ce représentant des champs de saisie. Nous pouvions maintenant apporter les modifications souhaitées. Maintenant, la sélection des champs de saisie se trouve sous la mise en page. Je choisis Flex sous l'écran. Le même processus sera appliqué aux deux autres champs de texte. Maintenant, sous le formulaire , créez un chien, un chien et faites-le glisser sous les champs de saisie représentant. Maintenant, dans le sélecteur, je donne le nom de classe pour ce diblock en tant que représentant des champs de saisie de classe existants . Faisons maintenant glisser les deux champs suivants, à savoir une entreprise et un téléphone. Nous devons créer l'espacement sur la gauche pour tous les champs de saisie. Je sélectionne ce wrapper de saisie de formulaire sous l'espacement. Je donne une valeur de marge de 40 pixels pour la gauche. Les changements que nous effectuons ici seront donc également affectés dans tous les autres domaines. Maintenant, le bouton n'est pas correctement aligné Je sélectionne donc le bouton Soumettre. Si j'apporte l'une des modifications à cette classe de boutons, cela sera affecté aux autres boutons. Je note donc et j'ai un autre nom de classe, un bouton de formulaire. Maintenant, je donne la valeur de la marge gauche pour ce bouton à 40 pixels. Maintenant, il est correctement aligné. Nous aurons beaucoup de mots pour ce message. Ce manuel en particulier n'est donc pas suffisant. Donc, sous ce wrapper de saisie de formulaire, je crée une zone de texte d' élément. Maintenant, je donne le texte de l'espace réservé sous forme de message. Nous avons créé la zone de texte, il n'a donc pas besoin que ce message pris lorsque je le supprime. Donnons-lui maintenant un nom de classe pour cette zone de texte tant que champ de saisie de nom de classe existant. Le style sera donc appliqué à cette zone de texte. Comme nous avons besoin d'un peu plus de hauteur pour cette zone de message, je crée un autre nom de classe avec le champ de saisie en tant que zone de texte. Permettez-moi de donner la valeur de hauteur à 110 pixels. Mais j'ai besoin d'un peu plus de hauteur, donc je change la valeur 240 pixels. Nous l'avons fait maintenant. Mais dans tout le remplissage de saisie, le texte de l'espace réservé est si proche de la ligne. Pour cela, nous devons créer un espacement entre la ligne et le texte de l'espace réservé. Je sélectionne donc ce champ de saisie, je donne la valeur de remplissage ou le S 15 pixel inférieur, mais j'ai besoin d'un peu plus d'espacement. Encore une fois, je change la valeur à 20 pixels. Dans cette leçon, nous avons donc rempli le formulaire de contact en ajoutant un style inutile à tous les champs. Dans la prochaine leçon, nous verrons comment créer une couleur d'arrière-plan pour les détails de ce formulaire de contact et un champ de formulaire de contact ainsi l'alignement de ces deux éléments, comme dans le design. Et enfin, nous verrons à propos du message de réussite, un message d'erreur pour ce formulaire Plongeons-nous dedans. 36. Section du formulaire de contact - Partie 3: Dans les deux leçons précédentes, nous avons rempli les détails du formulaire de contact et les champs du formulaire de contact. Dans cette leçon, nous allons terminer tous les développements tels que dans notre conception, ainsi que la couleur et l'alignement de l'arrière-plan, message d'erreur et le message de réussite. Voyons comment nous allons y parvenir. Les détails du formulaire de contact et les champs du formulaire de contact ne sont pas centrés. Je sélectionne donc cette grille de formulaire de contact, une autre couche, je sélectionne la ligne centrale. Nous devons donner la couleur de fond pour ce détail du formulaire de contact. Je passe donc en arrière-plan et je choisis la couleur comme motif Interval Figma. Pour obtenir les coins arrondis, je donne la valeur 40 pixels pour le rayon sous les bordures. Donc, en sélectionnant ce remplissage de formulaire de contact, je passe à un autre arrière-plan et je donne la même couleur que dans le formulaire de contact D. Et donnons-lui une valeur de rayon 40 pixels sous les bordures Tous les champs de saisie ont une couleur d' arrière-plan en blanc, mais nous devons créer la même couleur que l'arrière-plan. Donc, avec la sélection de ce champ de saisie, je passe en arrière-plan, sous la couleur, je choisis la greffe S. Alors maintenant, le champ de saisie, la couleur d' arrière-plan, sera transplanté. Et il prend aussi la couleur de l'arrière-plan. L'espacement de ce formulaire de contact détaillé n' est pas suffisant pour sélectionner la dette. Je passe à un autre espacement et je donne à la valeur de remplissage pour le bureau une valeur de 90 pixels. Il en va de même pour le bas. Je donne une valeur de rembourrage de 80 pixels pour la gauche et la droite. Donnons les mêmes valeurs de remplissage pour le champ du formulaire de contact. Néanmoins, l'espacement entre les champs du formulaire de contact rap n'est pas le même que celui de l'enveloppe détaillée du formulaire de contact. Je sélectionne la grille, c' est-à-dire la grille du formulaire de contact. Une autre couche que je choisis est étirée dans l'alignement. Nous avons pu voir dans le formulaire de contact le détail de l'espacement et le haut est plus important. Je change donc la valeur de rembourrage supérieure à 70 pixels. Pour obtenir l'espacement entre chacun des champs de saisie, je sélectionne l'enveloppe de saisie du formulaire lors de la modification de cette classe. Cette valeur sera transmise à tous les autres champs de saisie. Maintenant, avec la sélection de l'enveloppe de saisie du formulaire, je donne une valeur de marge de 60 pixels en bas de chaque élément de coordonnées, l' espacement semble plus important. Donc, en sélectionnant cet élément de coordonnées, je réduis la valeur de remplissage inférieure à dix pixels, en l' espacant par rapport à tous les autres éléments de détail. Publions ceci pour voir comment cela fonctionne. La transition pour le bouton d'envoi fonctionne parfaitement, et la transition pour l'homme et le téléphone fonctionne également sur la grille. Maintenant, revenons en arrière. Sous le bloc de formulaire. Nous avons un autre journal de divisions avec le message de réussite du nom. le formulaire envoyé avec succès, nous devons recevoir un message de réussite. Et laissez le design faire l'affaire. J'ai sélectionné le message de réussite, le journal. Maintenant, je vais descendre et passer sous le bloc de formulaires assis. Maintenant, je dois mener l' État à la réussite. Maintenant, je vais revenir à ce carrelage avec son élection. Permettez-moi de modifier la typographie de ce contenu. Je choisis le téléphone comme Poppins. La couleur avec une couleur secondaire provenant de l'échantillon. Indiquez la taille entre les pixels. Maintenant, pour changer la couleur de fond, je crée un autre arrière-plan et je choisis la couleur comme couleur primaire sur cette montre. Le noir ne l'est pas, ça a l'air bien. Je change donc la couleur de police en blanc. Nous avons terminé le message de réussite. Passons au message d'erreur dans le navigateur. Je sélectionne le message d'erreur. Et en dessous du décor, je mets le terrain à l'erreur. Donc, s'il y a une erreur lors de la soumission du formulaire, nous recevrons le message d'erreur. Faisons ce tuilage pour ce message d'erreur. Maintenant, attribuons à ce contenu le type de police Poppins et une taille de 20 pixels. Pour obtenir tous nos espacements pour ce message d'erreur, je donne une valeur de remplissage de 20 pixels en haut et en bas. Et à la valeur de remplissage de gauche, je lui donne 20 pixels pour obtenir l'espacement entre le bouton d'envoi et le message d'erreur, je dois lui donner une valeur de marge. Donnons-lui donc une valeur de marge supérieure de 20 pixels. Maintenant, je donne la couleur de police de ce message d'erreur à la couleur secondaire de l'échantillon. Pour aligner correctement ce message d'erreur, comme dans le bouton Soumettre et les champs de saisie. Avec une sélection de messages d'erreur, je donne à la marge de gauche une valeur de 40 pixels. L'alignement est maintenant terminé, mais pour le champ de saisie, nous ne précisons pas le type de cet ajustement d'entrée. Alors faisons-le aussi. Pour la saisie du nom, nous avons le type plan. Passons à l'e-mail. Je donne le type d'e-mail. Et également dans les paramètres du formulaire, je donne le nom à émettre dans les paramètres du champ de texte. Encore une fois, je donne le nom par e-mail. Maintenant, l'entreprise échoue. Donnons le plan de type S, le nom des paramètres du formulaire et le texte qui clignote. Je le donne en compagnie. Maintenant, pour le téléphone, Phil, je donne le nom téléphone dans formulaire et aussi dans les paramètres des champs de texte. Et donnons le téléphone de type S. Maintenant, je sélectionne le champ de message et je donne le nom dans le paramètre de formulaire S message. Nous avons utilisé la zone de texte. Donc, ici, nous n'en avons aucun de ce type. Maintenant, je vais publier ceci. Maintenant, nous avons tout développé comme dans notre design et il est également très beau. Dans la prochaine leçon, nous parlerons la section de bas de page. 37. Section du pied de page - partie 1: Dans cette leçon, nous allons assister à une dissection de la nourriture boda. Avant cela, voyons le titre de planification tête première, un nom d'auteur qui figurera au centre. Nous en avons besoin. Nous allons créer un diblock pour héberger tous les réseaux sociaux. Pour chacun des réseaux sociaux, nous allons créer un diblock distinct. Encore une fois dedans. Il s'agit d'un diblock pour contenir le logo. Et une autre évolution en ce qui concerne le nom du réseau social et le lien qui y mène. La même procédure sera suivie pour le reste. C'est ainsi que nous allons le faire. Voyons comment nous allons développer cela. Avant d'entrer dans la leçon. Voyons le modèle de boîte commun, qui sera appliqué à toutes les sections à l'intérieur du corps. Nous devons ajouter une section et fournir le nom de classe approprié pour cette section. Vient ensuite l'espacement pour cette section. C'est-à-dire que nous devons lui donner la valeur de rembourrage supérieure et inférieure. Après avoir créé une section à l'intérieur, nous devons ajouter un conteneur et le nom de classe doit être donné pour ce conteneur. Nous pouvons maintenant ajouter l'élément à l'intérieur du conteneur, qui convient à la section nécessaire. Maintenant, sous le corps, à l' aide de la section Quick Wine Grade, nous devons donner le nom de la classe pour cette section. Donnez-le sous forme de dose alimentaire. Nous devons maintenant créer un conteneur. Maintenant, j'attribue le conteneur de classe existant. Ce contenant. Maintenant, dans ce conteneur, je suis en train de créer le blog. Soit le nom de classe du bloc d'acier B Photo Grab. Pour le savoir sous forme de photo, il faut ajouter une ligne en haut. Donc, pour ce qui est de la sélection de nourriture ou de rap, je vais sur les bordures et je sélectionne la bordure supérieure, et je choisis cette tuile comme pleine, puis je donne la couleur sous forme d'une valeur hexadécimale, comme dans notre design figma. Nous n'avons pas spécifié l' espacement pour cette section. Je sélectionne donc cette section photo et je donne une valeur de rembourrage de 100 pixels en haut et en bas afin que nous puissions voir l'espacement en haut et en bas. Revenons maintenant à la capture des dossiers, ajoutons le titre. Soit le titre de type B, H2. Nous devons faire en sorte que cette rubrique soit au centre. Donc, selon la typographie, je choisis l'alignement central. Je modifie le contenu de cette rubrique pour rester connecté, pour en changer la topographie. J'opte pour une autre typographie. Je choisis la police Poppins. Poids 500, taille moyenne avec 30 pixels et hauteur largeur, 1,5 tiret. Nous devons changer la couleur de la police. Je choisis donc une autre couleur comme couleur secondaire. Mettons toutes les lettres en majuscule. Nous devons renommer le nom de la classe pour ce titre, sorte que le nom de la classe soit Photo Connect title. Nous avons besoin de cette rubrique. Nous devons ajouter le nom de l'auteur. Je suis donc en train de créer une image. En cliquant sur Choisir une image. Je sélectionne le nom de l'auteur dans la ressource pour en faire le centre. Je choisis l'alignement central et un autre type de graphène. Nous avons terminé la section d'en-tête avec la commande. Ensuite, nous devons créer tous les éléments des réseaux sociaux. Juste en dessous. Nous créons une enveloppe de bas de page pour cette rubrique. Dans ce conteneur, nous créons une loi de division portant le nom photo social rep. Encore une fois, à l'intérieur. Nous créons un autre élément social en bas de page débloqué. Pour chaque élément social, nous devons créer un diblock. Donc, sous les articles alimentaires ou sociaux, nous créons un diblock avec le nom Social items. À l'intérieur de chaque élément social, nous avons une icône qui est un logo et un nom d'élément social. Et avec ce lien. Donc, dans un premier temps, créons un look div pour contenir l'icône et les autres objets sociaux. J'ai donné le nom de la classe ou du blog en tant qu'icône sociale. Envelopper. À l'intérieur de cette capture d'icônes. Je crée une image. Maintenant, je choisis l' image à partir de l'acide, c'est-à-dire une icône Facebook. Nous devons maintenant définir la taille afin de nous limiter à ce logo. Je sélectionne donc cette icône sociale et je passe en dessous de la taille. Je donne la largeur de 60 pixels et la hauteur de 60 pixels. Pour donner la couleur de fond. Je donne la couleur et hexadécimal comme dans le dessin de la figma, nous devons le faire comme autour. Donc, sous les bordures, je donne la valeur du rayon à 100 pixels. Nous devons placer ce logo au centre. Je choisis un flex comme écran sous la mise en page, je l'aligne au centre et je le justifie au centre. Nous avons terminé l' encapsulation des icônes sociales. Maintenant, dans l'élément social, nous devons donner un nom à l'élément social avec une sélection d'éléments sociaux et créer un autre diblock. Donnons-lui un nom de classe pour ce diblock S Social Text Wrap dans ce représentant, créons un titre correspondant au nom du réseau social et laissons le titre de type B en avoir trois. Maintenant, j'ai changé le contenu du titre en Facebook. Maintenant, en ce qui concerne la typographie, je choisis la police Poppins. Poids : 500, taille moyenne avec une police de 18 pixels, couleur avec la couleur secondaire de l'échantillon et tiret de 1,3 largeur de hauteur. Nous avons ajouté le nom du réseau social. Nous devons maintenant ajouter un lien. Sous le Social Text Wrap. J'ajoute un lien texte. Maintenant. Je suis en train de modifier ce lien texte. J'en viens à la typographie de ce lien texte. Donnons le type de police Poppins, poids comme descripteur de fichier Medium, les sites avec 16 pixels et la hauteur avec un tiret. Donnons-lui une couleur dans une valeur hexadécimale sous forme d' intervalle figma, nous n'avons besoin d'aucun lien hypertexte. Je choisis donc le style à zéro, à l'espacement radio en haut de ces textes sur les réseaux sociaux, je choisis cette rubrique. Je donne la valeur de la marge à zéro pixel, qui se trouve en haut. Et maintenant, nous devons renommer le nom de la classe de titre en titre social. Encore une fois, je vais réduire l'espacement, le bas. Donc, en sélectionnant le titre social sous l'espacement, je donne la valeur zéro dans la marge inférieure Nous devons créer le logo et le titre social, c' est-à-dire qu'ils soient côte à côte. Nous savons déjà que ces deux éléments font partie de l'élément social. Je sélectionne donc l'élément social, je blogue et je choisis une flexbox. Je l'aligne au centre pour créer un espacement entre l' icône et le texte. Je sélectionne la capture de texte sur les réseaux sociaux. Je donne à la valeur de remplissage, qui se trouve sur la gauche, 20 pixels, pour créer un espacement entre le Facebook et le lien. Je choisis le titre social. Je fais la valeur de la marge en bas sous forme de pixel phi. Il semble que l'espacement entre l'icône sociale et un texte social soit plus important. Je sélectionne donc cette enveloppe de texte sociale et je donne à la valeur de remplissage, qui se situe à gauche, 15 pixels. Mais je pense que l'espacement entre ces liens Facebook et les dissociations semble plus important. Donc. Encore une fois, je change la valeur de la marge à zéro. Encore une fois. Le même dessin sera suivi pour rappeler l'objet social. Avec la sélection de l'article social, je le duplique. Faire en sorte que tous les objets sociaux soient côte à côte en sélectionnant un aliment ou un objet social où ils contiennent tous les objets sociaux. Maintenant, je choisis le flex sous la mise en page. Je l'aligne au centre. Nous devons créer l'espacement entre chaque élément social. Je sélectionne donc l'élément social et je donne une valeur de marge de 60 pixels à la droite. Nous avons besoin d'articles sociaux. Et encore une fois, je le duplique. Jusqu'à présent, nous avons terminé le food that tidal avec le nom de l'auteur sur tous les autres réseaux sociaux. Dans la prochaine leçon, nous allons compléter une section complète de pied de page, comme dans la conception Web. 38. Section du pied de page - partie 2: Dans cette leçon, nous allons compléter le plat ou le mal, comme dans notre conception. C'est-à-dire en modifiant les éléments sociaux et les icônes ainsi que les liens. Finissons-en donc. Dans un premier temps, j'ai sélectionné les objets sociaux photographiques. Comme il occupe toute la largeur, je dois le corriger sélectionnant l'article associé à la nourriture. Sous la taille, je donne la valeur de largeur S mille cents pixels. Et pour atteindre le centre, sous l'espacement, je choisis le centre et je le justifie également au centre. Nous devons maintenant définir la couleur d'arrière-plan pour les éléments sociaux. Donc, sous les arrière-plans, je donne la valeur de la couleur en hexadécimal. Nous devons arrondir les quatre coins. Donc, sous les bordures, je donne la valeur du rayon S, 20 pixels. Donnons maintenant l' espacement en haut et en bas des aliments ou des articles sociaux. Je passe donc en dessous de l' espacement et je donne la valeur de remplissage en haut de 40 pixels. Encore une fois, je donne la valeur de rembourrage en bas S, 40 pixels. Nous avons créé la configuration de base nécessaire pour le représentant photo sur les réseaux sociaux . Nous devons maintenant modifier les textes des icônes et les liens pour chacun des éléments sociaux. Pour le deuxième élément social, je vais le changer en tant que représentant pharmaceutique. Pour cela, j'ai besoin de changer l' arrière-plan et une icône, un texte et aussi un lien. Donc, dans un premier temps, je sélectionne l'icône sociale. Ce rap d'icônes sociales a été utilisé pour tous les objets sociaux. Donc, si je fais l'un des changements, cela affectera les autres. Donc, en plus du cours de rap, icône sociale, je vais créer un Instagram de l'une ou l'autre verre. Nous pouvons maintenant lui donner une couleur de fond. Maintenant, je passe à l' arrière-plan et je donne la couleur qui convient à Instagram. Nous avons créé la couleur de fond pour Instagram. Nous devons maintenant changer l' icône qui se trouve à l'intérieur. Je sélectionne donc cette image qui se trouve sous l'icône sociale, et je vais remplacer l'image qui est Instagram. Maintenant, changeons le titre social en Instagram. Maintenant, je choisis le lien pour chacun des éléments sociaux. Nous avons besoin d'un lien séparé. Avant cela, changeons le nom de la classe en social. Avec la classe sociale liée existante. Je vais ajouter une autre classe car nous allons utiliser un lien distinct pour chaque élément social. C'est la nouvelle classe nommée B Instagram. Maintenant, je suis en train de changer la couleur qui convient à Instagram. Je passe maintenant au troisième élément social, à savoir Twitter. Nous devons maintenant changer la couleur de l'enveloppe des icônes sociales. Donc, en plus de la classe existante, j'ajoute une sous-classe nommée twiddle. Maintenant, je change la couleur d'arrière-plan, qui convient à cette fenêtre. Changeons maintenant l' image de l'icône pour Twitter. Changeons le titre social de ce S en Edo. J'ai maintenant sélectionné l'extension du lien social au lien social. J'ajoute une autre classe, veuve, et j'en change la couleur. Maintenant, j'ai sélectionné l'élément social complet destiné au u du. Maintenant que la sélection de l'icône sociale se ferme, j'ajoute une nouvelle classe en plus de la classe existante. Et en arrière-plan, je change de couleur. Maintenant, remplaçons l'image existante. Faites-vous de l'image ? Maintenant, je change le texte du titre social en YouTube. Maintenant, je sélectionne le lien social. En plus du lien social existant j'ajoute un cours YouTube. Une autre couleur et un changement de couleur qui convient à l'année. Devons-nous créer l'espacement et le bas de ce contenu, soit en sélectionnant le contenu du pied de page, soit en sélectionnant le contenu du pied je donne une valeur de rembourrage inférieure à dix pixels. Nous avons besoin de l'espacement entre cette enveloppe de pied de page et les éléments sociaux du pied de page. Je vais donc modifier la valeur de la marge en haut à 40 pixels. Nous avons donc l' écart considérable entre les deux. Maintenant, j'ai l'impression qu'il y a beaucoup d' espace entre ces photos. Encore une fois, je suis en train de le réinitialiser. J'ai maintenant sélectionné la section de bas de page. Déduisons maintenant un peu le haut de cette valeur de rembourrage. J'enseigne donc la valeur des pixels à 60 pixels. Maintenant, je le publie pour voir à quoi il ressemble. Ce chemin de dossier est superbe. Nous avons terminé tout le pied vers le haut, mais dans la prochaine leçon, nous parlerons de section sur les droits d'auteur. Passons à la leçon suivante. 39. Section du pied de page - Partie 3: Dans cette leçon, nous allons parler de la section sur les droits d'auteur. Voyons la planification de cette section sur les droits d'auteur. Nous allons maintenant utiliser une section composée de deux blocs de chaque côté, puis de blocs du côté gauche. Il y aura un lien pour les projets personnels concernant les prix et les contacts. Et à l'intérieur de l'œuvre de division sur le côté droit, il y aura un contenu protégé par le droit d'auteur. C'est ainsi que nous allons y parvenir. Voyons comment nous allons développer cela. Maintenant, nous allons ajouter un diblock et un autre conteneur. Donnons le nom de classe de ce bloc de droits d'auteur. Dans la section copyright, nous allons ajouter un autre diblock pour contenir les menus. Créons le D-block. Et je donne le nom de la classe en tant qu'enveloppe de menu de copyright. Nous avons besoin d'un autre diblock pour le contenu protégé par le droit d'auteur. Encore une fois, dans la section sur les droits d'auteur et en créant un diblock, je donne le nom de classe de ce contenu développé en tant que wrap de contenu protégé par le droit d'auteur. Pour en revenir à l'enveloppe du menu Copyright, nous devons ajouter les liens. Le lien sera créé dans le menu copyright rep. Changeons la typographie de ce lien textuel. Nous n'avons pas besoin d'hyperlien, donc je n'en choisis aucun pour le style. Donnons-lui un nom de classe pour ce lien texte en tant que lien Food Domino. Totalement, nous avons Fight X LNX. Je duplique donc le lien de ce menu de dossier quatre fois. Nous devons ajouter l'espacement entre les liens de ces textes. Je sélectionne donc cette ligne domino en forme de pied, puis donne la valeur moderne de 40 pixels sur la droite. Changeons chacun des liens textuels en tant que page d'accueil. Projets concernant les prix et les contacts. Pour l'instant, nous avons terminé le copyright Minnow. Passons au contenu protégé par le droit d'auteur dans cette enveloppe de contenu protégé par le droit J'ajoute un paragraphe. Modifions le contenu du paragraphe en tant que contenu protégé par le droit d'auteur dans notre conception. Nous devons maintenant aligner le menu Copyright et le contenu protégé par le copyright sur une ligne. Je sélectionne donc la dissection n, c' est-à-dire la section sur les droits d'auteur. Nous allons maintenant choisir un flux dans l'affichage sous la mise en page. Je suis en train d'aligner et de faire de même pour que les menus soient dans le coin gauche et que le contenu protégé par les droits d'auteur soit dans le coin droit. Je choisis l'espace entre un autre justifié. Nous n'avons pas modifié le nom de la classe pour ce paragraphe. Je sélectionne donc ce paragraphe, puis donne le nom de la classe comme copyright. Les textes de copyright ne sont pas parfaitement centrés comme dans le menu. Je passe donc en dessous de l'espacement et je change la valeur moderne en bas à zéro. Désormais, les menus et le texte de copyright sont centrés de manière à obtenir l'espacement entre le représentant social du pied de page et une section de copyright. Et je sélectionne la section copyright maintenant, et je donne la valeur de la marge aux 240 premiers pixels. La partie inférieure se trouvera au bout du haut. Nous n'avons donc pas besoin d'un tel espacement à la fin. Je sélectionne donc cette section de pied de page et je donne la valeur de remplissage ou les 40 derniers pixels. Publions ceci pour voir à quoi il ressemble. L'espacement et le haut de la section corporative ne suffisent pas. Donc, avec la sélection de la section corporative et en donnant la valeur de la marge en haut à 90 pixels. Nous avons maintenant complété la section photo avec un titre de dossier indiquant le nom, food or social rap et une section sur les droits d'auteur. Dans la prochaine leçon, nous verrons comment ajuster l'espacement nécessaire pour chacune de ces sections. 40. Réglage des espacements: Dans cette leçon, nous allons affiner l'espacement dans chaque section sous forme de plan figma d' intervalle. Voyons dans cette leçon comment nous allons effectuer le réglage de l' espacement. Au début, j'ai choisi cette section, la valeur de rembourrage pour le haut et le bas de cette section, je l'ai donnée comme 100 en haut et 140 en bas. Maintenant, je pense que je dois l'espacer légèrement en haut et en bas pour obtenir la valeur de rembourrage supérieure Je la change en 110. J'en viens maintenant à l' espacement du bas. Encore une fois, j'ai besoin d'un espacement plus important. Je change donc la valeur de remplissage inférieure de 140 pixels à 160 pixels. J'ai terminé la section service. Maintenant, je choisis la section galerie. Encore une fois pour la meilleure valeur de rembourrage. Je vais le changer en 110. J'arrive maintenant au bas de cette section. Nous avons pu constater visiblement que l'espacement n'est pas suffisant. On dirait que c'est si près de la fin de cette section. Maintenant, je suis en train de modifier la valeur de rembourrage inférieure pour celui-ci. Soit la valeur de 140 pixels. Ça a l'air bien au sommet. Mais pour le bas, je pense qu'il faut plus d'espacement. Je change donc la valeur à 160 pixels. J'en viens maintenant à la section atelier pour les espacer davantage. En haut, dans la section atelier, je passe à la valeur au bâton et je la remplace par un pixel en haut. Maintenant que j'en viens au bas de l'échelle, je pense que je dois réduire l'espacement. Je change donc la valeur à 80 pixels. Encore une fois, je pense que je dois réduire l'espacement. Je change donc la valeur à 60 pixels. Nous avons terminé la section atelier. Je passe maintenant à la section de l'onglet Licences. Dans cette section, j'ai l' impression de devoir réduire l' espacement sur le dessus. Je change donc la valeur à 80 pixels. L'espacement en bas de cet onglet relatif aux licences semble correct. Alors je pars comme ça. Et maintenant, j'en viens à la section des témoignages. L'espacement et la baignoire semblent un peu élevés. Je change donc la valeur à deux pixels. Maintenant, après un examen dans la section des prix, augmentons l' espacement en haut. Je donne donc une valeur de remplissage de 110 pixels pour cela. Pour en venir au bas de l'échelle, nous avons besoin d'un tel espacement, alors je pars tel quel. Ensuite, je choisis cette section de blog pour augmenter l'espacement en haut. Encore une fois, je donne à la valeur de remplissage 210 pixels en bas de cette section de blog, ce qui n'en a pas besoin beaucoup d'espacement. Je réduis donc l'espacement à deux pixels, qui se trouve en bas. J'en viens maintenant à la section FAQ. Permettez-moi de changer la valeur de remplissage en haut à 80 pixels. Par rapport au design Figma, nous n'avons pas besoin d'un tel espacement en bas. Je change donc la valeur de remplissage en bas à 20 pixels. Mais encore une fois, je pense que je n'ai pas besoin de l'espacement ni du bas, donc je change la valeur à zéro. Passons maintenant au formulaire d' abonnement, permettez-moi d'augmenter la valeur de remplissage en haut à 120 pixels. Et pour réduire l' espacement par le bas, je change la valeur à 60 pixels. Mais encore une fois, je pense que je dois réduire l'espacement, donc je change la valeur à 40 pixels. Ensuite, je sélectionne la section du formulaire de contact. L'espacement en haut à cet effet semble correct. Je vais donc aller au fond des choses. Maintenant, je change la valeur 210 pixels. Mais encore une fois, je pense que je dois augmenter l'espacement. Je change donc la valeur 220 pixels. Ensuite, je sélectionne cette section de photos. Ici. Je pense que je dois augmenter la valeur du rembourrage. Je change donc la valeur à 80 pixels, mais j'ai l'impression que les 70 pixels semblent corrects. Je suis donc en train de le modifier. Nous allons le publier pour voir à quoi il ressemble. Analysons tous les espacements à partir de la maison. La section Services est belle, tout comme la section galerie, la section atelier, licences, l'onglet, la section des témoignages, la section des prix, la section blog. Tout semble bien comme dans notre design. 41. Page simple - Partie 1: Nous avons créé la liste des blogs dans notre section articles de blog. Dans cette leçon, nous allons créer un seul article de blog en cliquant sur cette liste de blogs individuelle. Voyons comment nous allons doubler cela en créant une page d'article de blog. Je choisis donc le panneau de pages situé en dessous. Vous pouvez trouver une page statique, une page collection CMS, vous supprimez la page et le revenu du discours. Nous allons utiliser une page de collection CMS. Ici. Nous avons déjà déniché les modèles d'articles de blog. Je sélectionne donc ce modèle d'article de blog. Nous utilisons les pages de collection car nous allons extraire le contenu du blog de cette collection EMS. La page est maintenant créée. Dans le navigateur. Vous pouvez voir toutes les sections que nous avons créées jusqu'à présent. À partir de ce navigateur, nous allons utiliser la section d'en-tête et la dissection des aliments. Comme nous le savons déjà, nous allons créer une page d'article de blog unique. À l'intérieur de la page d'article de blog, nous devons ajouter une section d'en-tête et le contenu principal du blog et une section de pied de page. La section d'en-tête que nous allons utiliser ici provient de notre double page du projet, car nous avons pu copier la section d'en-tête et la placer dans la page. Mais si nous apportons l'une des modifications à l'intérieur de la fosse, cela n'affectera pas le contenu principal. De plus, si nous modifiions le contenu principal, cela n'affectera pas le pH. Donc, ce que nous allons faire maintenant, c'est utiliser le symbole. Le symbole est utilisé pour transformer n'importe quel élément et ses éléments secondaires en un composant réutilisable. Ce symbole peut donc être utilisé n'importe où dans notre projet. C'est-à-dire que les éléments particuliers avec tous les styles peuvent être utilisés n'importe où dans le projet. Passons donc à un plus grand symbole. Maintenant. L'élément nécessaire est sélectionné. Maintenant, c'est le représentant de l'en-tête. Choisissez maintenant les symboles. Je donne le nom du symbole du canard comme zone d'en-tête. Maintenant, disons le symbole de la zone d'en-tête ou nous avons les éléments d' enveloppe d'en-tête. Maintenant, euh, nous avons besoin d'une section photo à l'intérieur de notre page d'article de blog. Je sélectionne donc la section de bas de page l'élément avec le sélecteur d'éléments. Je vais assembler et créer un symbole avec un nom dans la zone de bas de page. Je reviens maintenant à l'instance dans la page sous la page de collection du CMS. Je sélectionne le modèle d'articles de blog. Ainsi, la page que nous avons créée, comme indiqué dans le canevas du navigateur, vous pourriez voir un corps d'un litre. Comme nous l'avons vu précédemment, nous allons développer cette page avec la section d'en-tête et le contenu principal et une section de pied de page. Dans un premier temps, nous aurons une section d'en-tête. Je vais donc accéder au symbole et sélectionner la zone d'en-tête. Dans cette page, la zone d'en-tête est créée. Nous avons besoin de cette section d'en-tête. Créons un élément de section. Donnons le nom de la classe pour cette section en tant que section des détails du blog. À l'intérieur, créons un récipient et utilisons le récipient en verre existant. Sous le conteneur, créons un doublon et un nom que le bloc S du journal contient en détail. Nous devons créer une image sous cette liste détaillée de blocs. Comme nous le savons déjà, nous avons utilisé la page de collection du CMS. Ainsi, dans les paramètres de l'image, vous pourriez voir la case à cocher avec un nom et obtenir une image à partir de la collection d'articles de blog. Il suffit de le sélectionner et de l'ajouter. Vous pouvez trouver le champ de sélection. Dans le champ de sélection, choisissez une image principale afin que l'image soit réessayée depuis le billet de blog de la collection. Faites en sorte qu'il soit aligné au centre. Nous avons ajouté l'image principale. Nous en avons besoin, nous devons ajouter le titre de ce billet de blog. Donc, dans les détails du bloc, Brad, je cherche un titre. Maintenant, si vous ne parvenez pas à trouver les textes d'un article de blog en dessous, sélectionnez le champ S name. Le titre de l'article de blog sera affiché ici à partir de notre collection d'articles de blog. Changeons la police en Poppins. Et mesure 40 pixels. Nous devons donner le nom de la classe pour cette rubrique. J'enseigne donc le nom de la classe pour cette rubrique, en-tête détaillé du blog S. Nous avons maintenant besoin de ce titre de cet article de blog. Nous devons ajouter la date et l'auteur de ce billet de blog. Donc pour ça, pour résumer les détails du blog, j'ajoute un autre blog pour gars avec la date et le nom de l'auteur. Donnons-lui un nom de classe pour ce diblock S détaille le métal sous la méta de l'aiguille du blog. Ajoutons un bloc de texte. Activez cette option pour obtenir des textes à partir d'un article de blog. Sous le champ de sélection. Je sélectionne le champ de date de publication. Les données ont maintenant été ajoutées sous le titre du billet de blog. Donnons à la police Poppins un poids de 500, taille moyenne de 18 pixels et masquons avec un tiret de 1,2. Et je choisis la couleur de police comme couleur de contenu dans l'échantillon. Nous devons modifier le nom de la classe pour prochain bloc en tant que détail du blog. L'a fait. Nous devons ajouter l' autre nom à ce billet de blog, un autre détail du blog, Mehta, j'ajoute un autre bloc de texte pour ce billet de blog, un autre détail du blog, Mehta, j'ajoute un permettre d' obtenir du texte à partir des articles de blog. Maintenant, je sélectionne le champ car il est étrange que le nom de l'auteur ait été extrait de la collection. Maintenant, je change la police en Poppins. Attendez cinq cents, une taille moyenne 18 pixels et une hauteur de 1,2 tiret de largeur. Changeons la couleur en couleur du contenu. Nous devons indiquer la date de publication et nom de l'auteur l' un à côté de l'autre. Je sélectionne donc tous les détails du blog, Mehta. Et je choisis le flux à afficher. Pour placer ces deux-là au centre, je le justifie auprès du centre. Je renomme le nom de la classe en ordre détaillé du blog. Pour créer l'espacement entre la date de publication et le nom de l'auteur. Je sélectionne la date détaillée du blog et je donne la valeur de remplissage pour la gauche et la droite une valeur de dix pixels. Appliquons la même valeur au deuxième auteur détaillé du blog. Je reviens maintenant à la section des détails du blog. Et nous devons fournir l' espacement et le fond. Je donne donc la valeur de rembourrage en bas à 100 pixels. Nous avons noté la section d'en-tête et l'image principale en fonction du titre, date de publication et du nom de l'auteur. nous reste plus qu'à ajouter le contenu complet du bloc et l'enveloppe détaillée du bloc que nous allons ajouter au bloc. C'est pour conserver le contenu de ce billet de blog. Donnons-lui un nom de classe pour le contenu détaillé de ce bloc de diblock S. J'ajoute un élément Rich Text. Activez maintenant l'obtention de textes à partir de billets de blog. Et je sélectionne le corps du poste de terrain. Ainsi, l'ensemble du contenu que nous avons enregistré dans la collection sera réessayé et affiché dans le canevas. Nous devons maintenant créer l'espacement approprié pour le contenu de ce message. Je sélectionne donc le contenu détaillé de ce blog et je donne à la valeur de remplissage S 60 pixels. Il y a beaucoup d' espacement sur le dessus. Encore une fois, je change la valeur à 40 pixels. J'ai l'impression de devoir ajouter l'espacement de rembourrage pour le titre. Je sélectionne donc l' en-tête détaillé du blog et je donne la valeur de remplissage S, 20 pixels en haut, dix pixels en bas. Nous avons terminé le contenu du bloc. Maintenant, nous devons ajouter la zone de pied de page. Je sélectionne donc le corps. Je vais revenir aux symboles et sélectionner la zone de restauration. Alors maintenant, la nourriture de cette zone est ajoutée en bas. Nous allons le publier pour voir à quoi il ressemble. Je recharge la page. La tête, cette zone, le contenu principal et la zone de pied de page, tout est parfaitement placé. Dans la prochaine leçon, nous finaliserons notre section blog. 42. Page simple - Partie 2: Dans cette leçon, nous allons finaliser la section complète du bloc. Donc, disons, dans la section des blocs, nous avons la liste des blogs en cliquant sur l'image, le titre, cela devrait nous rediriger vers le billet de blog unique. Je vais donc voir le navigateur. Et dans la section blog, je sélectionne le souffle de l'image du blog. Et je crée un élément de bloc de liens car nous devons le rediriger vers un seul article de blog. Je note donc ce bloc de liens et je place l'image à l'intérieur du bloc de liens. Donc, si nous plaçons l'image dans le blog du lien, chaque fois que nous cliquons sur l'image, cela nous redirigera vers le billet de blog unique. Avec la sélection du lien blog, je passe dans les paramètres. Dans les paramètres des liens, je sélectionne la page car en cliquant sur l' image et le titre, elle devrait être redirigée vers la page de l'article de blog. Je sélectionne la page et un autre choisit une page de collection. Je sélectionne le billet de blog actuel. Depuis la page de collection des articles de blog actuelle. Le billet de blog approprié, c'est-à-dire un article de blog unique, sera affiché. Nous avons créé un blog contenant un lien vers l'image. Maintenant, il ne nous reste plus qu'à trouver le titre sous la zone de contenu du blog. J'ajoute un blog de liens. Faisons glisser le bloc de liens sur le titre du blog et plaçons le titre du blog dans ce blog de liens. Ainsi, chaque fois que nous cliquons sur le titre, il devrait être redirigé vers le billet de blog unique. Maintenant, avec la sélection du bloc lié, nous devons passer au réglage. Dans le paramètre du lien, je choisis la page, sous la page de collection, je sélectionne le billet de blog actuel. Nous devons maintenant modifier le style du titre qui se trouve dans un blog de liens. Maintenant, avec la sélection du lien blog, je passe à la topographie et je n'en choisis aucune pour le style afin d'éviter le lien hypertexte et pour la couleur de police, je choisis la couleur secondaire parmi ce coin. Renommons la classe du bloc de liens en blocs à lien unique. Nous devons définir la transition pour le titre du bloc. J'adopte donc une autre éthique et je choisis la transition car une transition devrait avoir lieu pour la couleur de police. Je choisis donc la couleur de police. Nous devons maintenant changer cet état. Je choisis l'État comme Hobo. Comme je l'ai déjà défini, la couleur de la police devrait changer à l'état de survol. J'opte pour un autre type de graphisme, et je choisis la couleur comme couleur primaire. Publions ceci pour voir comment cela fonctionne. Rechargeons-le. Je survole le titre. La transition fonctionne parfaitement. Maintenant, j'ai cliqué dessus. Donc, le fait de le décliquer nous amène à une autre page. Sur la nouvelle page, nous pourrions voir le billet de blog unique. Prenons un scénario. Dans le champ de collecte. S'il s'agit d'une image miniature, la date de publication, l' auteur n'est pas disponible. Ainsi, en l'absence de valeur dans le champ, l'ensemble du style de la liste de blocage sera affecté. Pour éviter cela, nous devons définir la visibilité conditionnelle. Voyons comment le faire. Maintenant, je sélectionne le blog metal value. Maintenant, je passe en revue le décor. En dessous, vous pouvez voir la visibilité conditionnelle qui s'y trouve. Ajoutons une condition. Dans la fenêtre contextuelle. Vous pouvez voir que l'élément est visible. Un seul congé lorsque la condition que nous allons appliquer est vraie. Dans un premier temps, je dois choisir le terrain. Ici. Il s'agit d'une date de publication. Je sélectionne donc le champ comme date de publication, puis je définis la condition S est définie, afin que l'élément soit visible. Un Lee a publié un ensemble de données sur le terrain. Refaisons-le pour le nom de l'auteur. Pour cela, encore une fois, je choisis un blog à valeur moyenne. Et je passe sous la visibilité conditionnelle et j'ajoute la condition. Maintenant, je dois choisir le terrain. Je choisis donc le champ comme automatique, et je choisis la condition S est définie. L'élément est donc visible lorsque Lee, lorsque l'ordre est défini à l'intérieur du champ. Faisons de même pour le séparateur. C'est un méta-séparateur de blog. Je choisis le champ comme ADA, et je règle que la condition S est définie. Maintenant, je choisis le bloc , mais ajoutons également la condition correspondante. Choisissons le champ comme résumé de l' article et laissons la condition b être définie. Cet élément n'est visible que lorsque le résumé du message est défini dans le champ. Reprenons la visibilité conditionnelle pour ce bloc d'image. Pour cela, je choisis l'image de blog qui permet au nom du champ d'être une image miniature. Et la condition b est définie. Jusqu'à présent dans la leçon, nous avons créé un lien vers l'image miniature et le titre du blog. Nous avons également créé la visibilité conditionnelle pour la date de publication ou le blog l' exception de l'image miniature du bloc. Ainsi, dans la prochaine leçon, nous verrons comment faire défiler l'écran en douceur en cliquant sur les liens du menu. 43. Menu d'une page - Scroll en douceur: Dans cette leçon, nous allons voir comment effectuer le défilement fluide en cliquant sur les liens du menu. C'est-à-dire que nous allons attribuer la section à chacun d'eux et à chacune de ces décisions. Voyons comment nous allons y parvenir. Au début du développement. Nous avons commencé par la navigation dans l' en-tête. Nous avons utilisé le now Vo, qui consiste en des liens de navigation. Donc, en cliquant sur ce lien, il devrait être redirigé vers la section attribuée. Dans un premier temps, travaillons sur le lien Home Now. Je clique sur ce lien d'accueil. Cela devrait nous mener à cette section sur le halo. Voyons maintenant comment attribuer cette section de héros à cette maison, en lien. abord, nous devons attribuer un identifiant à cet élément dans R pour définir l'identifiant Je passe en dessous du paramètre et donne le nom de l'identifiant comme home. Nous avons maintenant attribué le nom d'identifiant à cet élément. Passons maintenant au niveau d'accueil en modifiant les paramètres d'un autre lien. Je donne l'URL sous forme de hachage à la maison. Nous avons spécifié l'URL de ce lien Home Now. En cochant ce lien d'accueil, il recherchera l'élément dans l' URL, comme nous l'avons spécifié comme HOH. Il recherchera donc un élément qui possède cet identifiant, et il nous amènera à cet élément. Nous avons terminé le lien d'accueil. Passons aux projets près en cliquant sur ce lien Project Now. Il devrait accéder à la section galerie. Je sélectionne donc cette section de la galerie et j' attribue l'identifiant de cet élément en tant que projets. Revenons maintenant au lien de navigation du projet. Maintenant, dans le paramètre du lien, nous devons spécifier l'URL car nous avons créé l'identifiant en tant que projets. Je donne donc ce nom dans l'URL en tant que projets de hachage. En cliquant sur ces projets, nous accèderons à la section galerie. Nous allons le publier pour voir comment il fonctionne. Cliquons sur le projet. Chez Marilyn, cela nous amène à la section galerie , puis à la maison. Il a la couleur bleue, mais nous devons changer cette couleur. Toujours en train de charger le site Web. Il figurera sur une page d'accueil. Ainsi, le lien d'accueil sera toujours en noir ci-dessous. Nous devons donc changer la couleur en noir. Je sélectionne donc le lien d'accueil. Faisons le coiffage pour cela. Donc, selon la typographie, je choisis la couleur secondaire dès l'expédition. Nous avons terminé les deux premiers liens, page d'accueil et projets. Voyons le lien « À propos ». Donc, en cliquant sur ce lien, cela devrait nous amener à voir ma section de travail. Donnons donc le nom d'identifiant à cet élément. Maintenant, je passe à un autre paramètre et je donne l'identifiant peu près comme nous avons donné le nom d'identifiant pour cet élément. J'en reviens maintenant à la question du naphtalène. Maintenant, dans ce paramètre de lien, nous devons donner l'URL telle que nous avons donné le nom de l'identifiant. Par conséquent, ce nom doit être spécifié ici. Maintenant, je donne le hachage des URL à propos de. Passons maintenant au lien «  Tarification immédiate ». Je clique donc sur ce lien, cela devrait nous mener à la section des prix. Je sélectionne donc cet élément, puis donne le nom d'identification S pricing. Donnons-lui maintenant une URL vers ce lien « pricing now ». Je donne le prix du hachage des URL. Maintenant, je vais accéder au lien Contact Now et je donne l'URL sous forme de contact de hachage. En décliquant sur ce contact, nous devrions accéder à la section du formulaire de contact sur la sélection de cet élément. Je vais donner l'identifiant comme contact. Nous allons le publier pour voir comment fonctionnent les liens. Maintenant, je charge cette page en cliquant sur le projet. Cela nous amène à la section galerie où vous pouvez cocher cet Ebert. Cela nous amène à la section de travail de la CMA en cliquant sur les prix. Maintenant, allez-y, amenez-nous à la section des prix. Nous devons maintenant nous concentrer sur les liens qui se trouvent dans la section photo. Comme nous le savons, ce sont tous les liens. Le même processus sera appliqué pour ce lien. Ai-je sélectionné ce lien d'accueil ? Et je vais créer un autre lien et donner aux URL le même hachage que je fais pour les projets concernant les prix et les contacts. Maintenant, je clique sur le lien Accueil, qui se trouve dans la section de bas de page. Cela nous emmène à la maison. Je clique sur le lien. Cela nous amène à la section appropriée. Donc, tous les éditeurs de liens fonctionnent très bien. Je passe maintenant à la section blog. À l'intérieur de chaque bloc, nous avons une section d'en-tête et une section de pied de page. Voyons si les liens à l'intérieur ce bloc fonctionnent ou non. Nous sommes maintenant dans le blob séparé. Concentrez-vous sur l'adresse URL. Maintenant. Maintenant, je clique sur les liens du projet, mais cela ne fonctionne pas. Parce que dans l'adresse URL, vous remarquerez peut-être qu'il n'y a pas de barre oblique entre le nom du blog et l'identifiant de l'élément. Nous devons donc apporter les modifications à l'URL, puis aux liens de navigation. Maintenant, je reviens à la toile. Maintenant, je sélectionne ce projet, associez maintenant d'autres paramètres de nivellement. Je donne l'URL sous forme de projets slash. Nous devons donc ajouter une barre oblique dans le cadre de l'URL pour chaque lien de navigation. Vérifions si cela fonctionne ou non. Je recharge la page et je clique sur ce blog. Maintenant, je clique sur ces projets car cela nous amène à la section galerie. Maintenant, je clique sur à propos si cela nous amène parfaitement à la section nécessaire, comme il a pu le voir dans l'adresse URL. C'est parfaitement bien. Dans la prochaine leçon, nous allons enregistrer notre icône de fichier et une icône de clip Web. 44. Icônes pour site Fav et WebClip: Dans cette leçon, nous allons voir comment définir l'icône Fab, une icône pour un site Web. Avant de commencer la leçon, voyons ce que le fairway a disparu et l'icône du clip Web. Et un tissu sous forme de petite icône qui fait office de marque pour notre site Web. Son objectif principal est d' aider les visiteurs à localiser notre page plus facilement lorsqu'ils ont plusieurs onglets ouverts. Dans Webflow, nous utiliserons 32 x 32 pixels pour ce fairway disparu. Voyons maintenant à propos de l'icône Web Clip. Flip ressemble à une icône d'application. Mais au lieu de lancer une application, une prise en main permet à l'utilisateur d'accéder directement à votre site Web. Nous utiliserons une image de 56 x 256 pixels pour configurer une icône de retournement. J'ai besoin d'un fichier avec l'extension où P j'utilise le Cloud convert.com. Afin de convertir le fichier JPEG. Au début, je dois sélectionner le nécessaire. J'ai le fichier JPEG avec le nom, il a le goût d'un clip Web. Je le sélectionne donc car il s'agit d'un fichier JPEG. J'ai besoin de convertir ce fichier en page Web. Avant de convertir cela, je dois définir la largeur et la hauteur de cette image. Donc, dans les paramètres et en donnant la largeur et la hauteur 256, c'est la résolution requise pour notre icône en forme de globe Web. Maintenant, notre fichier JPEG est converti en fichier de page Web. Téléchargeons-le. J'enregistre ce fichier en tant que tiret de clip Web le plus étrange. Revenons à notre projet. Cliquez sur le projet situé sous les paramètres généraux, vous pouvez voir des icônes. Téléchargeons d'abord l'icône Fab. L'icône du fichier doit avoir une résolution de 32 pixels sur 32 pixels, car j'ai déjà ce fichier avec cette résolution. Je sélectionne donc ce fichier dans la description, vous pourriez voir le fichier PNG ou JPEG suffit pour l'icône fabuleuse. icône du fairway est maintenant téléchargée. Maintenant, téléchargeons l'icône du clip Web. Pour cette icône de clip Web, nous devons télécharger le fichier de la page Web car nous l'avons déjà converti. Nous allons sélectionner ce fichier. Nous avons mis en ligne le clip web de Both Fairway avec Anna. Publions ceci pour voir si le fairway Kahn est téléchargé. Je recharge le site. Donc oui, nous pourrions voir la fabuleuse icône ici. Dans la prochaine leçon, nous verrons comment rendre notre site réactif pour les tablettes, les mobiles et les ordinateurs de bureau. 45. Bases sensibles au flux Web: Dans cette leçon, nous allons voir comment faire en sorte que notre site Web réponde aux saisies sur ordinateur, tablette , mobile en mode paysage et , mobile en mode paysage et mobile. Ici , en haut de la toile, vous pouvez voir les fenêtres d'affichage. C'est-à-dire les points d'arrêt. Le bureau avec une étoile est un point d'arrêt de base. À ce jour, nous avons terminé le développement de ce point d'arrêt de base. Ainsi, tous les éléments que nous avons utilisés dans ce point d'arrêt de base seront transmis aux points d'arrêt Lloyd. Nous n'avons donc pas besoin de recréer cet élément encore et encore. Car ce sont les points d'arrêt les plus bas. Un jour, nous devrons ajuster tous les éléments en fonction de leurs points de rupture. E1, un week-end, et atteignez les points d'arrêt les plus élevés que le point d'arrêt de base. Pour créer le point d'arrêt le plus élevé, cliquez sur les trois points de la marionnette. Nous avons pu voir le plus grand point de rupture avec une valeur en pixels AD, mille pour 40 pixels et mille 920 pixels. Ici, je choisis ceux-ci et 920 pixels. Nous recevons maintenant le message contextuel. Pour créer. Les points d'arrêt ne le sont pas. Cliquez donc sur le bouton Créer pour créer le point d'arrêt le plus élevé. Nous pouvons maintenant voir la différence entre la point de rupture le plus élevé et la vue du point de rupture de base. Ce point d'arrêt le plus élevé sera utilisé si notre bureau est plus grand que le point d'arrêt de base. Maintenant, je reviens au point d'arrêt de base et je clique sur la grille de la zone d'en-tête. Dans la mise en page, vous pourriez voir les deux couleurs. C'est l'un avec l'orange et l'autre avec le bleu. La couleur orange indique que le style de l'élément sélectionné est hérité d'une balise ou d'une classe de base. Si l'indicateur de style est bleu, cela signifie que les styles de cet élément proviennent de la classe actuelle. Autrement dit, si nous apportons l'une des modifications à cet élément, l'indicateur deviendra bleu. Permettez-moi d'expliquer en détail quel autre exemple. J'ai maintenant sélectionné la section service. Sous l'espacement, vous pouvez voir l'indicateur bleu. Cela signifie que nous avons apporté les modifications à cette classe de section ainsi qu' à ce point d'arrêt de base. Je vais maintenant atteindre le point d'arrêt le plus élevé que nous avons créé dans la section d' enquête correspondant à ce point d'arrêt le plus élevé Sous l'espacement, nous pouvons voir que l' indicateur de couleur est orange. Maintenant, étant donné que cette valeur est héritée du point d'arrêt de base, si nous effectuons les modifications ici, la valeur deviendra bleue. Premièrement, si nous modifions le point d'arrêt de base, il sera affecté au arrêt le plus élevé et également au point de rupture le plus bas. Mais si vous modifiez le point d' arrêt le plus élevé, cela n'affectera pas le point d'arrêt de base. Soyez donc toujours prudent à ce sujet. À ce jour, nous avons étudié le point d'arrêt de base et le point de rupture le plus bas, et nous avons également créé le point d'arrêt le plus élevé. Dans la prochaine leçon, nous verrons comment faire en sorte que notre site Web réponde à la tablette. 46. Vue sur la tablette - Partie 1: Dans cette leçon, nous verrons comment adapter notre site à la tablette. C'est-à-dire que nous allons styliser l'ensemble de notre site Web en fonction de l'affichage sur tablette. Voyons comment nous allons y parvenir. Dans un premier temps, je vérifie tous les éléments que nous avons développés au point d'arrêt le plus élevé. Tout ce que nous avons créé est donc parfaitement aligné et passons maintenant au point d'arrêt de base. Encore une fois. Dans le point d'arrêt de base , décochez tous les éléments. Passons maintenant à l'affichage sur tablette. Ainsi, dans cette vue sur tablette, tous les éléments ne sont pas correctement alignés car les valeurs que nous avons créées dans le point d'arrêt de base sont héritées de la tablette. Nous devons donc ajuster les valeurs en fonction de la tablette. Gardez toujours une chose en tête. Si vous apportez l'une des modifications à la tablette, cela affectera le paysage mobile et le port mobile, n'est-ce pas ? Mais cela n'affectera pas non plus le point d'arrêt de base. Si vous effectuez l'une des modifications sur le mobile, cela n'affectera pas la tablette et le point d'arrêt de base. Alors gardez ces choses à l'esprit. Commençons par ce carrelage et l'affichage sur tablette. Dans la zone d'en-tête, je choisis le conteneur qui se trouve sous le représentant d'en-tête. Ici, nous avons pu voir que le contenu est si proche du bord de cette tablette. Dans un premier temps, je modifie la largeur maximale de ce conteneur 100 % afin qu'il prenne 100  % de largeur. Maintenant, je passe à l'espacement, et je donne à la valeur de remplissage vers la gauche 30 pixels. Maintenant, dans le canevas, vous pouvez voir que les autres éléments sont également affectés car dans toute la section, nous utilisons le conteneur avec le même nom de classe, container. Donc, si nous apportons l'une des modifications à ce conteneur, cela affectera également tous les autres éléments qui utilisent tous le nom de classe container. OK, pour en revenir au style, il faut maintenant donner l' espacement et la droite. Je donne donc à la valeur de remplissage ou à la droite 30 pixels. Nous avons contribué à créer l'espacement. Maintenant, dans la barre de navigation, je choisis un conteneur. Nous n'avons pas besoin d'un tel espacement pour chaque n. Maintenant, je dois changer la valeur. Mais notez qu'ici aussi, nous utilisons le conteneur de noms de classe existant. Si vous apportez l'une des modifications ici, cela affectera les autres éléments qui utilisent tous ce conteneur ClassName. Pour éviter cela, je crée un autre nom de classe comme remplissage minimum d'en-tête. Changons maintenant la valeur du rembourrage à zéro à gauche et à zéro à droite. Désormais, cela n'affecte pas les autres éléments qui utilisent la classe container. Nous avons terminé la zone d'en-tête. Je passe maintenant à la section consacrée aux héros. Dans la section des héros, j'ai choisi la grille des zones des héros. Donc, ici, si nous utilisons les colonnes, les éléments qu' elles contiennent semblent si petits. Pour éviter cela, je dois supprimer l'une des colonnes. Son contenu sera donc examiné un par un. Pour cela, je passe sous la grille d'édition et je supprime l'une des colonnes. Maintenant, ajustons la taille de la colonne à un pour qu'elle occupe toute la largeur de l'écran. Maintenant, je sélectionne la section Hero Live. Maintenant, vous pouvez voir qu'il y a beaucoup d'espacement sur la gauche. Donc, sous l'espacement, je donne zéro à la valeur de remplissage ou à la gauche. Afin de placer le contenu au centre, je le justifie auprès du centre. De plus, nous n'avons pas besoin d' une telle taille pour le titre de la zone des héros. Avec une sélection du titre de la zone des héros, je change la taille à 50 pixels, mais elle a l'air tellement petite. Encore une fois, je change la valeur à 55 pixels. Le contenu de la section héros et l'image sont si proches l'un de l'autre. Nous devons créer un espacement entre les deux. Je choisis donc cette section d'ascenseur pour héros. Donc, dans l'espacement, je donne la valeur de la marge en bas à 40 pixels. Maintenant, j'ai l'impression que le contenu de la section des héros se trouve sur le côté gauche, avec un peu d'espacement. Avec la section gauche de la sélection du héros. Je choisis la gauche dans le témoignage. Ensuite, je passe à l' espacement et je donne la valeur de remplissage sur la gauche une valeur de 40 pixels. Nous avons donc terminé la zone d'en-tête et la section représentant les héros. Passons à la section B. Dans la section Services, nous devons apporter les ajustements nécessaires au contenu soviétique. Ici, faisons en sorte que le contenu de la grille de service S soit placé en dessous des deux premiers contenus l'un à côté de l'autre et que le dernier contenu soit placé en dessous des deux premiers contenus. Pour cela, je choisis toujours cette grille. Je passe sous la grille d'édition. Comme nous l'avons dit, nous avons besoin d'un leader pour continuer à être au sommet. Je supprime donc l'une des colonnes. La troisième colonne sera placée sous les deux premiers contenus. Nous pouvons maintenant voir que le deuxième contenu est une petite application par rapport au premier contenu. Nous devons faire un alignement correct entre le premier et le deuxième contenu. Je choisis le second et je passe en dessous de la position car on nous donne la valeur -100 ou la plus élevée. Permettez-moi de changer la valeur à zéro. Pour en revenir au troisième contenu, je passe à la position et je change nouveau la valeur de la position sur zéro. Nous avons donc complètement omis la grille des services. Je passe maintenant au titre de la section. Ici. Je vais modifier la taille de ce titre. Passons à 45 pixels au sous-titre de la section, c' est-à-dire un service, je change la taille à 30 pixels. Nous avons maintenant terminé le style de la section Services. Passons maintenant à la section galerie. Dans la section galerie, nous n'avons pas pu voir le contenu qui se trouve à l'intérieur de la grille. Faisons donc en sorte que chacun de leurs contenus soit inférieur aux quatre autres pour lesquels je sélectionne d'abord la galerie directement. Maintenant, je sélectionne la grille d'édition et je supprime l'une des colonnes afin que le contenu prenne toute sa largeur Permettez-moi d'ajuster la taille de la colonne en un seul effort. Nous avons terminé la première grille. Nous allons maintenant sélectionner la deuxième grille de la galerie. Avec une sélection de grilles d'édition. Je supprime l'une des colonnes. Je reviens maintenant à la section Services. En haut de cette section, nous avons pu voir qu'il y a beaucoup d'espacement. L'espacement, je change la valeur du rembourrage ou le haut à 80 pixels, le bas à cent pixels. Je reviens maintenant à la section galerie. Même ici, il y a beaucoup d'espacement sur le dessus. Permettez-moi donc de changer la valeur du rembourrage pour le chien 80 pixels et pour le bas à 100 pixels. Passons maintenant à la section atelier. Il y a beaucoup d' espacement en haut Je modifie donc la valeur de remplissage de 200 pixels maintenant afin de créer le contenu et l'une en dessous de l'autre, je sélectionne cette grille d'atelier et je supprime l'une des la colonne. Et changeons la taille de la colonne en une POUR afin de créer l'espacement entre le contenu de l'atelier et l'image de l'atelier. Je sélectionne cette enveloppe d'images d' atelier. Je passe en dessous de l' espacement et je donne la valeur de la marge en haut à 40 pixels. Nous avons terminé la section atelier. Passons au travail CMI qui est le mode moyen. J'ai également sélectionné le Wrap de travail de la CMA ici. Je vais faire en sorte que chaque contenu soit inférieur à deux. Et puis pour cela, je sélectionne sa grille. Je vais accéder à la grille d'édition car elle comporte trois colonnes. Je supprime donc deux colonnes pour prendre toute la largeur. J'ajuste la taille de la colonne à un. Cette section est très espacée en haut et en bas. Je sélectionne donc un enrobage de mots en CMA et je modifie la valeur de remplissage de celui-ci pour les 200 pixels supérieurs et inférieurs. Nous devons maintenant créer un petit espacement entre l'auteur pour dessiner une biographie de l'auteur. Pour cela, je sélectionne un autre représentant bio. Et je vais passer à l'espacement. Je donne la valeur de la marge à 20 pixels en haut et à 40 pixels en bas. Pour réduire l'espacement. Et au bas de cette section, je sélectionne, voir ma section de travail, c' est-à-dire la dissection finale. Je vais passer à l'espacement et permettez-moi de modifier la valeur de remplissage en bas à 60 pixels. Encore une fois, changeons la valeur de remplissage en haut à 80 pixels. Nous avons terminé cette section. Passons à la section de l'onglet Licences. Dans la section de l'onglet Licences, nous avons également utilisé le modèle de grille. Ici aussi. Nous allons faire en sorte que chacun des contenus soit inférieur l'un à l'autre. Pour cela, avec une sélection de grilles de licence, je passe sous la grille d'édition et je supprime une case hors de la colonne. Et donnons la valeur de la colonne à 1 pour créer l'espacement entre l'image et le contenu. Je sélectionne l'enveloppe du contenu de la licence et je donne la valeur de la marge en haut à 60 pixels. Nous avons pu voir, nous devons modifier l'espacement du contenu des onglets. Pour ça. Je sélectionne mal l'onglet et je passe à l'espacement. Ajustons une valeur de rembourrage pour cela. En haut, je le donne en 70 pixels. Pour les deux derniers, je donne la valeur à 70 pixels. Maintenant, nous pouvons voir que l'espacement est égal sur toute la surface. Mais j'ai l'impression que l'espacement gauche et à droite doit être réduit. Je donne donc une valeur de rembourrage de 50 pixels pour la gauche et la droite . Maintenant, je choisis le titre du contenu de l'onglet. Je passe en dessous de la taille pour réduire la valeur de la taille. Permettez-moi de donner une valeur de taille de 40 pixels. Maintenant, j'en choisis le paragraphe. Et dans le sélecteur, je choisis tous les paragraphes et je change la valeur de taille à 18 pixels. Nous avons terminé cet onglet relatif aux licences. Je passe maintenant à la section des témoignages. Dans cette deuxième section, nous utilisons le modèle de grille. Pour cela, nous devons faire en sorte que chaque contenu soit inférieur à un antidote. Pour cela, je choisis la grille de témoignages avec la sélection de la grille d' édition et je supprime l'une des colonnes car elle comporte beaucoup d'espacement et de haut. Je sélectionne donc la section des témoignages. Je change la valeur de remplissage en haut à 60 pixels. Comme à l'intérieur de l'élément de témoignage, il y a beaucoup d'espacement. Avec la sélection d'un élément de témoignage. Je modifie la valeur de remplissage sur la gauche, 250 pixels. Et pour ce qui est du droit, je donne la valeur à 50 pixels. Encore une fois, je modifie la valeur de remplissage pour les 250 pixels supérieurs et inférieurs afin que le contenu de l'élément de témoignage soit réparti de manière uniforme. Le contenu du témoignage semble être cuit. Avec une sélection de contenus de témoignages. Je change la taille de la topographie à 25 pixels. Maintenant, en annulant les modifications apportées au premier élément de témoignage, il sera hérité aux autres éléments de témoignage. Maintenant, afin de réduire l'espacement et le bas de cette section de témoignages, je sélectionne cette section de témoignages. Je change la valeur inférieure du rembourrage à 80. Passons maintenant à la section des prix. Comme dans la section des prix en haut, l'espacement est plus important. Je considère donc la valeur du rembourrage en haut comme section de tarification de 80 pixels. Nous avons utilisé un modèle de grille. Je sélectionne donc cette grille de prix. Sous la grille d'édition. J'en supprime un de la colonne. Comme nous devons ajuster la structure de la liste de prix. Je sélectionne donc cette liste de prix encapsulée et je passe de la position absolue à la position relative. contenu de la liste de prix a été compris. Maintenant, nous pouvons voir qu'il y a beaucoup d'espacement et que c'est vécu. Encore une fois, dans la position, je change la valeur à 0 % sur la gauche. Je fais la même chose, non ? Nous devons maintenant ajuster la taille du titre du prix. Je change la taille à 45 pixels. Encore une fois, changeons la taille du prix à 60 pixels. Pour créer l'espacement entre ces éléments tarifaires. Je sélectionne le taux de tarification. Je vais accéder à la grille d'édition. Et je donne la valeur de l'écart entre les lignes à 50 pixels. Dans la section des prix, il y a beaucoup d'espacement en bas. Donc, avec la section de sélection de la tarification, je modifie la valeur de rembourrage en bas à 140 pixels. Nous avons terminé la section sur les prix. Dans la prochaine leçon, nous allons terminer le reste de la section. Nous en avons juste besoin pour le point de rupture de la tablette. 47. Vue sur la tablette - Partie 2: Dans cette leçon, nous allons terminer tout le style nécessaire pour le point d'arrêt de la tablette dans la section des blocs Nous allons définir le style de l'article de blog. Comme ici, nous avons utilisé la liste de collecte de données. Ainsi, les modifications apportées à l'un des articles du blog affecteront automatiquement les autres éléments , il n'est donc pas nécessaire de les modifier individuellement. Alors maintenant, je sélectionne cet article de blog. Maintenant, je vais m'occuper du style qui convient. Par défaut, la direction de cette disposition est horizontale. Faisons en sorte qu'il soit vertical. Maintenant, je sélectionne la zone de contenu du blog car il y a plus d' espace ou la gauche. Maintenant, sous l'espacement, je donne la valeur zéro pixel pour le remplissage de gauche. Nous pouvons remarquer que l'un des articles du blog est enfoncé vers le bas. Nous devons donc sélectionner l' ancien article de blog pour qu'il soit correctement aligné avec le titre du blog. Je vais réduire la taille car elle paraît beaucoup plus grande. Modifions-en la taille à 28 pixels. Nous avons pu voir dans le canevas que tous les articles du blog sont alignés. Nous devons maintenant définir le style pour la date de publication et le nom de la commande. Je choisis donc la pellicule métallique en bloc. Et laissez-moi vous donner le sens de la mise en page : vertical mâle, aligné vers la gauche, aligné comme ici, nous n'avons pas besoin de séparateur. Je règle donc le séparateur métallique du blog et je choisis aucun sous l'écran afin que tous les éléments soient masqués. Afin de créer l'espacement entre la date de publication et le nom de l'auteur, je sélectionne la valeur métallique de ce blog. Je vais faire la valeur de remplissage en bas, S, N pixels. Réduisons maintenant l'espacement entre l'enveloppe métallique du blog et le blog extra. Je choisis donc cette enveloppe métallique pour blog. Et je vais modifier la valeur de la marge en bas à dix pixels. Et permettez-moi de modifier la valeur de remplissage sur le pixel inférieur. Déduisons maintenant l'espacement au bas de la section du bloc. Pour ce faire, je réduis la valeur du rembourrage inférieur à 40 pixels. Nous avons terminé la section consacrée aux blocs. Passons à la section FAQ. Dans la section FAQ, nous avons utilisé le modèle de grille. À l'intérieur de la grille, nous avons un titre de section et une zone de contenu. Nous devons placer la zone de contenu en bas du titre. Pour cela, je choisis une grille de FAQ et je supprime l'une des colonnes. Et changeons la taille en une. Cela représente beaucoup d'espace dans l' ensemble de cette section de FAQ. Je dois donc réduire l'espacement. Donc, avec la sélection de l'enveloppe du contenu de la FAQ, je réduis la valeur de remplissage gauche à 40 pixels. Dépliez vers la droite jusqu'à 40 pixels. Et changeons la valeur de remplissage en haut et en bas, 260 pixels. Maintenant, changeons la taille de celui-ci en fonction des éléments. Mais la question de sélection de l' accordéon, j'en utilise déjà la taille à 28 pixels. Nous avons utilisé le même nom de classe pour les autres articles. Donc c'est automatique, j' oublie tous les autres objets. Nous avons terminé la section FAQ. Passons au formulaire d'abonnement. Dans le sous-graphe qui en résulte, il y a beaucoup d'espacement en haut. Je vais donc réduire la valeur de rembourrage ou le couple JHU AT pixel. Le contenu du formulaire d'abonnement semble être bon, donc je pars tel quel. Passons à la section du formulaire de contact pour réduire l' espacement en haut. Permettez-moi de modifier la valeur de remplissage sur les 280 pixels supérieurs pour que le contenu de la grille se trouve dans une seule colonne. Je sélectionne la grille du formulaire de contact sous la grille d'édition, je supprime l'une des colonnes. Et changeons la taille pour qu'elle occupe toute la largeur. Maintenant, je sélectionne le formulaire de contact D Delbruck pour réduire l'espacement en haut et en bas. Permettez-moi de modifier la valeur de remplissage et les 250 premiers pixels. Et pour la valeur inférieure, 70 pixels. Nous devons maintenant réduire la taille du courrier, du téléphone et de l'adresse. Je sélectionne donc le détail de la marée, je passe à une autre typographie. Changeons la taille à 28 pixels. Maintenant, passons au style du représentant des champs du formulaire de contact. En sélectionnant les champs du formulaire de contact encapsulés, je vais ajuster l' espacement ou le réduire à l'intérieur du représentant. Maintenant, je change la valeur de remplissage ou la gauche à 40 pixels. Maintenant, je change la valeur de remplissage en haut et en bas à 60 pixels. Comme il y a beaucoup d'espace entre la section du formulaire de contact et la zone de pied de page. Donc, avec la sélection du contact dans la section, permettez-moi de modifier la valeur de remplissage en bas à 80 pixels. Entre le formulaire de contact, un détail et un formulaire de contact sont remplis. L'espacement est moindre. Avec une sélection de grilles de formulaires de contact. Je vais dans la grille d' édition et je change l' écart entre les lignes à 30 pixels. Pour l'écart entre les colonnes, je passe à 16 pixels. Voyons maintenant la section de bas de page. Dans la section de bas de page , vous trouverez un fruit ou des objets sociaux. Comme certains articles sociaux dépassent la limite en termes de sélection de nourriture ou d'articles sociaux. Je passe en dessous de la taille et je donne la largeur à 100 %. Ainsi, le contenu des éléments sociaux occupera toute la largeur du point de rupture de la tablette. Nous allons maintenant faire en sorte que tous les éléments sociaux soient classés dans un ordre vertical. Pour cela, avec la sélection des produits associés aux aliments, je change la direction et passe à la verticale. Nous devons maintenant créer l'espacement entre chacun des éléments sociaux. Je sélectionne donc le diblock avec le nom Social item. Sous l'espacement, je donne la valeur de la marge inférieure à 20 pixels. Dans la section de bas de page, nous avons la section sur les droits d'auteur. Nous allons donc sélectionner cette section de copyright car le contenu de la section de copyright est en position horizontale. Maintenant, nous devons le faire en tant que vertical. Donc, avec la sélection de la section copyright, je change le sens deux vertical pour créer l'espacement entre l'enveloppe du menu et le contenu. Je sélectionne l'enveloppe du menu Copyright. Je passe en dessous de l'espacement. Je donne à la marge mater une valeur de 20 pixels. Au sommet de la restriction alimentaire, il y a beaucoup d'espace. Je donne donc la valeur de rembourrage ou le couple à 50 pixels. Voyons si chaque section est correctement alignée. Passons maintenant au style du bouton central qui se trouve à l'intérieur, mais pour le bouton de menu, je vais créer les bordures. Je vais donc passer sous les frontières. En choisissant cette tuile, tracez une ligne continue. Et changeons la couleur de la bordure couleur primaire à partir de cet échantillon. Créons maintenant l'espacement entre le nom et le bouton Menu. Sous l'espacement, permettez-moi de donner la valeur de la marge ou la valeur de gauche à 20 pixels. Maintenant, je sélectionne le réglage du bouton de menu afin d' afficher les anciens menus à l'intérieur du bouton de menu, permettez-moi d'activer l'affichage sous le menu. Ainsi, tous les éléments du menu seront affichés dans le canevas. Nous devons maintenant changer la couleur de fond pour cet amino. Donc, avec la sélection de Minow maintenant, je choisis la couleur blanche. Cela représente beaucoup d'espacement sur la gauche pour la valeur nominale. Je change donc la valeur de remplissage ou la valeur de gauche à zéro. Maintenant, nous devons changer la couleur d'arrière-plan du bouton de menu à l'état ouvert. Maintenant, je passe en dessous des arrière-plans et je change la couleur en couleur primaire à partir de l'échantillon. Nous devons maintenant masquer le contenu à l'intérieur du bouton de menu en sélectionnant minimum Dann am sous le paramètre et en activant l'option Masquer. Dans cette leçon, nous avons donc terminé tous les styles nécessaires pour le point de rupture de la tablette. Dans la prochaine leçon, nous aborderons le style du point de rupture du paysage téléphonique. 48. Vue mobile du paysage: Dans cette leçon, nous allons créer un site Web répondant au téléphone portable, qui est en mode paysage. Faisons ça. D'abord. Faisons le style dans la zone d'en-tête. Dans la zone d'en-tête, nous allons créer la marque et le bouton sur le côté gauche, le bouton de menu et le numéro de téléphone sur le côté droit. Voyons comment nous allons créer ce rôle. D'abord, je sélectionne ensuite vers l'extérieur. Et il y a beaucoup d' espacement sur le dessus. J'augmente donc la valeur de remplissage en haut à 20 pixels. Et encore une fois, je change la valeur de remplissage en bas à 20 pixels. Nous devons créer l'espacement entre le tout nouveau bouton du menu et le bouton et le numéro de téléphone. Je sélectionne donc la section gauche de l' en-tête. Je donne la valeur de la marge en bas à dix pixels afin de créer la marque ou la gauche et le bouton Menu. Sur la droite, je choisis l'en-tête en pleine largeur. Je passe à l'autre niveau. Je choisis l'alignement par étirement afin que les articles soient étirés sur toute la largeur du contenant. Nous devons maintenant placer le bouton d'inscription à gauche et le numéro de téléphone à droite. Je sélectionne donc la section d'en-tête je passe à la mise en page et je choisis un espace entre les deux pour justifier que les éléments elle contient soient répartis uniformément d'un bord à l'autre. Nous avons maintenant apporté le style à la partie d'en-tête. Concentrons-nous maintenant sur la section consacrée aux héros. Ici, nous devons réduire la taille du titre et du sous-titre. Je choisis donc le titre de la zone de héros. J'ajuste la taille à perte. Je finalise avec 40 pixels. Nous allons sélectionner le sous-titre de la zone du héros et réduire la taille à 30 pixels. J'arrive au bouton. Il y a beaucoup d'espace partout. Je sélectionne donc le bouton et je passe à l'espacement. Je change la valeur de rembourrage en haut et en bas à 20 pixels. Pour la gauche et la droite, je change la valeur à 40 pixels. Nous obtenons maintenant le style souhaité. La section représentant les héros est terminée. Passons à cette section OB où la taille du titre doit être réutilisée. Je sélectionne donc le titre de la section et j' ajuste la taille jusqu'à ce que nous obtenions la taille souhaitée. Maintenant, je sélectionne le sous-titre de la section et j'ajuste la taille de celui-ci. Dans Mobile Landscape Break Point, nous allons faire en sorte que l'élément de service soit affiché un par un, de sorte que je sélectionne la grille soviétique sous Modifier. Je supprime l'une des colonnes et je laisse un espace de 30 pixels entre les lignes afin que chaque article de service à aimer un par un ait l'intérieur de l'article de service un espacement important ou inférieur . Changeons donc la valeur de rembourrage ou la portance à 40 pixels. Et il en va de même pour le droit. Donnons la même valeur de rembourrage pour le haut et le bas, soit 40 pixels. Afin de réduire l'espacement entre l'icône et le titre du service. Je sélectionne l'enveloppe de l'icône du service et je leur donne une valeur Audion 20 pixels en bas qui concerne le titre du service, ce qui concerne le titre du service, la valeur de la marge en bas est passée à dix pixels. Et aussi, ajustons la taille de celui-ci. Faisons le style du paragraphe dans le sélecteur. Je choisis les anciennes balises de paragraphe. J'en change la taille à 17 pixels. Nous allons maintenant créer le style de la section galerie. À l'intérieur, nous avons un objet de la galerie. À l'intérieur de l'élément de la galerie, le titre chevauche l'image et il n'est pas non plus visible. Nous allons donc supprimer l' image d'arrière-plan et nous allons styliser le contenu qui s'y trouve. Ici, j'ai sélectionné l'élément de la galerie dans le sélecteur Nous avons pu voir qu'il existe deux classes : objet de galerie et galerie pour. Si nous apportons l'une de ces modifications, elle sera appliquée à un deuxième article de la galerie d'un litre. Maintenant, je passe en revue les arrière-plans l'image et le dégradé. Je choisis Masquer. Au lieu de la couleur de la greffe. Je donne la couleur en hexadécimal. J'ai maintenant sélectionné la galerie intitulée wrapper. À l'intérieur, il y a beaucoup d'espace en bas. Donc, sous l'espacement, je fixe la valeur de rembourrage inférieure à 40 pixels. Nous avons donc maintenant un espacement considérable. Nous devons maintenant réduire la hauteur de cet élément de la galerie. En dessous de cette taille. Je leur donne une hauteur minimale 400 pixels afin de réduire l'espacement global à l'intérieur de l'élément de la galerie. Voyons les valeurs de remplissage. Au sommet, je passe à 50 ans. Sur la gauche, je prends l'asphalte. Et en bas, je le change en 50 pixels. Mais encore une fois, il y a beaucoup d'espacement. Maintenant, je vais modifier la valeur de hauteur minimale. Nous allons créer le même style pour l'autre objet de la galerie. Ici, je sélectionne le troisième élément de la galerie et je donne la valeur de hauteur minimale, soit 300 pixels. Nous allons maintenant masquer l'image d'arrière-plan. Donc, sous les arrière-plans et sous l'image et le dégradé, je choisis la hauteur de l'image d'arrière-plan, et lui donnons une couleur de fond. Je sélectionne maintenant le quatrième élément de la galerie. Pour cela, je vais masquer l'image de fond. Et encore une fois, ramenons la valeur de hauteur minimale à 300 pixels. Donnons-lui une couleur de fond. Le contenu de l'élément de la galerie de photos est en position horizontale. Nous devons le rendre aussi vertical. Je sélectionne donc l'alignement des marées de la galerie et je passe en revue la mise en page. Je change la direction en verticale. Alignons-le vers la gauche. Nous avons terminé le style des trois objets de la Galerie. Passons au premier élément de la galerie. ici que nous allons masquer l'image de fond. Et nous allons fixer la hauteur minimale à 300 pixels. Et donnons-lui également une couleur de fond. Ajustons maintenant l'espacement global dans le premier élément de la galerie. Espacement, je change la valeur de rembourrage supérieure à 50 pixels. Pareil pour le bas. Pour la gauche, je passe à 40 pixels. Nous avons maintenant terminé la section galerie. Passons à la section atelier. Dans la section atelier, il s'agit de l'espacement en haut. Permettez-moi donc de réduire la valeur de remplissage en haut à un pixel AD . Le contenu la section atelier semble être une bonne solution. Passons à la section de travail de la CMA. C'est la section À propos de moi. Dans cette section, je vais réduire l'espacement en haut. Changeons la valeur de remplissage sur les 280 pixels supérieurs. Et encore une fois, je vais réduire l'espacement et l'autopsie pour réduire l' espacement sur la gauche. Permettez-moi de changer la valeur à 60. Je passe maintenant à la section de l'onglet Licences. À l'intérieur. Je choisis le pli du contenu de l'onglet. Et réduisons la valeur de rembourrage globale de la turbine. Ici, nous devons réduire la taille du titre du contenu de l'onglet. Permettez-moi de donner la valeur de la taille à 35 pixels. Maintenant, j'ai sélectionné pour le wrap par jours-personne, cette direction de rap est horizontale. Mais ici, nous devons faire en sorte que le contenu soit vertical. Donc, en ce qui concerne la mise en page, je choisis la direction S plutôt que la direction éthique, et je vais l'aligner sur la gauche. Nous devons maintenant faire glisser le contenu de l'offre pour qu'il soit vers la gauche. Supposons donc que la valeur de remplissage sur la gauche soit nulle. Pour que l'espacement entre la valeur de l'offre et le contenu de l' offre soit encapsulé, je donne la valeur de la marge en haut. Faites 20 pixels pour ce représentant du contenu de l'offre. Je passe maintenant à la section des témoignages. Réduisons la valeur de rembourrage supérieure à 40 pixels. Passons maintenant à l'élément de témoignage, en ce qui concerne la vue mobile du paysage, nous désignons ce grand élément de témoignage. Nous devons donc réduire l' espacement partout. Pour cela, je réduis la valeur de rembourrage sur les 230 pixels de gauche. Je donne l'espacement ou moins à 30 pixels. En ce qui concerne le contenu des témoignages, nous devons réduire l' espacement et l'orteil. Et nous devons également réduire la taille de la police pour cela. Donc, selon la typographie, je donne la valeur de taille au pixel. Comme c'est le cas dans la vue mobile, nous devons faire en sorte que ce témoignage incliné de manière à ce qu'il soit placé sur une échelle verticale. Je prends donc la direction verticale et je m' aligne vers la gauche. Nous avons également besoin d'un espacement entre l'emballage détaillé du client et l'emballage d'attente du client. Donc, avec la sélection du client qui écrit du rap et donne à la valeur de rembourrage en haut à dix pixels. Revenons maintenant au contenu des témoignages, nous devons réduire l' espacement au niveau du modèle. Je donne donc la valeur du rembourrage et la valeur inférieure à dix pixels. Vous remarquerez peut-être qu'il y a beaucoup d'espacement entre les éléments de témoignage. Je change donc la valeur de la marge d'eau, fais 40 pixels. Nous n'avons pas besoin de chaque élément de témoignage car nous avons utilisé le même nom de classe pour chacun des briquets de témoignage. Nous avons terminé la section des témoignages. Je passe maintenant à la section des prix. Dans la section des prix, je sélectionne la marée de prix et je dois en réduire la taille. Je donne donc la valeur 30 pixels. Il en sera de même pour le prix. Je change la taille à 40 pixels. Ensuite, en ce qui concerne l'élément tarifaire qui représente l'ensemble du bloc de boucles, nous devons réduire l'espacement à gauche et à droite. Je fixe la valeur de remplissage à gauche et à droite à 50 pixels. Nous devons faire la même chose en haut et en bas. Je change donc la valeur du rembourrage à 30 pixels en haut et en bas également, nous devons réduire l'espacement. Je donne donc la valeur à 50 pixels. Passons maintenant à la liste de prix RAB, modifions la valeur de la marge ou le D2, 20 pixels. Maintenant, je vais réduire la valeur de rembourrage Oliver, pour le représentant de la liste de prix. Le bouton de tarification se trouve très en bas, nous devons donc réduire l'espacement sur le dessus. J'enseigne donc la valeur de rembourrage de 20 pixels au chien. Pour chaque élément de la liste, je réduis encore la taille de 18 pixels. Voyons dans la marge de cet élément de liste une valeur de 20 pixels de haut en bas. Nous avons apporté les modifications nécessaires à l'article tarifaire. Il sera automatiquement transmis au prochain article tarifaire car il utilise le même nom de classe. Je passe maintenant à la section blog. Autre section du blog, j'ai sélectionné le titre du blog. La taille du titre de ce blog semble être un peu petite, j'ai donc tendance à augmenter sa taille à 30 pixels. Augmentons l' espacement : nous faisons l'emballage métallique du blog et le blog en plus. Donc, avec la sélection du blog Mehta, je donne la valeur moderne en bas à 20 pixels. Les modifications que nous avons apportées seront automatiquement transmises aux autres articles du blog. Je suis maintenant arrivé à la section FAQ ici. Je vais réduire la valeur de remplissage en haut pour la section 240 pixels et pour en venir au contenu de la FAQ RAB, changeons la valeur de remplissage. Ici, j'ai obtenu la même valeur ou le même niveau. Et au début, la section intitulée taille semble être correcte. Passons au double accordéon. Nous devons réduire la taille de cette question interne. J'ai donc sélectionné en fonction de la question. Je passe à la topographie et je réduis la taille à 20 pixels, cela affectera automatiquement les autres questions. Avons-nous apporté les modifications nécessaires à la section FAQ ? Je suis maintenant arrivé au formulaire d'inscription. La forme est si proche du bord. Nous devons appliquer le style approprié à ce formulaire. Dans un premier temps, je crée un espacement entre le formulaire d'abonnement, une section FAQ. Je donne donc la valeur de la marge en haut à 40 pixels. J'ai maintenant sélectionné les flocons du formulaire d' abonnement. Nous devons faire en sorte que le contenu d'un abonnement soit flexible pour figurer dans un article. Donc, avec la sélection des flocons du formulaire d' abonnement, je choisis la direction dans laquelle je dois passer à verticale et je vais l' aligner vers la gauche pour créer un espacement entre le champ de saisie et un bouton d'abonnement et sélection du wrapper de saisie du formulaire d'indice. Et je donne la valeur de la marge en bas à 20 pixels. Le dessous de ce champ de saisie est si proche du bord. Nous devons apporter les modifications nécessaires. Pour ce faire, avec une sélection de blocs de formulaire d' abonnement, je vais passer à la taille située en dessous. Je change la largeur à 100 % en la faisant passer à 100 %, le contenu qu'il contient se situera dans les 100 % de largeur. Cette section est un mot L. Passons à la section, section formulaire de contact. Pour cela, je change la valeur de rembourrage du chien à 40 pixels. Et maintenant, j'ai choisi les détails du formulaire de contact. Rob, je change la valeur de remplissage, 60 pixels pour la gauche et la droite. Et pour la discussion, je change la valeur à 40 pixels. Nous devons réduire la taille de l'adresse e-mail. J'ai donc sélectionné le titre détaillé et je change la taille sous la typographie à 25 pixels. Nous devons maintenant modifier la taille de l'e-mail, de l'identifiant, numéro de téléphone et de l'adresse, car nous n'avons besoin que de ce titre détaillé. J'ai donc sélectionné le lien de contact, je passe à une autre typographie et je modifie la valeur pour ajouter des pixels. Nous devons placer tous les champs de saisie dans un ordre vertical. J'ai sélectionné l' encapsulation du champ de saisie et je choisis la direction verticale. Ainsi, tous les champs de saisie se situent dans la direction verticale. Afin de réduire l'espacement. Sur la gauche, j'ai sélectionné l'enveloppe de saisie du formulaire et je réduis à zéro la valeur de la marge sur la gauche. Nous devons faire la même chose pour le wrapper de saisie du formulaire, c'est-à-dire pour le message. Je donne donc à zéro la plus grande dévaluation sur la gauche. Encore une fois. Encore une fois, il faut placer ce bouton d'administration sur la gauche. Je change donc la valeur de la marge sur la gauche à zéro. Nous avons donc maintenant adapté notre site au paysage mobile. Dans la prochaine leçon, nous le ferons en utilisant le code mobile, n'est-ce pas ? 49. Vue de portrait mobile: Dans cette leçon, nous allons créer style adapté au port mobile, n'est-ce pas ? Point d'arrêt. Au début, je pars de la zone d'en-tête, c' est-à-dire un entier d'enveloppe d'en-tête. Je dois créer le bouton d' inscription et le numéro de téléphone pour figurer dans les articles. Je sélectionne donc la section d'en-tête et je choisis la direction verticale. Donnons l' espacement entre le bouton d'en-tête, en haut et en bas. Avec une sélection de boutons d'en-tête, je réduis la valeur moderne en haut à dix pixels. Encore une fois, je donne la valeur de dix pixels pour le bas. Dans la zone d'en-tête, nous pouvons remarquer qu'il s'agit d'un espacement légèrement supérieur à gauche et à droite. Nous devons réduire un peu la sélection du conteneur sous l'enveloppe de l'en-tête Je modifie la valeur de remplissage pour la gauche et la droite. La valeur a dépassé 20 pixels. Nous avons utilisé la même classe de conteneur dans tous les conteneurs suivants, qui se trouvent dans cette section. Donc, si nous apportons l'une ou l'autre des modifications à cette catégorie en particulier, elle sera automatiquement endettée envers tous les autres conteneurs. J'ai maintenant sélectionné l'enveloppe du contact d' en-tête afin de placer cette enveloppe de contact d'en-tête au centre, en ramenant la valeur de remplissage à gauche à zéro. Nous avons terminé la section d'en-tête. J'en viens maintenant à la section des représentants des héros. À l'intérieur, nous avons un héros masculin. Le malate est si près du bord. Nous devons donc faire en sorte que l'icône et l' identifiant de messagerie soient dans l'article. J'ai sélectionné cette enveloppe principale de héros. Je fais en sorte que la direction soit verticale sous la couche. Afin de l'aligner correctement, je l'aligne vers la gauche pour obtenir un léger espacement. Cliquez sur l'icône de courrier sur un identifiant de messagerie avec une sélection de liens Hero May. Je donne la valeur de remplissage en haut à cinq pixels pour le titre de la zone du héros Réduisons la taille à 35 pixels. Nous avons terminé la section sur les représentants des héros. Je suis maintenant arrivé à la section des services. Dedans. J'ai sélectionné le titre de la section et je change la taille à 30 pixels de la même manière. Je réduis la taille du sous-titre de la section. Je passe maintenant à l'article soviétique qui contient beaucoup d'espace sur l'article de service. Sous l'espacement, je réduis la taille de la reliure ou je baisse la valeur du pixel bêta D. Tous les éléments de services de la section Services semblent fonctionner correctement. Passons à la section galerie. Dans la section galerie, j'ai sélectionné le premier élément de la galerie qui s'y trouve, ou nous l'avons rassemblé inutilisé. Réduisons la taille. Dans le même temps, réduire la taille du titre de la catégorie de la galerie. Nous pouvons maintenant voir que le contenu de l'élément de la galerie n'est pas correctement aligné. Faisons donc en sorte que la valeur de remplissage située à gauche du pixel soit la même pour le rembourrage de droite. Et il y a aussi beaucoup d' espacement et de bas. Je vais donc réduire la taille en leur donnant une valeur de hauteur minimale. Soit la valeur 250 pixels. Maintenant que j'ai sélectionné le deuxième élément de la galerie dans cet outil afin de l' aligner correctement, je modifie la valeur de remplissage et la gauche vers le pixel. Réduisons la hauteur de l'élément de la galerie en lui attribuant une hauteur minimale de 250 pixels et autres sites. Comme nous l'avons déjà fait, nous devons modifier la taille du titre de la galerie et du bloc de texte de la galerie. Et nous devons réduire l' espacement entre le bas de ce paragraphe. J'ai donc sélectionné toute la ligne de titre de la galerie, et je change la valeur de celle-ci à 20 pixels, qui se trouve en bas. Répétons le processus pour l'élément de la galerie avec une hauteur minimale de 50 pixels. Nous avons terminé la section galerie. Je passe maintenant à la section des ateliers. À l'intérieur, j'ai sélectionné le code QR exécuté. Nous devons créer le contenu de ce rap. Savons-nous quels diacres ont donc sélectionné la direction verticale, une autre couche, et alignons-la vers la gauche. Nous devons donner l' espacement entre le but ou la répétition. Donc, avec le choix du code ou du représentant, je donne la valeur de la marge en haut et en bas à dix pixels. Maintenant, je passe à la scène, à ma section de travail. À l'intérieur, nous pourrions remarquer le contenu qu'il contient et si près du h, il n'est pas centré. Pour cela, j'ai sélectionné le CMA. What Grab, que la valeur des pixels soit de 20 pixels sur la gauche. Et maintenant encore une fois, donnons la valeur ou le droit à 20 pixels. Maintenant, je suis arrivée à la vidéo alignée, saisissez-la, j'ai l'impression qu'elle est trop étirée. Je modifie donc la valeur de remplissage en haut et en bas, soit 200 pixels. Maintenant, j'ai l'impression de devoir modifier l'auteur ou le rap en fonction de sa sélection. Je prends une autre taille et je donne la largeur et la hauteur. Et que la valeur soit de 200 pixels chacune. Mais je pense que je dois modifier les valeurs de largeur et de hauteur. Je change donc la valeur à 220 pixels chacun. Je passe maintenant au représentant de la biographie de l'auteur. Comme je pense que je dois réduire l'espacement sur le dessus. Changeons donc la valeur de la marge en haut à zéro. Je passe maintenant à la section «  Licensing Tap ». À l'intérieur. Réduisons la taille du titre du contenu de l'onglet. Maintenant, nous pouvons voir que le design est ajusté selon nos besoins. Et il y a également un espacement plus important la gauche et la droite dans un volet d'onglet. J'ai donc sélectionné l'onglet Ben et je change la valeur de remplissage gauche et à droite à 20 pixels. Je modifie maintenant la taille du sous-titre de l'offre car il doit être plus petit que le titre du contenu de cet onglet. n'y a aucun espacement entre la licence artistique et la commande. C'est un robinet. Nous devons donc faire l'espacement. Je sélectionne donc le barbotage et je donne la valeur de la marge des dix premiers pixels, sorte que l'espace est créé. Encore une fois, je modifie la taille du titre du contenu de l'onglet. Une fois la section sur les licences terminée, je passe à la section des témoignages. J'ai maintenant sélectionné la section des témoignages. Réduisons l' espacement en haut. Je change donc la valeur de rembourrage en haut à 20 pixels. Je vais maintenant réduire la taille du titre de la section. Maintenant, ça a l'air bien. Maintenant, je passe à la question aveuglément si je dois faire en sorte que le contenu savoir si je dois faire en sorte que le contenu de cette ligne ne soit pas un article. Je choisis donc une verticale dans la direction, une autre disposition. Pour être sur la gauche, je l'aligne sur l'ascenseur. En ce qui concerne le détail du client, rappez car il ne s'agit pas directement de l' image et de la lecture. Donc, avec le choix de l'emballage Klein Detail, je modifie la valeur de rembourrage de celui-ci. Réduisons maintenant la taille du contenu du témoignage. Et je modifie également la valeur de rembourrage en haut. Maintenant, j'ai l'impression de devoir modifier la taille du nom du client et du poste du client. Je suis donc en train de changer la taille. Dans la section des prix. Je dois faire en sorte que le représentant du titre du prix ne soit pas un article. Je choisis une verticale pour la section des données. De plus, l'élément tarifaire semble se chevaucher Nous devons donc l' aligner correctement. Je change le rembourrage droit et gauche pendant que vous faites 20 pixels. Ensuite, je vais sélectionner le représentant de la liste de prix, car cela représente beaucoup d'espace Oliver dans l'emballage de la liste de prix. Nous devons donc modifier la valeur de remplissage et laisser la valeur entre deux pixels à gauche et à droite. Maintenant, j'ai l'impression que le contenu du représentant du titre de l'annonce est désormais un autocollant. C'est-à-dire que le MOG devrait figurer sous le titre. Et je choisis la verticale pour la direction. Ensuite, alignez-le vers la gauche. Et créons l' espacement entre les deux. Je donne donc la valeur de la marge en bas pour le titre de la liste. Réduisons maintenant la taille de l'élément de liste. De plus, nous devons réduire la taille du bouton. cette section sur les prix terminée, je passe à la section blog. Au lieu de la section de bloc, j'ai sélectionné l'article de blog. À l'intérieur de cet article de blog, nous devons réduire l'espacement inutile qui le recouvre. Je change donc la valeur du roulement à 20 pixels. Pour tous. Ensuite, je sélectionne le titre du blog et je donne la hauteur sous forme tiret de 1,2 et la taille à 28 pixels. Passons maintenant à la section FAQ. Dans la section FAQ, tout le contenu se chevauche. Donc, dans un premier temps, je sélectionne le résumé du contenu de la FAQ. Et j'utilise déjà une valeur de remplissage à dix pixels sur la gauche. Le contenu y entre quelque peu. Maintenant, je change la bonne valeur de remplissage à dix pixels en haut et en bas à 20 pixels. J'ai déjà réduit la taille de la question d'accordéon en sélectionnant la question correspondante elle-même. Je vais opter pour une autre option plus typée. Avec le choix de la rupture. Je choisis le normal. Encore une fois, je change sa taille à 16 pixels. Nous devons maintenant ajuster la taille qui se trouve dans la liste déroulante. Le contenu de la liste déroulante se trouvera à l'intérieur du double jardin. Je sélectionne donc la sonnette accordéon et je passe à son réglage. En dessous, nous pouvons trouver le menu déroulant Paramètres. Et je choisis l'émission. Maintenant, avec la sélection du paragraphe, je change la taille à 14 pixels. Maintenant, je reviens au décor. Je choisis l'option Masquer. Le formulaire d'abonnement semble fonctionner correctement, donc je l'ignore et je passe contrat, à partir de la section huit. Réduisons l'espacement entre les deux en sélectionnant un enveloppement détaillé du formulaire de contact. Je suis prêt à utiliser la valeur de remplissage à 20 pixels. Changeons la taille du téléphone et de l'adresse masculins. Donc, avec la sélection d'un titre détaillé, je donne 22 pixels à la taille S. Je choisis maintenant le membre de contact, qui sera applicable à la zone e-mail et au numéro de téléphone. Et je donne à la taille S 16 pixels avec une sélection de champs de formulaire de contact. Réduisons l' espacement en modifiant entièrement la valeur du rembourrage. Nous devons également réduire la taille des champs de saisie. Je change donc la valeur de taille à 18 pixels. Et pour ce qui est de l' espacement entre chaque remplissage de saisie, je choisis l'enveloppe de saisie du formulaire. Et je change la valeur de la marge en bas à 40 pixels. Applaudissements. Nous arrivons à la zone de bas de page. Dedans. Je choisis la section sur les droits d'auteur. Les considérations relatives au droit d'auteur se chevauchent. Je sélectionne donc le menu d'entreprise enveloppant, disons le menu protégé par le droit d'auteur, et choisis le lien Food Domino. Et je choisis le bloc S et un autre écran. Donc, tout sera dans un bloc. Et après avoir sélectionné l' intégralité du menu Copyright, je choisis le centre dans la zone alignée sous la typographie. Afin de créer l'espacement entre chacun des liens du menu, je donne à la valeur de remplissage les 210 premiers pixels. En bas, faites dix pixels. Maintenant, je choisis les textes protégés par les droits d'auteur et je choisis de les centrer sur la typographie alignée ou autre afin de réduire l'espacement entre la section sur les droits d'auteur et l'élément social du pied de page. Avec une sélection de sections sur les droits d'auteur, je réduis la valeur de la marge en haut à 20 pixels. Et maintenant, réduisons la taille du contenu du pied de page Tidal à 26 pixels. En prenant la section photo, nous constatons que la taille des détails de l'adresse devrait être réduite. Je change donc la taille à 17 pixels. Et nous devons également réduire l'espacement sur le fond. J'ai donc sélectionné une enveloppe détaillée du formulaire de contact, et je donne une valeur de remplissage inférieure à 40 pixels. Pour en venir à la section blog, nous devons réduire la hauteur de ligne de celle-ci. Je sélectionne donc le titre du blog et je donne la valeur de hauteur à 1,1 tiret. Et je change la taille avec 26 pixels. Pour en revenir à la section des témoignages, il y a beaucoup d' espace en bas. J'ai donc sélectionné cette section , puis j'ai modifié la valeur de rembourrage inférieure à 60 pixels. Je fais défiler la page en arrière pour vérifier si tout va bien ou non. Donc, dans cette leçon, nous avons créé tout ce qui est nécessaire pour le code mobile, n'est-ce pas ? Dans la prochaine leçon, nous allons terminer le coiffage nécessaire, une aiguille pour le port mobile, n'est-ce pas ? Et nous ferons également le style de la page d'article de blog unique. Dans chacun des points d'arrêt. 50. Réactive à la finalisation et à la publication simple: Dans cette leçon, nous allons compléter l'ancien style inutile nécessaire aux points d'arrêt des portraits mobiles. De plus, nous compléterons le style nécessaire pour la page d'article de blog unique. Dans chacun des points d'arrêt. Voyons comment nous allons y parvenir. Encore une fois, je pars de la première zone de cette grille de zones de héros. Je pense que nous devons réduire le rayon de la frontière. Je passe donc sous les bordures et je suis prêt à utiliser la valeur du rayon à 20 pixels. Faisons de même pour l'élément de service afin qu'il soit appliqué au rappel ultérieur de ces objets. Changeons la valeur du rayon pour l'élément de galerie 123.4. Dans la section atelier, tout semble aller bien. Passons à autre chose. J'ai maintenant sélectionné cet e-mail ou ce graphique et je modifie la valeur du rayon. J'ai sélectionné le rap aligné sur la vidéo, mais dans le Stein Manager, il n' y a aucune valeur de rayon. Nous avons donné la valeur du rayon dans un autre développé. Ce truc se trouve dans la rangée de vidéos de travail. Ici, nous avons donné la valeur du rayon, nous allons donc la modifier. Ensuite, j'ai sélectionné l'image du modèle de licence. Nous avons donné ici la valeur du rayon. Changeons-le donc au toucher et je change la valeur du rayon. Même pour la valeur de l'offre, je dois changer la valeur du rayon à 20 pixels. Je passe maintenant à l'élément de témoignage. Ensuite, dans la section des prix, j'ai sélectionné les éléments tarifaires et je modifie la valeur du rayon pour qu'elle corresponde au pixel. Il va même nous permettre de modifier la valeur du rayon pour le représentant de la liste de prix, n'est-ce pas ? Il doit ressembler au rayon de prix correspondant à l'article de blog. Changeons la valeur du rayon ici. Même pour le résumé du contenu de la FAQ. Ensuite, vous trouverez un résumé détaillé du formulaire de contact. Enfin, pour les champs du formulaire de contact, nous avons terminé le style dans le point d'arrêt droit du port mobile. Je suis maintenant sur la page de collection. Il y en a pour une seule page d'article de blog. Nous avons déjà conçu le point d'arrêt de base. Passons au point d'arrêt de la tablette. Ici, nous devons réduire la taille du titre de l'aiguille du blog. Ici, je change la valeur de taille à 35 pixels. J'en suis maintenant au dernier point d'arrêt, savoir le produit mobile, n'est-ce pas ? Point d'arrêt. Parce que dans tous les autres points de rupture, le style semble correct. Je suis donc arrivé à la dernière chose. J'ai maintenant sélectionné l' en-tête détaillé du blog car nous devons en réduire la taille. Je change donc la taille à 30 pixels. Maintenant, j'ai sélectionné le détail du bloc Meta parce qu' il contient à la fois la date de publication et notre tonique. Je dois faire en sorte que ce soit à la verticale. Je suis donc passé dans la direction et je sélectionne la verticale. Passons donc à l'espacement de la grille entre les deux. Je sélectionne donc l'auteur des détails du blog et je donne la valeur du remplissage à D2. Ensuite, le pixel, comme dans le blog, a besoin d'un titre. J'ai l'impression qu'il y a une plus grande hauteur de ligne. J'enseigne donc la hauteur à 1,2 tiret. Faisons l'espacement sur le dessus pour le rack Broglie Dell. Je donne donc la valeur de rembourrage du dock à 40 pixels. Cela représente plus d'espacement en bas pour la section des détails du blog. Je change donc la valeur à 60 pixels. Ainsi, à chaque point d'arrêt, la page d'un article de blog unique semble convenir. Ainsi, dans la prochaine leçon, nous finaliserons notre site Web en corrigeant le nom de la classe. Résultats de l'audit du flux de travail. Le site Web est EL, qui voit les performances du site Web. Enfin, nous allons rendre le formulaire de contact utilisable. Nous verrons tout cela dans les prochaines leçons. 51. Correction des noms de cours et nettoyage: Dans cette leçon, nous allons courber le nom de classe et nettoyer le nom de classe inutilisé. Plongeons-nous dans la leçon. Sur votre droite, vous pouvez voir la structure en forme de trois gouttes. Cela représente moins de gestion d'enfants. À l'intérieur. Nous avons pu voir un tas de classes que nous avons créées jusqu'à présent. Maintenant, je fais défiler toutes les classes pour vérifier si nous avons correctement créé avec la première lettre chez les chats. J'ai donc trouvé cette section de blocage dedans. Nous devons faire un W dans les lacunes. Maintenant, je clique sur l'icône en forme de clé, qui correspond à ce nom de classe. Ici, nous pourrions le renommer. Maintenant, je change le W majuscule W2 afin que nous puissions voir que le nom de classe a été mis à jour. Vérifions les cours restants si tout va bien. Maintenant, je vais utiliser l'option de nettoyage pour nettoyer les classes ou les styles inutilisés . Ici, j'ai trouvé celui qui avait cet enfant en particulier ou qui n' associé à aucun élément de page. Je vais donc le supprimer. Ensuite, je choisis l'interaction. Ici, nous avons notre élément, Rico, et une pâtisserie. Maintenant, je clique sur le nettoyage pour effacer les éléments inutilisés et c'est parti. Mais ici, nous n'avons aucun des déclencheurs et animations inutilisés. Nous avons Garreta, le nom de la classe, et avons également supprimé les détails inutilisés. Dans la leçon suivante, nous allons voir les résultats de l' audit du flux de travail. 52. Résultats de l'audit du flux Web: Dans cette leçon, nous allons voir les résultats de l'audit dans le Webflow. Nous pouvons détecter et résoudre les problèmes d'accessibilité dans le panneau d'audit. Dans le coin inférieur gauche, nous avons le panneau Audit de forme carrée. En cliquant dessus, nous pourrions trouver l'ensemble des résultats de l'audit. Cette planète d'audit adaptera les problèmes courants liés à l'accessibilité afin que nous puissions les résoudre avant la mise en ligne de notre site. Nous avons ici une erreur critique et une erreur modérée. Les erreurs critiques ou le panneau d'audit, le carré rouge, les erreurs modérées ou le panneau d'audit avec le triangle jaune. Je vais maintenant voir les résultats de l' audit de notre site. Dans ces audits, nous avons relevé 29 erreurs critiques, savoir avec le carré rouge et les erreurs de modération avec les triangles. Pour en venir à la première, nous obtenons les résultats de l'audit avec un texte alternatif manquant , nous devons donc y remédier. Avant cela, nous voulons savoir ce qu'est le texte alternatif. Nous pouvons avoir le scénario, les personnes, les personnes aveugles malvoyantes ou malvoyantes. Nous utiliserons l'option de lecture d'écran afin de connaître la fonction du contenu de nos images sur le site Web. Les lecteurs d'écran afficheront le contenu du texte et de l'image sous forme de discours adressé à ces personnes. absence de texte alternatif signifie que nous avons inclus l'image sans texte alternatif descriptif. Si une image contient des informations essentielles qui ne sont disponibles nulle part ailleurs sur la page, une personne qui ne voit pas l'image manquera les informations auxquelles nous devons donner les textes alternatifs chacune des images que nous avons créées sur ce site. Maintenant, j'ai sélectionné les textes alternatifs manquants qui se trouvent aux 24 endroits. Si nous cliquons sur la flèche, cela nous amènera à l'endroit où nous devons apporter les modifications. Dans la section des héros, nous n'avons pas indiqué le texte alternatif pour cette image. Je clique donc sur cette image et je choisis la description personnalisée sous le texte alternatif. Et je donne à la zone Alt-Text S Hero des femmes. Encore une fois, je retourne au panneau d'audit et je choisis la prochaine erreur critique. Nous n'avons pas créé le texte alternatif pour cette icône de courrier. Je choisis donc le texte alternatif comme description personnalisée et je donne le texte alternatif comme icône de courrier en héros. Ensuite, j'ai sélectionné une autre erreur. Cela nous a amené à cette section OB. Je n'ai pas de Gilda pour chaque icône du service. J'ai donc sélectionné la première icône et je donne l'Arctic S. Donc, avec l'icône, je fais le même processus pour les deux autres images. Faisons le même processus pour tout le texte alternatif manquant. Nous avons donc enfin corrigé toutes les erreurs critiques. Passons aux erreurs modérées. C'est-à-dire avec l'icône en forme de triangle jaune. Les erreurs de ce modèle indiquent l'erreur lorsqu' un niveau de titre a été ignoré. Voyons quel est le niveau de titre ignoré. Trois niveaux de titre désignent nos éléments de titre, c' est-à-dire H1, H2, H3, etc. N'utilisez pas la bonne hiérarchie de titres. Quelle est la rubrique la plus importante. Pour se diriger, vous atterrirez sous le H1. Ainsi de suite. hiérarchie des titres est donc rompue. Si nous avons sauté un niveau de titre que nous devons corriger, nous avons sauté un niveau de titre. J'ai maintenant sélectionné l'erreur. Cela nous amène à la section des services. Dans le sous-titre de cette section, nous devons modifier la balise de titre. Dans le message contextuel. Cela montre quelle erreur a été bonne, lisons-la à haute voix. Le niveau de titre précédent est H1, donc l'expert ou le niveau suivant est H2. Il s'attend donc à ce que nous changions le niveau deux, H2. Et nous aurons également une option pour corriger cette erreur. Nous pouvons choisir l'option inutile qui nous convient. Maintenant, j'ai sélectionné cette oasis, je vais dans les paramètres et je change le type de titre en outil de couverture. Maintenant, je choisis l'ère suivante. Cela nous amène à la section des témoignages. En cela, il affiche le nom du client. Ici. Il nous demande de changer le titre de niveau deux, de couverture trois. Je vais donc changer le type de titre dans l'historique. Nous avons maintenant une autre flèche dans le travail du client. Cela nous demande de changer le titre de niveau 2, h4. Nous avons une autre erreur dans la valeur de notation, nous nous attendons à ce que nous modifiions le niveau 2 de la rubrique Hedge phi. Changeons donc le niveau 2 du titre Hedge phi. Maintenant que nous avons terminé toutes les erreurs, nous recevons donc le message intitulé Known Issues Farm. Dans la prochaine leçon, nous parlerons des paramètres de référencement d'un site Web. 53. Paramètres du site Web SEO: Dans cette leçon, nous allons créer balise title et la méta-description, qui sont essentielles pour l' optimisation des moteurs de recherche SEO. Voyons donc comment procéder. Balises de titre et méta-description pour ce site Web. Pour ce qui est de notre projet ici, nous n'avons pas de tag de titre. Nous devons y ajouter une balise de titre. Nos balises de titre et notre méta-description peuvent être affichées dans les résultats des moteurs de recherche. Le fournisseur de balises de titre et de description prévisualise le contenu de notre page et nous devons y ajouter une balise de titre. Voyons comment ajouter une balise de titre au site Web. Pour ajouter cela, je vais aller sur la page, dire des choses, et je passe aux paramètres de référencement. Dans celui-ci, nous pourrions trouver un titre et une méta-description dans la balise title. Je vais lui donner un titre. Je l'ai donné en tant qu'artistes, Webflow, HTML, modèle de site Web. Nous devons également leur donner une méta-description. La méta-description convaincante peut vous aider à générer plus de clics. Je leur ai donné une méta-description. Éliminons les erreurs et disons que nous en avons besoin. Je vais maintenant le publier pour voir comment il fonctionne. Maintenant, je charge ce côté pour que nous puissions voir la dette immobilière. Maintenant, en séance de page, je sélectionne ce modèle d'article de blog car il nous mènera à une autre page. Comme il s'agit d'une page distincte, nous devons vérifier si elle contient des balises de titre et une méta description. Nous pouvons donc voir ici qu'il ne s'agit pas d'une balise de titre. Je vais utiliser ce titre de blog comme balise de titre. J'ai donc sélectionné le modèle d'article de blog situé sous le paramètre SEO. Je vais accéder à la balise title. Sur le côté droit. Nous pouvons trouver que cela correspond au champ Ajouter pour lequel je choisis le nom parce que j'ai donné le nom du champ Il récupérera l' en-tête du blog depuis le module complémentaire de collection associé au champ. J'ajoute un Webflow, un modèle de site Web HTML. Je suis en train de le sauvegarder. Publions ceci. Je recharge cette page. Maintenant, je peux voir la dette du titre. Dans cette leçon, nous avons donné la balise title et la méta-description de ce site Web. Dans la prochaine leçon, nous allons voir quelles sont les performances du site Web que nous avons créé. 54. Performance de site Web: Dans cette leçon, nous allons voir quelles sont les performances de notre site Web. Tout d'abord, nous devons réduire le CSS. Cela réduira la taille du fichier sans modifier la façon dont le fichier CSS s'exécute dans la ligne. Ainsi, en supprimant les données inutiles du code CSS, cette ammonification aide le navigateur à télécharger et traiter les fichiers plus rapidement et à augmenter les performances de la page. Voyons comment modifier le CSS. Je poste. Je sélectionne l' option ci-dessous. Je choisis l'option avancée ici. J'active minify CSS. Maintenant, publions ceci. Maintenant, je charge la page. Faisons défiler la page sur la valeur de chaque chose. Donc tout semble bien. Nous avons même pu faire défiler la page en douceur. Maintenant, afin de voir les performances de la page dans le navigateur, j'ai chargé notre site Web. Sur le bouton droit de la souris. Nous faisons inspecter l'option. Nous y trouverons un tas d'options. Je choisis un phare. Cliquons maintenant sur le rapport généré. Dans le rapport, nous aurons le score. Nous obtenons le score de la performance ainsi que les détails la concernant. Les détails et le score pour l'accessibilité. Il en va de même pour les bonnes pratiques et le référencement. Dans la prochaine leçon, nous parlerons de la soumission du formulaire de contact et de la possibilité pour l'homme de recevoir une notification concernant la soumission du formulaire de contact. Et nous verrons également une frontière entre les formes de données de mission. 55. Formulaire de contact - Obtenir des courriels adéquats: Dans cette leçon, nous verrons comment envoyer un formulaire de contact et comment configurer l'e-mail pour recevoir une notification lors de l'envoi du formulaire de contact. Pour commencer, je vais accéder aux paramètres du projet. Passons maintenant à l'étape du formulaire. Cela nous donnera toutes les options relatives à l' utilisation des données contenues dans une soumission réussie. Désormais, les données des personnages seront envoyées par e-mail par défaut. L'option commence par un nom d'entreprise. L'e-mail est envoyé. Quel nom d'entreprise souhaitez-vous afficher ? Ensuite, nous avons l' adresse e-mail ou les adresses e-mail. Vous souhaitez que les soumissions soient identiques car vous pouvez ajouter d'autres adresses e-mail. Utilisez simplement une virgule à la fin de l'adresse e-mail et ajoutez une autre adresse e-mail. Ensuite, la ligne d'objet de cet e-mail, la rediffusion pour traiter cette facture avec l'adresse e-mail utilisée. Si vous recevez un formulaire d'e-mail destiné à un patient et que vous cliquez sur Replay, vous pouvez copier le nom et les variables d' e-mail à droite de ce champ et les coller et je répondrai à l'adresse. Cela garantira que les réponses à cet e-mail seront envoyées directement à l'adresse e-mail enregistrée sur le téléphone. Et enfin, nous avons le modèle d'e-mail. Vous pouvez le laisser tel quel, ou vous pouvez écrire votre propre mouvement en utilisant l'une des variables situées sur la droite et même y mettre du code HTML personnalisé. Nous allons maintenant soumettre le formulaire de contact et voir comment il fonctionne. Donc, dans le nom, je le donne sous forme de Webflow. Et donnons l' identifiant e-mail sous la forme gmail.com. Pour l'entreprise. Je suis en train de nous envoyer un onglet « Workflow ». Je donne quelques chiffres au numéro de téléphone et je passe certains messages ici. Soumettons-le. Maintenant, je reçois le message de réussite. Ainsi, lorsque le formulaire est soumis, ces données de soumission seront répertoriées ci-dessous. Et d'autres formes de données de vision. Nous avons maintenant vu ce qui se passe lorsqu'un utilisateur soumet le formulaire, pourquoi les données sont stockées et comment lui envoyer des notifications par courrier. Nous avons donc terminé tout ce qui était nécessaire pour le modèle de site Web de notre artiste. Au fur et à mesure que nous l' avons développé avec le modèle, nous devons savoir comment modifier la couleur du contenu et effectuer certaines des modifications nécessaires. Nous allons le voir dans la prochaine leçon. 56. Personnalisez votre site Web en fonction de vos besoins: Nous avons terminé le modèle de site Web de l' artiste. Les utilisateurs qui utilisent notre modèle peuvent souhaiter changer la couleur de ce contenu et ils modifieront également son contenu afin que nous devions vérifier s'il fonctionne correctement ou non. Faisons la vérification de ce contenu et de ce changement de couleur. Alors maintenant, je vais vérifier le contenu qui a la couleur orange. Nous l'avons utilisée, la couleur principale pour les liens de navigation et pour le sous-titre de la zone héros pour les services, pour la galerie. Commandes en pourcentage, prix et certains libellés de l'élément de liste pour le blog et la newsletter d'assistance et contactez-moi. Donc ils utilisent tous, euh, les couleurs primaires. Maintenant, je passe à un autre type de graphique, G. Je choisis la couleur. Nous avons utilisé la couleur primaire de l' échantillon. Maintenant, je vais changer la couleur manière à avoir changé la couleur de la couleur primaire. Nous pouvons donc maintenant remarquer que la couleur a été modifiée. Pour modifier le contenu que nous avons. Et notre autre option, qui est l'édition automatique, nous pourrions accéder à cet éditeur dans les paramètres du projet. Cet éditeur demande de mettre à jour le contenu d'une annonce dans une interface simple, ce qui est idéal pour les clients ou coéquipiers qui n'ont pas besoin de la complexité du concepteur. Il est donc principalement utilisé pour ajouter ou mettre à jour le contenu. Nous sommes maintenant dans l'éditeur. Je souhaite modifier le sous-titre autorisé. Ma passion en tant que dessin est ma passion. Même si je change le titre en art numérique, augmentez le dégradé. Supposons que si nous pouvons changer l'image, je double-clique dessus. Je vais choisir une autre image pour qu'elle soit mise à jour. Maintenant, je vais le publier. Nous en sommes clairement arrivés là. Pour cocher une spore dans un nouvel onglet, je charge notre modèle de site Web afin que nous puissions voir les modifications que nous avons apportées. Si nous voulons effectuer plus de modifications, cliquez simplement sur ce site d'édition. 57. Conclusion, Merci !: Félicitations pour avoir terminé le cours avec succès. Ce fut un long voyage pour nous deux. Maintenant, vous pouvez créer des sites Web incroyables. J'espère que vous avez apprécié ce cours et je vous en serais reconnaissant. Si tu pouvais laisser un commentaire sur ce cours. Si vous avez des questions, n'oubliez pas de me les poser dans la section de discussion. J'ai des raisons concernant l'illustration et la conception graphique. Si cela vous intéresse, vous pouvez y aller. Il n'a pas été conçu pour être votre instructeur. Et je te souhaite tout le meilleur. Merci.