Figma Bootcamp 1 – Apprenez rapidement les composants

1. ! bootcamp d'introduction: Hé, tout le monde sur Brian White. Je connaissais X Designer de Lawrence, Kansas. Je fais aussi du design de marque et quelques autres choses dans cette classe. Nous apprenons rapidement à créer des composants comme des symboles dans les composants Sigma, n'est-ce pas ? Pourquoi ? Des éléments qui peuvent être réutilisés dans vos designs ? Ils vous aident à créer et à gérer une conception cohérente dans tous les projets. Ils s'étirent pour un design réactif, ont aidé à construire des mises en page et peuvent être modifiés à la volée. Cette classe passe à travers la construction d'un système de composants de base dans un processus étape par étape. Ce cours de stigmatisation débutant vous donnera les outils orteil. Vous voulez votre carrière d'interface utilisateur. Rappelez-vous les figures gratuitement à télécharger. Alors prenez une copie, sautez et commençons. 2. Composants et configuration du menu et de la configuration.: Je vais vous montrer rapidement comment configurer certains composants et être en mesure de les étirer sans les rendre horribles. Donc, nous allons aller au menu ici, aller aux préférences, pouce montant. Assurez-vous que c'est un huit pour bien. nombre divisible peut être un 10 mais c'est bien. Bon cadre, puis assurez-vous que vous êtes dans le design. On va vérifier le bureau 14 40 et renommer cette page d'accueil. Ok, on va faire du rectangle et mettre en place un petit système de barre de menus. Et rendons les choses faciles. Eh bien, pour utiliser les huitièmes Bonjour. Faites 88. D' accord. Et on va faire une blague de logo. Ok, donc ce qu'on veut faire, c'est vérifier nos grilles de mise en page. On n'en a pas. Nous allons faire est d'ajouter un et rapide sur les colonnes et ce qui est faire 12. Et j'aime ramener ça à 3%. C' est juste sympa. Comme si le rose ne vous dérange pas. Et puis, depuis où il huit, faisons 24 choix va l'obtenir. Bon, maintenant on y est. Lorsque vous appuyez rapidement sur le nom de la page, vous pouvez maintenir la commande enfoncée et l'étirer. C' est donc un peu agréable de se préparer à ajouter des composants. Alors faisons le système de menu. Donc je vais utiliser le sens du sens. Pro. Disons 18 pixels et allons nous le perdre ? Ok, voyons voir. Élément de menu un. Ok, maintenant, nous ne voulons pas simplement taper menu menu menu menu menu. Ce que nous voulons faire, c'est en faire un composant, alors rendons cela un peu plus normal. Donc, disons portefeuille ou nous pouvons simplement garder l'élément de menu un, et nous allons vous montrer ce qui se passe. Ok, donc c'est votre composant que ce n'est pas encore un composant que vous vouliez composant parce vous voulez faire le et vous voulez les avoir tous les mêmes et être capable de s'étirer et grandir avec vos sections. Donc, ce que nous allons faire est de mettre en place un système où vous avez votre zone de menu. Donc, ce que nous allons faire est de faire un simple rectangle et de le mettre au milieu. Donc, on va le faire 32 pixels de haut, juste en inventant tout ça comme je vais. Donc, et nous voulons que cela soit centré juste ici une ligne au milieu. D' accord. C' est un peu haut, parce que j'ai un peu étiré. Très bien, Donc si vous êtes dans cette section et disons que vous voulez, genre, un point fort loin ou quelque chose comme ça , allons-y et ajoutez-le si bien à un bar. Disons quatre. Ok, donc on a déjà coulé dans les couleurs. Nous voulons obtenir quelques couleurs ici, car nous ne sommes pas des cadres de fil où nous faisons des composants. Mais on va le faire paraître un peu animé. Je vais sauter par-dessus un magasin de photos juste une seconde. C' est l'un de mes produits de projets. C' est, euh, une action de boutique photo appelée Instant Pallet Maker. Et ce que j'aime faire est de prendre des images vraiment cool qui ont des couleurs fraîches et essayer de vous tirer je couleurs de lui. Donc, quand vous cliquez simplement sur cela, il fait automatiquement la palette. Ça ne ruine pas ton image. Il l'éclate sur une autre couche. Si jamais tu veux l'avoir, c' est pas cher. C' est un marché créatif, palettier instantané. Donc ce que je vais faire, c'est aller sur ce plan. Je pensais que c'était amusant de changer les niveaux. Et ne vous inquiétez pas, on saute pour choisir mon point culminant très rapide. Ça un peu. Prends quelques jolis roses là-dedans. Ok, donc on va essayer le médium de la palette et cliquer dessus. C' est trop délavé. Donc ce que je vais faire est revenu. Cliquer sur la palette, grand. Essayez d'obtenir certaines de ces couleurs d'action amusantes. Je vais même le frapper un peu. Certains aplatissent ça. Ne vous inquiétez pas. On retourne beaucoup aux figurations. D' accord. D' accord. Donc on va copier ça, donc on doit te faire plaisir que j'ai des couleurs là-dedans. D' accord, on est de retour ici. On va jeter ce truc de couleur et tirer dedans et un joli schéma de couleurs rapide pour vous les gars. Vous voulez donc chercher votre couleur interactive ? Et à l'origine, je cherchais du rose. Donc nous sommes verts pour opter pour ce genre de couleur de saumon et voir si nous pouvons le faire Ce n'est pas assez brillant . D' accord ? Peut-être même une partie de ce rose pas boosté. Juste un peu. D' accord. Et puis on veut un peu cool. Ces gris, cet air. Joli Warren paître. Alors faisons ça. Celui-ci et cette forme. Et d'habitude, j'allais remplir. Tu sais quoi ? Désolé. Allez remplir le style de couleur. Et puis, genre, nommez-le gris. Cool. tu sais, ou chaud ou quoi que ce soit. Réchauffez un et créez ce style. Je bouge juste un peu plus vite pour toi. Je veux juste que tu ne t'ennuies pas, et on a affaire à des composants en ce moment, donc d'accord. Tu vois ? Alléger un peu sombre dans ce haut un peu. Et prenons un autre couple de couleurs. J' aime juste comment ces vous pouvez tirer tellement de couleurs fraîches vraiment rapidement. Et on dirait qu'il appartient ensemble la plupart du temps. Peut-être une pêche. D' accord, on pourrait revenir à ça, mais on verra, il allait rester loin des olives et rester dans cette palette. Certains d'entre eux sont amusants pour nous allons voir si nous pouvons jeter quelque chose dedans. D' accord. Ouais, ça a l'air cool. On va juste garder ça près et à portée de main. Donc je vais changer ce Teoh ce fond à partir de maintenant. Pourtant, ce sont peut-être tous les droits. Nous avons notre menu. On veut orteil, hum, haut. Comme ça. Dis, genre, hé, c'est allumé. Donc ce qu'on va faire, c'est choisir cette couleur de saumon, et parfois j'aime aimer une fois que j'ai un réglage d'en-tête, euh, la peur. Si vous travaillez pour quelqu'un, nommez totalement toutes vos couches. Mais, hum, ce que nous allons faire, c'est en faire un composant maintenant pour qu'on puisse faire notre menu et ensuite changer. Donc c'est notre monture active, et on va continuer à se brancher à ça. Donc évidemment, avec ce contexte, je pense que je ne l'aime pas déjà. Je voulais juste devenir un peu plus sombre. Ouais, d'accord. Donc, le menu n'aura pas besoin d'être blanc, mais tout cela peut changer à la volée. Ok, Donc ce que nous voulons faire est d'obtenir nos nombreux sont les antécédents, que nous n'utiliserons probablement pas, mais pour l'instant, arriverons à la hauteur de votre barre. Tu sais, je vais marcher ça. Ok, voici votre menu. Donc nous allons appuyer sur l'option K, et cela a automatiquement fait un composant. Et ce que j'aime faire est soit c'est la page de base et tous les composants sont là-dessus. Ou, euh, vous pouvez appuyer sur la commande D, ce qui en fait un duplicata. Et puis vous pouvez prendre votre composant et le déplacer vers une autre page comme vous pouvez, vous pouvez faire une page. Ce sont des composants, mais pour des raisons d'opportunité, nous allons le garder ici sur cette page pour que je puisse vous montrer comment ça fonctionne. Donc ce que j'aime faire est de tirer votre Ceci est votre composant maître. Voyez à quoi ça ressemble avec ces quatre carrés, la forme de diamant, et puis voici la forme de diamant ouvert, qui est votre composant. Euh, copie. Donc quoi que nous fassions ici, , disons que nous changeons ça en Blue, ce qui a l'air horrible. Désolé. Ce qui se passe,c'est que toutes les instances changent. , Donc nous allons faire ce vol et ce que nous allons faire, c'est cacher ce contexte. On n'en a pas besoin, mais on peut. On peut faire toutes sortes de trucs cool avec ça maintenant qu'on a cette histoire, quelque chose de caché. Alors quoi ? Ce qui se passe, c'est que ça ne marche pas très bien tout de suite. Donc c'est juste une sorte de rupture. n'y a pas de rembourrage. L' étirement ne marche pas. Donc, ce que nous voulons faire, c'est que c'est le gros problème sur les composants. Est-ce comment fonctionnent ces sections ? Alors quoi ? On ne veut pas de cette échelle. Nous voulons aller à gauche et à droite Donc il va centrer le taxé ici et puis au fur et à mesure que vous tapez, il sera centré dans ce cadre afin qu'il conservera la même largeur. Donc, nous voulons faire la même chose pour cette pièce de fond qui montrera pour l'instant que c'est un peu amusant comment vous pouvez voir comment ça marche. Donc, ce que nous voulons généralement faire est de le tester sur ceux-ci la copie du composant. Donc ce fond de fond ici que nous voulions mettre à l'échelle gauche et droite, nous ne voulons pas Oh, nous ne allons pas le traîner énorme. Mais si vous le vouliez, vous pouvez définir une houle supérieure inférieure A. Si cela change, disons, par exemple, sur une page responsive, l'en-tête doit être un peu plus grand parce que le contenu est réduit. Donc, ce que nous allons faire est de rendre cet état meilleur et de nommer cet état actif. Ok, donc maintenant nous avons notre élément de menu et nous pouvons le dupliquer maintenant et ensuite nous allons revenir à notre composant. C' est plutôt cool. Ils le cachent et puis, hum voir , voyons, c'est à propos de nous et je suis un mauvais type ou parfois j'aime revenir ici et changer mon texte. Et je veux que toutes ces majuscules soient si rapides. Ça et boum, tous tes composants sont en majuscules, donc je vais en faire un autre qui dit portefeuille et espace. Tout le monde ne veut pas la maison. Ils sont toujours. Et je suis genre, allez, s' il vous plaît. D' accord. Une autre page. C' est plus long. Oups. Désolé. C' est donc un bon exemple de quand vous définissez votre texte au milieu et que vous avez votre espacement de paragraphe dans votre hauteur de ligne définie. Corrige ça. Ça pourrait être un peu trop haut en ce moment. Donc, ce que nous pouvons faire est d'aller dans où est-ce ? Ils ont tellement ajouté. Maintenant, c'est juste là. Je cherchais le leur. Désolé, je suis censé t'enseigner. Alors regarde. C' est que je tape dessus. Vous pouvez voir que l'autre page est parce que nous sommes en train de jouer avec cette partie, mais c'est vous pouvez voir comment ça marche ici, donc je vais dire 96 livres, pas 96 96 96 % mais ok, 20. D' accord. Donc vous pouvez voir maintenant je vais juste dire à la maison juste parce que d'accord, donc c'est notre page active. Donc, ce que nous pouvons faire est d'aller dans notre composant et vous pouvez voir que nous avons caché l'état actif frappé en arrière-plan afin que nous puissions cliquer sur l'état actif et nous pouvons effectivement cliquer sur l' arrière-plan qui ressemble à caca. Donc, ce que nous allons faire est de revenir à ce fond original et de le montrer et nous pouvons le changer Teoh White sur, genre, genre, p pour cent donc, mais nous ne voulons pas qu'il montre sur tout. Et cela montre que ce qui est sympa, c'est que vous pouvez voir vos espacements un peu horrible. Mais ce que nous voulons faire, c'est le cacher. Mais il reste actif parce qu'à la maison. Mais nous l'avons, hum, avec l'œil ouvert pour que vous puissiez le voir. Donc, oui, c'est une bonne façon de faire des menus rapides. Alors continuons de bouger et de travailler sur la mise en place de composants pour les formes qui entrent en jeu et deviennent un peu ennuyeux 3. Composants de formes et comment créer des composants de forme maître.: Ok, allons sauter dans les formes. Donc on va utiliser certains de ces gris dont j'aurai besoin d'un peu plus que nous pouvons tirer. Il y en a peut-être des plus légers, mais juste pour l'opportunité, on va continuer à bouger. Donc ce qu'on va faire, c'est refaire la même chose. On veut des boîtes pour ces zones, donc je veux, genre, une base de forme plus grande, et je vais juste couvrir ces trois arrivées et on va régler ça à 64. Donc c'est notre base. Et puis je veux, genre, une base de 32 pixels apparaisse pour le formulaire lui-même. Nom du formulaire. D' accord. Et parfois, si tu veux, tu peux juste ça pourrait être la couleur que tu veux, parce qu'on ne l'utilisera pas. Donc wow, c'est tellement mauvais. Mais au moins, vous avez l'idée. Hum, donc ce sera notre formulaire, et ce sera le nom du formulaire. Et nous voulions nous étirer sans casser la partie supérieure ou inférieure, et cela rend tellement plus facile quand vous avez un nom, un prénom, nom famille, peu importe. C' est ce que nous allons faire, c'est en faire un composant et et la façon qui le fera est avoir dans des composants. Donc je vais taper un texte et dire juste, hum, nom d' étoile. Donc cette étoile sera, genre, rouge brillant pour la même chose et ensuite le nom qui utilisera j'aime cette marine. Donc on va juste faire ça qui ne peut peut-être pas. Bon, donc on va choisir le nom Click Phil Boot Camp, peut-être. Ok, désolé. Ça a l'air horrible, mais tu en auras le sens, donc ce sera notre forme elle-même. Et ce que je voudrais faire, c'est juste pour qu'il semble un peu interactif. On va faire une bordure de trois pixels ne sont pas des bordures mais des coins arrondis. Donc je vais aller de l'avant et faire de cette section, euh , son propre composant, et je vais l'appeler slash tendre, et je pense que je vais garder toutes les minuscules cette fois. Et alors nommera cette partie. Juste un champ de forme, Ok. Et je vais aller de l'avant et styliser ça pour qu'on fasse un accident vasculaire cérébral. En fait, c'est un peu vieux style, donc je vais juste le garder comme ça, mais, euh même s'applique. Vous voulez cette taille si vous voulez juste le sous-jacent, comme android ou certains des styles les plus récents. Je vais te montrer comment faire ça dans une seconde. Euh, voyons voir. C' est comme un événement séparé. Stroke ceci avec un pixel et voir si nous ne pouvons pas l'utiliser pour un peu plus sombre. Allons à deux pour que tout le monde puisse voir. Bon, maintenant nous avons deux composants. Nous avons l'en-tête de formulaire dans le champ de formulaire. Et ce que nous voulons faire est à l'intérieur de ce champ de formulaire, nous voulons taper sont taper et dire, voyons, prénom. Et je ne veux pas que ce soit des casquettes, alors je vais y retourner. Donc je suis dans l'espace. 32 pixels à partir du bord. Et ce sera, euh, un texte de forme. Très bien, donc ces antécédents ne sont pas là pour qu'on puisse le cacher. Nous avons donc le début de notre formulaire. On a un nom, ce qui est vraiment grand pour ça. Nous sommes fiers de faire une sorte de petit et lourd, plus petit et lourd. Ok, donc maintenant nous voulons entrer dans ce contexte, et nous voulons que ce Tiu reste, mais, euh, euh, nous voulions nous étirer et nous voulions rester au fond parce que nous voulions être évincés contre cette forme. Donc je vais aller ici et dire à gauche et à droite pour que ça puisse s'étirer un peu. Nous ferons la même chose avec le nom, mais nous voulions rester à gauche. Et la beauté de ça, c'est que tu peux dupliquer ça, et si ça échoue du tout, tu peux revenir en arrière et dire comme, Oh, je ne l'ai pas fait à gauche ou c'est comme ça que je voulais réagir. Donc je vais éteindre ça. Et maintenant, ce que nous faisons est maintenant que nous avons un champ étranger et un en-tête, nous allons faire un composant de ces deux. Ok, Donc ce qui s'est passé, c'est qu'il a fait une instance de ces deux en même temps, donc il a éclaté formulaire, en-tête et champ de formulaire. Donc, c'est notre nouveau composant, qui est la forme maître ou formons Maître, minuscules. Allez. Bon, donc ce qu'on va faire, c'est comme on a déjà ça ici, je vais garder mes composants au-dessus de la page. Parfois, c'est bien de ne pas être parti. Um, faisons-le ouais, fais-les un peu, rends-les un peu plus petits et garde-le ici pour l'instant. Et ce qu'on fait c'est de garder ces deux-là à gauche si on a besoin de changer le milieu. Bon, maintenant que nous avons ce que nous allons faire, c'est Bruce Command De et nous allons en faire une copie. Nous allons sélectionner le masque et le retirer du côté de la page afin qu'il soit en dehors de la page d'accueil. Alors maintenant, tu vois ce qui se passe ? Alors que s'est-il passé ? Est-ce que ce nom doit être à gauche et à droite ? Donc, ce que nous faisons, c'est retourner ici et dire, gauche et à droite. Parfois, ce qui se passe, c'est que je l'ai fait exprès. C' est ça ? Est-ce qu'il le remplacera. Ça dira juste que si tu n'as rien dit, on va le laisser. si tu n'as rien dit, Donc celui-ci, celui-là est laissé. Celui-ci est à gauche et à droite. Donc, ce qu'il faut faire, c'est dire à gauche. Et maintenant, nous l'avons étiré correctement. C' est un peu amusant. Disons qu'on a une barre latérale ici. On va juste avoir une période séparée. Ok, disons qu'on veut les espacer, donc on va avoir un prénom. Donc nous voulons avoir, euh, le prénom ici, et nous allons tenir Shift une option et dupliquer. Et évidemment, nous n'avons pas besoin de ça. Il y a donc deux façons de le faire. Vous pouvez juste, comme, cacher ceci, ce que parfois je fais beaucoup, en fait, ou vous pouvez le croire et ensuite venir ici pour former le champ et juste maintenir l'option vers le bas, et cela fera une copie du plus grand champ étranger. Et cela n'a pas l'en-tête. Alors tu peux venir ici et dire ton nom de famille. Ok, donc ça me semble totalement mauvais. Donc vous les gars probablement Wow, ce type est un designer, donc je vais rendre ça très léger et on va le faire. Oups. Nous allons faire la pilule plus léger, et vous pouvez voir ce qui s'est passé dans ce maître. Il n'est pas allé sur le terrain, donc je dois y retourner. Et c'est pour ça que j'aime les avoir très rapidement. Vous pouvez donc voir si vous pouvez modifier très rapidement vos champs de formulaire. Alors quoi ? On va faire sa monnaie ? Notre coup juste un peu plus léger. aussi. Bon, maintenant que nous avons un bon réglage de forme, une chose que vous pouvez faire est votre bâtiment. Donc, par exemple, disons que nous devons faire face à cela. Donc, j'ai remarqué quand j'ai tapé pays, ce qui se passait était que c'est réglé sur la ligne centrale. Donc on doit revenir ici. Même si c'est à gauche et à droite, nous le faisons et nous avons notre espacement correct pour le pays. Donc, ce qui est sympa est maintenant pays peut couvrir toute la chose sans étirement et désordonné non mène vers le haut. Mais ce que nous voulons au fur et à mesure que nous construisons les formulaires est un réel qui est de la même façon. Donc, ce que nous allons faire est de retourner à ce clic gauche et je vais le réparer. Les idées que vous voulez déposer vers le bas pour montrer une liste déroulante Donc vous revenez au champ de ferme , ce qui est agréable, est comme, vous pouvez toujours revenir à cela et nous allons juste faire un chemin étroit vers le bas. Et évidemment, nous ne voulons pas tout ça sur eux. Et faisons juste un simple ivrogne et on va faire cette couleur interactive là, juste puisque comme cette couleur, on va l'appeler saumon. Ok, attends une botte. Camp de saumon. Ok, alors que se passe-t-il ici ? Pourquoi ce n'est pas là-bas ? Donc on ne veut pas que ça sur le pays. On ne le veut pas là-dedans. Donc, ce que nous faisons c'est de revenir sur le terrain et nous disons que nous voulons que cela soit caché. Mais avant de le faire, nous voulons que cela reste sur la droite et nous le voulons comme cet écart de 32 pixels. Donc, ce que nous faisons est envoyé ceci pour écrire et au centre. Donc, ce qui se passe maintenant, que cela se déplace, il reste le même et va marcher vers la droite. Ok, donc maintenant on retourne à l'original, on descend une rangée, et on va le cacher. Et puis on est comme, Eh bien, il est parti à la campagne. Donc tout ce qu'on a à faire, c'est d'y aller et de cliquer. Oui, je voulais être là pour que vous puissiez voir à quel point c'est super sympa. Et certains des composants d'origine ont beaucoup de champs en eux que vous masquez et faites toutes sortes de choses avec Donc, par exemple, nom sans nom, mais numéro de téléphone. Donc, faisons une version de numéro de téléphone et ce que nous voulons utiliser est le champ de formulaire de base, et puis nous allons créer Je suis une version différente de celui-ci avec un composant à l'intérieur de celui-ci. On aura donc une liste déroulante plus un pour l'Amérique. Donc, parfois, je vais le faire et dire, Hey, je veux détacher cette instance Ce n'est plus le champ de formulaire. Donc, c'est la première fois que nous nous éloignons de l'utilisation de cette instance principale donc nous ne pouvons pas le faire ou mais vous voulez essayer de ne pas le faire autant que possible afin que vous utilisiez les sections que vous pouvez changer dans toute l'application ou Web. Celle-là. Vous changez ces couleurs. Il change sur tout le site des trous. Donc je vais garder le champ de formulaire. Mais ce que nous allons faire est d'aller Teoh cacher le texte du formulaire, et ensuite nous allons ajouter un autre morceau ici, en fait sera juste dupliqué. Donc on va dire les commandes D et C téléphone texte. Et maintenant on va bouger ça. Ne vous inquiétez pas, ça ne le fera pas. Ça ne gâchera pas tout le reste. Donc ce que nous allons faire, c'est dire que nous voulons que vous soyez à trois chiffres, et ensuite trois membres tirent sur quatre chiffres, et nous voulons avoir, genre, un menu déroulant plus un. Donc nous avons déjà cette liste déroulante, héros. Ce qu'on va faire, c'est prendre ça. Je suis juste en train de tenir l'option fondamentalement et de la faire glisser de celui-ci à celui-ci. Et je vais aux orteils. Ne paniquez pas. Et ne surveille pas là-bas à droite. Mais ce qu'on veut faire, c'est la laisser tomber ici, et je suis dans une espèce un peu. Après que je fais cela, je vais copier ce rectangle sont juste l'option de maintien et de dépôt de téléphone sûr. Et à l'intérieur de cela, vous voulez en quelque sorte garder ensemble pour que vous puissiez même faire un groupe à l'intérieur. Donc on a cette chute de téléphone, et c'est la partie intérieure. Donc ce qu'on va faire, c'est comme un 32 sur 32. Ok, regarde 37 mon 32. Qu' est-ce que ça doit entrer ? Bon, donc maintenant on va espacer ça et mettre la goutte à côté, et ensuite on va prendre ce texto de téléphone, dupliquer ça et dire pays, c'est un plus. Ok, donc on a sa liste déroulante et ça pourrait devenir un peu plus grand, mais on fait ça rapidement. Donc nous voulons que ça puisse s'étirer, et nous voulons qu'il reste vraiment à gauche, donc je vais le verrouiller à gauche et ne pas aller jusqu'au bout. Vous voulez que ce soit un centre de ligne car il pourrait y avoir en ajouter plus réellement. le faire. Laisser une ligne à gauche au fur et à mesure qu'elle pousse, ils pousseront la flèche. Donc, cette section doit être regroupée pour qu'elle fonctionne aussi ensemble. Donc on va changer ça entre l'orteil gauche. Je sais que c'est juste pour la réforme, mais une fois que tu as fini, tu as fini. C' est sympa. Donc on va l'espacer sur trois. Donc nous avons notre numéro de téléphone ici, et nous n'aurons pas ce que vous en ayez besoin. Ce n'est pas le cas. Ce n'est pas nécessaire. Voilà notre téléphone, mais tout est foiré maintenant. Donc, nous retournons ici et nous cachons ceux qui ramènent le texte du formulaire dans le pays, et nous dirons que c'est la section téléphonique. Maintenant, nous avons la section téléphonique, qui cache la cachette, la zone téléphonique. Mais on veut voir la zone téléphonique. Donc ce qu'on veut faire, c'est venir dire que je veux voir le téléphone, accord ? Et nous voulons enlever les autres parties. Oups. Là. Donc maintenant, nous avons cette section téléphonique, qui devrait probablement ressembler à ceci où tout cela est ouvert. Mais alors c'est fermé. Donc tu le fais très vite. Boum. Et tu as un téléphone pour voir s'il s'étire. Ça ne s'étire pas correctement, donc bien, ça le fera, mais, euh, on y arrivera donc on retourne au texto téléphonique. Alors je suis parti. Oui, c'est vrai. Ok, donc maintenant juste assez simple. Si on veut un e-mail, il suffit de le déposer. 123 Et tout le monde a besoin d'email. Alors faites un email dans le repas. Non, courrier électronique. Après, comme, ce texte de formulaire est trop similaire. Donc ce que je vais faire, c'est revenir rapidement et le changer de camp de démarrage à Boot Camp Gray. Très bien, donc c'est juste un peu amusant. Lorsque vous construisez les composants, vous pouvez voir comment vous pouvez rapidement les étirer, construire, aller plus vite. Nous ferons ensuite une boîte de commentaire, donc celle-ci s'étirera car vous aurez besoin de beaucoup de paragraphes. On va sauter dans une boîte de commentaires. Ce que nous allons faire est de dupliquer cette section et sur une boîte de commentaire, généralement il suffit de commencer à partir du masque de formulaire pour le rendre un peu plus facile. Allons voir si on ne peut pas tout faire ensemble. Ce sera une sorte de champ de forme fou, mais nous le ferons. Nous allons donc avoir un commentaire qui n'est pas nécessaire. Et voyons ce qui se passe. Donc ce qu'on va faire, c'est tirer ce formulaire, saisir ce maître et voir ce qui se passe. Donc ça ne marche pas très bien du tout. Ce que nous voulons faire est d'avoir ces piles sans changer, et nous voulons que cela puisse gérer le paragraphe et ensuite nous voulons que ce petit drag ouvert Borras . Si vous aimez taper un peu plus, je joue en quelque sorte l'avocat du diable sur tout juste pour que vous puissiez avoir une idée de ce qui se passe. Donc je vais déplacer ces formulaires vers le bas ou les composants vers le bas, et ce que nous voulons faire est de revenir à l'avant et cette section ce texte de formulaire, et maintenant nous voulons dire haut. Donc, ce qui va se passer, c'est boum. Vous obtenez cela déjà, et je vais aller de l'avant et ajouter un commentaire Déplores au milieu. Ok, donc voici un exemple, aussi, aussi, de pourquoi ce n'est pas enveloppant. Donc, ce que nous voulons faire est de revenir à vos textes de formulaire et dire, gauche et à droite, et maintenant nous allons le définir à l'état dans ces paramètres. Donc sera comme 32 pixels. Ils sont à 32 pixels du haut, et on y arrivera. Donc maintenant, nous voulons la façon de la section du composant. Nous voulons que cela soit réparé. Donc, cette section, nous voulons vraiment ce commentaire zones flottantes. Alors, comment tu l'as ? Correct. Donc, si quelque chose est bizarre, comme lorsque vous sélectionnez tout et que vous le faites glisser, cela ne fonctionne pas correctement. Vous pouvez retourner à votre formulaire et vérifions ceci pour que nous l'ayons réglé de gauche à droite. Mais c'est mis à l'échelle, donc nous voulions vraiment de haut en bas, donc automatiquement le verrouiller, et nous allons vérifier celui-ci pour que nous n'avons pas quitté et haut. Donc, ce qui se passe, c'est qu'il colle au sommet. Et au fur et à mesure que nous faisons défiler cela, il devient plus grand et vous avez plus de place pour votre paragraphe. Alors maintenant, on s'est approché de ça. On va se débarrasser de la zone de liste déroulante, héros. On va aller dans le champ de la forme, faire un peu les hommes. Et je veux ce D.A . Vraiment simple. Euh, je vais tirer du vin pour le rebord et tenir le quart de travail. Je pense que je vais me rapprocher, mais je le fais vite pour vous les gars. Ok, donc nous avons ces lignes de champ, une ligne de commentaire. On va cacher ça, entrer ici, et on veut voir les lignes de commentaires. Ok, que s'est-il passé ? Alors maintenant, ils sont là-bas. C' est pour ça que c'est une beauté hors de la beauté. C' est juste un joli orteil. Amenez-les juste ici. Ces composants à juste un gâchis avec donc va retourner dans le champ de formulaire. Regardez ces lignes de commentaires. Nous les avons regroupés, mais allons de l'avant et en faire un composant, ce que vous ne pouvez pas parce que je suis sur une zone dupliquée, donc je dois venir ici revenu à la ligne de commentaire. Cliquez ici. Oh, ça doit être dehors. Um, c'est vrai. Donc ce qu'on va faire, c'est juste mettre ça à droite et en bas, donc ça restera toujours là. Ça doit être un peu plus fort, donc je vais le faire. Non, celui-là. Oui. D' accord. Donc maintenant, nous avons notre composant qui travaille sa tache à droite et en bas, et vous pouvez faire sauter votre composant autant que nous descendre aussi loin que vous voulez. Donc c'est vraiment sympa et simple maintenant que nous avons, genre, genre, un champ de formulaire qui est vraiment fort a beaucoup de contenu dedans que vous pouvez cacher la plupart de celui-ci, et cela vous en avez besoin. 4. Boutons - Maîtriser les composants réactifs et des boutons secondaires et plus encore, et plus encore: maintenant que nous avons nos bons formulaires et que nous avons notre état actif que nous allons faire est juste rapidement fait de lui des sections d'en-tête. Section 1, je vous dis 36. Okay, - Donc ce que nous pouvons faire est un nouveau style fiscal chacun pour que nous puissions en faire une option de composant. Ok, eh bien, dis à chacun avec le mien, nous allons prolonger la ligne. C' est trop fait, mais juste le faire pour le plaisir. Donc nous allons faire à gauche et en bas sur ça et nous allons prendre nous allons dupliquer ce contrôle, de, je vais prendre ce composant maître sont des composants, et puis c'est un composant en double ici. Donc ce que nous voulons, c'est que ce texte dise que c'est la gauche et le bas pour qu'il reste à côté de la ligne, lui donne un peu d'espace de respiration, beaucoup plus d'espace pour respirer si nous voulons revenir ici. J' essayais de rendre ça un peu plus agréable pour vous les gars, mais dites que c'est notre longueur de section que nous avons donc 8 32 Donc ce que nous voulons faire est de revenir ici et ce texte dit 8 32 Je sais rap. Bon, donc on va faire une nouvelle section, on appellera ces boutons, ok ? Et depuis que j'avais cet espacement que je veux faire c'est les jettes pour correspondre à la couleur. Ok, je vais aller un peu plus vite et les éteindre pour rendre un peu plus facile. Frieda est donc nous avons besoin d'un bouton. Ne dis pas que nous allons appeler ce bouton primaire et nous allons rendre ça très petit parce que c'est juste le nommer. On le nomme juste. Donc, nous voulons juste un bouton standard et nous ne voulons pas sûr. Allons au Big 64 par 200 juste pour une rapidité rapide. Donc nous allons le remplir avec notre saumon, et nous allons mettre un message ici pour dire, comme soumettre, rendre ce blanc. Ce sera 18 pixels. Allons-y 16 et 16. Ici, nous allons au centre de Teoh, aligner le texte et nous allons l'espacer avec 32 pixels sur le bord, puis un peu sur le haut et le bas. Nous allons le comprendre dans une seconde, mais ce sera notre bouton principal, et vous pouvez le sélectionner et l'aligner tant que le texte est centré. Parfois, la hauteur de la ligne change un peu, en fonction du texte pour la construction de la police. Donc nous avons ce bouton primaire que j'ai apporté dans mon Je pense que j'ai appelé un pointeur, qui est un fichier ping que je viens d'apporter, donc pour montrer rapidement ce qui se passe. Donc ce que nous voulons faire c'est avoir, euh c'est juste notre bouton principal, et nous allons faire un secondaire, mais nous allons le dupliquer dans une seconde. Donc, ce que nous voulons faire est en faire un composant, deviner un autre composant et dire bouton Et nous voulions être primaire. Je vais te montrer pourquoi dans une seconde. Donc, nous dupliquons cela contrôlé le prendre le composant maître ici. On va juste le laisser sur la gauche. Et ce qu'on veut faire, c'est venir ici et voir en arrière, euh, arrière-plan. Et je pense que c'est plus facile de faire un état actif tant que tu ne changeras pas tout ça comme un fou. Mais nous voulions être à gauche et à droite, à gauche et à droite, puis au centre. Donc ces deux centres Donc je vais cacher ça, et c'est notre état actif. Donc on va faire ce rose pour s'amuser. Et maintenant , ce que nous faisons c'est cacher l'actif et nous avons notre expérience. Donc, je vais sélectionner leur bouton dupliqué et maintenez l'option et Shift Et mettons-le 40 pixels séparés et nous allons dire hover tap, je vais dire focus. Ok, donc on peut le faire comme un vol stationnaire subtil. , Ce qu'on peut faire,c'est juste ce que l'on appelle ça. Et ce qu'on va faire, c'est dire que c'est Onley rose en bas. Ce qui est bien, c'est que tu peux venir ici et espérer, hein ? Tu vois ce que j'ai fait ? Nom explicite, cependant il. Et nous allons montrer l'arrière-plan, et nous allons descendre ce vol stationnaire et faire juste un simple surlignage de trois pixels en bas . C' est une façon de régler. Donc, vous pouvez prendre votre arrière-plan vers le bas et dire la couverture arrière, cacher ceci pendant une seconde et vous pouvez passer à travers cela. Donc, , disons que c'est 90%. Ok, donc maintenant ce qu'on peut faire, ce n'est toujours pas oui, je vais faire quelque chose d'un peu différent. D' accord ? On doit juste être patient avec moi. Je vais faire, c'est que nous avons notre barre de vol stationnaire et nous allons le faire comme ça en bas et pour le rendre encore mieux, ce que nous pouvons faire est de sélectionner les deux, de les regrouper, disons, cependant, ce que nous allons faire, c'est ajouter, en fait, une simple ombre portée. Hum, beaucoup trop bien à cause de et deux et 10%. Bien trop peu. Ok, là. 20 %. Parfois, j'aime utiliser les couleurs qui ont obtenu que j'utilise déjà ici. Donc, j'aime aller à un des couleurs locales et utiliser ce gris, mais ensuite ramener à moi comme 40 parce que c'est tellement comme, OK, cool. Bon, maintenant on ne veut pas de ça. Donc, ce que nous faisons est de revenir à notre bouton primaire et de cacher la richesse du vol stationnaire. En fait, on va garder le vol stationnaire et ensuite cacher tout ça. Et maintenant, sur Hever semaines comme ça, nous le voulons, mais pas ça. Donc maintenant, nous avons le bouton de soumission, avons son focus, et nous pouvons même faire un clic. Ce que nous ferons, c'est de revenir ici, dupliquer notre arrière-plan et de dire clic. Et ce que nous ferons, c'est le même rouge, mais avoir un fait intérieur. Donc, dans son ombre et encore, les couleurs locales vont avec la marine et le déposer à, genre, 15% et à Okay, donc maintenant nous avons sur clic, et nous pouvons cacher que dupliquer les 40 pixels soumis, Voir clic actif, et nous allons afficher le clic et l'arrière-plan élevé. Donc, c'est votre focus et survolez, puis cliquez sur Juste donne un peu subtile ombre portée. C' est peut-être trop subtil, en fait. Donc on va juste retourner cliquer dans son ombre et faire tomber ça jusqu'à 20%. Bon, donc maintenant ce qu'on veut faire c'est dire, euh, euh, on avait besoin d'handicapés. Donc, nous avons le bouton primaire. On revient ici, je crois que tu as compris l'idée. On Oh, ouais. Tu sais, on veut faire ça. Ok, alors maintenant nous plongons, lécher l'arrière-plan, et vous pouvez juste tenir l'option pour et le faire glisser. Hum, nous ferons ça pour sauver les handicapés. Salut. Ceci et nous allons désactiver le bouton. D' accord ? Et c'est assez simple. Je pense que c'est tout ce que nous voulons et nous pourrons changer la couleur du texte comme nous le voulons. Mais pour ne pas oublier, je pense qu'il est important de dupliquer votre texte et de l'avoir comme couleur. C' est vraiment utile parce que si vous oubliez, alors vous obtenez tous ces différents gris et là, accord, donc nous avons désactivé et soumettre, et donc vous pouvez voir que tous ces ont besoin d'aller à gauche et à droite, et vous verrez ça dans une seconde. Mais ce que nous voulons faire, c'est changer cette couleur, aussi. On ne veut pas ça. Ouais, et ça doit être un peu plus léger. On y va, OK, alors maintenant on va cacher désactivé et montrer, soumettre et montrer l'arrière-plan. Alors nous revenons ici pour cacher et montrer l'arrière-plan, désactiver et puis cacher soumettre. Et nous voilà, accord, assez facile. Mais l'idée est que ce que vous voulez faire est de les mettre en place pour que vous puissiez le changer tout au long de votre composition et le rendre super facile. Donc, comme vous construisez, vous avez un autre bouton et vous dites, Connectez-vous et vous pouvez faire plus petit et il est des espaces correctement et fonctionne vraiment bien été et faire quelques boutons secondaires. Donc, ce que nous allons faire est d'aller au bouton principal que nous avons et nous allons dupliquer le maître. Donc si jamais tu es genre, où est cette chose ? Vous savez, si vous construisez une tonne de composants et que vous êtes comme moi, parfois, vous avez zone de composants non organisée. Uh, vous pouvez faire un clic droit dessus et dire, Aller au composant maître va sauter juste là. Donc maintenant, on l'a sur le côté gauche, ce qui est sympa. Et donc ce que nous allons faire est juste d'utiliser l'option drag duplicate, et je tape sur la grille pendant que vous étiez partis les gars. Donc, euh, toute façon, je vais faire un clic droit détacher l'instance. Donc maintenant, nous avons ce bouton et nous allons le rendre, hum, secondaire. On va le nommer secondaire. Et, euh, nous allons juste nommer ce secondaire. Et encore une fois si vous voulez que votre texte soit toutes les majuscules, voyons ici, toutes les majuscules donc et assurez-vous qu'il est au centre. Donc ce qu'on va faire avec celui-ci, c'est prendre que nous allons avoir le blanc comme arrière-plan et un coup de sperme de camp de démarrage pour, et ensuite nous allons changer notre couleur de soumission ou secondaire pour le rouge. D' accord. Donc maintenant que nous avons ceci, ce que nous pouvons faire est dupliqué et faire le vol stationnaire et le focus. Tout comme l'autre, c'est juste un peu amusant. Parfois pour être comme, Eh bien, quoi ça ressemblera ? Et vous pouvez rapidement le rincer. Donc je vais faire ça très vite. Vous allez regrouper cela ensemble, disons, arrière-plan. Je vais dupliquer ça et dire Hover. Oups. Désolé. Ça va trop vite. D' accord. Voilà à quoi ressemblera le Hever. On va le faire. On va juste faire tomber ça à ça ? Um, comme gris sur le focus. Nous ferons du rose car la bordure semble un peu trop brillante. Donc, vous devez l'alléger. Je vais en faire un nouveau gris. Alors quatre. Oups. Bon, maintenant que nous avons notre couverture, nous allons ajouter un effet à ce même effet. Et si vous voulez Oh, vous savez, gardez les effets similaires. Vous pouvez venir ici et nous aimons cette ombre portée. Nous voyons juste le style des effets. Qui ne peut pas laisser tomber le bouton. Ok, donc maintenant on saute ici pour qu'elle se concentre sur les effets de sol, mais on ne peut pas faire tomber les boutons donc c'est sympa avec la marine là-dedans. J' aime que certaines de ces couleurs apparaissent à travers. C' est un peu différent, mais je m'amuse, alors allons-y. Euh, ok, donc on va dupliquer, cependant, enlever ça, et maintenant on a un clic actif. Donc ce qu'on va faire, c'est retourner ici et regarder ce qu'il y a dans le vol stationnaire. Eh bien, en fait, on peut juste le faire ici, aussi, pour que tu puisses voir l'ombre intérieure pour qu'on fasse de la nourriture. Cap ne peut pas dans son ombre. D' accord. D' accord. Donc je retourne ici, et une chose que je fais, c'est que et une chose que je fais, c'est que si c'est très proche, on ne peut pas reproduire ça. si c'est très proche, Restez actif et montrez-le. Et puis à l'arrière-plan, ça affecte le camp de démarrage dans son ombre. Je ne sais pas si ça marche, mais nous allons aller avec l'avant pour cliquer sur le truc qui est sympa avec les composants, c'est que si vous avez l'impression que ça ne marche pas, vous pouvez revenir en arrière et le vider. Et cela changera tout au long de ce site. Même si vous avez, vous savez, vous savez, plusieurs pièces qui sont vraiment longues comme une fin de, Ah, Ah, soumettez que vous voulez une action vraiment grande appelée, quoi que ce soit Tous ces changements et nous l'avons mis en place de sorte que étirer correctement. Donc, euh, maintenant nous sommes actifs, et nous allons faire, hum, handicapés. Ok, donc nous allons juste faire ça avec ce gris et ce même gris que vous pourriez avoir besoin d'être plus léger recherche sont plus sombres, donc vous pouvez le voir. Ouais, c'est bon. Donc, euh, désactivez. Bon, alors maintenant on allume notre bouton secondaire, et avant de le faire, on doit s' en assurer et frapper. Hey, c'est la copie des symboles maître. Dupliquer le. On va prendre notre symbole maître ici, et ensuite on s'assurera que oui, c' est notre double secondaire. Allez dans celui-là. Désactivez l'arrière-plan. Activez le doublon du survol. Éteignez. Activer actif. Et la même chose avec les handicapés aide à faire ça. Je ne suis pas le bon. D' accord. Oui. Sur le clic a besoin d'un peu de travail. Ce n'est pas assez de changement. Alors qu'est-ce qui se passe ici ? On va retourner chez notre maître pour s'assurer qu'on le couvre correctement, et on va le faire trop rose. Vous ferez le nous allons faire l'actif en rose. Euh, tu ne peux pas rose. Ok, donc maintenant oui, ça a l'air un peu mieux, et ça marche. 5. Modification de client - déplacez rapidement la conception en editing des composants principaux.: Rejouons le Devil Advocate et disons, Comme à ce stade, le client était comme ça ressemble à 2015. Nous devions être plus récents, et nous voulons les champs de formulaire qui ont juste un trait à la bordure inférieure. Donc, ce que vous pouvez faire est de revenir ici dans votre original. Et au lieu d'avoir ce rectangle, ce que nous allons faire est juste d'ajouter ce que nous allons faire est de le dupliquer. Donc on a la même taille et on enlève les coins arrondis ici, on va montrer que je vais enlever le coup et maintenant on doit remplir mais on ne veut pas. 64 pixels. Faisons deux pixels et ce qu'on va faire, c'est le laisser tomber. Et ce que j'aime faire est d'avoir ce rectangle de base là-bas pour que je sache où ma bordure doit s'arrêter pour le dimensionnement. Alors maintenant, on va cacher ça. Donc maintenant, nous avons un beau, um, um, beau cadre sont des champs de formulaire qui sont un peu plus propres, et votre boîte de commentaire ne fonctionne pas correctement, et c'est parce que nous avons ajouté ceci, euh, le rectangle qui est mis à l'échelle Donc, nous voulions vraiment le bas de l'orteil, puis il fait automatiquement que deux pixels afin que vous puissiez voir rapidement cela. J' espère que vous pourrez le voir. C' est un peu léger. Donc ce qui est bien, aussi, c'est que si vous venez et dites Hey, je veux montrer que celui-ci est mis en évidence Vous pouvez entrer dans ce champ de formulaire spécifiquement et dire, Hey, c'est ceci est actionnable, vous savez, et probablement ne casser cela et faire ce rose pour le plaisir. Donc, c'est sur Hever ou ou ou se concentrer, et puis vous pouvez dire que vous êtes en train de taper et en ce moment, donc c'est une autre façon de le faire très rapidement. 6. Menu flottant. Nous modifions le menu original et construisons un menu flottant.: Bon, bienvenue. Nous allons revenir dans la zone supérieure et examiner quelques façons de changer les composants par page simplement très rapidement avec des images et des taxes. Donc, ce que nous allons faire est de se débarrasser de cette partie et flotter belle photo de skateboard derrière cela et faire le menu flottant sur l'arrière-plan de l'image afin que chaque page ait un réglage d'image différent. Donc nous allons juste mettre ah, système de menu ici que je viens de faire déjà. Et ce que nous voulons faire, c'est nous assurer que nous avons un peu de noir en haut pour que le menu montre toujours que nous allons juste casser ça et nous allons faire un linéaire Grady Int Phil. Et puis cela s'estompe à zéro. Nous verrons comment cela fonctionne, mais nous n'avons peut-être pas besoin de ça, il suffit de le laisser tomber dans une seconde. Donc, fondamentalement, faites rectangle et déposez-le derrière son crochet gauche de commande d'option, et puis nous allons le remplir avec une image. Donc nous avons juste quelques images de skateboard. Voyons voir, celui-là est plutôt cool. C' est peut-être ouais, allons-y avec celui-là, c'est un peu trop bas. Donc ce qu'on peut faire, c'est traverser bien avant ça, je veux m'assurer que j'ai le A belle A belle hauteur. Alors faisons-le pour 92. Ok, maintenant on va à la recadrage. Faites tomber ça. D' accord, donc ça a l'air un peu bizarre. Maintenant, ce que nous voulons faire est de cliquer dessus et revenir au composant maître, Aller au maître, qui est juste là à gauche. Donc quand on a ça, ils sont juste un peu trop gros maintenant. Et nous n'avons pas besoin de ces antécédents. Donc, si nous changeons, nous voulons nous assurer que nous faisons tout ensemble. Et généralement, quand je fais cela ensemble en tant que système de menu, je vais enregistrer cela comme un composant aussi. Donc ce qui est sympa est une fois que nous allons dans cette section principale que cette action ou l' état actif sur le bouton, nous voulons nous assurer que vous avez votre gauche et droite, donc il va s'étirer avec elle aussi. Laissez-moi revenir en tant que partie active de l'état. Tu veux qu'il soit sur le fond. Donc, si ce n'est pas en bas et qu'il est mis à l'échelle, ce qui se passe, c'est que si vous le réduisez, la ligne se rétrécit et vous ne voulez pas du tout cela. Donc tu veux marcher trop bas ou haut, selon ton design. Alors et maintenant, maintenant que nous avons un peu vidé certaines des couleurs sur le make this pink pour le plaisir et nous allons nous débarrasser de ce fond à 8% nous allons cacher ça. Je vais le cacher ici, carte d'identité. Et maintenant nous allons retourner à cette section principale et désactiver l'état actif pour maintenant nous sommes à la maison et nous avons ce joli menu. Et ce qui est bien, c'est de dire que vous voulez orteil, faire une autre page et vous en faites un composant. Donc, cela pourrait être le menu principal. Hand dupliquera cela et sortira le menu principal. Oups. Qu' est-ce que j'ai fait là-bas ? Sortez le menu principal et mettez-le par un autre. Donc, ce qui est bien, c'est que vous pouvez changer cette section dans tout le site. Donc, par exemple , , on va faire de tout ça un composant aussi. Donc, nous allons ajouter la navigation principale ne sont pas dans la navigation, Le texte principal de la page. Donc l'en-tête 1 et moi voulons que celui-ci ne soit pas tout en majuscules, donc on va juste l'avoir régulièrement. On va faire ce puant gros en gros. Allons-y. 64. D' accord. D' accord, allons-y. Encore plus grand. Bon, Donc maintenant ce que nous voulons faire est de définir ce Grady int fondu cette image d'arrière-plan et l' en-tête un deux dans lequel, ce qui est agréable. Si vous configurez ça sur vos textiles, allez-y et nommez-le H. 1. Mais nous allons sélectionner les trois options K. Ce sera notre héros, donc je copie ce dupliqué et emmène le héros ici. Ce qui est sympa, c'est de dire qu'on veut une autre page. Il suffit de dupliquer la page. Déplacez tous les trucs rapidement, juste pour que vous puissiez le voir. Nous avons une autre page. Nous sélectionnons ce composant, c'est une image, et nous allons essayer celle-ci. D' accord. Et maintenant, on va le recadrer. Il est déjà réglé pour recadrer au frais. Nous allons dans notre en-tête un et aimons craquer. Je ne sais pas si c'est un skateboard ou pas. Donc nous avons besoin d'une ligne à gauche donc nous retournerons à notre composant et une chaux à gauche. D' accord. Donc, obtenez rapidement une idée de la façon de vider les différentes pages avec le système de menu différent. 7. Bouton avec des icônes - créer des boutons avec plusieurs icônes et états actifs.: Faisons un saut rapide dans un bouton avec une icône. Ce qu'on va faire est très simple. Bouton a les différentes icônes de médias sociaux en elle, et vous pouvez échanger très rapidement. Alors bien, faites un bouton blanc avec un coup et faites-le assez subtil et faites. Cela passera à 56 pour les médias sociaux. Et disons, vous savez, faites un suivi ou quelque chose comme ça pour rendre ça encore plus petit. C' est bon sur 48 donc ce n'est pas écrasant. Et j'ai dit, ce texte à la ligne gauche, donnez-lui un peu d'espace. On va d'abord faire entrer Twitter. Donc tu as Twitter et ce qu'on va faire, c'est l'espacement. Puisqu' ils disent tous suivre, on va centrer ça et avoir l'espacement que 32 Très bien, si simple. Option Command K. Donc, nous avons notre bouton social type Kim avec vous les gars regardant. Ok, donc ce que nous voulons faire est de pouvoir faire glisser cela et avoir les différents boutons de suivi pour que nous puissions même faire un autre, aussi, où nous avons juste juste le nous comme une petite version comme 32 pixels. La même chose. Parfois, si vous avez quelque chose, il suffit de le coller tire en haut à gauche juste pour regarder pour eux. Donc, l'une des choses que vous pouvez faire est juste de jeter toutes ces icônes ici et un centre de ligne. Alignez verticalement et déposez-le sur ce bouton. Aligner. Ligne verticale. Option horizontale Commande K. Vous avez votre composant social petit. Ok, on va faire un double de ça. Je suis attrapé l'original. Sortez-le. Donc, ce qui est bien alors, c'est de dire que vous avez ça, maître, vous entrez et vous cachez tout ça. Ensuite, quand vous entrez dans ce social principal, disons, commençons par Twitter et nous voulons qu'ils soient enfermés ensemble comme ça. D' accord ? Je pense que c'est foiré. D' accord, alors tout ce que tu fais c'est de venir ici, éteindre, allumer Facebook, puis rater. Twitter, allume Lincoln. Et ainsi de suite et ainsi de suite. Et super facile. Super, super facile. Pour une raison quelconque, celui-là a l'air bizarre. Donc, nous devons retourner à notre principal YouTube rapide et regarder celui descendre dans la section principale . Donc c'est une façon de faire ces petits boutons de médias sociaux et ne vous oubliez pas de mettre en conserve. Hum, en disant que c'est éteint et bien, dupliquez ça et dites-le et faites-le plein gris. Alors, vous savez, si vous sélectionnez ceci et que vous voulez montrer le bouton être sur ou le bouton de survol, alors vous cliquez sur espoirs sur celui-ci, accord ? Ainsi, vous pouvez voir rapidement à quel point il est facile de fabriquer ces composants. Et puis, par exemple, si c'est dans le pied de page et les pieds de page sur tout le site, alors vous pouvez juste obtenir rapidement un sens. C' est presque comme si vous aviez CSS visuellement pour tout changer à la volée. Donc je ne vais pas passer une tonne de temps là-dessus. Mais, euh, donc on va juste retourner le flop très vite. Oups, je n'avais pas les autres là-dedans. Parfois, vous devez avoir un spectacle que vous pouvez voir ce que vous faites. C' est un peu amusant. Bon, alors maintenant, je vais Teoh, éteindre Twitter. Il est grand, il rend ça super facile et bien. Vous avez vos boutons sociaux et vous pouvez faire des rolllovers n'importe quoi et style comme vous voulez, mais avant d'avoir fini, vous voulez voir comment cela fonctionne ? Réactivité. Jetons un coup d'oeil à ceci et voyons si ça s'étire et que c'est ce dont je parle est non, ce n'est non, ce n' pas juste. Alors ce que nous faisons c'est que nous allons à ces, alors sélectionnez-les tous et dites que nous le voulons au centre et nous voulons parmi les gauche et ensuite nous voulons que ce suivi soit Quelle chanson ? Ce bouton social principal ici. Nous voulons qu'il soit juste justifié. Gardiennons cela justifié. Mais ce qu'on va faire, c'est dire juste et centre. Donc, à mesure que cela glisse, il va s'agrandir. Maintenant, nous l'avons fait correctement, et vous pouvez même les regrouper en groupe et en ligne centrale ceux afin qu'ils restent ensemble dans le bouton comme il y a. Je suppose que je devrais te montrer ça. Donc ce qu'on va faire, c'est regrouper ça ensemble et ce que tu dois faire, c'est dire, un centre et maintenant devrait partir. Sinon, nous devrons quoi ? Ça vient de le faire sur Twitter. Donc peut-être que tu dois le montrer, euh, dit centre centre. Très bien, donc c'est bien que tu puisses le tester. Donc, alors vous avez un joli bouton qui suit et aucun jeu de mots prévu et peut étirer à votre réponse de contenu. 8. Composants de sélection - Boutons radio et boîtes à check avec des états actifs.: Bon, allons sauter dans le multi. Sélectionnez et Single Select. Donc, ce qui affichera est une sélection multiple serait case à cocher. Donc on va faire ces 32 32. Je vais rester avec le même style avec le fond blanc, comme un trait gris au pixel. D' accord. Et elle prend un texto. Appelons cette case à cocher une case pour Nous avons un texte juste régulier et espacez ça avec, um, 24 pixels. Tu peux voir comment je vais. Tout dans les huitièmes essayait d'Azzam. Je ne vais pas trop vite. Donc, euh, on va juste faire la boîte elle-même pour le et c'est qui semble encore trop grand. Alors passons à 24. Bon, donc on a notre boîte, tu es de retour. Et ce qu'on veut faire, c'est avoir un chèque. Et donc j'utilise, euh, pas si génial. Et donc nous pouvons faire Look up, check Si vous n'avez pas la version pro, euh, vous pouvez utiliser la version gratuite, donc il y a un chèque là-bas, aussi. Donc j'aime certains d'entre eux. Les minces qui correspondent au style que nous recherchons. Donc, ce que je fais est de copier l'Unicode et de revenir à Sigma. Oui, collez ça ici et remplissez-le avec ça ? Oh, c'est sur le sens, Prue. Donc, nous avons besoin de police impressionnant. Cinq, pas des marques, mais juste cinq là-bas. Oui, il y a un pro, et on va mettre ce chèque là. D' accord. On dirait que j'ai à ceux qui ne savent pas où celui-là. Ok, zoomez un peu. Donc on a une case à cocher, et ce qu'on veut faire c'est dire, à l' époque, je vais dupliquer ça et dire actif. Et cette vérification n'est pas chaude dans la page elle-même. Donc, parfois, je vais juste le couper, commande X, et aller sélectionner quelque chose sur la page et dire commande V, et il va le coller quelque part près. Donc on est où est notre ouais, on est bien là-haut. D' habitude, je les regroupe un peu mieux pour aller un peu plus vite, maisquand mais tu construis le reste des pages, mais ce qu'on va faire, c'est continuer à bouger. D' accord ? Donc nous avons notre chèque ici. Nous pouvons nommer ce chèque et actif. Donc on voulait aller à ce rose. Et maintenant ce que nous faisons, c'est dire, actif. Je regroupe ça, et Oh, et on va cacher ça et ensuite les sélectionner tous les deux. Et nous n'avons pas besoin d'un groupe de plus. Dites juste option commande K. Donc nous avons notre composant et, hum, cochez la case. Bon, donc maintenant on contracte ça ici, et on va dupliquer ça. Gardez ça sur le côté au cas où nous aurions besoin de changer quelqu'un. Rendez celui-ci actif super amusant. Hum, donc maintenant on va aller par ici et faire la même chose. Donc on va prendre ce style, faire un bouton radio. Et Phyllis course de vol est le gris vers et vers le bas à 24. Parfois, les boutons radio sont un peu plus petits, donc on pourrait descendre à 22 juste, euh, avoir ce sens de ce style. D' accord ? C' est le cas et on dira la même chose. Mais celui-là, ce qu'on va faire, c'est juste faire un simple ce qu'on va faire, c'est juste faire un simple cercle au milieu. Et une chose avec vous savez, 22 ne fonctionne pas avec le cercle directement au milieu, sauf si c'est parfait. Donc, nous allons aller à 21 et puis un centre de ligne, ligne verticale, horizontale et est encore un peu éteint. Donc peut-être que c'est bien, je suppose que j'avais raison. 08 Bonjour, Evens. Ok, alors on y va. On ira à Pink pour le film. Nommez ceci actif et allez dupliquer celui-ci. Changez ça en rose. Je n'aime pas ça. Ça doit être le peut-être. Ok, donc, euh, après Dot Donc on va au groupe Teoh. Ils l'éteignent. En sélectionnant les deux option commande K. Et donc nous aurons sélectionné la radio dupliquée. J' ai la vitesse à laquelle tu peux arriver. Juste à quelle vitesse vous pouvez vous déplacer avec. Pas de clic sur. D' accord. Et comme, tu sais, par exemple, si tu veux changer comme le texte avec ça, tu peux, mais on va le garder comme ça. 9. Composants Tab utilisez des composants adaptatifs pour ajouter facilement de nouveaux onglés.: Je vais sauter et continuer et travailler sur quelques onglets. Et donc nous avons, genre, genre, un état de tabulation actif. On a un onglet condensé en ce moment avec, genre, genre, je ne sais pas, genre, un intéressant comme, Hey, Hey, il y a trois choses qui se passent dans cet onglet, mais c'est une belle section du composant. Donc asl tant que vous construisez des onglets, vous pouvez continuer à les faire glisser et faire en sorte que vos ensembles soient activés et désactivés. Donc, ce que nous allons faire est de faire une ligne sur laquelle j'aime utiliser un rectangle, pas les lignes. Donc, vous avez un peu plus de jeu. Je ne sais pas pourquoi. Je crois que c'est Sean Moynihan qui m'a appris ça. Bon, donc on va aller au camp de démarrage, super pour, et on va donner à cet espace essayer de traiter cet onglet actif comme un bouton, mais on va faire des choses différentes avec ça. Donc nous allons avoir l'arrière-plan, le déplacer vers l'arrière, ce qui est la commande d'option gauche de la barre. Alors va au 44 en ayant un peu plus grand, et on va le remplir de blanc et avoir ce, euh, trait pour être de la même couleur. Donc, cela va correspondre. Je pense que ce n'est pas la même couleur pour et trois. Ok, donc on a notre onglet actif ici, et on va aller jusqu'à la zone latérale, ok ? Je viens de dupliquer ça en tenant l'option. Ok, donc maintenant vous avez votre onglet actif. Maintenant, si vous savez que vos antécédents seront blancs, vous conduisez juste un peu rapide, comme frapper dessus de ça vous conduisez juste un peu rapide, , hum, pour couvrir, couvrir ce qu'il y a là. Et puis vous avez cette activité, surtout si vous faites, genre, une serviette de style ou quelque chose que vous faites très vite. C' est un bon moyen rapide de le faire. Donc, disons qu'on va avoir ça comme, comme, euh , sur l'onglet pour montrer combien de choses se passaient qui seraient amusantes. Bon, donc maintenant qu'on a notre structure de base, on veut un centre, le texte, et s'assurer que leur espacement parfois Oh, euh, je vais déposer les's dedans et dire comme, Je veux une base de 24 pixels. Alors c'est un moyen rapide, rapide et rapide de le faire. Et ça aide. Juste obtenir rapidement votre espacement. Ok, je ne le ferai pas. Ok, maintenant qu'on a un onglet qui marche. C' est notre état actif. Je l'ai dupliqué et j'ai le maître ici. Donc on peut essayer de faire des étirements et des trucs comme ça pour voir si ça marche. Et c'est La raison pour laquelle c'est groupé et il est réglé à droite sur le dessus. Donc, restez toujours sur le dessus. Nous voulons que ce soit 44 pixels et ce n'est pas exactement le cas. Je vais faire 44 pixels. Et nous avons envoyé ça à ce genre de bar actif, endisant essentiellement, disant essentiellement, Hey, c'est la zone qui est active. Je ne voulais pas que ça passe tout le chemin. Je voulais que ça montre que Hey, nous travaillons sur ce contenu ci-dessous, mais nous voulons que ce soit au centre et au bas. Donc nous resterons toujours au centre et ça ne grandira pas. Je sais toujours être au fond. Maintenant qu'on a ça, ce qu'on doit faire, c'est l'espacement. Je suis juste en maintenant l'option quand je fais glisser donc dans un inactif et actif. Ok, alors disons que c'est comme un onglet inactif. C' est un peu plus long. Donc on veut encore deux lignes et on va changer cette ligne. HaiF et, en ce moment, nous pouvons le faire et vous pouvez voir que ça fonctionnera correctement avec l'autre. Donc, c'est 84 pour cent. Et une chose que nous pouvons faire est de le rendre un peu plus large. Donc, cela devrait être 20 sont 24 pixels, 24 pixels et 32 espace. Donc, ce que nous faisons maintenant, c'est que nous pouvons garder les chiffres ou les flotter et enlever le décollage actif et l'enlever. Donc, nous avons juste un bon onglet inactif ici et nous allons à nouveau dupliquer et dire, Comme, nous allons juste appeler cela inactif, donc soyez un peu plus petit et la façon dont vous savez où est votre taille est que vous allez jusqu'à ce qu'il saute à deux lignes. Donc maintenant, c'est correct pour votre espacement. Alors nous allons sauter dans deux tables suivantes 10. Tabledes - utiliser des composants pour accélérer votre conception et changer dynamically: On va sauter dans les tables, donc je vais inventer des trucs. J' ai le statut de X jeux. Maintenant, nous avons un je d. dans le monde entier. Essayons de voir, comme, euh, la disponibilité, euh, sponsor. Et peut-être qu'on va faire un nom ici juste pour inventer ça. Donc, ce que nous voulons faire est de les faire entrer dans nos colonnes ou de travailler sur des espaces, selon si ces air vont rester ou être dynamiques, donc cela pourrait être un composant aussi. Donc, par exemple, j'aimerais faire ce, euh, textile. Donc je vais dire que c'est, euh, euh, avance sur le pauvre. Très bien, donc vous pouvez mettre ceci et cliquer sur eux tous, le sélectionner et dire chacun pour une chose que vous pouvez faire est si vous espacez, vous pouvez en faire un composant, sorte qu'il glissera avec vos tables aussi. On va travailler sur les autres tables en ce moment. Donc ce que nous allons faire est de passer à autre chose et nous allons casser ceci et juste obtenir quelques textes de base un texte régulier et le déposer à 16. Donc nous allons avoir 123478 9-001 Donc c'est son numéro et la disponibilité est, euh je ne vois pas disponible. Et ce qu'on va faire, c'est s'assurer que ce texte n'est pas au centre. Citation majuscule. C' est la même chose pour en être sûr. Oui. D' accord. Donc on veut ça. C' est comme notre zone d'en-têtes. Donc nous voulons que ce soit notre première cellule de table. On va espacer ça de 30 à 48 pixels, donc on veut que ça soit un peu plus fort, donc on va l'utiliser comme base de la Navy. Je pense que ce que nous ferons juste sous votre statut, ok, juste un rencard juste pour le Heckman. Je pense que ce que nous ferons juste sous votre statut, ok, Donc, puisque cela va être une date, affaiblir, rétrécir un peu et apporter le nom. Et commençons par, euh, Rodney pleure. Donc ce serait plutôt cool, aussi. La plupart des tables n'ont pas ça, mais nous pouvons le faire. Juste, euh, est-ce qu'on peut jeter leur logo de sponsor, et on va juste utiliser ça comme espace. Donc je vais faire ça assez petit et déplacer le sponsor et me pardonner. Je ne sais pas quels sponsors je viens de prendre quelques entreprises, donc juste pour le plaisir, princesse, voir Adidas. D' accord. Et on va envoyer ce Phil à l'image, d' accord ? Et le statut est disponible. Alors devenez un gentil, nous allons y retourner et vérifier. Icône. On va regarder vers le haut. Voyons voir. On a déjà le chèque. Je ne vois pas juste pour le diable de ça fera l'affaire. Euh, proche. Donc nous avons du temps, monsieur. Cool. Alors copiez celui-là. Copie-le. Reviens à la figue MMA. Assurez-vous qu'il est génial et pro. Bon, maintenant on a nos vêtements, et on va faire 24 pixels, voir s'il est disponible ou pas. Et si on veut vérifier ? C' est vraiment similaire à ça. Donc on va retourner vérifier dans le cercle. Cochez encerclez une copie. Reviens. La paix. D' accord. Alors, quelles couleurs avons-nous ? Le vert ou le rose ? Parce que c'est la couleur active et non disponible. C' est ce genre de verdure ? C' est comme si je le savais. Donc je vais les empiler et les aligner, obtenir ce statut correct, et ensuite m'assurer que nous avons assez de place pour ne pas être disponibles. Genre de taper comme le plus que vous avez donc si vous savez qu'il est disponible, ne sont pas disponibles. Tapez non disponible et vérifiez où vous en êtes. Donc, nous avons le logo avec le sponsor. La date du nom et le numéro mondial I. d. Um, je vais juste espacer ça juste un peu, donc on ne veut pas d'accord, alors débarrassons-nous de ça. Pour qu'on puisse voir. Donc c'est notre table. Mais ce que nous voulons faire, c'est d'abord examiner notre espacement avant d'en faire un composant. Donc j'ai mis ça en bas, et en fait, je vais le rendre très léger. Et donc même si cette 1ère 1, on ne veut pas être, hum, Gray, on voulait probablement être blanc. Hum, on voudra ça en arrière-plan. Donc nous voulons que c'est l'espace. Donc je dis juste 84 maintenant, juste en train de regarder ma grille. Bon, donc on veut de l'espace. C' est juste un petit peu. J' avais dû 24 heures. On a ça là-bas. Donc maintenant, nous avons notre table, et je n'aime pas l'arrière-plan comme ça, mais ce que nous pouvons faire est d'utiliser la même table, mais la laisser tomber à 10 ou 20%. 30 fonctionnera. Et ce qu'on va faire est de dupliquer ça et de le ramener à deux pour. Et parfois, si vous avez des problèmes de doublure, vous pouvez les sélectionner tous les deux et vous assurer que vous avez une ligne vers le bas. Et maintenant je sais que c'est celui sur le dessus. Je vais aller à 50%. J' essaie d'aller à 100 pour correspondre à tous les autres. Bon, donc maintenant ce que nous faisons est sélectionné toutes les options commande K. Vous êtes. Vous avez un composant, et c'est une table. Donc maintenant ce qu'on peut faire, c'est reproduire ça va sortir notre maître de table. On va devoir jouer un peu avec ça. Et nous allons dupliquer ceci en maintenant l'option et le décalage et celui-ci et celui-ci. Bon, donc nous avons Voyons voir, Bucky LASIK, euh brûler Quist. Eric a coûté parce que fait. Ok, donc je n'ai aucune idée avec qui ces gars étaient. Donc désolé si je gâche ça, j'ai juste ce logo est disponible donc et dépendant. Ok, donc maintenant ça a échoué ici. Ce qu'on va faire, c'est revenir sur celui-ci et s'assurer que nous avons l'espace pour le faire . D' accord ? Je pense que ce n'est pas indépendant. Oui. C' est vrai, mec ? J' espère que je n'ai pas tout gâché pour que vous puissiez rapidement changer les chiffres ici. Disons que 3478 Vous avez 678 et des dates. Je ne sais pas. On fait juste toute la substance que l'on peut rapidement changer. Mais c'est si agréable quand on fait une boussole pour les entreprises. Voyons donc 12 et 2020. Bon, donc ce que nous voulons faire maintenant, c'est que nous pouvons aller dans l'image et choisir notre image. Et c'était quoi celle-là ? D' abord, je ferais mieux de savoir lequel de ce qui est Adidas voit que je peux jeter indépendant dans. C' est si agréable de pouvoir juste échanger rapidement. Je veux dire, ils sont minuscules, mais vous avez l'idée que vous pouvez faire toutes sortes de choses. Santa Cruz Plan B image fromage image et être tout droit. Donc c'est cool. Alors que maintenant tu peux entrer et dire, comme, comme, ce que je n'ai pas fait ici. Nous pouvons nommer ceci, um, disponible, et vous pouvez voir ci-dessous dans ceux-ci. Ça commence à remplir ça pour toi. Alors maintenant, nous savons lequel est lequel. Disons qu'il n'est pas disponible et qu'il dira, Oups, il est disponible. Donc nous allons les cacher pour que vous puissiez rapidement avoir une idée des idée des variables que vous pouvez activer et désactiver. Donc celui-là, ce qu'on va faire, c'est retourner à l'arrière et le cacher. La même chose avec ce formulaire. Eh bien, en fait, gardons celui-ci et aura besoin de cacher celui-ci et de cacher le dos. Celle-ci, elle peut rapidement voir comment la table pourrait être construite. 11. des citations de blocages: fermez ce tutoriel. Je veux passer en revue quelques autres choses juste avoir un sens du comportement réactif avec les composants. Donc, par exemple, j'ai construit cette citation de marche, et la façon dont vous voulez construire, comme un témoignage, témoignage ou une citation de bloc est pas en morceaux. Donc vous avez vos antécédents, euh, appels et votre texto, et j'ai, genre, une petite citation. Et, euh, Docteur, je suis un gars drôle. Donc, cette pièce est le nom, et ceci est la citation, la citation, citation, parenthèse ou les guillemets, et puis c'est la citation de bloc réelle. Donc ce que nous voulons faire est de sauver ceci en tant que composant et juste pour des raisons de temps, je vais le mettre juste en dessous. Donc je l'ai copié, dupliqué. Ok, donc quand on s'emballe avec ça, ça ne va pas bien, et ça tu te fais vraiment briser et rien ne bouge. Droit. Donc ce que nous voulons faire, c'est que nous pouvons vraiment le briser un peu pour que vous puissiez voir ce qui se passe . Mais allez à l'arrière et dites, gauche et à droite et en haut et en bas. Alors vous voulez que votre nom soit en bas. Donc vous dites gauche parce que vous avez toujours voulu gauche. À côté de cette citation sont comme la citation de bulle de discours, et puis vous le voulez sur le fond. La même chose avec celle-ci. Tu veux qu'il soit laissé et en bas. Et ça, tu veux de gauche et de droite. Vous pouvez déjà le voir changer et en haut et en bas vous permet réellement haut. Et mettons ça au et centre etau haut. Ok, tu vois, donc ça marche, non ? Il semble juste que cela ne fonctionne pas correctement, parce que lorsque vous étirez cela, et alors vous l'espacez pour voir rapidement comment cela fonctionne vraiment bien, avec des conceptions réactives où vous pouvez simplement le verser et le tirer vers le bas. Tellement super sympa. Et nous allons simplement accrocher à l'une de ces colonnes, obtenir cet espace correct, et déplacer le composant maître et nous avons terminé. 12. Tableaux de prix - 1 composant pour construire une table de prix à 3 colonnes à 3 colonne.: ce dernier élément, nous allons établir une structure de tarification du modèle de tarification afin que les composants puissent être déplacés et modifiés. Et il est juste beau orteil ont la structure de prix, mais les avoir dans les composants. Donc on va faire le blanc et juste s'amuser un peu. Euh, dans ce contexte, alors ce que je vais faire, c'est faire une photo, n'est-ce pas ? Une sorte de grande haine ? D' accord. Et ce que nous allons faire, c'est que nous allons jouer Teoh Juste dupliquer ça à des fins de dimensionnement et et aller au solide, et ensuite nous pouvons déplacer ça derrière, donc nous allons dire que c'est de retour et le déplacer si vous pouvez regarder bien en bas à gauche, vous pouvez voir ici est le dos et nous allons aller dans l'obscurité sur celui-ci, et nous allons changer l'image pour Essayons le logiciel. Ouais, donc c'est un peu amusant, et tu peux même le brouiller et faire toutes sortes de trucs avec ça. Donc en plus de ça, donc j'aime les regrouper et les redire et puis les verrouiller. Parfois, si je travaille sur le dessus de leur mais nous allons jeter dans notre grille et faire un ensemble de 33 et trois. Alors fais ça aligné, d'accord ? Et j'ai juste inventé un Zagat. Alors supporte avec moi. Donc ce qu'on va faire, c'est avoir, ah, la lumière comme un pro. Et, euh, genre, euh, eh bien, peut-être léger, régulier et pro. Donc, ce que nous allons faire est de trouver les couleurs juste vraiment rapide en pensant à ce qui pourrait être le plus fort et le plus moyen. Et en fait, beaucoup de fois ils ont, genre, la lumière et la normale, et puis le pro au milieu avec ça est un peu plus gros. Donc on pourrait juste faire, euh, ce gris vert. Ouais, juste pour le diable. On va essayer ça, donc on va mettre ça ici. Et nous voulions dépenser tout ça parce que nous voulons Ah, une ombre portée. Donc je l'ai déjà laissé trop loin. Alors voici le prix de retour. D' accord ? On va faire les effets. Qui ne peut pas laisser tomber le bouton, et on va le casser. On va faire un peu plus gros. Alors fais comme un 14. Et rendez ça vraiment sombre pour que vous puissiez le voir trop sombre. Alors on ramènera ça à 50. Ok, donc on va dire main légère. On va garder ces casser et le rendre un peu différent. Will ira plus grand mais plus mince. Nous voulons donc centrer le texte et penser à l'étirement et à l'espacement. Donc on veut avoir des livres autant d'espacement que possible pour l'autre. Les autres pièces. Et je pense que ce que je veux faire est d'aller petit, en fait, et, euh, le 24 pas à 24 24 et ensuite faire le prix juste ici. Donc bien, avoir le prix. Et disons que c'est 29 par mois. En fait, c'est beaucoup de ST 9 par mois. Et nous voulons que ce soit grand et que celui-ci soit léger et petit. Et donc une chose que nous pouvons faire est de travailler sur l'alignement avec ceci est de le définir à l'endroit où il sera travail en exposant la position de celui-ci à être plus élevé. Je ne pense pas qu'on ait besoin de la barre oblique. Je veux que ça soit encore plus grand. 56 64 ici. Ok, vous avez une lumière, et nous allons décrire cette ligne et encore, il l'a jetée là-haut et puis redescendre. Oui. D' accord. Qu' est-ce qui va nous faire traverser tout le chemin ? Je ne sais pas ce que ça ne marche pas avec ça. D' accord. Ça va rendre ça très subtil. Dites, genre, 20 %. Vous vous réglez ? Oh, c'est 100 là, mais les pasteurs 20. Ok, ok, donc c'est 9$ mois. Mais ce qui est amusant maintenant, c'est en fait nous pouvons tirer ça en arrière, descendre et faire passer cela un peu. Vous pouvez voir l'arrière-plan. Quelqu' un le fait. 75 %. Ok, maintenant, on a, genre, une liste comme une liste boulonnée. Mais centrons ça et disons que, , en fait, j'ai un peu de latin ici, grand-père sur ça centré. Faisons 30 quatre blessés. On est dans un Spacey à 24 heures. D' accord. Et voir que tu conçois. C' est centré, et c'est bon. En fait, on va le laisser comme ça. Ça a l'air sympa, bien qu'on veuille l'acheter maintenant. Bouton si bien, l'espace un peu mieux. D' accord. Et maintenant, nous pouvons revenir à notre bouton. Copie-le. Maintenant, vous pouvez rétrécir ça un peu si on veut. Ok, c'est super simple que tu aies l'idée. Donc maintenant, nous allons faire cela dicter un composant. On a besoin de ce retour avec toutes ces autres choses. Il y a tellement de choses qui se passaient et il le nettoyait. Bouton de commande pour aller. On y va. Une des choses que vous pouvez faire est de sélectionner tous les articles qui avaient des problèmes dans le groupe, tarification des appels, et ensuite nous allons à l'option K et faire, euh, composant, euh, va dupliquer ce Take out. Eh bien, c'est des gouttes assez dingues. Nous avons donc notre prix dans notre maître. Donc, ce que nous allons faire maintenant, c'est accrocher aux colonnes et les retirer. Et ce qui est cool, c'est qu'on peut tenir l'option et le rendre un peu plus grand. Merci alors. Et nous dirons 80 19 et 14. Donc on va dire pro et business. Juste le diable. Donc, c'est ce qui est si agréable à propos des composants est que vous pouvez juste changer rapidement les éléments. Tu vois ? Voir ce qui fonctionne couleurs ici. Un peu fou. Désolé. Et vous pouvez même changer vos boutons à la volée pour. J' espère qu'il a été utile et que vous comprenez à quel point les composants sont puissants. Et j'attends avec impatience, Teoh, voir ce que vous créez pense que certaines de ces zones de prix que j'ai ajoutées dans une image, mais je n'aime pas ça, donc je vais le supprimer. Supprime tout au long. Certains de ces éléments auront. C' est le meilleur rapport qualité/prix ou le genre d'un ruban qui met en valeur Hey, regardez-le. Regarde-moi. nous ferions évidemment sur ce pro qui, euh et moi, c'est un peu comme la version moins chère. C' est comme la version du milieu. Alors, Dio, on va échanger ça et on va dire pro et business. Ok, alors comment ajouter quelque chose ici qu'on ne veut pas de l'autre à la même chose ? Nous revenons simplement au composant maître et c'est la zone d'en-tête. Donc une partie de ce design pourrait ne pas être le meilleur, mais c'est plus juste pour vous montrer Hey, c'est ce que nous pouvons faire. Donc ce que je vais faire est de faire un ruban et je le masquerai donc nous allons juste appeler ce ruban et rendre blanc, et ensuite nous allons le ramener dans cette zone d'en-tête, et ce que nous allons faire est d'utiliser comme masque aussi pour cette section ici. Donc, nous allons dupliquer l'en-tête et appeler ce masque. Je suis dans un groupe ces ensemble. Alors j'appellerai cette messe Tuas. Eh bien, alors je vais dire utiliser comme mât et ensuite ces coups de poing et vous pouvez voir que vous savez que ça va ressembler, euh, euh, ce ruban peut se déplacer dans cette zone de masque jusqu'à ce que vous voulez pour qu'on puisse jeter, comme dans un de ces effets ici. Donc cette chute de bouton qui est assez réglée et laissons tomber, allons-y. Et nous voulons masquer ça puisque son texte à nous allons mettre, euh, euh, vous ne voyez pas que c'est de la valeur. Ok, on va faire condensé et régulier et le faire rose. Donc on a fait correspondre l'angle de celui-ci. Et c'est ce qui est cool à propos des vecteurs, c'est que vous pouvez simplement l'étirer. Et puisque vous avez déjà votre masse mise en place, alors vous avez juste à bouger. Déplace-le là où ça marche et on lui donnera juste un peu plus de place. Et j'ai déjà attrapé l'icône chaude, donc je vais la couper, retourner à la pâte de ruban, et maintenant tu vois que c'est là. Ce n'est pas exactement un 45, mais c'est bon. Donc on va juste dire que c'est ça. Et je pense que mon vous pouvez aller comme ça un direct en tenant le quart de travail. Allez un 45. Je voulais juste un peu différent. Je pense que c'est 30. Peut-être quelque chose comme ça. Donc, maintenant, nous avons le meilleur rapport qualité-prix, mais nous savons que tous les trois ne sont pas le meilleur rapport qualité-prix. Donc, tout ce que vous avez à faire est de venir ici pour cacher le masque et cacher le masque. Que s'est-il passé ici ? C' est une chose changeante pour les composants. Ce qu'il faut faire, c'est aller dans notre masque. Et une chose que nous pouvons faire qui pourrait aider est juste de dire que c'est juste, puis haut, et ainsi vous pouvez voir qu'il a sauté. C' est donc la meilleure façon de le faire est de le tester si vous en avez besoin. Parfois, vous devez en faire un composant. Vous ne pouvez pas le faire à l'intérieur des composants, vous pouvez donc le faire glisser à l'extérieur, en faire un composant dupliqué, puis le faire glisser dans votre tarification. On n'avait pas besoin de faire ça cette fois. Il y a des structures plus complexes que moi, donc je ne le mets pas là si on n'en a pas besoin. Donc, euh, c'est la section des composants. En un mot, vous pouvez entrer dans la pagination, qui est, vous savez, avec le triangle et le nombre ensemble et l'état actif, le tout dans un composant. Maintenant que vous avez les outils, j'espère voir ce que vous construisez. Merci. Oui, tu as fini. J' espère que ces cours vous ont aidé à montrer comment vous pouvez travailler avec les composants, comment ils sont faciles à modifier et de bons changements. Si le client déteste quelque chose, vous pouvez changer plusieurs choses en même temps. Donc, j'aimerais voir certains des projets que vous venez avec plus donc pas des projets mais composants et peut-être même des pages que vous avez construites en utilisant ce format de classe. Merci espoir de voir dans la prochaine classe.