Aucun code de conception Web - bases de données pour les débutants

1. Vidéo d'introduction: Salut, je suis Kai. Et ensemble, nous apprendrons toutes les bases de Webflow en créant votre tout premier site Web à partir de zéro. Webflow est désormais un outil de développement Web sans code qui vous permet de créer sites Web personnalisés complets sans avoir à apprendre le HTML, le CSS et le JavaScript. Au lieu de cela, nous allons créer le site Web de manière entièrement visuelle à l'aide de l'interface de l'éditeur Webflow. Maintenant, dans ce cours, vous allez apprendre les tenants et aboutissants de la structure des sites Web et comment créer tous les éléments nécessaires à un bon site Web. Nous aborderons la différence entre les sections, contenants, les marges et le rembourrage et bien plus encore. Ce cours est basé sur des projets, ce qui signifie que nous apprendrons toutes les fonctionnalités fondamentales en créant une page de destination complète à partir de zéro. Nous travaillerons avec des images, des classes CSS et des classes combinées, des couleurs et des typographies. Mais nous allons également apprendre à créer des mises en page plus complexes à l'aide d' une grille et d'une boîte flexible. Bien entendu, nous apprendrons également à créer un formulaire de contact et à rendre notre site Web réactif afin qu'il soit utilisable sur tous les appareils. Vous souhaitez en savoir plus sur le flux de travail. Si c'est le cas, je vous verrai lors de la première conférence. 2. Qu'est-ce que le Webflow ?: Avant de nous plonger dans notre projet, parlons de ce qu' est Webflow et de ce que vous pouvez en faire. Notre flux de travail n'est pas exactement un générateur de pages, mais il n'est pas non plus complet sur le codage, comme le développement. Nous n'allons pas taper de code. C'est ce qu'on appelle une note appelée outil. Nous téléchargeons maintenant le concepteur, l'interface de Webflow pour apporter toutes nos modifications de style, ainsi que la conception et le développement visuels de notre côté à l' aide on appelle le panneau de style. Celui-ci, ici. Comme vous pouvez le constater, nous avons accès à toutes ces différentes options. Nous pouvons ajouter un type, des arrière-plans et des choses comme ça. Et grâce à cela, nous pouvons créer notre site Web visuellement via Webflow dans un code HTML, CSS et JavaScript très propre pour nous. Nous avons maintenant accès à ce code. Et nous pouvons également exporter notre site Web sous forme de code. Mais si tu ne le veux pas, tu n'as pas à toucher ce côté. Et c'est vraiment génial avec Webflow. Ainsi, vous pouvez toujours voir exactement sur quoi vous travaillez. Tout est visuel, ce qui est parfait pour les designers. Et cela nous permet de créer à peu près tous les sites Web. Mais nous voulons. Maintenant, il y a certaines choses que nous pouvons faire spécifiquement avec ce flux. Maintenant, Webflow est parfait pour les sites Web statiques simples comme celui-ci que nous allons créer dans cette classe. Cependant, nous pouvons également créer des CMS, pilotés par un système de gestion de contenu sites Web pilotés par un système de gestion de contenu qui soient plus dynamiques. Vous pouvez également créer des boutiques en ligne ainsi que des sites Web d'adhésion. Nous avons donc de nombreuses options. Nous pouvons créer une grande variété de sites Web différents. Et tout cela sans écrire une seule page de code, ce qui est parfait. C'est ce que Webflow est, c'est un outil de développement sans code qui vous permet créer et de développer des sites Web sans écrire de code. 3. Projet du cours: Bien, avant de nous plonger dans Webflow, jetons un coup d'œil à ce que vous allez apprendre. Donc, dans ce cours, nous allons créer un site Web complet du début à la fin. Vous allez maintenant apprendre à créer ces navigations. Vous allez jeter un coup d'œil à notre travail de typographie. Vous allez donc créer l'intégralité de ce site Web. Nous avons donc une disposition en trois colonnes. Nous avons donc une disposition en deux colonnes, ce qui signifie que nous allons tous travailler avec ce que l'on appelle le composant de grille. Vous allez apprendre à créer les effets de survol des boutons. Vous allez créer ces sections de tarification plus complexes et même créer un formulaire de contact fonctionnel. Et à la fin, vous allez également ajouter ces lumières dans des animations, relier l' ensemble du site Web à l'aide de nos liens. Et c'est ce que nous allons construire dans ce cours. 4. Créer et gérer des sites: Très bien, une fois que vous avez créé compte Overflow et que vous êtes prêt à partir, assurez-vous d'accéder à votre tableau de bord en cliquant simplement sur l'élément de navigation du tableau de bord. Et maintenant, nous devons créer notre premier projet. Ainsi, dans votre tableau de bord, vous avez ici la liste des projets sur lesquels vous travaillez. Vous pouvez maintenant les placer dans des dossiers pour créer un nouveau dossier, vous pouvez cliquer sur ce bouton ici. Cela vous permet de créer de nouveaux dossiers afin mieux organiser vos documents. Maintenant, pour créer un nouveau document, un nouveau site Web, cliquez simplement sur le bouton du nouveau site. Maintenant, lorsqu'il s'agit de démarrer un nouveau projet, nous avons différentes manières de procéder. Maintenant, ma méthode préférée consiste simplement à utiliser le préréglage du côté vide. C'est un site Web sans aucun contenu, sans cours, rien. Une table rase. Nous pouvons partir de zéro si vous voulez avoir un point de départ, mais Flow propose des modèles gratuits prêts à l'emploi. Mais vous pouvez également acheter des modèles sur le marché des modèles. Qui va démarrer un nouveau projet. Il vous suffit de passer la souris sur le modèle que vous souhaitez sélectionner. Dans notre cas, côté vide et cliquez sur Sélectionner. Nous pouvons maintenant lui donner un nom. Appelons-le simplement le projet Skillshare. Comme ça, et cliquez sur Créer un site. Et c'est ainsi que notre site Web a été créé. Nous pouvons maintenant commencer à examiner l'interface utilisateur et la manière de travailler réellement sur nos sites Web. 5. L'interface: Bien, maintenant que notre site Web est créé, faisons un bref tour d'horizon de l'interface utilisateur ou de Webflow. Maintenant, commençons ici, sur le côté gauche. Nous avons donc ce flux de travail : le vétérinaire local passe au menu des hamburgers lorsque nous avons un oiseau, ce qui nous donne accès à notre menu. Donc, ici, nous pouvons accéder au tableau de bord ou aux paramètres du site. Par exemple, chaque fois que vous devez revenir à l'un d'entre eux, utilisez simplement le menu ci-dessus. Et puis en dessous, nous avons un tas de menus différents. Donc, par exemple, nous avons ceci et je peux ajouter un menu d'éléments. Et ici, par exemple, nous avons accès à tous les différents éléments, mais nous pouvons les ajouter à notre page et les utiliser pour créer nos sites Web. Vous disposez également de ce menu de composants. Vous avez accès à V Navigator, qui nous montre la structure de la page. Chaque fois que nous travaillons sur notre projet, nous souhaitons toujours que le flux s'ouvre. Donc, s'il n'est pas épinglé sur le côté, vous pouvez l'épingler sur le site en cliquant sur cette icône dans le navigateur jusqu'à ce qu' il ressemble à cela. Vous pouvez également le redimensionner si nous survolons le bord , comme c'est le cas. Maintenant, si vous travaillez sur un très petit écran, vous pouvez le laisser flotter comme ça. Assurez-vous que chaque fois que vous recherchez un élément, vous souhaitez vérifier la structure de votre site, assurez-vous d'utiliser le navigateur pour cela. Je vais l'épingler au Navigator. Tu l'adores. Nous avons également accès à nos pages. Maintenant, ce menu nous permet de gérer et de rechercher toutes nos pages, mais nous avons sur notre site Web pour créer de nouvelles pages, il suffit de cliquer dessus créer une nouvelle page ici. Vous pouvez également les structurer en dossiers pour mieux les organiser. Et en dessous, nous avons des icônes gratuites. L'un est le menu CMS, l'autre est le menu V Users et un menu V e-commerce. Et cela sera utilisé pour fonctionner avec l'une ou l'autre de ces options. Donc, si vous voulez un système de gestion de contenu, donc si vous créez un blog, par exemple, vous souhaitez utiliser le CMS. Si vous créez des sites Web d' adhésion, vous aurez besoin du menu utilisateur, etc. Maintenant, en dessous, nous avons le panneau des ressources, où nous téléchargeons toutes nos images, nos icônes et d' autres éléments de ce genre. Vous pouvez gérer tout cela dans le panneau Actifs. Et bien sûr, nous avons certains paramètres que nous pouvons utiliser. Maintenant, ce n'est pas quelque chose qui nous intéresse en ce moment. Fermons ça. Très bien, passons maintenant au milieu. Nous avons cette grande zone droite. C'est là que nous construisons notre page, nos visites, notre site Web en ce moment, c'est une feuille blanche. Rien n'est encore honoré. exception de l'élément corps, qui n'est à peu près qu'un support pour notre contenu, pour notre site Web. Ici, nous avons quelques icônes. Voici donc les points d'arrêt. Grâce à cela, nous pouvons basculer entre le mode tablette, Enscape, l'affichage mobile ou mobile. Nous pouvons également utiliser les normes pour décider de modifier la taille. Je ne suis plus sur la toile. Et à l'aide de ces points d'arrêt, nous pouvons rapidement vérifier l'apparence d'un élément sur différentes tailles d'écran. Et c'est un web très moderne. Tout le monde a un moniteur différent. La plupart des gens consultent quelques sites Web à l'aide de téléphones ou de tablettes. Toutes nos conceptions doivent donc être réactives. Et en utilisant ces points d'arrêt, si nous pouvons nous assurer que notre site Web fonctionne et s'affiche bien, différentes tailles d'écran. Maintenant, à l'extrême droite, nous avons notre panneau. Et ici, nous pouvons appliquer tous les styles différents et donner à nos sites Web une belle apparence. Cela se comportera de la même manière que si vous travailliez dans Figma ou Photoshop. Et la façon dont vous ajustez la topographie des entrées, etc. Maintenant, ici, nous avons d'autres onglets. Nous avons donc certains paramètres d'éléments qui changeront en fonction de l' élément que vous avez sélectionné. Nous avons un gestionnaire de style qui nous montrera une liste de tous les différents clusters que nous utilisons dans notre projet. Et notre activité peut également nettoyer notre produit, notre site Web, des styles, mais nous n'utilisons pas et les matières grasses ne sont pas utilisées. Nous pouvons les supprimer très facilement en cliquant sur le bouton de nettoyage. Et puis aussi le menu d'interactions, qui nous permet de créer des interactions et des animations pour notre site Web. Passons maintenant à l'interface utilisateur. Ce n'est pas trop. C'est simple Et je vous verrai lors de la prochaine conférence. 6. Ajout de polices personnalisées: Très bien, donc avant de commencer à travailler sur notre projet de site Web, nous devons faire certaines choses. Donc, tout d'abord, nous devons ajouter des polices personnalisées à notre projet, c'est ce que nous allons faire dans cette conférence. Maintenant, ajoutez de nouvelles polices à vos projets. Ou vous ne souhaitez pas uniquement utiliser les polices de base déjà préinstallées et Webflow. Maintenant, pour ajouter de nouvelles polices, c'est très simple et nous avons différentes manières de le faire. Nous passons aux paramètres de notre site. Donc, si vous cliquez sur l'icône du menu et accédez aux paramètres du site. Maintenant, dans les paramètres de ce site, vous pouvez modifier son nom, par exemple ici dans les paramètres généraux. Et nous pouvons ajouter un favicon et des trucs comme ça. Il y a beaucoup plus d'options ici. Ce qui nous intéresse en ce moment, c'est le pas à la police de caractères. Alors, ici, cliquez sur les polices. Nous avons maintenant trois manières différentes d' ajouter de nouvelles polices à Webflow. Tout d'abord, le moyen le plus simple est d'utiliser Google Fonts. Nous avons donc ici une grande liste de polices différentes auxquelles nous pouvons facilement ajouter deux flux de travail, nous avons des polices personnalisées. Donc, si vous avez déjà installé une police sur votre ordinateur, ou si vous le souhaitez, vous devez utiliser polices que vous avez créées vous-même. Vous pouvez les télécharger ici. Ensuite, nous pouvons également connecter notre compte Adobe à l'aide la clé API et à Adobe Fonts si vous le souhaitez. Nous allons maintenant installer deux polices différentes. L'un sera Open Sans et l'autre sera un chemin de fer, que nous utiliserons pour les titres et autres choses de ce genre. J'aime beaucoup la combinaison. Passons donc à Google Fonts. Et une fois que vous avez cliqué sur cette liste déroulante, vous pouvez commencer à saisir le nom de la police que vous souhaitez ajouter. Tapons chemin de fer et cherchons chemin de fer ici. C'est ici. À l'heure actuelle, nous avons de nombreuses variantes, de nombreux poids de police différents, mais nous pouvons en ajouter. Maintenant, je veux utiliser nous avons trouvé principalement pour les en-têtes. Donc, ce que je vais faire, c'est prendre les 700 dollars, ce qui est un poids audacieux. Je vais également garder la version normale au cas où. Maintenant, la raison pour laquelle vous ne souhaitez pas tous les activer est de les réduire au minimum. Plus vous avez installé de polices sur votre site Web, plus le chargement prendra de temps. Donc, en choisissant ceux dont nous aurons réellement besoin vous augmenterez la vitesse de chaque ralentissement de votre site Web. Nous allons donc choisir Irregular et 700. Ensuite, nous cliquons simplement sur Ajouter une police. est ainsi que nous avons ajouté le fonds ferroviaire à notre projet Webflow. Maintenant, nous voulons également Open Sans et je le fournis. Je l'ai Vous pouvez également l' installer via, via Google Fonts. Mais pour vous montrer comment nous installons des polices personnalisées, vous pouvez les trouver dans vos fichiers de projet dans le dossier des polices. Nous allons donc cliquer sur Télécharger sous les polices personnalisées. Ensuite, recherchez les dossiers de polices dans vos fichiers de projet. Et ici, nous avons Open Sans Light et Dracula. Sélectionnez les deux et cliquez sur Ouvrir. Et maintenant, comme vous pouvez le voir, nous avons nos deux polices ici. Et nous devrons cliquer sur Télécharger le fichier de police ou sur les deux. est ainsi que nous avons installé Open Sans et avons intégré notre site Web. Si vous revenez à notre designer, ce que nous pouvons faire en cliquant sur cette partie violette ici. Et sélectionnons simplement l'élément du corps. Accédez à vos paramètres de topographie dans le gestionnaire USD. Et ici, vous pouvez voir les polices personnalisées , à savoir Open Sans. Donc, comme vous pouvez le voir, si nous le sélectionnons, nous avons un fléau normal. Et nous avons également un chemin de fer juste ici. Nous avons un site éditorial normal et audacieux. Et c'est ainsi que vous pouvez ajouter des polices personnalisées pour votre projet. 7. Créer la première section - travailler avec des sections et des conteneurs: Très bien, donc dans les leçons suivantes, nous allons créer notre première section, qui sera cette section de héros belle et propre. Nous allons ajouter du rembourrage à l'élément de section b, r. Eh bien, dans un premier temps, nous allons apprendre comment ajouter de nouveaux éléments. Et nous parlerons également des classes CSS. Ensuite, nous allons ajouter du texte comme ce titre ici, ce paragraphe. Je vais également vous montrer comment vous pouvez réellement envoyer ce paragraphe. Et c'est ce que nous allons aborder dans cette première conférence. Nous allons créer l'élément de section proprement dit, puis construire ce conteneur. Ensuite, nous allons également ajouter l'ensemble de notre typographie. Cette section. Commençons à intégrer cela dans notre projet. Maintenant. Tout d'abord, laissez-moi supprimer ce droit très rapidement. Bien, maintenant nous avons une table rase. Nous avons créé un cluster par workflow car j'ai montré les paramètres de typographie dans la vidéo précédente. Maintenant, tout d'abord, nous devons créer. Vous devez indiquer à notre site Web les polices à utiliser et les paramètres de base de saisie. Chaque fois que nous ajoutons un nouvel élément de paragraphe, par exemple, assurez-vous que votre corps est sélectionné. Et ici, dans ce sélecteur de style, maintenant, dans le style sélectionné, nous pouvons créer nouvelles classes et nous pouvons également modifier les balises HTML. Maintenant, les balises HTML, par exemple, vous avez la balise body all pages, modifiez V et pneu. Ainsi, tous les éléments de ce site Web, toutes les pages sur lesquelles nous faisons du commerce sur ce site Web, ont tous un corps, des balises de page. Donc, par exemple si vous dites We want Open Sans, une taille normale de 16 pixels sur toutes les pages du corps de page. Vous pouvez faire un vétérinaire ici et avoir un résultat propre et constant. En fait, notre projet et nos classes sont à peu près tous les changements de style que nous apportons à un objet sont stockés dans une classe. Donc, par exemple, si vous créez un bouton et que nous l'attribuons, regroupez-le. Si un nouveau bouton apparaît dans notre panneau d'éléments, vous pouvez simplement attribuer à cette classe de bouton et il aura exactement la même apparence. Très bien, assez de bavardage. Cliquons donc sur le corps. Toutes les pages sont taguées ici. Et sous police, je ne serai pas la police Open Sans que nous avons ajoutée à notre projet plus tôt. Passez donc aux polices personnalisées et cliquez sur Open Sans. Je souhaite conserver un poids de police par défaut normal. Cependant, je souhaite augmenter la taille à 16 pixels. Comme ça. La couleur de police est correcte pour le moment, la couleur grise. Une chose dont j'ai besoin pour changer la hauteur de la police. Maintenant, dans ce cas, je n'aime pas travailler avec des pixels. Ce que je vais faire, c'est saisir 1,5 e m. Maintenant que nous allons utiliser des unités EM, l' une correspond à 16 pixels, car nous avons dit que taille de police de notre balise body all pages est de 16 pixels. Mais un mètre équivaut à la taille de la topographie que vous avez indiquée dans votre corps. Toutes les pages sont taguées. Nous voulons qu'il soit d'un pixel et demi de 16 pixels. Donc 1,5 e M. Et maintenant, nous avons une bonne, une bonne hauteur de police. Le texte Be est lisible. Maintenant vétérinaire pour le moment. Maintenant, ajoutons notre premier élément. Accédez à l'icône plus dans le menu des éléments. Et sous Mise en page, nous allons ajouter notre première section, MPD, cliquez dessus et faites-la glisser sur votre canevas. Vous pouvez également le faire glisser directement dans le navigateur. Nous avons maintenant notre première section. Donnons maintenant un cours à cette section. Maintenant, ce serait notre zone de prédilection. Appelons donc cela la section des héros. Et pour créer le cluster, cliquez simplement sur Entrée sur votre clavier. Comme ça. Jetons maintenant un coup d'œil au type de paramètres que nous voulons attribuer à cette section de héros. Donc, dans ce projet, si nous avons sélectionné la section des héros, vous pouvez constater que nous voulons une marge de 150, à la fois en haut et en bas, afin de laisser une grande marge de manœuvre à notre contenu. Nous ajoutons humide. C'est très simple. Nous accédons à nos options d'espacement dans le panneau latéral avec la section de votre héros sélectionnée. Ensuite, nous pouvons cliquer et faire glisser sur le rembourrage. Si nous maintenons la touche Shift de tous les côtés, nous obtenons un rembourrage. Et si vous maintenez la touche Alt Control ou Command Control enfoncée, vous pouvez l'appliquer des deux côtés. Nous sommes donc en haut et en bas. Pour la gauche et la droite. Maintenant, pour supprimer un style que vous avez créé, il vous suffit de cliquer sur le type bleu. Ensuite, vous pouvez cliquer sur Réinitialiser. Comme vous pouvez le voir, vous pouvez également Alt et cliquer sur quelques raccourcis. Maintenez donc la touche Alt enfoncée. Et c'est ainsi que vous pouvez supprimer le style de quelque chose. Nous pouvons également le saisir. Cliquez donc sur les chiffres. Donc 150.150, comme ça. Nous avons maintenant 150 pixels, en ajoutant à la fois le haut et le bas. Maintenant, nous ne voulons pas de marge. Je ne l'ai donc pas encore expliqué. rembourrage est donc l'espace qui se trouve à l'intérieur de l'élément et la marge est un espace en v, mais nous le donnons à l'extérieur des éléments. Donc, si vous voulez écrire quelque chose, toute la section, nous pouvons le faire en ajoutant de la marge. Très bien, maintenant, une chose importante est que nous voulons ajouter un conteneur. La raison en est que tous les écrans ne sont pas en FE, de même taille. Certaines personnes ont donc de très grands écrans avec une très haute résolution ou un moniteur ultraléger. Nous devons contenir notre contenu et limiter à une certaine largeur juste pour pouvoir le contenir. Et en fait, une information attrayante, accessible et lisible est bien structurée. Maintenant, pour ajouter un conteneur, vous cliquez sur l'icône plus et nous ajoutons élément de conteneur V à partir du panneau de mise en page B. Et nous voulons lire directement notre section consacrée aux héros de cette manière. Maintenant, comme vous pouvez le voir, le rembourrage est appliqué, sorte que le contenant se place bien au milieu. Et maintenant, nous voulons y ajouter de la taille. Parce qu'en ce moment, c'est complètement vide et rien. Il n'y est pas vraiment. Cette frontière, c'est la confiance que Webflow nous dit, hé, il y a un conteneur là-bas. Nous le voyons lors du montage. Passons maintenant au panneau « outre » et donnons-lui une largeur maximale de 1 340 pixels, comme suit. Maintenant, pourquoi utilisons-nous la largeur maximale ? La largeur maximale signifie simplement qu'il s'agit la plus grande largeur que le conteneur puisse obtenir. Elle peut rétrécir. Donc, si nous passons à des points de rupture différents, vous pouvez voir que l' échelle est vraiment très bonne, comme ça. Il est donc réactif. Si vous l'aviez fait de manière irrégulière, mais cela ne répondrait pas. Et si vous achetiez quelques SV d'une largeur minimale, ils seraient simplement redimensionnés jusqu' aux bords, mais jamais en dessous de ce point. C'est pourquoi nous utilisons également la largeur maximale et la largeur minimale dans certains cas. Maintenant, que voulons-nous ajouter ? Prochaine ? Nous voulons ajouter un titre et quelques textes. Et nous voulons que cela soit centré au milieu. Ajoutons donc de la topographie à notre site Web. Cliquez sur l'icône plus et recherchez les paramètres de topographie. Maintenant, nous voulons un titre. Alors, cliquons et dirigeons-nous directement vers l'intérieur de notre conteneur. Et ici, comme vous pouvez le voir, nous avons quelques options avec une fenêtre contextuelle qui sera alors un vétéran direct. Nous avons donc H1 jusqu'à H6. Maintenant, c'est juste la question de savoir quelle est l'importance des éléments ? Chacun d'eux sera donc l'élément le plus important. H2b, le deuxième plus important, et ainsi de suite. Donc, comme c'est notre titre de héros, ce sera réglé à un. Ensuite, nous voulons également ajouter un paragraphe. Très bien, à côté du titre se trouve l'élément de paragraphe. Il vous suffit de cliquer dessus et de le faire glisser sous votre titre à l'intérieur du conteneur. Et comme vous pouvez le constater, il est toujours rempli de texte réservé, que nous pouvons conserver. Tu peux travailler avec. Maintenant, examinons notre exemple de projet. Vous pouvez voir que cela semble complètement différent. Nous devons donc ajouter une classe à cette rubrique. Et nous devons également le styliser. Nous devons donc lui donner une taille différente, une police différente, un poids de police différent. Et allons-y. Commençons par le vétérinaire. Ils sélectionneront le titre. Et tout d'abord, nous devons lui donner un cours. Si nous ne créons pas de classe lorsque nous apportons de légères modifications, Webflow en crée automatiquement une pour nous, ce qui est utile. Cependant, ce n'est pas le cas. Cela ne permet pas à notre site Web d'être très propre. Donc , par exemple, s'il s'agit d'une classe appelée en-tête principal et que nous voulons réutiliser la classe vétérinaire sur une page plus tard, c'est tout simplement non. OK, c'est le titre principal. Nous pouvons appliquer cette classe à ce texte. Avec notre classe échangée contre notre titre. Démoli. Et 44. Et nous avons installé la famille de polices Railway ici même. Et nous voulons que le taux soit en gras et en V. Nous voulons être à 56 pixels. Et donnons à cela une hauteur de police de 1,5 e m. Comme ça. Maintenant, donnez-nous également un texte. Donc, les sites Web Webflow qui fonctionnent, saisissons-les. Nous pouvons modifier le contenu de notre rubrique en double-cliquant simplement dessus. Et maintenant, nous pouvons modifier le texte comme nous ferions dans Google Docs ou Harvard. Webflow, des sites Web qui fonctionnent comme des fous et des vétérans, notre classe de titres est terminée. Ensuite, examinons ce paragraphe, ce paragraphe principal. Comme vous pouvez le constater, il est plus petit, il n'atteint pas les bords de notre conteneur comme le fait le titre. Et il est limité à 650 pixels, il ne peut donc pas être plus grand que cela. Construisons ceci. Choisissez votre paragraphe. Donnez-lui un cours. Passons donc au paragraphe principal. Disons que c'est un paragraphe héros. Nous savons exactement où il est utilisé. Pour vraiment le rendre plus petit. Vous pouvez passer à la largeur maximale et saisir 650 pixels. Comme vous pouvez le constater, il se rétrécit. Maintenant, un fait très évident à l' heure actuelle est que ce n'est pas centré. Donc, si vous regardez notre projet ici, ce texte se trouve au milieu. Maintenant, pour y parvenir, il suffit de sélectionner tout d'abord le titre principal. Et centrons-le en cliquant sur une ligne et en le centrant. Maintenant, c'est la partie la plus facile. La seule raison pour laquelle cela fonctionne est que l'en-tête principal occupe tout l'espace jusqu' aux bords du conteneur. Comme tu peux le voir. On ne peut pas en dire autant pour le paragraphe consacré aux héros, si vous deviez le centrer sur celui-ci , c'est quelque chose que nous voulons. Cela ne place pas votre zone de paragraphe au milieu. Maintenant, pour y parvenir, vous pouvez passer à nos options de marge. Si vous cliquez dessus, vous pouvez voir que nous avons ce bouton Auto. Maintenant, la fonction automatique pousse simplement les éléments sur le côté. Et si nous appliquons le marginal IN à l'automobile, cela signifie qu'il est parfaitement enfoncé au centre de notre conteneur. Juste comme ça. Maintenant, vétérinaires, vétérinaire pour cette vidéo. Dans la prochaine conférence, nous allons ajouter quelques images. Nous allons donc ajouter cette image de fond. Vous allez également ajouter cette superposition sombre. Ensuite, nous changeons très rapidement et facilement la couleur de notre police. Cette couleur blanche. Vous allez jeter un œil aux boutons après cela. Tout d'abord, commençons par l'image du héros. 8. Optimiser et télécharger des images - ajouter des images à votre arrière-plan: Très bien, ensuite, ajoutons l' image V à cet arrière-plan. Nous allons également changer la couleur de police en blanc. Et nous utilisons l'image d' arrière-plan plutôt superposition foncée afin de mieux lire les textes et d'augmenter légèrement le contraste. Maintenant, tout d'abord, lorsqu'il s'agit d' images sur le Web, si vous devez les optimiser, nous voulons que les images soient aussi petites que possible. Les temps de chargement sont donc réduits au minimum. Maintenant, comment y parvenir ? Avec des sites Web tels que Image Compress Our.com, par exemple , maintenant, via un site Web, par exemple nous permet de déposer notre image ici, puis compresser un débit et de réduire la taille du fichier. maintenant trouver le dossier d'images dans vos fichiers d'exercices Vous pouvez maintenant trouver le dossier d'images dans vos fichiers d'exercices. Et en mon nom, l'image du héros J peg. Il suffit de cliquer et de le faire glisser vers l'optimisme. Et puis vous pouvez voir qu'il commence à compresser notre image comme un fou. Comme vous pouvez le constater, 55 % des données ont été supprimées . Cela a donc essentiellement réduit la taille de moitié. Téléchargé. J'ai déjà créé ce dossier optimisé et je l'ai enregistré sur votre ordinateur. Maintenant, mettons cette image à la fin de notre section consacrée aux héros. Tout d'abord, téléchargeons cette image dans notre projet Webflow. Maintenant, comment télécharger des images vers Webflow dans le panneau Ressources ? Bien entendu, ouvrez le panneau des ressources et cliquez sur cette icône de téléchargement. Accédez à votre dossier d'images. Assurez-vous d'utiliser la version optimisée et de la télécharger sur Webflow. Maintenant, une chose très importante, c' la conception Web est un endroit où tout le monde ne peut pas le voir et que certaines personnes utilisent des lecteurs d'écran. Donc, s'ils ne peuvent pas voir, s'ils ont une déficience visuelle, nous leur donnons le lecteur d'écran qui lit le site Web. Nous devons donc donner à cette image, quelques textes, une brève description de ce que c'est. Juste pour que certaines personnes puissent découvrir notre site Web comme n'importe qui d'autre. Appelons simplement ce bureau propre avec un ordinateur un ordinateur dessus. Je pense mal. Maintenant, une chose que nous voulons également faire, abord étendre le panneau V Assets. Nous avons plus d'options ici. Et lorsque nous voulons sélectionner l' image de notre héros, cliquez sur cette coche ici. Et puis en cliquant sur compresser. Cela réduit encore la taille de notre fichier en le transformant en fichier .sit. Juste comme ça. C'est une chose à laquelle nous voudrions simplement nous habituer afin optimiser notre site Web autant que possible. Mais ajoutons maintenant cette image à l' arrière-plan de notre section consacrée aux héros. Maintenant, pour ajouter une image à la section héros, l'arrière-plan. Tout d'abord, sélectionnez votre section de héros, puis faites défiler la page jusqu' aux arrière-plans dans votre gestionnaire de style. Maintenant, ici, nous pouvons lui donner une couleur de fond si vous le souhaitez. Supprimons ce style. Vous pouvez cliquer sur cette icône plus ici, image et dégradé. Nous avons maintenant quelques options différentes. Nous pouvons ajouter quelques images. Nous pouvons lui donner un dégradé, dégradé radial ou une couleur unie. Nous voulons l'image. Maintenant. Choisissez l'image V, qui sera notre image de héros. Ensuite, en termes de taille, nous voulons qu'il couvre toute la section, donc comme ça. Mais le positionnement est un peu décalé. Alors maintenant, cliquons sur le point central ici. Centré. Juste comme ça. Vous souhaitez également désactiver le suivi. Nous ne voulons donc pas. Si vous n'en avez pas, si l'image ne remplit pas toute la section et que le pavage est désactivé, elle ressemblera à cela. Si vous le tuilez, il suffira de répéter l'image V. Notre vétérinaire vétérinaire pour l'image de fond. Cependant, nous pouvons également ajouter une superposition exactement de la même manière. Cliquez donc à nouveau sur l'icône plus. Cette fois, nous cliquons sur Color Overlay. Maintenant, nous pouvons simplement accéder à notre sélecteur de couleurs, peut-être augmenter un peu l'opacité à 70. Et maintenant, nous avons deux couches ici. Nous pouvons les déplacer, tout comme le panneau des calques dans Figma ou Photoshop. Vous voulez que la superposition de couleurs soit au-dessus de l'image, comme ça. Nous avons maintenant l' image mais notre texte est illisible, pas comme ici. Comment modifier la variable 1 ? Un moyen extrêmement simple de le faire. Sélectionnez votre contenant. Et sous Topographie et sous Couleur. Changez-le en blanc. Maintenant, pourquoi est-ce que ce blocage, ces deux styles ? Prends cette couleur du contenant. Donc CSS, feuilles de style en cascade. Tant que nous ne remplaçons pas cette couleur, elle reprendra la valeur de couleur du conteneur, de son élément parent. Comme ça. Cela peut nous faire gagner beaucoup de temps. Et je vous recommande travailler ainsi chaque fois que vous le pouvez. Ainsi, vous pouvez vous faciliter la vie . Maintenant, c'est à peu près ainsi que vous téléchargez et optimisez vos images. Comment les ajouter à l' arrière-plan d'une section. Et nous avons également appris à faire des ditri et à lire rapidement et très facilement. Maintenant, dans la prochaine conférence, vous allez créer ces deux boutons. Ici. Je vais y ajouter quelques animations. Nous allons également utiliser ce que l'on appelle des classes combinées pour créer plusieurs variantes d'un même objet, comme ce bouton plein et ce bouton de plan. C'est ce que vous allez échanger lors de la prochaine conférence. 9. Créer un élément de boutons: Très bien, donc dans cette conférence, nous allons construire ce bouton à partir de zéro. Allons-y. Dans notre projet Webflow, vous souhaitez donc ajouter un bouton. Maintenant, nous pourrions opter pour les éléments. Cependant, un moyen plus rapide d'ajouter de nouveaux éléments serait simplement d' appuyer sur le raccourci clavier V Control E de votre clavier. Et cela ouvre cette barre de recherche. Et maintenant, nous pouvons simplement taper l'élément v que nous voulons rechercher. Donc, dans notre cas, vous pouvez simplement cliquer sur l'élément et l'ajouter à notre page. Maintenant, si, selon l' élément que vous avez sélectionné, il se peut qu'il ne se trouve pas à l'intérieur du conteneur. Vous pouvez simplement le faire glisser dans un conteneur ou dans un bloc de disque en utilisant Navigator et le faisant glisser dans le conteneur où vous le souhaitez. Juste comme ça. Maintenant, nous devons centrer ce bouton. Si vous voulez centrer quelque chose ou aligner des objets. La première chose à faire est regarder son élément parent. Nous avons cet élément conteneur, mais il n'est pas configuré pour tout centrer. Nous avons envoyé tous ces éléments nous-mêmes avec les éléments correspondants. Donc, dans ce paragraphe, si nous utilisons la marge automatique et que nous indiquons qui est tête, utilisez l' alignement dans la typographie. Faisons quelque chose de différent pour ce bouton. Sélectionnez donc votre contenant et votre lieu, passez à la typographie et alignez-la au centre. Juste comme ça. Désormais, toute la topographie de votre conteneur sera centrée. Très bien, construisons le bouton proprement dit. Assurez-vous donc de sélectionner votre bouton. Tout d'abord, nous devons lui donner un cours. Donc, dans notre sélecteur de style, appelons ce bouton. Maintenant, nous pouvons modifier le texte de ce bouton comme pour les autres types de topographie en double-cliquant dessus. Et maintenant, nous pouvons saisir notre texte. Allons-y et prenons contact. Comme ça. Très bien, alors que voulons-nous avec ce bouton ? Nous voulons que la typographie en V soit de cette couleur noire ou grise. Et le bouton lui-même doit avoir une couleur blanche et quelques coins, donc un rayon d'angle lui est appliqué. Sélectionnez donc le bouton et commençons par le. Nous accédons à nos options de typographie et nous pouvons maintenant tout ajuster comme nous le souhaitons. On pourrait changer la police, on pourrait changer la taille. Dans notre cas, nous voulons uniquement changer la couleur du bouton. Tapons dans le champ de texte, Gratuit, Gratuit. Et cela sélectionnera automatiquement cette couleur noire grisâtre. Maintenant, nous allons l'utiliser tout au long du projet. Assurez-vous donc de cliquer sur cette icône plus, qui nous permettra d'ajouter un échantillon à notre site Web. Maintenant, à l'aide de cet échantillon, nous pouvons appliquer cette couleur très facilement et très rapidement à presque tous les éléments. Et si vous modifiez l' échantillon lui-même, toutes les couleurs, tous les éléments présentant mauvaise couleur de lumière changeront. C'est donc un peu comme échantillons globaux de Figma, si vous le connaissez bien. Maintenant, une chose vraiment importante à garder à l'esprit est le rapport de contraste. À l'heure actuelle, nous avons un très mauvais score. Donc, ça dit échec. Et vétérinaire signifie simplement qu'il n'y a pratiquement aucun contraste entre l'arrière-plan et la couleur de la typographie, mais que nous ne le voyons pas très bien. Maintenant, ce n'est plus un problème pour nous, car nous voulons changer la couleur de fond en blanc. Passons aux arrière-plans. Et notre couleur. Faites glisser le curseur jusqu'au bord B dans le coin pour le rendre blanc. Maintenant, si vous revenez à la couleur de notre typographie, vous pouvez constater que nous avons cette note triple A verte, mais attention, le ratio est vraiment très bon et extrêmement lisible. Bon, nous avons maintenant le fond blanc et nous avons changé la couleur du texte. Comment fabrique-t-on ces coins arrondis ? C'est très simple avec le bouton profond sélectionné noté deux eaux. Et ici, nous pouvons lui donner un rayon de bordure. Maintenant, nous pouvons ajuster toutes les bordures en même temps comme ceci. Et si nous voulions ajuster chacun d'entre eux individuellement ? Vous pouvez cliquer sur cette icône. Et maintenant, nous pouvons ajuster tout ce que nous avons acheté en fonction de nos besoins. Nous voulons changer toutes les bouteilles achetées individuellement, toutes les bouteilles en même temps. Et allons-y avec un rayon de bordure de huit pixels. Maintenant, il y a encore une chose que je voudrais modifier, c'est que vous voulez donner à ce bouton un bonus pour notre effet de survol. Lorsque nous survolons le bouton, je veux que l'arrière-plan soit transparent et qu'il passe au blanc. Mais cela signifie que nous avons besoin d'une bordure autour du bouton V. Pour ajouter une bordure, un élément, il suffit d'aller dans Bordures. Et ici, nous avons cinq options différentes. Nous pouvons définir une bordure pour tous les côtés ou les modifier individuellement. Ces options, donnons-lui ici une largeur d'un pixel. Et assurez-vous de changer la couleur de la bordure en blanc. Comme ça. Maintenant, si nous prévisualisons notre projet avec cette icône, vous pouvez voir que notre bouton est plutôt beau. Nous pouvons ajuster le rembourrage intérieur pour lui donner un peu plus de marge de manœuvre. Mais si vous passez la souris sur le bouton, seul le changement de curseur nous indique qu'il s'agit d' un élément interactif. Nous voulons créer une petite animation. Nous avons donc ce commentaire qui dit, hé, vous pouvez cliquer sur cet élément. Tout d'abord, ajustons le rembourrage. Maintenant, si vous maintenez la touche Alt Control ou Command enfoncée, vous utilisez un Mac. Vous pouvez changer les deux côtés adverses. Comme ça. Allons-y avec 30 pixels. Et maintenant, nous voulons créer un état de survol. Maintenant, les états de survol sont en fait très faciles à créer avec les éléments de nos boutons sélectionnés dans notre sélecteur de style, vous cliquez sur cette flèche déroulante. Et le vétérinaire nous donne accès à nos états. Bien que nous cliquions sur Hover. textes à l'écran, ce champ vierge Selon les textes à l'écran, ce champ vierge indique que nous sommes en train de modifier l'état de survol. Maintenant, si vous faites défiler la page vers le bas, effectuons les modifications. Donc, pour cette animation, pour cet état de survol, je veux que le texte devienne blanc et l'arrière-plan devienne transparent. Changeons la typographie , puis changeons l'arrière-plan. Rendez-le transparent comme ça. Maintenant, comme vous pouvez le voir, si nous survolons l'élément, texte change et le motif en V bits devient transparent. Maintenant, vous voulez que la transition soit un peu plus fluide. heure actuelle. C'est instantané. Ce n'est pas très agréable, non ? Nous pouvons voir que, Hey, vous pouvez interagir avec cet élément. Ce n'est pas la façon la plus propre de procéder. Maintenant, pour donner une transition à ce bouton, appuyez sur le bouton D et assurez-vous que vous modifiez simplement la classe du bouton et non son état de survol. Si vous êtes toujours en mode survol, cliquez simplement sur aucun dans votre sélecteur d'état. Lorsque nous faisons défiler l'écran jusqu'au panneau des effets. Ici, faites attention à cette petite section intitulée Transitions. Cliquez sur l'icône plus. Et maintenant, nous avons cette grande liste de toutes les différentes transitions que nous pouvons modifier. Nous pourrions ajouter la couleur d'arrière-plan et la couleur la typographie, les deux individuellement. Cependant, si nous faisons défiler la section avancée vers le bas, nous avons toutes les propriétés. Les tarifs vétérinaires, une transition pour chaque modification de propriété que nous avons apportée. Nous pouvons maintenant en modifier la durée. Alors allons-y avec 400 millisecondes. Et nous pourrions également modifier l'assouplissement ici même. Je veux que ça reste comme ça. Laissez-le par défaut. Maintenant, si nous prévisualisons notre projet et que nous avons notre bouton d'aperçu, vous pouvez voir que c'est beaucoup plus fluide. Ça fait vraiment du bien. Et ça ressemble en fait à un vrai bouton. Et c'est ainsi que vous pouvez traiter ces boutons. Dans la prochaine conférence, nous allons apprendre à utiliser ce que l'on appelle des classes combinées pour créer des variations de certains éléments. Donc, comme vous pouvez le voir, nous avons ce bouton normal ici. Mais à côté, nous avons également ce bouton que nous avons décrit, mais qui se transforme en bouton solide lorsque nous le survolons. Et comme vous pouvez le voir dans notre sélecteur de style, nous avons un aperçu des classes de feedback, des inventions et des classes combinées. Et je vais vous montrer dans la prochaine conférence comment créer du mal. 10. Cours combinés - créer des variations pour différents éléments: Très bien, dans cette conférence, nous allons parler de classes combinées. Nous allons maintenant apprendre à utiliser classes combinées en créant cette deuxième variante de bouton, qui aura le contour et le moment où il deviendra en couleur unie. Maintenant, construisons-le. Dans notre projet Webflow. Vous pouvez commencer en faisant simplement une copie de cet élément de bouton. Donc, le bouton m'a sélectionné ici, nous pouvions entrer et simplement cliquer avec le bouton droit de la souris et copier ou dupliquer. Vous pouvez également simplement appuyer sur les touches Ctrl C et Ctrl V pour dupliquer des objets, comme dans d'autres logiciels. Maintenant, avant de créer la classe combinée, je voudrais clarifier un peu les choses car, comme vous pouvez le voir, les boutons sont écrasés les uns contre les autres. Mais dans cet exemple de projet que j'ai ici, il y a un peu d'espacement. Maintenant, comment y parvenir ? Ma méthode préférée pour créer cet espacement est de simplement enrouler les deux boutons dans un bloc de disque, puis de leur laisser un peu d' espace à l'aide de Flexbox. Cela semble très compliqué, mais ce n'est pas le cas. Construisons donc ce wrapper très rapidement. Accédez à votre onglet Elements et ajoutez un bloc de disque à notre conteneur, comme ça. Et lorsque nous voulons faire glisser les deux boutons à l'intérieur de ce bloc rigide, cliquez et maintenez sur votre premier bouton, faites-le glisser dans le bloc de disque, puis répétez le processus pour le second bouton. Assurez-vous maintenant de sélectionner ce bloc de définition. Et donnons-lui une classe appelée button wrapper ou hero, Hero Button Rapper. Comme ça. Maintenant, comment créer cet espace entre les deux boutons ? Sous Disposition, vous pouvez simplement cliquer sur Flex, qui est la deuxième icône. Et maintenant, comme vous pouvez le constater, nous avons beaucoup plus de contrôle sur le positionnement des objets. À l'heure actuelle. Ils sont justifiés. Commencez par le caoutchouc. Si vous cliquez sur l'icône centrale en V, nous pouvons à nouveau les centrer. Et pour créer un écart entre deux éléments. Vous pouvez utiliser cette zone ici. Ouaip. Et puis en colonnes. Allons-y avec 18 pixels. Oui, je pense que c'est une bonne chose. Très bien, et maintenant nous avons échangé l'écart. Parlons des classes combinées. Sélectionnez donc le deuxième bouton. Et ce qu' est une classe combinée, c'est à peu près qu'elle nous permet de créer une variante des classes que nous avons créées auparavant. Un bouton sera vide, mais nous n'appliquerons pas de style et, dans l' ensemble, le bouton sera exactement le même, avec des modifications mineures. Sélectionnez donc le bouton et accédez à votre sélecteur de style. Et comme vous pouvez le voir, il est déjà indiqué nouveau type de classe combinée pour créer une nouvelle classe combinée. Dans notre cas, nous voulons l'appeler surligné, car il s'agit d'un bouton de plan. J'ai été décrit et cliquez sur Aperçu commercial. Nous avons maintenant un bouton avec le plan de la classe combinée. Désormais, si nous apportons une modification à cet élément de bouton, elle ne sera appliquée qu' à la classe de plan. Ce bouton, cette classe n'en seront pas affectés. Cela nous fait gagner beaucoup de temps, mais nous n'avons pas besoin de dupliquer un tas de classes. Nous devons le construire à partir de zéro. C'est une manière arabe claire de lire les déviations de certains éléments. Très bien, ensuite. Tout d'abord, jetons un coup d'œil à cela. Il s'agit de l'état général de l'animation de survol. C'est à cela que nous voulons qu'il ressemble. Mais changeons la typographie en blanc, comme ça. Et la couleur de fond devient transparente comme ça. Maintenant, si vous le prévisualisez, vous pouvez voir que nous avons deux types de boutons. L'un d'eux est le bouton plein, qui deviendra le contour. Et l'un d'eux est le bouton de plan qui n'est pas animé pour le moment, car l'animation est le bouton de plan lui-même. Transformons-en cet état solide. Ainsi, l'édition via des états de survol pour les classes combinées fonctionne exactement comme l'élément de bouton précédent. Donc, dans cette liste déroulante, passez la souris. Nous pouvons maintenant modifier l'état de survol de la classe combinée décrite. Alors dessinons-le. Remplacez la typographie par notre couleur grise et faites en sorte que l'arrière-plan soit à 100 %. Comme ça. Auparavant, dans notre classe de boutons, une transition était déjà fournie, nous n'avons donc pas besoin de travailler ici. Prévisualisons-en un aperçu. Et comme vous pouvez le constater, notre bouton de contour se transforme en un bouton solide. Et inversement. Si le bouton solide. C'est ainsi que vous pouvez utiliser des classes combinées pour créer des révélations de boutons ou de paragraphes. Contenez-nous à peu près tout ce qui nécessite légères variations par rapport à une classe déjà existante. 11. Travailler avec des réseaux: Bien, maintenant que nous avons terminé notre zone de héros, nous allons maintenant créer cette section de service de colonne gratuite. Dans cette conférence, nous allons apprendre à utiliser le composant écrit pour créer cette disposition à trois colonnes. Et nous allons également créer les cartes de service VCE avec des blocs, qui contiendront notre contenu. Nous allons ajouter des icônes un titre et du texte de paragraphe. Vous allez vous occuper de ce lien animé lors de la prochaine conférence. Très bien, passons à la construction. Donc, dans notre projet, tout d' abord, fermons tout cela. Donc, si nous cliquons sur cette icône ici, toutes nos sections ouvertes peuvent être fermées. Maintenant que le corps est sélectionné, utilisez le raccourci clavier Control E. Ouvrez la barre de recherche et recherchez le composant de section. Vous pouvez simplement, une fois que vous l'avez, une fois que vous l'avez trouvé dans la barre de recherche, et c'est le seul élément, vous pouvez simplement appuyer sur Entrée sur votre clavier et il l'ajoute automatiquement. Maintenant, la raison pour laquelle nous voulons sélectionner le corps est qu'il ajoutera simplement l'élément tout en bas de notre navigateur. Comme ça. Maintenant, un raccourci supplémentaire vraiment utile en termes de vitesse est Control. Enter sélectionne automatiquement le sélecteur d'état. Donc, si vous avez sélectionné un élément, par exemple cette section ici, et que vous appuyez sur Control Enter. Vous pouvez sélectionner instantanément le sélecteur de style et rechercher votre classe. Maintenant que nous n'avons pas encore de classe de section, créons-la et ajoutons-y un peu de marge. Allons-y avec 100 en haut et 100 en bas. Comme ça. Maintenant, si nous revenons à notre section, nous pouvons voir qu'il s'agit d'une section blanche. Et maintenant, nous avons besoin du conteneur pour contenir notre comptable. Encore une fois, contrôlez E et recherchez les composants du conteneur. Tout comme une méchante. Appuyez sur la touche Entrée pour sélectionner le sélecteur de style. Ensuite, nous pouvons simplement sélectionner la classe de conteneur. Très bien, parlons maintenant des réseaux. Maintenant, dans nos éléments, éléments, disposition des panneaux, nous avons ce composant de grille. Il vous suffit de cliquer dessus et de le faire glisser dans votre conteneur. Et maintenant, nous avons cette zone juste ici. Et comme vous pouvez le voir de ce côté, vous avez également ce nouveau menu. Nous pouvons maintenant modifier notre grille. Ici, nous pouvons modifier les écarts entre ces grilles. Augmentons donc l'écart V ici à 48 pixels peut-être. Oui, je crois que j'aime ça. Puisque nous allons travailler avec une disposition à trois colonnes, ajoutons une ou plusieurs colonnes. Appuyez simplement sur l'icône Plus, comme ceci. Nous ne voulons pas croître. Supprimons-le donc. Donc, si vous passez la souris sur l'une de ces lignes ci-dessous, vous pouvez voir que nous avons cette icône de poubelle. Cliquez simplement sur Supprimer. Une fois que vous avez terminé, cliquez ici sur Terminé. Et nous avons fini d'échanger notre réseau de base. Maintenant que nous avons apporté quelques modifications, vous pouvez voir que le flux de travail a automatiquement créé cette classe. Si vous cliquez sur cette flèche déroulante, vous pouvez cliquer sur Renommer la classe. Appelons cela réseau de services. Juste à côté. Créons nos cœurs. Nous allons créer l'un d'entre eux, puis simplement le copier et le coller deux fois. Maintenant, pour créer une telle coupure de service, il suffit d'ajouter un bloc de disque, qui sera lui-même un panier. Et appelons ce service block. Eh bien, appelons cela une carte de service. Donnez toujours un nom à vos cours. Maintenant, nous voulons un peu de rembourrage, alors maintenez la touche Shift et nous pouvons ajuster le rembourrage de tous les côtés. Allons-y avec 31 pixels pour le moment. Nous pouvons toujours ajuster cela plus tard. Donnez-lui une couleur de fond blanche. Et comme vous pouvez le constater, nous avons également cette couleur à l'extérieur avec une ombre tombante. Maintenant, c'est en fait très facile à ajouter dans Webflow. Dans la section Effets de son panneau de style, nous avons des ombres en forme de boîte. Cliquez sur Plus. Et nous avons ici toutes ces différentes options. Nous pouvons maintenant augmenter le flou, comme ça. Cela pourrait également augmenter la distance. Passons au drapeau pour les pixels. Et nous pouvons également augmenter la taille si nous le souhaitons. Maintenant, sous couleur, nous pouvons changer la couleur. Réduisons donc l'opacité un peu, par exemple dix. Et maintenant, nous avons ce fard à paupières très basique. Maintenant, ajoutons du contenu à cela. Mais nous voulons une icône. Vous voulez donc cette icône, un titre et un paragraphe. Commençons par l'icône D. Maintenant, pour l'icône dans vos panneaux d'éléments, recherchez simplement l'image. Sous média, nous avons l'élément image. Cliquez et glissez-le dans votre Écosse. Comme vous pouvez le constater, cela devient un peu plus délicat. Donc, ce que nous allons faire, c'est simplement le faire glisser directement dans la carte de notre navigateur. Maintenant, nous voulons également un titre. Encore une fois, accédez à votre panneau d'éléments et supprimez le titre situé sous l'image. Juste comme ça. Et puis nous voulons également des textes de paragraphes comme celui-ci. Maintenant, en ce moment, tout le texte est blanc. Passons à cela en sélectionnant notre carte de service en typographie et en sélectionnant notre échantillon de couleurs que nous avons déjà lu. Bien, maintenant nous avons besoin de notre image. Nous devons télécharger nos icônes. Passons au panneau Actifs. Cliquez sur l'icône du fichier V. Et dans nos fichiers de projet et nos fichiers d'exercices, nous avons le dossier de l'icône. Et nous avons ici toutes ces différentes icônes. Il vous suffit de faire une sélection et de les ouvrir toutes. Comme vous pouvez le voir, nos icônes sont prêtes à être utilisées. Maintenant, ce sera le bloc de service de conception. Alors, cliquons sur. Ceci. Apparaîtra dans les paramètres des éléments. Et quand ils peuvent choisir une image. Allons-y avec l'icône v Design. Et c'est comme ça que nous avons ajouté notre icône. Passons maintenant au style du titre et du paragraphe. Si vous regardez ce projet ici, vous avez cette rubrique de service. Et la police est ferroviaire, et sa taille est de 28 pixels. Sélectionnez le titre, donnez-lui un nom de classe. Contrôlez, entrez et appelez le service. Rubrique. Vos options de typographie. Et cherchez tout de suite, ici même. Et 28 pixels ? Oui. Comme ça. Modifions également la hauteur de police à 1,3 EM. Oui, ça a l'air bien. Modifions également le texte, alors double-cliquez dessus. Et encore une chose très importante à propos des titres. Cliquez sur le réel et remplacez-le par H2. H1, nous avons toujours voulu atteindre le sommet , puis ça descend en cascade. Allons-y donc avec H2 pour ne rien rater. Supprimons également un peu de ces textes qui sont un peu trop. Passons ensuite à ajuster un peu trop certaines de ces distances d'espacement entre ces deux objets. Nous allons donc sélectionner le paramètre de service. Cela peut voir que cette marge de 20 pixels lui est automatiquement appliquée. Mettons cela à zéro. Et je pense que j'aime l'espacement entre ces objets pour le moment. Une dernière chose, c'est que nous pouvons contourner ces restrictions de service. Sélectionnez votre carte de service, cliquez sur Nous avoir acheté. Et pour tous les coins, juste un tout petit peu. C'est maintenant que nous voulons donner une classe au texte du service au cas où nous y apporterions quelques modifications. Cela se traduit donc par nos blocs. Et maintenant, sélectionnons la carte de service et dupliquons-la. Cliquez avec le bouton droit sur dupliquer et dupliquer S peut voir que l'espacement entre ces colonnes est exactement le même. Et v, une chose que nous devons faire maintenant est d'ajuster les icônes. Ce sera du développement. Tout d'abord, modifiez le titre du film, puis cliquez sur les paramètres des éléments de votre icône. Remplacez l'image et utilisez v development. Je peux le sentir. Et quand nous aurons publié et changé l'icône V, comme ça. Voilà, c'est tout pour le moment. Dans la prochaine conférence, nous verrons comment travailler avec liens de texte et comment créer cette jolie petite animation. Donc, comme vous pouvez le voir, si nous survolons le lien, il se déplace légèrement vers le haut. C'est-à-dire que vos changements de couleur créeront cet état de survol lors de la prochaine conférence. 12. Liens de coiffure: Bien, maintenant que nous avons créé les coupures de service de base et notre grille de service à trois colonnes, il ne reste plus qu'à ajouter ce lien avec des liens animés. Donc, si vous le survolez, il deviendra d'une couleur plus claire et se déplacera légèrement vers le haut, ce qui nous indiquera que vous pouvez cliquer et interagir avec cet élément. Très bien, ajoutons d'abord un lien. Avant d'ajouter le lien, sélectionnons la carte de service et nous devons nous assurer que tous les éléments seront centrés. Soyez également des éléments que nous allons ajouter. Coupures dans les services de cinéma. Le moyen le plus simple de le faire est simplement le transformer en flexbox. Les quelques cartes de service sélectionnées, accédez à vos options de mise en page et cliquez sur Flex. Maintenant qu'au départ, cela va casser la mise en page, car nous devons d' abord dire que vous ne voulez pas qu'elle soit horizontale. Vous voulez qu'il soit vertical, comme ça. Ensuite, nous voulons l' aligner au centre, ce qui fixera nos icônes de cette manière. Et cela garantira simplement que, quel que soit l'élément que nous ajouterons à cette carte de service, elle sera toujours centrée. Très bien, ajoutons le clignotement des textes. Maintenant, un moyen le plus rapide d' ajouter un nouvel élément, cette carte de service est de sélectionner les textes du service. Recherche avancée du lien texte. Et la raison pour laquelle nous avons sélectionné le texte du service premier est que l'élément V que nous allons ajouter sera placé en dessous. L'élément sélectionné reste à l'intérieur de notre carte de service. Maintenant, il y a peu de choses que nous devons faire. d'abord, tous les liens de Webflow ont ce style de base, le texte bleu et nous le soulignons. Et une façon de s'en débarrasser est de modifier la balise HTML elle-même, comme nous l'avons fait avec la balise body. Sélectionnez donc votre lien, accédez à votre sélecteur de style et sélectionnez la balise HTML Tous les liens. Maintenant, si nous faisons défiler la page vers le bas, nous pouvons supprimer la section typographie que nous avons soulignée. Et nous voulons également le remplacer par notre couleur noire. Nous avons donc maintenant ce lien. Il est impossible de le distinguer du texte du paragraphe. Ce n'est pas un problème. Nous allons nous en occuper tout de suite. Maintenant, sélectionnez votre lien et donnons-lui un cours. Appelons cela un slink serbe. Et nous voulons y ajouter un soulignement. Donc, si vous regardez ce projet que j'ai créé précédemment, vous avez ce joli sous-jacent au-dessus, en dessous de notre élément. Maintenant, nous pourrions simplement le souligner. Mais je pense que nous, est pas le cas. C'est un peu trop proche. Qui sont les vrais textes. Je n'aime pas ça. Mais supprimons cela. Et ce que nous allons faire, c'est simplement donner à ce lien une bordure inférieure. Assurez-vous de cliquer en bas dans les paramètres de votre bouteille. Si David, d'un pixel et aussi d'une couleur noire. Juste comme ça. Maintenant, nous avons également le sous-jacent. Modifions-en le texte. Vous en apprendrez davantage. Maintenant, nous allons maintenant créer l'animation pour cet effet de survol du lien V. Si vous regardez ce projet, comme vous pouvez le constater, si nous survolons le lien, il devient légèrement plus clair et il remontera légèrement. Maintenant, construisons ceci. Tout d'abord, accédez à votre état dans votre classe de liens. Et changeons d'abord la couleur. Typographie. Choisissez une couleur légèrement plus claire, peut-être celle-ci ici. Pour des raisons de commodité, nous allons également en faire un échantillon. Nous pouvons également facilement être appliqués à notre frontière. Maintenant, si vous passez la souris sur un bouton, la couleur change. Prochaine étape. Assurons-nous qu'il se déplacera réellement vers le haut comme dans l' exemple de projet. Maintenant, nous pouvons le faire en mode survol. Dans l'onglet Effets, vous trouverez des transformations 2D et 3D. Ici, nous pouvons déplacer légèrement notre objet. Comme vous pouvez le constater, si vous cliquez sur l'axe Y, vous pouvez le déplacer de haut en bas. Maintenant, nous voulons juste un peu de mouvement. Disons donc moins deux pixels, un peu plus haut. Maintenant, si nous survolons ce lien, il se déplacera de deux pixels vers le haut. Faisons en sorte que cela soit fluide en ajoutant la transition. Allons-y avec toutes les propriétés et 400. Maintenant, la transition vers notre animation se fait en douceur. Et cela nous donne, comme avec les boutons, une indication visuelle indiquant que vous pouvez interagir avec cet élément. Maintenant, nous allons copier et coller ce lien vers ces coupures de service. Nous pouvons le copier et le coller, sélectionnant simplement copier avec le bouton droit de la souris, puis simplement le coller dans Control V. C'est parfois un peu difficile s' il ne vous permet pas de payer des choses avant de cliquer avec le bouton droit de la souris. Mais nous contrôlons le raccourci qui fonctionne toujours. Maintenant, une façon d'ajouter ce lien est d' ajouter simplement un nouveau texte. Lorsque nous lui donnons simplement le lien de service de classe. C'est comme ça. Et toutes les propriétés sont incluses dans cette classe. Nous relions fonctionne donc exactement comme ça. Il vous suffit de modifier vos textes. Très bien, et c'est ainsi que vous créez ces liens. Maintenant, comment pouvons-nous réellement relier les choses entre elles ? Eh bien, nous allons le faire une fois que nous aurons fini de créer notre site Web. Mais si vous cliquez sur les paramètres de l'élément, vous avez de nombreuses options différentes. Nous pouvons y ajouter une URL. Nous pouvons créer des liens vers des pages, vous pouvez lier deux sections. Nous allons le faire à la fin de la construction de notre projet. 13. Créer une mise en page à deux colonnes à l'aide de réseaux: Très bien, dans cette conférence, nous allons commencer à créer nos sections de fonctionnalités. Nous allons commencer par cette disposition à deux colonnes. C'est assez standard. Nous allons créer cette variante sombre de notre section. Ensuite, vous allez créer une mise en page à deux colonnes, l'une contenant des textes et l'autre contenant notre image. Passons maintenant à la construction. Dans notre projet. Nous allons sélectionner le corps et ajouter une autre section. Cliquez sur E pour ouvrir la barre de recherche et ajouter une section à notre site Web. Bien entendu, avec Control Enter, nous pouvons sélectionner ce sélecteur de type et sélectionner la classe de section, mais nous l'avons déjà fait. Maintenant, cette fois, nous ne voulons pas que cette section ait un fond blanc. Vous vouliez avoir un fond plus sombre. Créons donc un format de classe combiné. Sélectionnez votre sélecteur de style et créez simplement une nouvelle classe de composition appelée dark. Et maintenant, nous pouvons modifier à la fois la topographie et la couleur d'arrière-plan de notre section. Puisque nous allons créer un fond sombre, nous voulons que le contraste soit le plus élevé possible. Pour notre typographie, la couleur sera blanc et notre couleur de fond sera le noir. Nous allons utiliser l'échantillon de couleurs que nous avons créé précédemment. Très bien, maintenant, dans cette section, bien sûr, nous devons ajouter notre conteneur. Ajoutons un conteneur et donnons-lui la classe de conteneur. Mais comme vous pouvez le constater, plus vous créez de sections, plus vous aurez fini de réutiliser de composants tels que la section B, le conteneur, les liens, les boutons et tout le reste. Maintenant, nous devons ajouter notre grille. Vous avez une disposition à deux colonnes et nous allons utiliser une grille pour créer cette disposition. Cherchons donc l'élément de la grille et ajoutons-le dans notre conteneur. Maintenant, nous ne voulons pas, nous pouvons laisser le, nous obtenons le même résultat que 16 pixels. Nous voulons supprimer la deuxième ligne, comme ça. Renommons le flux de travail de la classe Bad créé pour nous, juste pour garder les choses organisées. Disons appeler Read. Maintenant, nous voulons créer, ajouter du texte. Qui ? Notre section. Maintenant, si nous devions simplement ajouter le titre, ajoutons-en un. Et nous voulons également un paragraphe. Donc, si vous ajoutez l'élément de paragraphe, vous pouvez voir qu'il passe à la deuxième ligne, à la deuxième colonne de notre grille. Maintenant, ce que nous devons faire, c'est encapsuler notre contenu dans un bloc de disque. bloc def contiendra donc le contenu sur une ligne de notre grille. Tout comme nous l'utilisons, nous servons de format de carte. Supprimons le titre v, susceptible de coaguler, et ajoutons un simple bloc div. Donnons-lui la classe de service. Rappeur suivant. Et à l'intérieur de ce bloc div, nous pouvons ajouter notre titre ainsi que notre paragraphe. Et comme vous pouvez le constater, nous voulons également avoir un bouton et une sonnette. Ajoutons donc également le bouton. Maintenant, nous ne voulons pas que cela soit centré. Il reprenait le style du contenant. Si vous sélectionnez le service wrapper et que vous faites défiler la page jusqu'en bas, le style est, comme pour l'orange, arrière-plan est de couleur orange et que vous cliquez dessus, vous pouvez voir d'où vient la valeur. Il s'agit donc de reprendre ce style du contenant. Nous pouvons contourner cela en lui donnant simplement un style différent, juste comme ça. Alignez-le vers la gauche. Ensuite, voyons si ce bouton, notre classe, est exactement comme ça. Et commençons également à travailler sur le titre en V. Maintenant, tout d'abord, nous devons créer une classe de titres. Maintenant, appelons simplement cette rubrique. Et maintenant, nous allons lui donner une classe combinée. Avant de lui donner la classe combinée, changeons la police de ce titre en train. Un poteau et deux EM en hauteur, juste comme ça. Et ce que vous allez faire ensuite, c'est lui donner la classe combinée H2. Maintenant, pourquoi H2 ? Parce que c'est le deuxième type de rubrique le plus important. Nous avons donc le haut H1, puis pour chaque section, nous avons le titre H2. Et la raison pour laquelle nous avons ajouté la classe combinée classe de titre est que nous pouvons désormais simplement modifier sa taille et la manipuler sans avoir à toujours changer la couleur de la police, la police elle-même, le poids de la police, etc. Jetons maintenant un coup d' œil au réglage que j'ai ici. Donc huit pixels, un point vers EM. Tu peux le laisser tel quel. Modifions le bureau de texte en double-cliquant dessus. Quelque chose comme ça. Et puis, si ce paragraphe est une classe, j'ai un graphique. Et nous voulons que ce soit une taille définie de 650 pixels. Maintenant, nous classons les paragraphes eux-mêmes. Nous pouvons le conserver tel quel car il extrait des informations du corps, de toutes les pages. Eh bien, donnons à cela une classe combinée de 650 pixels. Et avec cette classe combinée sélectionnée, nous pouvons atteindre une largeur maximale de 650 pixels. Et maintenant, la largeur maximale de 650 pixels sera toujours définie. Maintenant, nous allons modifier le texte du bouton pour entrer en contact. Comme ça. Si nous examinons notre projet, vous pouvez voir que nous avons également ce rappeur d'images. Quoique. Allons sélectionner la V2 appelée grit. En cas de dérivée négative, blog passe automatiquement à la deuxième colonne. Et cela conservera notre image. Appelons cela Image Rabaa. Et à l'intérieur de ce caoutchouc d'image, nous allons mettre un élément d'image en V. À présent, utilisons simplement l'image du héros que nous avons téléchargée précédemment. Je le sélectionne simplement et nous avons maintenant une disposition de base à deux colonnes. Nous avons donc notre texte sur le côté gauche et une image sur le côté droit. Ce que je veux faire, c'est pousser un peu ce texte vers le bas. Juste pour que ce soit un peu plus intéressant. Nous desservons le trappeur fiscal sélectionné. Passez sur votre rembourrage et appuyez-le légèrement vers le bas. Comme ça, allons-y avec 38 pixels. Et je souhaite également augmenter certains changements dans l'espacement entre ces éléments. Maintenant, une façon de le faire est d'appliquer le titre directement à l'élément du paragraphe VI. Chaque fois que nous utilisons la classe de paragraphes ou la classe combinée de 650 pixels de paragraphe, le rembourrage ou la marge seront également pris en compte. Donc, ce que nous allons faire , c'est ajouter un autre bloc de disque. Et nous allons suivre notre paragraphe à l'intérieur de ce bloc div. À présent, rien n'a changé. Nous sommes difficiles, il suffit de faire le tour du paragraphe sans échanger plus d'espacement entre les éléments. Ce que nous allons faire, c'est maintenant ajouter une certaine marge pour devenir sourd bloc. Disons comme si vous louiez des pixels en haut de la page. Et voyons voir. Allons-y avec 28 pixels en bas. La raison pour laquelle nous résumons cela de manière difficile, c'est parce que nous avons désormais une manière très non destructive d'écrire ces marges. Changeons maintenant le nom de classe de ce bloc def. Cliquez à vide sur la liste déroulante, renommez-la et appelez-la marge. Nous avons 20 pixels en haut, donc le haut et le bas rayonnent. Maintenant, la raison pour laquelle un accent, donc s'il atterrit dans le navigateur, peut voir instantanément, d'accord, ces différents cadeaux, une marge sévère. Nos éléments. Très bien, nous avons maintenant échangé cette section de base. Et comme vous pouvez le voir si nous examinons notre projet d' aperçu que j'ai créé, vous avez deux autres sections de ce type. L'un sera exactement le même et l'autre sera inversé. Et la couleur du texte et la couleur d'arrière-plan seront également inversées. Construisons-le très rapidement. Vous pouvez simplement copier et coller la section V. Contrôlez donc la section Z sélectionnée et la commande V pour la coller. Un moyen très rapide de simplement changer de section. Supprimons donc le noir. Maintenant, comme vous pouvez le voir, nous avons cependant certaines choses. Ces éléments ont la bonne couleur. Ils les retirent du contenant. Maintenant, une solution rapide serait de simplement utiliser le capteur des taxes sur les services, passer à la couleur, de modifier le texte ici, et de le remplacer par notre échantillon noir. Désormais, il ne s'agit pas de récupérer les informations du conteneur, mais de notre étiquette de taxe de service. Maintenant, il y a une chose que nous devons changer, c'est le bouton. Nous devons créer une nouvelle classe de combinaison pour un bouton plus sombre avec le bouton sélectionné dans la classe de combinaison. D'accord. Et maintenant, nous pouvons simplement changer les couleurs du bouton rouge. Nous voulons que le texte soit blanc et que l'arrière-plan du bouton soit notre gris. Et bien sûr, nous devons également modifier l'effet de survol. Cliquez sur la liste déroulante. Les États survolent l'événement. Nous voulons également utiliser la typographie. Le fond de la jambe doit être transparent. Et nous avons acheté un will be black. Maintenant, jetons-y un coup d'œil. Ça a l'air plutôt bien, mais je pense que nous devons changer. Oui, nous devons également changer la couleur de la bordure de la classe de combo sombre en peste. Parfait. Nous avons maintenant un schéma de marche pour cette section. Et un moyen rapide de le faire, c'est pourquoi vous devez être très prudent lorsqu' il s'agit de modifier ces classes. Comme vous pouvez le constater, cette section a l'air vraiment bien. Je vais laisser cela de côté juste pour que vous puissiez voir ce que vous devez rechercher lorsque vous créez V. Et vous apporterez les modifications de style avec la classe car je quitte et vous pouvez casser un tas de choses. Comme vous pouvez le constater, la couleur du texte a également changé. Ce n'est donc plus comme si les textes n'étaient plus blancs , car nous diffusons ce résumé de texte que nous avons utilisé dans ces deux sections a été modifié. Donc, la classe elle-même, avez-vous modifié la couleur de la classe v elle-même ? Une solution rapide à ce problème serait d'ajouter simplement une classe combinée et de l'appeler blanche. Maintenant, il existe des solutions plus élégantes à ce problème. Mais ce n'est qu'un moyen rapide de résoudre ce problème. Donc, avec l'ensemble de la classe combinée, remettons la typographie en blanc. Et comme vous pouvez le voir, c'est maintenant réglé. Ce ne sont là que quelques-unes des petites choses que vous devez rechercher. Et soyez simplement conscient de ce que vous faites et de la classe que vous modifiez. Ça va ? Mais ce que nous voulons faire, c'est inverser l'image et le texte. Oui, rien de plus simple que ça. Bonjour à vous et à Navigateur. Et il vous suffit de cliquer et de faire glisser votre image sur le dessus du service wrapper d'un commutateur, juste comme ça. Et maintenant, nous voulons également avoir une troisième section dans la zone de publication. Nous allons simplement copier et coller la section la plus sombre et la coller ci-dessous. Une nouvelle section blanche. Ce sera pareil de toute façon. Nous avons maintenant ces sections gratuites qui les appellent des sections. Ajustons le contenu très rapidement. Passons donc à un développement rapide. Et ce sera une publication rapide. Juste comme ça. Nous modifierons les images plus tard. Lorsque nous ajoutons d'autres images et optimisons d'autres images, elles peuvent rester les mêmes pour le moment. Maintenant, c'est tout pour cette conférence. Et je te verrai dans le prochain. 14. Mise en page complexe - création d'une section de tarification: Bien, maintenant que nos sections de fonctionnalités sont terminées, créons une mise en page plus complexe. Nous allons créer une section de tarification en colonne gratuite. Maintenant, pour commencer, une fois de plus, dirigez votre élément corporel et créez une nouvelle section. Nous allons le faire rapidement avec notre raccourci clavier Control. Je cherche le spectre. Et lorsque vous utilisez Control, entrez la recherche pour notre classe de section. Nous allons utiliser la version allégée. Une fois de plus, contrôlez E, recherchez votre conteneur et appliquez rapidement le clusterisé. Maintenant, comme vous pouvez le voir, si vous avez préparé ces clusters et si vous connaissez les raccourcis clavier. La création de la mise en page de base est incroyablement rapide. Très bien, prochaine application, et nous voulons une grille de colonnes gratuite. Maintenant, nous en avons déjà un, et nous pourrions utiliser celui-ci. C'est donc une classe de réseau de service. Allons dans notre conteneur et cherchons une grille. Cliquez simplement sur Terminé ici. Nous avons donc accès à notre sélecteur de style. Et notre groupe s'appelle un réseau de services. Regardons donc cela ici, cette grille de service. Et juste comme ça, nous avons une grille de colonnes libre. Très bien, ensuite, si vous voulez créer une carte V elle-même. Donc, le contexte de notre section sur les prix ou le conteneur qui s'y rapporte. Ajoutons un bloc et contrôlons la touche Entrée pour sélectionner le sélecteur de style. Donnez-lui le nom de la carte de tarification. Comme ça. Ensuite, commençons par un petit peu avant d' y ajouter du contenu. Eh bien, allons-y et ajoutons de la typographie. Nous voulons qu'il soit toujours noir. On pourrait. Faisons de la topographie du rejet notre couleur noire. Et le fond sera d'un blanc uni, juste comme ça. Passons maintenant à la façon dont je veux structurer cette carte de prix. Regardons maintenant cet exemple de projet ici. Vous n'allez pas le construire exactement comme ça. Je veux donc avoir un petit titre pour notre fiche de prix ainsi qu'un sous-titre. Alors je veux bien, nous devons d' abord savoir combien c'est réellement. Nous allons donc établir ce niveau de prix et v par mois ou par an en fonction de votre cas d'utilisation. Et tous ces éléments sont enroulés dans différents blocs de différence afin que nous puissions les aligner un peu mieux. Nous voulons un bouton, et nous voulons également cette liste ici. Maintenant, nous allons tout construire à l'exception de la liste. La liste sera la prochaine vidéo. Très bien, alors commençons par ça. Ajoutez notre div. Tout d'abord, assurons-nous qu'il s'agit d'une flexbox. Faites maintenant défiler la page jusqu'à la mise en page et sous l'écran. Assurez-vous qu'il s'agit d'une flexbox. L'alignement que je veux aligner au centre serait bon. Ensuite, nous voulons également l'aligner sur le haut. Donc aligné vers le haut et justifiez-le auprès de vCenter. Nous allons essayer de déterminer si le centre est plus beau avec l'alignement à droite, alors que l'alignement à gauche est plus beau. Tu peux jouer avec. Très bien, maintenant, si notre carte de prix est paramétrée pour être flexible, les options d'alignement sont prêtes. Mais tout d'abord, changeons-le en deux verticaux. C'était ma faute. Assurez-vous qu'il est réglé sur la verticale, la ligne est au centre et justifiez comme étant en haut. Très bien, maintenant je veux me diriger vers un titre et un sous-titre. Je vais les emballer tous les deux dans un bloc de disque. Cherchons un bloc de définition simple et donnons-lui le nom de pricing. Maintenant, avant de continuer, donnons également une ombre à cette carte de prix. Juste pour que nous puissions réellement voir sur quoi nous travaillons. Peut-être quelque chose comme ça. Distance jusqu'au soufflet 15, taille 5,0, valeur d'opacité de 0,15 en V. Très bien, nous avons maintenant notre en-tête de tarification. Lorsque vous pressez plus fort à l'eau, vous souhaitez étiqueter. L'un sera le nom et l' autre le sous-titre. Maintenant, pour le créer, je vais utiliser un élément de titre pour le titre de la carte de prix. Je vais le fixer à trois ans. Et nous allons ajouter un peu de texte dessus une fois que nous aurons fini de créer la section des prix réels. Maintenant, pour la classe de cette rubrique, vous allez utiliser la classe de titre de base V. Je parie que vous allez créer une nouvelle classe combinée appelée h three. Maintenant, stylisons avec un petit peu, agrandissons-le un peu. Peut-être que huit pixels semblent bien. Et nous lui donnerons le nom de brasserie. Juste comme ça. Ensuite, en ce qui concerne le prix, sélectionnez-le. Vous allez rechercher un élément de bloc de texte simple, celui-ci ici. Et assurez-vous de le placer dans l'en-tête de tarification V. Appelons simplement ça. Il suffit de taper. Parfait aussi. Parfait pour les débutants, quelque chose comme ça. Et donnez-lui également la classe de prix. Sous-titre. Quelque chose dans ce sens. Augmentez la taille à environ 18 pixels. Et nous pouvons le laisser chez Open Sans juste pour le rendre un peu différent. Élément de titre We. Je n'aime pas l'espacement entre les deux. Donc, ce que nous allons faire, c'est modifier notre espacement et supprimer la valeur d'espacement. Au lieu de cela, nous margeons, la marge inférieure à zéro. Considérons maintenant que c'est un peu plus rapproché. Maintenant, ce que nous pouvons également constater, c'est qu' aucun rembourrage n'est appliqué à cette carte de prix. Sélectionnez donc votre carte tarifaire et accédez à vos options de rembourrage. Maintenez la touche Shift enfoncée et appliquez une forme de rembourrage, par exemple 18, sur tous les côtés. On pourra peut-être jouer avec ça plus tard. Très bien, et maintenant nous avons presque terminé l'en-tête des prix. Ensuite, construisons ceci. Le prix lui-même. Donc, encore une fois, la carte de tarification des cours et un bloc de disque, comme ça. Et cette fois, nous allons l'appeler blog v def. Il s'agit simplement d'un prix ou d'une étiquette de prix. Eh bien, gardons-le à un prix. Ce sera notre bloc de disque. Et inversez le troupeau. Nous voulons un bloc de texte et une autre zone de texte. Passons donc à Control C et Control V pour nous ajouter deux blocs de texte. Maintenant, disons que le prix de base sera de trois. Et ce sera n'importe quoi. C'est gratuit pour toujours. Maintenant, donnons à ce bloc de texte une classe similaire à Outre Selector. Et appelons cela le prix ainsi. Nous allons lui donner la police V Railway. Encore une fois pour quelques variations. Je veux la version audacieuse. Et d'ailleurs peut-être 32, peut-être même 36. Oui, ça a l'air mieux. Et assurez-vous que c'est 1,2 E m car la hauteur semble correcte. Maintenant, le deuxième manuel, nous allons être celui-ci, celui qui dit par mois ou par an, selon ce que vous voulez. Disons donc que c'est heure du lever. Oui. Heure de fixation des prix. Tant que vous savez avec quoi vous travaillez , votre équipe le sait. C'est bien tant que vous savez exactement ce que chaque classe représente. Très bien, gardons ça chez Open Sans. Peut-être l' agrandir un peu, comme 18 pixels. Et 1.3 EM semble bien. Maintenant, une chose que je n' aime pas à ce sujet en ce moment, c'est qu'il n' y a pas d'espacement entre l'en-tête et l'étiquette de prix elle-même. Sélectionnez donc votre en-tête de tarification et appliquez-y une marge inférieure, comme ceci. 28 semble parfaitement bien. Nous avons maintenant le nom de notre carte de tarification. Nous avons un prix, et maintenant nous voulons y ajouter un simple bouton. Et il s'agit simplement de sélectionner la carte de prix, de rechercher l' élément bouton chez le vétérinaire. Et lorsque nous y ajoutons notre classe de boutons, assurez-vous que c'est celle qui s'affiche le mieux. Nous pourrions opter pour la version sombre ou pour le contour. Passons à la version sombre et apprenons le mur. Comme ça. Maintenant, bien sûr, nous devons ajouter un peu d' espacement entre ces deux éléments. Vous pouvez appliquer une marge inférieure à l'élément de prix V. C'est flexible. Peut-être un peu moins en haut, 24 pixels. Bien, maintenant nous avons presque tout fait. La seule chose que nous aurons besoin de faire avec la carte de tarification est de répertorier les fonctionnalités de cette catégorie de prix. Et c'est ce que nous allons faire lors de la prochaine conférence. 15. Travailler avec des listes - listes non ordonnées: Bien, maintenant, pour terminer notre section sur les prix, nous devons ajouter une petite liste de fonctionnalités à cette carte de prix. Maintenant, dans Webflow, sur la conception Web en général, nous avons deux types de listes, les listes ordonnées et les listes non ordonnées. Jetons maintenant un coup d' œil aux deux. Ouvrez donc votre barre de recherche et saisissez simplement la liste. Et cela vous donnera accès à l' élément de liste V de votre carte de prix. Maintenant, comme vous pouvez le voir, nous avons ces puces. Et ici, nous pouvons double-cliquer et saisir du contenu. Maintenant, cependant, quelques options supplémentaires, bien sûr, dans les paramètres de la liste. Si vous cliquez ici sur cette roue , plusieurs options s'offrent à vous. Nous avons donc deux types de listes. Nous avons une liste non ordonnée, qui est la liste des puces. Et puis nous avons également la liste ordonnée, qui descend simplement de 1 à 3 et ainsi de suite. Et nous avons également la possibilité de retirer complètement la balle. Si tu veux juste une liste. Nous n'avons pas besoin de puces ou de chiffres sur le côté. Nous pouvons le supprimer de cette façon. Maintenant, dans notre cas, nous voulons créer une liste non ordonnée. Et si nous double-cliquons dessus, nous allons simplement taper liste les uns des autres, juste comme espace réservé. Maintenant, je peux simplement m'intégrer à chaque point, comme ça. Et pour personnaliser ces éléments de liste, nous avons plusieurs moyens de le faire. Ainsi, lors des élections de notre État, il peut éva, nous pouvons créer une nouvelle classe pour les éléments de la liste. Bien que ce soit encore plus simple, nous pouvons accéder à la balise HTML, à tous les éléments de la liste. Maintenant, nous pouvons procéder aux ajustements nécessaires. Et comme vous pouvez le constater, chaque élément de liste notre site Web change en fonction des modifications que nous apportons. Disons que nous voulons que ce soit 18 pixels. Et je pense que le d, on peut laisser le reste inchangé. Juste comme ça. Oui. Ce que je veux faire, cependant, c'est que cela soit centré. Je veux donc qu'il soit parfaitement au centre, comme vous pouvez le voir maintenant. C'est un peu sur la droite. Et c'est parce que l'élément de liste est assorti d'un rembourrage de base de 40. Enlevons ce rembourrage, mettons-le à zéro. Comme vous pouvez le constater, Webflow a créé notre classe matricielle V qui a parfaitement centré notre liste. Désormais, un vétérinaire n'inclut pas les puces. Peut-être devons-nous le pousser dedans, juste le regarder de près. Quelque chose comme ça, dix. Cela me semble assez centré. Et nous voulons également lui donner une certaine marge pour le séparer un peu du bouton. Peut-être 24 ans. Et c'est ainsi que nous avons créé cette carte de tarification très basique. Désormais, si vous souhaitez avoir plus d'éléments de liste, vous pouvez simplement copier et coller un élément de liste et en ajouter autant que vous le souhaitez ou les supprimer. Et c'est à peu près tout pour cette carte de prix. Maintenant, opiacons et collons-le, qu'il passe automatiquement à la deuxième rangée. Modifions également le texte. Ce sera donc fondamental. Et ce sera, disons, 4$ dans l'autre sens et par mois. Alors copiez-le. Et ce sera zéro. Ce sera 9$ par mois. Parfait pour les bases. Et parfait pour de telles rangées. Maintenant que nous avons ajouté le titre mate v à un champ H, nous voulons avoir une balise H2 au-dessus de celui-ci. Rendons cette grille un peu plus petite. Et une fois notre conteneur sélectionné, ajoutons un titre. Assurez-vous qu'il se trouve sur le dessus du contenant, au-dessus de la grille. Et nous devons également lui attribuer la classe de la rubrique classe H2. Et maintenant, c'est réglé à droite, tant pis car notre contenant a pour couleur de base le blanc. Changeons cela. Maintenant, vérifions si tout fonctionne toujours. Ça ne l'est pas. Si vous apportez ces modifications, vous devez toujours faire attention à ces éléments. Donc, parce que nous n'avions que la classe de conteneur de base dans notre section héros et que nous l'avons créée en blanc. Nous devons ajuster cela en conséquence. Disons donc conteneur et donnons-lui la classe combinée. Ou pour de vrai ? Maintenant, nous pouvons réparer les erreurs , les annuler. Et maintenant, pour chaque contenant que nous avons, la couleur sera noire. C'est ce qu'on appelle cette tarification. Et ajoutons également un paragraphe. La classe de paragraphes. Et je pense que la classe combinée 650 devrait avoir l'air plutôt décente. Oui. Faisons en sorte qu'il soit centré. Maintenant, si nous modifions ces marges, bien sûr, elles changeront également ici même lorsque nous utiliserons la même classe de combinaison. Maintenant, une façon de lutter contre cela est de simplement l'envelopper dans un bloc de disque. Comme ça. Appelons ce centre et assurons-nous qu'il est aligné vers la gauche et qu'il ne fonctionne pas. Devons-nous le fléchir ? Parfois, vous pensez que quelque chose devrait fonctionner. Si quelque chose n'a pas de sens, essayez une autre méthode, jouez avec les paramètres. Cela pourrait régler votre problème. La plupart du temps, vous serez en mesure de trouver une solution. Je vais commencer à essayer différentes manières de faire quelque chose. Maintenant. Je veux créer un rembourrage, alors ajoutons-le simplement au centre. Si une certaine marge. Alors appuyez un peu dessus. Donc, avec notre centre, ce refoulement vers le bas. Et je crois que j'aime ça. Nous pourrions supprimer une partie du texte réservé de base de cette manière. Et juste comme ça, nous avons créé une section de tarification de base assez décente. 16. Créer un formulaire de contact: Très bien, maintenant la section 50 des prix est terminée. Parlons de l'un des éléments les plus importants de chaque site Web ou contact émanant du client ou de votre client potentiel. Ils doivent avoir un moyen de vous contacter pour votre service. Bien entendu, nous devons ajouter un formulaire de contact à notre site Web. Désormais, la création de formulaires de contact est incroyablement facile dans Webflow, et cela ne prend que quelques étapes. Donc, tout d'abord, créons une section comme nous l'avons fait avec notre élément section, section. Si c'est notre section plus. Maintenant que nous avons utilisé le fond blanc ici, je veux que vous alterniez entre le foncé et le clair. Ajoutons donc la classe combinée, dark. Et bien sûr, nous devons le mettre dans un récipient. Et ce conteneur ou cette classe de conteneurs. Maintenant, dans ce conteneur, je veux avoir un titre et un paragraphe. Ajoutons le titre comme ici. Et assurez-vous de choisir le type de titre V H2. Et comme vous pouvez le constater, la couleur du texte est exactement la même que celle de l'arrière-plan. Accédez donc à votre conteneur et ajoutez-y une classe combinée V blanche. C'est juste un type pour les paramètres d' hypertrophie du noir au blanc. Maintenant, nommons-le et disons entrer en contact. Et nous devons également appliquer notre classe de rubrique, la rubrique H2. Et nous voulons également ajouter un petit paragraphe en dessous. Donc, encore une fois, un graphique à barres de recherche sur les flocons d'avoine. Donnez-lui une classe de paragraphe de flux, mais nous avons créé et voulons utiliser le format de classe combinée V 650 pixels. Élitisons une partie du texte réservé. Et nous voulons qu'il soit centré. Nous allons donc faire la même configuration ici avec cette classe centrale, mais nous avons créé « Let's rub in a def block ». Placez le paragraphe dans notre bloc def et offrez-lui le bloc de classe vCenter. Et c'est ainsi que nous avons centré notre texte. Très bien, ensuite, parlons du formulaire de contact. Nous avons désormais accès à tous nos éléments de contact dans le panneau des éléments, le panneau ci-dessous dans les formulaires. Nous avons accès à tous les éléments individuels, mais nous pouvons également avoir ce bloc de formulaire de base. En l'ajoutant, nous ajoutons un élément de bloc de formulaire à notre site Web. Jetons maintenant un coup d' œil aux paramètres. Nous avons trois états différents à cet égard. L'état normal de l'EFD, qui est la forme B elle-même. L'état de réussite, qui s'affiche si l'e-mail a été envoyé avec succès et si quelque chose ne va pas, vous avez bien sûr un état d'erreur. Maintenant, nous pouvons également donner notre ancien nom. Vous allez laisser toutes ces options, SVR. Maintenant, si nous ouvrons le bloc de formulaire dans notre navigateur, vous pouvez voir que nous avons trois divs différents. L'un est le formulaire V lui-même, qui nous aide en fait à utiliser champs de texte étiquetés et des boutons. Et lorsque nous avons deux motifs, alors le message de réussite et le message d'erreur. Ils sont cachés pour le moment. Et c'est exactement la même chose, mais je vous l'ai déjà montré différents états, ils sont simplement cachés. Maintenant, ce que je veux faire, c'est que je ne veux pas que le formulaire s'étire complètement. Donc, ce que nous allons faire c'est ajouter un nouveau bloc de disque, déchiqueté au-dessus du bloc de formulaire et placer le bloc de formulaire à l'intérieur de ce bloc div. Vous allez donner à ce bloc def une classe d'enveloppe de formulaire et une largeur maximale de 750 pixels, disons. Oui, ça a l'air bien. Et bien sûr, nous devons le centrer. Appliquons donc une marge automatique des deux côtés. Comme un vétérinaire. Très bien, nous avons maintenant centré notre élément, notre bloc de formulaire. Et disséquons un peu cela. Ainsi, pour chaque champ de texte , nous avons généralement une étiquette et le champ lui-même. Ce champ nous indique simplement, est étiqueté, nous indique le sujet du champ, type d'informations que nous devons y saisir. C'est ainsi que ces champs individuels sont structurés et, bien sûr, à la fin, nous avons un simple bouton d'envoi. Maintenant, même si cela s'appelle un bouton de soumission ici, nous pouvons simplement y appliquer notre classe de boutons. Juste comme ça. Maintenant, le motif correspond à tous les autres boutons. Vous pouvez même modifier le texte proposé en double-cliquant dessus. Et ici, nous pouvons taper le texte du bouton V. Recevons un message, comme ça. Très bien, maintenant, il y a une chose que je veux changer comme je veux, elles soient toutes alignées sur la gauche. Le bloc de formulaire est donc sélectionné. Passons aux paramètres de topographie et alignons les lignes vers la gauche. Comme vous pouvez le constater, Webflow a été créé automatiquement avant le cours pour nous. Maintenant, avec ces étiquettes de champs, l'avantage est que nous n'avons pas vraiment besoin de créer une classe pour elles. Si vous sélectionnez l'étiquette du champ et accédez au sélecteur de site, vous pouvez voir que nous avons une balise HTML contenant toutes les étiquettes. Nous pouvons l'ajouter. Alors allons-y. Sélectionnez le poids normal de la police Open Sans. Gardons-le à 16 pixels. Je pense que ça a l'air bien pour le moment. Maintenant, ce que je veux, le premier formulaire, je veux cliquer sur le nom, l'adresse e-mail. Ces deux vont donc parfaitement bien. Nous pouvons les conserver en tant que relations publiques, mais je veux aussi un champ de message. Passons maintenant à notre menu Ajouter et à la section Formulaires. Tout d'abord, ajoutons une nouvelle étiquette. Dans les parages. Appelons ce message. Et ajoutons l'élément de la zone de texte. Cet élément vous permet maintenant de saisir votre message actuel. Et mettons-le en dessous du message V, juste comme ça. Ça va ? Maintenant, une chose que vous voyez instantanément, c'est que nous avons du texte réservé ici, mais pas dans le champ de l' adresse e-mail ou du nom. Maintenant, pour ajouter du texte de remplacement cliquez simplement sur l'icône Paramètres. Ici, nous avons accès à nos paramètres de champ auxquels nous pouvons donner un nom. Ensuite, nous pouvons déclarer le type d'entrée que nous voulons que ce soit. À l'heure actuelle. Ce sont des textes simples, donc tout est permis. Vous pouvez donc taper un nom, saisir des messages et des choses comme ça. Mais nous avons également un e-mail, un mot de passe, un numéro de téléphone. Pour ça. Comme ce n'est qu'un nom simple, vous allez le garder dans l'avion. Et nous pouvons lui donner des textes d' espace réservé. Optez pour quelque chose de basique, John Doe, point, point. Et puis vous avez deux champs. Il en faut un. Le formulaire ne peut donc pas être envoyé si les informations n'ont pas été remplies. C'est ce que nous voulons. Et nous avons la mise au point automatique, ce que nous ne voulons pas dans ce cas mise au point automatique est simplement sélectionnée pour être formée pour vous. Une fois que vous êtes sur le site Web, nous pouvons commencer à taper instantanément. Ce n'est pas ce que vous voulez dans ce cas. Nous allons maintenant modifier les paramètres de notre champ de courrier électronique. Changez le type en e-mail. J'ai été un e-mail réservé. Passons à quelque chose de fictif comme John doe@gmail.com. Gardez-le au moment requis, et c'est tout. Maintenant, nous pouvons bien sûr modifier ces champs, mais nous avons un contrôle total sur leur conception. Une chose que je veux faire est de modifier le texte de l'espace réservé. Donc, tout d'abord, donnons à cette classe une classe appelée champ de texte. Et pour modifier l'espace réservé, j' ai levé le champ de texte sélectionné. Nous sommes descendus. Et comme il s'agit d'un champ de texte, nous avons cet état d'espace réservé. Maintenant, il ferme immédiatement de nombreuses fenêtres. Et ici, nous avons accès à la topographie de celui-ci. Et comme vous pouvez le voir, nous pouvons le personnaliser comme n'importe quel autre. Utilisons quelque chose comme ça, comme une valeur d'opacité de 30 à 30  % en V, et peut-être un peu plus petite, comme 14 pixels. Oui, j'aime bien ça. Ce n'est pas trop intrusif, mais pas trop petit, Eva. Maintenant, ajoutons la classe V TextField aux autres champs de texte. Comme ça. Maintenant, une chose que nous devons encore concevoir concerne les différents états de l'état de réussite, ainsi que l'état v Aero. Sélectionnez maintenant votre bloc de formulaire et vous pouvez basculer entre le succès et notre état ici , dans nos paramètres de bloc de formulaire. Si vous cliquez simplement sur Paramètres du bloc de formulaires ici, vous pouvez cliquer sur Succès. Et créons simplement un style très simple. Faisons de ce fond un fond vert. Un peu plus foncé, juste ça, ça passe au vert, ça nous dit, d'accord, ça a marché. Également. Arrondissons un peu les angles. Ainsi, vous pouvez laisser votre texte tel quel. Ce serait notre état de réussite. Et pour modifier l'état v Aero, encore une fois, le bloc de formulaire inactif. Et cliquez sur la flèche ici. Et définissons l'état d'erreur. Maintenant, nous voulons juste un rouge noir légèrement plus foncé et arrondissez les coins un peu comme ça. Et je pense que ça a l'air plutôt décent. 17. Créer une navigation: Bien, si le formulaire de contact est terminé pour l'instant, il ne nous reste que deux sections où nous ne pouvons pas vraiment les appeler sections à créer. Et l'un, bien sûr, sera le pied de page, et l'autre sera la navigation. Commençons donc à créer une navigation pour ce site de représentation. Maintenant, un Webflow nous facilite la tâche, car si vous regardez le panneau Eléments et que nous faisons défiler une variété de choses vers le bas, tout en bas. Dans la catégorie avancée, vous disposez d'un composant de barre de navigation préfabriqué nous pouvons concevoir et styliser. Alors, glissons-le dedans et assurons-nous qu'il se trouve en haut de la section des héros. C'est comme ça. Passons maintenant au style de cette barre de navigation. Maintenant, si vous regardez ceci, comme vous pouvez le voir, le néphron est sa propre petite icône. Et puis il y a juste un conteneur, un bloc de branches, un blog de liens où nous pouvons insérer notre logo, ainsi qu'un div appelé menu de navigation, qui contiendra nos liens de navigation. Ces obligations sont là. Et quand aussi un bouton invisible. Sur un écran plus petit. Vous pouvez voir que nous avons ce Berg que je peux. Maintenant, pour cette conférence, nous allons personnaliser la version de bureau de cette barre de navigation. Commençons par le haut. Maintenant, je veux que ce soit une couleur blanche simple. Alors, tout d'abord, donnez-lui un style, une classe, et nous allons l' appeler navigation. Ensuite, nous allons changer la couleur de fond du gris au blanc. Ensuite, vous allez sélectionner le conteneur. Et nous allons lui donner la classe de conteneur de base. C'est donc exactement la même largeur que le reste du site Web. Ensuite, examinons ce bloc de branches. Maintenant, nous pourrions simplement, dans une image , y ajouter une topographie de base. Si vous n'avez pas de logo prêt pour le moment, allons-y. Ajoutons-y, en fait, utilisons simplement un bloc de texte et ajoutons-le à la marque. Comme ça. Appelons simplement ce site Web de flux de travail. Maintenant, une chose que nous devons corriger maintenant, c'est que nous devons le faire réellement envoyer. Donc, si vous voulez sélectionner le conteneur, nous pouvons le fléchir et ensuite tout aligner pour qu'il soit centré. Donc 50 conteneurs sélectionnés. Donnons-lui une classe combinée appelée nav et mettons-la sous le nom de Flexbox. Et nous allons le faire horizontalement et l'aligner au centre. Comme ça. Très bien, maintenant, vous vous êtes probablement rendu compte que notre menu de navigation a été poussé complètement vers la gauche. Maintenant, c'est très facile à corriger. Menu Sélectionnez-le, donnons-lui un menu de navigation de classe. Il suffit de lui appliquer une marge automatique et elle est repoussée vers la droite, comme ça. Vous pouvez également personnaliser le texte de ce logo. Appelons simplement ce banc à logo. Nous avons créé deux chemins de fer. Mettez-le en gras et augmentez la taille jusqu'à ce que vous soyez satisfait. 24 pixels semblent bien. Pour l'instant. Très bien, maintenant nous avons notre logo. Ensuite, tout est centré, et nous avons ces liens de navigation ici. Jetons maintenant un coup d'œil à ceux-ci. Tout d'abord, comme vous pouvez le constater, aucun style ne lui a été appliqué, donc aucune classe n'a été appliquée. Changeons donc cela avant d'apporter des modifications. C'est ce qu'on appelle un lien de navigation et applique la classe à tous les liens. Comme ça. Maintenant, si vous apportez quelques modifications, puisque nous utilisons la même classe, tout sera exactement pareil. Faisons en sorte que cela ressemble à 18 pixels, juste un peu plus grand que V ou le texte. Maintenant que nous sommes habitués, puisque ce sont des liens que nous voulons personnaliser, faites-leur des effets de survol. Faisons donc quelques éléments de base. Ajoutons un état de survol de base. liste déroulante, passez sur les états de la classe de naphtalène et allégez-la un peu. Utilisons cette couleur grise. Nous pourrions également le déplacer un peu plus haut. Je pense. Passons aux transformations 2D et 3D. Moins deux, peut-être moins deux sur l'axe Y du déplacement. Ajoutons une transition vers le lit. Lors d'une transition ou d'une propriété, passons à plus de 400 millisecondes. Et maintenant, nous avons ces jolies petites animations dans notre Netflix. Hein ? Maintenant. C'est à peu près ça. Cependant, il existe un moyen d'éléments de navigation. Donc, si vous allez dans les paramètres d' Elements et que vous sélectionnez le menu de navigation, vous verrez que nous avons un tas de nouveaux paramètres dans les paramètres de la barre de navigation. Maintenant, vous pouvez basculer dans le menu mobile comme vous pouvez le voir, vous pouvez également le masquer. Maintenant, nous allons les examiner dans la prochaine conférence, où nous allons rendre ce mobile réactif. Ce que je veux te montrer, c'est juste ici. Le F est une petite option intéressante appelée Ajouter un lien, qui nous permettra d' ajouter un nouveau lien de navigation à la barre de navigation. Maintenant, gardez à l'esprit qu' aucune classe ne lui a été appliquée mais que nous devons appliquer cette classe. Mais l'option est toujours là où vous pouvez, bien sûr, également copier et coller autant de ces liens que vous le souhaitez. Très bien, modifions maintenant ces liens. Nous n'avons donc pas besoin d'un lien d' accueil, car ce sera notre logo lui-même. Donc, si vous cliquez sur le logo, nous retournerons à la page d' accueil, en haut de la page. Vous voulez, cependant, des fonctionnalités qui s'afficheront ici même. Ensuite, nous voulons un lien pour les prix et le contact. Faisons entrer l'iPad. Tarification. Et le contact a déjà échoué , nous pouvons donc le garder tel quel. Et c'est ainsi que vous créez une navigation de base pour votre site Web. 18. Créer la navigation mobile: Très bien, donc dans la conférence précédente, nous avons créé cette barre de navigation de base, le site Web. Nous devons maintenant le rendre adapté aux mobiles. Donc, si vous passez à un point d'arrêt plus petit ici, vous pouvez voir l'icône changer, l'icône du burger et le menu lui-même disparaître. Notre lieu de navigation a donc disparu. Mais nous avons ce bouton ici. Comme vous le savez, à partir d'autres sites Web mobiles. Maintenant, tout d'abord, je ne pense pas que ce soit nécessaire. Afficher le bouton de menu et la tablette. Maintenant, comment pouvons-nous ajuster cela ? Dans les paramètres de l'icône de notre menu de navigation pour tablette et ci-dessous, vous pouvez simplement faire glisser ce curseur jusqu'au point d'arrêt suivant. Et comme vous pouvez le voir maintenant notre menu principal est visible sur la taille de la tablette, mais invisible, et l'icône VFD sur le téléphone paysage et ci-dessous. Et c'est exactement ce que nous voulons car nous n'avons pas beaucoup d' éléments et une barre F. C'est parfaitement bien. Passons en mode paysage mobile. Et commençons à coiffer maintenant. Tout d'abord, les gaz avant de vouloir l'icône ici. Le moyen le plus simple de le faire est donc de simplement lui donner une marge sur la gauche par rapport à la marge automatique, de la pousser complètement vers la droite. Juste comme ça. Maintenant, ensuite, comment le styliser. Parce que si nous prévisualisons cela et que vous cliquez sur le menu, cliquez sur le menu, vous verrez maintenant la demande, mais pas dans notre conception. Revenons donc aux paramètres de la barre de télévision. Vous pouvez afficher le menu ici en utilisant Afficher et fermer. Vous pouvez maintenant revenir au gestionnaire de styles et personnaliser ce menu. Tout d'abord, nous devons modifier la couleur de fond du bouton de menu. Allons donc sélectionner l'élément. Et changeons cela. Fermons-le. En fait, je sais qu'on peut le cacher comme ça. Et rapprochons-nous de l'arrière-plan, ventralement la couleur du fond passant au blanc. Et sélectionnez l'icône. Vous pouvez maintenant importer votre propre icône. Oublie si tu veux. Je pense que c'est sous Typographie. Oui. Vous pouvez modifier la couleur de typographie de l'icône. C'est une icône SVG juste ici. Et changez-le en noir. Maintenant, c'est réglé. Et quand nous aurons besoin de changer cette jolie boîte grise. Maintenant, cette boîte grise est en fait la définition du menu de navigation. Maintenant, je veux que cela couvre la totalité de l'écran. Maintenant, comment s'y prendre ? Nous sélectionnons le menu de navigation et la valeur de la hauteur. Vous pouvez le modifier à 100 vh et régler la hauteur de la fenêtre d'affichage. cas, quel que soit l'écran que vous regardez depuis la fenêtre d'affichage, la hauteur correspond toujours à la hauteur totale de l'écran de la fenêtre d'affichage. Grâce à cela, cette mesure permet de s'assurer que le menu couvre la totalité de l'écran. Maintenant, changeons également la couleur de fond, le blanc, comme ça. Maintenant, si nous voulons augmenter la taille de ces liens de navigation, sélectionnons un lien de navigation et augmentons la taille. Vous n'avez plus à vous soucier de modifier notre affichage de bureau. Comme nous travaillons essentiellement avec du HTML et du CSS, avec des feuilles de style CSS C et F en cascade, nous ne modifierons que ce point d'arrêt et ci-dessous. Mais comme vous pouvez le constater, les modifications seront les mêmes. Si nous atteignons un point d'arrêt plus important. Comme vous pouvez le constater, c'est toujours le même qu' avant et on sait qu'un changement de régime alimentaire a été apporté. C'est ce qui est génial avec le CSS. Ouvrons à nouveau le menu afin de pouvoir continuer à le modifier. Maintenant, je veux également centrer ces boutons. Cliquez sur Align Center. Et nous pourrions également ajouter un rembourrage sur le dessus. Mais allons sélectionner le menu de navigation et ajouter un peu de rembourrage en haut, en appuyant légèrement dessus. 100 pixels. Nous pourrions également augmenter l' espacement entre eux, leur donner un peu de rembourrage, marge inférieure. Ils obtiennent donc 48 pixels. Et maintenant, nous avons un très beau menu mobile. Maintenant, si vous y jetez un œil. Comme vous pouvez le voir, nous avons la version de bureau. Vous avez la version tablette. Une fois que nous avons atteint la version paysage, la version mobile paysage, nous avons notre icône. Et si vous cliquez sur ce menu, il glisse vers le bas. Et nous avons nos plats au menu. Il en va de même pour la version mobile comme celle-ci. Et c'est ainsi que vous créez un service, barre de navigation mobile réactive. 19. Création et modification de composants: Très bien, dans cette vidéo, je veux vous montrer une fonctionnalité très utile de Webflow, à savoir les composants. Désormais, un composant est simplement un élément réutilisable que vous avez créé. Vous pouvez donc transformer peu près tout en un composant. Et vous pouvez apporter des modifications à ce composant. Et chaque composant utilisé peut être utilisé plusieurs fois sur votre site Web et toutes les modifications qui plusieurs fois sur votre site Web y sont apportées mettront à jour chaque composant. C'est donc assez puissant. Par exemple, nous pouvons transformer la navigation en un composant. Et si nous ajoutons un nouveau lien, par exemple, nous n'avons pas à nous soucier du téléchargement, mise à jour de la barre Neff pour chaque page. Il se met simplement à jour automatiquement. La création d'un nouveau composant est très, très simple. Sélection de la navigation. Et lorsque nous cliquons sur Créer un composant dans notre panneau latéral en haut. Et maintenant, sur la gauche, nous pouvons lui donner un nom. Appelons cela la navigation. Cliquez sur échanger. Et c'est tout. C'est ainsi que nous pouvons créer des composants. Maintenant, comme vous pouvez le constater, tout ce qui à l'extérieur de nos composants, à l'extérieur de notre barre de navigation, est sombre. Vous pouvez, vous ne pouvez pas vraiment modifier quoi que ce soit. Si tu veux y retourner. Vous pouvez revenir à l'instance en cliquant dessus. Et maintenant, comme vous pouvez le voir, le contour de notre navigation a cette couleur verte et il y a également cette icône de composant. Maintenant, comme vous pouvez le constater, nous ne pouvons pas vraiment modifier quoi que ce soit pour le moment pour modifier un composant. Mais si je double-clique dessus et que nous avons un contrôle total de la conception, cliquez sur cette icône à côté de son nom. Une fois que nous avons apporté une modification ici, cette modification sera mise à jour sur toutes les pages Web où ce composant est utilisé. Fonctionnalité donc vraiment puissante et rapide. 20. Créer le pied de page: Il manque maintenant un élément majeur sur notre site Web, à savoir le pied de page. Alors allons-y et créons une section photo simple pour ce site Web. Maintenant, faisons défiler la page jusqu'en bas et sélectionnons notre balise corporelle, notre élément corporel. Et nous allons ajouter une section simple. La façon dont nous avons construit cette photo sera très similaire à la façon dont nous construisons nos autres sections. Sélectionnez ce sélecteur latéral et attribuez-lui une classe. Vous allez en faire une photo blanche. Et vous allez également ajouter un conteneur de base v et le donner à la classe de conteneur. Une chose que je souhaite modifier concerne la section sélectionnée. Je veux lui donner une classe combinée de pied de page. Et je veux réduire un peu le rembourrage. Alors allons-y avec 50 en haut et en bas. Juste pour que ça ne prenne pas trop de place. Maintenant, voyons comment nous voulons structurer notre pied. Je veux donc mon logo ici. Ensuite, nous pouvons avoir quelques lignes, comme deux ou trois colonnes avec des liens de navigation. Hein ? Maintenant, la façon dont nous pouvons le construire est en fait très simple. Tout d'abord, nous allons ajouter une grille à cette photo. Et la grille vétérinaire aura une rangée. Mais maintenant, nous allons examiner ces unités de fraction ici. Comme vous pouvez le voir, nous avons ces poignées sur la grille. Et si vous cliquez dessus et faites glisser la souris, vous pouvez voir que vous pouvez réellement ajuster l' apparence des grains et l'espace occupé par chaque rangée. Cela nous donne beaucoup de contrôle sur la conception. Alors maintenant, si vous cliquez sur OK, nous avons un rouge avec une section plus grande droite et une section plus petite à gauche. Maintenant, ajoutons un simple bloc def et appelons ce wrapper de logo. Et un bloc inventif. Je veux mettre un simple bloc de marque, un bloc de liens. Celui-là. Et à l'intérieur de ce blog de liens. Il souhaite qu'un simple bloc de texte soit appliqué à notre classe locale. Maintenant, si vous utilisez une image pour votre logo, vous pouvez simplement y déposer une image et c'est nul. Comme ça. Une chose dont nous devons nous assurer, c'est qu'il est aligné à droite et à gauche sur l'emballage de votre logo. Et assurez-vous que tous les textes sont alignés vers la gauche. Notre logo est maintenant en place. Ce que nous pourrions faire pour lui donner un peu plus de caractère. Nous pourrions ajouter un paragraphe. Cela pourrait donc être juste un texte nous en disant plus sur à qui est destiné ce site Web, ce que vous faites, n'est-ce pas ? À quel service tu es souvent, des trucs comme ça. On pourrait le mettre dedans. Je voudrais maintenant augmenter la marge en haut à droite pour lui donner un peu plus de marge de manœuvre. Ajoutons donc un div. Insérez dans notre paragraphe. Et je l'ai déjà fait, ou nous avons déjà créé une classe pour cela. Nous allons donc sélectionner le sélecteur de style et saisir la marge. Et sélectionnez la marge, 20 en haut, 28 en bas. Et cela donne juste un peu plus d'espacement ici. C'est bon. C'est la première partie de la photo. maintenant à quelque chose d'un peu plus complexe. Nous allons placer un bloc à l'intérieur de cette grille, en prenant la colonne de droite. Et nous allons appeler cela la grille Neff. Parce qu'il existe deux manières d'ajouter des grilles à un site Web Webflow. L'un avec l'élément de grille. Un. Si les options s'affichent dans la mise en page, vous pouvez simplement cliquer sur la première grille d'options. Et cela nous permet de transformer n'importe quel div en grille. Maintenant, supprimons cette ligne et restons-la à deux en fait. Nous avons donc maintenant deux grilles, une grille et une autre grille à l'intérieur. Chez Grid, cela semble vraiment compliqué, mais cela nous aidera beaucoup lorsque nous rendrons le site Web réactif. Très bien, donc dans cette grille, vous allez mettre un div. Appelons cela Nav Wrapper. Et ici, nous voulons avoir un petit titre. Allons-y avec H car ce sera un site Web. Et assurons-nous qu'il est aligné à gauche. Comme ça. Gardons la classe V et la classe combinée, quatre ans. Modifions-le un peu, agrandissons-le un peu , comme 22 pixels. Nous pourrions être de la couleur et un enfant. Ne soyez pas opacité à 70 %, comme si c'était le cas. Et ce que je veux aussi faire, c'est supprimer la marge du titre pour qu'elle s'aligne parfaitement avec celui-ci. Et maintenant, il est parfaitement aligné en haut. Et maintenant, nous allons créer une nouvelle division à l'intérieur du néphron. Maintenant, comme vous pouvez le voir, nous allons beaucoup travailler avec un tas de blocs div différents juste pour intégrer notre contenu. Nous avons donc un peu plus de contrôle sur tout. Vous allez appeler cela un bloc de définition. Que sont Neff ? Et à l'intérieur de ce bloc de disque, vous allez insérer des liens vers des textes. Et ce seront nos éléments de navigation. Ce sera la maison. Donnons-lui un cours. Nous pourrions simplement le garder. En fait, donnons-lui un lien de navigation de classe. Il sera utilisé pour le même cours qu'ici. Et tu vas lui donner la photo de classe combinée. Parce que sur l'affichage mobile, nous ne voulons pas qu'il soit très grand, nous nous en occuperons donc plus tard. Mais ce n'est pas ce que nous voulons. Je passe de la photo pour prendre effet dans la navigation en haut. Nous allons donc procéder de cette façon. Ensuite, vous allez simplement copier et coller ce lien de navigation. Quelques fois où nous avons des services. Ensuite, nous nous levons et nous entretenons également des contacts. Maintenant, vous voyez immédiatement que quelque chose ne va pas ici. Nous devons modifier l'option d'affichage. Et le moyen le plus simple est d'aller dans Layout, Lex it et Vertical. Ce n'était pas le bon objet. Nous ne voulons pas que cela soit dans le néphron. Et juste pour être dans le photon F. Nous voulons fléchir cette ligne verticale vers la droite, comme ça. Et dans le photon, F13 l'a fléchi. Vous pouvez également ajouter une dent lacunaire. 18 pixels C'est un peu trop. Allons-y avec 12 pixels entre les éléments VCE. C'est même un peu trop. Allons-y avec huit. Oui, ça a l'air bien. Et comme vous pouvez le constater, puisque nous avons utilisé la classe naphtalène, toutes les animations, tous les ovules. Très bien, ensuite, copions simplement le néphron et collez-le dedans. Et maintenant, nous avons une deuxième ligne pour les éléments de navigation. C'est ce que l'on appelle ces services. En fonction de l'apparence que vous souhaitez donner à votre site Web, vous pouvez bien sûr concevoir complètement la photo d'une manière différente. Ce sera du design. Ce sera du développement, et ce sera de la publication. Et tu peux supprimer le dernier. Et c'est à peu près tout pour notre photon. Une chose que je veux vraiment changer de ligne est son alignement. Je pense qu'il serait plus beau s' il était réellement aligné de ce côté. Voyons voir, comment pourrions-nous résoudre ce problème ? Comme ça ? Vous pouvez simplement l'aligner vers la droite, sélectionner la grille Neff et l'aligner vers la droite. Parce que maintenant, il est aligné sur notre conteneur. Ça a juste l'air beaucoup plus propre. Mais nous pourrions également appliquer un paragraphe plus ce paragraphe ici. Et peut-être que 350 pixels auraient l'air bien. Largeur maximale de 350 pixels. Oui Ça ne prend pas toute la place ici. C'est juste un peu plus propre. Maintenant. C'est tout pour le moment. Ce sera la photo. C'est donc très basique. Nous pouvons en faire beaucoup plus, bien entendu. Mais je pense que ça a l'air plutôt correct jusqu'à présent. Une dernière chose que je souhaite faire est d'en faire un composant. Cliquez donc sur Créer un composant. Et maintenant, chaque fois que nous avons besoin de l'utiliser à nouveau, nous en avons un élément. 21. Rendre notre site Web responsive: Très bien, il est temps de passer à quelque chose extrêmement important à notre époque. Chaque site Web doit être réactif et s'afficher correctement sur toutes les tailles d'écran. À l'heure actuelle, cela semble assez décent sur les ordinateurs de bureau. Mais dès que nous passons à une taille plus petite, comme le mode tablette, vous pouvez voir que cela ne semble pas très beau. Ce n'est pas censé ressembler à ça. Maintenant, corrigeons ce problème. Maintenant, l'avantage du CSS , c'est l'humidité. Une fois que nous avons sélectionné ce point d'arrêt, nous apportons des modifications de style à tous nos éléments. Ces modifications ne seront répercutées que jusqu'aux points d'arrêt inférieurs. Ils n'affectent pas les points d'arrêt les plus élevés. Des points d'arrêt plus grands que lui-même. Si vous apportez des modifications au mode tablette, une sera reportée sur les vues mobiles, mais pas sur les vues de bureau. Commençons à styliser nos éléments. Maintenant. Tout d'abord, commençons par la section Services. Maintenant, une mise en page à trois colonnes ne semble pas bonne dans ce centre commercial de taille d'écran. Et comme vous pouvez le constater, il n'a pas non plus de marge de manœuvre. Juste ici. Maintenant, comment changer d'endroit ? C'est super simple ? Tout d'abord, commençons par cette salle de respiration. Sélectionnez notre conteneur et nous lui donnons simplement un peu de rembourrage des deux côtés, comme dix pixels, peut-être 2020 pixels des deux côtés. Et maintenant, comme vous pouvez le constater, tous les conteneurs ont été mis à jour et tout a un peu plus de marge de manœuvre, tout a l'air beaucoup plus propre. Aucun élément ne touche les bords comme nous le voulions. Ensuite, changeons cette grille ici même où nous incarnons Gretchen. Donc, comme je l'ai déjà dit, une disposition en colonnes libre, je ne pense pas qu'elle se détendra trop bien. Changeons donc cela. Maintenant, pour modifier une grille, vous pouvez cliquer sur ce bouton Modifier la grille ou vous pouvez cliquer sur l'icône rouge en haut dans le coin. Et la meilleure façon de le faire, je pense que nous allons simplement ajouter une autre ligne. Et lorsque nous supprimons un élément ici, le vétérinaire place automatiquement l'objet dans la deuxième rangée. Et cela augmente la quantité d'espace dont disposent les éléments V. Si vous cliquez sur Terminé. Nous avons maintenant cette disposition à deux colonnes. Et la carte du micrologiciel restante est enfoncée. Je pense que ça a l'air plutôt bien pour le moment. Peut-être pourrions-nous même en faire une mise en page à une colonne. Donc, lorsque nous lui donnons simplement une largeur maximale, sélectionnez la carte de service, donnez-lui une largeur maximale de 350. Peut-être un peu plus de 450 pixels comme ça. Et lorsque nous devons placer cela au centre, comment s'y prendre maintenant ? Nous sélectionnons la grille de service et l'alignons pour qu' elle soit centrée ici. Maintenant, comme vous pouvez le voir, il a l'air beaucoup plus propre qu'avant. Bien que nous disposions d'une grande marge de manœuvre sur tous ces sites, vous n'avez aucun problème avec le fait que ce soit asymétrique. Si vous n'avez que deux colonnes, il y aura de l'espace vide ici. Ce n'est pas ce que nous voulons. Un autre avantage est que si vous optez pour une taille d'écran plus petite, comme vous pouvez le constater, cela reste très beau et fonctionne tout simplement. Très bien, revenons à l'affichage sur tablette. Faites défiler la page vers le bas et ajoutons-y des sections en V. Maintenant, la meilleure façon de le faire, je pense, est simplement de modifier la grille, y ajouter une autre ligne et de supprimer une ligne. Et comme vous pouvez le voir, nous avons maintenant cette belle disposition en une colonne. Maintenant, une autre chose que nous pouvons faire est de séparer un peu plus ces deux éléments l'un de l'autre. Revenons donc à nos paramètres de grille. Et bien que nous puissions saisir une valeur définie ici, vous pouvez également poser des questions sur l'espace entre les deux lignes. Cliquez et faites glisser. Pour augmenter l'espacement. Allons-y avec 42. Et cela donne juste un peu plus de marge de manœuvre à tout. C'est juste un peu plus beau. Je pense que pour l'affichage sur tablette, je veux le garder aligné à gauche pour le moment. Peut-être pourrons-nous changer cela plus tard. Ce que nous voulons également faire, c'est retirer le rembourrage par le haut. Je pense que ça a l'air beaucoup mieux. Si nous mettons le rembourrage à zéro dans le résumé du texte de notre service. Juste comme ça. Maintenant, si vous faites défiler la page vers le bas, je pense que nous voulons faire de même ici. Oui Passons donc à ce résumé du texte du service. La bonne classe de combinaison n'est pas appliquée, alors ajoutons-nous à zéro ici également. Comme vous pouvez le constater, puisque nous avons modifié la grille elle-même, la classe, la distance entre les colonnes entre les reports se trouve dans chaque section. Maintenant, ça a l'air parfaitement bien. Jetons maintenant un coup d'œil à cette section de tarification. Maintenant, comme vous pouvez le constater, cela n'a pas l'air bien du tout. Pourquoi ? Je suis fan de la mise en page à colonne unique. Il faut fortement ajuster les coûts de tarification eux-mêmes. Tout est déjà aligné à gauche, aligné au centre. Nous devons simplement en augmenter la taille. Sélectionnez donc votre carte tarifaire et accédez au menu des tailles, à vos options de taille. Et allons-y avec une largeur maximale de 450 pixels. Vous devez également ajuster l'enchère minimale pour. Nous allons définir la largeur minimale n V, enchère maximale pour ces deux éléments. Maintenant, tout a un peu plus de marge de manœuvre. Ce que nous pourrions également faire, c'est augmenter le rembourrage en haut et en bas. Disons que le drapeau F, un rembourrage inférieur de 48, peut-être, E peut le maintenir à 18 en haut, je pense que ça a l'air plutôt décent. Et si nous augmentons la taille, tout va parfaitement bien. Oui, j'aime bien cette section de tarification. Maintenant, jetons un coup d' œil à ce formulaire. Dans la section contact. Je pense que nous pouvons le laisser tel quel. C'est plutôt sympa. Apparemment, cette vue réactive de la tablette Avi, nous pouvons la garder telle quelle. Maintenant, il ne reste plus que le pied de page. Passons maintenant aux composants. Cliquez donc sur Modifier le composant. Et maintenant, nous allons voir pourquoi nous voulions du gruau. Tout d'abord, je veux que les deux restent côte à côte dans la vue de la tablette. Mais je veux ce bloc en haut. Sélectionnez donc la grille que nous avons créée et nous accédons à ses options. Vous allez ajouter une autre ligne. Et nous allons également supprimer v qui en est à 0,5 fraction rho, la colonne qui en provient. Et maintenant, si vous cliquez sur Terminé, vous pouvez voir que cette grille est toujours en bas. Et ce logo rappeur est maintenant en haut de la liste. Maintenant, définissons-les. Sélectionnez donc le caoutchouc de l'enregistreur et cliquez simplement sur Justifier pour être au centre. Et fais de même. Vos options de typographie et cliquez sur la ligne pour être au centre. Seul le texte de Toby est aligné au centre. Il ne nous reste plus qu' à passer à la grille V Neff. Et pour l'instant, il est aligné sur la droite. Nous voulons l' aligner au centre. Juste comme ça. Une autre chose que nous voulons, c'est entrer dans le pied et F Now et l' aligner également sur le centre. Passons donc à vos options d' épigraphie. Je pense que nous devons modifier l'année. Vous devez modifier le lien de navigation dans. Voyons voir où ça mène V ? Oui, nous avons un F et nous l' alignons au centre. Comme ça. Et bien sûr, faites de même. Est-ce que nous nous dirigeons vers H ? Juste comme ça ? Maintenant, tout est bien aligné par rapport au centre. Maintenant, bien sûr, une morsure vétérinaire, ça. Ce n'est pas encore terminé. Bien que la plupart du site Web soit plutôt belle, même sur des écrans de très petite taille, nous avons quelques ajustements à apporter. Donc, ici, par exemple vous pouvez en fait, oui, nous pouvons le faire dans la vue de la tablette. L'espacement entre ces lignes est un peu trop important pour moi. Titre principal sélectif lorsque vous êtes au point d'arrêt de la tablette. Et accédez à vos options de hauteur dans la topographie en V. Et réduisons cette hauteur de ligne. Comme 1.21. Ça a l'air plutôt décent. Vérifions-le sur les autres points d'arrêt. Oui, ça a l'air bien. Bien que plus l'écran soit petit, je pense que si nous devons être un peu plus petits, c'est un peu trop. Donc, en mode paysage mobile. Faites en sorte que nous ajoutions une taille , peut-être 48. Oui, ça a l'air sacrément bon. Vérifions-le sur la plus petite taille. J'en suis content. Maintenant, une chose que je veux changer maintenant, ces brevets passent ensuite à Berg, que ces brevets passent ensuite à Berg, l'un à côté de l'autre. En mode paysage, vous devez les ajuster dans la vue mobile réelle, mais je ne veux pas qu'ils soient écrasés comme ça. Passons à notre emballage à motifs de héros. Dans notre point d'arrêt mobile. Voyons voir. Justifiez-les. Changez la direction de la flexbox à verticale et alignez-la pour qu' elle soit centrée de cette manière. Voyons à quoi ressemble le reste du site Web. Je pense que j'en ai envie, je trouve qu'ils sont également très beaux sur une taille plus petite comme ça. La tarification fonctionne également. La seule chose que nous devons vraiment ajuster est le pied de page. Revenons donc à la V0. Cliquez sur Modifier le composant sur votre photo. Et maintenant, une chose. Tout d'abord, nous devons nous assurer que nous, Netflix, restons réellement les mêmes. Donc 18 pixels, 1,5 e m. À l'heure actuelle, il prend les informations de la valeur Knaflic, qui provient de notre menu mobile que nous avons créé précédemment. Mais comme la classe de pied de page est appliquée, nous pouvons à nouveau remettre ces valeurs à 18. Et je veux aussi supprimer la suppression , peut-être comme faire en sorte que la marge inférieure soit six. Ça a l'air beaucoup mieux. Je pense que pour le paysage mobile, nous pouvons nous en tenir à deux colonnes. Version immobile, cependant, je veux être géniale. Pas deux colonnes, mais 22 lignes, comme ça. Nous voulons également augmenter le temps que nous avons conservé entre les deux routes à 36 pixels environ. Alors maintenant, si vous le prévisualisez, il semble assez correct sur toutes les tailles d'écran. Et c'est ainsi que vous rendez vos sites Web réactifs. Comme vous pouvez le constater, c'est un processus assez simple. Vous devez simplement parcourir vous-même vos sections. Maintenant, vous pouvez même le faire à la fin de votre projet. Ou vous pouvez le faire à la fin de chaque section et l' ajuster en cours de route. Tout dépend de vos préférences. 22. Ajout d'animations de base - onglet Interactions: Bien, maintenant que nous avons terminé de créer notre site Web, nous allons le prévisualiser. Vous pouvez voir que ça a l'air plutôt décent, mais il manque quelque chose. Et ce truc, ce sont des animations de base. Une fois que nous avons fait défiler la page vers le bas, nous voulons que cette section s'estompe doucement depuis le bas. Juste pour que ce soit un peu plus interactif. Maintenant, comment s'y prendre ? Maintenant, quand je vous ai montré le gestionnaire de style et l'interface, ai rapidement parlé du menu des interactions, qui se trouve ici dans votre gestionnaire de style. Maintenant, en utilisant vet dans le menu Actions, nous pouvons très facilement créer des animations de base ou des animations très complexes pour chacune de nos sections, pour chacun de nos éléments. Maintenant, la façon dont j'aime le faire, du moins dans cet exemple, assure de sélectionner votre conteneur. Maintenant, nous allons rendre cela très simple, afin de ne pas passer trop de temps sur ces animations avec un tas de diapositives, d'effets, etc. Ce que nous voulons, c'est que cela s'estompe lentement. Donc, tout d'abord, nous devons réfléchir à ce que nous voulons animer exactement ? Maintenant, dans notre cas, nous voulons que le texte et les boutons s'estompent lentement. Nous ne voulons pas effacer toute la section. Alors, sélectionnez notre conteneur. Ensuite, dans nos éléments, dans notre panneau d'actions, accédez au déclencheur d'éléments et cliquez sur l'icône plus. Et voici quelques déclencheurs. Déclenchez nos animations. Cela peut être un clic de souris, des effets de survol. Pour la plupart d'entre nous. Ce que nous voulons, c'est faire défiler la vue. Dès que l'élément apparaît dans notre fenêtre d'affichage, l'animation démarre. Maintenant, lorsque nous cliquons sur faire défiler la vue, nous avons ce nouveau menu ici. Tout d'abord, nous pouvons sélectionner l'action. Alors, que doit-il se passer lorsque l' élément est affiché ? Maintenant, comme vous pouvez le voir, nous avons un tas d' animations prédéfinies parmi lesquelles choisir, mais nous pouvons également créer des animations personnalisées. Maintenant, pour les besoins de ce cours, nous allons utiliser les animations prédéfinies. Comme nous ne voulons aborder que les bases, la lecture d'animations personnalisées peut prendre beaucoup de temps, et c'est un peu plus compliqué et complexe. Très bien, nous voulons donc que cela se fasse par le bas. Donc, dans cette liste déroulante, nous allons sélectionner la légère animation. Et maintenant, nous avons un tas d'options différentes. Vous pouvez le faire glisser dedans, nous pouvons le faire glisser vers l'extérieur. Et comme vous pouvez le voir, nous avons également ce bouton de prévisualisation. Donc, pour le moment, c'est réglé sur de gauche. Et si vous le prévisualisez, il apparaît depuis la gauche. Nous voulions maintenant entrer par le bas. Vous allez donc choisir dans cette liste déroulante en partant du bas. Prévisualisons-le. Ajoutons un peu de retard. Donc, 200 millisecondes. Ça a l'air bien mieux. Désormais, nous pouvons également ajouter une animation lorsqu'elle défile hors de vous. n'est pas quelque chose que nous voulons dans ce cas, mais l'option est toujours là. Et bien sûr, nous pouvons également limiter l'animation en V à certains points de rupture. Maintenant, en dessous, nous avons les boutons d' élément et de classe. Nous pouvons maintenant choisir par quoi l'animation doit commencer uniquement sur l'élément, ou sur l'ensemble de la classe ? Ainsi, toutes les classes proposant des classes de conteneurs de pétrole bénéficieront de cette animation innovante. Nous avons également cette liste déroulante. Et comme vous pouvez le voir, nous avons nos deux cours. Donc conteneur, entité, classe blanche. Si vous cliquez dessus, vous pouvez sélectionner la classe de conteneur simple. Cela fait maintenant chaque élément auquel la classe de conteneur est appliquée. Nous aurons cette diapositive en animation. Fermons-le. Maintenant. Si vous souhaitez modifier l'animation, il vous suffit de sélectionner l' élément contenant l'animation. Cliquez ici sur cette animation. Vous avez maintenant toutes vos options d'édition. Vous pouvez également voir si un élément est animé par cette icône verte en haut à droite. Sur le côté, dans votre navigateur. Maintenant, prévisualisons notre site Web. Comme tu peux le voir. Les éléments sont à l'origine de cette croissance. Et une fois que nous faisons défiler la page vers le bas, puisque tous ces conteneurs USB appartiennent à la même classe, ils s'estompent lentement. Et cela donne à l'ensemble du site Web un peu plus complet. Maintenant, un visa, juste les bases des interactions. Si vous passez vraiment beaucoup de temps, vous pouvez créer des interactions incroyables et uniques pour votre site Web. Maintenant, vous avez peut-être remarqué que la navigation ainsi que notre pied de page s'estompent également. Maintenant, ce n'est pas quelque chose que je veux. faire est donc moyen le plus rapide de le faire est donc de simplement dupliquer la classe de conteneur pour notre navigation, de suivre notre pied de page et de changer son nom. Cliquez donc sur votre navigation et cliquez sur Modifier le composant. Et recherchez la classe de conteneur. Et ce que nous allons faire c'est simplement cliquer sur cette liste déroulante et cliquer sur Dupliquer la classe. Et appelons cela un conteneur de navigation. Juste comme ça. Maintenant, si vous le prévisualisez, comme vous pouvez le voir, la navigation ne glissera pas. Répétons le même processus pour notre composant de pied de page, le conteneur B. Et donnons-lui simplement le même conteneur de navigation de classe, comme cette instance EC2. Et voyons voir. Comme vous pouvez le constater, il ne s'estompe plus. Exactement comme nous le voulions. Et c'est ainsi que vous créez des animations de base pour votre site Web. Maintenant, je vous recommande de jouer avec ces différentes options. Parce que c'est le cas, il n'y a vraiment aucune limite à ce que nous pouvons faire en utilisant les interactions. Donc, chaque fois que vous avez une idée d'animation que vous souhaitez, lancez-vous, essayez-la et essayez de la créer. 23. Lier nos boutons à différentes pages et sections: Très bien, donc dans cette conférence, nous allons parler des boutons de liens et de nos liens. Maintenant que nous avons terminé, nous avons pratiquement terminé notre site Web. L'animation est prête et tout est terminé. Il est adapté aux mobiles. La seule chose qui reste est de faire en sorte que ces boutons soient signalés. Comme vous pouvez le voir, si vous cliquez sur l'un de ces liens, les motifs des Andes. Rien ne se passe parce que nous n'avons pas encore dit ce qui doit se passer. Maintenant, que voulons-nous réellement réaliser ? Je veux, si je clique sur le bouton de fonctionnalité, que la page défile pour contenir des sections de fonctionnalités. Et il en va de même pour les prix et les contacts. Et si ces deux boutons sont là. Commençons maintenant par la section des héros. Donc, si je le souhaite, si je clique sur le bouton « entrer en contact », je veux que le modèle m'amène jusqu'au formulaire de contact que nous avons créé. Maintenant, comment relier cela ? Donc, si vous sélectionnez votre bouton et que vous accédez aux paramètres de vos éléments, nous avons ici les paramètres des liens. Nous pouvons lier le modèle à une URL spécifique. Nous pouvons le lier à une page de notre site Web. Vous pouvez le lier à une section qui correspond à ce que nous voulons. Et nous pouvons également dire que vous souhaitez ouvrir un e-mail à partir d'un numéro de téléphone ou même d'un téléchargement de fichier. Maintenant, nous voulons créer un lien vers une section spécifique. Passons donc à l' onglet Section et choisissons une section de page. Comme vous pouvez le constater, nous n'avons que ces sections e-mail et celles-ci proviennent de notre formulaire de contact. Ils sont préfabriqués pour être utilisés dans le lit. Donc, tout d'abord, nous devons indiquer à Webflow en quoi consiste chaque section. Nous devons leur donner une prétendue idée. Donc, les quelques sections de héros sont sélectionnées, par exemple dans les paramètres des éléments. La première option est d'utiliser le champ ID pour la page Lincoln. Et ici, nous pouvons donner un nom à cette section. Disons que c'est un héros. Et maintenant, cette section de héros s' appellera héros. Si vous cliquez sur notre bouton et que nous choisissons une section de page, nous avons la section des héros ici. Bien, répétons maintenant ce processus et donnons une idée à toutes nos sections. Ce serait donc la section des fonctionnalités. Je n'ai pas besoin de donner celui-ci à n. Do. Nous voulons créer un lien vers notre section de tarification ? Et ainsi que notre section de contact. Comme ça. Maintenant, une dernière chose que nous voulons, c'est que si vous cliquez sur le logo, nous voulons le faire défiler jusqu'en haut. Nous devons donc également donner notre navigation et notre identifiant. Éditons donc ce composant et donnons-lui une idée. Appelons ça Nav, comme ça. Très bien, commençons maintenant à relier ces sections entre elles. Commençons donc par D, accédons aux paramètres du bouton tactile et des éléments MP. Rubrique Lincoln. Et cherchons le contact. Et maintenant, avec la case sélectionnée, la section de contact pour le lien. Si vous le prévisualisez et que nous cliquons sur ce bouton Obtenir et toucher. Comme vous pouvez le constater, nous défilons doucement jusqu'au formulaire de contact que nous avons créé. Et c'est ainsi que nous pouvons relier toutes ces sections. Répétons maintenant ce processus pour les liens restants, tels que le bouton de tarification ou vers vous dans les liens de section. Et recherchez la section des prix. En fait, nous pourrions également les relier entre eux. Donnons ces sections et cet identifiant. Appelons donc ce design. Nous pouvons également lier ces boutons. Ce sera du développement, et ce sera de la publication. Juste comme ça. Et maintenant, sélectionnez V Design Link. Et choisissez la section de conception en V. Le lien de développement sera lié à la section de développement. Et le lien publié sera lié à la section du film publié, tout en bas. Bien. Nous avons maintenant des boutons tactiles et des boutons tactiles. Et nous pouvons le relier à notre section de contact. Maintenant, nous n'allons pas lier ces boutons. Travaillons sur notre navigation. Modifiez donc le composant, sélectionnez le lien de navigation des fonctionnalités. Nous voulons créer un lien vers une section. Donc, dans ce cas, vous allez dans les paramètres de Knaflic et, sous saisie, vous sélectionnez simplement la section et choisissez une section de page qui sera présentée. Faisons de même pour le type de saisie des prix de l'URL externe à la section. Et allez le lier à la section des prix. Et il en va de même pour le contact. Comme ça. Maintenant, nous voulons également lier ce logo. Sélectionnez la marque. Dans votre navigateur, vous trouverez un lien vers un blog, c'est-à-dire où nous pouvons connecter un lien vers celui-ci. Ici, dans les paramètres de la marque, type d'entrée depuis la section URL externe. Et réglons cela sur Neff. Une fois que nous aurons cliqué sur ce bouton, nous resterons automatiquement de ce côté. En fait, je pourrais le faire et simplement le lier à Paige. Paige est à la maison. Donc, si vous cliquez dessus, la page sera rechargée et nous redirigera vers la page d'accueil. Passons maintenant au composant d'édition du pied de page. Et relions également les liens de navigation. Cette fois, le lien Accueil sera la section Neff. Ainsi, tout en haut, les services seront liés à la section Services, à la section des fonctionnalités. C'est ainsi que nous l'avons appelé , élever Foucault vers la tarification et le contact. Nous allons à la section contact. Maintenant, relions également ces liens de services. Donc, un design, nous allons devenir la section des signes, du développement. Nous allons à la section développement et publication ira à la section publication. Maintenant, bien sûr, nous devons modifier notre bloc de liens à partir du logo, à partir de notre photo. Et maintenant, nous allons créer un lien vers la page. Juste comme ça. Très bien, voyons maintenant si tout fonctionne bien. Vous pouvez accéder à la section des prix. Cela nous amène à la question des prix. Vous cliquez sur Entrer en contact. Vous faites défiler la page vers le bas. Si vous accédez à nos liens de bas de page et que vous cliquez sur Accueil, vous serez tout en haut. Et nos liens de navigation devraient également fonctionner. Passons donc à la section des fonctionnalités. Oui, tout est bien lié maintenant, c'est ainsi que vous reliez vos boutons et tous vos liens et que vous assemblez votre site Web. 24. Publication du site Web: Très bien, donc dans cette dernière conférence, nous allons d'abord apporter quelques modifications à notre design. Ensuite, nous parlerons de la publication du site Web. Oh, c'est en direct et accessible à tous. Maintenant, tout d'abord, parcourons ce site Web et examinons certaines des choses que nous pourrions vouloir modifier. Par exemple, dans cette section consacrée aux héros , ce qui m'a dérangé dès le début, c'est l'espacement entre ces éléments. Je veux faire de la mousse, ajouter un peu plus d'espacement entre le paragraphe et ces deux boutons, et également réduire l'espacement entre le titre et le paragraphe. Maintenant, tout d'abord, sélectionnons le titre principal. Et nous utilisons la marge jusqu'à zéro. En bas, marge jusqu'à zéro, comme ça. Ensuite, sélectionnons la classe d'habillage des boutons héros et appliquons-y une marge supérieure. Peut-être que 24 ou 24 pixels semblent parfaitement bien. Ensuite, il y a encore une chose que nous voulons modifier la distance entre ces deux colonnes. Alors, sélectionnez-vous pour quadrater. Et la raison pour laquelle je le fais dans la section blanche, c'est parce que nous avons juste une meilleure idée de la proximité entre eux. Sélectionnez donc votre grille et augmentez légèrement l' espacement. Mais deux pixels semblent bien. Oui, ça a l'air vraiment bien. Et je pense que c'est tout pour les touches finales que je voulais apporter. Et maintenant, parlons du site Web de l'offre de publication. Vous avez donc ce bouton Publier ici. Et si vous cliquez dessus, vous pouvez voir que nous avons ce domaine intermédiaire, ce sous-domaine, mais nous pouvons y publier notre site Web. Donc, pour l'instant, c'est le projet Skillshare et ce point numérique Webflow point io. Nous pouvons maintenant publier ce site Web sur un domaine vétérinaire et il sera mis en ligne sur Internet et tout le monde pourra y accéder. Il peut également y connecter un domaine personnalisé. Cependant, cela n'est possible qu'avec un plan de site. Donc, si vous voulez rester gratuit, si vous ne voulez pas payer pour hébergement ou s'il s'agit simplement d'un projet pratique, vous ne pouvez pas connecter un client pour le gérer. Maintenant, pour publier le projet sur ce domaine intermédiaire, il vous suffit de cliquer sur Publier dans les domaines sélectionnés. Maintenant, nous attendons un peu pendant sa publication. Et maintenant, comme vous pouvez le voir, publié avec succès. Maintenant, si vous cliquez ici, vous pouvez ouvrir le projet sur ce domaine. Et comme vous pouvez le constater, tout fonctionne parfaitement. Exactement comme nous le voulions. Maintenant, l'avantage de Webflow est que nous pouvons apporter des modifications très rapides. Et une fois que nous l'avons publié, il est en fait complet, il est mis à jour incroyablement rapidement. Supposons donc que nous voulions changer la couleur de cette rubrique. Sélectionnez le titre principal, accédez à l'onglet Couleur. Et allons-y. S'il s'agit d'une couleur bleu clair, ça n'a pas l'air bien, mais c'est juste pour la démonstration. Revenez à publier, publier, pour sélectionner les domaines. Revenons maintenant à notre projet et actualisons le site Web. Comme vous pouvez le constater, le changement est déjà en cours. Revenons à tout ce projet de flux. Déplacez cette modification et publiez-la sur Small pour vous débarrasser de cette couleur bleue. Ça va ? Maintenant, si vous souhaitez connecter un utilisateur personnalisé pour le faire, vous devez accéder aux paramètres de votre site. Cliquez donc sur ce menu, paramètres du site. Et puis il y a les terrains et la facturation. Et nous avons ici tous les différents plans du site. Maintenant, comme vous pouvez le voir avec le côté démarrage. Nous gagnons donc un dollar par mois avec la version gratuite. Nous avons le domaine Webflow dot io. Maintenant, une fois que vous y serez, une fois, commençant par les bases pour 14$ par mois, si Bill , vous avez idéalement accès à un domaine personnalisé et vous pouvez y connecter un domaine personnalisé. Maintenant, une fois que vous avez emprunté cette voie, si vous souhaitez créer votre propre blog ou votre propre site Web personnel, il existe plusieurs façons de connecter un domaine. Le moyen le plus simple est de le faire via Webflow. Donc, si vous cliquez sur Publier, vous aurez ici quelques options pour un domaine personnalisé. Et vous pouvez acheter un domaine directement par le biais d'un flux de représentants en utilisant Google Domains. Sa mise en place est incroyablement rapide. Ou votre type dans le domaine que vous avez acheté ailleurs. Et puis cela vous donnera une sorte d'intégration. En fonction de votre hébergement ou de l'endroit où vous avez acheté, vos principales étapes seront légèrement différentes. Ce n'est pas du tout difficile. C'est en fait incroyablement simple. Maintenant, pour ce site Web que nous avons créé, vous allez vous en tenir au domaine backflow point io. Et c'est ainsi que nous publions notre site Web. Maintenant, il y a encore une chose que je veux vous montrer, c'est retour dans le panneau des concepteurs. Nous concevons. Nous avons également le bouton Partager, qui nous permet de partager une réflexion en lecture seule. Nous avons ce nouveau lien, mais nous pouvons l'envoyer à nos collègues et à nos clients. Et cela leur donnera cette vue d'éditeur. Et nous serons en mesure d'apporter des modifications à ce site Web. Cependant, ils ne seront pas enregistrés. Donc, à peu près après l'ouverture de cet éditeur de flux d' événements, ils peuvent inspecter tous les différents éléments et des choses comme ça. Dehors, détruire tout ce qui se trouve dans des objets créés par l'homme. Voici donc les liens en lecture seule. Alors peut-être que tu as besoin d' aide pour quelque chose. Vous pouvez fournir un lien uniquement sous forme de grille et permettre à quelqu'un d' examiner votre projet. Et peut-être que tu peux trouver la flèche de cette façon. C'est très important aussi. 25. Conclusion: Très bien, maintenant que vous avez créé votre tout premier site Web Webflow, vous avez atteint la fin de ce cours. Maintenant, que va-t-il se passer ensuite ? Eh bien, je vous recommande vivement de jouer avec Webflow et d' essayer différentes mises en page. Et vous travaillez simplement sur un tas de projets différents pour vous familiariser davantage avec l'éditeur de flux de travail et la façon dont les sites Web sont construits. Maintenant, si vous avez des questions, s'il vous reste des restaurants, vous pouvez simplement m'envoyer un message ou poser dans la section FAQ. Et je reviendrai vers vous dès que possible pour essayer de vous aider. Avec ça. Je vous remercie d'avoir suivi ce cours et je vous verrai la prochaine fois.