Conception d'une interface utilisateur de site Web personnalisée

2. Pourquoi les modèles de sites Web génériques ne fonctionnent-ils pas: Voyons d'abord pourquoi utiliser le même ancien modèle de site Web est une mauvaise idée. Vous avez probablement vu un tas de sites Web qui se ressemblent vraiment. Elles sont comme des maisons emporte-pièces, toutes de la même forme, mais de couleurs différentes. Ces sites Web génériques constituent un gros problème pour les entreprises. Imaginez un marché bondé où tout le monde dit la même chose dans le même emballage. Comment vous démarquez-vous ? C'est ce à quoi les entreprises sont confrontées avec ces sites Web génériques. Ces sites Web ne racontent pas l'histoire d'une entreprise et ne la rendent pas spéciale. Ils peuvent sembler jolis, mais ils ne fonctionnent pas vraiment bien pour les utilisateurs du site. De plus, ils n'aident pas les entreprises à attirer de nouveaux clients. Un bon site Web est un outil puissant pour attirer les gens. Fais-leur acheter des trucs. C'est bien plus qu'une brochure en ligne sophistiquée. C'est le visage de l'entreprise. Nous devons nous concentrer sur les personnes qui utilisent le site Web. Ils cherchent des réponses et des solutions, nous devrions concevoir un site Web qui les aide à trouver rapidement ce dont ils ont besoin. Les sites Web personnalisés sont comme des costumes sur mesure. Ils s'adaptent parfaitement. Nous pouvons leur donner une belle apparence, fonctionnement parfait et aider les entreprises à gagner plus d'argent. N'oubliez pas que chaque entreprise est différente. Leurs sites Web devraient utiliser le même ancien modèle de site Web. Je ne le couperai plus. Nous devons créer des sites Web spéciaux qui fonctionnent vraiment pour les utilisateurs. C'est ce que nous apprendrons davantage au cours de la prochaine leçon. 3. Qu'est-ce que l'interface utilisateur/UX et comment pouvons-nous l'appliquer: Découvrons quelque chose de vraiment important dans la conception de sites Web personnalisés. UI et UX. Alors, qu'est-ce que l'interface utilisateur ? UI est l'abréviation d'interface utilisateur. C'est comme le visage du site Web U. Il s'agit de tout ce qu'un utilisateur voit et avec lequel il interagit. Cela inclut les boutons, le texte , les images, les couleurs et leur disposition. Une bonne interface utilisateur est facile à comprendre. Alors, qu'est-ce que l'UX ? UX est l'abréviation de User Experience. Il s'agit de ce que ressent un utilisateur lorsqu'il utilise votre site Web. Il s'agit de l' ensemble du parcours, de la recherche de votre site Web à l'exécution d'une tâche. Une bonne expérience utilisateur rend les utilisateurs heureux et satisfaits. UI et UX sont comme les deux faces d'une même médaille. Vous pouvez avoir un beau site Web, mais s'il est difficile à utiliser, les gens ne l'aimeront pas. C'est une bonne interface utilisateur et une mauvaise expérience et vous pouvez avoir un site Web facile à utiliser, mais s'il a l'air moche, les gens ne voudront pas l'utiliser. C'est comme une bonne expérience utilisateur avec une mauvaise interface utilisateur. Comment utilisons-nous l'interface utilisateur et l'expérience utilisateur lorsque nous concevons des sites Web ? La création d'un site Web réussi commence par une compréhension approfondie de ses utilisateurs. Nous devons identifier les personnes pour lesquelles nous sommes conçus , quels sont leurs besoins et leurs objectifs spécifiques. En simplifiant le design et en garantissant une navigation facile, nous pouvons créer une expérience utilisateur positive Des tests réguliers avec de vrais utilisateurs nous aident à identifier les domaines à améliorer et à affiner notre conception en conséquence. En fin de compte, notre objectif doit toujours être de répondre aux besoins et aux désirs de l'utilisateur tout en créant un site Web visuellement attrayant. L'interface utilisateur et l'expérience utilisateur sont très importantes pour créer des sites Web réussis. En comprenant et en appliquant ces concepts, vous pouvez concevoir un site Web que les gens aiment utiliser. 4. Qu'est-ce que l'outil de design Figma: Avant d'en apprendre davantage sur les conceptions centrées sur l'utilisateur et les principes avancés de l'expérience utilisateur, nous devons commencer par les bases. Plongons dans la conception de l'interface utilisateur d'un site Web tout en apprenant l'expérience utilisateur. abord, nous devons nous familiariser avec l'outil de conception, nous allons donc utiliser Figma FIGMA est un fantastique outil de conception d'interface qui nous aidera à concevoir l'interface utilisateur du site Web que nous aimons concevoir Nous commencerons par les bases de Figma, où nous apprendrons à naviguer dans l'interface et à créer des designs simples Au fur et à mesure de notre progression, nous explorerons les fonctionnalités les plus avancées telles que la création de prototypes interactifs, collaboration avec les membres de l'équipe, l'utilisation de composants pour assurer la cohérence de notre conception. À la fin, vous aurez une solide compréhension de la façon d' utiliser Figma pour créer des sites Web du début à la fin. 5. Avantages et désagréments de Figma et alternatives: FIGMA est un outil de conception d'interface largement utilisé et il présente une série d' avantages et d' inconvénients qui méritent d'être pris en compte L'un des principaux avantages de FIGMA est sa nature collaborative Comme il est basé sur le cloud, plusieurs membres de l'équipe peuvent travailler sur le même projet en même temps. Cela permet de passer en temps réel, collaborer de manière fluide et efficace. FIGMA possède également une interface intuitive facile à utiliser pour les débutants mais suffisamment puissante pour les utilisateurs avancés Ses composants de conception et ses styles réutilisables aident à organiser les projets et à gagner du temps à long terme. De plus, le FICMA est accessible depuis n'importe quel appareil connecté à Internet Vous pouvez donc travailler sur votre design où que vous soyez , mais le FIMA n'est pas sans inconvénients Comme il repose sur une connexion Internet constante, cela peut être problématique si vous travaillez dans une zone où la connectivité est faible. Bien que FICMA propose un plan gratuit, certaines de ses fonctionnalités les plus avancées sont bloquées par un abonnement payant, ce qui peut être une limite pour équipes similaires ou des concepteurs individuels Si nature basée sur le cloud de Figma est un point fort, cela peut également être un inconvénient si vous préférez travailler ou voler ou si vous avez besoin de plus de contrôle sur l' endroit où vos fichiers sont stockés Cependant, Adobe XD est une alternative à FIGMA, offrant ses propres forces et faiblesses Dans le cadre de ces leçons, nous utiliserons le FGMA pour guider notre parcours d'apprentissage En comprenant les avantages et les inconvénients, vous pouvez prendre une décision éclairée quant à l'outil qui répond le mieux à vos besoins. Passons maintenant à l'action et commençons à explorer ce que la FICMA peut faire pour nous 6. Créer un compte Figma: Bonjour, tout le monde. Il est temps de créer un compte Figma Si vous avez déjà un compte Figma, vous pouvez sauter cette leçon Si vous ne vous contentez pas d'aller sur Google ou de cliquer sur le lien de la section Ressources. Si vous allez sur Google, recherchez Figma, alors vous verrez ce type de résultat, il vous suffit de cliquer sur le premier résultat Je suis maintenant sur la page d'accueil de Figma. Si vous avez déjà un compte, vous pouvez cliquer sur Se connecter. Sinon, cliquez sur ce bouton, commencez gratuitement et ici, cliquez sur Continuer avec Google pour vous inscrire avec votre compte Gmail. OK. Maintenant, je vais cliquer sur mon compte Gmail, puis sur. Poursuivre. OK. Maintenant, je viens inscrire et nous avons quelques informations à remplir. Tout d'abord, nous devons ajouter notre nom Je vais donc ajouter le mien, puis cliquer sur Continuer. Ensuite, je dois sélectionner Quel type de travail faites-vous ? Ici, je vais sélectionner le design puis cliquer sur Continuer. Ensuite, il est dit : « Faites en sorte que l'une de ces descriptions décrive votre travail ». Ici, je vais sélectionner une réponse libre et vous la sélectionnez en fonction de votre position, puis je clique sur Continuer. Ensuite, nous avons une autre question : avec qui collaborez-vous habituellement ? Ici, je vais sélectionner comme personne, juste moi et cliquer sur Continuer, puis je ne veux inviter personne. Je vais sauter cette partie et ici, je vais en sélectionner une autre, puis cliquer sur Continuer. Ici, avez-vous déjà utilisé un produit IgM, je l'ajouterai plusieurs fois Si vous ne connaissez pas WIC MA, cliquez simplement sur Non, puis sur Continuer Ensuite, je sélectionnerai ce package de démarrage. Dans les prochaines leçons, j'expliquerai les avantages de l' abonnement payant à Figma Cependant, nous pouvons suivre toutes ces leçons avec le forfait gratuit. Je clique sur Continuer et ici, je vais cliquer sur Eskepo. Voici le tableau de bord de Figma Tous nos projets seront chargés ici. premier temps, créons un nouveau fichier Figma. Pour ce faire, je clique sur ce nouveau fichier de design OK, voici l'interface Figma. Tout d'abord, je vais renommer ce fichier Figma. Renommons-le comme mon premier projet. Entrez. Dans la leçon suivante, familiarisons-nous avec tous ces panneaux et essayons de créer notre premier cadre ou notre premier dessin. S dans le suivant 7. Qu'est-ce que Figma UI3: Bonjour, tout le monde. Figma a présenté sa nouvelle arborescence d'interface utilisateur Familiarisons-nous avec Figma UI two et Figma UI tree. Donc, dans un premier temps, créons un nouveau design. Pour ce faire, je clique sur ce bouton bleu puis sur le fichier de conception. OK. Voici un aperçu de l'éditeur UI two. Si vous voyez cet éditeur, vous n'avez peut-être pas accès à la troisième interface utilisateur, car l'interface utilisateur trois n'est réservée qu'aux personnes figurant sur leur liste d'attente. Si vous cliquez sur ce bouton d'aide et de ressources, vous pouvez voir ce lien, en savoir plus sur UI Three plus AIX et ici, vous pouvez voir plus de détails Cependant, si vous en avez accordé trois, l'interface utilisateur ressemblera à ceci. Je vais d'abord sur le Figma et créons un nouveau fichier. Il suffit de cliquer sur ce nouveau design ici. Je vais ressembler à ceci et dans la prochaine leçon, nous passerons en revue les éléments l'éditeur Figma avec les deux interfaces utilisateur Si vous avez déjà cet aperçu et que vous souhaitez passer à l' ancien aperçu de l'interface utilisateur 2, vous pouvez cliquer sur cette aide et ces ressources, puis cliquer dessus pour revenir à l'interface utilisateur précédente. Et vous pouvez cliquer ici et cliquer sur Utiliser une nouvelle interface utilisateur pour passer à la troisième interface utilisateur. prochaines leçons, vous devrez suivre les deux leçons de l' interface utilisateur Figma et ensuite, je vous montrerai comment obtenir interface utilisateur trois même si vous n' êtes pas sélectionné Donc, si vous n'êtes pas familier avec FIGMA et si vous avez UI Preview, vous devrez cliquer ici et cliquer sur Retourner à l'interface utilisateur précédente, terminer les prochaines leçons 8. Tutoriel de Figma UI2: Leçon précédente, nous avons créé notre compte Figma et maintenant je suis sur le tableau de bord Figma. Pour accéder au tableau de bord Figma, vous pouvez lier figma.com et Voici le premier projet que nous avons créé dans notre dernière leçon. Familiarisons-nous avec outil de conception Figma et découvrons quels types d'articles ou de fonctionnalités nous pouvons utiliser sur Figma Pour cela, je vais notre premier projet, double-cliquez dessus. OK, maintenant je suis sur notre projet Figma. Et dans ce domaine, nous l'avons appelé canvas. Voici la zone que nous utilisons pour concevoir notre site Web et dans cette barre noire supérieure, nous pouvons trouver des éléments ou des outils que nous pouvons utiliser. Ici, nous avons des cadres. Les cadres sont les couches utilisées pour concevoir notre site Web. premier temps, il suffit de créer un cadre, cliquer sur le cadre et de cliquer sur notre toile Dans un premier temps, il suffit de créer un cadre, de cliquer sur le cadre et de cliquer sur notre toile pour voir ce type de cadre. Ici, nous pouvons renommer notre cadre pour ce faire, cliquer dessus ou double-cliquer sur le nom du cadre et le renommer comme mon premier Ensuite, dans notre barre latérale gauche, nous pouvons voir un grand nombre de nos couches. Actuellement, nous n'avons qu'un cadre et dans notre barre latérale droite, nous avons les propriétés de ce cadre. Par exemple, si nous voulons modifier la taille de ce cadre, nous avons la largeur et la hauteur, alors changeons la largeur à 1 400 et appuyons sur Entrée Ensuite, changeons la hauteur en 700. OK. Maintenant, j'appuie sur la commande et sur la molette de la souris pour zoomer et dézoomer sur le cadre. Voici donc le premier cadre. R, nous pouvons créer autant de cadres sur cette toile. J'appuierai sur Cramand et défilement vers le haut pour minimiser notre canevas Ensuite, je clique également sur ce cadre. Après avoir cliqué sur le cadre, je peux voir sur notre barre latérale droite l'option de cadre. Ce sont donc des cadres prédéfinis. Par exemple, dans ce cas, nous allons créer un design de site Web pour Desktop. Cliquons sur ce bureau et nous avons ici des tailles de châssis gratuites, malheureusement, des tailles cadre prédéfinies pour le bureau Je clique sur ce bureau. Et ici, nous avons le cadre de la taille du bureau, la largeur sera de 1 440 et la hauteur que nous pouvons ajuster en fonction de la hauteur du site Web Renommons-le comme mon deuxième cadre et appuyons sur Entrée. Maintenant, je clique également sur le cadre et voyons voir que nous allons créer une version mobile du site Web Pour ce faire, je clique sur téléphone et ici, nous avons les tailles de téléphone. Je vais sélectionner les iPhone 40 et 50 pro et voici la taille du cadre de l'iPhone. Appuyons sur Commande ou Contrôle sous Windows et faisons défiler la page vers le haut jusqu'à Zumi, un peu comme ceci Voici comment créer des cadres. De plus, lorsque nous cliquons sur le cadre sur notre barre latérale droite, nous aurons les options que nous pouvons utiliser sur notre cadre. Par exemple, si nous voulons changer la couleur du champ, nous pouvons cliquer sur cette couleur de champ et la modifier à notre guise. D'accord, je vais appuyer sur Ctrl set pour régler les commandes pour annuler la modification. OK. Maintenant, vous connaissez Earl et puis nous avons un outil de formes. Dans cet outil de forme, nous avons différents types de formes, cliquez sur l' outil de forme ou cliquez sur cette petite icône en bas et cliquez sur Red Wrangle. Ensuite, si nous arrivons à ce cadre et que nous cliquons dessus, nous créerons ce type de rectangle. Dans notre option de mise en page ou entonnoir à couches, nous pouvons voir le cadre et à l'intérieur du cadre, nous avons la forme d'un rectangle Pour l'instant, je vais supprimer ce premier cadre et cadre mobile et ce sera plus facile à comprendre. Maintenant, je clique sur ce rectangle et ici, nous pouvons changer la couleur du champ. Modifions-le comme ça. Mettons-le en couleur verte. OK. Maintenant, je peux modifier la taille comme je le souhaite. Faisons-en 150 par 150. Cliquez simplement sur le W et appuyez sur 150. Cliquez ensuite sur le capuchon pour accéder aux valeurs de hauteur. Passons à 160. OK. Maintenant, si nous passons aux formes, nous pouvons également créer des lignes comme celle-ci. Si nous voulons créer, créons une ligne comme celle-ci. Si nous voulons créer une ligne exactement horizontale, il suffit de se reposer sur Shift et sa rotation ou son angle seront nuls. Et ici, on peut aussi changer l'angle comme ça. OK. Maintenant, dans Etroke, nous pouvons changer la couleur du trait E et augmenter le Il s'agit d'un outil de conception et nous pouvons faire n'importe quel type de conception avec cet outil et créer un superbe design de site Web. De plus, nous avons des flèches en ellipse, nous pouvons créer ces ellipses comme ceci Changeons la couleur de remplissage pour changer cette couleur verte. OK, surlignez l d'entre eux, puis nous pourrons modifier l'alignement. Dans ce cas, si nous cliquons sur Aligner le centre vertical, l sera un centre aligné. De plus, si nous cliquons sur cette petite icône en forme de flèche et que nous cliquons sur distribuer à l' horizontale, cela ne s'est pas produit pour le moment , mais nous allons créer ce cercle ici Appuyons ensuite sur la distribution horizontale du rythme. Allez, ça ne marche pas. Pour l'instant, il suffit de supprimer cette ligne, d'appuyer sur Alt cliquer avec le bouton droit de la souris et de faire glisser le pointeur comme ceci pour dupliquer ce rectangle de plage, puis de cliquer sur mTOL, cliquer sur l'outil M et de le surligner Cliquez ensuite sur Répartir l' espacement horizontal I et Earl sera aligné de manière égale Ensuite, nous pouvons créer ou nous pouvons créer des images. Pour ajouter des images, nous pouvons cliquer sur cet outil de forme d'icône et cliquer sur l'image de cet endroit, puis je vais aller dans le dossier défini, puis cliquer sur Ouvrir puis nous pouvons cliquer sur notre cadre comme ceci, puis nous pouvons modifier la taille de ce cadre. Pour le changer sans endommager l'image, si nous le changeons simplement, cela endommagera la taille ou elle ne s'affichera pas correctement. Pour l'éviter, nous pouvons appuyer sur Shift et l'ajuster comme ceci. D'accord, nous avons maintenant l'outil stylo, le stylo et l'outil crayon. À l'aide de l'outil stylo, nous pouvons créer des formes comme celle-ci et cliquer sur OK. Ensuite, nous avons T ou texte, cliquez sur le texte et cliquez comme ça. Faisons en sorte que le texte soit Hello, so hello world. Ensuite, je clique sur le cadre puis sur le texte. Ensuite, nous avons les propriétés de ce texte. Ici, nous avons les polices Google. Faisons la police à quatre épingles. La famille de polices sera composée de quatre épingles et la taille sera semi-grasse. Je vais également augmenter la taille de police Graissons comme 60 présentateurs. Voici la police et dans la couleur du champ, nous pouvons changer la couleur de la police Il y a également beaucoup de propriétés avec lesquelles jouer. Il suffit de contourner le problème pour l'instant, ajoutons l'effet à ce texte pour que je clique sur l'effet et que je clique sur l'ombre projetée, et ici, faisons 20 X comme zéro et Y comme zéro. Augmentons ensuite l' opacité à 80 % et si nous le voulons, nous pouvons changer la couleur de fond comme ceci Il existe de nombreuses propriétés avec lesquelles jouer. C'est ainsi que l'on crée du texte. Nous avons également le plugin et la bibliothèque de composants Figma et dans les prochaines leçons, nous les apprendrons tous. De plus, lorsque nous sélectionnons des éléments, nous aurons ce type de propriétés pour créer composants et sélectionner des couches de machines, etc. Dans les leçons à venir, nous allons tout apprendre à ce sujet pour le moment Je vais supprimer cette illustration au crayon et supprimer celle-ci, et augmentons la taille de l'image au maximum comme ceci. Nous avons également deux rectangles. Sélectionnez-le, appuyez sur Shift et sélectionnez le deuxième rectangle. De cette façon, nous pouvons sélectionner ces deux rectangles et appuyer sur Supprimer pour les supprimer. OK. Maintenant, ici, nous pouvons partager ce cadre ou partager ensemble de ce projet avec les membres de notre équipe Cliquez sur ce lien pour que tout le monde puisse accéder à ce projet Figma avec ce lien Ensuite, nous pourrons vérifier le vrai en cliquant sur ce bouton présent. Cliquons dessus, et voici notre site web. Voici donc notre cadre qui ressemblera à la vraie vue. En outre, il existe de nombreuses fonctionnalités. Par exemple, si nous sélectionnons le cadre ou l' image sur le côté droit, nous avons une section prototype. Cette section de prototype ou cet onglet de prototype est destiné à créer une interaction avec notre site Web. Par exemple, si nous cliquons sur un bouton, notre site Web ou notre page Web redirigera vers une autre page l'interaction que nous pouvons effectuer avec l'onglet Prototype. Sur le côté gauche, nous aurons l'onglet Assert dans l'onglet Assert. Nous pouvons obtenir les modèles préfabriqués. Nous pouvons créer notre propre design ou nos propres éléments de design et les utiliser via l'assistAB Nous pouvons également créer plus de pages. La page actuelle est la première page, faisons en sorte qu'elle ressemble à la page d'accueil et si nous cliquons sur cette icône en forme de plus, nous pouvons créer une nouvelle page comme celle-ci. Ce sont les éléments de base et nous avons plus d'outils à explorer, plus de fonctionnalités à explorer. Faisons-les pendant que nous essayons d' apprendre à concevoir l'interface utilisateur de notre site Web. 9. Apprendre la mise en page de Figma: Bonjour, tout le monde. L'alignement est crucial dans le design UX car il crée un sentiment d'ordre et d'équilibre sur la page. Lorsque les éléments sont correctement alignés, ils guident facilement les utilisateurs dans le contenu, rendant ainsi plus facile à lire qu'à comprendre. Un bon alignement aide les utilisateurs à se concentrer sur la partie importante de la conception et contribue à réduire la confusion, ce qui traduit par une meilleure expérience utilisateur globale. Cela donne également au site Web un aspect plus professionnel et raffiné, ce qui renforce la confiance du public. N'hésitez pas à analyser attentivement les prochains modèles. Tous ces modèles ont un alignement correct et un alignement mal conçu. Vérifiez simplement la différence entre ces deux versions. Lorsque nous créons des designs personnalisés, alignement des objets est un peu confus et un peu délicat. Mais dans Figma, nous avons une grille de mise en page. Voyons donc comment utiliser la grille de mise en page pour aligner notre design. Je suis sur le tableau de bord Figma, puis je clique sur mon premier projet Nous n'avons plus besoin de mon deuxième cadre ni d'aucun autre cadre. Je nettoie simplement le canevas, puis je clique sur le cadre. Créons un cadre pour la version de bureau. Cliquez sur le cadre ici, cliquez sur le bureau, puis créons le cadre de la version tablette. Cliquez sur le cadre, agrandissez la tablette et je sélectionnerai la taille de la tablette comme iPad Pro 11 pouces. OK. Il va maintenant falloir créer une version mobile. Cliquez sur téléphone et sélectionnons les iPhone 14 et 15 pro. C'est bon. Nous avons maintenant trois grues Ajoutons d'abord une grille de mise en page à cette version de bureau. Lorsque je clique sur le cadre de la version de bureau, le côté droit, je peux voir les propriétés de ce cadre. Ici, nous avons une grille de mise en page. Il me suffit donc de cliquer sur cette icône en forme de plus. Lorsque je clique sur cette icône plus, augmentons la taille du dessin comme suit. OK. OK. Lorsque je postule ou que j'ajoute une grille de mise en page à ce cadre, il ressemblera à ceci. Maintenant, je clique sur la grille de mise en page que nous avons ajoutée pour obtenir le réglage de la grille de mise en page. Actuellement, notre type de grille est grille, mais nous avons besoin d'un type de colonne, grille de mise en page car nous alignons nos éléments de gauche à droite. Lorsque nous l'alignons horizontalement de cette façon, nous devons obtenir alignement correct à gauche et à droite, alignement entre les éléments. Ici, nous devons ajouter le nombre de colonnes. Je vais ajouter le nombre de colonnes comme péage. Nous avons maintenant une colonne de grille de péage, et je vais garder la même couleur. Ensuite, le texte sera étiré et ici, nous devons ajouter une marge entre la gauche et la droite. La marge signifie l'espace entre le côté gauche de notre élément. Par exemple, si nous avons dit marge 140, cette grille s'ajustera en nous donnant une marge ou en nous donnant un espace de gauche au premier élément et de droite au dernier élément J'espère donc que tu le comprends. Alors maintenant, lorsque vous ajoutez des objets, nous pouvons les ajouter correctement en cochant cette colonne. Ensuite, il faudra ajouter une gouttière. Dans la version de bureau, ajoutons 20 gouttières. Si nous changeons cette gouttière à dix, l'espace sera mince En fait, ajoutons-le 15, comme ceci. Maintenant, lorsque nous ajoutons des éléments comme celui-ci, ajoutons le rectangle et dupliquons-le en appuyant sur commande sur Mac. Ainsi, lorsque nous plaçons ces éléments, nous pouvons simplement augmenter la taille du cadre et vérifier l'alignement comme ceci. Nous pouvons parfaitement l'aligner comme ça. De même, lorsque je surligne ou lorsque je sélectionne un objet ou un élément, appuyez dessus et survolez un autre élément. Nous pouvons vérifier l'espace I entre ces deux éléments. Actuellement 815 et ajoutons les deux comme ceci. Parfait. C'est l'avantage de l'utilisation de la mise en page en grille. Et si nous voulons vérifier le design sans disposition en grille, nous pouvons cliquer sur le cadre et cliquer sur cette icône I et la grille s'éteindra. OK. Ajoutons maintenant une grille à cette version pour tablette. Pour ce faire, cliquez sur le cadre de la taille de la tablette et cliquez sur GritayoutPlus, je peux ensuite le changer de version en Ensuite, sur tablette, j'utiliserai sept comme nombre de colonnes. La marge sera alors de 60. Gutter aura alors dix ans. En fait, ajouter le nombre de colonnes six est mieux. Ensuite, comme sur le bureau, nous pouvons utiliser cette grille pour vérifier l'alignement de cette manière. C'est le Bene Pie. OK. Passons maintenant au téléphone. Cliquons sur la grille de mise en page et cliquons ici, puis changeons le type de grille en colonne, et ici, j' ajouterai la synchronisation du nombre de grilles, puis Gutter aura dix ans puis la marge sera de 20 En fait, ajoutons une marge de 12 comme ceci. Nous pouvons maintenant ajouter un triangle comme celui-ci selon cette grille. C'est l'avantage d' avoir une disposition en grille. Dans la prochaine vidéo, nous parlerons de la communauté Figma. 10. Qu'est-ce que la communauté Figma: Bonjour, tout le monde. Saviez-vous que Figma possède une communauté en ligne La communauté en ligne Figma est une ressource puissante qui peut vous aider à apprendre, grandir et à entrer en contact avec d'autres designers C'est comme une grande place de marché en ligne. Dans la communauté Figma, les designers peuvent partager leurs idées et leurs ressources C'est un endroit où vous pouvez trouver des fichiers de conception, des plugins et même des tutoriels gratuits et faux . Dans les prochaines leçons, nous parlerons spécifiquement des fichiers Figma Dans cette leçon, plongeons-nous dans la communauté Figma et découvrons quels types de matériaux de design nous pouvons trouver Pour ce faire, je vais sur la communauté Figma. Je vais sur Google et je fais une recherche sur Figma Community. Au premier résultat, nous avons l'URL du site Web de la communauté Figma slash, puis je clique dessus et maintenant je suis sur Il y a beaucoup de choses à découvrir sur cette communauté Figma Les designers de Figma, comme vous ajoutent des ressources à la communauté FIGMA tous Donc, pour l'instant, recherchons quelques conceptions Web. Je vais donc simplement rechercher un présentateur d'idées de conception Web. Ici, nous avons des idées de conception Web. Donc, ici, vous avez un fichier et un modèle, des plug-ins, des widgets et des créateurs. Pour ce résultat, nous avons des fichiers, des modèles et des plugins. Nous allons donc trier les fichiers et les modèles, et nous avons ici une idée, un design Web, du bois. Alors vérifions-le. Et ici, nous avons des fichiers thématiques de commerce électronique. Je vais l'ouvrir aussi, et nous avons ici une interface utilisateur, donc c'est une belle interface utilisateur. Il suffit donc de cliquer dessus et voyons ce que nous pouvons trouver ici. Nous avons la description. Comme nous en avons le design. Augmentons-le et en cliquant ici, nous pouvons changer de page. Passons au design, et voici le design. Voici le design du site Web de Nike. Je pense que c'est un design d'inspiration, donc c'est un design épuré. Donc, en vérifiant ces éléments, nous pouvons concevoir des idées et passons à la conception Web d'Idea. Ici, nous avons une conception Web simple et c'est juste une image avec du texte et passons à la suivante. Ici, nous avons un modèle de commerce électronique ou un thème de commerce électronique. Jetons un coup d'œil à ce site web. Ici, nous avons un design pour un site Web de commerce électronique. Si vous créez une marque de commerce électronique ou un site Web de commerce électronique, vous pouvez simplement vérifier que ces modèles s' inspirent du design ou obtenir partie du design à partir de ce fichier Figma Pour ce faire, il suffit de cliquer sur Ouvrir dans Figma puis ce fichier s'ouvrira dans notre tableau de bord Figma, et sur les pages, allons sur webvlpa où nous avons Donc, pour l'instant, examinons uniquement ces éléments et à la fin de cette section Figma, vous pourrez concevoir ce type de design Figma, l'interface utilisateur Figma Nous allons vérifier l'alpha mobile et nous avons ici la version mobile. Ne vous inquiétez pas si vous pensez ne pas savoir comment créer ces designs. En quelques leçons, vous serez capable de créer ce type de design et vous apprendrez comment le faire. Maintenant, lorsque nous créons des designs ou lorsque nous créons notre site Web, nous devons utiliser des icônes. Si nous effectuons une recherche sur les icônes Figma et cliquons sur PrsIconoPres Enter, nous pourrons obtenir des bibliothèques d' Par exemple, nous avons un ensemble d'icônes météorologiques et effectuons une recherche comme une icône commerciale. Nous avons ici des icônes de secteurs d'activité. Je vais simplement cliquer sur et il s'agit d'un fichier de conception, et voici le jeu d'icônes de l'entreprise. Nous pouvons donc simplement vérifier ces icônes, et si nous le voulons, allons vérifier toutes les icônes vectorielles. OK, voici la bibliothèque d'icônes, et si vous souhaitez ajouter ce type d'icônes à vos projets, vous pouvez l'ouvrir dans Figma et obtenir ces icônes Mais à l'avenir, je vais vous montrer comment procéder. Et aussi, j'ai un profil communautaire Figma. Permettez-moi de le partager avec Okay, voici mon profil sur la communauté Figma Voyons ce BNTSGameMP et il s'agit modèle d'interface utilisateur d'application que je Essayons de l'ouvrir et voyons quel point le Figma est puissant Je clique sur l'ouverture de Figma. En fait, cet UIKit est vraiment basique et quand j'ai créé cet UIK, je ne savais pas grand-chose Dans la prochaine leçon, nous utiliserons la communauté Figma et d'autres choses que nous avons apprises jusqu'à présent pour créer des sections sur les héros et nous familiariser avec le design de l'interface utilisateur de Figma 11. Design de la section 1ère héroïne avec Figma UI2: Essayons de créer notre premier design Web. Vérifiez donc l'URL ou le fichier de communauté dans la description ou dans la section des ressources, vous verrez l'URL. Lorsque vous cliquez sur Se connecter, vous accédez à ce profil de la communauté Figma Nous allons donc concevoir cette section consacrée aux deux héros. Cela nous aidera donc à mieux comprendre l'outil Figma et les éléments de base lors de la création de ces deux cidres ou de ces deux héros Nous avons déjà entendu parler de la communauté Figma. Maintenant, il suffit de cliquer sur le bouton Ouvrir dans Figma pour ouvrir la vue modifiable OK. Ici, nous avons des sections sur les héros. Essayons d' abord de créer celle-ci. Je vais faire un zoom arrière et disons-le comme ça et zoomons . Bien , tout d'abord, nous devons créer ce cadre. Si je clique sur cet exemple de héros, voici le cadre, essayons de le créer. Je vais sur cette icône de cadre , puis nous pouvons sélectionner le type d'appareil. Il s'agit d'une section de héros de type ordinateur de bureau. Je clique sur le bureau et je sélectionne la taille comme bureau, d' accord, bien Maintenant, je vais le renommer en 01. OK. Maintenant, la hauteur est de 1024. Voyons la hauteur de celui-ci. C'est 700. Modifions cette hauteur à 700. Ardosez le cadre et définissez la taille sur 700, puis nous devons ajouter largeur de mise en page, car sans largeur de mise en page, nous ne pouvons pas aligner correctement notre design. ce faire, je clique sur la grille de mise en page et je clique ici, puis je change la grille de mise en page en colonnes, et le nombre de colonnes sera de deux L et la marge de 140. La gouttière est de 20. OK. De plus, FICMA dispose d'une fonctionnalité permettant de sauvegarder notre Istis. Par exemple, nous voulons enregistrer cette disposition en grille de colonnes Nous pouvons cliquer sur cette icône Estes et nous avons ici l'icône plus. Il suffit de cliquer dessus et ici, nous pouvons ajouter le nom. Je vais ajouter à la grille d'appels, puis je clique sur le style créatif. Maintenant, si nous voulons ajouter la disposition de la grille des colonnes de péage à notre prochain cadre, nous pouvons simplement sélectionner la sauvegarde cette fois. Cliquons sur cette disposition en grille et créons une nouvelle disposition de la taille d'un bureau. Comme ça, c'est un cadre, bureau ou un cadre, puis si je vais dans le git de mise en page et que je clique sur cette icône, j'aurai ce style de mise en page grain comme celui-ci, je pourrai l'ajouter facilement C'est bon. Maintenant, je vais le supprimer. l'étape suivante, nous devons ajouter cette image d'arrière-plan pour l'ajouter d'abord Je vais créer un rectangle et faire en sorte que ce rectangle corresponde à la taille de notre cadre, comme ceci. Cliquez maintenant sur cet outil de rectangle ou de forme, et nous avons ici l'option Placer une image. Il suffit de cliquer dessus, et maintenant passons à notre image. C'est donc inscrit dans le document. Voici l'image. Je clique simplement dessus et vous pouvez obtenir ce fichier image la section des ressources et je clique sur Ouvrir. Maintenant je clique comme ça. OK, la première partie est terminée. Nous devons maintenant superposer de la couleur pour ajouter de la couleur de superposition, sélectionner cette image et ici, nous avons le remplissage, il suffit de cliquer sur l'icône plus et nous avons maintenant une couche de couleur Ici, je clique sur notre couleur foncée et là, nous avons la transparence. Je vais faire en sorte que la transparence soit de 80 %. OK, ça a l'air bien, mais on peut faire comme si 70 70 c'est mieux. Maintenant que l'image est ajoutée, et maintenant nous devons ajouter ce logo et la section Mus pour ce faire , créons d' abord un texte. Cliquez sur ce texte et cliquez ici. Ensuite, je changerai ce texte en logo. Découvrons les propriétés telles que la taille de police et les éléments de police comme ceux de ce logo. Pour ce faire, sur Mac, j'appuie sur commande et je clique sur le texte de ce logo lorsque je clique sur Commande Cela nous aide directement à sélectionner l'article que nous voulons. Dans Windows, cela devrait être le contrôle. OK. Maintenant, sur le côté gauche, nous avons les détails. La police est ferroviaire , le poids de police est semi-vol et la taille de police est de 35 Ajoutons donc ces détails. Je clique sur notre police et je change cette police en rail La largeur de police sera un demi-bol et la taille de police est de 35 Sympa. Je vais augmenter ce design un peu, afin de nous aider à vérifier facilement le design de cette façon. Maintenant, je déplace ce texte ici. Passons ensuite à notre design original et sélectionnons le texte en appuyant sur commande ou sous Windows, il doit être contrôlé. J'appuie donc sur Alt et je vérifie la taille entre la barre supérieure et le côté gauche. Les tailles ne sont pas correctes, mais dans notre design original, prenons la taille 14020 OK, ça a l'air bien. Maintenant, ce que nous devons créer, c'est ce menu pour le faire, cliquez à nouveau sur ce texte ou nous pouvons simplement dupliquer ce texte en appuyant sur tout. Appuyez sur tout, cliquez sur la souris et faites-le glisser comme ceci. OK. Il va maintenant falloir trouver les détails du texte. Cliquez sur ce texte et la couleur du texte est blanche, la police du texte est semibol ouvert 18 et la hauteur de la ligne est 31 Ajoutons ces informations. Cliquez simplement sur notre texte et le texte est ouvert 18 demi-gras et la hauteur de la ligne 31 31 Tout va bien. Maintenant, changeons ce texte d'accueil et le texte est en majuscule pour obtenir ce gaz supérieur Je clique ici et je change les majuscules en majuscules comme ceci. C'est bon. Je vous en apprendrai beaucoup sur l'outil Figma en créant ce design Maintenant, j'appuie dessus et duplique comme ça et dupliquons-le encore une, deux, trois, quatre, cinq, trois fois de plus. 12, trois. C'est bon. Maintenant, changeons ces prises de vue. Next parle de nous. OK. La prochaine est de savoir comment cela fonctionne comme ça. Ensuite, ce sont nos entraîneurs. OK. Maintenant, la prochaine étape est le contact. Tout va bien. Maintenant, ce que nous devons faire, c'est placer ce contact dans le coin droit. Voici notre disposition en grille, et nous devons maintenant trouver l'endroit où cette icône du menu d'accueil doit rester. D'après cela, c'est ici et ajoutons-le ici. Pour ce faire, je vais simplement le faire glisser et le placer comme ça et mettre tout ce menu comme ça. Maintenant, avant de corriger les alignements, je vais cliquer sur cette page d'accueil et la changer de couleur en rouge Découvrons donc le code couleur rouge. Cliquez simplement sur cette page d'accueil, et nous avons ici un code couleur rouge. J'essaie simplement de copier en appuyant sur la commande C, et arrivons ici, surlignons cette prise, B appuyant sur la commande A pour la surligner, passer à la couleur du champ et appuyer sur la commande V jusqu'à la couleur rouge comme ceci. OK. Il est maintenant temps de corriger l'alignement. Ce texte se trouve au milieu de cette barre. Mettons cette maison au milieu de cette barre comme ça. Maintenant, je vais appuyer sur Shift et sélectionner cinq éléments de menu comme celui-ci. Ensuite, ici, nous avons des outils d'alignement, cliquez sur aligner le centre vertical, et ici, nous pouvons cliquer sur distribuer le phasage horizontal I. C'est bon. Maintenant, espacons ou remplissons J entre le haut et l'élément de menu, ce devrait être ses deux t. Encore une fois, ce devrait être ses deux t. Encore une fois, surlignez ceux qui surlignent OselTel de ces textes en appuyant sur at et maintenant j'appuie sur Alt et je clique sur la touche supérieure du clavier OK. Maintenant, ce que je peux faire, c'est faire en tant que groupe Pour le faire en tant que groupe, j'appuie sur la commande G, et maintenant cela devient un groupe. Si nous le voulons, nous pouvons renommer ce groupe en man Items. Et si nous élargissons le groupe, nous aurons des éléments de menu comme celui-ci, puis je sélectionnerai ce groupe , j' appuierai sur Shift, je cliquerai sur le logo, puis je cliquerai sur cet alignement au centre vertical comme ceci. Et maintenant, nous créons notre menu et notre logo. Il est maintenant temps de créer ce texte central. C'est très simple, commençons étape par étape. Tout d'abord, nous devons ajouter ce coaching en direct pour les plus performants Pour l'ajouter, j'appuie sur ce T et je clique ici. Ensuite, j'ajouterai du texte comme celui-ci et je cliquerai n'importe où sur le canevas, car si nous n' ajoutons aucun texte et que nous cliquons n'importe où sur le canevas, le champ de texte disparaîtra. OK, maintenant je passe à notre design original et je clique sur Command C two. Ensuite, je clique sur ce texte et maintenant j'appuie sur Commande, A, et sur la commande C deux, copie ce texte et je viens ici, appuie sur Commande, A, et Commande C deux, copie ce texte comme ça. Encore une fois, je vais le dupliquer car avant de créer le design, créons du texte qui sera facile. Donc, pour dupliquer, j'appuie sur tout et je le duplique comme ça, comme ça. OK. Nous avons maintenant trois sections. R, dupliquons cela à nouveau pour le texte du bouton. Maintenant, nous avons cet élément d'en-tête, donc je le surligne et je rythme ce texte. Désolé, allons-le sans polices sans style de police, car nous allons essayer d' ajouter du textile de police à notre manière, comme ceci OK. Sympa. Maintenant, ajoutons le fontistyle et corrigeons l'alignement abord, examinons le style de police de notre premier paragraphe ou sous-titre, cliquez sur le sous-titre et nous avons le texte tel qu'il s'ouvre et texte tel qu'il s'ouvre Maintenant, cliquez ici, ouvre le symbole. J'y suis déjà. Et maintenant, examinons le design de ce titre Sélectionnez le titre. J'appuie sur commande et je clique comme ça, puis c'est Railway Bolt, 60 Mettons ce chemin de fer en gras, 69 et la police de caractères tient compte des majuscules et minuscules. OK. Il est maintenant temps de créer cette conception de police, appuyer sur Commande et de latter le texte, puis de vérifier que le texte s'ouvre sans 20, cliquer ici et d'ouvrir sans 20 normal, alors le cas est, encore une fois, que nous avons le sens des titres C'est bon. Avant de créer le bouton, corrigeons l'alignement et améliorons l'alignement Vérifions l'alignement entre ces deux éléments, il est 15 et nous avons l'alignement tactile 15. Disons-le comme ça, puis appuyons sur et par-dessus qui précède, nous pouvons le définir comme ceci. Comme nous avons un problème, car la ligne est un espace non un espace, la hauteur de la ligne doit être supérieure à 31. La hauteur de la ligne est automatique. Faisons en sorte que la hauteur de la ligne soit automatique. Cliquez simplement sur le texte et cliquez sur le champ de texte à hauteur de ligne dans Présentation automatique. OK. Maintenant c'est 15 et ça fait aussi 15 et oui, ça a l'air bien Maintenant, j'appuie sur Shift sélectionne les trois éléments et je clique sur ce centre d'alignement horizontal et sur cet alignement de texte défini comme centre. OK. Maintenant, il est parfaitement centré, et maintenant nous devons définir ce texte de manière à ce qu'il soit aligné à droite et à gauche. En fait, il est déjà aligné, et ensuite nous devons le placer au centre pour le faire. Nous pouvons simplement l'ajuster comme ça avec ce guide d'alignement de couleur rouge, nous pouvons le placer au milieu comme ça. OK. Je pense que ce n'est pas dans le Ah, ce sera au milieu une fois que nous aurons créé ce bouton de demande de consultation gratuite pour le créer, je clique simplement sur Nouveau rectangle et je clique comme ça. Augmentons ensuite la taille du rectangle comme suit et mettons ce texte à l'intérieur du rectangle. OK, maintenant, notre texte est derrière et le rectangle est au-dessus. Donc, pour le réparer avant de le réparer, changeons la couleur du rectangle. Pour changer la couleur du rectangle, nous pouvons cliquer sur le rectangle et voici la couleur du champ. Ensuite, nous pouvons cliquer sur cette petite icône et cliquer sur cette couleur de conception originale et obtenir la couleur comme celle-ci. C'est bon. Je vais maintenant vérifier notre panneau latéral gauche et nous avons ici les détails de notre conception. Ici, nous avons ce rectangle. Renommons-le en bouton BG et voici maintenant le texte. Actuellement, le texte ne s' affiche pas pour le faire apparaître, nous pouvons simplement cliquer dessus et le faire apparaître comme ça. OK. Nous devons maintenant vérifier les tailles entre le rectangle ou le fond du bouton et le texte. Donc, avant de faire cela, découvrons la taille du rectangle. Il est 418 et 60 ans. Faisons en sorte que ce soit 420 et 60. OK. Maintenant, je vais augmenter ce design car il sera facilement visible si j' augmente le design comme ceci, puis je vais appuyer et ajuster le design comme ceci. Et si nous le voulons, nous pouvons cliquer sur cet alignement au milieu de ce texte et il s'alignera au milieu. Cependant, maintenant il est parfaitement aligné. Je vais maintenant sélectionner l'arrière-plan, appuyer sur Shift sélectionner ce texte et appuyer sur la commande G pour le regrouper. Ensuite, si je le souhaite, je peux le renommer en bouton OK. Maintenant, ce que je peux faire, c'est ce bouton comme celui-ci et vérifier l'espace entre le bouton et ce sous-module. Maintenant, surlignez ce groupe de boutons, appuyez dessus et cliquez sur ce sous-lien et cliquez sur la flèche vers le bas pour créer un espace entre ce bouton et le entre ce bouton OK. Maintenant, je surligne le comte de cette section, le bouton et le comte de ces éléments, je clique sur ce centre d'alignement, puis sur ce centre d'alignement horizontal. OK, maintenant il est parfaitement aligné, et maintenant je peux appuyer sur la commande G pour le regrouper Maintenant, si je change ce design comme celui-ci, change ce groupe comme celui-ci, je peux trouver le point central parfait et c'est parti. Nous avons le design. Maintenant, nous allons augmenter le design. C'est assez similaire. Peut-être que si nous augmentons un peu plus la couleur foncée de cette image, elle ressemblera à ce design, mais j'aime bien cette façon de voir. Passons à cette section consacrée aux héros. Et maintenant, cliquez sur cette icône pour supprimer cette disposition en grille et elle ressemblera à ceci. Ensuite, je vais cliquer sur cette section de héros et cliquer sur ce bouton présent et nous pourrons voir notre design sur ce mode de prévisualisation. Maintenant, nous créons notre propre design. C'est donc un magnifique slider, et j'espère que vous suivrez les premières étapes avec moi. Si vous avez le moindre doute ou le moindre problème, faites-le moi savoir, et maintenant il est temps de créer notre deuxième design C'est un peu délicat, mais on peut le faire. 12. Design de la 2ème section de héros avec Figma UI2: Bonjour, tout le monde. Il est maintenant temps de créer notre deuxième section consacrée aux héros. Commençons. Je suis maintenant sur mon tableau de bord Figma, et voici notre deuxième section consacrée aux héros premier temps, je vais cliquer sur le cadre, Dans un premier temps, je vais cliquer sur le cadre, et sur le côté droit, je peux sélectionner la taille du DextFrame Je vais sélectionner ce groupe de 1 440 avec cadre et ici, je vais le mettre comme ça et ensuite je pourrai le renommer en héros deux comme ça, puis ce que je peux faire c'est ajouter une mise en page automatique Désolé, ajoutez une mise en page en grille. Pour ce faire, je clique sur cet onglet et voici notre mise en page à appeler la disposition en grille Je clique juste dessus. Sympa. Maintenant, voyons voir, voyons ce que nous devons faire. Tout d'abord, nous devons créer une section de menu. En fait, avant de créer la section du menu, ajoutons l'image d'arrière-plan. Je dois donc d'abord connaître la taille de ce fond. C'est donc une largeur de 1 440 exel et une hauteur de 700. Créons donc un rectangle. Cliquez sur le rectangle, cliquez sur le canevas, cliquez sur le cadre, et amenons-le de ce côté comme ceci. OK, maintenant je dois ajouter la largeur 1 440 et la hauteur sera de 700 Sympa. Il ne nous reste plus qu' à ajouter cette image de fond. J'ai donc déjà créé cette image de fond. Vous pouvez le trouver dans la section des ressources, et après l'avoir téléchargé, nous devons cliquer ici et cliquer sur Placer l'image. Et voici l'image de fond. Il suffit de cliquer dessus et de cliquer sur Ouvrir. Ensuite, vous verrez l'image jointe avec le pointeur de ma souris. Je tape juste dessus ou je clique sur un rectangle comme celui-ci, d'accord, ça a l'air sympa. Il ne nous reste plus qu' à découvrir la couleur de ce fond et son opacité Pour ce faire, je clique sur cette image ou je la touche deux fois, et ici, nous avons l'image. Il suffit donc de sélectionner l' image et ici, nous pouvons voir la couleur blanche pleine avec 90 % d'opacité ou la visibilité est de 90 %, cliquez sur l'image et cliquez sur l'icône en forme de plus, et voici l'arrière-plan Alors changeons-le en 90 , puis cliquons ici et disons-le comme ça. OK. Sympa. Maintenant, nous créons simplement notre arrière-plan facilement. Ensuite, nous devons passer à ce texte. D'abord, je vais appuyer deux fois sur ce texte et appuyer sur la commande C pour le copier. Et dans votre cas, c'est peut-être Control C. Si vous utilisez Windows, je clique sur ce texte et je clique ici. Ensuite, j'appuie sur Command V ou Control V sur votre coque. Comme ça, alors ce que je peux faire c'est découvrir le type de police et la taille de police. La police est donc Georgia Regular et 45. Ne vous inquiétez pas si vous ne connaissez pas la police ou si vous en savez beaucoup plus sur la police. Dans les prochaines leçons, je vous montrerai tout ce que vous devez savoir sur fontin, UX et UI Cliquez ici et il semblerait que nous ayons déjà sélectionné cette police. Revoyons voir. Oui, c'est Georgia Regular 45. Et voici Georgia Regular 45. OK. Alors ce que nous devons faire c'est le mettre dans ce coin comme ça. Appuyez ensuite et vous verrez les lignes. Faisons en sorte que ce soit 20. Ensuite, nous devons créer cette section de menu. C'est donc Helvetica. Sa police est Helvetica, et la police normale 16. Créons-le donc. C'est facile, cliquez sur le texte et renommons ce texte en home Cliquez ensuite sur le texte et sélectionnez la police verticale. Ici, vous voyez que la taille est normale et que la taille de la police sera en fait la largeur de police est normale et la taille de police sera de 16. OK. Alors ce que nous devons faire, c'est le mettre comme ça pour le moment et dupliquons-le. Appuyez sur le bouton ancien et cliquez sur Souris, puis dupliquez-le. Donc, combien de fois voulons-nous le dupliquer ? Un, deux, trois, quatre, cinq. C'est cinq fois, donc une, deux, trois, quatre, cinq, c'est bien. Maintenant, je vais changer la police d'écriture. Je peux appuyer deux fois ici et appuyer sur Ctrl C pour copier et Ctrl V pour coller. Et faisons-le encore une fois. Cliquez comme ça. OK. Encore une fois, nous avons l'emplacement, collez-le comme ceci. En fait, lorsque nous le collons, il contient déjà le design, donc je vais taper. Ici, nous avons blob, puis avec tag ni. OK. Maintenant, ce que nous pouvons faire, c'est vérifier la taille intermédiaire. Pour le vérifier, il suffit de cliquer ici et d'appuyer sur tout comme ça. La taille d'Ibtwin est 25. Ajustons donc cela. Tout d'abord, je vais tous les sélectionner comme ceci. Cliquez ensuite ici, cliquez sur ligoté et cliquez comme ça. OK. Ensuite, je clique également ici et ici, nous pouvons définir le site bloqué à 25 comme ça. Le rythme entre les deux est de 25. Nous devons maintenant les mettre en majuscules. Comme je l'ai déjà fait, cliquez ici et au cas où nous pourrions cliquer sur les majuscules. Maintenant, encore une fois, nous devons tous les sélectionner, cliquer ici et cliquer sur Tied, puis sur 25 comme ça. OK. Maintenant, si nous vérifions cela, la maison est en gras. Trouvons-le donc ici. C'est avec cette audace. Mettons cela en gras, cliquez comme ceci, puis changeons le régulateur en gras. OK. Maintenant, je peux sélectionner tout cela en cliquant sur l'élément de menu ou en cliquant sur le texte et le texte, cliquant sur le texte tout en appuyant sur Shift comme ceci. Ensuite, j'appuie sur Commande G ou Contrôle G. Regroupez-le . OK, alors isolez les deux sections et faites-les comme ça. OK. Concentrons-nous sur la création de ces contacts, mais c'est très simple. Faisons-le. Cliquez sur la forme d'un rectangle et créez un rectangle comme celui-ci. OK. Ensuite, ajoutons ce coin ou réduisons le nombre de coins à 30. Sympa. Maintenant, je peux simplement cliquer ici et dupliquer le texte en appuyant comme ceci, puis je le place comme ça, mais nous devons le placer au-dessus de ce rectangle pour faire en sorte que le contacta prenne le contact sur notre panneau de gauche, puis le placer comme ça OK. Voyons maintenant ce que nous pouvons faire. Ici, nous avons la taille 176 et la hauteur 50. De plus, la couleur est le noir. Apportons ces modifications. Tout d'abord, la hauteur sera de 50 et la couleur sera le noir. La couleur du texte explique pourquoi. Sélectionnez ensuite ces deux objets et placez le texte au centre de cette façon. Voyons voir ce que nous avons fait pour le mieux. Ensuite, nous devons modifier le texte. En fait, c'est déjà sous forme d'informations de contact, nous avons déjà un texte de contact ici. En fait, nous n'avons pas besoin d' icônes de contact pour nous contacter dans les éléments de menu. Donc, dans la section originale sur les héros, je vais remplacer cette fiche de contact par À propos de nous. À propos de Tsk. Non, fais-le. Maintenant, faisons de même ici. Changeons ce contact à propos de nous. OK. Maintenant, ça a l'air bien. Maintenant, nous devons regrouper ce bouton sur une page de groupe, cliquer sur le texte et cliquer sur l'arrière-plan en appuyant sur Shift. Appuyez ensuite sur Commando Control G, la commande G sur Mac et sur Control G sous Windows. Mmm mm. Sympa. Maintenant, nous pouvons sélectionner toutes ces prises par quart de travail actuel, les sélectionner dans les groupes comme celui-ci, puis cliquer sur. Une ligne centrée verticalement. Ensuite, cliquez sur distribuer horizontalement, c'est appuyer sur OK. Notre menu est terminé. Et comme je l'ai déjà mentionné, dans les prochaines leçons, nous utiliserons des fonctionnalités plus avancées telles que les mises en page automatiques et les composants Avec ces mises en page et composants automatiques, nous serons en mesure de créer facilement ce type de site Web Mais pour le moment, cet exercice vous aidera à acquérir de nombreuses connaissances sur le fonctionnement de FIGMA et vous permettra d'acquérir expérience sur Figma OK. Nous devons maintenant créer ces textes. C'est vraiment simple. Commençons donc. Tout d'abord, nous devons créer cet accueil dans mes finances pour y parvenir. J'appuie simplement sur T sur le clavier et ajoutons du texte comme celui-ci. OK, c'est comme ça, alors nous devons découvrir les polices utilisées pour créer ce titre La police est donc Georgia Five Regular. Ajoutons ces détails, Georgia Regular. Cela devrait être 55. OK. Maintenant, je vais simplement copier ce soutien-gorge dans la commande C et le coller comme ceci, et il est en majuscules pour le mettre en minuscules, cliquez ici et au cas où nous pourrions sélectionner cette majuscule. OK. Ça a l'air sympa. Je vais maintenant l'aligner sur notre mise en page. Ensuite, ce que nous avons à faire pour créer cela. Nous sommes là pour vous aider à copier le texte et il est sur Font tas hell, Vertica, regular 25 Créons un texte et collons-le comme ça et c'est la police comme ça, Vertica, regular 25 OK, il suffit de cliquer ici et de le mettre comme ça pour le moment, puis nous devons créer cette icône «   Contactez-nous et apprendre ». Nous avons donc déjà créé l'icône Contact Cast, je peux donc simplement la dupliquer, cliquer sur tout et la dupliquer comme ceci. Ensuite, je vais changer cette hauteur à 60 pour ce faire, cliquer sur le rectangle et changer la hauteur en 60. Ensuite, créez ce centre. Je pense également que nous devons changer la taille de la police. La taille de police est 21, la taille est 20, faites-en un centre de ligne comme celui-ci. Maintenant, je peux à nouveau le dupliquer et le mettre ici comme ça. Ensuite, placez-les au centre de la ligne et ce texte sera en savoir plus. Modifiez le texte pour en savoir plus. Maintenant, ce que nous devons faire est de supprimer cette couleur de champ pour supprimer cette couleur de champ, je clique simplement sur cette icône moins, et maintenant j'ajoute l'Etro, clique sur Etro et la couleur du trait est noire, je vais changer la couleur du texte en couleur du champ en noir comme ceci du champ en noir comme Nous avons bien créé le bouton en savoir plus, mais nous devons d'abord ajuster d'autres éléments. Découvrons l' espace entre le texte et le bord du bouton : 33 x 33. Allons, nous en avons 20 sur 20. Faisons en sorte que ça ressemble un peu plus à ça 33. Et nous devons augmenter encore trois fois 0,1, deux, trois. OK. Sympa. Maintenant, ce que nous devons faire est de cliquer dessus et de le sélectionner comme à l'intérieur. Sympa. Nous avons maintenant deux boutons et la section d'en-tête. Ensuite, je vais regrouper ces deux boutons en appuyant dessus et en appuyant sur Commande G. Ensuite, je dois trouver l'espace entre ces deux sections. C'est 20 x 30, cliquons ici et affichons cela en appuyant sur la touche haut du clavier, puis en portant ce résultat à 30. OK. Je peux maintenant sélectionner tout ce texte et appuyer sur la commande G pour le regrouper. OK. Maintenant, ce que je peux faire, c'est sélectionner celui-ci et sélectionner l'arrière-plan cliquer sur cet alignement au centre vertical et l'aligner verticalement au centre. Ensuite, nous devons ajouter cette image. Pour l'ajouter, créez simplement un rectangle comme celui-ci, puis placez-le comme ceci et définissez-le comme ceci, comme ceci. ensuite ici, cliquez sur Placer l'image et sélectionnons l'image. Cliquez ensuite ici pour le placer. OK. Maintenant, je peux appuyer deux fois sur cette image et modifier le champ à recadrer. Et maintenant, sur cette image d'ici, je mets comme ceci. OK. En fait, je pense que nous pouvons augmenter la taille de cette image davantage comme ça, mais ils l'ont fait, ils l'ont dit comme ça et oui, elle convient parfaitement. Il ne nous reste plus qu'à créer cette barre noire. C'est facile à créer, il suffit cliquer sur le rectangle et de cliquer comme ça, puis de le placer comme ça et faire en sorte que la largeur soit la même que celle du cadre, puis d'augmenter la taille. En fait, découvrons la taille. I 270, fais 270 comme ça, puis change la couleur du champ en noir, clique sur la section héros appuie sur Entrée sur Mac Contrôle sous Windows et radio comme ça. Maintenant, ça a l'air bien, et maintenant ce que nous devons faire , c'est changer cette couleur de remplissage en cette couleur, copier cette couleur pour changer la couleur de remplissage. C'est sympa. Il faut maintenant ajouter ce texte. Le texte est Georgia 45 normal, il suffit donc de cliquer sur le texte ou de cliquer sur le T et d'appuyer ici, puis d'appuyer sur quelques prises, ajouter du texte, et c'est Georgia. Normal 45, donc cette phase met le texte comme ceci, pour cela et faisons entrer et dans la deuxième ligne comme ceci. Cliquez ensuite sur le fond, cliquez sur le texte, cliquez sur la ligne au centre vertical. OK. Nous devons maintenant ajouter ces trois sections. Pour les ajouter, cliquez ici et vérifiez la police, c'est hel vertical normal, 65 il suffit de la dupliquer, de prendre ces deux plans YE et changer la police en six comme ceci. Ensuite, il faut ajouter ceci, c'est Albatica Regular 25. Nous pouvons simplement le dupliquer et ajouter les réservoirs. OK, passez déjà à 25. Cliquez ensuite sur ces deux éléments puis sur Aligner le centre horizontal. Voyons la taille intermédiaire ou la marge entre les deux. 14. Faisons 50, puis appuyons sur les deux. Mettez-le à l'horizontale et cliquez sur Commande G. OK. Maintenant, dupliquez cette photo. Nous devons maintenant changer la valeur ici, commande ps c1v, copier ceci, copier ceci et le copier comme Maintenant, faites en sorte qu'ils s'alignent correctement. OK. Maintenant, je vais mettre ici les extraits de ce texte. Cliquons sur distribuer l'espacement horizontal après avoir sélectionné ces trois prises, puis, désolé, sur aligner le centre vertical Cliquez donc ici, cliquez sur Align Center. Appuyez ensuite sur la commande G pour le regrouper ici, cliquez sur aligner le centre vertical. OK. Maintenant, nous avons créé avec succès la deuxième section de héros. Voyons le second, et voici le design que nous venons de créer. Comme je l'ai déjà dit, c'est une façon d'apprendre Figma manière efficace et ensuite de faire un exercice Permettez-moi de le partager avec vous. OK. Voici la troisième section consacrée aux héros. Et vous devez créer cette section en utilisant les connaissances que vous venez d'apprendre. Il s'agit d'une section de héros simple, et en créant ces deux sections de héros, vous avez juste l' idée ou vous avez simplement les connaissances nécessaires pour créer ce design. Commençons donc le travail. De plus, à l'avenir, nous utiliserons la mise en page automatique et les composants. Ainsi, votre parcours de conception Web sera vraiment facile grâce à la mise en page automatique et aux composants. Pour l'instant, il suffit de créer cette section dédiée aux héros. Et apprenez-en plus sur Figma. Pendant que vous créez ce type de section de héros, pendant que vous créez cet exercice, vous pouvez jouer avec la Figma et découvrir d'autres fonctionnalités intéressantes Je vous verrai lors de la prochaine leçon. 13. Configurer la 3ème section de héros avec Figma UI2: Avez-vous réussi à créer ce design ? Concevons-le donc à nouveau. Je dois d'abord créer un cadre. Cliquez sur le cadre, cliquez ici. Ensuite, je vais choisir un 14 ou 4 700 comme celui-ci. OK, nous avons le cadre, alors changeons le nom du cadre en. Ensuite, nous devons ajouter la en page ou la grille de mise en page. Cliquez ici, et voici notre disposition en grille, cliquez dessus. Maintenant, dans un premier temps, nous devons créer ce menu. La taille du menu est donc de 223. Sa hauteur est de 223. Créons donc un rectangle et faisons en sorte qu'il soit égal à 14423 comme hauteur OK. Maintenant, rendons-le transparent à zéro comme ceci. OK. Maintenant, nous devons créer ce logo pour ce faire, je crée simplement un autre rectangle et je l'aligne comme ceci. Ensuite, nous devons sélectionner l'image du logo. Cliquez ici, cliquez sur Placer l'image et ici, nous avons le logo. Cliquez ensuite comme ceci. Ensuite, ce que nous devons faire, c'est transformer ce champ en culture. OK. Alors fais-le comme ça et augmente-le comme ça. OK. Peut-être que nous pouvons aussi l' aligner correctement ici. Sympa. Nous devons maintenant créer ce menu. C'est vraiment simple. Cliquez sur T et créez le menu. Le premier vin sera livré à la maison. Il ne nous reste plus qu'à trouver la police. Cliquez dessus et la police est Cabin Bolt 18. Ici, changez la police en cabine, puis en gras 18. C'est bon. En fait, nous devons à nouveau changer la visibilité de ce rectangle à cent. Passons ensuite à la couleur du champ en blanc. Sans cela, nous ne pourrons pas cibler ce rectangle. Il ne me reste plus qu'à ajouter le soulignement. Avant d'ajouter le soulignement, dupliquons-le comme celui-ci, deux, trois. Nous en avons sûrement besoin trois fois, puis nous ajouterons ici des informations sur nous. Tapons à propos des services électriques à ce moment-là. Oh non, ça devrait être électrique. Services électriques, alors contactez-nous. OK. Maintenant, je ne mettrai en évidence que ces trois éléments de menu et nous devons les mettre en majuscules et la largeur de police sera régulière. Surlignez les trois en appuyant sur Shift et passez à normal, puis mettez le majuscule en majuscule. OK. Maintenant, ici, nous devons changer cette majuscule majuscule et maintenant, nous devons ajouter ce soulignement pour ajouter le soulignement, nous pouvons sélectionner, nous pouvons cliquer ici et nous pouvons cliquer sur ce signe plus ou contre. Avant d'ajouter le soulignement, alignons-le d'abord. Je vais sélectionner tous ces éléments, leur faire répartir espacement horizontal, puis les aligner au centre vertical OK. Maintenant, il faut en changer la couleur. La couleur sera noire et ici, la couleur sera bleu foncé. Changeons-le. De la couleur au bleu foncé. OK. Il faut maintenant ajouter le soulignement. Pour souligner, je vérifie simplement que nous avons le style du texte, mais je ne l'ai pas trouvé. Ajoutons donc du soulignement à l'aide de ShafTol. Ici, nous cliquons en ligne, et maintenant je vais cliquer sur Shift et ajouter un soulignement comme celui-ci. Changez ensuite la couleur de soulignement en bleu foncé. OK, OK, ça a l'air bien. Maintenant, il ne me reste plus qu'à créer ce groupe. Sélectionnez ces deux objets et appuyez sur la commande G ou sur Ctrl G pour créer un groupe. Ensuite, nous devons trouver l' espace entre les 50. Nous allons donc changer cet espace en 50, 50 et 50 ici. OK, maintenant sélectionnez-les tous et appuyez sur la commande G pour en faire un groupe, puis sélectionnez le logo et définissez le groupe d'éléments de menu. Cliquez ensuite sur ce centre aligné verticalement. C'est bon. Nous devons maintenant ajuster la taille entre le logo et les nouveaux articles. Donc ici, je vais faire en sorte que ce soit 50, 40, 50, comme ça. C'est bon. Et ce soulignement devrait être plus fort. Mettons-le comme six et changeons-le en deux. Alors maintenant, nous devons ajouter cet appel gratuit 24 heures sur 24. Créons-le donc. Nous devons d'abord créer un cercle pour créer un cercle, cliquer ici et laisser ellipser, puis créer une ellipse comme celle-ci Découvrons la taille de l'ellipse. C'est 86 par 806-80-6806. Cliquez ensuite ici, changez la couleur de cette lumière. Ensuite, je vais le dupliquer en appuyant sur Raging it vers la gauche Découvrons ensuite la taille : 62 x 62, faisons-en 6262, puis changeons sa faisons-en 6262, puis couleur de remplissage en cette couleur foncée, cette couleur Maintenant, sélectionnez ces deux objets et faites en sorte qu'ils soient alignés verticalement et horizontalement au centre. OK. Ensuite, nous devons ajouter cette icône de téléphone. Pour ajouter cette icône de téléphone, nous pouvons utiliser l'icône fontosom Si nous allons à fontsom, Pontosom est la bibliothèque d' icônes Internet et la boîte Donc, si nous cliquons sur ce site, pontosom est une bibliothèque d'icônes Voici donc la bibliothèque d' icônes de Pontosom, et nous pouvons effectuer une recherche ici pour trouver une icône de recherche Et voici les icônes du téléphone. Cependant, nous avons un plugin Figma conçu par pontosm. Pour l'ajouter, il faut donc accéder au plugin. Donc, pour y accéder, cliquez sur ces ressources, et ici nous pouvons accéder aux plugins et ici nous pouvons rechercher le nom du plugin. Je recherche Font Sum. OK, voici les icônes du pontosom, cliquez sur Exécuter. OK, maintenant nous avons le widget d'icône Pontosom ou je peux le brancher Nous devons donc rechercher le nom de l'icône, c'est le téléphone, et voici l' icône du téléphone. Cliquez dessus. OK. Maintenant, nous devons le mettre ici puis le changer de couleur en Y. OK. Comme ça. accord, d'accord. Maintenant, mettez-le au centre. En fait, c'est hors de notre cadre. Donc, pour le réparer, nous devons l'ajouter à l' intérieur du cadre comme ceci. Ensuite, je vais supprimer le cadre ALT de ce téléphone. Maintenant, l'icône les sélectionne tous et les place tous au centre. OK. Maintenant, ce que nous devons faire, c'est ce texte. Découvrons les textes Cabin Medium 16,5. Créons des réservoirs et ajoutons le texte Permettez-moi de l'ajouter en cuisinant ici et en le collant comme ça. En fait, lorsque nous le collons directement, toutes les propriétés de ce texte seront directement intégrées au texte. Mais pour l'instant, ajoutons-le comme ça parce que nous savons comment changer la police sur figma. Découvrons que l'espacement est de 16 et nous avons cette pièce, c'est le boulon de cabine 25 Copions d'abord ce texte. Je vais juste le coller ici. Cliquez sur le contexte, cliquez ici. Ensuite, j'ajouterai qu'il faut un 1-110, un. J'ai déjà assigné. Découvrons la couleur. Je pense que c'est déjà bien. Maintenant, dis-le comme ça. Ensuite, nous devons aligner cette feuille et laisser un espace entre deux, sélectionner ces deux objets et appuyer sur la commande ou le contrôle G pour les regrouper Ensuite, nous devons regrouper les deux. Sélectionnez ces trois éléments et appuyez sur la commande G, puis surlignez ces deux objets, ces deux groupes, et cliquez comme ceci, puis je vais le mettre comme suit. OK, la partie d'en-tête est terminée et elle semble similaire. Il ne nous reste plus qu'à créer cette ligne bleue. Pour le créer, je clique sur ce rectangle que nous avons déjà créé et je clique sur le trait. La couleur de la roche sera cette couleur foncée. Changez ensuite la taille du trait en « like Et cliquez ici et nous n'avons besoin que d'un bas comme celui-ci. Devrions-nous également changer sa taille ? D'accord, d'accord. Il faut maintenant ajouter cette image. L'ajout de l'image est simple. Tout d'abord, je clique sur le cadre et appuie sur Commande sur Mac et Alton Windows. Vas-y comme ça. En fait, si nous n' inscrivons pas la commande, nous changerons les positions lorsque nous ajusterons cette couche. Si vous cochez l'icône du téléphone, elle s'ajustera lorsque nous l'ajusterons. Mais si nous passons, la commande s' ajustera comme ça. accord, d'accord. Nous n'avons pas besoin de beaucoup d'espace. Maintenant, découvrons que la hauteur est 577, créons un autre rectangle et faisons-le signer 144 50 Désolé, 1 440 puis 577 a et mettez-le ici. OK. Ensuite, sélectionnez le cadre et ajustez sa taille comme suit. Ensuite, nous pouvons cliquer sur le cadre. Cliquez sur le rectangle , cliquez sur cet outil de mise en forme et cliquez sur conflasimage Accédez à notre image, sélectionnez comme ceci. OK. ne nous reste plus qu'à ajouter ces appels à l'action, ajouter cet appel à l'action en tant qu' en-tête du sous-din et en tant que bouton C'est assez simple, alors allons-y. Tout d'abord, je vais cliquer sur un texte et il sera exécuté à 100 %. D'accord, découvrons maintenant les propriétés de la police. C'est la cabine Medium 24. Nous allons donc le remplacer par cabin medium 24. Ainsi, lorsque nous changeons de police, nous sélectionnons la police ou nous devons sélectionner la police sans passer en mode édition. Donc, si nous sélectionnons le texte, nous pourrons le modifier. 24 de taille moyenne, et la couleur sera cette couleur bleu foncé. OK. Nous devons maintenant ajouter cette section. Pour l'ajouter, je vais d' abord copier le texte cliquer sur ce T et coller le texte comme ceci. En fait, comme je vous l'ai déjà dit, lorsque nous le collerons, la propriété de conception l'accompagnera. Associons ensuite ces deux objets et cliquez sur aligner à gauche. Maintenant, trouvez l' espace entre les deux, c'est fait, et maintenant nous devons ajouter ce bouton. Découvrons les propriétés des boutons. C'est 320 x 80. Cliquez ici comme ça, il fera 320 x huit et changez sa couleur de remplissage en bleu foncé comme ça, puis mettez-le comme ça, cliquez sur le contenu et ajoutez du texte comme demande à partir du mot plus foncé pour Figma a une fonctionnalité intéressante Si nous cliquons ici avec le bouton droit de la souris et que nous accédons à cette copie sous forme de copier-coller sous forme de copier-coller et de sélectionner les propriétés de copie, puis de cliquer sur les propriétés de phase. Qu'est-ce qu'un bloc. OK. Désormais, la propriété sera automatiquement ajoutée à cette conception. Découvrons les détails. D'accord, il faut d'abord changer la hauteur. La hauteur est huit, pas la hauteur avec. Désolée, j'en ai trois à 333. OK. Maintenant, sélectionnez le rectangle et le bouton, désolé, textez et alignez-le verticalement et horizontalement au centre, appuyez sur la commande G pour le regrouper et surligner toutes ces sections, appuyez sur la commande G, puis cliquez sur ce rectangle et placez-le au centre. Nous créons simplement le design. Voyons le mode de présentation de l' aperçu en mode présent. Ça ressemble à ça. Oui, c'est ainsi que nous créons le design simple. Comme je l'ai déjà dit, dans les leçons à venir, nous trouverons des méthodes plus faciles et plus faciles faciles et plus faciles à gérer pour créer ce type de design, et c'est pour en apprendre les bases J'espère que vous en apprendrez davantage sur les polices, les réservoirs, les outils de forme, traçage d'images et la création de sections de héros de base ou de belles sections de héros. Je vous verrai lors de la prochaine leçon. 14. Apprendre la mise en page de Figma: Bonjour à tous. Découvrons la mise en page automatique de Figma et comment l'utiliser pour créer des designs flexibles et réactifs, vous permettant ainsi d'économiser du temps et efforts lorsque vous travaillez sur vos projets Autoyout est comme une magie dans le figma. Il vous aide à organiser vos éléments et à rendre vos conceptions flexibles. Considérez-le comme un système qui maintient tout en ordre et ajuste l'espacement pour Lorsque vous redimensionnez un bouton, une carte ou même une section entière, mise en page automatique permet de redimensionner également tout ce qui se trouve à l'intérieur de Nighty Imaginez que vous créez une barre de navigation avec des boutons. Sans mise en page automatique, vous devez ajuster manuellement chaque bouton si vous modifiez la taille. Mais avec la mise en page automatique, Figma le fera automatiquement pour vous Il y a peu de raisons pour lesquelles la mise en page automatique est si importante. La première mise en page automatique accélère votre flux de travail. Il n'est pas nécessaire de régler chaque élément à la main. De plus, si vous souhaitez que votre design fonctionne sur différentes tailles d'écran, mise en page automatique permet de s'assurer que tout s'adapte parfaitement. De plus, cela vous donne un espacement constant, ce qui est essentiel pour un bon design En gros, la mise en page automatique vous permet de passer plus de temps à concevoir et moins de temps à corriger de petits détails. Passons à notre design Figma et commençons à ajouter une mise en page automatique Tout d'abord, je vais créer un nouveau projet en cliquant sur ce bouton bleu créer un nouveau projet et en cliquant sur les fichiers de conception. Ensuite, je vais changer cela en. Modifions-le comme Auto AO. Ensuite, je vais cliquer sur cette icône de cadre et créer un cadre de la taille d'un bureau comme celui-ci. premier temps, ajoutons une mise en page automatique à ce cadre. Et le paiement automatique. Si vous cochez sur votre barre latérale droite, vous verrez l'option de mise en page automatique. Il vous suffit de cliquer sur cette icône plus. Ou si vous aimez utiliser un raccourci, le raccourci de mise en page automatique est Shift A. Ainsi , vous pouvez ajouter des options de mise en page automatique. Nous avons des fonctionnalités permettant d'ajouter entre les tailles, des motifs horizontaux, des motifs verticaux et d'aligner les éléments comme options de mise en page automatique. Nous avons des fonctionnalités permettant d'ajouter entre les tailles, des motifs horizontaux, des motifs nous le souhaitons Il sera facile de comprendre cela si nous créons des objets. Créons d'abord un bouton. Vous souvenez-vous de la dernière fois que nous avons créé un bouton ? Nous devons ajouter de la forme et du texte, mais avec la mise en page automatique, le texte sera suffisant pour créer un bouton. Cliquez sur le texte et cliquez ici, puis ajoutez du texte ou ajoutez le nom du bouton en cliquant sur moi maintenant. Comme ça, puis comme nous l'avons fait auparavant, changeons la police. La police sera Ajoutons une police comme s'il s'ouvre et la taille sera semi-boold. Ensuite, ajoutons la taille de police à 418 comme ceci, et peut-être que nous serons réguliers. C'est bien. Maintenant, rendons-le semi-bool. OK, maintenant nous avons le texte du bouton. Je vais mettre l' étui en majuscules. OK. Maintenant, il ne s'agit que d'un texte, et nous pouvons ajouter une mise en page automatique à ce texte. Vous devez appuyer sur Shift A. Lorsque vous appuyez sur Shift A, vous pouvez ajouter une mise en page automatique. OK, voici maintenant les options de mise en page automatique de ce bouton. deuxième temps, je vais renommer ce cadre en bouton, afin qu'il soit plus facile à comprendre Ensuite, je vais ajouter une couleur de remplissage. La couleur de fond. Ainsi, lorsque nous ajouterons la couleur d' arrière-plan, nous pourrons facilement identifier ce qui s'est passé lorsque nous modifierons les options de mise en page automatique dans cette section Donc, sur votre barre de droite, nous avons rempli et je clique sur cette icône en forme de plus. Ensuite, je vais changer cette couleur verte car vert est l'une de mes couleurs préférées. OK. Ça a l'air bien. Vous pouvez le changer en n'importe quelle couleur, mais je choisis le vert. OK. Nous avons maintenant le texte avec la couleur de fond. Et si nous cliquons sur cette mise en page automatique, nous pouvons voir le texte comme ceci. Maintenant, je sélectionne le bouton et vous souvenez-vous que je vous ai parlé de rembourrage horizontal et de rembourrage vertical Voici ces options. Nous pouvons simplement les ajouter par exemple 15 et voir quand je les ajoute, j'obtiens un espacement entre le texte égal à 15 et passons à 20 Maintenant c'est plus clair, 25, maintenant c'est plus clair. Ensuite, nous avons un rembourrage vertical. rembourrage vertical désigne l'espace entre le haut et le bas de ce texte Ajoutons un rembourrage vertical ajoutons 25 25. OK. Maintenant, cela ressemble plus à un bouton. Faisons en sorte que ce soit un jumeau et 30. OK. Maintenant c'est vraiment bon. Comme si je le voulais, je peux ajouter, je peux réduire les coins en cliquant ici et en ajoutant 39. Vous souvenez-vous qu' au cours des dernières leçons, nous l'avons fait et que nous avons maintenant ce type de bouton et qu' en ajustant ces éléments, nous pouvons rendre ce design vraiment cool. Ce bouton se trouve maintenant dans le coin gauche. Et si on voulait que ça soit placé au milieu comme ici. Donc pour cela, cliquez sur le cadre, le cadre est déjà mis en page automatiquement. suffit donc de cliquer sur Aline en haut au centre pour qu'elle passe à la ligne en haut au centre, et si nous cliquons sur Aligner le centre, elle passe à la partie centrale, et voici le pouvoir de la mise en page automatique. Si nous n'avons pas utilisé la mise en page automatique, nous devrons ajuster manuellement ce bouton. Mais lors de la mise en page automatique, Figma s'occupera de la partie réglage, il suffit de la modifier à partir de cette section de mise en page automatique OK. Maintenant, pensez que nous devons créer un autre bouton. Dupliquons ce bouton. Je vais cliquer sur le bouton appuyer sur la commande C et appuyer sur la commande V. Le bouton est simplement ajouté, comme si vous deviez modifier la taille du stylo dans le pari. C'est vraiment simple. Il vous suffit de cliquer sur le cadre et vous verrez alors ce type de ligne de réglage pour le modifier. Nous pouvons donc le changer à partir d'ici comme ceci. OK. Maintenant, faisons en sorte que ce bouton ressemble à une couleur de champ zéro, et ajoutons un trait. Pour ajouter un trait, cliquez sur le bouton et vous verrez ce trait, il suffit de cliquer comme ceci. Et maintenant, changeons la couleur du trait par cette couleur verte. Nous pouvons donc changer la couleur du texte pour changer la couleur du texte, nous devons limer le texte et le changer en vert OK. Ici, cela ressemble à ceci, mais cette couleur verte est trop claire, nous devons donc la changer en foncé comme ça, changer la couleur de remplissage en désolé, pas la couleur de remplissage. Changez la couleur du texte en couleur foncée comme ceci. OK. Maintenant, imaginez que si vous voulez changer le texte, changeons, cliquez sur moi pour en acheter un, obtenez-en un gratuitement. Lorsque nous changeons la couleur du texte, l'alignement s'ajuste automatiquement. Voyez si je change ici pour soumettre, cela changera en fonction de l'envoi maintenant comme ça. Le bouton changera en fonction du texte. Mais vous souvenez-vous du dernier design que nous avons créé ? Passons donc à ce design. Je clique sur Retour aux fichiers, et voici le design. Alors récupérons ce bouton. Donc, sur ce bouton, cliquons sur moi pour en obtenir un gratuitement. Désormais, lorsque vous ajustez le texte du bouton, l'arrière-plan ne s'ajuste pas. Nous devons l' ajuster manuellement comme ça. C'est pourquoi nous devrions utiliser autoayout. Revenons en arrière et cliquez sur la section Autoayout. Ce n'est qu'une base et nous avons beaucoup plus d'éléments, beaucoup plus de fonctionnalités que nous pouvons faire avec la mise en page automatique. Imaginez maintenant que vous deviez créer un bouton dans le deuxième bouton situé sous ce bouton. Actuellement, vous ne pouvez pas le faire car si je duplique ce bouton, il n'y aura qu'une ligne horizontale. Si nous voulons ajouter le bouton ci-dessous, je vais d'abord le supprimer ou le supprimer et si nous devons ajouter un nouveau bouton, devons d' abord cliquer sur ce DestopFrame et ajouter une mise en page automatique de ce cadre en vertical, comme Quand je l'ajoute, les prises sont alignées verticalement comme ceci, mais je veux les rendre horizontales et ajouter une nouvelle ligne. Pour ce faire, je clique sur ces deux éléments et j'appuie sur Shift A, et le cadre devient différent. Tu as vu ? Je vais appuyer sur la commande C pour l'annuler. Je clique d'abord sur ces deux couches ces deux cadres ou ces deux boutons, puis j'appuie sur Shift A pour créer une nouvelle mise en page ou une nouvelle mise en page automatique. Maintenant, je peux cliquer sur cette mise en page horizontale et elle sera horizontale. Maintenant, si je veux créer un nouveau bouton. Créons un nouveau bouton ci-dessous comme celui-ci et Hello me. Ajoutons ensuite la mise en page automatique en appuyant sur Shift A, et voici les détails, nous avons les options de mise en page automatique. Maintenant, je vais ajouter la couleur du champ. Cette fois, ajoutons couleur du champ et le vert vert clair comme ceci, et changeons la couleur du texte en blanc. Maintenant, je vais ajouter un paddin horizontal 20 et désolé, paddin vertical 20 comme celui-ci Faisons en sorte que ce soit 30. Maintenant, voyez, nous créons ce bouton en dessous de cet ensemble. Renommons-le en bouton comme celui-ci, puis nous pouvons ajuster ou modifier cette ligne de texte maintenant et elle s'ajustera en fonction du texte OK. Voici comment créer la mise en page automatique. Voyons si vous voulez faire de ce bouton un bouton en taille réelle. Donc, actuellement, cette taille de bureau est de 1 440. Donc, si nous voulons remplir ce bouton avec un bouton. Il suffit de cliquer sur le bouton, et ici, vous verrez. Dans le cadre, vous verrez, cliquez sur ce bouton, et ici, vous verrez un câlin, faites-le remplir un contenant. Ensuite, vous le faites remplir le récipient. Le bouton sera ajusté en tant que conteneur de remplissage. Vous verrez également ce type d'espacement. La raison en est que lorsque vous cliquez sur le cadre du bureau, vous verrez un rembourrage horizontal de dix Si nous le changeons comme zéro, le bouton sera sur toute sa largeur. Passons donc à 140, 140. OK. Maintenant, cette taille intermédiaire, vous pouvez la modifier en modifiant l'écart vertical. Changeons-le comme 60. Voici donc le moyen. Maintenant, si vous voulez placer ce bouton en haut, vous pouvez cliquer sur une ligne en haut au centre ou sur une ligne à gauche du talon comme celle-ci C'est vraiment facile. Vous êtes peut-être encore perplexe, mais dans les prochaines leçons, nous allons concevoir ces bannières avec une mise en page automatique et vous comprendrez parfaitement la mise en page automatique une fois cela fait, à la prochaine leçon. 15. Activer UI3 bêta pour Figma: Bonjour à tous, au moment où je crée cette leçon, nouvelle interface utilisateur de Figma UI Three n' est pas disponible pour tous les utilisateurs Nous devons donc nous inscrire sur la liste d'attente car elle est toujours en sur la liste d'attente car elle est toujours Après la bêta, comme ils l'ont annoncé, nous pourrons accéder à l'interface utilisateur de Figma Three Cependant, si vous ne disposez pas de l'interface utilisateur trois, nous pouvons utiliser l'extension Google Chrome pour obtenir un examen de l'interface utilisateur trois. Faisons-le. Tout d'abord, j'ouvre un nouvel onglet et je recherche pour activer Figma, j'ai trois ans, pour me connecter Ensuite, je ferai en sorte que cette interface utilisateur active Three beta ou Figma. Je clique juste dessus. Maintenant, voici l' extension ou le plug-in, je clique dessus dans Chrome et sur l'extension. Actuellement, cette version fonctionne sur les navigateurs Web, non sur l'outil Figma téléchargé, utilisez donc Google Chrome pour exécuter cette extension. OK. Maintenant, il ne nous reste plus qu'à accéder à notre compte Figma et je le réprime. Maintenant, cliquons sur Creative puis sur Fichier de conception. À partir de là, nous pouvons utiliser Figma UI Three pour créer nos designs. Dans la leçon suivante, nous passerons en revue un bref aperçu et utiliserons ces trois fonctionnalités de l'interface utilisateur et l'interface utilisateur trois pour terminer nos futurs travaux. 16. Tutoriel de Figma UI3: Bonjour, tout le monde. Passons en revue l'interface utilisateur de Figma Je suis maintenant sur le tableau de bord de Figma. Je clique sur ce nouveau fichier de design pour créer un nouveau design. Maintenant, j'ai l'UIT ou l'ancienne interface utilisateur de Figma Editor. Je clique sur cette icône d'aide et ici, je clique sur utiliser une nouvelle interface utilisateur en version bêta. Voici notre interface utilisateur. C'est la même que la deuxième interface utilisateur ou l'ancienne interface utilisateur du Figma. Nous sommes les seuls à avoir une apparence plus professionnelle et apporter une modification conviviale à l'éditeur général. Je vais d'abord créer un cadre. Nous avons donc ici le panneau d' outils. Nous avons le cadre, alors je clique sur le cadre et je clique ici, puis je crée un cadre comme celui-ci, ou créons un cadre de la taille d'un bureau. Je clique ici. Ensuite, sur le côté droit, nous pouvons sélectionner la taille du bureau. Je vais sélectionner cette version de bureau. Maintenant, sur le côté gauche, nous avons la section de navigation. Ici, nous pouvons voir les couches et dans ***, nous pouvons voir ces assertions. Je vais renommer ce bureau 12 principal. Maintenant, je vais créer un rectangle à l'aide de l'outil de forme, cliquez ici et créez un rectangle comme celui-ci. Ensuite, je peux voir la propriété de ce rectangle. Passons cette largeur et hauteur à 300 300 et changeons la couleur du champ en rouge. C'est donc comme avant et nous pouvons également créer des lèvres, laisser l'ellipse et la créer comme ça Ensuite, nous avons le texte. Je clique dessus et bonjour puis je sélectionne le texte et ici, je peux changer de police pour l'échanger contre la taille du chemin de fer qui sera synchronisée à 30 et semi-carte. Changez de couleur en rouge comme ceci. À 60, de ce côté, nous pouvons voir les joueurs et créer de nouvelles pages comme celle-ci. Comme avant d'avoir ce panneau d'action ici, nous pouvons trouver des plugins et des widgets. Dans cette section, nous avons également des fonctionnalités que nous pouvons utiliser avec Figma AI et dans les prochaines leçons, allons en apprendre davantage sur Figma Terminons cette leçon en le nom de ce fichier Figma Je vais changer le nom de ce fichier Figma en web design. Des leçons comme celle-ci. Dans la vidéo suivante, je vais vous voir créer mise en page automatique de Figma avec la dernière version d' UIT 17. Apprendre la mise en page automatique de Figma avec UI3: Bonjour à tous. Apprenons la page automatique de Figma avec l'interface à trois éditeurs de Figma UI Vous connaissez déjà la mise en page automatique de Figma, passons à l'action Je vais d'abord créer un cadre. Je suis donc sur l'éditeur Figma, donc je clique ici, je clique sur icône du cadre et je sélectionne comme bureau Voici notre cadre. Ajoutons ensuite la mise en page automatique à ce cadre. Pour ce faire, je peux cliquer avec le bouton droit souris et cliquer sur cet élément du menu Atayout, ou je peux cliquer ici ou sur le côté droit, nous avons la mise en page dans la mise en page Ici, nous pouvons utiliser la fonction de mise en page automatique, donc je peux cliquer ici ou simplement cliquer sur Shift A. Il suffit de cliquer ici et c'est une mise en page automatique ajoutée Maintenant, je vais ajouter un peu d'Ellipse. Cliquons sur Ellips et créons une Elise. Ensuite, je fixerai la largeur de l' ellipse à 150 et la hauteur à un cinquième Ensuite, je changerai la couleur du champ en rouge, puis je le dupliquerai trois fois Faisons de cette ellipse la couleur verte Cliquez ensuite ici et changez cette couleur en bleu comme ceci. Jouons avec ces objets et apprenons-en plus sur la mise en page automatique. Tout d'abord, je vais renommer ce test de mise en page du nom de cadre. OK. Ensuite, je sélectionne le cadre. Dans la section automatique, nous aurons l'option. Dans un premier temps, je vais définir les marges gauche et droite à 140 pour ce faire. Je dois trouver la gauche et la droite. Voici les marges gauche et droite. Actuellement, il y en a dix. Si je clique ici, je peux voir les marges individuelles. Dans ce cas, il s'agit d'un rembourrage, mais il fonctionne également comme marge Ici, je vais mettre 140, puis encore une fois, je mettrai 140 de ce côté. Voici 140, voici 140. Maintenant, je veux ajouter une marge en haut et en bas, la marge supérieure est actuellement de dix. Ici, vous pouvez voir que c'est dix, dix, et ici, si je survole, cela affichera dix, donc je veux ajouter plus d' espace, j'en ajouterai environ 60 Pour ce faire, je vais cliquer ici et maintenant je peux le changer comme 60 si je le réduis en cliquant ici, je peux juste à 60, puis j'aurai 60 comme marges supérieure et inférieure, et ici, nous verrons l'écart horizontal entre les objets. Donc, pour le changer, je peux le modifier à ma guise. Mettons-le à 50 et à partir de là, je peux le modifier comme je le souhaite. Ensuite, je veux placer ce bouton au centre pour ce faire, je clique sur le cadre et ici, je peux cliquer sur Aligner au centre. L'ellipse ira au centre et si je clique sur le centre, elle ira au centre et fonctionnera comme ça Actuellement, ces trois ellipses sont à l'horizontale. Si je veux le rendre vertical, je peux simplement cliquer sur cette disposition verticale et il s'alignera verticalement. Encore une fois, je vais en faire une mise en page horizontale comme celle-ci. C'est ainsi que nous pouvons ajouter et travailler sur la mise en page automatique dans le cadre. Il existe d'autres options avec lesquelles jouer, par exemple, si nous ajoutons cet écart horizontal entre les objets au mode automatique, cela comblera automatiquement l'écart. De plus, si je change la taille avec une hauteur, changeons-la par exemple 1 000, elle s'ajustera en fonction du design six comme celui-ci. 18. Design de boutons en utilisant la mise en page automatique: Créons des boutons avec mise en page automatique. Pour ce faire, je vais supprimer tout ce cadre ou créer un nouveau cadre. J'appuie sur Commande et j'utilise la molette de la souris pour diminuer le nombre de scanners. Je clique ici et je clique sur le bureau OK. Nous allons changer ce bureau en couche BTN. Et maintenant, je clique ici et convertit en mise en page automatique comme celle-ci. OK. Maintenant, gardons le réglage comme ça et maintenant je vais appuyer sur T et créer un texte de bouton, comme « click me ». Maintenant, je peux changer la police si je le souhaite. Modifions-le comme Roboto et Roboto semblent être 25. Faisons en sorte que ce soit un médium. Changeons la police comme pop in. Ça a l'air bien. OK. Maintenant, je dois bouton droit de la souris et cliquer sur AutoAyouPour appuyer sur Shift A. Je clique simplement dessus et cela est ajouté Ensuite, je vais cliquer ici et le renommer en TN one. OK. Je vais maintenant passer à notre panneau de droite et ajoutons la couleur de remplissage. Je vais ajouter de la couleur de remplissage sous forme de bleu clair, rendons-la un peu plus foncée. Maintenant, annulez à nouveau cela, cliquez sur ce texte et changez la couleur de remplissage en blanc comme ceci. Sélectionnez à nouveau le bouton. Mise en page et à partir de là, j'ajouterai paddins gauche et droit 30 et les paddles haut et bas 20, comme ceci Ensuite, je vais changer le coin ou le réduire en apparence, nous l'avons à zéro, je vais le faire 60 comme ça. OK. Maintenant, ce que je peux faire, c'est mettre ça au centre. Pour ce faire, nous devons sélectionner notre cadre et, comme nous l'avons fait auparavant, nous devons l'aligner au centre de cette façon. OK. Maintenant, je vais dupliquer en le pressant et en le faisant glisser comme ceci OK. Je vais maintenant créer un deuxième bouton. Remplaçons ce texte en second. Cliquez sur moi en second lieu. Et maintenant, changeons sa couleur de remplissage en cette couleur bleue. Maintenant, je clique sur le bouton et changeons nom du bouton deux et réglons l' opacité à zéro comme ceci Ensuite, je clique sur Estro et je clique ici, puis je mets la couleur Etro sur cette couleur bleue, et je vais changer la ligne par deux OK. Nous avons maintenant deux boutons. Maintenant, je veux changer la taille de l'invitation pour ce faire, je peux simplement cliquer ici et modifions-la comme 20 Mais nous avons un problème. Disons que nous devons créer un autre bouton et qu'il devrait se trouver sous ces deux boutons. Maintenant, je vais cliquer sur ce bouton et appuyer sur la commande C ou sur le contrôle C sous Windows et sur la commande B, puis c'est sur la même ligne. Si nous voulons placer ce bouton sur la ligne nous pouvons envaser la couche et cliquer comme ceci Lorsque nous transformons la couche en couche verticale, chaque bouton sera défini en tant que couche verticale. Pour résoudre ce problème, je vais surligner ces deux boutons, cliquer sur ce bouton, appuyer sur Shift et cliquer sur celui-ci. Ensuite, j'appuie sur la commande G pour les regrouper et maintenant je peux cliquer sur cette disposition verticale car ce groupe fonctionne selon une mise en page différente. Dans ce groupe, si nous voulons changer la taille intermédiaire à 15, nous pouvons le faire en cliquant sur le groupe et à partir de là, nous pouvons le changer comme 15. Ou nous pouvons appuyer sur Shift A et ajouter une mise en page automatique à ce groupe et à partir de là, nous pouvons le modifier comme ceci. OK. Maintenant, je vais changer ce cadre en BTN set. Maintenant, je veux que ce bouton soit ajouté ci-dessous de ces deux boutons. Je clique simplement sur celui-ci et je le fais glisser vers bas de cet ensemble de boutons. Ici, je vais changer la couleur du champ pour le faire passer en rouge comme ça. Ensuite, pensez que je veux créer ce bouton, bouton d'enchère complet pour le faire, je vais aller ici et dans le W je le définirai comme contenant de remplissage comme celui-ci. Ensuite, je vais changer cela. Cliquez sur moi, je suis plein de BTN, comme ça. Comme avant, nous pouvons modifier ces textes, cliquez sur moi maintenant par deux comme ceci, cela s'ajustera en fonction du design car nous avons ajouté la mise en page automatique. Ici, si nous voulons ajouter une marge, nous pouvons simplement sélectionner le cadre principal et à partir de là, nous pouvons ajouter une marge de 140 comme ceci. C'est très simple et dans la leçon suivante, commençons à concevoir la section des héros. 19. Section de design 1er héros avec mise en page automatique: Bonjour à tous. Concevons maintenant ces sections de héros avec une mise en page automatique. Nous sommes déjà en train de créer ces sections zéro sans mise en page automatique. Il est maintenant temps d'utiliser la mise en page automatique pour créer cette section de héros. Dans un premier temps, nous devons créer un cadre. Je clique ici puis je sélectionne la taille du cadre comme bureau. Alors je vais le dire comme ça. Maintenant, je change celui de bureau en Hero One avec mise en page automatique. OK. Maintenant, dans un premier temps, nous devons ajouter une disposition en grille. Pour ajouter une disposition en grille, Iilate le cadre et nous avons ici une disposition en grille Je clique ici et nous l' avons enregistré dans la grille d'appels, donc je l'ajoute simplement. OK. Maintenant, je vais faire de ce cadre une mise en page automatique. ce faire, je sélectionne le prime et j'appuie sur Shift A, puis cela devient une mise en page automatique et maintenant je vais ajouter les détails nécessaires. Tout d'abord, je vais le définir comme une ligne en haut au centre, puis j'ajouterai un espace vertical ou un rembourrage à 140, puis j'ajouterai qu' il s' agit des marges gauche et droite, ou nous pouvons l'appeler rembourrage Ensuite, j'ajouterai zéro comme marge inférieure du ventilateur supérieur ou comme rembourrage supérieur et inférieur. Ensuite, comme taille intermédiaire, je vais la sélectionner comme 90, ou passons-en de une à 20. Ici, nous avons une mise en page horizontale, mais nous avons besoin d' une mise en page verticale car nous construisons le site Web de haut en bas. OK. Notre mise en page est maintenant prête. Créons la section des héros. La hauteur de la section des héros est de 700. Créons un cadre, cliquez sur le cadre et cliquez ici. Ensuite, je fixerai la largeur à 1 440 et la hauteur à 700. OK. Maintenant, ce que je fais, c'est que nous avons le cadre, j'appuie sur Shift A pour en faire une mise en page automatique ou j'ajoute une mise en page automatique à ce cadre. Ensuite, si je veux, je peux renommer cette section en héros OK. Maintenant, à partir de là, nous devons ajouter cette image de fond. Pour ce faire, je sélectionne cette section de héros clique sur un rectangle et je clique ici. Encore une fois, je vais définir le rectangle avec 1 440 hauteurs 700 comme ceci, puis je vais cliquer sur le triangle rouge et cliquer ici, cliquer sur l'image slash Video Ensuite, je vais sélectionner l'image. Maintenant, je clique ici pour ajouter l'image. Maintenant, l'image a été parfaitement ajoutée. Lorsque vous verrez le dessin, vous verrez ce type d' espacement entre les images pour la supprimer, cliquez sur la section héros et définissez ces détails sur zéro pour le moment Et pour le moment, restons comme ça. Encore une fois, nous avons maintenant l' image et dans un deuxième temps, nous devons ajouter ce fond de superposition La couleur de la superposition est le noir et son opacité est de 70. Ajoutons ces détails. Cliquez sur l'image, cliquez sur l'icône plus et passez 70 et la couleur est noire. OK. Maintenant, nous devons ajouter ce texte de logo pour l'ajouter, je vais cliquer sur TO text et cliquer ici, puis j'ajouterai le texte comme j'ajouterai le texte en tant que logo. Lorsque j'ajouterai le texte, vous le verrez apparaître ici. La raison en est que nous sommes actuellement dans le cadre du héros. Si je clique sur ce cadre et qu'il a une disposition horizontale. Faisons en sorte que la disposition soit verticale , puis le texte du héros apparaisse ici. Laissez-moi vous le montrer en changeant de couleur. Sélectionnons-le et changeons la couleur du champ comme suit. Mais cette image doit fonctionner comme image de fond. Actuellement, si nous ajoutons un objet à ce design dans cette section de héros comme celui-ci, cette image ne fonctionnera pas comme image d'arrière-plan. Pour l'atteindre, nous pouvons sélectionner l'image et, dans les positions situées sur le côté droit, cliquer sur ignorer la mise en page automatique comme celle-ci, puis sur cette image ignorer la mise en page automatique. Je vais cliquer sur l'image et la mettre comme ça. Maintenant que l'image ne s' affiche pas pour y remédier, je vais la placer en haut de la section des héros. Alors maintenant, je peux le définir comme ceci car cette image ignore la fonctionnalité de mise en page. Nous pouvons maintenant apporter des modifications à cette section consacrée aux héros. Tout d'abord, je vais la supprimer et dans le logo, je vais changer sa couleur en blanc et nous allons voir je vais la supprimer et dans le logo, je vais changer sa couleur les détails. C'est Railway Semivol 35, cliquez sur les réservoirs et Railway Semi Wolthirty. Vérifiez le rembourrage entre le haut du cadre et le logo Il est 20 ans. Faisons donc 20 pour en faire 20, isolons la section des héros et ajoutons le rembourrage supérieur à 20, comme ceci Ensuite, si c'est le cas ici, retirons le rembourrage inférieur la section Hero, je vais régler le rembourrage supérieur à 20 comme ceci Pour cette section des héros , nous avons un problème car la section des héros la modifie. Je vais le régler avec un récipient de remplissage et la hauteur sera de 700 comme celui-ci. Maintenant, c'est la deuxième étape, nous devons cliquer sur cet élément de menu pour les ajouter, j'appuierai sur T et j'aime à la page d'accueil. Ensuite, je vais cliquer ici et cliquer sur Copier et coller sous, puis sur Copier les propriétés. Ensuite, sélectionner le texte et les propriétés de phase. Maintenant que cela nous concerne, je vais dupliquer cette page d' accueil en appuyant sur Alt. Ensuite, je vais cliquer ici et cliquer sur Copier la propriété, puis je viens ici et je clique sur la première propriété. Ensuite, je le dupliquerai une, deux, une, deux, trois, quatre fois, une, deux, trois, quatre fois. Je vais maintenant modifier ces textes. Celui-ci portera sur la façon dont il fonctionnera. Ce seront des entraîneurs, celui-ci sera un contact. Maintenant, ce texte devrait être aligné horizontalement, actuellement il est vertical. Pour ce faire, je vais mettre en évidence ces cinq textes appuyant sur Shift , puis sur Shift A. Lorsque j'appuie sur Shift A ici, cela s'ajoute à la nouvelle mise en page automatique. Nous pouvons modifier ce nom de mise en page automatique en tant qu'éléments de menu. Ce n'est pas nécessaire. Ensuite, ce que nous pouvons faire, c'est modifier cette mise en page automatique. Concevez selon une disposition horizontale. Maintenant, nous allons vérifier la taille intermédiaire. La taille intermédiaire est 36. Faisons en sorte qu'il y en ait entre les deux et 36. Pour ce faire, sélectionnez la mise en page automatique et remplacez-la par 36. Comme ça. Maintenant, à l'étape suivante, nous devons placer ces deux sections ou section de logo et élément de menu dans même disposition horizontale. Pour ce faire, sélectionnez à nouveau la mise en page automatique ou l'ensemble d'éléments de menu et le logo en appuyant sur Shift et en appuyant sur Shift A pour créer une mise en page automatique. Encore une fois, nous changeons la mise en page automatique en disposition horizontale. Maintenant, en ce qui concerne l'alignement, faisons en sorte qu'il soit aligné au centre pour qu'il soit correctement aligné ou peut-être qu'une ligne située en bas au centre sera tracée. Maintenant, ce que nous devons faire, c'est cet espacement, ajouter cet espacement est vraiment facile Il suffit de changer la taille intermédiaire. Nous pouvons le modifier manuellement, mais il existe une meilleure option. est-à-dire, ajoutez cette taille entre les deux comme ceci, puis ce que nous devons faire est de la modifier pour remplir le conteneur. Maintenant, c'est parfaitement Line et à partir de là, nous pouvons changer la mise en page automatique ou le nom de la mise en page en menu comme celui-ci. Tu vois, c'est super propre et super facile. Si nous voulons modifier l'un de ces détails, il suffit de le modifier immédiatement. Par exemple, si nous voulons plus d'espacement, par exemple 50, nous pouvons simplement appuyer sur 50, mais dans ce cas, nous devons ajuster manuellement un par un Donc oui, vous pouvez être confus au sujet de la mise en page automatique, mais c'est très simple et allons-y étape par étape pour que vous compreniez parfaitement la mise en page automatique. Dans la section des héros, nous devons créer ces textes pour ce faire. J'appuie sur T et je clique ici, puis je passe à ce type de texte. Ensuite, je vais directement copier ce texte et le coller comme ceci. Ensuite, je vais le dupliquer, cliquer sur le texte et appuyer sur la commande C ou sur le contrôle C pour copier et V pour coller comme ceci. Ensuite, ce que nous devons faire c'est que nous en avons besoin quatre fois, puis je vais modifier ces textes comme ceci parce que dans cette leçon, nous nous concentrons principalement sur l'autoayou Dans les prochaines leçons, nous en apprendrons davantage sur la typographie et les couleurs Alors maintenant, à partir de là, dans un premier temps, créons ce bouton. Créons ce bouton, puis nous pouvons ajouter de l'espacement et le placer au centre, mais dans un premier temps, créons un bouton Comme nous l'avons fait auparavant, nous pouvons appuyer sur le texte du bouton et appuyer sur Shift A. Découvrons ensuite la mesure. Ce sont 16, 60 en haut et en bas et 20 à gauche et à droite, cliquez sur la mise en page automatique. Changeons son nom en BTN comme ceci. À partir de là, la gauche et la droite seront 220 et le haut et le bas 16. Maintenant, ajoutons cette couleur à ce bouton. Pour ce faire, cliquez sur Icône rapide dans le remplissage et cliquez ici, cliquez sur cette icône puis cliquez dessus, cliquez sur cette couleur. Nous concevons facilement le bouton parfait. OK. Maintenant, nous avons un espacement, l'espacement entre les deux est de 15 et ici nous en avons 20 Sélectionnons les éléments dont l'espacement est égal à 15. Avant cela, sélectionnons les éléments et appuyons sur Shift A pour créer une mise en page automatique, puis je changerai cette mise en page automatique en CtA et nous devons maintenant faire en sorte que cette mise en page automatique soit centrée Je vais facilement en faire un centre de ligne , puis nous devrons le placer au centre pour le faire. Sur la mise en page CtA, je définirai la largeur en tant que conteneur de terrain Ensuite, nous devons modifier la hauteur pour remplir le conteneur comme ceci. Maintenant, il devient centre et il faut encore ajouter l'espacement pour ajouter l'espacement, je vais sélectionner le Faisons en sorte que la taille intermédiaire 20, mais ici, la taille d' invitation est 15 Pour y remédier, sélectionnez tous ces éléments et appuyez sur Shift A, puis fixez la taille d'invitation à 15 OK, parfait. Nous concevons simplement la section des héros avec une mise en page automatique. Dans la leçon suivante, concevons également celui-ci. En fait, si nous le voulons, nous pouvons simplement le mettre comme ça et le voir dans l'aperçu. Je ressemble à ça 20. 2ème section de héros avec mise en page automatique: Bonjour, tout le monde. Créons cette deuxième section consacrée aux héros avec mise en page automatique. un premier temps, cliquez sur le cadre et sélectionnez la taille du cadre comme bureau, mettez-le comme ceci et changez le nom de ce cadre Hero two avec mise en page automatique. Maintenant, comme nous l'avons fait auparavant, ajoutons une grille de mise en page comme celle-ci. OK, alors ajoutons une mise en page automatique à ce cadre. J'appuie sur Shift A. Maintenant, je vais faire un écart horizontal entre zéro et les marges gauche et droite comme un pour T, et le haut et le bas seront nuls. Voyons maintenant ce que nous devons faire en premier. Tout d'abord, nous devons ajouter ce contexte. Pour ce faire, je vais cliquer ici et cliquer ici et cliquer sur le triangle, cliquer ici. Ensuite, nous devons voir 1 440 de largeur et 700 comme hauteur. Je pense que 700 c'est 700 ok. Maintenant, je vais cliquer ici et cliquer sur l'image Vidéo puis sur l'image. Voici l'image, cliquez ici et maintenant nous devons ajouter une couleur de fond blanche et l'opacité sera de 90 Cliquez ici, cliquez sur Remplir, changez ce champ en blanc et ce sera 90. Maintenant, vous voyez qu'à cause de cette marge de 140, l'image ou le fond est là. Nous devons sélectionner l'image de fond. Cliquez sur cette icône de mise en page automatique Igno. Maintenant, nous pouvons l'ajouter, l' ajuster comme bon nous semble, puis je le renommerai en BG Comme je l'ai déjà dit, ce n'est pas nécessaire, mais je vais le faire. Ensuite, je clique ici et je crée un cadre. Le nom du cadre sera hero. Ensuite, j'ajoute la mise en page automatique en sélectionnant le cadre du héros et en appuyant sur Shift A. Ensuite, je définis la largeur comme conteneur de remplissage En fait, dans les leçons précédentes, si je me souviens bien, je n'ai pas expliqué les paramètres. Familiarisons-nous avec ces paramètres. Tout d'abord, nous avons une largeur fixe. Si nous sélectionnons une largeur fixe et que nous pouvons ajouter ce que nous voulons, comme 200, l'objet sera de 200. Faisons en sorte que l'objet remplisse la couleur et le rouge. OK. Nous devons placer cette image de fond comme première couche du cadre. Sans cela, nous ne verrons pas le reste du cadre. Voici l'objet ou cadre sur lequel nous travaillons actuellement. Si nous la fixons à 300, la largeur fixe sera de 300. Si nous le définissons comme contenant à câlins, il sera ficelé jusqu'à ce que l' autre objet touche le cadre. Par exemple, créons un texte et faisons en sorte que ce texte soit hello world, et faisons-le bonjour. Maintenant, la largeur est de 300 car elle est fixe. Mais si nous sélectionnons le contenu du cœur, taille du contenu sera chaîne par chaîne. Par exemple, créons un rectangle différent ici, donc ce sera juste en fonction de l'élément à l'intérieur de cet objet ou à l'intérieur de ce cadre. Maintenant, cliquez ici et vous verrez peut-être cet espacement entre les cadres. C'est parce que nous avons dit que les rembourrages à gauche, à droite et en haut et en bas étaient dix Mettons-les à zéro pour que vous compreniez clairement OK. Nous avons maintenant un conteneur de remplissage. Si nous cliquons sur Remplir le conteneur, l'objet ou l'élément agrandira tout l' espace libre dont il dispose. Dans ce cas, nous ajoutons marge d'une partie comme mise en page automatique de la section héros. Ce cadre se trouve à l'intérieur de cette section de héros, il y a de l'espace libre entre les deux, il s'étendra jusqu'à que la marge de gauche atteigne ce cadre. C'est ça. A ici comme largeur d'administration et ajoutez la largeur maximale. Si nous cliquons sur Largeur d'administration ici, nous pouvons ajouter une largeur minimale. Si nous fixons la largeur minimale à 200 et que nous fixons la largeur minimale à 700, nous pensons maintenant que nous la réduisons comme ceci. Lorsque nous le rétrécissons, l' élément ou le cadre ne rétrécit pas une fois que la largeur minimale de 700 points l'atteint. Si nous avons une largeur maximale de 700, l'élément aura une largeur maximale de 700. La largeur de l'élément ne sera que de 700. Ils sont donc un peu avancés, mais vous vous en souvenez. En responsive design, cela vous sera utile. Maintenant, cela s'applique à la hauteur deux. Nous l'avons dit comme solution, nous pouvons ajouter une solution avec un récipient de remplissage, récipient Hug et une hauteur de menthe x. Commençons le travail. abord, je vais supprimer ces objets inutiles, puis supprimer la couleur de remplissage, sélectionner la section héros et la définir avec un conteneur de remplissage, et nous devons supprimer ce maximum et vouloir dire par comme ça. La hauteur sera alors de 700. OK. Nous devons définir cette taille de cadre à 1 440 OK. Maintenant, il faut ajouter ce logo et le texte. Je vais simplement appuyer sur la commande C pour copier et sur la commande V pour le coller. Ensuite, je vais simplement sélectionner tous ces éléments de menu et les copier car nous n'avons pas besoin de faire le style et nous avons également ce bouton. Sur le bouton, je copie simplement le texte. Le texte est blanc, commençons donc par le bouton. Voici le bouton, isolez-le et appuyez sur Shift A. Découvrons ensuite le bouton avec le hi, il mesure 16 x 16 et 37 x 37 comme taille. Voici le cadre du bouton. Renommons-le en VTN puis remplissons-le de couleur noire. Ensuite, nous devons en ajouter 37 comme rembourrage gauche et droit et 16 comme rembourrage en haut et en bas. Maintenant, nous devons réduire le coin à 60. Le bouton est créé Maintenant, nous devons sélectionner ces éléments de menu et à partir de là, nous avons les éléments de menu. L'élément de menu intermédiaire est de 25, venez ici comme ça, sélectionnez les éléments de menu et appuyez sur Shift A pour créer une nouvelle mise en page automatique ou regroupez-la et ajoutez la mise en page automatique. Ensuite, dans la mise en page automatique, nous devons définir la disposition horizontale. Ensuite, nous devons ajouter la taille intermédiaire comme 25 OK. Nous devons maintenant sélectionner ces trois éléments et appuyer sur Shift pour créer un groupe et ajouter un cadre. Ensuite, nous devrons en faire une mise en page horizontale. Maintenant, ça va ressembler à ça. Maintenant, ce que nous pouvons faire, c'est si nous le voulons, nous pouvons le renommer. Renommons-le comme menu et voici des éléments de menu comme celui-ci Cliquez ensuite sur la mise en page du menu et créons avec un conteneur de remplissage. Ensuite, nous devons définir cet article entre la taille automatique, appuyer sur Entrée, en fait, nous devons sélectionner celui-ci et définir la taille de l'article entre les deux comme automatique, comme ceci. Ensuite, nous devons le placer au centre pour le mettre au centre. Il faut cliquer ici comme ça. Le menu est créé et nous avons maintenant la marge supérieure en ajoutant le top pass 25. Faisons en sorte que ce soit 25. Sélectionnez-le et cliquez ici à partir d'ici, passez à 25. Parfait. Maintenant, nous devons ajouter ce message de bienvenue à ma section des finances, il se trouvera dans cette section dédiée aux héros. Copions-les tous en photo ici. Je copie juste d'ici comme ça. Pour ces boutons, nous devons créer une mise en page différente, je vais simplement copier le texte et ne copier que ce texte. Commençons à nouveau par les boutons. Avant cela, découvrons le bouton situé entre les deux côtés. C'est 18, 18, 24, 24. Cliquez ici pour passer de phase A à la mise en page automatique . Ce sera 24 et ici 18. Ensuite, la couleur de remplissage est la couleur noire. En fait, nous devons ajouter que la couleur de remplissage sera le noir et qu'en apparence, radier les coins à 60 Ensuite, nous devons faire de même pour ce bouton, en savoir plus. Res shift A. Ensuite, ajoutons d'abord un trait, cliquez ici et la taille du trait sera de deux. Je pense que c'est C, voyons voir. Oui, c'en est un. Faisons donc en sorte qu'il ne fasse qu'un. OK. Alors il a la même largeur d'élévation Oui, non, il a une largeur accrue à 33, 33, 33, 18, 80, 35, 30. Faisons en sorte que ce ne soit pas celui-ci comme 35, 18. Et faisons de même ici. Cliquez sur ce bouton En savoir plus et ici, passez à 35 18, puis réduisez le temps pour vous asseoir. Ensuite, surlignez, surlignez ces boutons et appuyez sur Shift A, puis créez la mise en page sous forme de mise en page horizontale. J'espère que vous comprenez bien cette option avec laquelle je travaille. Si vous ne comprenez pas d'abord, jouez avec. Il faut essayer encore et encore pour apprendre. Au début, j'ai fait de même. Si vous avez des questions, vous pouvez simplement me les poser dans la section message ou dans la section commentaires. Ici, nous avons un espacement de 30, ici, nous avons un espacement de 21 Vous voyez, lorsque nous créons un design sans mise en page automatique, nous pouvons obtenir des chiffres exacts. À titre d'exemple, ici , le pad inférieur est 19, mais le pad supérieur est 18. Ici aussi, nous en avons 21 comme taille intermédiaire, mais ça devrait être 20. Avec la mise en page automatique, nous pouvons facilement sélectionner ici et changer la mise en page automatique à deux. C'est pourquoi la couche d'apprentissage Oto sera un énorme avantage. Sélectionnons ensuite tous ces éléments et appuyons sur Shift A pour créer un groupe. Je vais renommer ce groupe en ctA et t N s BTN un, BTN, deux, alors maintenant faisons en sorte que la taille intermédiaire C'est 30 ? Juste ici 30, en voici 20. Pour ce 20, il suffit de sélectionner uniquement ces deux éléments et nous le déplaçons puis le changeons en. OK. Maintenant, ce que nous devons faire, c'est le mettre au centre. Pour créer ce centre, je vais ici et je définis la hauteur comme suit pour remplir le récipient. Ensuite, je définirai cet alignement comme un alignement au centre gauche. OK, c'est centré, et maintenant nous devons ajouter cette image. Donc, cette image vient également de l'extérieur de notre design, elle ne devrait donc pas avoir Outlet ou elle devrait ignorer l'Autoao Donc, d'abord, je crée un rectangle comme celui-ci et faisons-le avec 710 et 610 600. D'accord, alors je peux le faire ignorer Autoao et le mettre au-dessus comme ça Ensuite, je peux donner un pourboire où je veux. Donc pour l'instant, ajoutons-y une image. Cliquez ici, cliquez sur Image vidéo et sélectionnez l'image. Voici celui-ci. Cliquez ici, ajoutez-le. Donc, actuellement, il ne s'affiche pas, nous devons donc le mettre comme ça, puis cliquer dessus et changer de champ pour le recadrer et l'aligner comme ça. OK. La première partie est terminée. En fait, nous devons mettre cette image, ceci. OK. Maintenant, ça a l'air bien. En fait, nous devons mettre ceci savoir ce que nous devons faire est d'ajouter cette section. C'est facile de l'ajouter, je crée un nouveau cadre. Créons un nouveau rectangle comme celui-ci, il se trouvera sous la section du héros, pas à l'intérieur du héros. Maintenant, cela devrait être mis ici et plaçons la section des héros au-dessus. J'ai trouvé le problème dans notre cadre principal, nous devons définir la mise en page comme mise en page horizontale ou verticale. OK. Maintenant c'est ici. Maintenant, je vais le changer avec la hauteur, car 1 440 à 700, et non 700, c'est la taille ici 270. Testons 270. OK. Et pour celui-ci, nous devons faire de même. Cliquons sur Ignotayo et disons-le comme ça. OK, alors changez la couleur du champ en celle-ci Maintenant, nous devons ajouter le prime comme ceci et changer le nom de ce cadre surligner, je pense, pour Sakura C. Sélectionnez-le ensuite et appuyez sur Shift A pour créer une mise en page automatique et définir avec le conteneur Dash Fill. Et la hauteur sera de 270 à 70 comme ça. OK. Nous devons maintenant ajouter ces informations. Pour l'instant, je vais copier celui-ci, définir le cadre et le mettre à l'intérieur du cadre et nous devons faire cela à propos du cadre. Sans cela, nous ne verrons pas les détails du cadre. Ensuite, pour ce schéma de cadre, je vais le créer sous la forme d'une ligne au centre gauche. Maintenant, nous devons créer ces trois éléments, sélectionner celui-ci, puis copiez-le, collez-le comme ça. Copiez-le comme ça. Ensuite, je vais sélectionner ces deux objets et appuyer sur Shift A, puis la taille de la reine d'entrée est 15, sélectionner celui-ci et définir la taille de la reine d' entrée sur 50 OK. Et mettez-le également au centre. Faisons le centre. OK. Maintenant, faisons de même pour celui-ci. Comme pour ces deux objets, appuyez sur Shift A et placez-le au centre 15. Je vais maintenant sélectionner ces deux objets et appuyer sur Shift A pour créer une nouvelle mise en page automatique et définir une disposition horizontale comme celle-ci. Je vais maintenant sélectionner ce cadre de surlignage et définir la mise en page automatique comme mise en page horizontale. OK. Ensuite, il faut ajouter celui-ci. Ajoutons-le et sélectionnons ces deux objets, appuyons sur Shift A, puis définissons-le comme centre de mise en page vertical. Voyons maintenant entre les deux côtés. Le côté intermédiaire est 57, surligner tous ces cadres en fait, je peux le mettre dans ce cadre, sélectionner ce cadre et le définir comme 57, puis je convertirai ce texte en mise en page automatique en appuyant Shift A, en cliquant sur le cadre principal et en le définissant comme conteneur de remplissage, et ici nous avons la taille automatique comme taille intermédiaire. Il est parfaitement ajusté. Maintenant, si vous le souhaitez, vous pouvez renommer, mais pour l'instant, je ne vais pas le renommer alors voilà, voici notre deuxième section sur les héros avec mise en page automatique Le design ressemblera à ça. Maintenant c'est à votre tour, vous devez ajouter une mise en page automatique à cette section de héros, jouer avec Figma et essayer de le faire Je vous verrai lors de la prochaine leçon. 21. Section de design 3ème héros avec mise en page automatique: Bonjour, tout le monde. As-tu réussi à faire du bon travail ? Si ce n'est pas le cas, faisons-le ici et nous devons d'abord créer un cadre. Cliquez sur le cadre, définissez les tailles, le bureau, mettez-le comme ça, puis nous ajouterons une grille de mise en page. Cliquez ensuite sur cette grille d'appels. En fait, nous n'avons pas besoin de la mise en page. Mais avec la mise en page, il sera facile d'identifier où ira l'objet. Ensuite, nous devons d'abord ajouter ce menu pour ce faire, je vais appuyer sur Shift A pour ajouter une mise en page automatique à ce cadre. Je vais renommer ce cadre en 03 avec mise en page automatique. Ensuite, je supprimerai tous ces détails et ici je le mettrai à 140, notre marge à gauche et à droite, puis je la définirai comme une mise en page verticale avec une résolution alignée au centre. Maintenant, nous devons ajouter ce logo. Pour l'ajouter, nous devons créer un nouveau cadre, cliquer sur cette icône de cadre et créer un cadre. La taille de ce cadre sera de 223. Atteignons la hauteur 223 avec ce récipient de remplissage. OK. Maintenant, nous avons un problème. Non, nous pouvons gérer ce problème. Le problème, c'est que nous avons cette ligne, mais que notre cadre ne viendra qu'ici. La ligne n'ira donc pas jusqu'à la fin de ce cadre, mais ce ne sera pas le problème car nous pouvons l'ajouter sur l'image de fond. OK. Il faut maintenant ajouter ce logo. Pour ajouter ce logo, je vais créer un rectangle comme celui-ci. En fait, nous devons ajouter une mise en page automatique à ce cadre, le mettre en ardoise et appuyer sur Shift A pour ajouter une mise en page automatique. Ensuite, créez des propriétés et sa hauteur devrait être de 223 personnes 223. OK. Ensuite, nous devons ajouter ce logo. La taille du logo est de 192 pour la largeur et 92, et passons à la hauteur comme fond. Maintenant, ajoutez ce logo à ce rectangle comme ceci. La partie est terminée et en tant que deuxième partie, nous devons d'abord ajouter cet ensemble d' articles principaux. Je vais d'abord copier le menu d' accueil, puis sur le service électrique et nous contacter. Je vais tous les copier ici. Ensuite, pour cette maison, il faut ajouter cette petite flèche. Je vais le copier d'ici. Ensuite, je sélectionnerai la flèche et le texte d'accueil, le texte d'accueil, puis la flèche, puis j'appuierai sur Shift A. Ensuite, je définirai la mise en page en tant que disposition verticale, et entre les deux, la taille sera nulle. Voyons ce qu'il y a entre les deux, c'est 66 ça. OK. Alors je vais m'y mettre avec un C câlin comme celui-ci. Alors je dois le mettre devant comme ça. Ensuite, je sélectionnerai tous ces éléments de menu et appuierai sur Shift A pour créer une mise en page automatique d'un nouvel élément de menu. Et voyons voir en taille dix, il y a 50 entre les deux, la taille 50 comme ça. OK. Nous devons maintenant créer cette section américaine. C'est vraiment simple. Nous avons d'abord besoin du cirque. Nous allons copier ces deux cercles à partir d'ici, les mettre ici. OK. Ensuite, avant d'ajouter l'icône du pion, nous devons placer ces deux éléments au centre ce faire, je vais appuyer sur Shift A et ajouter la mise en page automatique. Mais avec la mise en page automatique, nous ne pouvons pas le faire car les éléments ne s'effondreront pas ou les éléments ne l'ajouteront pas devant un autre élément lors de la mise en page automatique. Nous devons cliquer sur cette mise en page Igno Auto. Je vais sélectionner ces deux cercles et cliquer sur Igno Autoayout Alors je peux le placer au centre comme ça. Ensuite, ce que nous devons faire, c'est sur cette icône mobile, je vais simplement la copier d'ici. Et sélectionnez ce cadre, mettez-le dans le cadre à l'intérieur du cadre, et je ferai de même pour lui. Ensuite, je vais sélectionner ces trois éléments et les placer au milieu comme ceci. OK. Maintenant, nous avons un problème. Ce cadre ne fonctionne pas comme nous le souhaitons, je vais donc le mettre à l'extérieur du cadre et le retirer. Ensuite, je vais sélectionner les trois éléments et appuyer sur la commande G pour le groupe E. Ensuite, j'appuie sur Shift A pour y ajouter une mise en page automatique. Ensuite, ce que nous devons faire est de cliquer sur ce cadre ou de le renommer en menu comme celui-ci et ici les éléments de menu ici, icône du téléphone, puis nous devons ajouter ces deux éléments Je vais juste les ajouter comme ça et les sélectionner tous les deux, appuyer sur Shift A, puis ajouter une mise en page verticale et c'est sympa. Je peux maintenant sélectionner ces deux éléments et appuyer sur Shift A pour créer la afin d' ajouter Otolaa à cette section Entre les deux, il y a une serviette, donc je la change simplement en serviette. OK. Tout va bien. Maintenant, je sélectionne ce cadre et je lui place l'article entre la taille Otto et il distribuera le tout de manière égale. OK. Nous devons maintenant ajouter cette image de fond. C'est vraiment simple. Cliquez simplement sur le rectangle, puis définissez la largeur sur 1 440 et voyons que la hauteur est 577 Ajoutons la hauteur à 577. OK. Maintenant, ce que nous devons faire est cliquer sur ce bouton ignooToaYou can, et maintenant nous pouvons ajouter Cliquez ici sur la vidéo, tracez l'image comme ceci. OK. Ensuite, il faut ajouter ce trait. Copions donc la couleur du trait et cliquons ici. Cliquez sur PA et sur Insides , sélectionnez le haut et deux, puis ce sera cette couleur OK. Nous devons maintenant créer cette section. Créons-le dans un premier temps, créons un cadre. En fait, nous n'avons pas besoin du cadre ici, mais je vais d' abord copier cette partie, la mettre comme ça. Cette partie ressemble au texte du bouton comme suit. Je vais cliquer sur le cadre et nous devons mettre ce texte à gauche. Cliquez comme ceci et cela ira vers la gauche et nous avons ici un problème. Nous avons une garantie de 100 % en bas, mais elle devrait être en haut. Je le sélectionne, je clique ici et je le mets en haut. Ensuite, nous avons ce bouton au milieu, en bas. OK, maintenant je vais cliquer sur Shift A pour créer un bouton. Les détails du bouton seront donc 25, 25, 30, 30. OK. Faisons 30 pour la gauche et la droite, 25 pour le haut et le bas, puis remplissons la couleur. Ajoutons cette couleur de remplissage. OK, c'est sympa. Maintenant, nous devons vérifier l'intervalle entre les deux. Taille à ajouter entre les tailles, je vais sélectionner tous ces articles et appuyer sur Shift A, puis la taille intermédiaire sera. OK. En fait, cela devrait être zéro. Il s'agit du rembourrage supérieur et inférieur, ou le rembourrage vertical devrait être de deux L. Maintenant, nous devons créer ce centre. Pour créer ce centre, nous devons appliquer une mise en page automatique comme ceci. Ensuite, pour créer ce centre, nous devons avoir un cadre de la même taille que cette image d' arrière-plan car actuellement, cette image d'arrière-plan ignore la mise en page automatique. Nous devons donc avoir un cadre qui n'ignore pas la mise en page automatique, donc je crée un cadre et j'appuie sur A alors cette hauteur sera de 577, puis il sera rempli comme ça Ensuite, je mettrai ce cadre dans un cadre nouvellement créé comme celui-ci. Maintenant c'est au centre. Maintenant, je peux le renommer en CTA ATN, comme ceci. Ensuite, je vais sélectionner celui-ci pour aligner le centre vers la gauche comme ceci. Ici, conteneur électrique OK. OK. Maintenant, il est centré sur les fabuleuses. Nous avons créé avec succès la deuxième section du troisième héros. Voyons le mode de prévisualisation. Dans les prochaines leçons, nous utiliserons page automatique pour concevoir des sites Web plus complexes. Nous n'avons créé que trois modèles. Si vous pensez que la mise en page automatique est si compliquée, recherchez simplement un design populaire sur Google et essayez d' imiter et de créer ce design sur Figma De cette façon, vous en apprendrez plus sur autoayout et sur la façon de l'utiliser efficacement Je vous verrai lors de la prochaine leçon. 22. Introduction au principe de conception UI/UX: Bonjour à tous. Jusqu'à présent, nous apprenons les principes fondamentaux de Figma et commençons à familiariser avec l'outil et créer des designs avec les fonctionnalités de Figma Concentrons-nous maintenant sur les principes de conception de YX. Lorsque nous créons un site Web personnalisé, nous devons avoir une idée principes de l' UIUX, car si nous n'appliquons pas principes et le concept de l' UIUX à notre objectif de conception le design ou l'objectif du site Web ne seront pas atteints Dans les prochaines leçons, nous apprendrons la hiérarchie visuelle, la mise en page, la typographie, la théorie des couleurs et nous devons connaître les principes de l'expérience utilisateur pour concevoir des sites Web personnalisés Je vous verrai lors de la prochaine leçon. 23. Hiérarchie visuelle: Bonjour, tout le monde. Imaginez-vous entrer dans une nouvelle pièce. Vous devez d' abord savoir où chercher et comment vous y retrouver. C'est exactement ce que fait la hiérarchie visuelle sur un site Web. Alors décomposons-le. hiérarchie visuelle est la façon dont nous organisons les choses sur le site Web pour montrer ce qui est le plus important. Certaines choses doivent attirer l'attention immédiatement , tandis que d'autres peuvent être remarquées plus tard. la hiérarchie est bonne, plus il est facile d'utiliser le si. Ajoutez une hiérarchie visuelle à notre design, nous devons principalement tenir compte de trois choses. Le premier est la taille, les grandes choses attirent d'abord l'attention. Pensez à un gros titre de journal. Il se démarque. Il en va de même pour les sites Web. titres ou les boutons importants doivent être plus grands que les autres éléments de la page. Ensuite, il faut tenir compte de la couleur et du contraste. Les couleurs vives attirent votre attention, couleurs sombres ou ternes si vous voulez que quelque chose ressorte comme un bouton, utilisez une couleur qui saute aux Par exemple, un bouton rouge sur fond blanc sera rapidement remarqué. Ensuite, nous devrions envisager l' espacement et le placement. Nous devons donner de l'espace aux choses importantes. Lorsque nous ajoutons plus d' espace autour de l'élément, il se démarque davantage. Si les choses sont trop rapprochées, il peut être difficile de se concentrer. La hiérarchie visuelle guide l'utilisateur sur votre site Web. En ajustant la taille, la couleur et l'espacement, vous pouvez leur montrer ce qui est important sans même qu'ils s'en rendent compte 24. Apprendre la typographie: Bonjour, tout le monde. La typographie est simplement la façon dont nous choisissons une police de caractères sur un site Web pour la rendre belle et facile à lire Il joue un rôle important dans la création d'une expérience utilisateur exceptionnelle. Voici quelques informations rapides que vous devez connaître sur la typographie Typographie. Cela fait référence au design de la police, comme la police area times Nur Rome ou Roboto Une police est un ensemble de caractères, de lettres, chiffres et de symboles qui partagent le même caractère typographique et le même style E. Ensuite, nous avons la largeur de police. Cela fait référence à l' épaisseur de la police, telle que la police normale ou. Ensuite, nous avons fonttyle. Cela inclut les variations telles que l'italique, l'oblique ou condensé. Lorsque vous choisissez une police de caractères pour votre site Web, privilégiez toujours la lisibilité Choisissez une police facile à lire à l'écran. Évitez de superposer des polices décoratives ou complexes. Cohérence Respectez un nombre limité de polices de caractères sur votre site Web pour maintenir la cohérence. Je recommande de n'utiliser que deux types de polices, un pour le titre et un autre Ensuite, vous devriez penser à l'identité de marque. Votre police de caractères doit reproduire la personnalité et les valeurs de votre marque Ensuite, nous devons prendre en compte le contexte. Cela signifie que le contenu et l'objectif de votre site Web influenceront le type approprié Voici donc quelques conseils pour une bonne typographie Utilisez une taille de police différente avec un style pour créer une hiérarchie visuelle claire, assurez-vous que l'espacement entre les lettres et les mots est correct pour une lisibilité optimale Créez un contraste entre le texte et l'arrière-plan pour améliorer la lisibilité Limitez les lignes de texte à une longueur raisonnable pour éviter la fatigue oculaire. Choisissez ensuite des couleurs de texte faciles à lire et qui complètent l'arrière-plan. La typographie est essentielle pour rendre votre site Web facile à lire et à afficher visuellement 25. En savoir plus sur la police: En ce qui concerne les polices, vous entendrez souvent parler de serif et de Cancerif Les polices Serif ont un petit trait à la fin de leurs lettres. Pensez aux neurones temporels ou à la Géorgie. Ils sont parfaits pour créer une atmosphère traditionnelle et formelle et sont souvent utilisés pour longs passages de texte, comme dans des livres ou des blogs. autre côté, Sanserifont ne possède pas ces antennes Etroke supplémentaires. Helvatica et Robot en sont D'un autre côté, Sanserifont ne possède pas ces antennes Etroke supplémentaires. Helvatica et Robot en sont des exemples. Ces téléphones sont audacieux, modernes et parfaits pour les titres ou les gros titres. Ils fonctionnent également bien sur les appareils mobiles car ils sont clairs et faciles à lire. Voyons quel type de marque et quel type de design utiliseront ces téléphones Sans et Sanserif Souvenez-vous donc toujours de la lisibilité du goût. Ici. Ici. 26. Comment trouver des polices en utilisant les polices Google: Bonjour, tout le monde. Nous connaissons maintenant la typographie Découvrons où et comment trouver la tipographie d'écriture pour vos projets Le meilleur endroit est Google Phones. Vous pouvez accéder aux téléphones Google en vous rendant phons.google.com et vous arriverez à Ici, nous avons beaucoup de polices à choisir. Nous pouvons donc simplement faire défiler la page vers le bas comme ceci et trouver meilleures polices ou nous pouvons utiliser ces filtres pour filtrer les polices. Trouvons des polices pour les titres. Ici, je vais définir la taille du titre à 60. Testons 60. Ici, nous pouvons taper le titre réel. J'ajouterai quelque chose comme votre guide pour un mode de vie équilibré et plus sain, puis je sauterai cette langue. Ici, nous avons le type Serif et le type de sensori, donc je ne sélectionnerai Maintenant que nous obtenons les polices filtrées, nous pouvons les vérifier et trouver la meilleure police. Ici, nous avons cette dernière police, je vais donc cliquer dessus savoir plus sur cette police. Donc, si nous ajoutons cette police aux paragraphes, elle ressemblera à ceci, et notre plan est de l' ajouter à l'en-tête. Maintenant, je vais cliquer sur ce bouton de police G et il s' ajoutera à cette section de police sélectionnée, et encore une fois, je vais passer aux polices. Maintenant, je dois trouver une police pour les paragraphes. Pour cela, je vais ajouter ce type de paragraphe ici. Ensuite, changeons la taille à 20 et nous sélectionnerons le téléphone sensoriel. Ici, nous pouvons vérifier les polices qui conviennent à notre projet. recherche de cette police dépend toujours du type de site Web que vous concevez. Dans ce cas. Il s'agit d'un site Web pour les entraîneurs de fitness, je vais donc sélectionner ce sens du travail et ici, nous pourrons vérifier les détails. Donc, si nous ajoutons ceci, cela ressemblera à ceci. Nous pouvons maintenant cliquer sur ce téléphone Gate. Après avoir cliqué ici, je peux trouver les polices que j'ai sélectionnées. Dans Figma, nous avons la bibliothèque de polices Google. Je vais ouvrir notre fichier Figma et ici, sélectionnons simplement celui-ci et je cliquerai sur cette police et nous avons la police ici Ici, nous pouvons sélectionner polices Google et maintenant nous pouvons obtenir les polices Google. Si nous sélectionnons ces polices RL, nous pouvons trouver des polices E. C'est le moyen le plus simple de trouver des polices pour nos projets. Je vais passer aux polices et si vous souhaitez vérifier les polices SEI, nous pouvons cliquer ici et nous aurons la police SE que nous pourrons utiliser sur notre site Web. Dans quelques leçons, nous utiliserons ce site Web de polices de Google pour sélectionner les polices pour notre projet. 27. Comment utiliser la psychologie des couleurs: Les couleurs jouent un rôle crucial dans la conception Web, influençant la façon dont les utilisateurs perçoivent votre site Web et interagissent avec celui-ci. Qu'est-ce que la psychologie des couleurs ? La psychologie des couleurs est l'étude de la façon dont les couleurs affectent nos émotions, nos modes et nos comportements. Les différentes couleurs évoquent différents sentiments et associations Par exemple, le rouge est souvent associé à l'énergie, la mode et à l'enthousiasme, tandis que le bleu est lié à confiance et à la fiabilité. C'est pourquoi des marques comme Coca Cola utilisent le rouge et des marques comme Linked in et la plupart des banques de confiance utilisent le bleu comme couleur principale Comprendre la psychologie des couleurs peut vous aider à créer des sites Web qui trouvent un écho auprès de votre public cible et évoquent les émotions souhaitées. Voici quelques conseils. Choisissez des couleurs qui correspondent à la personnalité de votre marque et quelles émotions souhaitez-vous susciter chez vos utilisateurs Assurez-vous que votre texte et vos graphiques sont faciles à lire et visuellement attrayants. Testez différentes combinaisons de couleurs pour voir ce qui fonctionne le mieux. La théorie des couleurs et la psychologie des couleurs sont des aspects essentiels de la conception Web. En comprenant comment la couleur affecte nos émotions et nos comportements, vous pouvez créer un site Web non seulement visuellement attrayant, mais également fasciné émotionnellement. Consultez ce guide des émotions liées aux couleurs. Dans ce guide, vous verrez de nombreuses marques populaires et leurs couleurs. Vous verrez également des détails sur les émotions, l'humeur et les comportements de ces couleurs. Téléchargez cette image dans la section des ressources et étudiez-la lorsque vous créez un site Web qui n'a pas de couleur de marque ou si vous essayez de redessiner sa marque, utilisez ce guide émotionnel sur les couleurs et trouvez des couleurs adaptées à leur marque Je vous verrai dans la prochaine leçon 28. Qu'est-ce que les règles 60-30-10: En design d'intérieur, nous avons un concept appelé règle 603010. Nous pouvons appliquer cette règle 603010 pour notre site Web personnalisé. Cette règle contribue à donner à votre site Web une apparence équilibrée et attrayante. Qu'est-ce que la règle 603010 ? La règle 603010 divise les couleurs de votre design pour plus d'harmonie. Voici comment cela fonctionne. 60 % est votre couleur dominante. Il devrait couvrir la majeure partie de votre site Web et définir l'ambiance générale. 30 % est votre couleur secondaire. Il soutient la couleur dominante et ajoute de la profondeur, 10 % étant votre couleur d'accent. Utilisez-le pour surligner le bouton une fonctionnalité importante pour attirer l'attention. Découvrons comment l'utiliser. Commencez par choisir vos palettes de couleurs, sélectionnez une couleur dominante pour votre marque, une couleur secondaire qui va bien avec elle et une couleur d'accent qui apparaît, puis utilisez la couleur dominante pour l'arrière-plan et la zone principale La couleur secondaire fonctionne bien pour les barres latérales et le titre. Réservez la couleur d'accent pour les boutons et. En suivant cette combinaison de couleurs, gardez votre site Web propre et organisé, en évitant toute sensation de chaos. Après avoir appliqué la règle 603010, obtenez les commentaires de vrais utilisateurs voyez ce qu'ils pensent de la couleur et du design Apportez ensuite les modifications nécessaires. Rappelez-vous également qu'il s'agit d'une règle, ce qui signifie que nous pouvons enfreindre les règles. Si vous pensez que la règle 603010 ne convient pas à certaines sections de votre site Web, vous pouvez la modifier Voyons un exemple qui utilise efficacement cette règle 603010 Vous voyez, la règle 603010 est un excellent guide pour créer un design Web attrayant En l'utilisant, votre site Web sera équilibré et engageant. 29. Qu'est-ce que le design centré sur l'utilisateur: Bonjour, tout le monde. Parlons d' un concept très important dans la conception Web, le design centré sur l'utilisateur et des raisons pour lesquelles il est crucial pour les sites Web. La conception centrée sur l'utilisateur signifie créer un site Web qui se concentre sur ce les utilisateurs ont besoin et veulent au lieu de concevoir pour ce que vous pensez être beau. Vous concevez pour rendre les choses faciles et utiles pour les personnes qui visitent le site. Imaginons cela comme la construction d'un magasin. Vous organiseriez tout de manière à permettre aux clients de trouver facilement ce qu'ils recherchent. Si les choses sont difficiles à trouver et confuses, les clients quitteront le magasin sans rien acheter. La même idée s'applique aux sites Web. Un site Web doit résoudre un problème ou répondre à un besoin de l'utilisateur. Si ce n'est pas le cas, les visiteurs partiront rapidement. Voici quelques raisons pour lesquelles il est si important de se concentrer sur l'utilisateur. Lorsque vous facilitez la navigation sur le site, les internautes peuvent rapidement trouver ce qu'ils recherchent. Cela signifie qu'un plus grand nombre de personnes restent sur votre site. Lorsque les utilisateurs pensent que le site Web est fait pour ils sont plus susceptibles de rester plus longtemps et d'explorer davantage. Si l'utilisateur peut facilement trouver ce dont il a besoin, comme un produit ou une information, plus enclin à agir, qu' il s'agisse de lier quelque chose, de s'inscrire ou de vous contacter. Voyons un exemple. Supposons que vous conceviez un site Web pour une épicerie locale. Si les clients viennent surtout pour acheter du riz, des légumes et de l'epe, vous devez vous assurer qu' ils sont faciles à trouver sur la page d'accueil Vous ajouterez également une barre de recherche claire et suggérerez peut-être même un produit connexe pour faciliter vos achats. Voyons un autre exemple. Si les parents utilisent un site pour consulter les actualités scolaires ou les résultats des examens, ces liens doivent être faciles à trouver directement sur la page d'accueil avec des étiquettes claires. Voici quelques conseils simples pour vous assurer que votre site Web se concentre sur l'utilisateur. Avant de concevoir, demandez-vous qui visite le site. Que veulent-ils faire ? Sachez à quel moment votre audience est essentielle. Vous pouvez également faire des recherches sur vos concurrents et découvrir le type de design et les tactiques qu'ils utilisent sur leur site Web. Les utilisateurs ne devraient alors jamais se sentir perdus. Utilisez des étiquettes de menu et des boutons clairs qui les aident à se déplacer facilement sur le site. De plus, de nombreux utilisateurs du monde entier utilisent également leur téléphone . Assurez-vous que votre site Web fonctionne également bien sur les appareils mobiles. Non seulement cela, ne vous fiez pas uniquement à votre propre opinion. Montrez le site Web à vrais utilisateurs et observez comment ils interagissent avec. Leurs commentaires vous aideront à améliorer le design. L'utilisateur est au cœur du succès d'un site Web. concentrant sur ce dont ils ont besoin et en vous assurant que le site est facile à utiliser, vous créerez un site Web plus efficace qui incitera les visiteurs à revenir. N'oubliez pas que le design ne se limite pas à l'apparence d'un site Web, mais à la façon dont il fonctionne pour les utilisateurs. 30. Qu'est-ce que le principe de KISS: Bonjour, tout le monde. Parlons du principe du baiser. Kiss représente Keep It Simple, Stupid. Lorsque nous concevons des sites Web, nous devons nous assurer que l'utilisateur peut trouver ce qu'il recherche rapidement et sans confusion. Si un site Web est trop compliqué, le visiteur peut être frustré et partir. Donc, en suivant le principe du baiser, assurez-vous que notre site Web se charge rapidement, facile à naviguer et que son contenu soit clair. Alors, comment postuler en conception de sites Web. Décomposons-le en quelques étapes. Tout d'abord, simplifiez la mise en page. N'encombrez pas vos pages avec trop d'éléments. Une mise en page claire et simple permet aux utilisateurs de se concentrer facilement sur ce qui est important. Utilisez une navigation claire. Faites en sorte que votre menu et vos liens soient simples et directs. N'ayez pas trop de catégories. Je m'en tiens à l'essentiel pour que les utilisateurs ne se perdent pas. Utilisez moins de couleurs et de polices. Une palette de couleurs simple et une à deux polices de caractères suffisent généralement pour les professionnels. Un trop grand nombre de couleurs ou de polices peut rendre le site Web désordonné et difficile à lire Dans les leçons de typographie et de psychologie des couleurs, nous découvrirons les avantages d'avoir deux polices et la règle 603010 pour maintenir l'harmonie des couleurs de notre site Web Ensuite, vous devez vous concentrer sur le contenu essentiel. Montrez d'abord le plus important. Par exemple, sur un site Web de soins de santé, patient peut vouloir savoir comment prendre rendez-vous ou trouver un médecin. Rendez ces informations faciles à repérer, puis testez-les avec de vrais utilisateurs. Parfois, ce que nous pensons simple peut encore être source de confusion pour les autres. Testez toujours votre design auprès de vrais utilisateurs pour voir s'ils peuvent facilement naviguer sur le site et en comprendre le contenu. Pensez à la page d'accueil de Google. Google est l'un des sites Web les plus simples du marché. Juste un logo, une barre de recherche et des boutons. Pourtant, c'est l'un des sites les plus efficaces jamais créés. Pourquoi ? Parce que c'est lié au principe du baiser. 31. En savoir plus sur la portée du projet: Bonjour, tout le monde. Parlons du projet ICO. Considérez le projet iCov comme une carte du parcours de votre site Web. Cela vous aide à vous perdre, faire des erreurs ou à mettre trop de temps à terminer votre site Web. Il est essentiel de savoir ce dont vous avez besoin avant de commencer à concevoir . Imaginez-vous en train de construire une maison. Vous ne commenceriez pas sans connaître le nombre de pièces dont il a besoin quel matériel utiliser ? Il en va de même pour la conception de sites Web. Project iCope vous aide à comprendre les besoins des clients Veulent-ils un site simple ou un site plus vaste, avec une chronologie Combien de temps vous reste-t-il pour terminer ? Ensuite, le budget, puis les fonctionnalités clés telles que y aura-t-il un blog, boutique en ligne ou un système de réservation ? Dans la prochaine leçon, nous allons commencer à définir notre projet ICO, notre premier site Web. Cependant, parfois, même avec le projet disco, des défis se présentent. Si un client souhaite plus de salaires ou de fonctionnalités plus tard, cela ne se fera pas comme prévu. Pour éviter ce type de problèmes, nous devons définir des attentes claires dès le départ. Indiquez-leur le délai et coût de l'ajout de nouvelles fonctionnalités ultérieurement. La création d'un contrat est le moyen de gérer ces problèmes. 32. Qu'est-ce qu'un mood board: Bonjour, tout le monde. Parlons des moodboards et des raisons pour lesquelles ils sont si spéciaux pour trouver du design, l'inspiration et pour comprendre ce que font les concurrents. Alors, qu'est-ce qu'un moodboard ? Un moodboard est comme un collage numérique qui montre le style et l'ambiance que vous souhaitez pour votre C'est un excellent moyen de réfléchir visuellement avant de commencer à concevoir Pourquoi avons-nous besoin d'un moodboard ? Il peut être difficile de partir de zéro. Un moodboard vous aide à vous inspirer du design d'autres sites Web et des sites Web de vos concurrents Non seulement cela, comme les bannières, les publicités liées à la marque de votre entreprise ou même tout autre design qui stimule votre créativité. Il est facile de se laisser distraire par les nouvelles tendances. Un moodboard vous permet de rester sur la bonne voie en vous rappelant votre vision initiale Avant de concevoir, examinez ce que font vos concurrents. Un moodboard vous permet de créer et de comparer leur design, afin de créer quelque chose d'encore meilleur. Découvrons donc comment créer un moodboard. Tout d'abord, consultez le site Web de votre domaine. Qu'est-ce que tu aimes ou n'aimes pas ? Réalisez ensuite des captures d'écran et enregistrez les images qui vous inspirent. Alors, où trouver l'inspiration en matière de design ? Créez Moodboard. Vous pouvez consulter directement site Web de vos concurrents et rechercher des designs de sites Web sur des sites Web tels que Dibble, Pinterest, Figma Community et BNS Très bientôt, nous créerons un moodboard et une inspiration de design cool pour créer notre premier site Web 33. Comment créer une palette de couleurs: Bonjour, tout le monde. Nous connaissons maintenant la théorie des couleurs et la psychologie des couleurs. Créons notre première palette de couleurs. J'utilise ce site coolers.co pour générer la palette de Accédez à ce site Web, puis cliquez sur C'est le générateur, et je supprimerai celui-ci ici. Selon la règle 603010, nous n'avons besoin que de trois couleurs Je vais en supprimer deux. Nous avons maintenant trois couleurs. Prenons notre exemple en tant que site Web immobilier. Maintenant, je suis sur l'image du guide des émotions en couleur, je vais donc ajouter l'URL de cette image dans la section des ressources. Ici, pour un vrai site Web d'État, l' image de marque principale sera la confiance et nous pouvons envisager la clarté Selon cette image couleur, vous pouvez sélectionner une couleur bleue et une autre couleur orange. Si vous avez toujours des doutes, nous pouvons aller sur Google et rechercher quelque chose comme un design de bannière réalisé Ensuite, je vais passer à ces images sur les images, nous pouvons voir que beaucoup d'entre elles ont une couleur comme le bleu et certaines d'entre elles ont des couleurs avec le bleu foncé et l'orange. Prenons un autre exemple. Maintenant, je pense que nous avons besoin de couleurs de marque ou de couleurs de site Web pour le commerce de la crème glacée. Dans ce cas, nous pouvons sélectionner le rouge. Il y a de l'enthousiasme et ce sera parfait. Comme nous pouvons sélectionner cette couleur conviviale. Si nous allons ici et faisons une recherche comme une bannière commerciale de crème glacée nous avons ici , nous avons ici quelques images et beaucoup d' entre elles sont de couleur rouge. Passons maintenant à notre premier exemple de design, qui sera l'immobilier. Je vais y retourner et ici, je vais sélectionner ce design afin que nous puissions obtenir cette couleur bleue pour le faire. Je vais aller sur ce coolers.co et je vais le mettre de ce côté, puis je vais cliquer ici et je vais mettre de ce côté, puis minimiser cela et maintenant nous avons notre première couleur, le bleu pour le sélectionner, je clique ici et ici, nous avons ce suffit de cliquer dessus et maintenant je peux sélectionner la couleur comme celle-ci. Ce sera la couleur bleue et ici, nous aurons besoin de couleurs blanches. Je vais le définir comme couleur blanche. Ensuite, je cliquerai sur ce journal pour enregistrer cet élément, afin que cette couleur ne change pas, puis je vais également enregistrer celui-ci Ensuite, nous devons trouver notre troisième couleur. Pour trouver notre troisième couleur, nous appuyons sur Shift sur le clavier, nous pouvons voir ce type de changement de couleur, mais dans notre cas, nous pouvons sélectionner la couleur jaune De plus, si nous consultons ce guide des émotions en couleur, nous pouvons sélectionner cette couleur verte, mais dans ce cas, sélectionnons cette couleur orange. Ici, je vais sélectionner ici et sélectionner le sélecteur, sélectionner la couleur orange Si je veux, je peux changer de couleur pour le moment, je vais le mettre comme ça. Maintenant j'augmente la taille de cette fenêtre, voici notre arbre de couleurs. Maintenant, il y a un problème. Lorsque nous sélectionnons la couleur, nous devons toujours vérifier le contraste et la lisibilité Il existe un outil pour vérifier ce contraste. Pour ce faire, je vais aller sur color.adob.com puis vous arriverez Ici, je vais cliquer sur Vs puis nous avons cet outil d'accessibilité, case à cocher, donc je le sélectionne et je coche celui-ci Ici, nous pouvons vérifier le contraste et la lisibilité des couleurs Maintenant, je viens ici et je copie ce code couleur et mettons-le comme couleur de texte. Ensuite, je vais changer la couleur de fond en blanc B F ici. Maintenant, le rapport de contraste est bon, mais si nous utilisons cette couleur, ce sera un test pour 17 fixels et Blofon Vous allez vérifier ici qu'il échoue. Si nous l'augmentons, le contraste des couleurs sera amélioré et le test sera accéléré. Nous devons maintenant changer cette couleur un peu plus foncée. Je vais le dire comme ça. Ceci. La raison en est que si nous choisissons ces couleurs sur notre site Web, nous devrons ajouter un paragraphe à cette couleur bleue. Je copie ce code couleur et je viens ici. Ensuite, ils voient que le rapport de contraste est correct et changeons que l' arrière-plan sera superbe. Ensuite, vérifiez-le avec cette couleur orange. Pour ce faire, je vais définir cette couleur de texte comme celle-ci et ajoutons ceci Ajoutons cette couleur comme couleur B. OK. J'ai également réussi le test, mais si cela donne plus de brillance, ça le sera, ça passera aussi le goût. Changeons la couleur du texte et la couleur d'arrière-plan. Je vais travailler parfaitement et voyons si cela fonctionne avec la couleur blanche. Voyons voir. Lorsque nous l' couleur du texte et à la couleur d'arrière-plan sous forme de blanc, ajouterons à la couleur du texte et à la couleur d'arrière-plan sous forme de blanc, cela signifie que nous ne pouvons utiliser que cette couleur orange avec des couleurs bleu foncé. Lorsque vous sélectionnez une palette de couleurs pour votre site Web, vérifiez toujours le contraste des couleurs et cela contribuera à améliorer la lisibilité de notre site Web Rappelez-vous également que la plupart du temps, les couleurs noir et blanc seront deux des couleurs de notre site Web, mais parfois la couleur noire sera un peu moins foncée. Cependant, la plupart du temps, ces deux couleurs seront les couleurs que nous utiliserons comme couleurs de fond et de test. Ensuite, nous devons trouver notre couleur primaire et nous pouvons sélectionner cette couleur primaire fonction de la couleur emotion guin. Dans ce cas, nous le sélectionnons en bleu. 34. Comprendre les étapes de design web personnalisé: Bonjour, tout le monde. Je crée simplement une étape pour terminer un projet de conception Web. C'est l'étape essentielle que nous allons utiliser pour créer un site Web réussi pour nos clients Vous pouvez utiliser cette liste et suivre l'ITF lorsque vous concevez un site Web pour vrais clients. Nous pouvons également utiliser cette étape pour suivre ce cours Tout d'abord, nous avons la réunion avec le client. Il s'agit de comprendre l'objectif, les besoins et les attentes du client . Créez ensuite un contrat. Il définira les livrables, les délais et les conditions de paiement Ensuite, le client est d'accord avec le contrat, nous allons commencer la conception. Dans un premier temps, nous créerons un moodboard et collecterons les inspirations de design et les designs des concurrents De cette façon, nous pouvons vérifier comment nos concurrents utilisent leur site Web pour résoudre leur problème et aider leurs clients. La création d'un moodboard est très importante pour trouver l'inspiration Nous ne nous contentons donc pas de copier des conceptions Web, nous allons vérifier l' apparence de cette conception Web créer une meilleure version et créer un site Web unique Ensuite, nous devons créer un plan du site. Le plan du site permet de comprendre le type de pages de notre site Web et de comprendre et de planifier la structure du site Web. Ensuite, nous devons sélectionner les polices de caractères pour notre site Web. Lorsque nous sélectionnons des polices, nous avons choisi une typographie qui correspond à la marque et ces polices doivent être lisibles et faciles à comprendre Ensuite, il faut sélectionner les couleurs. Nous devons donc créer une palette de couleurs qui correspond à l'identité de la marque. Alors, vous souvenez-vous de la règle 603010 ? Nous utiliserons la règle 603010 pour créer la palette de couleurs. Ensuite, nous devons créer une interface utilisateur. Il s'agit de concevoir l' interface utilisateur avec des boutons, des icônes et une mise en page. Nous utilisons donc Figma pour concevoir ces interfaces utilisateur et en créant « oui » avant de concevoir le site Web, cela nous aidera à bien comprendre le site Web rechercher notre client Ensuite, nous pourrons recueillir leurs commentaires et apporter les modifications nécessaires Ensuite, nous devons générer du contenu. Il s'agit d'écrire et de rassembler du texte, des images et des médias pour un site Web. réunion avec le client, nous pouvons lui demander du contenu et lui dire que nous utilisons l'IA pour générer du contenu. Ainsi, pendant que nous concevons la section du site Web, nous pouvons générer du contenu. Ensuite, il faut choisir une plateforme. Dans ce cas, nous allons sélectionner WordPress comme plateforme, et il s'agit d'installer WordPress et d'installer les plugins nécessaires, puis de concevoir le site Web. Il s'agit de créer et d'installer le site Web conformément à la conception de l'interface utilisateur. Ensuite, nous mettrons en place un outil d'analyse. Il s'agit d'installer des outils tels que Google Analytics, Google Recapture, Google Search Console pour vérifier les performances de suivi Ensuite, nous devons mettre en place des formulaires, ce qui signifie que si nous créons un formulaire de contact, formulaire d' inscription, un formulaire, nous devons nous assurer qu' il fonctionne parfaitement. Ensuite, nous devons améliorer la sécurité. Améliorer la sécurité signifie configurer le certificat SSL, installer des plugins de sécurité et des plugins de sauvegarde. Ensuite, nous devons améliorer la vitesse du site Web. Pour ce faire, nous utiliserons des plugins. , nous pouvons charger Ensuite, nous pouvons charger le site Web et, si vous fournissez une assistance supplémentaire, ce sera la dernière étape que nous devrons franchir. Il s'agit de l'ETF et de la plupart de ces ETF, il vaut mieux informer des mises à jour Il est toujours préférable d'informer nos clients de ce que nous avons fait. Par exemple, si nous créons un mood board et que nous pouvons le partager avec notre client nous pouvons le laisser choisir des sections ou partager son opinion sur les designs. Ensuite, lors de la conception du site Web, nous pouvons parler au client et obtenir informations. Lorsque nous sélectionnons des images, si le client ne fournit pas ces images, nous pouvons collecter quelques liens vers des images et les partager avec le client. Il choisira la meilleure image pour le site Web. Avoir une conversation saine avec le client et obtenir ses commentaires nous aidera à compléter nos sites Web sans trop de révisions. Commençons le processus de conception. 35. Créer une proposition de projet et une checklist des exigences: Lorsque vous recevez un projet de conception Web d'un client, vous devez avoir un moyen d'obtenir des informations claires sur exigences du client et une brève idée du site Web que vous allez créer. Non seulement cela, vous devez également définir clairement ce que vous fournissez à votre client coût et le calendrier du projet. Pour réaliser ces deux tâches, nous devons disposer d'une liste de questionnaires et d'un contrat. Si vous ouvrez ce fichier communautaire complet de ressources de conception Web personnalisées de la FEMA, vous verrez la section intitulée Project ICO Dans ce projet Icope, nous avons ce tableau appelé exigence de conception Web Lorsque vous contactez votre client par appel vidéo ou que vous envoyez simplement un message texte à votre client, vous pouvez lui demander ces informations et obtenir la réponse des clients. De cette façon, vous aurez tous les détails que vous souhaitez pour concevoir un site Web personnalisé pour votre client. Lorsque vous aurez rempli cette liste de contrôle des exigences en matière de conception Web, vous aurez toutes les informations dont vous avez besoin pour démarrer le projet Ce fichier est également modifiable. Vous pouvez poser ces questions à votre client ou vous pouvez partager ce fichier avec votre client en cliquant sur ce bouton de partage puis en sélectionnant ce que tout le monde peut modifier, puis en cliquant sur Enregistrer et en cliquant sur le lien de copie. Ouvrons-le ensuite dans une nouvelle fenêtre. Le client peut désormais modifier ce fichier lorsqu'il se connecte au Figma. De plus, lorsque vous faites cela, vous pouvez créer un nouveau fichier Figma Allons sur Figma et cliquez sur Nouveau fichier de design. Ensuite, vous pouvez simplement cliquer ici et appuyer sur Ctrl ou Commande C, puis le coller ici. De cette façon, vous comprendrez clairement le projet. Ici, vous pouvez ajouter le nom du projet comme Doctor John Cleaning like this. Vous pouvez ensuite partager ce fichier avec vos clients. Ensuite, vous pouvez simplement cliquer ici et modifier cette réponse lorsqu'il répondra à ces questions. Une fois que vous avez obtenu toutes ces informations, vous pouvez créer une proposition de projet. Il s'agit d'une proposition de projet simple mais efficace que vous pouvez utiliser dans le cadre de projets de conception Web et donner au client une idée claire de ce que vous faites coût et du type de mode de paiement que vous acceptez, etc. Lisez la proposition et vous devrez modifier les éléments sur ces crochets en fonction de votre projet. Le moyen le plus simple est d'appuyer sur Commande ou Ctrl F. Ensuite, recherchez ce support comme suit. Ensuite, vous pouvez voir les endroits où se trouvent les crochets. Non seulement vous pouvez modifier les livrables du projet et la structure de paiement de la durée du projet, mais vous pouvez également modifier toutes ces informations fonction de votre projet dans les prochaines leçons, je vais vous montrer comment les modifier pour notre premier projet Je vais fermer celui-ci. Toujours dans cette liste de contrôle des exigences de conception Web, si vous devez ajouter d'autres colonnes ou ajouter plus d'informations, vous pouvez simplement sélectionner le pro et appuyer sur C ou Commande C et sur Ctrl ou Commande V pour le coller Passez en revue les exigences de conception Web et la proposition de projet. De plus, si vous pensez que cette exigence de conception Web ou modèles de proposition de projet nécessitent plus d'informations ou des améliorations, vous pouvez simplement m'envoyer un message direct ou les recommander et je les informerai si le changement est nécessaire 36. Liste de vérification du projet 01: Bonjour, tout le monde. Il s'agit notre projet de presse et nous appliquerons tout ce que nous apprendrons ici concevoir un site Web personnalisé à partir de zéro. Ce projet est fictif, qui signifie que tous les détails de ce projet sont uniquement destinés à des fins éducatives et que le contenu que nous utilisons pour ce site Web est un contenu fictif. premier temps, nous devons recueillir des informations et remplir cette liste de contrôle des exigences en matière de conception Web Je l'ai déjà fait et allons-y un par un. Lorsque vous essayez de recueillir ces informations auprès de vrais clients pour votre projet réel, demandez toujours leur avis et comprenez ce dont ils ont besoin. Ensuite, donnez-vous une suggestion. C'est vraiment important. N'essayez pas de faire des suggestions ou de vous en donner des versions. Écoutez simplement leurs exigences , puis faites des suggestions d'amélioration. De cette façon, vous aurez une excellente communication avec votre client et vous serez en mesure de recueillir les informations. Ici, d'abord, notre question sera de savoir quel est le nom du client ? Dans ce cas, le nom du client est docteur John Bennett et quel est le nom de votre entreprise ? Le nom de l'entreprise est JB Family Clinic, et quelle est votre adresse e-mail, JB clinic at Disposez-vous d'un site Web ? Dans l'affirmative, quelle est l'URL ? Ici, ce client n'a pas de site Web existant, ai donc défini comme NANA non disponible Ensuite, nous avons une section d'aperçu du projet ici. Quel est l'objectif du site Web ? L'objectif est de fournir des informations sur les soins de santé, de permettre de demander des rendez-vous, partager des ressources de santé pour les familles, accroître la visibilité des cliniques et de favoriser les liens communautaires. Ensuite, nous avons quel est votre public cible ? Le public cible est composé familles locales et de particuliers à la recherche services de santé fiables, puis de parents recherchant des services de soins pédiatriques , de santé mentale et de bien-être familial. Ensuite, nous devons déterminer quels sont les principaux objectifs du site Web. Les principaux objectifs sont d'améliorer la présence en ligne du client afin d'attirer de nouveaux patients, communiquer clairement les services et les spécialités disponibles auprès des familles, puis de fournir des ressources pédagogiques sur des sujets liés à la santé familiale. Ensuite, nous posons des questions. Y a-t-il des sites Web dont vous aimez l'apparence et ici nous avons un site Web URR, demandez toujours à votre client un site Web similaire à son idée C'est le meilleur moyen de comprendre leurs besoins. Ensuite, vous pouvez demander quel style de design vous préférez. Le client peut comprendre cette question, vous pouvez donc ignorer ces questions ou s' il connaît les sites Web, il dira quel type de site Web il souhaite. Dans ce cas, des sites Web à la mise en page épurée et moderne , puis avez-vous les couleurs ou les directives de votre marque ? Dans ce cas, il ne sera pas disponible. Mais dans la plupart des cas, vous créerez un site Web pour des marques existantes, ce qui signifie que vous devez suivre les directives relatives aux couleurs et utiliser leurs propres logos. Dans certains cas, ils rebaptiseront leur entreprise. Dans ce cas, ils ne vous donneront pas couleurs de la marque ni d'autres directives. Alors, tu as un logo ? Ce n'est pas ici, nous avons du contenu et des fonctionnalités. Nous avons des questions sur nombre de pages dont votre site Web aura besoin ? Dans ce cas, vous devez effectuer vos recherches avant de contacter le client. Consultez simplement des sites Web similaires et faites-vous une idée du site Web. Ensuite, découvrez quel type de pages ils ont quelles sont les pages les plus importantes et d'autres choses de ce genre. Mais si vous n'avez aucune idée, demandez-leur simplement des sites Web similaires qu'ils aiment. De cette façon, vous pourrez vous faire une idée. Cependant, s'ils n'ont pas sites Web similaires ou d'exemples de site Web à montrer dans ce cas, vous pouvez faire vos propres recherches et trouver un site Web lié à ce créneau et découvrir ce qu'ils font le plus important Nous n'allons pas imiter ces sites Web Nous allons rassembler ces inspirations de design et créer un site Web unique. Nous avons maintenant le nom des pages. Dans ce cas, nous avons la page d'accueil sur le blog de contact de nos fournisseurs. Ensuite, vous pouvez demander si vous allez fournir du contenu Earl ? Dans ce cas, je vous montrerai comment créer du contenu avec l'IA. Désormais, les outils d'intelligence artificielle tels que aGPT Google Bad joueront un rôle énorme et nous aideront à créer un contenu impressionnant pour les sites Web Donc, si les clients ne fournissent pas de contenu, nous pouvons générer du contenu pour le site Web. Ainsi, dans les prochaines leçons, je vous montrerai la meilleure façon professionnelle de discuter avec l'IA et de générer les informations que nous voulons. OK. Ensuite, si vous avez besoin de fonctionnalités spéciales, s'ils ont besoin de fonctionnalités de commerce électronique comme Ito en ligne ou s'ils souhaitent ajouter le chat bot, vous pouvez obtenir des éclaircissements en posant ces questions. Cependant, s'ils veulent des fonctionnalités que vous ne connaissez pas et que vous ne savez pas comment créer, dites-leur, je ferai des recherches ce sujet et je reviendrai vers vous. Ensuite, vous pouvez faire des recherches sur les fonctionnalités, par exemple, s'ils veulent un forum de discussion et vous pouvez faire des recherches à ce sujet et comprendre que vous pouvez le faire ou si cela coûte plus cher, vous pouvez leur dire que cela coûtera. Et c'est ainsi qu'il faut traiter ce type de question. Et nous avons un interrogatoire, avez-vous besoin Dans ce cas, vous avez besoin de formulaires de demande de rendez-vous et de contact. Nous allons créer des formulaires dans le cadre de ce projet, puis nous aurons les détails techniques. Je demande, avez-vous une plateforme préférée ? Dans ce cas, il appuiera, mais si le client connaît une plate-forme différente comme Webflow, PFI Weeks Studio ou simplement HTML Vous pouvez discuter avec eux, et si vous ne connaissez pas ces autres plateformes, vous pouvez leur suggérer pourquoi ils doivent choisir Wordpress. S'ils ne sont pas d'accord, vous pouvez toujours obtenir le projet et apprendre tout en créant le site Web. Ensuite, nous avons une question du type avez-vous un nom de domaine et un hébergement ? Dans ce cas, c'est le cas, mais parfois les clients ne connaissent tout simplement pas le nom de domaine et hébergement ou certains clients pensent que nous fournirons également des noms de domaine et des hébergements Vous devez clairement définir que vous ne fournissez pas ces informations et qu'ils doivent les fournir. Toutefois, si vous fournissez votre propre serveur d'hébergement et votre propre domaine sous forme d'abonnement, vous pouvez leur en parler et, dans le cadre du contrat, vous pouvez le mentionner clairement afin qu'ils comprennent combien cela coûtera et, s'ils sont d'accord, vous pouvez fournir votre propre hébergement. Personnellement, lorsque je crée un site Web pour mes clients, je demande le nom de domaine et l' hébergement pour créer le site Web. Ensuite, nous avons la date limite du projet. Vous pouvez simplement demander quand souhaitez-vous que le site Web soit lancé. La plupart des clients répondront dans un délai d'une semaine, trois jours, de deux semaines, mais nous ne serons pas en mesure de créer un site Web personnalisé dans les trois jours, car nous allons fournir un site Web de qualité qui les aidera à faire briller leur marque en ligne. Vous leur expliquez le calendrier, vous leur donnez au moins trois à quatre semaines comme date limite pour le projet et vous essayez de le faire dans les deux semaines. De cette façon, vous aurez un client satisfait et il vous fera confiance pour conception de ses prochains sites Web. Ensuite, nous avons un budget, vous pouvez exactement quel est votre budget pour ce projet. Donc, la plupart du temps, si vous travaillez avec un client individuel, non avec une entreprise, il vous posera comme première question combien cela coûtera. Vous obtenez simplement des informations sur le type de site Web, nombre de pages qu'ils souhaitent et le type de fonctionnalités. Ensuite, si vous créez un site Web de cinq pages pour 1 000$, dites-leur qu'il vous en faut 1 200, puis ils essaieront de négocier avec vous et s'ils le négocient pour des milliers de dollars, vous serez en mesure de le faire dans le respect de votre budget Dans ce cas, je suis juste à 7h50 en tant que numéro fictif. Mais si vous avez une marque et si un client vient vous voir en regardant votre vidéo ou en vérifiant votre contenu, vous pouvez facturer davantage à ce client. OK. Nous avons maintenant les détails, et dans la prochaine leçon, nous allons créer un contrat pour cette liste de contrôle 37. Utiliser l'IA pour le design web: Bonjour, tout le monde. L'IA joue un rôle important dans la conception de sites Web et dans d'autres domaines liés à Internet. Savoir utiliser l' IA est donc un avantage considérable et cela nous aidera à obtenir les meilleurs résultats en quelques minutes. Avant KDG DP et Google Bart, qui s'appelait maintenant Jaminir, nous utilisions sites Web tels que Lam ISM text pour ajouter du contenu à notre site Web que nous concevons pour le client, car la plupart du temps clients ne nous donnaient pas de contenu, nous devions donc ajouter du texte factice Mais après 22 22, nous pourrons utiliser des outils d'intelligence artificielle tels que HAG PT et Jamin pour générer du contenu pour le projet de nos clients De plus, cet outil nous aidera à réduire notre charge de travail et à obtenir informations que nous n' avons pas ou que nous ne connaissons pas. À titre d'exemple, j'ai récemment créé projet de conception de site Web pour une société d' aviation. Je ne savais rien compagnie aérienne et de ce que je devais ajouter au site Web. J'utilise simplement JAG PT pour générer le contenu du site Web et Cran en était très content et il n'a changé que quelques éléments en fonction de sa version Apprenons à utiliser JAG PT pour générer ce que nous voulons. Je vais juste sur HGBT et ici nous pouvons saisir le formulaire. simple fait d'ajouter du contenu Heroon à Prompt Life Generate pour un site Web de santé ne nous donnera pas de meilleurs résultats Essayons donc ceci. OK, voici les DT. Mais si nous ajoutons les détails appropriés et ajoutons le DDS que nous connaissons déjà, le résultat sera meilleur que cela Essayons donc un nouveau chat et essayons de le générer avec le bal. J'utilise donc des versions préliminaires de ces outils, et les versions préliminaires seront suffisantes pour notre travail. Voici donc l' invite simple que j'utilise toujours. Nous devons donc d'abord attribuer un rôle à ce GPT. Ensuite, nous devons dire ce que nous voulons générer, puis nous pouvons choisir trois choix. Ainsi, lorsque nous ajoutons ces informations, nous devons ajouter tout ce que nous savons et nous devons ajouter tout ce que nous savons pour obtenir de meilleurs résultats. Alors essayons-le. Tout d'abord, je dois dire que vous êtes un concepteur de sites Web. Ensuite, vous allez concevoir un site Web pour clinique HealthCare appelé Clinical JB Family Clinic, puis nous devons attribuer la tâche Je veux que vous créiez des prises de section de héros avec Good CTA CTA est un appel à l'action Et saviez-vous que nous créons des sections sur les héros sur FICMA Autoayout et Pigma Nous devons donc déterminer ce qui doit y Comme ce site Web, visez à améliorer la présence en ligne de la clinique afin d'attirer de nouvelles versions. Donc, s'il y a plus d'informations, nous pourrons les ajouter à l'avenir. Je vais les ajouter pour le moment. Ce seront les instructions, alors appuyons sur Entrée pour voir la différence OK, je pense que nous avons trois options. Concentrons-nous uniquement sur le premier point, la santé, nos soins prioritaires aux familles, une visite à la fois. C'est le titre et nous avons un excellent sous-titre à la JB Nous fournissons des soins complets à toute votre famille , puis nous avons un rendez-vous sur le bouton. Passons au simple bal de fin d'année que nous avons déjà créé. C'est la santé, notre priorité. C'est tout, puis il ne fournissait qu'un petit sous-peddin il ne le personnalisait pas et il n'offrait pas de meilleures options, mais ici, nous avons obtenu des détails meilleurs et personnalisés Nous devons donc toujours attribuer le rôle, puis assigner les tâches et demander trois choix. Ainsi, nous obtiendrons ce type de résultat et nous pourrons choisir le meilleur. Le fait est que si vous pensez simplement ajouter du texte et obtenir résultats à partir du HGBTO Jami, cela ne fonctionnera pas, vous devrez toujours le spécifier, et de cette façon, et de cette façon, vous obtiendrez des résultats meilleurs et personnalisés Dans les prochaines leçons, nous utiliserons donc de nombreuses instructions sur le GBT, et nous essaierons également d' utiliser Jamini 38. Créer une proposition de projet: Il est maintenant temps de créer un contrat pour notre projet. Je consulte notre profil communautaire et nous avons ici une proposition de projet. Je copie et clique ici, puis je colle comme ça. OK. Maintenant, je vais le mettre ici. C'est bon. Il faut d'abord ajouter le nom du projet. Le nom sera le nom de l'entreprise. Ensuite, nous devrons ajouter le nom du freelance. Je vais ajouter mon nom ici. Je vais devoir ajouter un e-mail. Je vais juste ajouter un faux e-mail comme test sur mail.com et ici, nous devons ajouter le nom du client et notre demande de conception Web, nous avons le nom du client à copier-coller comme ça Créons maintenant l'aperçu du projet. Pour créer cette partie, nous pouvons nous faire aider par le chat G PT. Allons sur GVT et cliquons sur Nouveau chat. Voici donc notre message. Vous pouvez vérifier cette invite dans la section des ressources. Vous recevrez deux autres invites Ici, le rôle est celui de concepteur Web, puis passons aux exigences du site Web. Ici, vous créez un site Web pour B TeNing et je veux que vous créiez un aperçu du projet pour contrat du site Web de la clinique familiale JB Ensuite, ajoutons ici plus d'informations. Ici, nous pouvons ajouter des informations telles que le but du site Web. Je copie la réponse du client comme ceci, puis je la colle. En fait, mettons d'abord cette partie en page, comme ceci, puis ici. Quels sont les principaux objectifs ? Copions cette partie et collons-la ici comme ceci. Ensuite, nous pouvons obtenir le numéro cinq et tout ira bien. Maintenant, je dois aussi dire qu'il ne faut que 150 mots et qu'on appuie sur Entrée. OK, voici la première option. Cela ne semble donc pas bon. Donc, ce que nous pouvons faire, c'est cliquer sur Modifier le message. Maintenant, je vais aller ici et là, je vais agir comme si je voulais que vous créiez un aperçu du projet pour contacter le site Web de la JB Family Clinic que je prévois d'envoyer aux clients ici Ajoutons seulement un cinquième de 100 mots et nous discutons des détails nécessaires, puis cliquez sur Consentement et voyons voir La première option est que le site Web de la clinique familiale JB comportera cinq pages fournissant des informations sur les soins de santé, facilitant les demandes de rendez-vous et proposant des ressources sur la santé familiale Le site vise à améliorer la visibilité de la clinique, attirer de nouveaux patients et mettre en valeur ses services et ses spécialités. Les éléments clés incluent une interface facile à naviguer et un contenu éducatif pour favoriser les liens communautaires. Ce sera parfait. Je vais simplement le copier et allons-y et remplaçons ce projet comme ça. Ensuite, dans les livrables, nous livrons les maquettes Figma puis nous livrons site Web entièrement fonctionnel et réactif , ici, j'ajouterai comme wordpress car nous allons créer ce site Web sur Faisons-en un site WordPress lors d' interrogations techniques, nous devrons ajouter eTaf et ce premier point nous n'en avons pas besoin Je vais l'enlever. Ici, nous allons configurer Google Analytics pour et Google Search Console, puis optimiser la vitesse de chargement et la réactivité mobile, puis nous obtiendrons le formulaire de tag et ici le formulaire de demande de rendez-vous, le formulaire demande de rendez-vous, et ici nous améliorerons la sécurité du Web Vous pouvez donc modifier cette intégration technique en fonction de votre projet. Voici donc le robinet dans lequel nous allons le faire. Vous pouvez clairement les comprendre en vérifiant les exigences de conception Web , puis les exigences de lancement du projet. Pour celui-ci, nous avons déjà appelé la conception du site Web ou des exemples de sites Web similaires, nous n'avons donc besoin que d'un accès de journalisation pour le mot serveur Web et le site Web. site web signifie que wordpressbd permet de changer comme Wordpressabard, comme celui-ci Si Wordpress n'est pas encore installé, vous pouvez supprimer cette partie. Nous n'avons donc pas besoin la documentation requise car nous l'avons déjà. Je vais supprimer le point que vous pouvez ajuster cela en fonction de vos besoins. Nous avons ici une section d' assistance après-vente nouvelles fonctionnalités et les nouvelles pages nécessiteront des frais et des discussions supplémentaires. Cependant, je proposerai une maintenance de base du site Web et des mises à jour mineures une fois l'opération terminée. Donc, si vous n'offrez pas maintenance de base gratuite du site Web ou après les mises à jour, vous pouvez ajouter le BDS ici Ensuite, il y a la condition humaine. Nous avons donc ici une estimation du temps d'achèvement du projet. Faisons en sorte que cela dure quatre semaines , puis le cadre et la déstructuration. Ainsi, lorsque vous créez un site Web, effectuez toujours un paiement initial. Je reçois généralement 50 % du paiement initial. Modifions-le donc ici, nous en avons 375 et une fois le lancement du site Web réussi, ce sera 375 et le total du projet est de 750 comme celui-ci. Ensuite, nous devons ajouter les modes de paiement. Dans mon cas, j'accepte les modes de paiement Paneer et Western Union Si vous avez Payal, vous pouvez également ajouter Payal, mais je ne propose que des méthodes de paiement, alors nous avons une politique d'annulation Donc, ici, il est indiqué que si le projet est annulé par le freelance après le début, un remboursement complet de l'argent sera au client par le même moyen que celui utilisé pour la réception cas d'annulation par le client, paiement sera dû pour tout le temps investi dans le projet, quelle que soit l'utilisation prévue. La proposition de projet est donc une lettre sérieuse et vérifiez toujours avant de l'envoyer. Donc, dans ce cas, si j'annule le projet, je rembourserai intégralement l'argent au client et si les clients annulent leur projet, je ne verserai pas le paiement initial pour les clients Ajustez ces politiques en fonction de vos habitudes de travail et de vos clients, puis nous aurons une section sur la propriété. Après le paiement intégral, le droit de propriété intellectuelle associé au site Web sera transféré au client. Ensuite, nous avons ce message, comme la proposition, décrivant les services fournis et les résultats attendus du projet Si vous avez des patients ou avez besoin de détails supplémentaires, n'hésitez pas à me contacter. Je suis enthousiasmé par l' opportunité de travailler ensemble sur la conception et le développement et nous devons ajouter ici le nom du site Web. Voici le nom du site Web, l'entreprise. Ajoutons le nom du site Web comme celui-ci et si nous le voulons, nous pouvons ajouter le site Web. Vous pouvez ajouter ou supprimer n'importe lequel de ces points. Si vous souhaitez ajouter de nouvelles conditions générales, il vous suffit d'appuyer sur Entrée et vous obtiendrez ce type de point. Et ici, si vous souhaitez ajouter un autre article, vous devez cliquer ici et cliquer sur cette propriété. Ensuite, vous pouvez simplement le dupliquer en appuyant sur Ctrl C ou Commande C et sur la commande de contrôle, comme ceci. Cette proposition de projet est conçue avec la mise en page automatique, vous avez déjà une idée de la mise en page automatique, et vous pourrez facilement la modifier à votre guise. Une fois que vous avez terminé cette proposition de projet, vous pouvez cliquer sur la proposition, et sur le côté droit, vous pouvez faire défiler la page vers le bas. Lorsque vous faites défiler la page vers le bas, vous pouvez voir la section d'exportation ici, sélectionner le type au format PDF et cliquer sur le bouton Exporter la proposition de projet. Cette proposition de projet est donc de taille A quatre. Cliquez dessus, cela ressemblera à ceci, et vous pouvez simplement l'envoyer à votre client et lui faire savoir s'il a besoin de modifications. Et une fois que votre client est d'accord avec ces détails, vous pouvez commencer le travail. 39. Collecter les inspirations de conception: Bonjour, tout le monde. Il est temps de créer notre moodboard Pour créer notre moodboard, nous devons trouver des inspirations de design et obtenir des captures d'écran de ces Dans ce projet, nous avons déjà inspiration du design que le client nous donne. Ouvrons un par un de ces UR D'accord, nous devons maintenant obtenir une capture d'écran de ce site Web. Pour ce faire, nous pouvons utiliser l'appel d'extension Google Com, l'extension GoFullPage, aller sur Google et rechercher l'extension GoFuulPage Ensuite, vous obtiendrez Comm Webstollin, cliquez dessus, et ici vous verrez ajouter à Chrome, cliquez dessus Je l'ai déjà fait. Vous verrez ce type d'icône de caméra sur le navigateur Chrome, accédez à la page Web et cliquez dessus capturer le design complet du site Web. Ici, nous avons un problème. Dans cette capture d'écran, nous n' avons pas de parties d'en-tête pour récupérer les parties d'en-tête, essayons de le faire à nouveau. La partie d'en-tête ne s' affiche pas, mais ça va. Tout d'abord, je le télécharge au format PNG, je clique simplement ici, puis je peux appuyer sur la touche Shift 4 , le surligner ou le sélectionner comme ceci, puis relâcher la souris et vous obtiendrez la capture d'écran. Toutefois, si vous utilisez Windows, vous pouvez utiliser un outil appelé InpIntol Il suffit d'aller dans Windows et de rechercher InPintolo. Passons maintenant au site Web suivant Cliquez sur cette extension pour accéder à la page complète, et elle obtiendra automatiquement le design, puis téléchargez-le et faisons-le pour ces sites Web EAL. Maintenant, ce sont les sites Web des concurrents, mais cela ne suffit pas pour recueillir davantage d'inspiration en matière de design, il vaut mieux bien comprendre le site Web. Il existe des sites Web sur lesquels nous pouvons recueillir l'inspiration en matière de design. L'un d'eux est le dribble. Allons voir Dribble. Et si vous n' avez pas de compte Dibble, vous pouvez cliquer sur S'inscrire J'ai déjà un compte Dribble, donc je vais me connecter. OK, je me suis connecté à mon compte Drivel Ensuite, je peux rechercher ici clinique familiale parce que nous allons concevoir un site Web pour la clinique familiale. Recherchez une clinique familiale ici, présentateur. Sélectionnez ensuite la catégorie de conception Web ici. Ensuite, le type de dessins, trouvez les meilleurs modèles et ouvrez-les dans une nouvelle fenêtre. Cliquez et cliquez sur Ouvrir le lien dans Nutab et faites-le. Si vous ne voyez aucun site Web lié à l'UNH, procurez-vous simplement d'autres designs liés à Rf Dans ce cas, je peux trouver un site Web sur les soins de santé généraux, site Web dentaire et d'autres sites Web similaires. Ouvrons, d'accord. Maintenant, je vais obtenir des mots clés connexes. Donc, le premier est le dentiste d'hôpital, le médecin, le dentiste, il suffit de cliquer sur Hôpital 1, et nous avons ici le design de l'hôpital. Nous pouvons donc également modifier ce filtre, mais je vais le définir comme populaire. Et ici, je vais à nouveau ouvrir ces dessins. Voici un site Web dentaire, puis allons chez le médecin et d'accord. Et encore une fois, je vais cliquer sur cette clinique. Nous allons maintenant concevoir le site Web de la clinique. D'accord, faites simplement vos recherches et trouvez le design du site Web. Jusqu'à présent, j'ai trouvé peu de modèles, donc il n'y a rien à trouver à partir de là, donc je vais sauter celui-ci, fermer l'onglet. Alors ici, faisons défiler la page vers le bas. Et ici, nous avons une version pleine page. Cliquez dessus, puis cliquez avec le bouton droit de la souris, puis cliquez sur Enregistrer l'image sous et enregistrez-la. Tous ces designs seront téléchargés dans votre dossier de téléchargement. Et lorsque vous faites défiler la page vers le bas, vous verrez également d'autres designs de ce designer. N'oubliez donc jamais que nous obtenons ces designs pour nous inspirer, et pas simplement pour copier-coller. Ne vous contentez donc pas de trouver le design des autres et d'essayer de le copier et de le reproduire. Trouvez simplement l'inspiration pour le design et créez votre propre version. Et je vais vous montrer comment faire. OK, faisons défiler la page vers le bas. Ici, nous avons un aperçu de la page complète, cliquez dessus et cliquez avec le bouton droit de la souris. Il se peut que nous le sauvions. Ensuite, nous avons celui-ci aussi, et voici un autre site Web. Nous pouvons économiser. OK, copiez celui-ci, deux, OK, c'est tout. Ensuite, nous pouvons trouver pour nous des conceptions de sites Web. Je vais donc chercher Tmforus dans Google, et nous allons aller sur themforus.net, et nous allons aller sur themforus.net, il suffit de cliquer dessus. OK, ici, je peux rechercher la famille Krinic et cliquer sur OK. Maintenant, vous pouvez voir les sites Web qui ont une bonne note, ouvrez-les une nouvelle fenêtre et ouvrons-en quelques-uns comme celui-ci. Ouais. Faisons également une recherche comme clinique pour obtenir le site Web de la clinique. Ici, nous avons une clinique dentaire, mais ici nous avons une autre clinique, je clique dessus. Ces modèles sont donc déjà utilisés par les utilisateurs, ce qui signifie que ces modèles ne seront pas uniques, mais nous pouvons trouver des sections et la façon dont ils conçoivent le site Web. Obtenez un aperçu des designs que nous devrions utiliser sur notre site Web. À partir de là, cliquez simplement sur Aperçu en direct, et vous obtiendrez ici l'aperçu en direct du site Web. Nous avons ici quelques démos. Maintenant, cliquez avec le bouton droit sur ces démos et obtenez ces designs comme celui-ci Voici le design. Maintenant, nous pouvons cliquer sur cette page amusante, nous connecter et obtenir une capture d'écran du design Je le télécharge et voici le suivant, il suffit de croiser ce sélecteur de séjour et de faire défiler la page vers le bas. OK. Cliquez ensuite sur cette extension Chrome pour obtenir le design, téléchargez-le. Nous avons celui-ci. Faisons-le également concevoir. Et nous avons celui-ci aussi. Faisons défiler la page vers le bas et cliquez sur Télécharger. Ensuite, nous avons un autre site Web. Cliquez sur Révision en direct, et voici la critique en direct, cliquez simplement sur ce bouton R pour faire passer ce design à Allons-y. Maintenant, je vais supprimer tous les liens dont j'ai déjà reçu les captures d'écran. OK. Maintenant, Ban point O Bans est un autre site Web sur lequel nous pouvons trouver de l'inspiration en matière de design Je vais faire une recherche sur Family Clinic. À partir de là, nous verrons conception de sites Web liés à la clinique familiale, je les ouvrirai comme ça. Voyons ces dessins. Ce n'est pas la conception du site Web, et voici la conception du site Web. Obtenez une capture d'écran à partir d' ici, il suffit de cliquer dessus, puis d'utiliser la page complète pour obtenir la capture d'écran. Voyons voir ça. Ce site n'est pas en anglais, mais nous pouvons tout de même y trouver de l'inspiration pour le design. Téléchargeons-le également. Double-cliquez pour l'agrandir, puis cliquez sur GoFullPage puis sur Télécharger l'image Nous avons le site Web de la clinique dentaire, alors prenons-en également cette capture d'écran. OK. Nous pouvons maintenant nous inspirer du design sur Pinterest Passons à PinterRSTT. Pour obtenir des designs sur Pinterest, vous devez vous connecter à PintersTo, je suis sur mon compte Pinterest Maintenant, je clique sur ce bouton de recherche, et ici, je vais rechercher le site Web de Family Clinic. Ensuite, vous devriez changer les épingles en épingles et voici les designs de sites Web, cliquez sur ces modèles et je vais simplement cliquer sur le design et le mettre dans une nouvelle fenêtre comme ceci, puis cliquer avec le bouton droit de la souris, cliquer sur Enregistrer les images et l'enregistrer. Je vais cliquer ici. Ce n'est pas bon. Ouvrez-les dans une nouvelle fenêtre comme ceci. C'est une famille ouverte de quelques modèles. Ainsi, dans Pin Trust, vous pouvez utiliser cette recherche d'images pour obtenir des conceptions de sites Web similaires. Cherchons-le comme ça. Lorsque vous le ferez, vous obtiendrez un design de site Web similaire, je vais donc en ouvrir certains comme ceci, puis je les ouvrirai dans une nouvelle fenêtre. OK. Maintenant, je vais télécharger en cliquant avec le bouton droit de la souris et en cliquant sur Enregistrer les images. C'est bon. Nous avons maintenant suffisamment de designs pour créer un tableau de mode. Dans la leçon suivante, nous allons donc créer le tableau des modes. 40. Créer une ambiance: Bonjour à tous, il est temps de créer notre moodboard. Je vais diminuer la taille du canevas en appuyant sur Ctrl et en utilisant la molette de défilement de la souris. Ensuite, ici, je vais créer un cadre. Cliquez simplement sur le cadre et cliquez comme ça. Augmentons sa taille comme ça . Ajoutons-le à partir d'ici, pour avoir plus d'espace. Ensuite, je vais le renommer en smooth ball. Multi-espaces. D'accord. Maintenant, nous pouvons changer la couleur de remplissage, donc siler le cadre et changer la couleur du champ pour qu'il soit un peu plus foncé comme ça D'accord. Maintenant que nous avons toutes ces captures d'écran, je vais simplement les mettre en évidence et les ajouter comme ceci. Elles seront téléchargées, nous devons donc attendre que les premières images soient téléchargées avec succès Il est également préférable de les échantillons de conception que rapprocher les échantillons de conception que le client nous fournit. Voici donc les designs, et créons ce design de moodboard comme celui-ci En fait, mettons ces deux sections comme ici. Alors augmentons le moodboard pour qu'il ressemble à celui-ci, et maintenant voici l'un des deux. OK, voici l'un des designs . Mettons un moodboard comme celui-ci Mouillez les dessins. Diminuez la taille du moodboard et ajoutons-le ici. OK, maintenant que nous avons ce premier design, je vais juste le mettre comme ça et tout ira bien, puis nous avons ce design, il suffit de le mettre ici, je vais définir la taille de l' invité à 15 Nous pouvons utiliser la mise en page automatique, mais il est facile de le mettre comme ça sans mise en page automatique, et ici, nous avons un arrière-plan. Retirons-le pour le supprimer. Je double-clique sur l'image, et ici, je vais dire de recadrer. Maintenant, nous pouvons le recadrer comme ça. Allons-y. D'accord. Alors je vais le mettre ici. C'est bon. Et si je me souviens bien, il y a 38 ressources, disons-en beaucoup. D'accord. Donc celui-ci a l'arrière-plan, cliquez dessus et changez-le pour le recadrer et le déposer comme ça , insérez-le et appuyez sur Entrée. Mettons-le ici. D'accord. En fait, c'est comme ça. D'accord. Et ici, nous avons un autre design. Disons-le comme ça et augmentons-le un peu. Faisons-le entre les tailles 15. D'accord, nous avons d'autres modèles. Ajoutons-les tous. Il s'agit d'un autre design. Mettons-le ici, mettons celui-ci. Et sur ce design, nous allons supprimer cette barre noire car c'est un thème pour nous. Super, mettons-le ici. OK, nous allons laisser tomber celui-ci, ce stylo. Maintenant, faisons-le ici. D'accord. Maintenant, disons-le. D'accord, je vais ajouter ces designs à ce tableau de mode. Comme nous n' avons plus beaucoup d'espacement, je clique sur le cadre du moodboard, j' appuie sur Command pour augmenter le Si vous utilisez Windows, vous devez appuyer sur Ctrl. D'accord ? Ce que nous avons, supprimons l'arrière-plan. Celui-ci n'est pas de bonne qualité, je vais donc le supprimer. Ajoutons-les. Maintenant, je vais simplement sélectionner ces captures d'écran et comme ici. Continuons à les ajouter à la boîte lunaire. Voici donc le design Web sélectionné par le client. Rapprochons-les donc, car nous pourrons alors avoir une idée de la section que ce site Web devrait avoir. Donc, ici, nous avons le signe que nous n'avons obtenu que le design complet sans la section héros. Mettons la section héros, car c'est la section héros nous avons déjà obtenue avec l'outil de capture Découvrons le design. Passons à Reason Reason. Ici, nous avons la tête écartée, nous la copions, la chiffonnons et la cordons comme ceci, puis nous mettons les dents comme ceci, puis nous la posons comme ça Maintenant, ce que je peux faire, c'est appuyer sur la commande G pour le regrouper. OK, maintenant je vais le dire comme ça. East tA Ok, nous avons ici le tableau des modes, et ici, nous avons tous les designs que nous avons collectés, nous pouvons donc zoomer et vérifier le design comme ceci. Nous pouvons donc maintenant avoir une idée générale du type de section dont nous avons besoin et nous pouvons sélectionner ces sections en vérifiant le style de cette conception. Le moyen le plus simple est de vérifier d'abord les sites Web fournis par votre client. Il s'agit du site Web des concurrents de votre client. La section « Découvrez » la plus courante de ces sites Web. titre d'exemple, ce site Web comporte une section héros, une section « nous sommes », explique pourquoi nous choisissons notre emplacement, pourquoi nous choisissons nos sites à l'aide du formulaire de contact, des avis de Google et d'un pied Ensuite, si nous cochons celui-ci, il contient une section herosection, nos services, section journal, et ici, nous avons une section de révision, notre section fournisseur et une section de services Hors section. Nous pouvons maintenant choisir ces sections parmi ces modèles. Il suffit de passer en revue le design et de découvrir quelle est la section humide. Pour ce faire, Figma dispose d'une fonction de commande Dans la barre d'outils, vous pouvez voir cette section de commande, cliquer dessus et dans ces designs, j'aime bien cette section en tant que site Web, section héros, cliquez sur cette section et définissez le nom comme section héros. D'accord, cependant, je ne comprends que la structure de ce design, qui signifie que le sous-titre, titre principal et le texte du paragraphe ressembleront à ceci, ce bouton sera placé en bas La seule chose que sera le texte sera en bas à gauche. Ensuite, nous devons trouver la section. Pour en savoir plus sur la section, vérifions le design et je sélectionnerai cette partie en tant que section. Présentateur : lorsque nous ajoutons des commentaires, nous pouvons voir tous ces commentaires ici. Et maintenant, nous devons trouver, voyons quelles sont les sections du site Web de notre concurrent. Ici, nous avons ensuite la section «   choisissez-nous », et si nous passons au deuxième modèle, il ne contient pas grand-chose, il propose des services et permet de choisir des fournisseurs. Sélectionnons une section pour les services. Je vais sélectionner ce type de section pour les services. Au lieu d'ajouter cette flèche, j'ajouterai des icônes liées à ces services. C'est ce que je dis, nous devons créer une version meilleure et unique, et maintenant nous devons choisir votre section fournisseur. Voyons ce qui sera bon pour Je vais créer ce type de section pour nos fournisseurs. Faisons appel à nos fournisseurs. Nous devons maintenant trouver section pour les témoignages ou les critiques Découvrons la section de révision. Créons ce type de section pour les commentaires. Maintenant, ce que nous devons ajouter, nous devrons ajouter une section de blocs. Trouvons donc une section de bloc. Cela aura l'air bien, alors je clique simplement ici et transformons-le en bloc. Nous le créons pour la page d'accueil. En fait, n'ajoutons pas le dernier bloc sur la page d'accueil. Je vais cliquer ici et supprimer la commande, cliquer sur Supprimer pour la supprimer D'accord. Nous avons maintenant cinq sections pour la page d'accueil. Sélectionnons un pied de page. Découvrons que le pied de page créera ce type de pied de page. Cliquez ici pour créer un pied de page, mais je vais changer le design Je ne comprends que la structure. Nous avons donc besoin de ce type de section, nous aurons donc clairement le numéro et nous aurons un bouton pour demander un rendez-vous. Découvrons donc ce type de design. C'est mieux Créons ce type de formulaire de contact sur la page d'accueil. Faisons en sorte que ce soit aussi rapide que possible. Nous avons maintenant huit sections. Passons ensuite à la liste des exigences et voyons que ces sections nous aideront à atteindre notre objectif. Notre objectif principal est d'améliorer la visibilité de la clinique en ligne afin d'attirer de nouveaux patients. Pour ce faire, nous avons besoin d'un appel à l'action fort , la section des héros. Dans cette section consacrée aux héros, nous devrons mentionner le numéro CLS. Ici, je vais remplacer ce démarrage par le bouton CLS par le nombre de cliniques Cela aidera les utilisateurs à trouver rapidement le numéro lorsqu' ils visiteront le site Web. Ajoutons-le comme réponse au numéro de contact de Menu Pa. La prochaine sera de communiquer clairement les services et les spécialités disponibles pour les familles. Nous avons déjà la section consacrée aux services dans ces services. Nous ajouterons les principaux services afin que le visiteur puisse facilement comprendre et se faire une idée des services disponibles. Nous devrions fournir des ressources pédagogiques sur le sujet de la santé familiale. Pour ce faire , nous devons créer une section de blog. Créons donc une section de blog après avoir conçu la page d'accueil. Je pense donc que nous avons la section. Il est donc temps d'envoyer ces informations au client. Ainsi, lorsque vous partagez ce moodboard avec un client, cliquons sur la présentation pour qu'il vérifie tous ces designs et donne son idée pour sélectionner le meilleur Une fois que vous avez terminé le tableau des modes, partagez-le avec votre client, cliquez simplement sur ce partage et configurez-le que tout le monde puisse voir et copier le lien. Expliquez-lui ensuite ce tableau de mode et quelle est la section que vous choisissez Il vérifiera donc ce tableau de mode et vous fera part de ses suggestions, et s'il aime une section différente, il les sélectionnera également. 41. Créer la structure du site Web: Bonjour, tout le monde. Nous sélectionnons maintenant la section L dont nous avons besoin sur notre site Web à partir de ce moodboard Rassemblons-les tous et créons un site Web unique avec des pièces jointes. Pour ce faire, je clique d'abord sur le cadre et je crée un bureau de la taille d'un cadre. Augmentons ensuite la taille du cadre comme ceci, puis je passe aux commandes. Dans les commandes, nous avons huit sections. Alors, cliquons sur la première section, et voici la première section. Je vais donc cliquer sur ce motol et ici je sélectionne cette capture d'écran et j' appuie sur la commande C pour la copier clique ici et j'appuie sur la commande V pour la coller Et à partir de là, nous n'avons besoin que de cette section consacrée aux héros. Je double-clique donc sur l' image et je sélectionne recadrer. Ensuite, je vais le recadrer comme ceci, comme ceci, puis appuyer sur Entrée. Ensuite, dis-le comme ça et augmentez le design. OK, alors nous devons trouver la deuxième section. Il s'agit de, alors voici la section A. Maintenant, je vais cliquer sur mTOL et copier ici. Alors venez ici, collez-le comme ça, puis cliquez sur l' image en D et réglez-la pour qu'elle soit recadrée, puis recadrez uniquement cette section à propos. Comme ceci et appuyez sur Entrée. D'accord. Alors mettons-le sur ce site Web comme ceci. D'accord. Ensuite, ce que nous allons faire c'est trouver dans la troisième section. Cette troisième section porte sur les services et voici la section sur les services. Je passe le motol et le sélectionne, le copie, le colle ici, alors nous n'avons besoin que de cette section de services Recadrons-le et présentons-le. Alors ici, ajoutons cette section. Ceci et augmentez la section en appuyant, en déplaçant et en augmentant. Lorsque nous appuierons sur Shift, nous pourrons augmenter la taille sans changer la hauteur et la largeur. Ensuite, nous devons trouver la section de nos fournisseurs. Voici donc cette section. Je vais maintenant copier cette section. En fait, nous avons déjà copié cette capture d'écran, alors je clique sur mTOL et voici la capture d'écran Je le duplique simplement en appuyant sur les commandes C et V, puis je le mets comme ceci. Maintenant, je dois augmenter la taille du bureau, sélectionner le bureau et l' augmenter comme ça. Ensuite, je vais double-cliquer dessus et nous avons besoin notre section sur les fournisseurs comme celle-ci, puis de la mettre comme ceci. Passons maintenant à la cinquième section. Je passe en revue, ici nous avons des critiques, il suffit d'appuyer sur Mtol et de copier celle-ci, venez ici. Placez-le ici. Ensuite, nous avons cette section de révision, modifiez-la deux fois, configurez et n'obtenez que la section de prévisualisation comme celle-ci et ici D'accord. Maintenant, mettez-le ici appuyez sur Shift et augmentez-le comme ceci. OK, trouvons donc la section suivante. C'est le pied de page. Voici le pied de page. Voici le pied de page que nous allons ajouter. Alors copiez celui-ci, venez ici. Passe-le comme ça. D'accord. Ensuite, appuyez deux fois, cliquez sur recadrer et recadrez ce dessin comme ceci et appuyez sur Entrée. Alors mettons-le en bas comme ça. Ensuite, ce que nous devons ajouter, c'est augmenter la taille. Nous devons ajouter : sélectionnons le cadre de texte et augmentons sa taille comme ceci Ensuite, nous devons ajouter la dernière section. La dernière section est une section de contact faible, voici une section de contact faible. Appuyons donc sur Motle et salons la section, appuyons sur la commande C, et appuyons sur Step ici, appuyons sur Commande , puis ouvrons cette section, tapons-la deux fois dessus, déposez-la comme au centre du GRE pour le moment, augmentons cette section aussi, comme ceci OK, et dis-le comme ça. D'accord. Maintenant, nous allons vérifier cette conception. Nous allons changer le nom de ce cadre en structure, structure du site Web. Maintenant, cliquez dessus et cliquez sur ce présent et voici la structure de notre site Web. Nous pouvons maintenant concevoir notre version unique avec cette structure de conception de site Web. Je le fais parce que lorsque nous créons ce type de structure, nous n'avons pas besoin de créer des cadres métalliques. Nous pouvons créer directement l'interface utilisateur haute fidélité. interface utilisateur haute fidélité signifie que l'interface utilisateur est similaire au produit réel. De plus, nous ne nous contenterons pas de le concevoir tel quel. Nous modifierons ce design en fonction de notre créativité et nous créerons une meilleure version. 42. Créer une carte du site: Bonjour, tout le monde. Nous avons maintenant la structure de notre site Web et les étapes à suivre pour terminer un guide de projet de conception Web. Ensuite, nous devons créer un plan du site. Créons-en un. Je vais aller ici et pour créer un plan du site, nous devons avoir un cadre, cliquer sur le cadre et cliquer ici, puis augmenter la taille du cadre comme ceci, puis je changerai ce nom en plan du site. Le plan du site est alors la structure de notre site Web. Si nous voyons des exemples de plan de site, le plan du site ressemblera à ceci. Nous avons d'abord la page d'accueil, puis le reste de la page. Ensuite, nous avons l'élément de sous-menu. Pour les petits sites Web, nous n'avons pas besoin du plan du site, mais pour les grands sites Web complexes, il est préférable d'avoir un plan du site afin comprendre la structure du site Web. Non seulement vous créez un plan du site pour votre site Web, il peut également être modifié lorsque nous développons et obtenons plus d'informations auprès de nos clients concurrents pendant le processus de conception. Créons le plan du site. Nous avons maintenant le cadre. Je clique simplement sur le texte et je crée un texte appelé home. Ensuite, j'augmenterai la taille, puis modifierons la taille de la police à 42. OK. Ensuite, je peux appuyer sur Shift A pour appliquer une mise en page automatique à ce texte. N'oubliez pas que nous appliquons la mise en page automatique uniquement à ce texte, pas au cadre, uniquement au texte. Maintenant, augmentons-le. Ajoutons un rembourrage horizontal de 20 et un rembourrage vertical Ensuite, je le ferai à Fill Color. Cliquez ici et ajoutons une couleur de champ comme cette couleur rouge, puis je clique sur le texte et nous changerons la couleur du texte en blanc. OK. Maintenant que nous avons la page d'accueil, elle semble plus petite, alors changeons ce texte en 60. Encore une fois, diminuons la taille de ce cadre à 2000, soit 2000 et 151500 hauteurs OK, ajoutons-le maintenant ici. En fait, changeons cette hauteur milliers, car nous n'avons pas besoin d'un plan du site plus grand. Maintenant, nous avons notre maison ici. Ajoutons 30 paddins horizontaux. Bien mieux. Nous devons maintenant créer d'autres pages. Ces pages seront consacrées à vérifier nos besoins. Ici, nous aurons le nom de la page. Il s'agit de bloquer les contacts de notre fournisseur Copions-les tous et revenons ici, puis dupliquons-le en appuyant et en le faisant glisser comme ceci. Dupliquons-le quelques fois. Ensuite, voici le texte que je copie, donc je vais l'ajouter et d' abord nous avons à peu près, puis nous avons un contact, puis ici nous allons bloquer puis nous aurons regretté notre fournisseur. Voici les principales pages de notre site Web. La page d'accueil sera donc la première page et à peu près la deuxième page, bloc la troisième, notre fournisseur la quatrième et contact sera la dernière page de notre site Web, sélectionnez-les toutes et placons-les au centre. Ensuite, je vais tous les sélectionner, passer à la position et cliquer sur ligoté comme ça. Ensuite, je changerai la couleur du champ pour ressembler à cette couleur bleue. Ainsi, nous pourrons facilement identifier les autres pages de la page d'accueil. OK. Nous pouvons maintenant ajouter des flèches à ces pages. Ici, je sélectionne la flèche, augmentons, puis je clique et je la fais glisser comme ceci. OK. Dans la flèche, nous pouvons ajouter ce style comme ceci, et maintenant nous devrions avoir une ligne pour créer une ligne, cliquez sur la ligne et cliquez et appuyez sur Shift, puis ajoutez LineTo, puis mettons la flèche comme ceci OK. En fait, diminuons la taille de la flèche sélectionnons ces deux flèches et augmentons la largeur. Sélectionnez les flèches et ici, ajoutons 55, ce sera . Et si deux seront Lo comme ça. Maintenant, je vais les dupliquer comme ceci. Comme ça, augmentez-la ici Maintenant, ajoutons, dupliquons cette flèche et ajoutons-la. En fait, nous n'avons pas besoin de ces pointes de flèche. Je vais le faire et le voici. Donc, sur notre site Web, nous aurons besoin d'une sous-page sur nos fournisseurs. Dupliquons-le donc, et ajoutons que les autres URL de page affichent le profil OK. Ensuite, je vais réduire cette taille de police à environ 30, et disons-le comme ça et changeons cette couleur pour qu'elle ressemble à cette couleur. OK. Et maintenant, je vais dupliquer cette flèche et disons-la comme ça. Puis dupliquez-le à nouveau, changez de position. OK. Maintenant, je vais supprimer la pointe de flèche de cette ligne et nous sommes les seuls à avoir besoin de cette flèche ici. OK. Et si vous ne savez pas comment créer le plan du site de votre site Web, vous pouvez consulter le site Web de votre concurrent pour vous faire une idée. Pour nous, voici le plan du site. Maintenant, nous avons toutes les pages que nous voulons créer. De plus, dans cette section de bloc, nous aurons besoin d' un seul bloc de messages. Je vais le dupliquer et le mettre comme ça. Ensuite, je vais l'ajouter comme un seul bloc quatre comme celui-ci. Regardons le plan de notre site, cliquez sur le cadre du plan du site et cliquez sur cette icône actuelle, et voici le plan de notre site pour lequel il n'est pas sûr de devoir l'indiquer. Nous devons ajouter cette ligne dans le cadre. OK. Maintenant, ça a l'air parfait. 43. Sélectionner les polices pour le site Web: Bonjour, tout le monde. Il est maintenant temps de sélectionner la typographie pour notre site Web Il existe principalement deux manières de procéder. La première méthode consiste à vérifier vos concurrents et inspirations de conception sur moodboard et à découvrir ce qui fonctionnera Voyons voir. Ici, nous avons la police seri pour le titre et la police San seri comme paragraphe Nous n'avons besoin que de deux types de polices, l'une pour le titre et l'autre pour le paragraphe Passons à d'autres designs. Ici, nous avons l' en-tête et le paragraphe Sanseris et ici nous avons Sansorifont et là encore, nous avons Sanserifont et ici nous avons la police Ceri comme en-tête. En consultant nos concurrents, vous pouvez comprendre quel type de nous avons Sanserifont et ici nous avons la police Ceri comme en-tête. En consultant nos concurrents, vous pouvez comprendre quel type de typographie fonctionnera avec notre site Web. De cette façon, ma conclusion est que l'utilisation de Sanserifont sera une meilleure option pour le paragraphe de titre. J'utiliserai deux polices San Serif différentes La deuxième méthode est donc de demander l'IA et d'obtenir leur avis. Alors faisons-le. Me voilà sur HatGPT donc je clique sur Newhat. J'ajoute donc simplement notre invite pour que vous puissiez trouver cette invite dans la section des ressources, et ici, je vais modifier cela. Comme vous êtes un concepteur Web qui conçoit un site Web pour JB Family Clinic nous pouvons ajouter la tâche. Je veux que vous soyez là, je dois changer de créateur, je veux que vous choisissiez Ty pour graphie du site Web de JB Family Clinic Ensuite, je devrai fournir plus d'informations, donc je les fournirai ici, voici plus d'informations, puis ajoutons les informations. Nous pouvons obtenir ces informations requises. Donc, ici, nous avons le but, afin que nous puissions copier l'objectif du site Web, public cible et l' objectif principal pour trouver la meilleure police. Je vais donc sélectionner d'abord, je vais sélectionner cette question, puis je vais la copier et la coller comme ça. Appuyez sur Entrée pour créer un espace. Ensuite, copiez-le et collez-le comme ceci. Alors faisons-le ici. Ceci. Maintenant, pour celui-ci, je vais le supprimer, me donner trois choix , puis essayer de générer le résultat. Voici les informations. Pour le site Web de JB Family Kenic, la typographie doit rejouer les valeurs de confiance, de soin et d'accessibilité tout en préservant la typographie doit rejouer les valeurs de confiance, de soin et d'accessibilité tout en préservant le professionnalisme. Ensuite, nous avons les types principaux tels que SunserifFamily, et nous avons obtenu les noms de police Poppins et Lato Poppins et Alors nous en avons la raison et ici, où devons-nous le mettre ? Nous devrions le mettre dans les gros titres, afin de pouvoir les mettre en sous-titre Ensuite, nous avons la phase de saisie secondaire, comme s'il s'agissait d'une famille, puis nous avons ces deux polices, mais le problème est que si nous ajoutons polices de la famille Serif au paragraphe, cela peut avoir un problème de lisibilité Il est donc toujours préférable de vérifier ces polices avant de les ajouter au site Web Nous avons également des types d'accent, mais nous n'avons besoin que de deux types de polices, l'un pour le titre et l'autre pour les paragraphes Passons à Google Fonts et vérifions ces deux polices. Même si ces polices ne conviennent pas au site Web, nous savons que le SanSeriFont fera bon titre. Voici une famille de polices Serif, mais lorsque nous vérifions ici, nous constatons que chaque projet utilise une police de type Sun Passons maintenant aux polices Google. Je suis maintenant sur phones.google.com. Ici, nous pouvons vérifier les polices suggérées. Copions les quatre épingles , puis nous pouvons directement rechercher la police ici. Voici la police à quatre épingles, ici, nous pouvons définir la taille des titres. Définissons-le sur 55 et ici, ce sera l'apparence et la police 55 normale sera du plus bel effet sur notre site Web. Découvrons la police de paragraphe suggérée par GPT, donc ce sera celle-ci, copions la police , venons ici et recherchons la police et voici cette police Faisons défiler la page vers le bas, et voici à quoi cela ressemble lorsque nous l' ajoutons en tant que fixateur du paragraphe 16. Comme je l'ai déjà dit, nous devons tenir compte de la lisibilité Si nous utilisons habituellement la police Serif pour les paragraphes, elle ne sera pas facile à lire pour certains utilisateurs Cependant, certaines polices modernes conviennent mieux aux paragraphes, et nécessitent même le type de police Si. OK. Maintenant, selon ce tableau de mode, le sous-titre du titre et paragraphe doivent être des polices sensorielles Découvrons Sanserifon, il suffit d'aller sur Google Fonts et d'utiliser le filtre et de cliquer sur le Ensuite, faites défiler l'écran vers le bas, et ici nous allons définir le test de police Sensorif cliquez sur et voyons maintenant les polices de notre site Web J'aime bien ces polices, alors ouvrons avec le bouton droit de la souris et ouvrons-les dans la fenêtre Nib, les dernières polices suggérées par HG PT Ouvrons-les donc aussi et faisons défiler la page vers le bas pour trouver la meilleure police pour le site Web Toutefois, si vous avez déjà un logo et des directives de marque, vous devez les suivre, utiliser des polices similaires à la police de votre logo et si vous ne trouvez pas la police A, trouvez simplement une police similaire. Maintenant, j'ai trouvé trois polices adaptées au titre. Maintenant, trouvons un seul d'entre eux pour le faire, ici, je peux le définir sur 60 et nous utiliserons le standard et il ressemblera à ceci sur le site web. Si nous passons à, fixons la taille à 60 et nous devrons utiliser cette police normale, normale ou claire, la taille de la lumière est trop fine, normale sera bonne. Je vais ressembler à ceci et nous avons trouvé la police Manro, Mnro et augmentons la taille à 60 et la police normale ressemblera Parmi ces trois polices, je vais utiliser cette dernière police en tant que police Je clique donc sur get font et elle sera ajoutée au bucket Nous devons maintenant trouver la police de caractères pour les paragraphes. Je vais supprimer ces deux polices et dans les polices de navigation, nous sélectionnons les capteurs. Maintenant faisons défiler la page vers le bas pour voir quelques polices à utiliser. Je vais ouvrir ce téléphone, mais aussi celui-ci et celui-ci. Faisons défiler la page vers le bas et cela apparaîtra ici dans le texte du paragraphe. Donc, si je clique dessus et que je passe à peu près la plupart du temps, nous pouvons voir où utiliser cette police. Ici, c'est un sentiment public qui est une phase typographique naturelle forte pour les interfaces, le texte et le titre Nous pouvons l'utiliser sous forme de texte, c' est-à-dire de paragraphe, puis si nous allons ici, pas ici, si nous utilisons cette police, voyons comment elle ressemblera à ceci sur le paragraphe. Voyons les détails ici, nous avons des détails et lisons-le, disons qu'il est conçu à des fins d'affichage, mais qu' il est suffisamment lisible pour être également utilisé dans une taille réduite Nous pouvons utiliser celui-ci au paragraphe. Ici, disons-le comme moyen. Lorsque nous ajouterons du médium, cela aura une bien meilleure apparence. Vérifions-le et il ressemblera à ceci sur le paragraphe. Pour le téléphone, disons que fi tree est une police sensorielle géométrique propre mais conviviale à utiliser dans un laboratoire mobile de bande Web. C'est dur et nous avons utilisé le cri pour le texte. Il est clair que je dis que nous pouvons l'utiliser pour le texte. Il est parfait pour les boutons et les étiquettes courtes. En majuscules, c'est parfait pour les boutons et les libellés courts Je vais utiliser cette police adaptée comme police de paragraphe Je clique donc sur Obtenir la police, et maintenant nous avons ces deux polices, et je vais supprimer cette œuvre. Si je me souviens bien, nous utilisons ces quatre Découvrez les polices Google dans nos leçons précédentes. Je clique sur Premo et voici les polices que nous allons utiliser Maintenant, nous devons définir ces polices dans le fichier Figma Dans la leçon suivante, nous allons 44. Qu'est-ce qu'une feuille d'autocollants: Bonjour, tout le monde. Parlons de quelque chose de vraiment pratique et important pour les concepteurs de sites Web. C'est Itigai. Qu'est-ce qu'un Itigahi exactement ? Pensez-y comme ça. Il s'agit d'un ensemble d'éléments de design que vous utiliserez à plusieurs reprises lors de la création d'un site Web. Ces éléments peuvent être des boutons, des icônes, des logos, des palettes de couleurs et même des polices. C'est comme une boîte à outils que vous préparez avant de concevoir votre site Web. Non seulement avant la conception, vous ajouterez d'autres éléments à feuille Itiga pendant que vous concevez le site Web Pourquoi avons-nous besoin du drap Itiga ? Eh bien, lorsque nous concevons des sites Web, nous voulons que tout soit cohérent afin que tout corresponde à l'ensemble du site Web. Commençons donc par créer un ensemble de styles. Maintenant, je vais dans notre fichier Figma et je clique sur conframe pour créer un cadre comme celui-ci Augmentons-le comme ça. Ensuite, je changerai le texte en feuille d'autocollants. OK. Dans Figma, nous utilisons des styles et des variables que nous pouvons enregistrer pour une utilisation ultérieure Nous pouvons créer une palette de couleurs, une police, des boutons, icône ou autre élément similaire sur la feuille Itera et les enregistrer en tant que variable ou Azur. Commençons. Tout d'abord, nous choisissons nos polices, je supprimerai les onglets inutiles puis cliquerai sur l'icône de cette carte sur les polices Google, et voici nos polices. Alors, cliquons ici, et j'appuierai sur T, et créons une section ou un test appelé Typographie, puis surlignons-le, et augmentons la taille à 60 OK, 60 c'est trop, alors diminuons-le un peu 42, n'est-ce pas Maintenant, je vais dupliquer ce texte et le changer comme en-tête. Ici, nous pouvons sélectionner la typographie d'en-tête que nous choisissons Nous avons choisi Lato comme typographie de titre. Copions ceci et revenons ici. Ensuite, ici, je vais le définir comme lato et sélectionner la taille comme 60, puis le rendre régulier Maintenant, je vais changer l'en-tête du texte 60, 60 c'est la taille et régulariser la police du tweet OK. Nous avons maintenant le texte d'en-tête et je vais le dupliquer. Ajoutons une taille intermédiaire à 20. A ici, ajoutons une taille comprise entre 30 et ici j'ajouterai des paragraphes. En fait, double-cliquez dessus et supprimez-le. C'est le mot correct, et le texte du paragraphe sera «   Vérifions-le ». C'est Fk Tree. Sélectionnons l'arbre PF. OK, ici nous avons la taille 200 et voilà, disons que la taille normale aura l'air bien. Mettons la taille entre les deux , comme une personne. OK. Nous avons maintenant la police de paragraphe, police d'en-tête, et nous allons les dupliquer. Dupliquons-le deux fois, et ici nous aurons un sous-titre, et ici nous aurons une bouteille En fait, si nous le voulons, nous pouvons ajouter le titre de police deux, mais ajoutons-le comme ceci. Ensuite, pour le subfdding, je mettrai la taille de police à 30. OK, et faisons en sorte que ce soit moyen. Il semble trop gros, alors faisons-en 25 et une version normale sera une bonne chose. Alors changeons-le en 25 normal. Il va maintenant falloir ajouter la taille du bouton. Paragraphe, nous devons le remplacer par 20. La taille du bouton sera alors de 20 pouces et définissons le boîtier en majuscules. Faisons en sorte qu'il soit de taille moyenne. Allons en obtenir 20. Maintenant, je vais changer de position comme ça. Ce seront les polices que nous utiliserons. Nous pouvons également créer cela d'une meilleure façon. C'est-à-dire que je vais copier celui-ci et le renommer en en-tête, changer sa taille à 30 et ajoutons ceci Alors je vais le mettre ici. termes, alors ici nous pouvons changer le nom de la police comme lato et nous pouvons le faire ici, dupliquez-le ici et faites-le subdin comme ceci, puis ici nous changerons le nom de la police subwdingo Le nom de la police est Week Tree. Maintenant, nous devons obtenir ceci et ce sera bouton, bouton. Alors ici, changeons-le Petree et faisons-le un espace de 30 30 Et puis dupliquons celui-ci. Ce sera un paragraphe, et ici ce sera de la figure 3 à la normale. OK. Maintenant c'est très clair. Nous ajoutons simplement de la typographie à notre istigast, puis nous pouvons créer des variables de typographie ou des variables Pour ce faire, sélectionnez le type de sauce et cliquez ici. Ensuite, dans le style du texte, fenêtre contextuelle, cliquez sur cette icône plus. Je vais le définir comme en-tête et cliquer sur Style créatif. Je vais cliquer ici. Faisons celui-ci B plus facilement. Cliquez ici et cliquez sur Style de texte, cliquez sur cette icône plus et ajoutez-la comme ceci. Faisons-le pour le texte du deuxième bouton et cliquez sur Style concret, et faisons-le pour le texte du paragraphe deux, comme ceci OK. Ajoutons donc ces styles au texte, je vais donc créer un test comme Hello every one. Comment allez-vous ? Donc, ce texte est actuellement ouvert au sens ouvert, donc je clique sur le texte ici est typer graphiton. Je clique dessus pour l'appliquer et si je sélectionne l'en-tête, il se transformera en texte d'en-tête. Et si je clique sur C subbedin, cela deviendra subbedin. Si je clique sur les boutons Con, le texte des boutons se transformera en texte. L'avantage est de penser que nous avons beaucoup de texte comme celui-ci sur le site Web, nous avons beaucoup de paragraphes et que nous pensons que nous devons modifier la taille du texte sur l'ensemble du site Web. Nous pouvons facilement cliquer sur le texte que nous avons créé dans la feuille de style Dans ce cas, il s'agit du texte d'un paragraphe. Ici, nous pouvons cliquer, puis cliquer sur cette icône Modifier le style. Ensuite, ici, nous pouvons modifier la taille. Réglons-le sur 16 et appuyons sur Entrée. Ainsi, lorsque je passe à 16, chaque instant ou chaque style de paragraphe que nous avons ajoutés au site Web changera. Si nous le changeons en 50, il passera à 50 comme ça. C'est l'avantage d'ajouter ses types et de créer une feuille d'autocollants. Mettons-le à deux. Nous avons maintenant trouvé la typographie de notre site Web. Je vais réduire cette feuille d' autocollants comme ceci. Dans la prochaine leçon, nous allons sélectionner les couleurs de notre site Web. 45. Créer une palette de couleurs: Bonjour, tout le monde. Choisissons les couleurs pour le site Web de notre clinique. Il existe deux manières de sélectionner les couleurs principales ou la couleur primaire pour notre site Web. La première méthode consiste à utiliser guide des émotions par couleur et à trouver la couleur correspondante. Nous sommes en train de créer un site Web pour une clinique. Lorsque nous pensons au nettoyage d'un hôpital médical, quel type d'émotion sera déclenché ? Ici, nous avons une nature équilibrée, croissance paisible, la santé ici, la santé signifie la nutrition et la couleur verte est liée à la santé des aliments. Cependant, nous avons alors confiance en une force fiable. Quand on pense au médecin, on devrait pouvoir lui faire confiance, surtout quand on parle de famille, la confiance et la fiabilité sont indispensables pour pouvoir choisir la couleur primaire comme le bleu Il existe un autre moyen. Cela signifie que nous pouvons consulter notre tableau de mode. Lorsque nous consultons notre tableau de mode, nous voyons clairement que la couleur bleue est visible partout. Ensuite, nous avons les couleurs blanc et noir. La première méthode consiste à utiliser le guide des émotions par couleur et la seconde consiste à consulter notre tableau des humeurs et à sélectionner la couleur. Maintenant, nous sélectionnons notre couleur bleue , puis nous devons créer la palette de couleurs. Pour créer la palette de couleurs, je vais aller sur coolers.co et ici, je vais cliquer sur démarrer le générateur et nous utilisons la règle 60, 3010 pour notre utilisation des couleurs, nous n'avons besoin que de trois couleurs comme couleur principale, donc je vais en supprimer deux Nous avons maintenant trois couleurs. Nous allons sélectionner notre couleur principale qui sera la couleur bleue. Je vais rendre cette couleur bleue un peu plus claire comme ça, puis nous devrons sélectionner deux autres couleurs. Une couleur sera évidemment blanche et la deuxième couleur sera foncée. Lorsque je sélectionne une couleur foncée, je n'opterai pas pour une couleur trop foncée. Je vais opter pour un peu moins sombre comme ça. Nous venons de sélectionner trois couleurs pour notre site Web. Il nous reste une chose à faire. C'est-à-dire vérifier la lisibilité de ces couleurs. Je vais cliquer ici et copier le code couleur, puis je vais sur colors.adobe.com et ici, je clique sur Ensuite, à partir de là, je vais accéder à l' outil d'accessibilité et ici, je sélectionnerai la couleur copiée comme couleur de test. En fait, nous devons le définir comme arrière-plan, puis sélectionner le blanc comme couleur du texte. Copions-le d'ici et définissons le blanc comme couleur du texte. Dans ce cas, c'est pâle. Nous ne pouvons pas utiliser de blanc sur ce fond bleu. Vérifions que cette couleur noire et blanche conviendront pour cela Je vais ajouter cette couleur de fond noir et tester la couleur en blanc. Elle passera les trois tests et changeons le texte et la couleur d'arrière-plan. Est-ce que passera les trois tests et changeons le texte et ça passe toujours, ce qui signifie que nous trouvons deux couleurs. Verrouillons donc ces deux couleurs, et maintenant nous devons changer cette couleur bleue. Alors rendons-le un peu plus sombre comme ça, et copions cette couleur. Alors venez ici et mettons-le comme couleur de texte. Donc, dans un petit test, il échoue toujours. Changeons donc la couleur, mais cela échoue toujours, nous devons donc la rendre plus sombre. Voyons comment cela fonctionne avec ce type de couleur et copions la couleur présente maintenant qu'elle est passée, ce qui signifie que nous avons sélectionné avec succès la couleur primaire. Mais si cette couleur n'est pas la couleur bleue que vous aimez, nous pouvons changer de couleur à partir d'ici et voir quel type de couleur vous conviendra. Ainsi, lorsque nous changeons de couleur, le ratio sera modifié. Ainsi, lorsque le nombre sera plus élevé, cela signifie que nous aurons une meilleure accessibilité et que les utilisateurs pourront bien y voir. Je vais donc sélectionner cette couleur comme couleur principale et nous avons maintenant trois couleurs. Îlotez cette couleur parce que c'est une couleur vive et maintenant nous avons ces trois couleurs Passons à notre fiche d'Itagia. Voici notre feuille Itiga et créons un nouveau texte. Dupliquons celui-ci et changeons les couleurs. Ajoutons notre palette de couleurs. Pour ajouter notre palette de couleurs, je vais simplement cliquer sur rectangle et créer un rectangle comme celui-ci. Mettons 150 par 150 et nous n'avons que trois couleurs. Je vais le redemander trois fois. Maintenant, nous allons copier ces couleurs. À partir de là, je clique ici pour copier ce bleu, puis je clique sur le premier rectangle et je change la couleur du champ en cette couleur bleue. Ensuite, nous avons cette couleur blanche, copiez-la et collez-la comme ça. Lorsque nous le collons, la couleur ne sera pas visible car notre arrière-plan est blanc. Donc, si nous pouvons changer cet arrière-plan en une couleur différente comme celle-ci, changeons-le en vert ou nous pouvons ajouter le trait pour ce cube ou ce rectangle. Ajoutons Etroke, sélectionnons le rectangle et cliquez sur Je viens d'ajouter l'astro noir puis nous allons sélectionner ici notre troisième couleur. Copiez ceci. Nous allons tester cette couleur avec. Lorsque nous le testons, il échoue toujours, ce qui signifie que nous ne pouvons pas utiliser cette couleur bleue sur fond noir. Nous devons l'utiliser uniquement sur fond blanc. Copiez-le, allez ici et cliquez ici, puis ajoutez-le comme couleur suivante. Maintenant, nous avons des couleurs. Maintenant, nous pouvons créer du style. Alors cliquez ici et cliquez sur cette icône plus, et définissons ce style en noir, et cliquons sur le blanc et cliquez ici, cliquez sur cette icône plus et définissez cette couleur comme telle, puis cliquez sur cette couleur bleue. Cliquez ici, cliquez sur l'icône plus, définissez-la en bleu et cliquez sur Createtyle OK. Nous avons maintenant nos couleurs et notre typographie Dans la leçon suivante, nous allons créer un logo pour notre site Web. 46. Créer un logo de marque: Bonjour, tout le monde. Créons un logo pour notre site Web. Nous avons la typographie et les couleurs. Créons maintenant le logo. Le nom de notre site Web est BG Family Clinic, je vais donc simplement le copier venir ici et le coller ici. Ensuite, ce que je vais faire, c'est créer un texte, le prédéfinir et créer du texte ici Ensuite, je colle ce texte, puis je supprimerai cette partie de la clinique familiale. En fait, je peux supprimer celui-ci. Ensuite, je changerai cette typographie en en-tête. Ensuite, je vais cliquer sur détacher Istile. Lorsque je clique sur Detachtyle, je peux modifier librement Ici, je vais le mettre encore plus en gras et augmenter le nombre de côtés à 78 comme ça. Ensuite, je vais changer la couleur de remplissage cette couleur bleue. Nous devons maintenant concevoir le reste du logo. Je vais cliquer sur T, cliquer ici, apposer ce texte pour que nous le copions et voilà la partie clinique familiale. Je vais maintenant cliquer ici et cliquer sur Tchad. Ensuite, je vais détacher le style E, puis le présenter comme ça Ajoutons un espacement de 20. Ensuite, j'augmenterai davantage cette partie JB. Maintenant, je vais cliquer sur ce texte et cliquer sur la ligne inférieure. En fait, ça va. Maintenant, augmentons à nouveau ces 20 surlignons les deux et cliquons sur Aligner au centre vertical. Maintenant, je vais changer la couleur de ce test de clinique familiale en noir. OK. Maintenant, je vais mettre en évidence ces deux éléments et appuyer sur la commande G pour les regrouper. Et maintenant, nous venons de créer un logo simple. Nous pouvons faire beaucoup plus de choses avec ce logo, mais c'est le moyen le plus simple de créer un logo et nous allons créer une autre version de ce logo. Donc pour ce faire, je vais à nouveau appuyer sur T et j'ajouterai JB comme ça Cliquez ensuite ici, définissez-le comme texte d' en-tête et cliquez sur le lien pour le détacher, puis augmentons cette taille en gras Et maintenant, augmentons les tailles, par exemple 88, d'accord. Ensuite, nous pouvons cliquer sur T et ajouter le reste du texte Nous n'obtenons que la partie clinique familiale et nous cliquons ici en tant que titre, puis nous pouvons le présenter comme suit Ensuite, nous pouvons augmenter ce texte à notre guise. Passons à 102 et ajoutons cet espacement à six, puis nous pouvons sélectionner éléments et cliquer sur le contenu horizontal de la ligne Alors on pourra faire quelque chose comme ça. Faisons de cette famille une couleur bleue. Ensuite, sélectionnons cette partie B et faisons-en une couleur bleue. Ça n'a pas l'air bien. Si nous le voulons, nous pouvons simplement faire que cette partie Blow soit de couleur bleue. Il existe de nombreuses façons d' ajouter des lignes autour de ce logo. Pour l'instant, ce sera une bonne chose pour notre travail. Nous pouvons également faire quelque chose comme ça. Ensuite, augmentez à 50, 50 c'est trop , 15, et changeons cette couleur pour la rendre bleue. Nous pouvons aussi faire quelque chose comme ça, mais c'est 7.5, puis cliquons sur la flèche et créons une flèche comme celle-ci. Ce n'est pas une flèche, c'est une ligne, cliquez sur la ligne, et encore une fois, cliquez comme ça, puis mettons cette ligne ici et nous devons faire en sorte que la taille soit une. Nous pouvons également faire quelque chose comme ça. Il y a beaucoup de choses pour le faire. Il y a beaucoup de choses à faire, mais le moyen le plus simple et le plus facile consiste à créer ce type de logo. Je vais vous fournir toutes ces informations. Maintenant, je peux cliquer sur ce logo et cliquer sur le port. Définissez ensuite le type de fichier en PNG, puis augmentez la taille à deux x, puis cliquez sur Télécharger et le téléchargement se fera comme ceci. Je vais changer son nom en logo JB. Dupliquons celui-ci et faisons-en un logo. Il ne nous reste plus qu'à créer un logo simple pour notre site Web. 47. Qu'est-ce que le composant Figma: Bonjour, tout le monde. Dans FIGMA nous avons une fonctionnalité appelée composants Les composants sont des objets réutilisables qui peuvent nous aider à créer et à maintenir une conception cohérente sur l'ensemble du site Web, afin que nous puissions transformer n'importe quel élément du canevas Figma en composant Faisons donc partie intégrante de ce logo. Pour cela, il me suffit de sélectionner le logo. Lorsque je sélectionne le logo, je peux voir sur le côté droit nous avons sélectionné l'élément que nous avons sélectionné et ici nous avons une petite icône appelée créer un composant. Je tape juste dessus. Quand je l'ai fait, ce logo est devenu un composant. Lorsque vous le transformez en composant, le surlignage de l'article devient indigo. Si je clique ici, il sera affiché sous la forme. Permettez-moi d'augmenter le design. Si je clique sur l'élément normal, il sera surligné en bleu. Mais si je clique sur le composant, il sera mis en évidence sous forme d'indigos Toujours dans la section de la couche latérale gauche, il sera indiqué qu'il s'agit d'un composant. Maintenant, comment utiliser ce composant pour le démontrer, je vais simplement créer un cadre et créer un autre cadre. Maintenant, je pense que je dois ajouter ce logo à ce cadre pour le faire, nous avons une méthode simple pour l'utiliser, nous pouvons accéder à cet onglet AZA sur notre gauche. Je clique simplement dessus et quand je clique dessus, je peux voir des bibliothèques ici. Si je le souhaite, je peux simplement rechercher le logo de la bibliothèque. Et le logo apparaîtra ou si je clique sur les affirmations locales, le logo sera là Il ne me reste plus qu'à cliquer dessus et à cliquer sur Insérer instantanément. Nous pouvons maintenant modifier ici. instance signifie une copie de ce composant principal, qui signifie que si j' apporte des modifications à ce composant, cela affectera l'instance de ce composant. Modifions ce cadre pour simplement cliquer ici, cliquer sur Insérer instantanément, puis je vais simplement l'ajouter comme OK, pour démontrer les avantages de ce composant, je vais le dupliquer comme ceci, puis je cliquerai sur cette icône instantanée détachée. Lorsque je clique dessus, il devient un élément normal. Si je passe au fichier, c'est juste un élément normal, et maintenant dupliquons celui-ci comme ceci et comme ça. Maintenant, je pense que je dois changer cette couleur JB en rouge. Nous avons donc deux versions. L'un est une instance de ce composant principal, et voici un duplicata de ce logo. Changeons donc de couleur. Ici, je sélectionne le texte et changeons cette couleur pour qu'elle ressemble au rouge. Je clique sur détacher le style d' ici et change cette couleur en rouge Lorsque je change cette couleur, cela affectera l'instance de ce composant principal. Donc, si je change celui-ci un par un, ça changera comme ça. Mais si vous dupliquez ce logo normal et que vous apportez des modifications à celui-ci un par un, cette touche sera plus facile à voir comme ça. OK. Maintenant, si nous apportons des modifications à ce logo, cela n'affectera pas nos logos dupliqués. Vous voyez, c'est l'avantage d'avoir un composant. Maintenant, je vais simplement les supprimer toutes et cliquer ici, supprimons les modifications et ici, définissons la couleur sur le bleu. Sur notre site Web, nous allons créer 45 pages. Dans ce cas, nous pouvons créer une instance de ce composant. Comme nous pouvons modifier les détails de cet instant. Par exemple, si je change ici, comme un ou un, cela n' affectera pas le composant principal, mais si je change de couleur, cela changera la couleur de cette instance et si je change ici, deux, cela n'affectera pas cette instance modifiée car nous l'éditons et essayons de changer la couleur. Changeons la couleur en bleu. La couleur changera quand même, je ne changerai pas le texte car nous changeons le texte de cette instance. Il s'agit du composant « avantages d'utilisation ». À l'avenir, nous utiliserons davantage de composants et vous en apprendrez plus sur les composants, voir dans la leçon suivante. 48. En savoir plus sur les composants avec des boutons: D'accord. Essayons maintenant de créer des composants avec un bouton. Pour ce faire, je vais créer un nouveau cadre et le définir comme cadre de bureau. D'accord. Maintenant, je vais créer un bouton. Pour créer un bouton, j'appuie sur T et définissons le nom du bouton comme bouton. Nom ou nous pouvons simplement dire étiquette. Ensuite, je vais augmenter sa taille à environ 20, changer la police en chemin de fer et cliquer ici, puis la mettre en majuscule, puis changer la police normale en semi-booléenne OK, maintenant j'appuie sur Shift A pour créer une mise en page ou ajouter une mise en page automatique à ce bouton et je vais définir 30 comme rembourrage horizontal et 20 comme rembourrage vertical Maintenant, je vais changer la couleur de remplissage en, changeons-la en vert comme ceci avec du vert plus foncé. Comme cette couleur, alors j'ajouterai des coins comme 30, faisons-en six. D'accord. Maintenant, je vais changer cette couleur de texte, changeons-la en Y. Maintenant, nous devons rendre couleur de fond un peu plus foncée comme ça Maintenant que nous avons ce cadre, je vais le renommer en bouton, puis je cliquerai sur ce bouton de création de composant et je changerai ce bouton en composant D'accord. Maintenant, comme nous l'avons déjà appris, nous pouvons ajouter ce bouton à plusieurs reprises ailleurs. Faisons-le. Je vais dans Asserts et je clique sur le composant Earl Ici, nous avons le bouton, puis je clique sur Insérer une instance. OK, nous avons le bouton, et ici je vais modifier ce texte pour en savoir plus sur moi. D'accord. Ensuite, si je change la couleur du texte en gris, elle deviendra grise. lorsque j'apporte de telles modifications, cela passe à notre instance comme celle-ci , car il s'agit de notre composant principal, et voici l'instance de ce composant, qui signifie que si nous évaluons et créons d' autres instances, nous pouvons les ajouter n'importe où en modifiant le texte, cliquant et ce type de bouton tout au long du design. De plus, nous pouvons toujours dupliquer cette instance comme celle-ci et appliquer les modifications que nous apportons au composant principal. Dans le composant principal, nous pouvons créer une variante. Variant signifie une version différente de ce bouton. Par exemple, appelons ce bouton bouton principal. Celui-ci est un bouton principal et je pense que nous avons besoin d'un bouton secondaire. Et la forme du bouton est la même. Seule chose, le champ n' aura pas de couleur verte. Au lieu de cela, il aura une bordure verte, et ce texte sera également vert. Pour ce faire, nous pouvons sélectionner notre composant principal, et lorsque je clique dessus, nous verrons cette petite icône représentant un plus Elle s'appelle advarian. Lorsque je clique sur Con, cela créera une version dupliquée de ce Ensuite, le design de ce bouton sera modifié. Ajoutons un trait. J'appuie simplement ici, ajoutons un trait avec cette couleur et faisons-le aussi. Je vais maintenant changer cette couleur de remplissage ou supprimer cette couleur de remplissage. Ceci, puis je vais changer la couleur du texte de ce bouton. Changons la couleur du texte pour qu'il soit de la même couleur que cet arrière-plan et il y aura peu de lumière. Rendons-le plus sombre comme ça et ajoutons cette couleur de bordure à OK, nous avons maintenant le bouton principal et le bouton secondaire. Renommons-les donc. Je clique donc sur ce bouton, et ici je l'appellerai bouton secondaire secondaire. D'accord. Lorsque je le change et que j'appuie sur le centre, il appelle le bouton secondaire, et nous avons ici le bouton principal. J'ai appelé default, nous pouvons changer cette valeur par défaut en bouton principal. D'accord. C'est bon. Nous avons maintenant deux versions de ce bouton et nous pouvons créer de nombreuses versions à notre guise. D'accord, pour l'instant, utilisons cette variante dans notre cadre. Pour ce faire, je vais sur Assets et voici notre bouton. Quand je touche, nous pouvons en voir deux, je veux dire que cela inclut deux variantes. me suffit donc d'appuyer dessus, et à partir de là, je peux sélectionner le type de bouton que je veux. Je vais donc cliquer sur le bouton secondaire et sur Insérer instantanément. Alors voilà, et maintenant nous pouvons changer ce nom et cet emplacement comme ça. Et maintenant, réfléchissez si nous voulons en faire un bouton principal. Imaginons donc que nous en saurons plus ici. Ici, nous avons le bouton « Learn Me » et le bouton « Trouver l'emplacement ». Il s'agit du bouton principal et du bouton secondaire, et je veux en faire un bouton principal. Pour ce faire, je clique sur le bouton, et ici nous avons la propriété 1, je clique simplement comme ça et je clique sur le bouton principal. Il suffit de changer et d'obtenir tous les détails de ce composant. Les données du bouton principal. Ensuite, si je veux le rendre secondaire, je peux simplement cliquer ici et cliquer sur le bouton secondaire et nous pouvons faire pour n'importe lequel de ces boutons. C'est l'avantage de connaître composant et de savoir comment ajouter une variante. Créons également une autre variante. J'appuie simplement sur class et pour celui-ci, changeons les détails, supprimons d'abord le champ et ne créons aucune bordure de texte, et changeons cette couleur de texte en cette couleur. Ensuite, ajoutons une icône à côté d'ici. Ajoutons l'icône ici. Pour ce faire, je vais dans les ailerons et à partir de là, allons chercher l'icône. Je vais donc obtenir une icône à partir du plugin. Je cherche donc ici la police Osome, nous avons des icônes de fontosom Je clique simplement dessus, et à partir de là, passons à l'icône, obtenons l'icône. Une seule flèche. Nous allons sélectionner ce type de flèche. Maintenant, je sélectionne simplement la flèche appuie sur la commande X et je la coupe. Si vous utilisez Windows, vous pouvez appuyer sur Ctrl X puis sur Commande V. Dans votre cas, ce sera Control V. Ensuite, nous aurons un design comme celui-ci. Je clique dessus et je vais l'augmenter comme ça. n'avez plus besoin de cette flèche, cercle ALT, il suffit de le supprimer. D'accord. Maintenant, je vais cliquer sur ce logo et le remplacer par cette couleur. D'accord. Maintenant, je clique sur cette variante et ici, je peux changer de taille. Faisons comme si c'était OK. Maintenant, ce que je peux faire, c'est l' ajouter à notre design. Donc, avant de l'ajouter, renommons ce bouton pour simplement cliquer sur le bouton, cliquer sur le bouton, et changeons-le bouton simple secondaire principal, bouton simple Le nom n'est pas important. D'accord. Maintenant, ce que je peux faire, c'est aussi ajouter ce bouton. Donc, si je vais sur AZAS, cliquez ici et ici, changez la propriété bouton simple et cliquez sur Insérer une instance, nous ajouterons que nous pourrons ajouter ce bouton comme ceci Je vais à Fs. Et maintenant, ajoutons tous ces boutons dans le cadre du bureau comme ceci. D'accord. Maintenant, je peux modifier le texte. Modifions-le pour passer à l'étape suivante comme ceci. Alors maintenant, si nous le voulons, nous pouvons simplement cliquer sur le bouton et modifier son design comme ceci. Vous voyez, c'est l' important de connaître le composant et d'avoir une idée de la variante. Cela nous aidera à maintenir la cohérence sur l'ensemble du site Web. 49. Comment trouver du contenu pour la conception de sites web: Bonjour, tout le monde. Si le client ne fournit pas de texte ou d'image, nous devons le trouver. Voyons d'abord comment trouver le contenu d'une image. Pour ce faire, nous pouvons utiliser sites d'images historiques gratuits tels que pixadt com ou pixabay.com Ces images sont libres de droits, ce qui signifie que nous pouvons les utiliser sur nos produits Dans notre cas, nous devons trouver des images liées à la clinique familiale. Je vais simplement chercher quelque chose comme une clinique familiale, et voici les images que nous avons obtenues. Je clique sur ces filtres et ici je vais le définir comme horizontal. Ensuite, nous ne pouvons filtrer que les images horizontales. Je vais simplement sélectionner certaines de ces images, donc je les ouvre dans une nouvelle fenêtre. Ouvrons celui-ci. Maintenant, je vais aller sur le site pixabay.com et chercher quelque chose comme Doctor Ici, je vais filtrer uniquement, il suffit de rechercher et de trouver des images comme celle-ci. J'ai déjà sélectionné les images dont nous avons besoin pour mener à bien ce projet Lorsque vous concevez de vrais projets, il suffit de trouver des images liées à la niche de votre site Web. Voyons maintenant comment générer du contenu. Pour générer du contenu, nous pouvons utiliser GPT ou J Mini. Utilisons le GPT. Je copie simplement notre message et répondons à cette demande. Vous êtes donc un concepteur Web et vous allez concevoir le site Web de JB Family Clinic Passons donc à notre ensemble d'exigences en matière de conception Web, copions ce nom, puis je veux que vous soyez là, nous devons ajouter la tâche. Je veux que vous produisiez du contenu pour chaque section du site Web. Je vais vous donner le nom de la section, et vous devez générer du contenu. Ensuite, dans la section plus d'informations, nous pouvons ajouter tous les détails que nous avons collectés sur le tableau des exigences de conception Web. Commençons donc par là, copions celui-ci et regardons celui-ci en face, puis allons-y, passons-le comme ça. Je suis ici comme ça, puis vas-y comme ça. Ce sont les informations que nous pouvons fournir. OK, alors on me donne trois choix. Nous devons changer cela parce que nous ne l'avons pas envoyé à la section dont nous voulons obtenir du contenu Nous pouvons donc vous donner trois choix pour chaque section lorsque je vous donne la section et que je vous présente, dis que je suis prêt à vous aider à générer du contenu pour chaque section du site Web de la famille BG Kenic OK, maintenant je n'ai plus qu' à ajouter la section, je vais ajouter une section comme la rose de la page d'accueil . Ici, nous avons la section des héros. OK, nous avons un titre, sous-titre et un appel à l'action Ensuite, si cette section ne convient pas, nous pouvons en parler. Je peux dire que j'aime aussi l'option, mais le sous-titre et le CTA signifient appel Le texte du bouton est trop long. Peux-tu les montrer ? Maintenant, je dis que c'est trop court. Alors je peux dire que c'est encore trop court. Et tu peux me donner un sous-titre de 150 caractères seulement. Ici, nous avons le sous-titre de 150 caractères. Continuez la conversation comme ça avec CGBD et générez le texte Cependant, lisez toujours le texte généré par l'IA avant de les ajouter à votre site Web. OK. Maintenant, je vais vous voir dans la vraie conception de sites Web et vous pouvez obtenir toutes ces polices et images dans la section des ressources. 50. Section des héros de design: Bonjour, tout le monde. Il est temps de concevoir notre site Web. Commençons donc par créer le cadre. Je vais créer un cadre ici, alors cliquez sur le cadre, puis ici, sélectionnons le cadre de la taille du bureau. OK. Maintenant, selon le plan de notre site, nous devons d' abord créer la page d'accueil. Je vais donc le renommer Home. Ensuite, je vais apporter la structure de ce site Web ici afin que nous puissions voir clairement ces deux cadres. OK. Maintenant, je vais ajouter une grille de mise en page à ce cadre. Pour ce faire, je clique sur cette icône plus et je clique ici, puis je change de grille en colonne et le nombre de colonnes sera de 12. Et ensuite, gardons cette couleur. Et ici, il faut ajouter de la marge. Ajoutons une marge de 140. Les données seront au nombre de 20. OK. Réduisons maintenant l'opacité de ces grilles de mise en page comme suit Maintenant, si je veux, je peux le sauvegarder. Il suffit de cliquer ici, appliquer le style et de cliquer sur ce style créatif faire une grille d'appels et présenter. Nous pouvons maintenant réutiliser ces données de grille encore et encore. premier temps, nous devons convertir ce cadre en AutoAyouTo , nous devons ajouter une mise en page automatique à Pour ce faire, je peux cliquer avec le bouton droit de la souris et ici je peux cliquer sur Ajouter OtoAyouTo. Je peux cliquer sur le cadre et appuyer sur Shift A. Lorsque j'appuie sur Shift A, la mise en page automatique est ajoutée Ensuite, ici, nous devons le définir comme mise en page verticale car nous allons concevoir le site Web de haut en bas. Ensuite, à cet écart vertical entre les objets, je vais faire de un à 20, ce qui signifie que nous aurons un espace entre deux sections de 120. Le motif horizontal sera alors de 140, ce qui signifie que le contenu ne sera disponible que dans cette section. Ajoutons une marge de rembourrage supérieure à 20. OK. Maintenant c'est prêt. Tout d'abord, je vais simplement augmenter ce design et ajouter une image de fond à la section des héros. Créons un triangle rouge, j'appuie sur le triangle rouge, je clique comme ça, puis je clique sur ce IgnooToayout, car nous allons ajouter une image de fond Alors maintenant, je vais fabriquer 1 440 WT et atteindre des hauteurs de 800. OK. Disons ça comme ça. Maintenant, je vais ajouter l' image pour ajouter l'image, je clique ici, je clique sur cette petite flèche vers le bas sur les toes en forme de dessus et je clique sur Image vidéo. À partir de là, je vais choisir Image 04, donc je clique sur Ouvrir. Et maintenant je vais cliquer sur le rectangle et cette image sera ajoutée comme ça. Alors maintenant, si je le souhaite, je peux régler le recadrage et ajuster la position. Ajustons-le donc comme ça. OK. Vérifions-le maintenant en mode aperçu, pour qu'il ressemble à ceci. À l'étape suivante, nous devons ajouter de la couleur de superposition Sans ajout de couleur de superposition, nous ne pourrons pas ajouter de texte car cela affectera la lisibilité de la page d'accueil Pour ajouter une superposition, il suffit de cliquer sur ce remplissage et de cliquer sur AddFLL pour augmenter l'opacité Ce que je vais faire, c'est ajouter le dégradé. Radiant signifie que d'un côté, on peut ajouter une couleur plus foncée et de l'autre, on peut ajouter une couleur plus claire. Alors allons-y. Le type de rayonnement sera donc linéaire. Nous pouvons changer de position comme ça. Donc pour celui-ci, je vais définir une couleur claire en haut et une couleur foncée en bas. Alors, cliquons ici. Voici donc la couleur de la lumière. Mettons-le à 70, et voici la couleur foncée. Nous devons donc augmenter la couleur foncée. Oh, et à partir de là, je vais en faire 100. Ensuite, nous pouvons ajuster ces couleurs. Donc, en haut, rendons-le brillant, ajoutons 25 et ici, faisons en sorte que ce soit 80. Oui Et si je veux, je peux le faire comme ça. Augmentons donc un peu plus. OK. Maintenant, ça va ressembler à ça. Nous ajoutons donc simplement un dégradé linéaire et si nous le voulons, nous pouvons réduire cette opacité et la rendre plus claire comme ça Faisons comme si c'était le cas à. Cliquons sur ce I pour mettre en hauteur notre grille de mise en page et elle ressemblera à ceci. Maintenant que notre arrière-plan est correct , à l'étape suivante, nous devons ajouter le contenu. Faisons-le donc dans la prochaine leçon. 51. Menu design: Bonjour, tout le monde. Il est temps de créer le menu. Avant de créer le menu, créons un cadre pour l'ensemble de notre section consacrée aux héros. Pour ce faire, il suffit de cliquer sur le cadre et de cliquer ici. OK. Ensuite, ce que je fais est de définir la largeur comme conteneur de remplissage, et de définir la hauteur sur 800 car 800 est la hauteur de cet arrière-plan. Maintenant, ce cadre est plus grand que l'arrière-plan. Donc, pour y remédier, souvenez-vous, avons-nous ajouté 20 aligner verticalement le cadre sur le cadre de notre maison ? Mettons-le donc à zéro. Lorsque je le mets à zéro, ce cadre s'adapte parfaitement à l'arrière-plan. Maintenant, je vais changer ce nom en tant que héros. OK. Ensuite, j'ajoute une mise en page automatique à ce cadre héros, sélectionne le cadre et j'appuie sur Shift A, et pour la mise en page, je vais définir la disposition verticale et sélectionner l' alignement en haut au centre comme position et nous pourrons modifier ces éléments plus tard. Ensuite, je retirerai le rembourrage horizontal et le mettrai à zéro. Cliquons ensuite sur la décoloration individuelle. Icône. Alors ici, définissons-le comme pour le bas, mettons-le à zéro. C'est bon. Il est maintenant temps de créer le menu. Je ne vais pas créer ce type de menu. Je vais créer un menu différent. Commençons donc. abord, pour créer le menu, je vais cliquer sur le cadre et cliquer ici. Ensuite, je vais utiliser un conteneur de remplissage, puis cliquer sur Remplir et ajouter une couleur de remplissage. Ajoutons de la couleur sous forme de blanc, mais cela ne s'est pas affiché car nous devons placer cette image au-dessus de la section des héros comme ceci. OK, maintenant ça se voit. Maintenant, je clique sur le cadre et fixons la hauteur à 130 OK, c'est beaucoup mieux. Nous pouvons modifier ces tailles pendant la conception. Ensuite, j'ajouterai le coin comme 20. OK. Maintenant, dans ce cadre, nous allons créer notre menu et il sera bien plus beau que ce menu normal, alors créons-le. Tout d'abord, je vais cliquer sur le cadre et appuyer sur Shift A pour le convertir en mise en page automatique ou ajouter une mise en page automatique à ce menu. Ensuite, j'appuie deux fois sur le cadre et je change son nom en menu principal. OK. Maintenant, modifions les propriétés. Nous avons besoin d'une disposition horizontale car nous allons créer un menu de gauche à droite comme ce menu Ainsi, nous n'avons pas besoin de rembourrage horizontal, mettons à zéro et nous n'avons pas besoin d'un rembourrage vertical pour le mettre à Alors pour l'instant, maintenons l' écart horizontal entre les objets à dix. Ensuite, je vais définir une ligne au centre gauche. Ajoutons ensuite notre logo. Vous souvenez-vous de la leçon sur les composants, nous convertissons ce logo en composant. Nous pouvons accéder directement à ce logo et en créer une instance à l'aide de cet onglet Assert. Je clique sur ASes et ici, je clique sur Local asserts et voici notre logo Je clique simplement dessus et je clique sur Insérer instantanément, puis je vais le mettre comme ça. Passons aux fichiers. Maintenant que cette instance ou ce logo se trouve en dehors de notre cadre, ajoutons-le dans ce menu principal en le faisant glisser comme OK Maintenant, il est plus grand, nous devons donc changer la taille pour changer la taille. Nous pouvons vérifier la feuille d'autocollants. En fait, appuyons sur Command X ou Control X pour le couper et mettons-le ici comme ça. Ensuite, je vais simplement le faire glisser ici. Ensuite, nous pouvons diminuer la taille de ce texte. C'est 84, alors diminuons-le, augmentons-le comme ça. Faisons 40 55 et nous devons changer la taille du texte comme ceci. Faisons en sorte que ce soit 42. Maintenant, ce que nous devons faire, c'est changer cela entre les tailles. Changeons-le comme six et ensuite, changeons cela avec ceci. Alors changeons. Appuyons sur Commande ou Ctrl, puis changeons la taille comme suit et plaçons le texte au centre, sélectionnons ces deux textes et mettons-le au centre et voici le centre. Le logo est encore plus grand. Moi ? Examinons le logo en mode actuel. Il est encore un peu plus grand, diminuons la taille, abord, réduisons le texte à environ 50. OK. Alors changeons ce paramètre en 35. Disons que c'est 36. OK. Maintenant, cliquez sur le milieu. Remettons-le à zéro, comme ceci. Ensuite, je clique sur le composant principal et j'appuie sur commande. Si vous utilisez Windows, appuyez sur Ctrl et réduisez sa taille comme suit. OK. Maintenant, l'écrou devient petit. La raison en est qu'il est réglé automatiquement sur câlin, suffit donc de changer ce site en 120. Je pense que nous l'ajoutons comme un à 20. Voyons voir, 120, ce sera parfait. Et maintenant, je vais mettre à nouveau ce logo sur le siège étoile. Je le sélectionne et j'appuie sur Commande X dans Windows Control X, puis je viens ici, je le colle comme ça et je le mets comme ça. OK. Encore une fois, nous allons dans le menu et cliquons sur le cadre du menu, et maintenant ajoutons 20 paddins horizontaux Maintenant, il s'adapte parfaitement. Voyons ça sur le design et ça ressemblera à ça. Si nous le voulons, nous pouvons augmenter la taille de ce logo, mais celui-ci est plus esthétique. Maintenant, nous devons ajouter des éléments de menu pour ajouter des éléments de menu, nous pouvons cliquer sur T et cliquer comme ceci. Ensuite, je vais simplement ajouter un texte comme celui-ci , puis passer au plan de notre site. Il s'agit d'abord de copier le texte et de cliquer ici. J'ai obtenu les propriétés de ce texte pendant que nous le copions. Ipress Control est donc configuré pour annuler la modification et je vais simplement taper du bois B. Ensuite, je vais cliquer sur ce texte et cliquer ici, cliquer sur Typographie, puis cliquer sur les boutons OK. Maintenant, ce que je vais faire, c'est dupliquer cela combien de fois une, deux, trois, trois fois. Alors dupliquons-le. Control C, Control V. Oh, allez, on aime ça. Ajoutons ensuite ces autres textes. Nous avons des blocs, il suffit de cliquer ici et d'ajouter un bloc. Ensuite, il y a nos fournisseurs. Allons donc ici et ajoutons nos fournisseurs. Voyons voir si le texte est correct ou non en l'ajoutant à la barre d'URL de Google Chrome, c'est bien, alors nous devons ajouter un contact. Ajoutons un contact. OK. Contenu. C'est bon, c'est bien. Nous devons maintenant sélectionner tous ces éléments de menu et appuyer sur Shift A pour créer un AutoayoutFrame Voici maintenant ce cadre, je vais donc le renommer en éléments de menu et appuyer sur Entrée OK. Passons maintenant au paramètre de mise en page automatique du nouvel élément Mettons 20 entre les côtés, et nous mettrons tous ces écarts horizontaux et verticaux à zéro Il semble que le centre soit parfaitement aligné. OK. On oublie donc la maison. Pourquoi avons-nous oublié la maison ? Dupliquons about et changeons-le en Home. OK. Je vais maintenant changer cette couleur de remplissage de la maison en bleu. OK, maintenant ce que nous devons ajouter sont les coordonnées de la clinique. Je souhaite donc ajouter un numéro de contact ici. Ajoutons donc ces détails. Pour l'instant, cliquons sur le cadre du menu principal et, dans la mise en page automatique, ajoutons des tailles entre les tailles, par exemple 60. OK. Maintenant, ça va ressembler à ça. Ensuite, je vérifie le design d'ici, mais nous pouvons faire mieux. Donc, probablement dans la prochaine leçon, nous ferons plus de choses. Avant de partir, cliquons sur ce cadre d'accueil et vous souvenez-vous de la dernière fois que nous avons masqué la grille de mise en page, cliquez sur cette icône d'affichage pour la rendre à nouveau visible. OK. Maintenant, ça va ressembler à ça. 52. Élément design nous appelle: Bonjour, tout le monde. Il est maintenant temps de créer un numéro de contact appelez-nous ici. Pour ce faire, nous devons générer un faux numéro de contact. Je vais au GPT, et j'ajouterai une commande comme créer un faux numéro de contact américain et le donner pour l' ajouter à droite du menu Donnez donc un texte clair pour ajouter son présent. OK, ça a l'air bien, mais je n'ai pas besoin de temps disponible. Il me suffit d'ajouter un SMS pour nous appeler. J'ajouterai une commande comme si je n'avais pas besoin d'ouvrir seul le numéro de contact type CtA prend le CDM en appel à l'action Voyons voir, c'est comme ça, mais je n'aime toujours pas ça. Je dirais que je n'aimerais pas nous appeler 24 et 7 jours sur 7 et ajouter un numéro de contact ci-dessous, mais nous appeler deux, quatre ou sept, c'est sûrement mieux que ça. Voyons voir. OK, joignez-nous à tout moment. Disons, donnez-moi trois suggestions. Pas de version courte. D'accord, ajoutons ceci, appelez-nous 24 heures sur 24, 7 jours sur 7, puis ajoutons le numéro. Pour ce faire, je vais passer au cadre d'accueil, et voici l'endroit où nous voulons l'ajouter. Je vais donc appuyer sur T et cliquer ici. Ensuite, j'ajouterai le texte. Copions-le. Voici le premier texte. Je le colle simplement et appuyons sur la commande C et la commande V pour l'obliger , puis passons ce texte comme ceci Maintenant, chez Style, je vais abord cliquer ici pour modifier la typographie Définissons la typographie atténuante. Alors ici, définissons cela comme une typographie atténuée. Ensuite, je sélectionne toujours ces deux éléments et appuie sur Shift A pour les ajouter à la mise en page automatique. Passons ensuite à la position en disposition verticale. Mettons-les ensuite entre les six côtés. OK. Maintenant, je veux que cette classe soit un peu plus petite et que ce nombre soit plus grand. Je clique sur Conc las 247 et changeons la taille du bouton. C'est mieux Ensuite, je vais cliquer ici et détachons le style de cette typographie du numéro, puis le mettre Maintenant c'est beaucoup mieux. Maintenant, ce dont j'ai besoin, c'est d'une icône de téléphone ici. Faisons-le aussi. Pour l'ajouter, nous avons besoin d'une icône. Récupérons l'icône de la bibliothèque Figma. Ici, nous avons des actions. Il suffit de cliquer dessus et à partir de là, je vais cliquer sur plugin et Widget. Et à partir de là, nous pouvons obtenir l'icône du pontosom. Je cherche juste fontsom Maintenant, je clique simplement sur cette icône pontosom, et je pense que je l'ai déjà installée, je l'ai je Découvrons donc l'icône et ajoutons-la. Trouvons le code de l'icône. Faisons une recherche comme un téléphone. OK. Nous avons une icône. Je clique simplement sur celui-ci et il est ajouté comme ça, puis je ne sélectionnerai que l'icône et je la mettrai dans notre cadre comme ça. OK. Ensuite, je vais sélectionner ces deux objets et décalage A pour créer des cadres différents. Voici le premier cadre que nous avons créé pour la section numérique ou la section de police, et voici le second cadre. Dans le deuxième cadre ou dans le deuxième schéma noto, nous avons Claus 247 et ce numéro de contact Ensuite, je sélectionne le premier cadre et je change sa mise en page en disposition horizontale. Ensuite, nous obtiendrons ce type de résultat. OK. Maintenant, je veux créer un fond bleu autour de cette icône. Pour ce faire, je sélectionne l' icône et j'appuie sur Shift A rendre Atayou puis je clique sur Aligner au centre Nous ajoutons d'abord l'Outlayou , puis nous en faisons un centre de ligne. Ensuite, je cliquerai sur l'icône plus sur la couleur du champ. Alors ici, en fait, je peux cliquer directement sur ce style bleu comme celui-ci. Alors ce que je vais faire, c'est ajouter 20 par 20 comme ça. Maintenant, cela n'a pas changé en fonction des modifications apportées pour y remédier, je vais le changer avec to hug content. Maintenant, faisons-le par deux. Deux petits. Faisons en sorte que ce soit 15 par 15. Maintenant, je vais changer les coins à 20. En fait, il est encore petit, mais nous pourrons peut-être y remédier. Pour ce faire, je vais ajouter un trait à cette couche de mise en page automatique. Maintenant, je clique sur la mise en page automatique, je clique dessus et je peux et ici, sélectionnons notre couleur bleue. Ensuite, je clique sur ce style de détachement et à partir de là, je sélectionnerai la couleur bleu clair Cela va fonctionner. Ensuite, j'augmenterai la taille à environ dix et mettons-la à l'extérieur , mettons-la à l'intérieur et nous changerons davantage le design. OK. Maintenant, je vais entrer dans le cadre et sélectionner le vecteur. Ensuite, j'augmenterai la taille de ce vecteur à 41 par 41. C'est 41 sur 40. C'est bon Maintenant, je vais cliquer sur le vecteur et changer sa couleur de remplissage en blanc. Maintenant, changeons-le en 30 32 par 32. Comme ça. Si nous arrivons à 32. Comme ça. Maintenant c'est beaucoup mieux et j'espère que nous avons l'espace E. Ici, nous en avons six comme espacement. Corrigons maintenant l'Alignu car cela concerne ce cadre. Pour y remédier, il suffit cliquer sur ce menu principal et de changer ce 62 présentateur automatique Maintenant, il s'ajuste en fonction de l'espace dont il dispose. OK. Nous avons maintenant un menu complet comme celui-ci, nous pouvons donc cliquer sur le cadre du menu principal et changer de gauche à droite pour en faire six. OK. Voyons voir. C'est deux de moins. Faisons en sorte que ce soit 50. OK. Maintenant, voici notre menu. On dirait que ce sont deux compacts. Corrigeons d'abord ce problème, nous pouvons réduire la taille de cette police d'environ 20 comme ça, puis changer ce temps de temps de cuisson à 15, 60, puis cliquons sur l'élément de menu et passons à la taille 30 entre les tailles. Voyons voir. Maintenant c'est beaucoup mieux et je vous verrai dans la prochaine leçon. 53. Section des héros de design CTA: Bonjour, tout le monde. Il est maintenant temps de créer cette section. Commençons. Tout d'abord, je vais ici et je clique sur le texte, et j'ajoute simplement du texte ici donc ajoutons du texte, comme du texte d'un héros. Ensuite, nous devrions ajouter ce texte à l'intérieur. C'est déjà dans la section des héros. OK. Avant cela, dans la section du menu principal, renommons les détails de ce cadre Ce cadre sera appelé Appelez-nous et ce sera une icône d'appel et ce cadre sera ajouté à un numéro. Sympa. Créons maintenant le texte de la section Hero ou le texte CtA. Pour ce faire, j'appuie sur le texte T ou Clec ici et je clique sur Alors, envoyons un texto comme Hero. Je vais maintenant minimiser cette section du menu principal car nous sommes prêts. Signez cela et maintenant, à partir de là, sélectionnons le texte, puis passons à Typographie et prononçons en-tête ou sélectionnons le texte de l'en-tête comme ça OK. Ajoutons ensuite l'en-tête généré à l'aide de GPT Voici le titre. Je ne fais que le copier. Vous pouvez donc générer du contenu vous-même en utilisant le GPT, ou vous pouvez consulter la section des ressources qui s'y trouve Vous verrez un fichier texte dans ce fichier texte, vous pouvez obtenir le contenu que nous utilisons sur ce site Web. Ajoutons-le comme ça. Maintenant ajoutons le sous-titre Ajouter un sous-titre, je vais cliquer sur T. cliquer sur Oui, je vais cliquer sur T et cliquer comme ici. Ajoutons ensuite un texte comme celui-ci. Ensuite, ajoutons ce texte, copiez-le, ajoutez-le comme ceci. C'est bon. Passons maintenant à la typographie et changeons-la en sous-titre. OK, maintenant nous avons le sous-titre et le titre. En fait, si nous le voulons, nous pouvons ajouter une autre ligne de texte et ajouter le texte de type paragraphe, mais c'est pour la réaction de la morue CtA action du CD doit donc être claire. OK, maintenant ce que nous pouvons faire, c'est créer le bouton. Nous aurons donc besoin de plus d'un bouton. Créons donc un bouton et faisons-en un composant. Pour ce faire, je vais consulter notre feuille Stiger dupliquons-la et appelons-le bouton OK Maintenant j'appuie sur T, et ici je vais dire, mais oui. Oui, alors je vais sélectionner la typographie sous forme de boutons. OK. Maintenant, je change de trajectoire A pour ajouter une mise en page automatique à ce bouton. Ensuite, à partir de là, j'ajouterai la couleur du champ. Ajoutons la couleur du champ sous la forme de cette couleur bleue. Ensuite, sélectionnons le texte de ce bouton, changeons-le en blanc o, puis sélectionnons le cadre et dans ce cadre, je changerai le rayon d' angle à 20 Ensuite, pour le bddin horizontal, j'en ajouterai 20, ajoutons 30 c'est Ajoutons 20 et 15 en haut et en bas. Voici le bouton. Nous pouvons maintenant obtenir directement l' instance de ce bouton. Pour ce faire, je vais aller sur Assets puis sur les bibliothèques et cliquer ici. OK. Je vais maintenant le convertir en composant. Avant cela, je vais renommer ce cadre en VTN. Ensuite, je vais cliquer sur ce bouton de création de composant et il deviendra un composant. Maintenant, je vais passer à notre design et ici je vais cliquer sur assertions. Nous avons ici le bouton me suffit donc de cliquer dessus et de cliquer sur Insérer instantanément Je vais maintenant passer aux fichiers, donc ce bouton est en dehors du cadre. Ajoutons-le au cadre du héros. Il suffit de l'ajouter comme ça. Maintenant, changeons cette étiquette pour demander un rendez-vous. Je n'ajouterai pas de partie aujourd'hui. Ajoutons-le comme demander un rendez-vous. Donc, quand je le regarde, il semble vraiment petit. Alors, agrandissons-le. Pour l'agrandir, vous pouvez vous rendre ici et cliquer sur le texte. Dans le texte, je vais cliquer sur ce centre aligné et maintenant cliquer ici, puis le rembourrage horizontal sera de 30, et le rembourrage supérieur et inférieur sera C'est trop ? Faisons. OK, voyons à quoi ça ressemble. OK, c'est beaucoup mieux. Cliquez ici et apportons des modifications à partir d'ici afin que nous puissions clairement voir ce que nous pouvons faire de cette façon. Pour cette section consacrée aux héros, nous devrions avoir un bouton plus gros pour la créer, je vais cliquer sur le composant et à partir de là, je vais cliquer dessus en tant que variante. En cliquant dessus, nous pouvons créer une variante de notre composant par défaut, ce qui signifie qu'il possède toutes les propriétés de notre composant, et nous pouvons modifier cette propriété à notre guise. Alors changeons les choses comme si la gauche et la droite seraient 35 et le haut et le bas 25 , oui, ce serait mieux. OK, alors je clique dessus. Maintenant, je clique sur le bouton, et à partir de là, je vais changer son nom en bouton d'en-tête, puis appuyer sur OK. Passons maintenant à notre bouton, et à partir de là, nous pouvons modifier la propriété. C'est actuellement le paramètre par défaut. Ensuite, si je clique sur l'en-tête, il passera à la variante ou à la variante que nous avons créée. OK, je vais tous les sélectionner et appuyer sur Shift A pour ajouter une mise en page automatique, puis je vais le renommer en CtA OK, alors voilà, je vais me entre Japa 220 et à partir d'ici, placer entre Japa 220 et à partir d'ici, disons-le comme ça à partir d'ici, je vais le mettre comme ça OK. Ensuite, je veux que cela soit ajouté au bas de cette section sur les héros. Essayons donc de le faire. Donc, pour le moment, voici la section des héros. Dans la section héros, nous avons le menu, mais ce CTA se trouve en dehors de cette section héros Donc, si je ferme la section des héros, le CTa ne se fermera pas, nous devons donc l'ajouter dans la section des héros comme ceci OK. Maintenant, nous pouvons cliquer sur sélectionner la section du héros et cliquer sur une ligne en haut à gauche, et à partir de là, je vais la placer entre les côtés, puis je vais faire en sorte que la hauteur de cette section de héros soit de 800. Ensuite, j'ajouterai 20 en bas. Il semble que 20 soit trop petit. Faisons en sorte que ce soit 60. OK. C'est beaucoup mieux maintenant, et en fait, faisons-en 40. OK. Voyons maintenant l' apparence de ce design. D'accord, voici notre design. Pour améliorer cela, nous pouvons ajouter un sous-titre plus grand Essayons d'en ajouter un plus grand. En fait, si nous choisissons ce sous-titre dans la deuxième option, ce sera mieux Essayons donc de l'ajouter comme ça, puis pour le réparer, je vais sélectionner le cTA et sélectionner la taille du cTA comme contenant à câlins, et ici, sélectionnons-le comme remplissage En fait, nous devons encore le réduire comme ça Disons-le comme ça. OK. Voyons maintenant le design. Cela ressemblera à ça. Modifions le rayon d'angle pour qu'il soit égal à 15. Essayons de le faire. Il suffit de cliquer ici et modifions-le 20. N° 20, 15. Faisons-le pour celui-ci, deux, et nous verrons comment cela s'est répercuté sur le côté. C'est beaucoup mieux maintenant. Et je clique sur l' arrière-plan et augmentons l'obscurité de l'arrière-plan. Je clique sur linéaire et ici je vais augmenter l'opacité, comme Unreno, isolons la section des héros et en bas, faisons en sorte qu'elle soit 60 OK. Voyons maintenant le design. Maintenant, ça va ressembler à ça. Nous pouvons faire quelque chose comme ça, et ce sera beaucoup mieux maintenant. 54. Design de la section: Bonjour, tout le monde. Il est maintenant temps de concevoir le résumé à propos de nous. Alors faisons-le. abord, nous devons générer le contenu, donc je passe au GPT, et ici je vais dire à generate generate about us résumé avec titre, titre et paragraphe avec un paragraphe avec Nous sommes donc prêts à passer cette commande. Alors maintenant, lorsque nous donnerons cette nouvelle commande, elle générera la section. Ajoutons plus d'informations, il est maintenant temps de générer une section de résumé à propos de nous avec un titre et un bouton Appuyons sur Entrée et voyons voir, j'ai trois options. Maintenant, je veux dire que je veux ajouter deux boutons dans notre structure, nous avons deux boutons. C'est bon, lisons ces trois options. OK. J'aime bien le titre et le paragraphe de cette première option et les quatre boutons J'ajouterai un bouton pour en savoir plus et le bouton suivant en tant que fournisseur de tours à viande OK, allons-y. Voici donc le fichier texte dans lequel j' ajoute toutes les informations que j'ai générées avec l'IA Je vais donc ajouter résumé à ce titre et à ce paragraphe, puis nous devrons ajouter des boutons pour en savoir plus et ajouter le bouton En savoir plus et rencontrer les fournisseurs de tours Ce sont des boutons pour en savoir plus et le second sera celui des fournisseurs MO. Commençons maintenant le design. Maintenant, je suis sur notre fichier Figma Dans un premier temps, je vais cliquer sur le cadre et cliquer ici Ensuite, je vais définir Fame avec ce remplissage, puis j' ajouterai des hauteurs Ajoutons-en 600. OK, maintenant nous avons la section. Ensuite, je vais appuyer sur Shift A pour ajouter une mise en page automatique. Nous ajoutons simplement une mise en page automatique à ce cadre et je vais renommer ce cadre en tant que résumé OK. Maintenant, dans un premier temps, nous devons ajouter une image et ajoutons cette image. Pour ajouter une image en premier, je vais cliquer sur Triangle du contrat et cliquer ici. OK, notre taille a été modifiée. Cliquons sur un cadre récapitulatif lequel nous avons déjà ajouté la mise en page automatique. Ajoutons donc cette hauteur à 600. D'accord, maintenant nous devrions également retirer le rembourrage horizontal et le rembourrage vertical Ensuite, ici, je vais définir la taille 20 de l'article entre les deux. OK. Maintenant, je vais augmenter la taille de cette image comme ceci. Ceci. Voyons combien de colonnes avons-nous ? Un, deux, trois, quatre, cinq, six. OK. Et pour ce côté, nous en avons un, deux, trois, quatre, cinq, six. OK. En fait, je vais simplement réduire cette taille à. Fixons cette largeur à 520. OK. Ajoutons maintenant l'image. Pour ajouter l'image, je clique ici et je clique sur l'image vidéo. OK, à partir de là, nous devons sélectionner l'image, donc j'ai laissé cette image IMG zéro, trois et appuyer sur Entrée. Puis ici je clique sur le rectangle comme celui-ci. OK. Maintenant, ce que je fais, c'est ajouter Corner Radice à 20 comme ça Voyons cela sur le design, cela ressemblera à ceci et essayons d'ajouter une image différente. Je clique sur ce triangle rouge et je clique ici, clique sur les images vidéos, et ajoutons ce type d'image car je n'aime pas cette couleur d'image. OK. Maintenant, OK, ça ressemble à ça. OK. Il va maintenant falloir ajouter ce type d'informations. Ajoutons-les pour les ajouter pour cela, je dois créer deux types de texte. Générons ces textes en utilisant le chat GBT. Disons une action liée au circuit intégré. Maintenant, je dois ajouter deux textes à ajouter autour des images, par exemple, 100 % K, nous avons un expert comme celui-ci. Disons que me donner trois choix d'anglais est acceptable. Voyons ce que cela génère. C'est trop long. Disons que c'est trop long. OK. J'aime bien cette première option, je vais donc les copier et les mettre dans notre document comme ceci. OK, je viens d'ajouter du texte autour des images. OK. Passons maintenant à notre fichier, et créons ces textes plus Ist et notre premier texte sera 100 % chaotique. Créons un autre texte, et disons-le comme ceci pour obtenir ces informations. Maintenant, je crée un autre texte comme celui-ci, alors je vais le faire. Désolé, nous allons créer un autre texte. Ensuite, je mettrai du texte ici et 100 par ici. Ensuite, je vais cliquer sur ce texte, et en typographie, je vais l'ajouter comme en-tête Ensuite, pour celui-ci, je vais l'ajouter en tant que subbedingo Maintenant, pour cet expert de confiance, je vais ajouter des sous-titres. Voyons voir si cette police fonctionnera. Oui, il semblerait que ça marchera. Nous avons de la place ici. Je chante juste cet espace, et maintenant je dois ajouter ces textes comme celui-ci pour les ajouter Je vais juste en sélectionner deux et appuyer sur Shift A pour ajouter une mise en page automatique. Ensuite, je vais cliquer sur la disposition verticale et la définir au milieu. Alors pour ici, je vais juste placer un élément entre six comme celui-ci. Réduisons peut-être jusqu'à zéro. Il zéro sera parfait. Il semble que K soit trop petit, alors voyons un autre texte d'ici à 100 %, copions celui-ci et essayons de le mettre. D'accord, cela semble mieux que simplement K. Oui, ajoutons-le comme ça Alors ce que je vais faire, c'est peut-être essayer de typographier le bouton, le bouton est trop faible. Modifions-le en paragraphe. D'accord, le paragraphe est bien meilleur. Oui Le paragraphe est correct. La taille du paragraphe est maintenant ce que nous devons faire c'est ajouter de la couleur et ajouter de la couleur d'arrière-plan. Ajoutons une couleur d'arrière-plan à ce cadre, sélectionnons-le et renommons-le en 100 % K, tag ou autre Allons-y comme ça. Ensuite, je vais cliquer sur Plus peut remplir, et ici, j'ajouterai Y. Ensuite, je réduirai les coins à 20, et maintenant je vais aller sur x et cliquer sur ce plus Maintenant, je vais ajouter Drop Shadow et cliquer ici. À partir de là, je mettrai X zéro, y zéro, et fixons la transparence à 15, flou à 15 OK. Maintenant, je dois ajouter un padin horizontal. Ajoutons un padin horizontal à six, bien mieux, et un rembourrage vertical OK. À partir de là, définissons-le comme deux. D'accord, 12 c'est mieux. Très bien, nous créons juste une pièce. Maintenant, je dois sélectionner l'élément que j'ai créé, puis je clique sur ce IgnoOtoLayout, et maintenant je peux le mettre comme ça Mettons-le ici. Mettons-le ici. Nous devons l'ajouter en dehors de cela à propos de Summariection. Pour ce faire, je le sélectionne et ajoutons-le . Ajoutons-le d' abord ici. OK. Maintenant, ce que je dois faire, c'est le démonter comme ça. OK. Nous avons maintenant cette section. Disons-le comme ça, disons-le comme ça. Ensuite, nous avons cette partie experte de confiance et pour celle-ci, nous devrons ajouter un logo. Ajoutons le logo. Pour ajouter le logo, je clique ici et je vais brancher le widget San. Cliquez ensuite sur les icônes Fontosm ici, recherche n'est pas bonne Nous avons une infirmière. Ajoutons cette infirmière. Il suffit de cliquer ici. Mettons-le en dehors de ce cadre, suffit de cliquer dessus et il suffit de cliquer dessus et de l' ajouter à un résumé comme celui-ci. Ensuite, je vais sélectionner ces deux éléments et appuyer sur Shift A. Maintenant, j'ajoute simplement la mise en page automatique à huit. Ensuite, je vais cliquer sur cette disposition verticale et la définir sous forme de ligne, au milieu, d' accord, alors ici, nous n'avons pas besoin de ces deux téléphones ALT et de ce cadre d'infirmière. Nous avons obtenu ces deux cadres lorsque nous avons ajouté une icône, je les ai donc simplement supprimés. Maintenant, je dois augmenter cette taille. Augmentons-le comme ça. Ajoutons-le comme si ce serait mieux. Alors pour cette taille intermédiaire, ajoutons-la comme six. Voyons maintenant celui-ci. À celui-ci, nous ajoutons 12 et six comme taille intermédiaire. Cliquons sur ce cadre et ici, renommons ce double élément tago. Tout d' abord , comme celui-ci, viendrai ici et je changerai la couleur du champ La couleur du champ est sûrement cette couleur blanche. Ensuite, je vais aller ici et en effet, je peux ajouter un effet comme celui-ci. En fait, nous avons déjà ajouté un effet à cet onglet 100 % soin. Il suffit donc de cliquer dessus et, sur l'effet, j'appuierai sur ce style d'application et sur cette icône plus. Ensuite, je vais l'ajouter Perfect, 01 et appuyer sur. OK. Maintenant, je peux cliquer sur ce tag expert rouillé et à partir de là, je vais cliquer dessus et cliquer sur EFFX comme celui-ci Ensuite, je dois ajouter des panneaux verticaux et horizontaux comme celui-ci Passons ensuite à 20 cette taille. OK. En fait, ajoutons ce motif horizontal à deux et le motif vertical sera de 220. OK, c'est beaucoup mieux. Ensuite, je changerai couleur de cette infirmière pour qu'elle passe au bleu. OK. Ça a l'air bien. Maintenant, je dois cliquer ici et cliquer sur cette mise en page Igno Auto. Après cela, je n'aurai plus qu' à le dire comme ça. Faisons-le ici. OK. En fait, mettons celui-ci ici comme ça et celui-ci au milieu comme ça entre la ligne de taille et ici, ajoutons-le comme 60, 50, 50. accord, d'accord. Voyons maintenant le design, il ressemblera à ceci. Et nous essayons toujours de créer une version minimaliste, alors n'essayez pas d'ajouter trop de choses. Il est donc temps de créer le texte. Je vais donc d'abord appuyer sur T et ajouter ce type de texte. Ajoutons ensuite le texte que nous copions d'ici. Cela fait partie de notre contenu. Je le copie et je viens ici. collez-le, puis je changerai la typographie en en-tête comme celui-ci Sortons donc de cette taille pour y remédier. Je clique ici et je le configure pour remplir le conteneur comme celui-ci. OK. Maintenant, ce que je dois faire, c'est augmenter cette taille entre les deux comme ça. Passons à 90. Augmentons 90, pas 690. OK. Maintenant, ce que nous devons faire, c'est ajouter résumé. J' appuie sur T et je crée du texte comme celui-ci, puis je dois surligner ces deux sections et appuyer sur Shift A. Et maintenant nous avons un nouveau cadre de mise en page automatique ajouté ici, puis je change cette disposition horizontale en mise en page verticale, et à l'intérieur de celle-ci, je vais faire apparaître cet en-tête vers le haut et celui-ci sera en bas. Changeons donc ce cadre en 22 à propos du résumé OK. Ici, je vais régler la taille intermédiaire à 20 et ce texte sera un paragraphe. Maintenant, cliquons ici, cliquons sur notre fichier texte de contenu Web et je copie simplement ce paragraphe comme ceci, puis mettons ce paragraphe et je changerai ce contenu câlin pour remplir et non remplir le conteneur de contenu, puis il sera ajouté comme ceci. Voyons voir dans un vrai design, cela ressemblera à ça, et pendant tout ce temps, j'oublie de changer la couleur de remplissage. Changeons donc le remplissage. Cliquez ici et cliquez sur ce noir car il s'agit pas d'une couleur noire foncée. C'est un peu léger. Remplaçons la couleur de remplissage cette couleur foncée sélectionnée dans notre palette de couleurs. OK. Et maintenant, à partir de là, nous devons le mettre au milieu pour pouvoir sceller résumé et le changer de position pour l' aligner au centre gauche comme ceci. Il faut maintenant ajouter deux boutons. De plus, il semble que cette image soit trop grande, diminuons donc sa hauteur. Commande Iface sous Windows, elle devrait être contrôlée Ensuite, je vais simplement changer comme 500 comme ça, puis je double-clique sur l'image et définissons l'image comme ça. OK. Ensuite, je clique ici et je mets ça ici. OK, maintenant c'est beaucoup mieux parce que nous n'avons pas beaucoup de contenu à ajouter ici, alors maintenant ça va ressembler à ça. Et maintenant, venons-y et ajoutons nos deux boutons. Pour ajouter deux boutons, nous pouvons utiliser les boutons que nous avons créés en tant que composant. Alors faisons ceci, pour faire cela. Ici, je vais passer à Assets and asserts, cliquez ici. Ensuite, nous avons ce BTN, cliquez dessus, et la propriété sera définie par défaut car le bouton d'en-tête est plus grand que le bouton par défaut Ajoutons le bouton Devolve et cliquons sur Insérer Instant. Passons ensuite au fichier, et maintenant nous devons ajouter ce bouton à propos du résumé. Non, à propos du texte du résumé. Ajoutons-le donc comme ça. OK. Changeons maintenant le libellé du bouton. Cliquez ici pour en savoir plus sur le libellé du bouton. Ajoutons-le comme ça. OK, maintenant ça va ressembler à ça, alors nous aurons aussi un bouton ici. Créons ce bouton. Dans ce cas, est-ce celui-ci. Pour ce faire, je vais donc le créer en tant que variante de ce bouton principal. Pour ce faire, je vais passer à notre composante principale ici. Vous vous souvenez des dernières leçons, nous avons créé ce bouton. Créons donc une variante. Pour créer une nouvelle variante, je vais cliquer sur le composant BTN et sur cette icône plus pour ajouter une variante OK. Nous devons maintenant créer ce type de bouton. Il est facile de le créer, alors allons-y. Donc ici, d'abord, je vais supprimer la couleur de remplissage, puis je clique sur cette étiquette et je change la couleur de remplissage en bleu. Ensuite, je vais sélectionner la variante et changer le nom de cette variante en BTN secondaire, comme ceci Je pense que les mots sont corrects. Voyons voir. Maintenant, les mots sont faux. Encore une fois, changeons le mot comme celui-ci, secondaire tn, présent maintenant je clique sur la variante et ici je vais changer à gauche et à droite 20 et en gardant le haut et le bas comme 20. Ensuite, il ne me reste plus qu'à ajouter l'icône. Ajoutez l'icône, je clique ici et je vais sur Fonosm et à partir de là, je vais taper comme OK, ces flèches ne sont pas bien vendues. Ajoutons donc ce type de flèche, cliquons dessus et découvrons où adapter OK. Il s'adapte ici, j'appuie simplement sur la commande X pour le mettre en carte, puis je clique ici et je colle la commande V pour le coller comme ça. OK, maintenant, dans cette variante et entre les deux, il aura six, changeons cette couleur en bleu. OK, diminuons un peu la taille comme ça. OK. C'est trop petit. Appuyons. Continuons comme ça. Et maintenant, si nous le voulons, nous pouvons modifier un peu plus cette étiquette car la largeur de l'icône est plus grande Je vais donc modifier ce style ou le détacher, puis le mettre en gras Bold ira bien. C'est bon. Nous avons maintenant un laboratoire comme celui-ci. Ensuite, je viens ici et maintenant je dois aller à *** à Asats Je clique sur BTN et à partir de là, je sélectionne le BTN secondaire et je clique sur Insérer Ensuite, je le mettrai dans ce cadre qui a une mise en page automatique, le nom du cadre concerne le texte récapitulatif. Voici notre bouton de mise. Je vais juste le glisser-déposer comme ici. Je ne suis pas venu Essayons de le faire à nouveau. J'ai ajouté et maintenant je vais changer la position du bouton comme ceci. Maintenant, je vais voir ces deux boutons et appuyer sur Shift A pour créer un nouveau cadre Ici, je vais le définir comme disposition horizontale. OK, la taille intermédiaire sera de 220, et maintenant je vais remplacer ce cadre par un ensemble BTN. Je viens de renommer ce cadre en TNS, et maintenant je dois changer ce texte Le texte sera envoyé à notre document. Le texte est respecté. Les fournisseurs le copient, viennent ici et le collent comme ça. OK. Voyons maintenant cela dans le design. Cela ressemblera à. C'est trop gros, alors changeons-le de taille. Je passe simplement à la variante et réduisons le poids, sélectionnons-la et changeons-la à moitié. Moyen. Voyons voir, voyons voir, Medium fonctionnera bien. Ensuite, je vais agrandir un peu plus cette icône. C'est trop gros. Gardons-le. OK. Peut-être faisons-nous en sorte que les deux ne soient pas moyens à semi-finis. Bien mieux. C'est bon. Maintenant, nous venons de créer le résumé A. 55. Section des services de design partie 1: Bonjour à tous. Nous devons maintenant créer la section des services. Faisons-le. Tout d'abord, je vais aller ici et entrer gB, disons maintenant qu'il est temps de créer des sections de services. Donnez-moi les services les plus importants qui fournissent une clinique familiale et assurez-vous qu'il y plus de huit services dans ces domaines. J'ai besoin que vous suiviez cette petite description du nom pmtvis, la description du prêt, et que vous me donniez le titre des gros titres de ServiceOnPress Enter OK, ça génère Mmm. Maintenant, je dois dire que la petite description est trop courte. Ajoutons que la petite description est trop courte. Donnez-moi une petite description de 150 caractères maximum. Essayons ça. C'est mieux. Voici les détails, ce sera la description du prêt, et je vais mettre tous ces détails le dossier parce que nous pouvons utiliser cette petite description. Sur la page d'accueil et sur une page, nous pouvons utiliser ce format. Donc, de cette façon, ce sera parfait. Passons donc à notre document et je vais recueillir toutes les informations. Et ici, nous devons définir le même contenu de la page d' accueil, comme celui-ci. Ensuite, j'ajouterai une nouvelle section. Ce sera la section des services. OK, pour servir une section, ajoutons ces détails comme ceci, je vais copier tous ces détails comme ceci. Ensuite, je vais mettre puis créer une autre section appelée contenu de page et ajouter le contenu généré auparavant, c' est le contenu, et je vais simplement les copier pour une utilisation ultérieure. OK. Maintenant, nous avons un titre. Cela nous a fait la une des journaux. Voyons voir, c'est bien de le dire Pouvez-vous me donner trois versions, trois choix de choix pour le titre du titre Passons à celui-ci. Faisons de celui-ci notre titre et je le mettrai ici OK. En fait, je vais le mettre dans Google Doc. Commençons maintenant à concevoir. abord, je vais passer au fichier Figma comme nous le faisions avant de créer un cadre, et je vais renommer ce cadre en tant que notre s. Ensuite, je vais le remplacer par un conteneur de remplissage, et ici, disons que c'est 600 OK. Maintenant, nous pouvons créer ce type de design. Pour ce faire, je vais d'abord cliquer sur le texte et ce texte sera le titre Je vais en faire un titre, puis je vais dupliquer le texte pour quelques-uns . Ne le dupliquons que deux fois En fait, j'ai oublié d'ajouter mise en page automatique à ce cadre de services, alors allons-y. J'appuie sur Shift A puis nous devons changer la hauteur à 600. Nous sommes dans la section des services et à partir de là, je vais définir ce CO parce que nous n'avons pas besoin de rembourrage horizontal ou vertical. Ajoutons-les en C, puis je sélectionnerai ces deux éléments et j' appuierai sur Shift A pour créer une nouvelle mise en page automatique, et je vais en faire une mise en page verticale, et ici je vais changer cela en sng V comme celui-ci. OK. Ensuite, je vais juste changer cela prend de la typographie pour le changer Je vais cliquer ici et en faire un sous-ding, puis je clique ici pour en faire un paragraphe. OK. Ensuite, je vais changer la couleur du champ. Cliquez ici et changez la couleur de ce champ en noir et changez la couleur de ce champ OK. Maintenant, nous allons placer l'article entre les tailles, 20, d'accord, d'accord. Il semble que c'est trop grand. Il semble que l'article entre les tailles soit trop grand, mais passons au contenu réel. Voici notre titre ici, puis nous aurons la description comme celle-ci. D'accord, alors je vais définir ce texte avec deux conteneurs comme celui-ci. Pour l'instant, restons comme ça et j'oublierai une chose. Peux-tu me dire de quoi il s'agit ? C'est le titre, donc j'ai oublié d'ajouter le titre Ajoutons un titre. Tout d'abord, isolez page automatique de notre service et faisons-en une mise en page verticale Appuyez ensuite sur T et ajoutons du texte comme celui-ci. Ensuite, je passerai à notre document ou à notre chapeau GPT. Dans notre document, nous pouvons obtenir les gros titres, le copier et avouons-le ici. OK. Passons ensuite à la gravité de la faute de frappe en en-tête et la couleur de remplissage sera cette couleur noire OK. Maintenant, je vais sélectionner mise en page automatique de ce service et définir l'alignement en haut au centre comme alignement. Alors ici, je vais faire de cet espace 20, c'est vrai. Et ici, essayons de l'ajouter en deux, alors maintenant je veux l' ajouter au milieu Je vais donc définir cet alignement de typographie au centre comme ceci Maintenant que nous avons d'abord cette partie, ajustons-la comme bon nous semble. Je sélectionne le service unique atlayou et ajoutons de l'effet. Nous avons déjà un effet, donc je vais simplement le sélectionner, puis ajouter de la largeur à ce service unique. Pour ce faire, je vais l'augmenter comme ceci. En fait, je vais mettre quelque chose comme ça, mais ce n'est pas permanent. Mais cependant, je sélectionne à nouveau les services individuels, puis ajoutons les paddins gauche et droit 20 comme ceci Maintenant, si nous vérifions le design, nous ne voyons pas l'effet, alors ajoutons de la couleur au champ. Lorsque j'ajoute une couleur de champ comme le blanc, nous pouvons voir clairement l'effet. Alors je vais changer cette radio d'angle 20. OK, jusqu'ici tout va bien. Maintenant, je vais ajouter une icône comme celle-ci. Faisons-le. Pour ce faire, je vais simplement aller ici et trouver des icônes sur les soins pédiatriques. Ouvrons Fantosom. Cliquez ici, cliquez sur fontosom Si vous ne connaissez pas le nom de l'icône Pontosom, vous pouvez simplement effectuer une recherche sur Google, comme autosom pédiatrique. Maintenant, nous pouvons voir qu'il a une icône pour enfants, donc je vais copier la partie pour enfants Alors ajoutons-le. En fait, ça ne se voit pas, mais nous avons un enfant. Voyons ce que nous pouvons faire. Voyons l'icône de l'enfance. Non, nous n'avons qu'un enfant. Allons chercher cet enfant. Et vous pouvez ajouter ce type d'icône. Mise en page Figma, mais dans Elemento, nous pouvons avoir une meilleure icône et je vais vous montrer comment obtenir une meilleure Voici notre icône. Je sélectionne simplement le vecteur et je vais appuyer deux fois sur ce service unique placer l'icône comme celle-ci et supprimer les cadres inutiles. Et voilà, agrandissons ça un peu comme ça. Avant cela, je vais répertorier ces deux sections et appuyer sur Shift A. Ensuite, elles seront simplement ajoutées à une nouvelle mise en page automatique. Renommons cette mise en page automatique en sexe. Nous avons ici la mise en page automatique vectorielle et service unique, puis la mise en page automatique à service unique des îlots et cliquez sur la mise en page horizontale comme celle-ci C'est bon. Maintenant, je vais le mettre entre les tailles deux et trois, comme avant. Alors ici, je vais cliquer dessus et changeons cette couleur en bleu. Vous souvenez-vous de notre règle 603010 ? Donc, pour Segan, voyons voir, nous avons effectivement appliqué la règle 603010 Dans ce cas, nous avons le blanc comme 50 et le noir comme 30 et ce dix bleu. Mais je vous ai déjà dit que la règle des 60, 30, dix n'est qu'une règle. Nous pouvons donc le casser et chaque fois que nous créons une section, nous devrons le casser. Nous en avons 60 en noir, 30 en blanc et dix en bleu. Revenons au travail et pour le moment, cliquons sur le bouton contenant les propriétés et faisons-en six. Ensuite, j'appuierai sur Shift A pour ajouter une mise en page automatique à cette icône, puis je changerai son icône de nom. Ensuite, j'ajouterai 20, 20 à gauche et à droite. En fait, nous avons un problème avec la taille de l'icône. Revenons donc en arrière et je vais ajouter 60 as, 60 comme largeur fixe, et essayons ici. J'ajouterai 20 par 20 comme ça. La raison en est que nous avons opté pour la couche de service unique. Donc, pour y remédier, je vais créer une nouvelle mise en page automatique ou j'ajouterai la mise en page automatique à ce service unique, puis je modifierai les éléments de service. Ensuite, je vais le remplacer par pour remplir le conteneur. Maintenant, nous pouvons obtenir la taille exacte, aujourd'hui, un, deux, trois, quatre, cinq, définir la hauteur comme ceci et ici je vais ajouter cette hauteur comme conteneur de remplissage, et créons ce centre d' icônes comme celui-ci, et nous le définissons simplement avec un 120, je pense que ce sera mieux. OK. Et ici, je vais réduire les angles, faire 20, puis j' ajouterai un trait comme celui-ci. Ensuite, changeons la couleur du trait en bleu, et augmentons ses ils pour que nous puissions réellement réaliser ce type de design. Alors faisons-le. Tout d'abord, je dois trouver que la taille intermédiaire est 20. Ajoutons le même style de design ici. Pour ce faire, je vais ajouter de la couleur de remplissage et de la couleur bleue. Cliquez ensuite sur l'icône et la couleur de l'icône sera blanche, puis nous devrons ajouter Etroke pour que la couleur du trait soit bleu clair Découvrons la couleur bleu clair à partir d'ici comme ceci. OK. OK. Voyons maintenant, déterminons la taille du trait. Il fait sept ici et il fait la taille de sept. OK. Maintenant, cela ressemblera à ceci, mais nous pouvons ajouter plus de hauteur moins 22. Il est ajouté dix, dix c'est mieux. Maintenant, nous créons simplement une seule section de services et elle ressemblera à ceci sur le design. Et là, nous avons un problème. Nous devons régler ce problème. Dans la prochaine leçon, nous allons les corriger. 56. Section des services de design partie 2: Bonjour, tout le monde. J'ai donc une meilleure idée pour cette icône. Faisons-le. Tout d'abord, je vais sélectionner l'icône et ici, faisons en sorte que ce motif horizontal soit 15 et que le motif vertical soit 15. Ensuite, je vais supprimer cette couleur de remplissage. Ensuite, je vais copier cette couleur Etroke et l'ajouter à la couleur de remplissage Ensuite, je supprimerai le trait vers. OK, maintenant je vais sélectionner l'icône vectorielle, et changer l'icône vectorielle en bleu. Gardons l'icône vectorielle bleue. Passons l' icône vectorielle à la couleur bleue. Changez-le comme ça. OK. Voyons ce design. Cela ressemblera à ceci et cet effet n'est pas visible sur le côté gauche, alors corrigeons-le. Pour y remédier, je vais dans notre cadre d'accueil et je sélectionnerai ici la section service. Ensuite, je clique sur ce IgnooToayout. Après cela, j' augmenterai de 20 fixels ici. Actuellement, la largeur est de 1 160, donc je vais la porter à 1180 ou 70 En fait, nous devons en faire 1 200 parce que nous devons en ajouter 20 supplémentaires des deux côtés. Maintenant, je clique simplement sur notre cadre de service et j'appuie sur tout Maintenant, je peux voir la taille qu' il a par rapport au bord du cadre d'accueil. Réduisons-le à 1020 comme ceci et de ce côté, ce sera 1020 Ensuite, pendant cette heure de service, nous pouvons ajouter un rembourrage gauche et droit ou un rembourrage horizontal Et maintenant, si nous vérifions le design, il s'alignera parfaitement et ne sera pas affecté par l'ombre ou le FA. Bon, pour le moment, je vais faire 60 parce que c'est trop rapproché, donc maintenant c'est mieux et maintenant nous avons une autre question. Autrement dit, si nous ajoutons une nouvelle section, ajoutons une nouvelle section comme celle-ci, elle s'ajoutera à l'intérieur de cette section. Pour y remédier, je vais simplement créer un cadre vide, puis je définirai la largeur en tant que conteneur rempli et la hauteur sera de 600. Ensuite, je renommerai ce cadre en nos services BG comme ceci Ensuite, si nous créons une nouvelle section, elle sera située en dessous de ce cadre. Il s'agit donc maintenant de notre premier service ou service unique, et il s'agit d'un objet répété, ce qui signifie que nous pouvons le convertir en composant et le réutiliser. Si nous cochons ici, nous avons répété des éléments comme celui-ci, ce qui signifie que nous pouvons créer le composant correspondant et l'utiliser sur la page. Faisons-le. Pour ce faire, je vais cliquer sur ce service unique puis sur ce composant de création. Maintenant, je vais simplement le découper à partir d' ici et passer à notre feuille d'autocollants, puis le mettre à l'intérieur de la feuille d' autocollants comme ceci. Ensuite, je vais récupérer ce texte et renommerons ce texte en tant qu'élément OK. Et maintenant, pour cette section, je clique simplement sur les éléments de service. Alors maintenant, nous devons ajouter cet élément à cette section. Pour ce faire, je vais aller à Assens et cliquer ici, et nous avons un service unique Il suffit de cliquer dessus et d'appuyer sur Insérer instantanément comme celui-ci. Passons maintenant au fichier et ici, mettons-le dans ces éléments de service. Nous pouvons le faire comme ça. OK. Maintenant, je peux sélectionner cette section d'éléments de services, puis accéder aux assertions, puis cliquer ici, cliquer dessus et cliquer sur Insérer une instance pour l'insérer comme ceci Alors je le ferai encore deux fois comme ça. OK. Maintenant je vais à Pis in Pis, voici les sections Je les vois tous et je les fais glisser comme ça. OK. Et dans les éléments de service, je vais changer la disposition en disposition horizontale. En fait, je vais supprimer deux de ces éléments pour le moment, puis je sélectionne la mise en page automatique des éléments de service et je clique sur cette disposition horizontale, et cela ressemblera Ceci, il semble que c'est trop proche, fixons-le entre la taille 20 et maintenant il convient parfaitement. OK. Maintenant, ce que je peux faire, c'est dupliquer ce service comme ceci. OK, encore une fois, je vais voir ces deux mises en page d'éléments de service et appuyer sur Shift A pour créer un groupe différent Ici, je vais le renommer en ensemble d'éléments de service et ici je vais changer la taille intermédiaire à 20 comme ceci Maintenant, ça va ressembler à ça. Nous devons maintenant modifier le contenu. Changeons-les. J'ouvre notre document et je vais rapidement les modifier ainsi. Je vais le dire comme ça et changeons les choses rapidement. OK. Maintenant, nous venons de créer quatre de nos catégories, et mon plan est que lorsque nous survolerons cette catégorie, l'image du logo sera mise en évidence En fait, nous pouvons améliorer l'image de ce logo. Par exemple, si nous supprimons la couleur de remplissage et ajoutons le trait, changeons la couleur du trait en ici et en bleu et augmentons la couleur d'un peu pour neuf. Voyons voir si ça n' a pas l'air bien. Mais que se passerait-il si on en mettait deux ? Maintenant, c'est beaucoup plus beau, et nous allons ajouter une icône en forme de ligne à cette icône. De cette façon, ce sera bien meilleur que ce design pour le moment, restons-le comme ça. Et oui, je sélectionne simplement le design du composant et vous pouvez faire de même. OK. Si nous le voulons, nous pouvons ajouter une couleur de champ avec du bleu clair, comme du bleu vraiment clair comme celui-ci et pas si visible, mais gardons-le comme ça. Ensuite, nous devons les changer. 57. Section des services de design partie 3: Bonjour, tout le monde. Nous avons un problème ici. Donc, si j'essaie de changer cette icône, essayons de le faire. Je passe aux actions, aux plugins et au widget, puis à la police tsm. Alors changeons cette icône de santé féminine, donc je vais chercher comme une femme. OK, cliquez dessus. Maintenant, nous avons l'icône. Voici l'icône. Je vais le couper et retirer ce cadre, puis cliquer ici et essayer de le coller. Lorsque j'essaie de le coller, A, il est toujours passé en dehors de ce composant. Donc, si je veux l'ajouter dans le composant, je peux le faire. avons une solution rapide, Nous avons une solution rapide, mais une fois cette solution trouvée, cette instance ne sera plus une instance de notre composant principal, ce qui signifie que si nous en modifions le design, cela n'affectera pas notre catégorie ici. Essayons donc de le faire. Je clique sur l' instance et ici, je clique sur ces autres actions, et ici je clique sur détacher l'instance Lorsque je clique sur Détacher instantanément, il ne fonctionnera plus en tant que composant Je suis juste un cadre que nous ajoutons à la mise en page. Alors maintenant, je peux ajouter une icône à l'intérieur ici. Donc pour ce faire, je peux simplement couper l'icône d'ici, puis cliquer sur ici, coller comme ça, et la voici. Essayons donc d'ajouter cette icône à l'intérieur comme ceci. D'accord. Maintenant, nous allons vérifier la taille de cette icône. Il est 60 ans. Alors maintenant, je vais changer cette icône avec ceci. Cliquons sur cette proposition de contrainte. Et maintenant, changeons le côté à 60. 60, c'est trop. Disons-le comme ça. Ensuite, je vais supprimer cette icône comme ceci. D'accord. Ensuite, je vais cliquer sur cette icône et changer la couleur du champ en bleu. La taille de cette icône est maintenant de 120. Voyons la taille réelle de l'icône. Sa largeur 120 et sa hauteur sont de 110, voyons voir la hauteur, la hauteur devrait être de 110, comme ça. D'accord. Ensuite, je peux l'augmenter comme je le souhaite. D'accord. Faisons de même pour celui-ci. Essayons de trouver l'icône comme Fregan. Nous n'avons pas ce type d'icône, alors prenons ici. Ajoutons cette icône d'hôpital à Et lorsque nous concevons le site Web en utilisant Word comme élément, nous ajouterons une meilleure icône. Donc, ici, cliquons sur l'instance de ce composant, cliquez ici et cliquez sur l'instance détachée, puis cliquez ici et cartez-la l'instance de ce composant, cliquez ici et cliquez sur l'instance détachée, , puis sélectionnez cette section et collez-la ici. vais supprimer cette icône, puis je mettrai cet arrière-plan à une hauteur d'arrière-plan de 1 110 comme ceci, puis j'augmenterai cette taille de 60 D'accord. Ensuite, je vais changer la couleur du champ en bleu. OK, maintenant nous avons ce magazine familial. Découvrons l'icône de la famille dans la recherche de fontosm, désolé. Cherchons comme famille, famille, voyons la famille. Nous n'avons pas d'icône de fontosum familial. Trouvons une icône différente ou trouvons quelque chose qui lui est lié sur cette icône de protection. Je clique sur l'icône, coupe et je supprime ce cadre. Et ici, je vais d'abord sélectionner l'élément de service cliquer sur détacher l'instance et cliquer ici, suivre le rythme de cette icône, supprimer celle-ci, puis nous devons définir la hauteur à 1 100 Désolée, 110. Augmentons ensuite la taille de cette icône à six. D'accord. Alors changeons la couleur du champ OK. Nous avons maintenant quatre catégories, quatre services, mais nous en avons huit Ajoutons donc ce type de bouton coulissant, ce qui signifie que les catégories suivantes passeront automatiquement aux catégories suivantes dans les 5 secondes. Allons-y, ou lorsque quelqu'un clique sur ce point, il passe à la catégorie suivante. Donc, cliquons ici et cliquons sur Ellips et non ici, puis je vais accéder à notre service, puis j'ajouterai Ellipse à celui-ci. Alors maintenant ça devrait être le cas, ajoutons-le comme ici. Il devrait se trouver dans cette section de services, mais en dehors de cet ensemble d'éléments de services, je le mettrai ici. Et maintenant, diminuons la taille à 20, et changeons de couleur comme le bleu. Il semble que nous n'ayons pas d'espace, alors augmentons l'espace à environ 700 de cette section de service. Ajoutons-le 700 et nous en avons 60, mais nous pouvons en ajouter moins de 60. Je vais donc sélectionner cet ensemble d'éléments de service et Ellips, Je vais donc sélectionner cet ensemble d'éléments de service et puis appuyer sur Shift A pour ajouter une mise en page automatique, puis je peux faire comme si 2020 n' était pas une bonne Faisons en sorte que ce soit 30. D'accord. Maintenant, je vais créer trois autres ellipses, les sélectionner toutes appuyer sur Shift A pour les rendre horizontales et l'espace sera de 20 Ensuite, détachez cette couleur et je la changerai en couleur claire À cette couleur. OK, cliquez sur celui-ci, détachez-le de cette couleur claire comme celle-ci D'accord. Voyons maintenant le design pour qu'il ressemble à ceci. Nous ajoutons donc ceci à nos services BG, hauteur est de 600, mais faisons-en 700 comme ça. D'accord. Maintenant que nous créons ceci à propos d'un résumé et de nos services, nous devons créer notre section fournisseurs. Créons-le dans la leçon suivante. 58. Générer du contenu pour nos fournisseurs: Bonjour, tout le monde. Nous devons maintenant créer notre section fournisseur. Dans notre fournisseur, nous aurons l'image du fournisseur, son nom, son rôle et une petite description. Créons-le. Il faut d'abord générer le contenu. Je vais chez JGBT et je dirai ici il est maintenant temps de générer notre section fournisseurs Donnez-moi cinq fournisseurs. Ajoutons comme des médecins avec un nom, un rôle et une description souple. Créons également une description du prêt. Donc, abordons les choses comme ça parce que nous avons besoin d'une description du prêt pour les fournisseurs. Faisons donc une présentation et voyons ce que nous obtenons. OK. Voici les détails. Je vais simplement les copier tous, passer à notre fichier de contenu et passer à ce contenu comme celui-ci. Vous pourrez ouvrir ce fichier de contenu sur le bloc-notes Wordpad Ajoutons donc ces détails. De plus, vous verrez des images de chaque médecin sur notre fichier image. 59. Section nos fournisseurs: Bonjour, tout le monde. Concevons cette section consacrée à nos fournisseurs. Bon, je vais maintenant passer au design, et voici le contenu, mais nous n'avons pas de titre. Nous allons donc générer le titre deux. Pouvez-vous me donner le titre de notre section des fournisseurs ? Donne-moi trois choix. Je pense que les choix ne sont pas bons. Quoi qu'il en soit, j'aime bien celui-ci, donc je vais le copier et en fait, sélectionnons celui-ci. Je vais le copier et avouons-le ici. Alors je vais dire le titre comme ça. Passons maintenant au Figmfle et je vais créer un cadre et définir les tailles de cadre avec le conteneur de remplissage Bonjour, 600. Nous devons augmenter le cadre d'accueil, cliquer sur le cadre d'accueil et appuyer sur la commande dans Windows, appuyer sur la touche Ctrl , puis augmenter la taille. Ensuite, pour cette section, j'appuierai sur Shift A, et ici je changerai le nom en présentateur de nos fournisseurs. OK. Maintenant, ajoutons une mise en page en tant que disposition verticale et commençons par le haut au centre. OK. Maintenant, ici, nous n'en avons pas besoin entre les tailles et ici je vais ajouter la taille intermédiaire comme 60. Si je me souviens bien, nous ajoutons les 60. Créons maintenant le texte. J'appuie sur T et créons ce type de texte. Passons ici, copions ces réservoirs et arrivons à ce texte comme celui-ci, puis je changerai la typographie en en-tête , je cliquerai sur le texte et passons à cliquerai sur le texte un conteneur de remplissage OK, alors l'alignement sera centré. OK. Maintenant, ça a l'air bien. Maintenant que la hauteur de la section du fournisseur a été modifiée, changeons à nouveau la hauteur à 600 comme ceci. OK. Il ne nous reste plus qu'à créer cette section. Pour créer cette section, je vais simplement créer un rectangle comme celui-ci. Mettons ensuite ce rectangle de ce côté. Ensuite, un, deux, trois, quatre, puis augmentez-le comme ceci , puis disons la hauteur ainsi que cette taille comme celle-ci. OK, alors nous devons ajouter le nom, le rôle et une petite description. Ajoutons-les donc. Donc, d'abord, je clique sur T et je le définis comme nom, puis à nouveau, j'appuie sur le texte et je le mets sous forme de rouleau, et encore une fois, appuie sur T et j'ajoute une petite description comme celle-ci. OK. Maintenant, cliquez sur le nom et changeons-le en subd. Ici aussi, petite description sera un paragraphe et le rôle sera d' ajouter le texte du bouton à lancer OK. Je vais maintenant sélectionner ces trois éléments et les placer sous le rectangle. Ensuite, je sélectionnerai toutes ces informations, j' appuierai sur Shift A et sur un cadre et je changerai ce nom en fournisseur. Alors je vais le faire entre la taille 20 et ça. Maintenant que cette section est petite, agrandissons la section comme ceci et maintenant, en ce qui concerne le fournisseur, je vais mettre roll comme premier nom tant que deuxième et petite description car il semble que la taille intermédiaire en tant que deuxième et petite description car il semble que la taille intermédiaire soit trop longue, alors faisons comme si c'était mieux. Maintenant, nous devons ajouter une image ici. Ajoutons l'image, cliquez ici et cliquez sur Image vidéo. Ici, nous verrons l'image du fournisseur Ajoutons cette image et cliquons ici comme ça. Maintenant, je sélectionne le cadre du fournisseur et ici je vais ajouter de la couleur de remplissage au blanc, puis je vais effectuer un effet et ajouter cet effet comme ceci. Ensuite, je vais changer les coins de cette image. Ce qui précède sera deux et deux, puis le bas sera deux et deux. Voyons voir, en fait, non. Je n'ai pas atteint les bons coins ci-dessus Nous devons donc cliquer sur l'image et réduire les coins de cette image. Il suffit de réduire les coins supérieurs de cette façon. OK. À partir de là, je vais devoir ajouter un peu d' espacement pour ajouter de l'espacement Je vais simplement cliquer ici et ajoutons six D'accord, mais nous n'avons pas besoin de l'appliquer à toute cette section. Il suffit de l'appliquer pour ces trois éléments. Soulignons ces trois points. En fait, il va falloir ajouter le bouton. Ajoutons le bouton pour ajouter le bouton, je vais aller à Assens et voici le BTN, vous verrez ce bouton secondaire et cliquez sur Ensuite, je vais le couper et passer au fichier, et ici, je vais simplement le coller comme ça. OK. Et avec ce bouton, nous devrons apporter quelques modifications pour apporter ces modifications, nous pouvons créer une autre instance ou ajouter des modifications ici. Les moyens les plus simples permettent de créer une variante différente. Créons une variante. Je vais augmenter la taille de la feuille d' autocollants comme ceci et cliquer sur la variante. En fait, nous pouvons cliquer ici puis cliquer sur une variante ou alors supprimons ces rembourrages comme ceci, comme ceci OK. Maintenant, renommons cette variante en lien de carte comme ceci OK. Maintenant, allons-y et cliquons sur le bouton, et changeons-le en lien avec la carte. C'est bon. Je vais maintenant sélectionner ces quatre éléments, appuyer sur Shift A, puis renommer et fournir une description Fournissez une biographie, puis je vais utiliser un récipient de remplissage et ici j' ajouterai une marge horizontale de six comme celle-ci. OK. Maintenant, ce que je dois faire c'est ajouter de l'espace en bas. Pour ce faire, je vais cliquer ici et ici, je vais ajouter des espaces 20 OK. Maintenant, si nous le vérifions, cela ressemblera à ceci sur le design. Maintenant, si nous le voulons, nous pouvons le convertir en composant. Cliquons donc sur l'élément puis sur le composant pour créer un composant. OK. Ensuite, je vais couper ce composant et passer à Style heat et l' ajouter sur l'élément comme ceci. Je dois en venir à le coiffer, à le chauffer et à le coller comme ça. OK. Maintenant, revenons ici, puis je clique sur ASR dans ASRS, nous avons le composant Je clique simplement dessus et je clique sur Isa Instance. OK. Maintenant, ce que nous pouvons faire, c'est utiliser les fichiers et les placer dans notre section des fournisseurs, alors allons-y comme ça. OK. Maintenant, ce que nous pouvons faire, c'est dupliquer cela. Pour le dupliquer, je vais sélectionner le fournisseur et appuyer sur Ctrl C et Ctrl V comme ceci Soulignons ces deux sections et appuyons sur Shift A , puis faisons-en une mise en page horizontale comme celle-ci. Et encore une fois, je vais dupliquer celui-ci comme ceci. OK. Maintenant, je vais changer le nom de ce cadre prods et ici changer la taille intermédiaire en 20 OK. Maintenant, ajoutons les détails à ce rôle, je vais changer ce rôle en bleu. Viens ici et clique ici, puis change la couleur du champ en bleu comme ceci. OK, je vais faire un effet sur les éléments, et ici, ajoutons les détails, puis nous pourrons modifier le reste des informations. Alors je viens juste ici. Voici les premiers détails, copiez-le. Changez son nom. Encore une fois, venez ici et copiez la courte description comme ceci et mettez en phase la courte description comme suit. Ici, je définirai la largeur comme conteneur de remplissage et définirai la gravité typographique pour aligner le laboratoire , puis je renommerai cette étiquette pour en savoir plus Ensuite, renommez-le plus ou moins en view profile et nous devons ajouter le rouleau Ajoutons le. Ajoutons le rouleau comme ceci. Et je vais changer ce téléphone de rôle en paragraphe. Pour le modifier, je vais aller ici et le texte du rôle sera un paragraphe. De cette façon, il ne ressemblera pas au lien. Alors maintenant, si nous passons au design, cela ressemblera à ceci, et continuons et ajoutons les détails. À partir de là, je vais copier le nom et le mettre ici, puis je viens ici, je copie le rouleau. Ajoutez ensuite le rouleau comme ceci, puis nous arrivons à la courte description. Et en fait, dans ce qui est ici, je le change à partir d'ici. Ne le changeons pas comme ça. Modifions-le à partir d'ici. De cette façon, nous pourrons le rendre efficace pour les éléments de la page. Alors faisons-le pour celui-ci. Et celui-ci. C'est l'avantage d'une mise en page automatique comme celle-ci. Pas de mise en page automatique. C'est l' avantage d'avoir des composants. Lorsque je les modifie, cela a un effet sur l'article. Ensuite, je vais ici, changeons-le en profil. En fait, nous pouvons le changer d'ici. Ensuite, on le change, ça change. Ouaip. Et voilà, il faut changer d'image, cliquez ici docteur Michel, trouvons cette photo et le voilà, cliquez comme ça, puis je vais continuer. OK, ajoutons d'autres informations sur le médecin. Voici les détails, et disons-le comme ça. Ajoutons ensuite le rouleau. Ajoutons une courte description comme celle-ci. OK. Maintenant, changeons la photo comme ceci. En fait, il vaut mieux changer cette image de médecin avec ce médecin en fonction de son nom, mais gardons-le comme ça. Ensuite, nous verrons quelques problèmes, alors corrigez-les. Le premier problème est que ces sections ne seront pas mêmes et nous avons cinq médecins ici, ici, nous avons cinq médecins, mais nous n'avons de place que pour trois médecins Nous devrons donc ajouter un curseur ici Nous avons une hauteur différente de ces cases pour le réparer, vérifions la taille que nous voulons ajouter, elle devrait être de 615 Passons à notre composant et fixons-le à une hauteur 615 et nous pourrons facilement le réparer comme ça Maintenant, si nous passons au design, cela ressemblera à ceci, mais nous devons maintenant ajouter cette ombre visible à gauche et à droite. N'oubliez pas que la dernière fois que nous l'avons corrigé, donc pour le réparer, je vais sélectionner cette section, notre section fournisseur, puis je cliquerai sur cet ignotoayo, puis je devrai en ajouter 40 à cette largeur Ajoutons 40. Si j'ajoute 40 à 1 160, ce sera 1 200 Ensuite, j'ajouterai ici Padins 20 comme ça. Ensuite, je vais devoir le mettre au centre. OK. Voyons maintenant qu'il est parfaitement visible. Ici, nous avons un autre problème. Ce profil de vue n'est pas une ligne, donc pour y remédier, découvrons la plus longue petite description. Je pense que c'est celui-ci. Découvrons combien de temps cela fait 96. Faisons en sorte que ce soit 100. Nous venons simplement ici et cliquons ici, puis faisons en sorte que ce sommet soit cent. Maintenant, voyez ce qui se passe. Constituons donc ce texte comme suit. Je sélectionne simplement le texte et ajoute en haut de la typographie Voyons maintenant le design. Maintenant, il sera parfaitement aligné. Jusqu'à présent, nous n' avons aucune question, et maintenant nous devons ajouter trois points comme celui-ci pour ce faire Je vais simplement cliquer ici et je vais changer le nom points coulissants et maintenant cliquons sur Créer un composant. Et coupez-le, allez ici sur l'élément en fait dans les styles sur l'élément, nous l'ajoutons simplement. Et maintenant, revenons ici et passons aux assertions dans les assertions. Cliquons sur notre curseur, cliquez sur Insérer une instance, et mettons-le dans notre formulaire de réception Dans notre service, je le sélectionne dans notre service, puis je le colle comme ceci, et il devrait être dans ce cadre comme celui-ci, il sera parfaitement aligné Dans ce cas, nous n'avons pas besoin de le créer à partir de zéro. Nous pouvons simplement aller dans ASEDS et cliquer sur le point Slider, puis sur Insérer une instance et la couper en appuyant sur Command X ou Control X et venir ici Ensuite, nous devons l'ajouter dans cette section réservée aux fournisseurs. Je vais maintenant devoir sélectionner ces deux sections et appuyer sur Shift A, puis je vais les placer au centre. Voyons l'espacement. Je pense que ça devrait être le cas. C'est en fait 30, donc ajoutons, sélectionnons celui-ci et ajoutons l'élément en bits sous forme de 30. OK. Nous allons maintenant devoir augmenter un peu plus cette section réservée aux fournisseurs, alors augmentons-la. Pas celui-ci, sélectionnez les fournisseurs. Augmentons cette section comme ceci. Et qu'est-ce qui s'est passé ? Mmm, hum. Nous n'avons pas besoin d' augmenter ce cadre 31. Sélectionnons ce cadre 21. Faisons en sorte que ce soit le conteneur du fournisseur. OK. Ensuite, je vais le régler en hauteur comme conteneur à câlins. Et maintenant, il est parfaitement là. Ici, je vais faire de même. En fait, il me suffit de le remplacer par notre conteneur de services. OK. ne me reste plus qu'à modifier cette section réservée aux fournisseurs comme ceci. Voyons combien cela coûte réellement, passons cette taille à 820 ou nous pouvons simplement sélectionner ce conteneur de notre fournisseur et vérifier quelle est la distance entre ces deux sections. Alors je vais simplement réduire sa taille à 20 comme ça et ici nous pouvons faire de même. C'est 54, diminuons-le et diminuons-le encore 20. Parfait. Ensuite, nous devrons modifier la taille du service BG change. Service Selto BG, parfait. Maintenant, nous devons également ajouter nos fournisseurs BG , car si nous ajoutons une ellipse comme celle-ci, elle apparaîtra ici car nous ignorons la mise en page automatique de cette section des fournisseurs Cliquez sur Con frame et créons un cadre. Ce cadre remplira le conteneur, et la hauteur sera de 823 Et la hauteur sera de 823. Que s'est-il passé ? Ici. Ensuite, nous devrons mettre cette section sur les fournisseurs sous sédatif et la présenter comme suit au fournisseur. Où est notre fournisseur ? OK, voici notre fournisseur, c'est pourquoi nous le comparons à notre fournisseur G, puis je le mettrai ici comme ça. OK. Voyons maintenant le design. Le design ressemblera à ceci. OK. Et dans la prochaine leçon, nous allons concevoir cette section d'aperçu. 60. Modifier l'arrangement de section: Ensuite, nous devons créer cette section de révision. Mais si nous consultons notre site Web, nous avons ici des modèles similaires. Ici, nous avons des services, puis nous avons nos fournisseurs et ces deux sections sont identiques et ces deux sections ont un curseur Mais si nous ajoutons cette section de révision, cette section de révision aura également un curseur C'est pourquoi mon plan est de créer une section contact c, après cela, notre section dédiée aux fournisseurs. Après la section contact, nous pouvons ajouter la section d'évaluation , puis nous pouvons ajouter ce pied de page Pour cette section de contact, je vais choisir ce type de design car il permettra de maintenir la cohérence de notre site Web. Ensuite, nous créerons une page séparée pour ce formulaire et nous adapterons le bouton qui alimente ce formulaire. Bien, dans la leçon suivante, commençons à concevoir cette section de contact. 61. Section des coordonnées pour la conception: Bonjour, tout le monde. Créons la section contact. Passons donc à JAD GPT et disons que nous avons besoin d' une section de contact rapide avec un numéro de téléphone, emplacement et un bouton pour demander un rendez-vous Pouvez-vous générer ces informations et les rendre exploitables ? Voyons voir, donne-moi trois choix et le titre de la deuxième section OK, j'aime bien la deuxième option, alors copions le contenu et commençons à concevoir la section. Ici, je vais ajouter ces détails. Il s'agit d'une section de contact rapide. OK, commençons maintenant le design. Pour ce faire, je vais dans notre cadre et je le sélectionne. Appuyons sur commande et augmentons le design comme ceci. OK. Ensuite, dans une section comme celle-ci, nous allons d'abord cliquer sur le cadre, cliquer sur le cadre, cliquer ici. Ensuite, je vais me mettre à remplir le récipient et disons à 600. OK. Maintenant, mon plan est d'ajouter une image sur le côté droit et d'ajouter du texte sur le côté gauche. Alors faisons-le. Pour ce faire, j'appuie sur T et je crée ce type de texte, puis avant de le faire, je dois convertir cette section en mise en page automatique ou ajouter une mise en page automatique à ce cadre. J'appuie donc sur Shift A, puis je vais changer nom de ce cadre WIC contact. Dans ce paramètre de cadre, je définirai le rembourrage gauche et droit ou fondu horizontal et zéro vertical alors fixons-le sur une ligne en haut à gauche et la hauteur sera de 600. Maintenant, je sélectionne le texte clique ici et je le sélectionne comme en-tête. Copions ensuite le titre. Voici donc le titre, je le copie et je le colle ici, puis nous devons ajouter ce contenu Nous pouvons ajouter ce contenu sous forme de boîte à icônes. Faisons-le pour y parvenir. Je vais d'abord devoir créer une boîte à icônes. Appuyons sur le et appuyons sur T pour ajouter du texte comme celui-ci. Pour l'instant, transformons cette section de contenu rapide en disposition verticale. Et notons ça comme ça. Ensuite, je vais changer le texte en sous-ligne. OK. Maintenant, je vais ajouter ces fonctionnalités, puis je vais dupliquer ce texte et transformer ce texte paragraphe. Je devrai également changer la couleur de remplissage en cette couleur noire, et nous devons le faire ici aussi ici. OK. Ensuite, je modifierai ce texte pour nous appeler pour obtenir une assistance immédiate ou des informations de ce type, puis je dupliquerai cette section et je la mettrai ici et maintenant j' ajouterai le numéro de téléphone. Je pense que c'est le numéro de téléphone ajouté en haut. Voyons voir, c'est pareil. Il me suffit d'appuyer sur Commander un téléphone Mac, de contrôler une police Windows et d' ajouter le texte à ce champ de recherche pour trouver un contenu similaire. Maintenant, je vais l'ajouter ici, puis il suffit de cliquer dessus car nous n'en avons plus besoin. Ensuite, je vais changer cette tête en allons-en en-tête », mais nous changerons la taille de la police plus tard. Maintenant, je vais ajouter l'icône pour ajouter l'icône, je vais aller ici et aller sur le widget Brancher San et cliquer sur l'icône CFontSM, et à partir de là, passons à l'icône comme en appuyant ici et maintenant nous avons cette Je viens de le couper, de retirer ce cadre ALT et de venir ici. Ensuite, il suffit de le coller. Je le colle simplement dans le contenu de ce choix, et j'appuie sur Shift A pour ajouter Otolao Voyons ensuite la taille de ces icônes. C'est donc 12110. Faisons la même taille. Choisissez ici et fixons un 120 et une hauteur de 110. OK. Passons ensuite au milieu. OK, maintenant, augmentez la taille de cette icône pour ce faire, je sélectionne l'icône, clique sur les propositions de contraintes, puis je vais la changer en 60 comme ceci. OK. Maintenant, je dois ajouter une bordure à cette icône. Alors faisons-le. Pour ce faire, en fait, je peux me rendre ici et vérifier la frontière. Voici la bordure, elle est donc en taille 2. Ajoutons donc ici, trait bleu réélu, taille deux, et ici le coin est deux OK. Je vais maintenant regrouper ces trois sections. Sélectionnez-les et appuyez sur Shift A, puis je vais régler cela avec le conteneur de remplissage D. En fait, je dois sélectionner celui-ci et le configurer avec un conteneur de remplissage et ça a l'air bien. Ensuite, je vais devoir changer la couleur de remplissage. Modifions-le en bleu comme ça. Ensuite, je sélectionnerai ces deux éléments et appuierai sur Shift A pour ajouter autoa, puis je changerai mise en page automatique en disposition horizontale Ensuite, je vais y entrer et sélectionner le vecteur, placer le cticon au-dessus et sélectionner le cadre, puis régler l' alignement du cadre vers la gauche comme ceci le vecteur, placer le cticon au-dessus et sélectionner le cadre, puis régler l' alignement du cadre vers la gauche comme Maintenant, nous devons diminuer cette taille de police parce qu'elle semble trop grande, réduisons-la pour la réduire en typographie, je vais détacher le style, puis voilà, diminuons la En fait, conservons cette taille d'origine. OK. Nous devons également ajouter une section de localisation et un bouton permettant d'appeler pour demander un rendez-vous. Avant cela, je vais ajouter une image ici. Alors faisons-le d'abord. Et avant cela, nous pouvons ajouter un nom à cette section. Le nom de cette section sera donc accessible, et ici nous aurons une icône, et ici nous aurons une icône fiscale. OK, maintenant je vais ajouter l' image pour ajouter l'image, je vais cliquer sur Contract Wrangle et sélectionner comme Découvrons ensuite que cette taille d'image est de 52500. Faisons donc 52050520 avec 500 s i, coin sera alors OK. Ajoutons maintenant l'image. Donc, pour ajouter l'image, sélectionnez le rec wrangle, cliquez ici et cliquez sur Image vidéo Pour ce faire, je vais sélectionner cette image en cinq cliquant ici et nous pouvons l' ajouter comme ça. Ensuite, je dois placer cette section le côté gauche et cette image le côté droit. Pour ce faire, je peux facilement sélectionner ces deux sections et appuyer sur Shift A, puis je peux simplement sélectionner toute cette section de contact rapide et changer sa mise en page en disposition horizontale. OK. Maintenant, dans cette section, je vais devoir sélectionner le texte et créer du texte avec un conteneur de remplissage, et maintenant tout ira bien. Et pour l'espacement, je vais ajouter un article entre les tailles. Non, non, pas ça. Je vais ajouter cet article entre les tailles 20, comme ceci. OK. Et ici, nous changeons la taille à 20 comme ça. Faisons en sorte qu'il y ait 60 entre la taille de ces deux sections. 60. Ok, maintenant c'est beaucoup mieux. Je vais maintenant répertorier cette section de contenu rapide, et si nous le voulons, nous pouvons définir l'alignement au centre gauche comme ceci. Nous pouvons maintenant poursuivre le travail. la deuxième section, je vais dupliquer cette section de portée comme ceci et ici nous pouvons ajouter une taille comprise entre 20. Avant cela, ajoutons du contenu à cette section. Pour ce faire, je vais ouvrir le fichier. À partir de là, nous devons ajouter une section de localisation, copier l'emplacement de la clinique et le mettre ici. Copiez ensuite l'emplacement réel. Ensuite, j'ajouterai cet emplacement comme ceci. Et pour cette section, nous n'avons pas besoin de ces chiffres. Je vais juste le retirer. Et ici, copions ce texte, et mettons-le en dessous de l'emplacement. Dupliquez le texte de localisation et sélectionnez-le au rythme du texte, copiez-le comme ceci. Essayons ensuite d'ajouter un lien ici. Lien, je dois aller sur Assets in Assets, cliquer ici et cliquer sur Tn et le lien sera le lien de la carte. Le lien vers la carte ira bien. Cliquez sur Insérer une instance et voici notre instance. Je vais simplement la couper et cliquer ici, puis la coller, couper le texte et coller ce texte. Nous pouvons regarder le texte à l'intérieur, mais il est trop long. Nous devons ajouter une version courte de ce lien pour ce faire, je vais aller sur hat GPT OK, nous avons ici les trois options. Donc, dans trois options, je vais copier cette sialisation Find us et l' ajouter ici comme ça OK. Nous devons maintenant changer l'icône ici pour changer l'icône. Je vais cliquer ici et cliquer sur les plugins et le widget et ici, cliquer sur l'icône Fon tsm et ici rechercher l'icône de la carte de localisation, cliquer ici, ajouter l'icône le canevas et couper l'icône Je n'ai pas besoin de ce cadre, alors entrez dans cette section d'icônes et collez l'icône, supprimez cette icône. Voyons ensuite la taille de l' icône, elle est de 60. Faisons en sorte que la taille de cette icône soit de six P. Puis changeons de couleur en bleu. Jusqu'ici tout va bien et ne nous reste plus qu'à ajouter le bouton. Voyons le texte du bouton, le texte du bouton sera une demande de rendez-vous, et pour ajouter ce texte de bouton, je n'utiliserai pas ce type de design. Je vais simplement créer du texte et ajoutons ce type de texte pour le moment, et copions la demande de rendez-vous. Ensuite, je devrai l'ajouter dans ces sections comme, OK, maintenant pour ce cadre 20, je vais le renommer au fur et à mesure des détails du contenu Ensuite, je renommerai ce lieu unique. OK. Ensuite, je vais dupliquer les réservoirs comme ceci et ils n'apparaîtront pas ici car la taille de cette section est de 600. Je vais juste le changer en 700. OK. Maintenant, en fait, nous pouvons sélectionner ces deux éléments appuyer sur Shift A et changer cette taille entre les deux en 220. Ensuite, je peux ajouter ces prises dans ce cadre. OK. Et renommons le nom de ce cadre en une boîte de contact comme celle-ci. OK. Commençons ensuite à concevoir cette section. Isolez le texte de cette demande de rendez-vous et dupliquez-le, puis venez ici et je copierai cette partie. Nous pouvons le copier d' ici comme ça, puis venir ici, le coller comme ça. OK. Ensuite, je vais accéder aux ASED dans Assets, cliquer sur BTN puis sur Découvrons BTN qui est bon En fait, prenons BTN par défaut et cliquez sur Instance. Ici, j' ajouterai le texte qui sera le texte Schedules , puis je renommerai ce sera le texte Schedules , puis je renommerai Ensuite, je coupe ce bouton et je passe aux fichiers à l'intérieur des fichiers, je vais le surligner et placer le bouton comme ceci. Cela devrait être en dehors de ce carnet de contacts rapides A. Cela devrait être à l'intérieur. Et ce bouton devrait également se trouver à l'intérieur de ceux-ci. Ensuite, je vais sélectionner trois options comme celle-ci et appuyer sur Chief A pour créer un groove. Et maintenant, ajoutons des détails. Pour la typographie, je sélectionnerai le sous-titrage pour le test, je sélectionnerai le paragraphe et le bouton sera celui-ci En fait, si nous le voulons, nous pouvons également ajouter une icône ici. Donc, si nous ajoutons une icône, ce sera parfait. Ajoutons donc une icône. abord, je vais renommer ce cadre 20 pour demander un rendez-vous, et nous allons créer une icône à partir de zéro ou nous pouvons simplement la copier d'ici Copions-le d'ici. J'espère que vous comprenez comment créer une icône. Sinon, laissez-moi simplement les commandes afin que je vous montre comment le faire. Maintenant, la mise en page des demandes de rendez-vous est verticale, mais nous avons besoin qu'elle soit horizontale. Pour ce faire, je sélectionne d'abord ces trois éléments et j'appuie sur Shift A, et ici je vais les modifier en étapes. Ensuite, nous avons l'icône. Je sélectionne donc cette demande de rendez-vous et je la change en mise en page horizontale. Ensuite, nous devons changer la position de l'icône comme ceci. OK, alors sélectionnez-le et cliquez sur ce journal à gauche. OK. Maintenant, ce que nous devons faire, c'est faire de ce texte un contenu de remplissage cliquer ici et également le changer pour remplir un conteneur, et ici nous devons créer ce gros contenu. Non, pas de contenu câlin. Il doit s'agir d'un conteneur de remplissage et cette mise en page de texte doit être d'un conteneur de remplissage comme celui-ci. Ici, nous avons une couche à deux sections, mais si elle n'en a qu'une, ce sera génial. Changeons l'autre option que JGBT nous donne. Essayons celui-ci, copions, venons ici et remplaçons ce texte comme ceci. OK. Maintenant c'est beaucoup mieux. Ici, nous avons toujours un problème. Je sel le texte et modifions-le entre les éléments jusqu'à dix. Maintenant c'est beaucoup mieux. Il ne nous reste plus qu'à changer cette icône. Modifions-le, allez ici, cliquez sur le plugin et le widget et cliquez sur l'icône antosm À partir de là, voyons ce type. allez couper le vecteur à partir d'ici, puis sélectionner cette icône et la coller à l'intérieur, cliquez ici pour le supprimer, puis réglez la hauteur de la boîte à six. En fait, l'icône sera de 60, cliquez sur remplir et cliquez sur la couleur bleue. Maintenant, cela semble trop rapproché, alors faisons en sorte que ce soit un jumeau, pas 20 ou 30. À partir de là, passons à 30 comme ça. À partir de là, nous devrons changer cette taille à dix. Alors changeons cette visite du planificateur que je peux taper sur le lien de la carte et maintenant ce sera parfait Nous devons maintenant ajouter quelques détails à cette image. 62. Section de revue de design: Bonjour, tout le monde. Concevons maintenant cette section d'aperçu. D'accord, passons à notre design. À partir de là, dans un premier temps, je vais créer un cadre, et je vais l'augmenter avec le conteneur de remplissage et la hauteur sera de 600. Ensuite, j'appuie sur Shift A 2 lors de la mise en page automatique. Puis ici je change ce nom pour review. Ensuite, je supprimerai la marge gauche, les dix marges droites, rembourrage horizontal et les douleurs verticales Ensuite, je vais ajouter un texte, prédéfinir un texte comme celui-ci Faisons ensuite ce texte en en-tête comme ceci. Ensuite, je dois à nouveau sélectionner cette section de révision et changer la hauteur à 600. OK. Maintenant, je vais changer cette position pour aligner le haut au centre comme ceci. OK, allons-y et générons. Disons maintenant que je veux générer du contenu pour la section de révision. Donne-moi cinq avis avec le nom du patient. Ensuite, donnez-moi également le titre du présentateur de la section des critiques Ici, j'ai besoin de trois suggestions. Donnez-moi trois suggestions de titre, pas de titre d'héline de toute façon Ce que disent nos patients, copions celui-ci Des familles comme la vôtre nous font confiance. Et ajoutons-le à cette section. Créons une section de révision. Collez ensuite le titre ici. Faisons en sorte que ce soit un titre de ligne. Ensuite, nous devrons ajouter la critique ici. Copiez-les tous et venez ici. Mets-les en page comme ça. OK. Je vais le dire. Bien, passons maintenant au design ici et ajoutons d'abord le titre auquel les familles comme vous font confiance, puis ajoutons-le comme ceci. OK, maintenant je dois créer cette section de révision. OK, allons-y. abord, je crée un texte et ce texte sera un nom, et avant cela, je sélectionnerai cette section de révision et modifions-la en couche horizontale, puis ce titre sera en haut Et ici, nous avons le nom, puis nous en avons la critique. OK, nom et critique. Maintenant, je vais sélectionner le nom, changer sa taille en sub din, cliquer sur revoir et changer la typographie en paragraphe OK. Maintenant, je vais cliquer sur Ellipse et créer l'ellipse comme ça Lorsque je le créerai, j' appuierai sur Shift. La forme sera donc parfaitement alignée comme ceci. OK. Maintenant, je sélectionne toutes ces sections et j'appuie sur Shift A. Encore une fois, je sélectionne uniquement ces deux éléments et appuie sur Shift A pour ajouter une mise en page automatique différente. Ensuite, je sélectionne le cadre principal et je le transforme en disposition horizontale. Ensuite, je vais mettre cet Ellips sur le dessus comme ça. OK. En fait, ce modèle ne fonctionnera pas, donc je vais supprimer ce cadre pour le supprimer, je sélectionne le cadre puis je passe ici, puis je sélectionne le cadre et ici je sélectionne Supprimer la mise en page automatique, puis je vais simplement le mettre à l'intérieur comme ça, puis je retirerai ce cadre et nous devons regrouper cette photo du critique et le nom. Je sélectionne simplement ces deux sections et j'appuie sur Shift A, puis je vais en faire disposition horizontale et définir une ligne au centre gauche. Ensuite, je sélectionne le cadre principal. Ensuite, je vais en faire une mise en page verticale, et ici je vais la configurer pour qu'elle soit alignée en haut à gauche. OK. Nous avons maintenant le design, et à partir de là, je vais sélectionner cette mise en page automatique principale pour l'aligner en haut à gauche et cliquer ici, puis créer ce conteneur de remplissage et le modifier en texte pour aligner le centre. OK. Maintenant, je sélectionne le cadre. Renommons ces arrêts. Ce sera une boîte de prévisualisation, et ce sera Avata Avata comme ça OK. Maintenant, je vais simplement sélectionner la case de révision et augmenter sa taille comme ça, comme ça. Ajoutons maintenant de vrais détails, puis ajoutons du style. Je vais donc simplement dans ce fichier texte récupérons ce nom et ajoutons-le ici. Copions ensuite l' avis comme ceci, copions-le et rythmons le commentaire comme suit. Ensuite, définissez avec le contenu de remplissage comme ceci. OK. Maintenant, définissons également l'image. Il suffit de sélectionner cette ellipse et de cliquer ici, puis de cliquer sur Image vidéo Ensuite, nous aurons ici les réviseurs Avata. Donc, ici, je sélectionne la photo et je la mets comme ça. OK. Ensuite, nous allons sélectionner la case de révision. Dans la zone de révision, je définirai la couleur du champ comme notre couleur blanche, puis nous ajouterons les effets que nous avons déjà enregistrés. OK. Maintenant, je sélectionne les critiques, et ici je vais définir six à gauche et à droite et en haut et en bas à six. Non, pas celui-ci. Ce n'est pas la section de révision, nous devons sélectionner la case de révision, et son motif horizontal sera six et son motif vertical de six comme celui-ci. Encore une fois, nous devons changer les coins à 20 comme ça. En fait, allons-y en haut et en bas , car cela sera plus joli. Maintenant, cette face intérieure sera de 22. Ici, la taille sera de deux. OK. Ensuite, je sélectionne le texte et je change la couleur du champ en cette couleur noire. Je dois le faire pour la section. Et voilà, faisons-le à la fin, mais maintenant nous devons ajouter des ISA Pour ajouter ces cinq étoiles, je vais sélectionner la case d'évaluation et la remplacer par ce qui s'est passé. Faisons en sorte que cette disposition horizontale soit. Pour ajouter la revue iAS, je vais cliquer ici et cliquer sur l'icône Pontosm, et ici je vais faire une recherche et ici nous avons des étoiles Je clique simplement sur cette étoile et je viens ici, coupe, je retire le cadre. Sélectionnez ensuite cette case d'évaluation et à l'intérieur de cette boîte de révision, j'appuierai simplement sur l'étoile, et ici je l' ajouterai comme ceci. Ensuite, je vais changer sa couleur pour cette couleur dorée. Ensuite, je sélectionnerai l'étoile et je la dupliquerai cinq fois. Ensuite, je les sélectionne tous, et sélectionnons-les tous. J'appuie simplement sur Shift et je les sélectionne toutes, puis j'appuie sur Shift A pour les ajouter à la mise en page, puis je vais changer sa position en disposition horizontale, et ici je vais changer l' article entre les tailles. Faisons en sorte qu'il soit six. OK, parfait, et je garderai la taille comme la taille des étoiles, mais si vous le souhaitez, vous pouvez simplement sélectionner et modifier la largeur et la hauteur. OK. Maintenant, regardez , nous pouvons simplement les dupliquer à partir d'ici ou créer un composant. Pour celui-ci, dupliquons-le tel quel. Il suffit de placer la case de révision et appuyer sur les commandes C et B, comme ceci, puis je sélectionne ces deux cases de révision appuie sur Shift A pour la mettre en page horizontale Ensuite, la taille intermédiaire sera de 20 comme celle-ci. Oui, nous devons augmenter ce chiffre d'un point. Nous devons faire de même ici comme ça. OK, en fait, augmentons la hauteur, augmentons la hauteur. Augmentons par la ligne 440. Faisons de même ici, 440, comme ça. Ensuite, je l'ajouterai entre les tailles 60, puis je le dupliquerai à nouveau. Quand je le duplique, il sort de ce cadre, mais c'est tout à fait normal car nous allons en faire un slider OK, c'est bien. Augmentons également la hauteur. Essayons d'augmenter la hauteur de 4 040 2 440 comme ceci. Faisons-le ici aussi, pour 40 et ici 440. OK. Cependant, nous n'avons pas de critiques beaucoup plus importantes, alors peut-être que nous n'en avons pas besoin en tant que 440, mais restons-en à 300. Oui, 300, ça ira. Donc, voyez le problème : nous n'avons pas de composant, nous avons ajusté manuellement la hauteur de ces dessins. Maintenant, ce que je vais faire, c'est que si nous vérifions le design, il ressemblera à ceci . Je devrai donc modifier le contenu et corriger cette bordure sans montrer aucun problème pour la corriger, comme nous le faisions avant de sélectionner cette section de révision et d'ajouter une hauteur de 1 200. Ensuite, j'ajouterai des patins horizontaux des deux côtés et réglerons le problème comme suit. ici, nous avons un problème. Si vous cochez la case de démission, elle ressemblera à ceci, mais il y a plus d'espace pour la corriger à partir de là. Je vais cliquer ici et faire du zéro le côté de la douleur et passons à 1 180. OK. Maintenant, c'est parfaitement oui. Maintenant, si nous voyons, cela ressemblera à ceci. OK. Maintenant, à l'étape suivante, nous devons ajouter trois points. Pour ce faire, je vais dans Assets, clique sur le point latéral, clique sur Insérer une instance et c'est parti. Coupons-le et passons aux fichiers. Et ici, à l'intérieur, je vais appuyer dessus comme ça. Ensuite, j'appuie simplement sur ces deux éléments et appuie sur A pour ajouter la mise en page automatique ici, je vais la mettre en 220 et la mise en page automatique sera une ligne à centrer comme celle-ci. Maintenant, ajustons-le manuellement car cette section est trop longue, nous devons donc l'ajuster manuellement. Pour l'ajuster manuellement, je vais supprimer ce cadre. Non, nous devons l'ajuster, je vais simplement sélectionner les éléments et cliquer sur Ignotolayout, et je vais simplement l' ajuster manuellement comme Il y en aura alors 20. OK. Bien. Et maintenant, nous devons ajouter du contexte à cette section de révision comme ceci, alors la section de révision sera de 600, mais nous n'en avons pas besoin de 600. Faisons en sorte qu'il en contienne et faisons-en sorte qu'il en contienne 500. Voyons voir, voyons, diminuons la taille comme ceci. Ensuite, sélectionnons celui-ci et la hauteur est 492 et où se trouve le cadre que nous avons ajouté. C'est ça. Faisons en sorte que la hauteur 492 soit atteinte et ce sera un conteneur gratuit. Maintenant, renommons ces éléments. Ici, je vais remplacer ce paramètre par un ensemble de commentaires et nous n'avons pas besoin de ce cadre Je vais donc simplement sélectionner tous les avis et les ajouter à la révision Passons à la mise en page horizontale comme celle-ci. Ensuite, je vais passer en revue ce cadre et ici je vais changer ce cadre pour réviser G. Ce cadre sera le laboratoire le jour même ou le même jour, même étiquette, et celui-ci comportera 24 barres obliques sept balises tous ces textes, nous devons changer la couleur de remplissage cette couleur noire comme celle-ci Maintenant, ajoutons le vrai pistolet. Ouvrons le fichier et nous avons David, copions le texte et testons-le comme ça. Ajoutons l'image. Ensuite, nous avons une autre critique. Ajoutons-le ici et remplaçons ce texte. Changez maintenant cette image comme ceci. Voyons maintenant cela dans le design. Je vais ressembler à ceci, afin que nous puissions diminuer la taille de cette boîte. Nous le ferons dans la conception de l' élément. Maintenant, restons comme ça. Nous avons maintenant une section. Il ne nous reste plus qu'à créer la section puta. Dans la vidéo suivante, nous allons concevoir la section Puta 63. Section de pied de page design: Bonjour, tout le monde. Il ne nous reste plus qu'à créer cette section de pied de page Donc, lorsque je créerai la section de pied de page, je la créerai en couleur foncée, et ici j'ajouterai un logo, et ici j'ajouterai un résumé de la clinique, et ici j'ajouterai un identifiant de réseau social Après cela, j' ajouterai ici des liens utiles. Ensuite, de ce côté, j' ajouterai ces responsables de contact. OK. Commençons. abord, je vais augmenter la taille du cadre et ajouter un nouveau cadre, et faisons-le avec un conteneur de remplissage, et il fera 500 pour le moment, puis j'ajouterai une mise en page automatique à cela . Je vais donc appuyer sur Shift A, j'ajouterai donc appuyer sur Shift A, j'ajouterai simplement la mise en page automatique, puis la mise en page automatique. direction sera la disposition horizontale et ici je mettrai le rembourrage horizontal à zéro et le padin vertical Ensuite, ce que je fais, c'est que nous devons ajouter un fond noir. Si nous changeons simplement cette couleur de remplissage en couleur noire, elle ne sera pas définie à la taille de ce cadre nous suffit de cliquer ici, de cliquer sur le rectangle et de cliquer comme ça, puis de définir le remplissage et la hauteur seront de 500 OK. Je vais maintenant cliquer sur cet Igno Autoayo de ce rectangle. Ensuite, je peux l'ajuster comme je veux comme ça, ajuster comme ça et ici je serai ajouté en dehors de ce cadre comme ça. Alors pas dans la section de révision juste en dehors du cadre comme ceci et nous devrions cliquer sur IgNotLaPut comme ça Que s'est-il passé ? Sérieusement OK, maintenant tout va bien. Ici, le rectangle est là. Je ne mettrai pas le rectangle en haut de celui-ci, puis j'ajouterai Itroclor au rectangle Aucune couleur de champ Itrolor. La couleur du champ sera cette couleur noire. Maintenant que la couleur de notre champ est la même, nous devons ajouter notre logo dans un premier temps. Passons à notre feuille de style. Voici notre feuille de style, et voici notre logo. C'est notre logo, mais nous avons besoin du logo blanc. Créez un logo blanc, il suffit de placer le logo et dans la propriété, je peux cliquer dessus sur le bouton de variante et créer une section d'ajout de variante ici Je vais changer cette couleur pour définir la variante et changer le nom de la variante en logo blanc C'est bon. Encore une fois, allez sur le site Web et ici je vais ajouter le logo, allez dans Assertion Assets. Nous aurons le logo JB, cliquez dessus, et ici le logo blanc ardoise, cliquez sur les encarts, puis je découpe les fichiers TG dans le cadre, mets, et changeons le nom de ce cadre en disant OK Maintenant, ce que je dois faire est sélectionner la section du pied de page comme ceci, puis nous devrons ajouter une marge supérieure car il n'y a que 60, 60 c'est trop, le kit 30 sera bon et la taille de l'article, je vais le faire à zéro pour le moment Ensuite, je vais devoir créer un texte. J'appuie sur T pour ce type de texte, puis de Ty pour gab, je vais le remplacer par le texte du paragraphe et la couleur de remplissage, changeons la couleur de remplissage par cette couleur blanche Ce texte doit se trouver dans le pied de page comme ceci. Maintenant, je vais voir ces deux options et appuyer sur Shift A puis je vais changer cette mise en page en verticale. Ici, je dois mettre ce logo sur le texte. Ce cadre, il va falloir le changer entre la taille et les deux extrémités. Maintenant, ajoutons un résumé à ici, passons à hart GPT, et ici, disons, maintenant j'ai besoin d'un résumé, non, non, je dois concevoir une section, DiutertonDonnez-moi Voyons quel type de détails le GPT générera OK, je génère les détails comme ça. OK, et c'est bien. OK, nous avons tous les détails, mais j'ai besoin d'un résumé. Disons donc que j'ai besoin d' un résumé pour nettoyer en 150 caractères. Copie, j'ai reçu un texto. Ajoutons-le ici. Mettez une section, certaines ici, modifiez ce texte comme ceci, puis je le mettrai pour qu'il remplisse le contenu. Maintenant, je dois changer cette colonne de taille quatre. D'accord, nous devons ajouter des identifiants de réseaux sociaux ici, nous avons un lien vers les réseaux sociaux, j'aurai Facebook , Twitter, Facebook, Sam, Twitter et un lien. Ajoutons le tag Je vais aller ici. Maintenant, je vais cliquer ici et cliquer sur page de recherche de Fontas. Ce rythme, je peux ici, il suffit de le sélectionner, supprimer cette partie puis de sélectionner l'intersection, de le suivre comme suit Placez-le en dessous de ce cadre. Faisons de ce cadre une somme nette comme ceci. Maintenant, il suffit d'appuyer sur Shift A pour ajouter une mise en page automatique. Ensuite, je vais cliquer sur l'icône vectorielle et changer la couleur du champ en blanc afin que nous puissions clairement voir ce qui s'est passé ici. Donc ici, renommons ce saraceb et je le définirai comme une ligne envoyée. Ici , je vais changer en câlin et la hauteur sera le contenu du câlin Et maintenant, nous pouvons changer la patine horizontale et verticale de 20 %, c'est plus grand, d'accord. Maintenant, ce que je fais, c'est que je vais être à Field Color. Ajoutons cette couleur bleue comme champ, puis la radio 20, augmentons la valeur par 20. Réduisons ensuite le nombre de coins à neuf. Allons ici. Pas mal, mais on peut augmenter ce Facebook, il suffit de cliquer sur le I 2542 Maintenant, tout va bien. Maintenant, je dois dupliquer cette fiche de presse, sélectionner ces deux icônes et appuyer sur Shift A pour ajouter une mise en page automatique et en faire une mise en page horizontale. Et entre les deux côtés B 20. Et maintenant, changeons cette icône vectorielle. Ajoutons Link Thin. Ajoutons un tweeter X Twitter C. N'avons-nous pas une nouvelle icône de Tita ? Il semble que nous n' ayons pas de nouvelle icône Twitter. Pour l'instant, ajoutons l' ancien, et dans l'élément, nous pouvons ajouter le vrai rapidement ici et le coller comme ceci. Ensuite, je vais supprimer ce Facebook sélectionner l' icône Twitter, cliquer sur proposition de déformation C et changer avec 505250, c'est un peu gros et diminuer le sinus Six seront d'accord maintenant pour un à remplissage élevé. Faisons un contenant à remplissage élevé. Ce sera deux, trop petit. Allons-y. Nous n'en avons besoin que de deux. Nous allons vérifier la largeur ici avec 65 77. On peut facilement 657 comme ça. OK. Nous devons maintenant changer cette couleur de remplissage en blanc. Et dupliquons à nouveau ceci et ajoutons ici une icône liée. Nous avons créé un lien, il suffit de sélectionner l'icône du lien, et nous n'avons pas besoin de ce cadre et de cliquer ici, de cliquer dans ce vecteur et de placer le lien ici. Nous devons maintenant augmenter cette icône liée à une autre. OK. Et maintenant, ajoutons Instagram. Accédez à Font tsm X Instagram. Ici, nous avons l'icône et nous avons changé l'Instagram, supprimé le cadre Instagram et cliqué ici, nous l'avons collé comme ça. Ensuite, nous allons augmenter cette taille pour changer la couleur en blanc. OK, maintenant isolez cet ensemble et passons de la taille à deux. OK. Voyons maintenant le look et il ressemblera à ceci. Donc, s'il semble trop faible, nous pouvons simplement le recréer en modifiant le plus haut 60, le faisant passer à 65 65 Oui, 65 65 fonctionnera bien. Maintenant, vous voyez, maintenant cela ressemblera à ceci. Et ici, nous avons un blanc. Modifions-le comme ça. OK. Et maintenant, changeons l'autre section. En fait, je peux ajouter voir la section photo et c'est à 30€ un rembourrage horizontal Maintenant, renommons ces sections, résumé de la clinique et ici Donc les réseaux sociaux. Ensuite, il faut ajouter des liens utiles. Voici des liens utiles pour le faire, tapez ST et voilà, ajoutons ce type de chars et changeons-le pour remplacer le sous-édin . Nous n' avons pas de sous-marin. Allons en juger rapidement. Alors, commençons ici, ajoutons du texte ici. Ensuite, nous devons ajouter notre lien rapide. Je vais dupliquer ces deux sections, appuyer sur Shift A et changer la mise en page en disposition verticale Et ici, je vais changer le texte en boutons, puis nous pouvons ajouter des détails comme la page d'accueil, et cette page d'accueil sera remplie en bleu car il s' agit du lien sélectionné. Ensuite, je vais simplement les dupliquer, passer au plan de notre site et copier ces sections du blog. nos fournisseurs, notre fournisseur, nos fournisseurs, nos fournisseurs, nos fournisseurs, contacterons à propos du contact, puis nous devrons demander un rendez-vous à des heures où nous n'avons pas besoin notre demande de service et demander un rendez-vous. Et puis ajoutons la page des termes et conditions. OK, maintenant je sélectionne simplement ces liens et j'appuie sur Shift A, et passons de la taille à 12 et sélectionnons ce cadre. Et ici, ajoutons-en 30. OK. Ensuite, je changerai ces couleurs pour les sélectionner toutes et changer leurs couleurs en Y. D'accord. Et pour l'instant, ajoutons-en 60, mais nous allons évidemment changer cette taille. Et maintenant, ajoutons notre section de localisation. C'est notre emplacement. Copie du contact. Et ici, créons un autre texte, appuyons sur le texte et modifions-le de typographie pour qu'il soit à nouveau subdin, appuyons sur Dye le texte, et à partir de là, copions ces détails abord, nous aurons un numéro de téléphone, le numéro de téléphone correspondant au numéro de téléphone comme celui-ci, puis je devrai sélectionner ces deux sections comme celle-ci appuyer sur Shift A, puis changer la position en disposition verticale. Et ici, je vais appuyer sur le T et cliquer ici, et ici nous allons changer cette taille de police en paragraphe. OK. Ajoutons maintenant les détails. Courrier électronique. Ouais. Ouais. Dupliquez celui-ci dans l'e-mail. Répliquons cela plusieurs fois. Ajoutez simplement ces barrages, puis encore une fois, nous aurons des heures. C'est bon. Maintenant, nous avons des problèmes, alors et si nous l'ajoutions comme ça ? Ajoutons-le comme ça. OK. OK. Maintenant, je vais sélectionner tous ces éléments et appuyer sur Shift A pour ajouter un groupe, et la taille intermédiaire sera Datel Nous avons maintenant ces trois sections, et je sélectionne simplement section du pied de page et je vais la changer entre les côtés en Otto et elle s'ajustera en fonction de l'espace dont elle dispose Et voici ce design. Nous allons devoir l'augmenter un peu comme ça et maintenant diminuer la taille du cadre pour l'adapter au pied de page Maintenant, ce que nous devons faire, c'est une section sur les droits d'auteur. Alors faisons-le aussi. Pour ce faire, en fait, nous pouvons utiliser ce cadre. Donc, pour ce faire, j' augmente simplement la taille de ce rectangle. Faisons un rectangle semblable à un métrage, avec un intervalle B. Maintenant, je vais ajouter du texte là où je l'ai fait adhérer, donc je l' ajoute simplement à la section a. Et dans cette section de pied de page, renommons ces éléments pour que nous puissions les comprendre facilement. Ce seront donc des sonneries rapides à maillon faible, et voici le réservoir pour l' instant, nous avons ceux qui indiquent où se trouve le contact dans ce sera encre Ce seront les coordonnées. OK. Nous allons maintenant avoir ces trois sections. Il suffit d'appuyer sur Je sélectionne ces trois sections et d' appuyer sur Shift. Le putter sera réglé, puis je mettrai un et dans cette section Poa, je la changerai en disposition verticale Et maintenant, le texte passe en bas et ici nous allons le définir comme fill contain. La taille 19 est 60, c'est très bien. Maintenant, je vais changer cette gravité de pointe typographie barge et changer sa position au centre Maintenant, isolez la section puta dans la section de pied de page dans le rembourrage vertical, je vais cliquer ici et je mettrai ce zéro OK. Maintenant, ce que je vais faire c'est ajouter à la mise en page de cette section. Je passe juste à A et j' ajouterai 30, 30 à 2020, d'accord. Maintenant, ajoutons les détails du copyright. Ici, nous avons des droits d'auteur, des droits d'auteur. Non, pas de copyright. Nous écrivons un 2024, 2024, comme ceci. Maintenant, ce que je peux faire, c'est ajouter un trait, cliquer sur Contour et ici je vais changer cette couleur en blanc et cliquer sur celui-ci. Pas celui-ci, cliquez sur celui-ci. sélectionnons que la partie supérieure et soyons comme ça, il ne me reste plus qu'à sélectionner le puta VG et à augmenter sa taille comme ça OK. Nous avons maintenant une section de design par semaine Donc je mets un set, je dois définir que le withs contiendra quelque chose qui ne va Ici, je vais en faire 30. Maintenant, faisons-en un 60. Et dans le foa set, je vais devoir ajouter cette taille intermédiaire à Otto comme ça Maintenant, c'est bon, et ici nous n'en aurons pas 60, mais 30. Ça ressemblera à ça. OK. En fait, ces icônes sont trop grandes. Supprimons cela, puis essayons d'ajouter 56 par 60. Passons à 66 en supprimant d'abord la disposition horizontale et verticale, et nous n'avons pas besoin de rembourrage . Modifions-le comme 56 par 50 Continuez à le faire pour tous ces éléments Encore une fois, faisons-le fifo. Maintenant ça ressemble à ça et elle a l'air bien. Nous devons maintenant sélectionner la page d'accueil et appuyer sur la touche Commande ou Ctrl et la mettre comme ça. OK. Voici maintenant le design de notre site Web. 64. Conception à propos d'une page - Partie 01: Bonjour, tout le monde. Nous devons maintenant concevoir un journal de nos fournisseurs et de nos pages de contact. Nous avons créé avec succès la page d'accueil et maintenant nous avons ces petites tâches. Pour obtenir du contenu pour la page à propos, nous pouvons utiliser nos concurrents. En fait, il suffit de se faire une idée de la façon dont nos concurrents créent leurs pages à propos et du type de contenu qu'elles utilisent. Et en obtenant ces informations, nous pouvons créer notre propre page à propos. Si nous consultons le fichier des exigences de conception du site Web, nous pouvons voir l'inspiration du design. À partir de là, je vais ouvrir le compte de ces concurrents, suffit de double-cliquer ici et de copier puis de coller sur Nouvel onglet et je le ferai pour tous ces concurrents. Site Web comme celui-ci. OK. Maintenant, voyons les pages à propos. Tout d'abord, nous avons ce site Web et ici nous avons Autink et cette page à propos ne contient que cette section Et si nous allons ici, pouvons-nous voir à propos de la page ? Non, ici nous n' avons aucune page à propos, nous pouvons donc ignorer ce design. Et si nous allons ici, nous avons affaire à des soins d'urgence. Et nous avons ici une page à propos de. Donc, dans cette page à propos, nous avons une histoire à propos de nous, et voici notre mission et nos valeurs. Ensuite, si nous descendons, nous pouvons voir nos professionnels de la santé et notre panel de médecins, et nous pouvons ajouter cette section sur la page de nos fournisseurs. À partir de là, nous pouvons accéder à cette section et à notre section sur notre mission et nos valeurs. Si nous allons ici, nous avons ici une section et dans cette section à propos, nous avons du contenu sur la clinique. Ici, nous avons Y Joss et Riax&Enjoy, puis nous avons les détails Donc, en les cochant, il est difficile se faire une idée de ce que nous devons ajouter sur notre page À propos. À notre avis, mon plan est de créer ce type de section et de créer une section pour notre mission. C'est ce que nous allons faire. Pour ce faire, je vais passer au design Figma, et dans le design de Figma, je vais mettre ce design et créer un nouveau cadre, et le cadre sera un bureau et je le mettrai à côté de notre page d'accueil, puis je changerai le nom Ensuite, j'appuierai sur Shift A pour ajouter une mise en page automatique, et sur page automatique, je vais passer à une mise en page verticale. Ici , la taille intermédiaire sera de 1 à 20, le rembourrage gauche et droit sera 140 et le motif en haut et en bas sera nul OK. Nous devons maintenant ajouter cette disposition en grille. Si nous cochons ici, nous n'avons aucun style de grille, mais si nous cliquons ici et que nous avons déjà créé une mise en page de grille, je peux donc simplement cliquer dessus et cliquer sur cette icône plus. Ensuite, je peux créer un style pour cette mise en page en grille. Let's S est comme dans la grille principale. OK, maintenant si je vais sur A et que je clique ici, nous pouvons voir la disposition de la grille principale. OK. Nous allons maintenant ajouter cette section. Nous pouvons donc simplement copier ces sections à partir d'ici sans créer à partir de zéro, car nous avons maintenant page d'accueil claire et nous obtenons l' approbation de nos clients. Ainsi, lorsque nous avons approuvé le design, nous pouvons simplement copier le contenu à partir d'ici. Copions ce menu pour le copier. Je peux simplement sélectionner ce héros appuyer sur la commande C et le coller comme ça. OK. Maintenant, assurez-vous que page automatique est définie de la même manière que le paramètre de mise en page automatique de la page d'accueil. Si c'est similaire, vous n'aurez aucun problème. Et maintenant, pour la page a, nous n'avons pas besoin de ce bouton ou nous n'avons pas besoin de ce type d'espacement. Je vais réduire la hauteur de cette section de héros à 600 comme ça. Ensuite, nous avons ce texte en couleur blanche, mais nous ne pouvons pas le voir. Ajoutons une image de fond pour que nous puissions la voir clairement. Je vais cliquer sur le rectangle et cliquer ici. Faisons ensuite 600 hauteurs et je cliquerai sur ce IgnooToayout. Alors je peux le mettre ici sans aucun problème de ce genre. OK. Maintenant, je vais mettre ceci à peu près comme ça. Avant de le faire, je dois ajouter l'image. J'ai donc déjà créé l'image. Vous pouvez consulter cette image dans la section des ressources. Ajoutons cette image. Cliquez ici, cliquez sur l'image vidéo. OK, voilà. Nous voyons des images, un premier projet et une page, et ici nous avons une image. Il suffit de cliquer sur Ouvrir et de cliquer ici pour l'ajouter. Alors ce que je peux faire, c'est mettre ça de côté. Mais quand je le mets derrière moi, je ne vois pas ce type de couleur noire. Donc, si nous allons à la page d'accueil, nous avons ici couleur linéaire qui a 80% d'opacité Je dois donc ajouter cette superposition linéaire à cette page d'informations Alors allons-y. Faites-le d'abord, je clique sur cette icône en forme de plus. Et ici, voyons le réglage. C'est zéro et 84, et la couleur est devenue noire. Ajoutons-le donc. Tout d'abord, nous avons 80 comme opacité et si je clique ici et que je clique sur Linéaire , nous en avons 84 Alors voyons 84, zéro, et ici nous en avons 24. Ajoutons ces détails à 24. OK. Maintenant, c'est bien, mais le même style ne correspondra pas à ici car cette image du médecin ne s'affiche pas, alors ajustons-la telle que nous la voyons, nous pouvons la supprimer. Nous pouvons le déposer ici comme ça. OK. Et ici, nous pouvons peut-être réduire l'opacité de cette façon et c'est bien mieux OK, maintenant nous n'avons plus besoin de ce bouton, alors supprimez-le. Ici, nous devons ajouter le texte. Pour ajouter le texte, nous devons générer le texte et pour générer le texte, nous pouvons utiliser le GPT J'ai ouvert le hGPT et allons recevoir notre message. Ici, nous avons la première invite et nous copions l'invite, puis nous collons le recto. Vous êtes rédacteur de contenu. Vous êtes rédacteur de contenu et je souhaite que vous écriviez du contenu pour la page à propos du site Web de la JB Family Clinic Alors voici les informations. Ajoutons donc nos informations sur la clinique familiale JB, en fait, celles que nous avons sur le contenu du site Web Si nous vérifions le contenu du site Web, nous avons ici le contenu du site Web. Je vais simplement copier ce contenu comme ceci. Peut-être qu'il suffira copier le contenu pour ici. Je vais juste le copier , puis sur GBT, je les copierai. En fait, nous avons du contenu pour créer un résumé des prêts des catégories. Alors maintenant, je voudrais dire qu'en fait ici, disons, je veux faire une section. La première section nous concerne, et la deuxième section traite de notre mission et de nos valeurs. OK, maintenant c'est au présentateur de générer le contenu, et voyons voir, d'accord. Maintenant, je dois dire que je veux un titre pour la page à propos et le sous-titre Il faut un sous-titre pour chaque section. Et en fait, nous n'avons pas besoin de subrit pour chaque section. Nous n'en avons besoin que pour les gros titres. OK, nous avons ici le titre. Je vais juste le copier et venir ici et cliquer ici, puis coller le titre comme ça et c'est parti. Et placez le subpdin comme ceci. Peut-être que nous avons besoin de plus de détails sur sous-pédage parce que c'est trop bas. Supposons donc que subdin ait besoin d'un peu plus d'informations. Copions celui-ci. Peut-être que ce sera beaucoup de contenu, mais voyons voir, peut-être que cela conviendra. Ouais. C'est parfait ici. Il faut maintenant créer ce type de section. Je copie donc simplement la section et je la colle comme ça. Et n'ajoutons pas ce type de contenu à la page à propos. Et ici, faisons-le entre les tailles, car entre les deux, la taille 90 fonctionnera. Et ici, ajoutons du contenu, et ici je vais copier la ligne en tant que titre d'une telle peur Et copions ce contenu. Tout d'abord, je vais le copier et le coller comme ça, puis je vais le dupliquer. Et voici cette section, il suffit de coller cette section et en fait, faisons en sorte qu'elle soit environ 60 parce que lorsque nous la faisons comme 60, elle aura plus d'espace. OK. Maintenant, nous n'en apprenons pas plus. Nous pouvons ajouter cette demande de contenu à votre rendez-vous et ici, nous n'avons pas besoin de ce bouton. OK ? Nous en sommes maintenant au contenu et nous devons changer cette image. Avant de modifier l'image, créons la section suivante. Pour créer la section suivante, je vais simplement dupliquer celle-ci et ici je vais changer le ici je vais changer nom de ce contenu en trois niveaux environ, et nous aurons ici notre mission, je pense, notre mission et nos valeurs, il suffit de le copier, tester ici, et ce que nous devons faire est placer cette section en premier et cette image, ensuite, comme ceci. Ajoutons ici ces informations, copions simplement notre mission et nos valeurs, disons-le ainsi. Alors ici, nous n'avons pas besoin de sous-ligne, disons ça prend comme ça Supprimons ce bouton. Nous n'avons pas besoin de ce bouton. Je vais également supprimer celui-ci, et nous devons y ajouter nos valeurs fondamentales. En fait, ajoutons-le pour l'ajouter pour l'ajouter, nous pouvons les ajouter comme une liste. Donc, ce que nous pouvons faire, c'est créer un nouveau texte à l'intérieur du résumé, comme ici, pas là dedans. OK, ici, nous avons un subtil ajoutons nos valeurs fondamentales comme ceci Ensuite, je l'ai dit en tant que sous-din et maintenant je vais le dupliquer et le changer en texte par paragraphe Ici, nous devons d'abord ajouter ces détails, je vais copier ce texte et mon plan est de simplement copier ce texte Nous n'avons pas besoin d' autant d'informations car l'utilisateur pourra facilement comprendre cela si nous ajoutons un texte simple comme celui-ci. Je sélectionnerai l'ellipse et créerai une ellipse comme si nous le faisions 16 par 16 Maintenant, changeons cette couleur de remplissage bleu, surlignons ces deux éléments, appuyons sur Shift A, puis sélectionnons la mise en page horizontale et placez-la au centre. La taille intermédiaire sera 12. Comme ça, peut-être six, six, c'est trop près. Il sera basé. OK. Maintenant, je vais juste le copier quelques fois comme ceci. Maintenant, je vais ajouter ces informations comme ceci. Encore une fois, ajoutons les détails. Ensuite, nous avons une attention personnalisée. Je vais maintenant copier ce texte et le coller en bas. Ici, nous avons un problème. Le problème est que si nous poursuivons notre mission, la taille est inférieure à celle du texte. Donc, ce que nous pouvons faire, c'est cliquer ici et cliquer sur le contenu et il augmentera comme ça. Ensuite, copions ce texte et plaçons le texte comme ceci. OK. Nous en sommes maintenant à la section sur notre mission et nos valeurs. Et je pense que l'augmentation de cette image pour 600 sera basée. 605 20, c'est bien. Peut-être que 520 ira bien ici, faisons la hauteur 600 comme ceci et nous devons maintenant changer ces images. 65. Conception à propos de la page 02: OK. Maintenant, ajoutons ces images. Je clique d'abord sur ce triangle rouge ou sur l'image. Cliquez ici, cliquez sur Maglah Videos et sur un dossier de page dans le fichier image, vous pouvez voir à propos de nous l'image de notre mission, suffit de cliquer dessus et de la mettre comme ça Alors, dans le cadre de notre mission, vous pouvez faire de même. OK. Nous avons maintenant des sections sur nous et sur nos missions. Ensuite, dans le dossier de contenu du site Web, nous pouvons voir qu'il y a huit catégories à ajouter. Ajoutons-les donc. C'est assez simple. Je vais augmenter la taille de la page, et ici, nous pouvons simplement copier cette section car il suffit de la copier et de la coller comme ça. En fait, scellez la page et collez-la comme ceci. Pourquoi il n'ajoute pas O, quelque chose ne va pas. Parce que nous ajoutons cet Ignotolayo il suffit de le décocher et il s'adapte parfaitement Et ici, il faut changer cette largeur. Donc, ici, nous avons une largeur de 1001 60, nous devons donc faire en sorte que cette largeur soit la même. Pour ce faire, nous pouvons facilement retirer ce rembourrage gauche et droit comme ceci, puis il s'ajuste automatiquement et ici, puis il s'ajuste automatiquement et ici, nous pouvons simplement le faire remplir le conteneur et il aura l'impression d'être comme ça . Ici, nous n'avons pas besoin de ces icônes de carrousel Ce sera le moins possible. OK. Il faut maintenant ajouter le contenu. Alors faisons-le. Tout d'abord, ici, nous devons ajouter une petite description comme celle-ci, puis je vais la dupliquer, et ici nous devons ajouter la description du prêt comme ceci. OK. Et sur ces points, va falloir changer la typographie, changeons-la comme si le bouton ne marcherait pas Peut-être que nous allons le changer en paragraphe, et ensuite si nous ajoutons du soulignement ? Ajouter un soulignement n'est pas professionnel. Peut-être faisons-nous un paragraphe pour créer ce support normal comme celui-ci. Augmentons la taille jusqu'en 2021, comme ceci. Et maintenant, entre les deux, la taille 20, mais faisons en sorte que ce soit 15. 15 fonctionnera bien. D'accord, nous avons la première catégorie et nous devons faire de même pour les catégories, et je vais simplement copier ce texte d'ici et le mettre ici comme ça. Ensuite, adaptez les réservoirs à la description du prêt comme ceci et ici, nous pouvons faire même taille et faire l'alignement en haut à gauche comme alignement et faisons de même pour ici comme ceci. Continuons et maintenant nous avons ce troisième avec cette petite description, copiez la petite description d'ici. Et comme ici, copiez la description du prêt, collez la description du prêt, et copiez simplement, cliquez sur cet élément, cliquez sur Copier la propriété, cliquez ici et cliquez ici et cliquez ici et cliquez sur Coller la propriété Ici, entre les tailles 15 et nous devons également le faire jusqu'ici 15. OK. Maintenant, nous devons ajouter celui-ci. La petite description, copions le texte d'ici collons-le comme ça, puis plaçons-le et collons-le comme ça. OK. Encore une fois, ici, propriété passée, en fait, nous devons copier à nouveau la propriété , copier la propriété, coller la propriété. OK, alors faites en sorte que ce soit égal à un objet. Nous avons donc maintenant cette section et il nous en reste quatre autres, et ajoutons ces quatre éléments dans le design réel. Et maintenant, il ne reste plus qu' à ajouter ce pied de page. Nous pouvons donc simplement copier ce pied de page et le mettre ici. En fait, je pense copier à la fois le pied de page et le pied de page VG et le coller comme ça En fait, ce que nous pouvons faire, c'est sélectionner ces éléments. Cliquez sur créer un composant et le nom du composant sera affiché en bas de page Maintenant, ce que nous pouvons faire, c'est passer à AssRs, et nous avons ici le chiffon de pied de page comme celui-ci. Ou nous pouvons simplement cliquer ici et cliquer sur l' instance Istat comme ceci Ensuite, prenons les tailles 1 à 20 et disons-le comme ça. OK, nous avons conçu avec succès la page à propos. 66. Conception d'une page de blog: Bonjour, tout le monde. Il est maintenant temps de concevoir la page de blocage. Mon plan est de concevoir des articles de blog comme celui-ci. Commençons. Je vais d'abord créer un nouveau cadre. En fait, nous pouvons simplement dupliquer cette page à propos et supprimer ce contenu. Nous n'avons besoin que du contenu de l'en-tête et ici je vais passer au bloc. Maintenant, je vais aller au Har GTP et demander si je veux le titre de la page de bloc et une petite description Voici le titre. Je vais juste copier-coller et voici une petite description, collez-la comme ça. OK. Maintenant, je vais utiliser ce type de design, je peux donc simplement copier ce design et le modifier. Je vais juste passer aux amendes et ici copier nos fournisseurs, cliquer ici et coller comme ça, puis je vais le mettre comme ça et à partir de là, je vais supprimer celui-ci. OK, et maintenant je vais faire les tailles intermédiaires, un, deux, et faire en un, deux, et sorte que la gauche et la droite soient égales comme ça. OK. Maintenant, ici, nous n'avons pas besoin de celui-ci, il suffit de le supprimer et nous n'avons pas besoin de voir l'icône du profil et ici, supprimer et ici, supprimons celui-ci, deux, et ici, supprimez-le aussi. Et revoyons notre design. Nous avons ici le titre et une petite description, puis la date de publication de l'article. Ajoutons-les donc pour. OK, ici nous devrions avoir la date. Allons sur Chat GDP et demandez-moi un article de blog, sructbologist Il doit inclure le titre, une petite description et la date de création OK, nous avons le titre ici. Je copie simplement le titre et je le colle comme ça. Ensuite, petite description, copiez la description et collez-la comme ceci, puis ici nous devons copier ce titre et placer le titre dans ce titre, pas le titre. C'est le rendez-vous. Ensuite, je veux que ce soit deux par deux parce que trois par trois, il n' y aura pas beaucoup d'espace, mais trois par trois, c'est bien. Oui, trois par trois, c'est bien. Gardons les trois par trois comme ça. Mais si nous le voulons, nous pouvons simplement l'augmenter et l' ajouter deux par deux. Deux par deux, ce sera plus grand. Faisons trois par trois et voici le suivant. En fait, nous n'avons pas besoin d' ajouter du contenu pour chacun Je vais donc le coller trois fois avant de le faire Supprimons ces deux éléments et copiez-collez trois fois. Et ici, nous n'avons pas besoin de ces deux éléments, il suffit de les supprimer. Maintenant, je vais changer cette image. Je pense que nous avons déjà les images, donc OK, cliquez sur l'image et cliquez ici et nous avons la page du blog, copiez simplement le texte à partir de là et faisons de même pour ici. Ouaip. Il ne nous reste plus qu'à le dupliquer pour la deuxième fois comme celui-ci et ici nous devons changer cette hauteur pour un contenu comme celui-ci. Alors allons-le un peu plus gros comme ça. OK. Et ici, il se peut que nous devions augmenter cette partie 640 et faisons de même pour cela, c'est en fait 645 Faisons de même ici. OK. Maintenant, la partie du bloc est belle, passez aux ASR et nous devons ajouter le pied de page Ajoutons le pied de page comme ceci. Faisons-en un et réduisons-le comme ça. Nous avons maintenant un bloc d'une dizaine de pages. Nous devons maintenant créer la page de contact. 67. Conception de la pagination de blog: Notre problème sur la page du blog. Je pense que vous avez 100 articles de blog sur votre site Web. Si quelqu'un vient sur cette page de blog, tous les articles de blog seront chargés. Il existe deux façons de résoudre ce problème : la première consiste à ajouter une fonction qui ne charge que les publications lorsque quelqu'un fait défiler le site Web. Nous devons utiliser JavaScript et PHP pour le faire, ou nous pouvons ajouter une pagination, ce qui signifie que nous ne pouvons charger que six articles par page Si quelqu'un veut en voir plus ici, nous avons une pagination et nous pouvons cliquer sur les deuxième et troisième pages pour les vérifier . Créons donc une pagination Pour ce faire, je vais d'abord créer un cadre et augmenter la taille de ce cadre jusqu'ici, car nous ajoutons à ce contenu une mise en page automatique Maintenant, nous pouvons ajouter la pagination. Pour ce faire, je vais créer un nouveau cadre, et il est affiché ici parce que notre cadre entre deux tailles ou entre deux espaces est compris entre un et, ici, un à 20. Sélectionnez ce fichier. Voici celui-ci et je vais ajouter la largeur comme conteneur de remplissage. OK. Maintenant, nous pouvons cliquer sur IgnooToayout et le mettre ici, nous devons donc le faire Ensuite, je vais créer un rectangle créé ici et en fait, ajoutons une mise en page automatique à ce cadre et définissons-le comme disposition horizontale et ici, supprimons ces détails de gauche et de droite Faisons en sorte que le cadre soit nul et ne soit pas fixé, le cadre devrait être comme ça et là, créons du contenu au milieu et maintenant je veux ajouter une flèche gauche-droite, abord, ajoutons une flèche gauche. Je clique ici et sur la police tsm, prenons cette flèche et je vois, nous avons ici la flèche Je le supprime et je clique ici. OK. Maintenant, je n'en ai pas vraiment besoin, je n'ai pas besoin de celui-ci. Maintenant, je peux simplement cliquer sur cette flèche et appuyer sur Shift A pour ajouter ayo, puis le placer au milieu. Et ajoutons 30 patines gauche et droite, 30 supérieure et inférieure également 30 C'est trop grand, peut-être qu'un jumeau fera la taille. OK. Maintenant, je vais ajouter rayon d' angle comme «   Let's make it l deux ». OK. Il faut maintenant ajouter de la couleur de fond. Au remplissage, ajoutons de la couleur de fond. En fait, on peut ajouter cette couleur bleu clair et les coins sont trop grands. Faisons en sorte que six soient parfaits. Ici, nous devons augmenter la hauteur de cette icône et faire en sorte que l' icône 202-20-3203 soit correcte et qu'elle devrait être de 15 et cela devrait être 15. Ici, changeons la couleur du champ en blanc pour l'instant, tout va bien 15. Ici, changeons la couleur du champ en blanc pour l'instant Et l'icône est un peu plus grande, faisons-en 15. 15 sera parfait et maintenant je vais le dupliquer , puis le faire pivoter comme ça et faisons-en des morsures Maintenant, il ne me reste plus qu'à ajouter des nombres. Additionnons les chiffres. abord, je clique sur les réservoirs et j'ajoute du texte comme ici, alors ajoutons-le en un seul et en ce qui concerne la typographie, faisons du texte un sous-dit Appuyez ensuite sur Shift A pour ajouter une mise en page automatique et ajoutez 15 à gauche et à droite. Je n'ai pas travaillé. Je ne l'ai pas fait, alors ajoutons de la couleur au champ. Ajoutons donc cette couleur de champ. Nous devons donc augmenter cela, je peux faire des détails à gauche et à droite comme celui-ci et ici 15, ici, 15, peut-être que nous ferions 20 à gauche et à droite, cela ne marchera pas, peut-être que nous l'augmenterons manuellement. Les coins seront insérés et ici la couleur sera blanche. Faisons en sorte que cela soit également 45, 52, ce sera la même chose que ces deux éléments et ici, changeons la couleur de remplissage en blanc et la couleur de test sera la couleur de test sera cette couleur noire et ajoutons une petite bordure. Le trait, les couleurs du trait, améliorons ceci et cela , et dupliquons-le. Maintenant, nous en avons deux et la phase deux, faisons en sorte que la dernière soit dix. OK. Maintenant, nous devons le faire en bleu car ce sera l'élément sélectionné. Donc, pour ce faire, réglez les réservoirs, définissez la couleur du texte en bleu, et la couleur de fond sera cette couleur bleu clair. Ouaip. Cela va fonctionner. Ici, changeons cette couleur en noir ici, changeons-la en couleur noire, puis copions ce style de trait ici style de trait de couleur, oublions-le ici, il suffit de cliquer avec le bouton droit de la souris et de cliquer sur propriété de copie et de cliquer sur la propriété de collage. Faites de même ici. Maintenant, je vais le mettre ici. La génération de page ressemblera à ceci. On peut faire ça à gauche et à droite comme ça en bleu. Ici, nous pouvons également rendre ces chiffres en bleu car ils sont cliquables en bleu comme ça Ici, il suffit d'ajouter trois points et de le faire comme ça. Ici, transformons cette couleur en noir. Et maintenant, nous avons la pagination et cette pagination va changer en fonction du design, mais ce sera la base sur laquelle le client vérifiera le design, nous pouvons expliquer la fonctionnalité de pagination 68. Conception nous contacter page 01: Bonjour à tous. Nous avons maintenant ici le lien de nos fournisseurs. Pour nos fournisseurs, nous n'avons pas besoin d'une page séparée car nous avons ici nos fournisseurs dédiés. Ainsi, lorsque quelqu'un ou un visiteur clique sur le lien de notre fournisseur, faisons en sorte que cette personne réagisse à la page d'accueil Maintenant, nous devons créer un contact. Pour créer une page de contact, comme nous l'avons fait auparavant, nous pouvons consulter le site Web de nos concurrents et voir leurs pages de contacts. Ici, nous avons l' adresse du formulaire, l'adresse du formulaire, téléphone et les heures d'ouverture. Ici, nous avons carte et passons à la suivante pour celui-ci, nous ne voyons pas de page de contact. Voyons voir. Nous n'avons pas de page de contact séparée, mais ici, nous avons heures d'ouverture et les détails sur le pied de page Ensuite, sur ce site Web, nous avons les emplacements et les emplacements, nous avons les détails des emplacements et sur ce site Web, il y a une page de contact et dans cette page de contact, nous avons un formulaire, l'emplacement du bureau et les heures d'ouverture, puis d'autres informations. Utilisons également un bouton similaire à notre site Web. Et allons voir HagiDB et disons que nous avons besoin d' un titre et d'une petite description pour la page de contact Alors disons maintenant que nous avons besoin d' un emplacement, d'heures d'ouverture. Je pense qu'en fait, nous avons l'emplacement et nous sommes ouverts. Oui, nous avons ces informations, nous n'avons donc pas besoin de ces informations, et je pense que nous pouvons continuer. OK. Alors d'abord, je vais voir le panneau Fig Muddy Nous pouvons simplement en dupliquer un. Dupliquons le bloc et disons-le comme ça. Supprimez ensuite cette section car nous n'en avons pas besoin ici, nous devons ajouter ce pied de page dans le blob comme Maintenant voilà, changeons de cadre Aucun contact, copiez le titre, appuyez sur le titre, copiez les descriptions comme ceci, puis créons ce type de formulaire. Demandons, générons un contact, demandons un formulaire f. Nom complet, e-mail, téléphone, objet du message. OK, c'est une bonne idée. Faisons donc le formulaire et nous pouvons utiliser un design similaire à celui-ci. Donc, d'abord, je crée un cadre et faisons le cadre avec une largeur de traction comme celle-ci, puis faisons en sorte que la hauteur du cadre soit 800, puis appuyons sur OK, puis supprimons les éléments inutiles Nous n'en avons pas besoin et entre les deux tailles, faisons-en un 20, et nous allons créer le formulaire ici. Créons un texte comme celui-ci et disons qu'il donne un titre au formulaire comme celui-ci. Copions ce titre. Le titre change le type de sous-titre gravito, le sous-titre est trop sm, c'est trop grand. Peut-être gardons-nous la taille d'une parure de lit et nous devons changer le cadre en l' adaptant à Maintenant, il faut créer le texte. Faisons du texte comme ceci pour le moment. Ensuite, le nom complet, copiez ces ts et nous devons d' abord créer différents cadres. Je vais surligner ces deux éléments et appuyer sur hip pour créer une mise en page automatique et en faire une mise en page verticale. Et cette taille de mise en page sera comme si nous la gardions ici. La hauteur sera de 800 comme ça, puis mettez-la en haut et ici entre les deux, la taille 20 ira bien. Maintenant, j' appuie sur Shift A, puis je vais changer la hauteur pour remplir le conteneur . La hauteur sera peut-être de 45 et gardez-la comme ça , puis sur la gauche, faisons-en six et d'un trait, changeons cette couleur. En fait, nous avons déjà trouvé le meilleur trait ici, copiez cette couleur et la couleur du trait sera celle-ci et le rayon d'angle sera de six, faisons-le avec 55. Il faut changer la couleur de remplissage de ce nom complet en fait, il y en a deux ici, c'est bien. Je pense que nous sommes bons, alors créez le champ de texte suivant. Copions le champ de texte de l' adresse e-mail et le collons comme ceci, puis le numéro de téléphone, copions le texte et obtenons-le en passant et Dragon Drop comme ceci. Encore une fois, je vais le copier quelques fois. Ensuite, nous avons le sujet qui ne doit pas être facultatif. En fait, nous n'avons pas besoin de sujet ici, alors copions le message. Ajoutons quand même un sujet. Rendons le sujet facultatif comme celui-ci. OK. Ensuite, nous devons ajouter la méthode de contact préférée, et celle-ci est une liste déroulante. Ajoutons donc comme ça et ici nous devons ajouter une icône déroulante comme celle-ci, pas bonne, pas bonne. Et à ce stade, alors faire comme si six c'était dommage. Maintenant, prenons position si n'est pas le cas lors de la mise en page et plaçons-la ici, puis changeons de couleur en utilisant cette couleur de texte. C'est une bonne chose. Maintenant, ce que nous devons ajouter à cette date de rendez-vous préparée est facultatif. Faisons ça. Comment avez-vous entendu parler de nous ? Faisons en sorte que ce soit facultatif et ici, nous pouvons le dupliquer , si tel est le cas. Téléchargez ensuite le document. Téléchargeons le champ du document pour ajouter une pièce jointe, afin que les utilisateurs puissent télécharger pièces jointes, comme des rapports médicaux. Notez que cette case à cocher, parce que nous séparons les termes et conditions et la politique de confidentialité , vous pouvez ajouter ce texte si vous le souhaitez. En fait, nous n'avons pas créé de bouton de message. Créons le bouton de message. Ce n'est pas un bouton, un champ de message. C'est nécessaire et ici, nous devons changer cela. Dans le message, nous devons augmenter ce petit peu, comme 150 serait bien et régler le bout en haut et en haut, faisons en sorte que ce soit six sur le rembourrage et là encore, nous devons changer cela OK. Maintenant, tout va bien et nous devons ajouter un bouton pour que nous puissions simplement copier ce bouton et venir ici, goûter au bouton, pas ici. Nous devons sélectionner ce cadre et coller le bouton. Agrandissons le cadre avec ceci et changeons ici ce texte pour sous-soumettre le poème est prêt. Il ne nous reste plus qu'à ajouter les heures d'ouverture et d'autres employés. Faisons 69. Conception nous contacter page 02: OK, nous devons ajouter ici les coordonnées. Si nous allons sur la page d'accueil, nous pouvons voir ici les coordonnées, nous pouvons donc simplement les copier et les coller directement sur la page de contact comme ceci. Nous allons maintenant modifier cette section. abord, je vais diminuer cette hauteur comme celle-ci pour l'adapter au design. Nous avons également besoin de l'emplacement, mais nous n'avons pas besoin de celui-ci Je vais donc le supprimer et nous allons le faire comme ça. Ensuite, je vais le mettre sous forme de ligne au centre gauche. Maintenant, nous pouvons ajuster cela comme ça, puis ce que nous devons ajouter, c'est nous n'avons pas besoin de cette icône fine . Maintenant, nous avons besoin de nos heures d'ouverture Je vais simplement dupliquer celle-ci et si nous allons au pied de page, nous avons des heures d'ouverture ici, donc je vais simplement la copier et venir ici et changeons l'emplacement de cette clinique heures d' ouverture et voici le texte Du lundi au vendredi, de 8 h 00 à 17 h 00 . Maintenant, nous devons changer cette icône, changeons-la Pour le changer, je vais aller sur les icônes en forme de barre oblique de pons.google.com et ici, cherchons les heures d'ouverture, peut-être les heures Peut-être que l'horloge fonctionnera. Ajoutons ce type d'horloge et ici nous devons diminuer sa taille comme ça et découvrir la taille de l'icône. La taille de l'icône est de 106 x 106. Passons à la taille 100. Faisons en sorte que ce soit 100. OK, agrandissons-le. Maintenant, gardons-le et cliquons sur ENG pour le télécharger et ici, allons-y, cliquons sur l'icône et ici sur les vidéos NV, puis ajoutons l'icône Comme si c'était en fait plus grand et que la couleur n'était pas tout à fait correcte, alors trouvons notre code couleur comme celui-ci. Et allons-y, changeons le code couleur et changeons cette jauge. Passons à 200 et cliquez sur PNG pour le télécharger et venez ici. Cliquez à nouveau sur CJ Image. Passe-le comme ça. OK, parfait. Nous avons maintenant les détails et les détails des NAS ouverts , puis je veux ajouter une carte ici. Je vais simplement créer un nouveau cadre et faire en sorte que la taille du cadre soit 500 et je copierai cette adresse. Il s'agit en fait d'une fausse adresse, essayons-la. Il suffit d'aller sur Google et de rechercher l'adresse. Je ne pense pas qu' il existe réellement un tel endroit, alors le voici. Maintenant, je vais appuyer sur la commande Shift pour obtenir une capture d'écran sur le Mac. Si vous travaillez sous Windows, vous pouvez accéder à l'outil de capture d'écran ou à l'outil Snipe intol et obtenir Maintenant, allons-y. Je vais cliquer sur ce bouton vidéo passer ici et le mettre comme ça. Maintenant, je vais diminuer la forme. En fait, je dois diminuer cette taille comme ça pour l'adapter ou je peux l' augmenter et améliorer visuellement et c'est parti. Maintenant, ce que nous devons faire est ajouter le pied de page pour ajouter le pied Je peux accéder à Assets and input, cliquer sur Insérer une instance et l'ajouter comme ceci, juste comme ça Augmentez ensuite le bit d'image comme ceci. OK. Sympa. 70. Concevoir à propos de nous page 01: Bonjour, tout le monde. Concevons maintenant cette page dans Wordpress Element of Pro. OK. Voici notre design Figma, je passe donc au tableau de bord de WordPress, et maintenant passons à la page des pages R. OK, ici, cliquons sur Nouvelle page et le nom de la page sera ci-dessus. Copions ce titre comme titre. Et voilà, collons-le et cliquons sur Modifier avec l'élément « OK ». Maintenant, nous devons concevoir le site Web, et si nous vérifions l' élément ou le site Web, nous avons une section similaire, comme cette section héros, cette section de page d'accueil est similaire à la section à propos, qui signifie que nous pouvons utiliser cette section de page d'accueil pour créer une section. Je veux dire la section des héros de la page d'accueil. Alors faisons-le. De plus, cette section héros de la page à propos de la page de blog et la page de contact était toujours répétée. Créons-le en tant que modèle, ce qui signifie que nous pouvons l'utiliser à plusieurs reprises dans nos pages Earl. Pour l'instant, je vais simplement publier cette page à propos et ici j'ouvrirai le tableau de bord WordPress dans une nouvelle fenêtre, et à partir de là, je vais aller au modèle et enregistrer modèle ici, je vais aller à la section et dans la section, cliquer sur ajouter une nouvelle section ici, sélectionnons le type de modèle, section de passe et ajoutons le nom. J'ajouterai le nom en tant que section héros pour les sous-pages et je cliquerai sur créer un modèle Je vais simplement supprimer cette bibliothèque car nous n'en avons pas besoin. Maintenant, si nous vérifions la section à propos du héros de la page et la page d'accueil principale, la session Hero est assez similaire. Nous pouvons simplement copier cette section depuis la page d'accueil. Faisons-le. Encore une fois, je vais ouvrir le site Web dans une nouvelle fenêtre et cliquer ici sur Modifier avec un élément de, puis cliquer avec le bouton droit de la souris et cliquer sur Copier. Passons à la section des modèles, à la section héros du modèle de sous-page clic droit et à un clic sur Coller Et ça colle comme ça. Maintenant, ce que nous devons faire, c'est supprimer les choses inutiles. Tout d'abord, si nous allons ici, non, pas ici, si nous passons au design Figma, nous pouvons voir la hauteur La hauteur est de 600, alors sélectionnons le conteneur et ici il en a 800. Je le fais juste 600 et puis ici nous n'avons pas de bouton, alors retirons le bouton, supprimons-le. Maintenant, l'image de fond. Nous avons ici cette image de fond. Je vais cliquer sur l' image d'arrière-plan et sur Exporter, changer en JPEG, puis cliquer sur le bouton Exporter. Passons maintenant à tiny png.com et diminuons la taille de ce fichier pour cette image de couverture Maintenant, je clique sur le bouton JPEG pour le télécharger ici, allons-y dans le style d'un conteneur. Changeons cette image. Cliquez sur l'image et nous avons l'image et elle vient d'être téléchargée. Ici, ajoutons simplement le texte ALT ou l' ancien texte et cliquez sur Conselect, il vient d'être ajouté comme ça. Nous n'avons rien à faire et maintenant cliquez sur Publier Nous avons maintenant ce modèle et si nous allons la page A et que nous cliquons sur l'icône de ce dossier, nous pouvons voir notre modèle dans ma section des modèles. Actuellement, nous n'avons pas section héros pour le modèle de sous-pages, donc je repasserai la page. Lorsque je la recolle ici, nous avons une section héros Je peux simplement cliquer sur Insérer puis sur Appliquer. Juste comme ça, il suffit d'ajouter. Il ne nous reste plus qu'à changer le texte. Vous voyez, c'est la puissance de l'élément ou du modèle. Passons au design de Pigma et copions le titre. Venez ici, placez le titre ici et la description, copiez la description et collez cette description comme ceci. Sympa. Cependant, si nous vérifions la description, il y a ici un petit espace comme celui-ci. Faisons-le pour cela, nous pouvons ajouter R ici, nous devons l'augmenter et ajoutons R ici. Ensuite, ajoutons R ici, puis encore une fois, nous devons ajouter R après cette prise. Allons ici, ajoutons B comme ceci. OK, plutôt bien. Maintenant, je clique sur C publish pour enregistrer. OK. Passons maintenant à la section suivante. Cette section est également similaire à cette section. Nous pouvons simplement copier cette section depuis la page d'accueil et l'ajouter ici. Faisons-le. Voici notre page d'accueil et je vais simplement cliquer sur cette section le bouton droit de la souris et cliquer sur Copier. Ensuite, sur une page, cliquez ici et cliquez sur Coller. Cliquez avec le bouton droit de la souris et cliquez sur Coller. OK. Et pour le moment, nous n'avons pas besoin de cette boîte d'image, je vais donc la sélectionner et la supprimer. Nous n'avons pas besoin de celui-ci. Il suffit de le sélectionner. Supprimez-le. OK. Maintenant, c'est plutôt bon et nous devrons peut-être modifier certaines choses que nous vérifions ici, nous n'avons pas deux boutons. Nous n'avons qu'un seul bouton. Supprimons ce sous-bouton, et si nous vérifions la taille de l'entrée, la taille intermédiaire est de 60, et que nous cliquons sur le conteneur principal et sur l'écart entre les colonnes 60, nous n'avons rien à faire et nous nous contentons de copier le texte d'abord comme ceci, puis de copier le second texte, copier ici, puis de copier le second texte, de le copier ici, puis de copier ce Je vais cliquer sur ce texte et cliquer sur Condo Bigate. Ici, je vais juste ajouter ce texte et ici, nous devons ajouter le bouton de demande de rendez-vous. Ajoutons-le ici Une fois que nous aurons complètement conçu ce site Web, nous créerons des actions pour ces boutons. Pour l'instant, ajoutons une balise de hachage à ces liens, et maintenant nous devons changer cette image Sur le style d'image, nous n'avons rien. Je vais donc simplement cliquer sur cette image et cliquer sur Exporter et le type de fichier est PEG, puis aller sur Ti PNG, ajouter l'image et radio la taille du fichier comme ceci, puis venir ici. Choisissez une image sur l'image comme celle-ci, puis copiez l'ancien texte comme ceci et cliquez sur Masquer. Il vient d'être ajouté comme ça et nous n'avons rien à faire Nous devons maintenant passer à la section suivante et la création de la section suivante est également assez simple. C'est ainsi que lorsque nous créons la page principale, nous pouvons simplement copier le contenu à partir de là. Je peux donc cliquer avec le bouton droit sur cette section à propos et cliquer sur Condupl. Maintenant, je peux cliquer sur le conteneur, cliquer sur ce conteneur à l'intérieur du conteneur principal et le mettre en place comme ça Maintenant, changeons le texte. Ici, changeons d'abord ce texte comme ceci, puis copions ce texte et passons le texte. Encore une fois, nous devons ajouter sumin ici, alors copiez le titre tum, dupliquez-le et collez-le Maintenant, une vignette, changeons ce texte en sude, comme ceci. Ensuite, nous devons ajouter la liste des sous-titres. Cliquez sur Ajouter un élément et une liste de recherche. La liste d'icônes fonctionnera, ajoutez-la comme ceci. Et ici, je vais supprimer les éléments et ne conserver qu'un seul élément , puis cliquer sur ce texte pour le modifier, le copier, puis le coller. Cliquez maintenant sur cette icône et nous avons ce cercle. Cliquez sur Insérer pour l'insérer et passez à Style sur style, la couleur de l'icône est la couleur primaire et voyons voir la taille de l'icône. La taille de l'icône est de 16 x 16. Faites en sorte que ce ne soit pas 60 ou 16 ans. L'écart voit l'écart, augmentez-le, appuyez et faites en sorte que l'écart soit huit, passez à huit et, dans le texte, changeons de couleur pour adopter cette couleur de typographie Voyons voir si ce texte est de la typographie afin que nous puissions conserver les styles de texte, la typographie ou le paragraphe comme celui-ci OK. Maintenant, je dois simplement dupliquer ces éléments plusieurs fois et ajouter le contenu. Il suffit de copier le contenu, de le baser ici et de le copier Ici, copiez ce contenu et copiez celui-ci, transmettez-le. Maintenant, changeons la taille intermédiaire, ici l'espace entre les deux. Voyons l'espace entre et c'est 20. Faisons de l'espace entre 20. OK. Sympa. Maintenant, nous devons ajouter ce copier-coller qui a le même goût et nous n'avons pas besoin du bouton, supprimez-le. Ok maintenant, voyons voir. Nous devons maintenant ajouter cette image pour l' exporter au format JB EG, cliquer sur le bouton Exporter notre mission d'exportation pour l'exporter Ensuite, sur un petit PNG, ajoutez le PNG comme ceci. Cliquez ensuite sur JPEG pour télécharger cette image . Passons maintenant À propos », cliquez sur cette image et cliquez sur « Choisir une image » ici, ajoutons simplement l'image. COVID, surmonte-le comme ça. Cliquez maintenant sur Sélectionner Nice. Maintenant, ce qu'il faut faire. Nous avons maintenant cette catégorie avec la description du prêt. Alors faisons-le. C'est assez simple car nous avons déjà cette section sur la page d'accueil, mais il y a quelques modifications, mais nous n'avons besoin que de ce design. Je vais donc simplement copier toute la section à partir d'ici , passer à la page et coller le contenu, et ici nous n'avons pas besoin de celle-ci. Supprimez-le car il n' y a pas de bouton ici, OK. Maintenant, recopions le titre. Je pense que le titre est le même. OK. OK. Nous n'avons plus besoin de cette fonctionnalité de carrousel En fait, nous pouvons résoudre ce problème très facilement avec une grille, pas avec des colonnes. Alors essayons. Je clique sur Ajouter un élément et j'ajouterai une grille comme celle-ci lors du réglage de la grille, je définirai également la masse de la colonne, la ligne sera de deux et les écarts seront de 20 comme ça. Alors ce que je peux faire, c'est ajouter ces étoiles. abord, nous avons la vraie grille en haut Je vais donc cliquer ici et l'ajouter comme ceci. Ensuite, à partir de là, je vais voir cette zone d'image et je l'ajouterai comme ça sur la grille, je vais supprimer la marge et les garnitures et maintenant ajoutons celle-ci ici Encore une fois, nous avons celui-ci, puis celui-ci et maintenant nous devons augmenter le nombre de lignes de la grille. Cliquez sur le béton, passez à la mise en page, remplacez la ligne par trois lignes et ajoutez-les comme ceci. Maintenant, je pense que nous ajoutons Dt I will mother carrousel, cliquez ici, cliquez sur Condolete et nous n'avons pas besoin de celui-ci, donc je vais simplement le supprimer aussi donc je vais simplement le supprimer OK. Maintenant, tout est parfaitement aligné et nous n' avons rien à faire. Cela apparaît comme ça et maintenant nous devons modifier le contenu. Cliquez sur le cadre de l'image et sur un style modifiez l'alignement vertical. Haut. Et maintenant, ajoutons ces détails supplémentaires. abord, nous avons le texte de la description, ajoutons-le comme ça et ajoutons le BR, je pense que cela devrait fonctionner et ajoutons un autre BR, d'accord, sympa. Et maintenant, ce texte devrait être légèrement agrandi pour y parvenir. Nous pouvons simplement ajouter une balise B comme celle-ci. Je pense que ça ne marche pas. B. Cela ne fonctionne pas, nous ne pourrons pas utiliser la zone d'image car nous avons cette ligne supplémentaire, nous devons donc la créer à partir de scribe ou nous pouvons utiliser du CSS, mais ajouter du CSS est le moyen le plus simple Ajoutons le CSS et voyons ce que nous pouvons faire. Je vais donc d'abord copier ce texte et le remplacer, et comme je l'ai fait auparavant, je vais ajouter deux lignes de rupture BRO comme celle-ci et ici j'ajouterai une nouvelle balise appelée span. Il s'agit d'une balise TML et d'un flash span pour fermer la balise span, et ici je vais ajouter le sous-titre class equal cgory box OK. Sympa. Maintenant, c'est un SMLC Classe TML que je viens de créer, je vais donc la copier et cliquer sur Publier Ici, je vais passer à la conception Web personnalisée aux États-Unis ou je vais aller sur le tableau de bord de notre site Web et ici nous avons une apparence et cliquer sur Personnaliser Lors de la personnalisation, nous pouvons ajouter des ESS supplémentaires. Pour ajouter de l'ESS supplémentaire, je peux à nouveau copier le CSS et revenir ici, ajouter un point parce que c'est une classe et des crochets comme celui-ci, puis j'ajouterai la taille de police comme nous allons voir, voyons voir. La taille de police est de 20, 20 x. Je pense que cela devrait fonctionner maintenant. Passons à la page à propos supprimons cela et voyons si cela fonctionne ou non OK, ça marche. Ce texte est plus grand que le texte de la fenêtre pour le confirmer, je vais ouvrir cette nouvelle fenêtre et vérifier, accord, allez dans Inspec et celui-ci Sur Inspec, nous avons span et ici nous avons notre classe CSS. Si je fais vraiment la même taille, non, c'est la même taille, donc nous n'avons pas besoin de le faire. Ces deux articles disent que celui-ci devrait être 21. Ici, je dois en faire 21 comme ça et cliquer sur Publier. Maintenant, si je regarde d'ici, nous devrions voir le Test 21, cliquer ici et ici nous en avons 21 et voir la différence, sympa. Nous pouvons maintenant faire de même pour le reste de cette boîte d'image. Cliquez ici et collez ce texte et passons à l'espace où se trouve le contenu réel Pour obtenir le vrai contenu, je vais accéder à notre fichier texte de contenu et au texte à partir de là. 71. 0708 conception à propos de la page partie 02: J'ai les catégories avec une petite et une longue description. Donc, le premier que nous avons déjà créé, puis nous avons la santé des femmes, copiez le texte et voici intéressant Je pense que ça nous manque. Passons donc à la page d'accueil. Et sur la page d'accueil, oui, nous ignorons simplement la femme, mais nous pouvons le faire parce que nous pouvons obtenir une forme parfaite avec ces six articles. Alors ignorons-le. Passons donc à ce dépistage médical et à ces soins préventifs. Et en petite description, je vais ajouter celui-ci dans description du prêt, ici nous avons la description du prêt. OK, alors nous avons les soins pédiatriques. Donc, pour les soins périatriques, je dois copier cette description et la coller comme ça, puis copier le texte, le texte En fait, nous ajoutons le même texte au premier élément, nous devons donc modifier le premier élément et modifier les détails du premier élément comme ceci, au rythme suivant. Nous avons maintenant cette cinquième icône. Allons-y, agissons comme ça, copions le texte. Il se peut que vous ne voyiez pas la partie que je copie dans le texte car je l'ouvre dans ma deuxième fenêtre comme ceci. Encore une fois, copiez tout ce texte et passez au subord mental, nous avons votre description OK. Le dernier. Copions le format à partir d'ici et collons-le. Maintenant, testez-le comme ça, copiez-le, collez-le comme ça. OK. Maintenant, nous devons placer cette image en haut comme alignement vertical en haut et nous devons le faire pour un élément, mais nous pouvons simplement écrire avec et cliquer sur copier et le type WriteLPaste coller ce type Oh, ce n'est pas une copie, alors cliquons ici et copions. Cliquez ensuite ici et collez ce type. Rien ne s'est passé. Passons au style. Oui, c'est arrivé, mais ça ne semblait pas être le cas. Allons ici et faisons-le comme ça. OK, cliquez sur publier et vérifions-le dans le design. Je vais ressembler à ceci et cela signifie que nous avons créé avec succès la section Designer About. Nous devons maintenant concevoir la section du bloc. 72. Cadre de rendez-vous de demande de conception 0709: Maintenant, en ce qui concerne notre design FICMA et le site Web, si quelqu'un visite le site Web et clique sur ce bouton d'appel à l'action, nous devrions avoir une page pour demander un rendez-vous Créons donc cette page afin qu'elle contienne un formulaire de demande de rendez-vous et une petite description. Passons donc à notre chat GPT et disons que nous n'en avons pas besoin. Disons que j'ai besoin de concevoir, copier le texte d'ici. page doit avoir un titre, un sous-titre et demande Exécutons ce code, et voici les détails. C'est bon. Voici les détails, et voici la petite description, et nous avons toutes les informations. Passons donc ici et nous pouvons simplement obtenir le cadre du formulaire de contact pour créer celui-ci, donc je vais dupliquer le I am like this Alors ici, changeons le titre, copiez-collez. Ensuite, sur le sous-titre, copiez le sous-titre et collez-le comme ceci. Maintenant, nous pouvons ajouter une petite description. Copions cette première partie et ajoutons-la comme ceci. Copiez ensuite ce texte et je vais le dupliquer, appuyer dessus, le faire glisser et le déposer comme ceci. Ajoutons ce contenu. Et ici, changeons ce texte en « sun subdding ». Il s'agira d'un paragraphe et non d'une hauteur, la largeur sera de remplir le conteneur comme celui-ci. Et ici, nous n'avons pas besoin cette section et nous n'avons pas besoin de cette section, nous n'avons besoin que de ce cadre et je vais augmenter la hauteur du cadre. En fait, je peux changer la hauteur à la moitié du contenu et Earl s'affichera ici. Je vais simplement augmenter comme ça et pour ce formulaire, mettons ce formulaire au centre du formulaire. Je vais le faire comme au centre et ces prises devraient être centrées comme ça. Dans ce bouton, il devrait également être au centre comme ceci. Donc, de cette façon, ajouter du centre ne semble pas une bonne chose. Donc, ici, nous avons un immense espace. Pour cet espace, nous pouvons ajouter une image car ce sera le moyen le plus simple de supprimer l'espacement E. Je vais sélectionner ici et ajouter cette image comme ceci et réduisons la taille de l'image. Ajoutons donc cette image à celle-ci. Augmentons-le comme ça. Et si nous le voulons, nous pouvons ajouter ce texte ici. Nous allons couper le texte et le coller ici. En fait, nous devons ajouter un cadre à ces deux éléments, alors appuyez sur Shift A pour obtenir une mise en page horizontale. Ensuite, placez ce texte ci-dessus, sélectionnez le texte et placez-le au-dessus. Ensuite, la largeur sera de moitié, pas de moitié. Ajustons le texte manuellement comme ceci. Et qu' en est-il de la taille intermédiaire ? La taille intermédiaire est deux bonnes. Et ce texte devrait également être placé ici, placer au-dessus comme ça et maintenant il semble beau, et maintenant ce que nous devons faire est relier le putter et de le placer Faisons en un, 220 comme ça, puis diminuons la taille. Et ici, changeons cette image. OK, dans la section des ressources, trouvez le dossier des images. OK, maintenant je clique ici et je sélectionne l'image vidéo. Ensuite, sur les images, vous verrez la première page de projet et de demande de rendez-vous. Et voici une image, cliquez sur Ouvrir et ajoutez-la comme ça OK, maintenant notre page de demande de rendez-vous est conçue et changeons le titre de cette page pour demander un rendez-vous. OK. 73. 0101 achat d'un hébergement et d'un domaine: Bonjour, tout le monde. Il est maintenant temps d'acheter un domaine et de l'héberger car nous avons besoin du domaine et hébergeur pour héberger notre site Web WordPress. Donc, choisissez d'abord le domaine. Il existe un site Web appelé taldls.com. Sur ce site Web, vous verrez toutes les promotions et offres des fournisseurs de domaines, et à partir de là, vous pouvez acheter un domaine qui sélectionne le meilleur Hostin et obtenir un domaine moins cher Ici, vous verrez un filtre. Ici, je vais rechercher notre nom de domaine en tant que conception Web personnalisée, et ici je dois cliquer sur vérifier que vous n'êtes pas un robot. OK, nous avons ici les domaines disponibles, et à partir de ce filtre de prix, je vais le mettre comme 1$ et voyons quel type de domaine nous avons pour 1$. Ici, nous avons domaine point S personnalisé 4099 de conception Web. Nom Jeep. Je vais donc choisir celui-ci dans le vaisseau spatial où nous pouvons obtenir le domaine point XYC pour Ici, je clique simplement sur Name Jeep et cela sera redirigé vers le nom jib Et ici, je peux rechercher le nom de domaine. Copions-le donc d' ici et collons-le. Cliquez ensuite sur Rechercher. Nous n'avons pas besoin du .com. Il nous faut des points. Ici, nous pouvons voir le point s, en fait, nous pouvons ajouter le point S. D'accord. Maintenant, nous l'avons pour 2,98 dollars. Il suffit de cliquer sur Ajouter à la carte pour ajouter à la carte. Maintenant, je clique sur Checkout et je peux ajouter le code promotionnel ici. Je vais donc aller ici et découvrons le code promo. Cette offre spéciale de 99€ est le code promotionnel. Il me suffit donc de le copier et de le coller ici, puis de cliquer sur Appliquer. OK, maintenant je dois me connecter au compte Name Jeep, en fait j'ai déjà un compte Name Jeep. Si vous n'en avez pas, vous pouvez cliquer sur Créer un compte gratuit et suivre les étapes. Dans mon cas, je vais cliquer sur me connecter, et j'ajouterai ici mon nom d'utilisateur et mon mot de passe. OK, je viens de me connecter au compte Namechp et ici, je vais ajouter le code promo, copier d'ici et le coller comme ça Cliquez sur Appliquer, et maintenant le sous-total est de 0,99, et je vais décocher tous ces éléments, donc supprimez-les Nous n'avons besoin d'aucun de ces trucs. Je peux maintenant cliquer sur Confirmer la commande. Avant de confirmer la commande, je vais aller sur namjb.com, et actualisons-la et actualisons-la Ensuite, nous pouvons sélectionner l'hôte en cliquant sur cet hôte et en cliquant sur Hostin partagé Et dans Name GP, nous pouvons obtenir ce package iStlla and I Stellar plus pour concevoir et développer notre site Web WordPress Dans le package ISTLLA, nous aurons fonction de courrier électronique et nous aurons un Go, SSD Dans le iTLLARPlus, nous aurons un domaine illimité. Cependant, il y a une limite, même si elle est illimitée, elle n'est jamais illimitée. Je pense que c'est juste un truc marketing. Cependant, ici, nous avons une boîte aux lettres illimitée et nous avons cette fonction d'autobup. Cette fonction d'autobup est très puissante, et je vous recommande de choisir ce compte iTellarPlus si vous souhaitez utiliser le nom de serveur bon marché pour le nom de serveur bon marché Il existe donc actuellement une offre Black Friday. C'est pourquoi le montant est si bas. Cependant, Namecheap est toujours fournisseur d' hébergement le moins cher et le moins cher Et ici, nous pouvons définir la facturation mensuelle ou annuelle. Si nous le fixons comme mensuel, cela coûtera autant. Cependant, je l'ai défini chaque année, et maintenant nous pouvons l'obtenir pour 22,80 0,08$ et nous pouvons le renouveler après année pour 44,88 Alors maintenant, je clique sur Commencer et ici nous le définissons comme nouveau domaine et nous cliquons sur déjà dans la carte et notre coût total sera de 23,80 0,07 Maintenant, je peux cliquer sur. Ajouter au panier et ici je peux cliquer sur confirmer la commande. Cependant, j'héberge déjà Tears, donc je n'ai pas besoin de cet hébergement me suffit donc de cliquer sur l'icône de cette clause et je n'ai besoin que du domaine. Vous pouvez également obtenir un domaine auprès de ces autres fournisseurs. Et si nous allons sur ce domaine XYZ sur un vaisseau spatial, nous pouvons rechercher le nom de domaine ici et continuer Mais pour cela, je vais choisir le nom GIP, et maintenant je clique sur Confirmer la commande et je continue l'achat, chose très importante avant d'acheter le domaine, vérifiez toujours le texte du domaine Si vous achetez un domaine avec un texte ou des caractères erronés, il ne représentera pas votre marque. Vérifiez donc toujours le texte de votre domaine. Si vous recherchez un domaine tel que la conception Web personnalisée, vous verrez que ce domaine est déjà pris, qui signifie que nous pouvons obtenir ce domaine et au lieu d'obtenir ce domaine, nous pouvons obtenir ce type de domaine. Ainsi, lorsque nous obtenons un domaine, nous devons toujours vérifier il s'agit d'un domaine de premier niveau ou pour ce faire, vous pouvez simplement effectuer une recherche sur Google si nous voulons un domaine XYZ à points B, nous pouvons rechercher un domaine de premier niveau du domaine XYZ Ensuite, il est indiqué que XYZ est un nom de domaine de premier niveau, et de cette façon, vous pouvez découvrir le nom de domaine ouest, mais les noms de domaine les plus courants sont le point .com. Organisation Dot. Si c'est le cas, c'est point co point k, comme ça. Il est très important d'obtenir un domaine de premier niveau , car Google et les autres moteurs de recherche classeront les domaines de premier niveau plus facilement que de simplement classer certains domaines de bas niveau. Je vous verrai donc une fois que j'aurai terminé le processus d'achat du domaine. OK. Maintenant que nous avons le nom de domaine, et maintenant nous devons changer le DNS pour changer le DNS, je vais cliquer sur Gérer le DNS suspendu signifie que nous devons configurer le domaine avec le serveur. Et voici le nom Chief Basic DNS. Je vais le changer pour le nommer Chief Web Hosting DNS. Ensuite, je vais cliquer sur ce savy et ça change. OK. Il ne nous reste plus qu'à passer au panneau C. Je vais héberger dans la liste, et dans la liste d'hébergement, voici notre hôte. Nous passons donc au panneau C, puis-je simplement cliquer dessus et il sera redirigé vers le panneau C. type de domaine ou de fournisseur d'hébergement que vous choisissez n'a donc pas d' importance . Les panneaux A C ont les mêmes fonctionnalités. Je vais donc faire défiler la page vers le bas et nous avons ici une section de domaine, suffit de cliquer dessus et maintenant, à partir de là, je clique sur, créer un nouveau domaine. Voici le nom de domaine défini, il suffit de cliquer sur, de créer un nouveau domaine, puis d'ajouter le nom de domaine, copier le nom de domaine et de le coller comme ceci. Ensuite, sur le serveur d'hébergement, il créera un nouveau point de conception de site Web personnalisé Fold Call. D'accord, nous aurons donc un sous-domaine. Alors maintenant, je clique sur le bouton Soumettre. OK, le domaine a été créé avec succès. Donc, si je clique ici et que je vais sur le site Web, cela ressemblera à ceci. Dans le nom G, nous avons un certificat presl pour un proche. Ainsi, lorsque nous cliquons ici, nous pouvons voir la connexion Cece, ce qui signifie que le certificat SSL est correctement configuré et que notre URL est TTPS Alors maintenant, Earl Wood, si vous n'avez pas obtenu cette page, attendez cinq à dix minutes et cette page apparaîtra. OK. Il ne nous reste plus qu'à installer WordPress dans le domaine. 74. 0102 installation wordpress nouvelle: Bonjour, tout le monde. Il est temps d'installer WordPress. Je vais sur le panneau C et dans le panneau C, nous avons l'installateur de l'application Soft Tacular Il suffit de cliquer dessus et voici Wordpress et à partir de là, je clique simplement sur Installer. Et maintenant, je dois sélectionner les détails. abord, je vais sélectionner le protocole TTP, sans ce point www, donc uniquement le protocole TTP, puis je sélectionnerai le nom de domaine Voici donc notre nom de domaine et ici je vais choisir la dernière version du Wordpress et je n'ajouterai aucun répertoire. Je vais simplement installer WordPress dans le dossier racine, et ici nous pouvons modifier le nom du site et la description du site. Mais changeons ces ITA pendant que nous concevons le site Web. Pour l'instant, gardons ces choses telles quelles. Et ici, nous devons ajouter le nom d'utilisateur administrateur et le mot de passe administrateur. J'ajouterai ces informations et j'ajouterai également un mot de passe. Assurez-vous de vous souvenir de votre nom d'utilisateur et de votre mot de passe, car vous devriez avoir à utiliser ce nom d'utilisateur et passe pour vous connecter au Wordpress. À partir de là, je remplacerai cet e-mail d' administrateur par un e-mail de travail, car cet e-mail ne fonctionne pas actuellement . OK, faites défiler l'écran vers le bas et ici je n'ai pas besoin de plugins supplémentaires. Supprimez les plugins supplémentaires et cliquez maintenant sur ce bouton d'installation et l'installation de WordPress sur le site Web commencera . D'accord, Wordpress a été installé avec succès et à partir de là, je peux cliquer sur cette URL et accéder au site Web de WordPress dans l'URL d'administration, je peux accéder à Wordpress comme ça. À partir de là, je clique simplement sur non, je ne veux pas essayer un processus de configuration ET, et voici notre tableau de bord WordPress. Pour accéder au tableau de bord WordPress, nous pouvons simplement accéder à l'URL de notre site Web, puis ajouter WP Admin à la fin de l'URL du site Web. Voici maintenant à quoi ressemble notre site Web. Dans la leçon suivante, nous allons nettoyer le Wordpress et supprimer les éléments inutiles de notre site Web WordPress. 75. Nettoyer Wordpress: Bonjour, tout le monde. Lorsque nous installerons WordPress pour la première fois, il y aura des éléments inutiles. Supprimons-les donc. Commençons d'abord par le plugin. Allez ici et cliquez sur Installer les plugins. Ici, nous avons trois plugins . Je les sélectionne tous clique sur Désactiver puis sur Appliquer Ensuite, sélectionnez-les tous cliquez sur Supprimer, puis sur Appliquer. D'accord. Passons ensuite aux thèmes. Nous avons ici trois thèmes. Actuellement, le thème actif est de 20 à 25, cliquons sur le reste des équipes et supprimons-les comme ça. Fais-le aussi pour celui-ci. Passons maintenant aux commandes et voici une autre commande, cliquez sur Corbeille, allez dans corbeille et cliquez sur Supprimer définitivement. Passons aux pages et aux pages Earl. Ici, je vais conserver cette seule page de politique de confidentialité et supprimer la page d'exemple. Accédez également à l'onglet Corbeille et cliquez sur Supprimer définitivement. Et voyons la médiathèque. Actuellement, nous n' avons aucun média puis nous passons à l' article Earl post, et nous avons ici Hello WordPOS cash Accédez à la corbeille et cliquez sur Supprimer définitivement. D'accord. Maintenant, je vais passer au tableau de bord et sur le tableau de bord, je vais ignorer ces informations parce que nous n'en avons pas besoin pour le moment. D'accord. Maintenant, nous avons un site Web WordPress fraîchement installé et nous sommes prêts à concevoir des sites Web personnalisés à l'aide de WordPress. 76. Guide pratique de WordPress: Bonjour, tout le monde. En fait, j'oublie de créer l' œuvre WordPress par le biais de vidéos. Alors faisons-le maintenant. abord, je vais me déconnecter juste ici et cliquer sur Déconnexion pour me connecter au site Web WordPress, nous pouvons ajouter une barre oblique après l'URL du site Web et sur wp admin Ensuite, nous arriverons à cette page de connexion Wordpress, où nous devons ajouter le nom d'utilisateur et le mot de passe du site Web Wordpress que nous avons enregistré. Cliquez ensuite sur Se connecter et je suis maintenant sur le tableau de bord WordPress. Sur le tableau de bord de WordPress, nous avons ici ce logo Wordpress, et à partir de là, nous pouvons consulter la documentation et en savoir plus sur Wordpress, puis nous avons la page d'accueil R. Si nous cliquons simplement ici, il sera redirigé vers la page d'accueil du site Web. Je vais cliquer sur puis nous avons une section de commande. Actuellement, nous n'avons aucune commande. WordPress est le meilleur outil de connexion. C'est pourquoi nous avons ce type de section de commande. Ensuite, ici, nous avons une nouvelle icône de menu et en survolant la nouvelle, nous pouvons créer des pages multimédias et créer des utilisateurs. Également sur le côté droit, nous aurons des détails sur notre profil d'administrateur. Je passe donc le curseur dessus et je clique sur cet administrateur. D'accord, nous avons ici les détails du profil personnel. À partir de là, nous pouvons changer la couleur d'administration. Par exemple, si je sélectionne cette couleur, elle changera comme ceci et cela changera comme ça, mais j'aime bien la couleur par défaut. Et ici, nous pouvons ajouter notre prénom, nom de famille et notre surnom, ici nous pouvons ajouter notre e-mail. En fait, l'e-mail sera déjà configuré. Ensuite, l'URL du site Web est définie comme l'URL de notre site Web actuel, car nous sommes le super administrateur de ce site Web. Ensuite, nous pouvons ajouter des détails sur nous-mêmes, et nous pouvons également ajouter une photo de profil. Pour ajouter la photo de profil, nous devons nous enregistrer avec un compte Gravata Si vous cliquez ici, je vais cliquer avec le bouton droit de la souris et cliquer sur Ouvrir une nouvelle fenêtre. Ici, nous pouvons cliquer sur GT Data maintenant et créer notre compte Gravita Pour l'instant, je vais garder le même et ici nous pouvons changer notre mot de passe, cliquer sur Définir un nouveau mot de passe et ajouter votre mot de passe ici, puis cliquer sur Mettre à jour le profil et je ne le ferai pas. Après cela, vous vous déconnecterez et vous pourrez vous connecter avec un nouveau mot de passe. OK, passons maintenant au tableau de bord et à la page d'accueil. Cliquons sur Live. OK. Et dans la section Mises à jour, si je clique simplement sur Mises à jour, nous pouvons voir les plugins, les thèmes et la mise à jour de la version de Wordpress. Notre site Web est actuellement à jour. Et lorsque vous apportez des mises à jour à votre site Web, procurez-vous toujours des sauvegardes, puis nous avons une section de publication. Donc, si je clique sur ErlFost ici, nous pouvons cliquer sur ADNWPost et cliquer sur Adnew et ici nous pouvons ajouter le titre comme celui-ci, et ici nous pouvons ajouter des détails, et nous pouvons et Mais à l'avenir, nous ferons ce genre de choses pour le moment. Découvrons la familiarité de l'interface. Je vais simplement cliquer sur Lu et revenir en arrière et ici, les posts que nous avons déjà publiés seront affichés. Ensuite, nous avons des catégories et dans les prochaines leçons, nous passerons en revue les catégories et, dans les médias, nous pourrons voir les images, les vidéos et les documents que notre site Web contient dans cette section multimédia. Ensuite, nous avons des pages. Dans les pages A, nous avons actuellement une page de politique de confidentialité. Si je clique sur Aperçu, cela ressemblera à ceci et si nous voulons le modifier, nous pouvons simplement cliquer sur Modifier et modifier ces détails comme nous le souhaitons. Mais pour l'instant, passons uniquement en revue le personnel. Encore une fois, je vais aller au tableau de bord, puis nous avons la section des commandes et il affichera les commandes que nous recevons pour notre publication, puis nous avons la section apparence. Actuellement, dans la section apparence, nous n'avons pas beaucoup de détails car nous configurons uniquement l'équipe par défaut de Wordpress 2025 et à l'avenir, nous en apprendrons plus dans la section des plugins. Nous aurons les plugins nous avons besoin pour concevoir ce site Web. À titre d'exemple, nous allons utiliser Element Pro pour concevoir notre site Web. Element or Pro est un plugin. Si je clique sur Ajouter un nouveau plugin et que je peux voir les plugins ici, puis si je recherche ici élément ou présentateur et que cet élément ou que cet élément plugin de création de site Web est apparu, et ici il est indiqué pour la dernière fois qu'il mis à jour il y a une semaine et qu'il est compatible avec la version de notre site Web WordPress il est écrit design elemento.com, et nous pouvons simplement cliquer sur cette installation maintenant et installez le plugin, puis activez-le, et cette section du plugin installé apparaîtra . A partir de là, nous pouvons cliquer sur ce plugin de téléchargement. Et si nous téléchargeons le plugin sur notre site Web, nous pouvons simplement choisir le fichier et l'installer. Et ici, nous pouvons cliquer sur ERLser et ici nous pouvons voir les utilisateurs d'Earl que nous avons sur notre Donc, actuellement, nous n'avons que le super administrateur et le rôle est administrateur. Donc, si je clique sur nouvel utilisateur. Voici les informations que nous pouvons saisir. Ensuite, comme rôle, nous pouvons sélectionner son administrateur, son éditeur, son auteur ou son contributeur. S'il s'agit d' un éditeur, le rôle d'éditeur n'aura pas tous ces détails et il ne pourra modifier que des éléments tels que des pages, des publications, des commentaires Ensuite, nous utilisons des outils. Cette section d'outils n'est pas importante pour le moment, ignorons celle-ci. Ensuite, nous nous sommes installés. Dans set in, nous avons une section comme la rédaction générale, lecture dans la discussion et ici nous pouvons scanner les détails latéraux et il y a une autre section comme celle-ci. Pour l'instant, ce ne sont pas des points importants. Dans les prochaines leçons, vous en apprendrez plus sur ces paramètres et sur la façon de les remplacer si vous le souhaitez. Vous pouvez consulter le tableau de bord WordPress et savoir plus sur le tableau de bord J'espère que vous avez une compréhension de base de la presse de mots. Dans la prochaine leçon, commençons le design. 77. 0105 configuration elementor pro: Bonjour, tout le monde. Nous allons utiliser Elementor Pro pour concevoir notre site Web personnalisé, car Elementor est le meilleur constructeur de sites Web WordPress sur Elementor a une version préliminaire, mais ses fonctionnalités sont limitées Voyons les plans d'Elementor. Pour accéder à cette page, cliquez sur le lien dans la section ou la description des ressources, et vous serez redirigé vers cette page. Ensuite, nous avons un plan tarifaire. Le plan tarifaire recommandé est Advanced Solo Website Builder. Avec ce plan tarifaire, nous pouvons obtenir 118 budgets avant et pro, et il comporte 86 projets, mais avec le plan essentiel, nous n'avons que 57 projets. De plus, si nous allons sur le marché dans la section commerce électronique avec Advanced Solo, nous obtiendrons un générateur de fenêtres contextuelles. C'est une fonctionnalité que nous allons utiliser, et dans la marque Essential, nous n'avons pas beaucoup de fonctionnalités. Toutefois, si vous envisagez de concevoir plusieurs sites Web, vous pouvez passer au plan avancé. Ou si vous êtes un indépendant qui crée un site Web pour vos clients, vous pouvez acheter la version experte En choisissant ce type de plan, nous pourrons remplacer de nombreux plugins et modules complémentaires, ce qui contribuera à augmenter la vitesse de chargement des pages et à optimiser l' ensemble du site Web. Commençons donc par installer Elementor. Pour ce faire, je vais aller sur le tableau de bord de notre site Web, et ici je vais aller dans les plugins et cliquer sur AdNeu. Tout d'abord, nous devons installer le pré-plugin element. À partir de là, je vais rechercher Elementor. Ensuite, nous avons le plugin de création de site Web Elemento. Il est développé par elemento.com, et il est compatible avec notre version Wordpress Je clique donc sur Installer maintenant. OK. Puis je clique sur Activer. C'est bon. Maintenant, je clique sur Escape et je vais sauter ces étapes ou je vais cliquer sur ce bouton Fermer car nous allons configurer Elementor Pro à l'aide du site Web d'Elementor Encore une fois, cliquez sur l'URL de la section des ressources et vous serez redirigé vers cette page, et à partir de là, je cliquerai sur le bouton À l'heure actuelle sur le site Web Advance solo, plan Builder. Et ici, je vais devoir renseigner les détails. Ensuite, je cliquerai sur payer maintenant et j'effectuerai le paiement. Une fois inscrit avec succès, vous pouvez le télécharger à partir d' ici en cliquant sur ce bouton de téléchargement, ou vous pouvez accéder au bord Elementor en ajoutant ind elemento.com Et lorsque vous faites cela, vous verrez ce type d'icône de téléchargement, puis vous verrez l' élément se connecter à Télécharger, cliquez sur puis le téléchargement va démarrer et vous avez maintenant l' élément de plugin. Configurons maintenant notre site Web pour le faire. Je vais accéder au tableau de bord WordPress accéder aux plugins et cliquer sur Installer le plugin. Puis je clique sur Ajouter un nouveau plugin. Ensuite, je clique sur ce bouton de téléchargement de plug-in. Ensuite, je clique sur pour empiler, et voici le plugin Element Pro téléchargé. Il s'agit donc d'un fichier C. Il me suffit donc de le sélectionner et de cliquer sur Ouvrir. Ensuite, je clique sur Installer maintenant. L'installation prendra quelques minutes. OK. Ensuite, vous verrez cette fenêtre. À partir de là, il suffit de cliquer sur ce bouton d'activation du plug-in. Et il s'installera avec succès. Voici donc le plugin d'installation. Maintenant, je clique sur connecter et activer. J'arriverai ensuite à ce type de page. Je clique donc ici sur activer ma licence. D'accord, Elemento Pro a été activé avec succès, et maintenant nous pouvons utiliser les fonctionnalités de l'Elemento 78. Tableau de bord wordpress clair 0106: Bonjour, tout le monde. Sur votre tableau de bord WordPress, vous verrez ce type d'élément. Pour les supprimer toutes, vous pouvez simplement cliquer sur ces options Estren et décocher ici l'onglet Istab que vous n'aimez pas voir Ainsi, lorsque vous les décochez, vous ne verrez plus ces onglets En ce qui concerne les plugins, je vais passer à Installer le plugin. Il installe automatiquement le cache Light Speed sur le site Web. Voici un plugin de cache à vitesse légère installé sur mon serveur. Je vais cliquer sur Désactiver car pour l'instant nous n'avons besoin d' aucun plugin de cache Je vais le supprimer. OK, parfait. Commençons par concevoir le site Web dans la leçon suivante. 79. Présentation de l'éditeur d'elementor 0107: Bonjour à tous. Familiarisons-nous avec l'éditeur Elemento Créons donc une page. Je suis maintenant sur le tableau de bord de notre site Web WordPress, et à partir de là, je vais passer la souris sur les pages et cliquer sur Ajouter une nouvelle page Et ici je vais ajouter le titre en tant que page Taste. Nous avons donc ici une fenêtre contextuelle de modèles. Je vais le fermer, et ici j'ajouterai une page de dégustation. Ensuite, je vais cliquer sur cette modification avec le bouton Elemento. Lorsque je clique dessus, je suis redirigé vers l'éditeur Elemento Je vais sauter ceci pour le moment, et voici notre éditeur Elemento. Tout d'abord, je vais cliquer sur la page définie, et à partir de la page définie, je vais changer la mise en page en Elemento Canvas Ainsi, lorsque nous le ferons, cela nous donnera une page blanche que nous pourrons utiliser pour concevoir notre site Web personnalisé. Sur le côté gauche, nous pouvons voir les widgets que nous pouvons utiliser avec Elemento Pro Si vous avez un élément de pré-version, vous ne pourrez pas accéder à tous ces widgets. Vous pouvez simplement glisser-déposer n'importe lequel de ces éléments dans le canevas. Le canevas est cette zone vide. Pour l'instant, je vais fermer cet onglet de structure et si nous cochons sur cette barre supérieure, nous pouvons voir sur le côté gauche que nous avons une icône intégrée, alors cliquons sur Je clique dessus, nous passerons au réglage latéral. Dans ce paramètre latéral, nous pouvons modifier ou configurer principales options de notre site Web, par exemple, si je clique sur la mise en page et que si je clique sur la mise en page et largeur du contenu de la taille du bureau est actuellement de 1140 Si nous le changeons à 101 060, cela affectera l' ensemble du site Web, mais je le garderai par défaut Et si nous voulons ajouter un rembourrage en haut du site Web, nous pouvons simplement dissocier nous pouvons simplement dissocier cette valeur en cliquant sur cette icône de chaîne, et ici nous pouvons la définir sur 60 puis cliquer sur Enregistrer et maintenant je clique sur Retour à l'éditeur puis glisser-déposer un titre comme celui-ci et le titre tombera comme ici parce que nous avons 60 Donc, si nous revenons au réglage positions et que nous passons à zéro, le titre sera zéro Je vais maintenant cliquer sur Enregistrer les modifications et retourner dans l'éditeur. Ensuite, en cliquant ici, nous pouvons voir la structure du site Web. Actuellement, nous n'avons qu'un seul titre. Ensuite, nous pouvons ajouter des nœuds, il suffit de cliquer sur les nœuds, puis si vous souhaitez ajouter le nœud ou si vous pensez à une section, vous pouvez simplement sélectionner la section. Dans ce cas, je vais sélectionner ce titre et ici je peux taper node lie C'est pour tester. Ensuite, je peux cliquer sur quitter un nœud et ce nœud apparaîtra ici. Imaginez si vous travaillez avec l'équipe et que vous avez peu de designers qui travaillent sur des pages. En ajoutant ce type de nœuds vos co-concepteurs se connecteront au site Web et consulteront la page, ils pourront lire ces nœuds et comprendre très bien le design. Fermons celui-ci. Nous avons maintenant le nom de la page. Le nom de la page est page de test et elle est actuellement en brouillon. Si nous cliquons sur ce bouton publié, il sera disponible sur le site Web, mais il est actuellement en mode brouillon. Ensuite, nous avons cette icône, cette icône Jar pour accéder à ce paramètre de page. Si vous cliquez ici et modifiez les informations, cela affectera l'ensemble du site. Mais si vous cliquez ici et modifiez ces informations, cela n'affectera que le réglage de la page comme je l'ai fait auparavant en modifiant la mise en page. Nous avons alors trois points de vue. premier est l'ordinateur de bureau, second est la tablette et le troisième est le mobile. Par exemple, si nous voulons modifier cette taille de texte sur mobile, il suffit de cliquer sur le texte et accéder à Estyle puis de modifier la taille de la police En fait, je dois cliquer sur ce texte comme ça et aller sur Estyle et maintenant je peux changer sa taille comme ça Lorsque nous le ferons, cela n'affectera que le mobile. Si nous passons à la version de bureau, le texte sera le même et il en sera de même sur la version tablette. Version mobile, elle prend la taille que nous avions déjà définie. Je reviens maintenant à la version de bureau. Maintenant, la partie la plus importante est cette section étrange. Comme je l'ai déjà dit, nous pouvons utiliser ces fonctionnalités professionnelles sur l'élément Pro et sur la version préliminaire. Supprimons ce texte et créons la section. La première est là, il faut ajouter le container. C'est la bonne façon de créer le site Web. Je vais cliquer sur le conteneur et il va s' ajouter comme ceci à partir de ce conteneur, nous pouvons l'ajuster en détail. Pour l'instant, gardons-le par défaut puis j'ajouterai d'autres éléments pour ce faire. Je cliquerai ici, puis ajouterons le titre et cliquerons également sur cette icône plus et ajouterons un éditeur de texte comme celui-ci Maintenant, je clique sur le conteneur et actuellement sa direction est verticale. Il a une colonne, mais si nous cliquons sur horizontal, il passera à l'horizontale. Il existe de nombreuses options que nous pouvons utiliser pour concevoir un site Web parfait. Et voyons si nous voulons modifier ce texte. Nous pouvons cliquer sur cette icône en forme de crayon ou cliquer ici et cliquer sur Modifier, puis nous pouvons modifier le texte à partir d'ici. Je vais le changer comme Yellow Word. Ensuite, je clique sur le style et je vais changer la couleur de ce texte pour le moment, changeons-le en noir, et je vais changer ce type pour les épingles Grappy Pins est ma police préférée, et changeons sa taille à 60. Faisons en sorte que ce soit 60. Ensuite, je vais le changer en moyen. Peut-être que la normale sera plus belle comme ça, et nous pouvons changer la hauteur de la ligne cette façon et régler l'alignement sur la position. OK. Pour l'instant, supprimons cet éditeur de texte. Je clique simplement ici, puis je peux simplement appuyer sur le bouton Supprimer ou je peux simplement cliquer avec le bouton droit de la souris et cliquer sur Supprimer, comme ceci. Encore une fois, je clique sur le conteneur et ajoutons cette hauteur Mint 600 et la hauteur du conteneur devient 600. Ensuite, je clique sur ce texte et créons un centre de ligne Cliquez ici et faisons en sorte cela justifie le contenu en tant que centre. Et faisons de ceci le milieu pour le faire. Je clique sur ce centre comme ça. Et maintenant, nous avons deux lignes. Alors, réglons le problème. Pour y remédier, je vais aller dans l' Advance, et à l'avance, nous avons indiqué que cette largeur était personnalisée, nous pouvons donc cliquer sur le bouton par défaut et cela fera toute la largeur. Il y a donc beaucoup de choses à faire, et lors des prochaines leçons, nous utiliserons toutes ces choses et vous serez en mesure de créer une enseigne géniale. OK. Maintenant, voici notre simple bonjour au monde et maintenant, si je clique sur l'icône du panneau de hauteur, nous pouvons voir la vue réelle et nous pouvons également cliquer ici pour la récupérer. Et si je clique sur cette icône en forme de flèche et que je clique sur Afficher les pages, cela ne se met pas à jour. Cliquons sur publier et essayons de le consulter à nouveau. OK, je regarde ça. Si nous voulons une autre section, nous pouvons simplement cliquer ici et cliquer sur le conteneur pour y accéder comme ceci ou nous pouvons cliquer sur cette icône plus et cliquer sur Plex Box et sélectionner la structure. Si je veux ajouter une grille à deux colonnes, nous pouvons simplement cliquer ici et nous avons maintenant une colonne. Nous pouvons donc le faire manuellement. Par exemple, prenons ce conteneur, et je clique ici. Passons ensuite à Estyle et laissez-moi ajouter le type d'arrière-plan. Cliquez donc sur ce classique , changeons de couleur en bleu et cliquez sur Disposition. Dans Layout, je vais définir hauteurs de Mint, faisons-en à 300. OK. Et cette structure est un peu un casse-tête, donc pour y remédier, je vais simplement la mettre comme ça et je la fais simplement glisser vers la gauche du site et elle deviendra une section afin que nous puissions facilement vérifier la structure de notre site Web. Et à partir de là, nous devons ajouter ce type de deux colonnes pour ce faire. Je vais cliquer sur cette icône plus et ajouter un conteneur comme celui-ci. Maintenant que nous avons le conteneur à l'intérieur conteneur, nous cliquons avec le bouton droit de la souris et cliquons sur Dublgate, puis je peux cliquer sur le conteneur principal et le changer de direction en horizontal ou en horizontal et il devient simplement deux Et ici, nous avons un écart pour combler cet écart, je vais le réduire à zéro, et maintenant nous n'en avons plus. Maintenant, je clique ici pour sélectionner ce conteneur. Accédez à Style, cliquez sur Classique et modifiez la couleur. Modifions-le en couleur de l'écran et changeons ce totyle Passons à cette couleur de texte. Elemental Editor est un éditeur très simple à utiliser. Je clique donc simplement sur publier ou nous pouvons simplement cliquer sur cette icône d'aperçu pour prévisualiser les modifications. Nous pouvons cliquer sur cette icône ou sur l'icône d' aperçu et vérifier les modifications apportées par Elger dans la réalité . Dans les prochaines leçons, nous approfondirons l'éditeur élémentaire et en apprendrons beaucoup plus 80. Page 0108 elementor comingsoon: Bonjour, tout le monde. Maintenant, si le visiteur visite notre site Web, cela ressemblera à ceci. Et lorsque nous concevons des sites Web pour nos vrais clients et pour de vraies entreprises, c'est une très mauvaise impression pour la marque. Créons une page Come InSoonPage et définissons cette page Coming Zoon pour lancer notre site Web Pour ce faire, je vais sur le tableau de bord de WordPress et à partir de là, je passe au-dessus de l'élément et je clique sur les outils. Sur les outils, nous avons un onglet appelé Maintainers Mode. suffit de cliquer dessus et le mode de maintenance est actuellement désactivé. Nous pouvons donc cliquer sur cette case Db down et activer « Arrive bientôt », il y a une option de maintenance. Donc, dans l'option de maintenance, si nous l'ajoutons, cela affectera les moteurs de recherche et indiquera qu'il n'est pas recommandé d' utiliser ce mode pendant plus de deux jours. Ainsi, même si vous êtes en maintenance ou en création d'un nouveau site Web, sélectionnez toujours la page à venir. Ensuite, vous pouvez modifier le design. Par exemple, si vous devez effectuer une maintenance, vous pouvez concevoir un modèle élémentaire contenant détails sur la maintenance Maintenant, dans qui peut accéder, nous pouvons définir qui est connecté, ce qui signifie qui peut accéder au tableau de bord WordPress. Si nous le définissons comme étant connecté, n'importe qui peut se connecter au tableau de bord de presse en fonction de ses rôles. Mais si vous cliquez sur Personnaliser, nous avons ici la possibilité de choisir des rouleaux. Si nous sélectionnons uniquement le rôle d' administrateur, seuls les administrateurs peuvent se connecter au tableau de bord WordPress. Pour ce joint autoroutier, connectez-vous. Maintenant, nous pouvons choisir un modèle. Actuellement, nous n'avons créé aucun modèle, nous pouvons donc cliquer sur en créer un maintenant, Lien, je clique simplement dessus. Nous sommes maintenant dans la section des modèles. Dans cette section d'éléments ou de modèles, nous pouvons concevoir des mises en page et des sections, puis les enregistrer. L'avantage est que nous pouvons insérer ces mises en page et sections préconçues dans la conception de notre site Web WordPress Ici, je peux simplement ajouter le nom et cliquer sur Modifier avec elemento. C'est ce que nous allons faire. J'ajoute simplement le nom du modèle qui sera bientôt disponible, puis je clique sur Modifier avec elemento et il sera redirigé vers l' élément. À partir de là, je cliquerai sur cette page définie et définirai la mise en page en tant qu' élément ou canevas OK. Maintenant, ce que je peux faire, c'est cliquer sur cette icône plus et ajouter un nouveau conteneur, et je vais sélectionner la boîte Plex et notre mise en page sera verticale Je clique donc sur celle-ci, puis je clique sur le conteneur, et ici j'ajouterai le test de hauteur minimale Ajoutons 700 comme ça, puis je clique sur cette icône plus et ajoutons un titre Ajoutons simplement le titre comme celui-ci. Passons ensuite aux styles, je vais changer la couleur du texte en noir et définir l' alignement comme centre. Ensuite, pour ce qui est de la typographie, je clique sur cette icône en forme de crayon et je change la famille de polices en poppin Vous pouvez sélectionner toutes les polices que vous aimez, mais j'aime vraiment le fpin Je vais donc ajouter des tailles 60, puis j'ajouterai une taille normale comme celle-ci. Alors c'est bon et j' ajouterai du texte comme, cliquez sur cette icône en forme de crayon et cliquez sur le contenu, et je vais voir le texte comme si quelque chose de nouveau arriverait bientôt. Présent. Maintenant, je dois ajouter un paragraphe pour ajouter un paragraphe, je peux cliquer sur le bouton de cet élément publicitaire, et ici je vais obtenir un éditeur de texte comme celui-ci. Ensuite, j'ajouterai du texte comme si nous étions ravis de lancer notre tout nouveau design de site Web rien que pour vous. Ensuite, je vais le surligner, puis je clique sur cet outil Toggle Toolbg et faisons en sorte que le centre d'alignement Ensuite, je vais passer à Style, je peux créer le centre d'alignement à partir d'ici, puis je changerai la couleur du texte en noir et changerons à nouveau la typographie pour les fenêtres contextuelles Un set de 21 tailles. Ensuite, ce que je veux faire, c'est placer ces deux textes au centre pour ce faire, isoler le conteneur et dans la section de mise en page du conteneur, j'ajouterai le contenu de justification au centre comme celui-ci. Ensuite, je veux créer un logo en haut pour ce faire, je vais cliquer sur Ajouter un élément et ici sur l'image. Cherchons une image et nous avons ici une image et je vais la mettre comme ça. Ensuite, je dois ajouter le logo de notre entreprise. Je clique sur cette section de sélection d'image et ici je reconnais le fichier sélectionné, et maintenant voici le fichier Je clique simplement dessus et il est ajouté comme ça, puis je supprime ce titre et je passe le texte ALT. Le texte ALD sera le logo JB Family Phenic. Ensuite, je clique sur sélectionner Maintenant je vais dans Style et l' alignement sera au centre. C'est l'un des deux. Faisons en sorte qu'avec 30, 30, ce sera bien. Ensuite, je dois ajouter de l'espace entre ces deux sections. Pour ce faire, je sélectionne l'image, puis je clique sur Avancé et en mode avancé, je clique ensemble sur cette valeur de lien. Une icône de chaîne le reliera, puis je le ferai 30 comme ceci dans la marge inférieure. OK. Maintenant, en bas, j'ai besoin d'un lien vers un assistant maintenant. Pour ce faire, je clique sur cette icône plus et je clique sur le titre Mettons un titre comme celui-ci Alors changeons son design en ce design. Pour ce faire, je vais juste essayer de cliquer sur ce texte et de cliquer sur Copier. Ensuite, je clique ici et je clique avec le bouton droit de la souris, puis je clique sur Coller le style. Lorsque je colle ce style, le style que nous avons ajouté ici automatiquement ajouté au titre. Ensuite, je vais dans les styles E et je clique sur Typographie, puis je vais changer sa taille pour en faire 30 comme ça Ensuite, ajoutons un rythme ultérieur, par exemple 0,5, et maintenant je vais ajouter le texte comme si j'avais besoin d'un assistant . En fait, réduisons un peu le texte. Passons à 25 et la largeur sera moyenne. Maintenant, je veux ajouter deux textes comme appelez-nous au et envoyez-nous un e-mail à. Pour ce faire, créons une boîte à icônes. Pour ce faire, je clique sur Ajouter un élément et rechercher un widget comme une icône. Oui, nous avons ici une boîte à icônes. Je le fais tomber comme ça avec un chiffon. Comme ça, alors je peux le modifier à partir d'ici. Alors d'abord, changeons l'icône. Tout d'abord, je dois ajouter une icône de téléphone pour ce faire. Je clique ici et je lance une recherche par téléphone. Ajoutons cette icône de téléphone et cliquez sur Insérer. Ensuite, vous souhaitez ajouter un texte, par exemple appelez-nous à notre numéro de téléphone portable. Alors faisons-le. Je l'ajoute donc comme ça. Alors je n'ai pas besoin de la description. Je supprime simplement la description. Ensuite, changeons cette couleur pour changer la couleur, je clique sur le style et dans le style, clique sur l'icône et je change la couleur principale en noir, et la taille sera correcte Ensuite, sur le contenu, changez le titre en noir comme ceci. Nous pouvons donc changer de type de mansarde. Nous pouvons changer le type de gravité pour qu'il ressemble à des pop ins et faisons-le à 20. Alors ce sera normal. Maintenant, faisons-en un médium. Maintenant, ce que je veux faire, c'est ajouter l'emballage autour de cette boîte à icônes pour ce faire. En fait, avant cela, créons la deuxième icône, qui nous sera envoyée par e-mail. Pour ce faire, je peux simplement cliquer ici et dupliquer cet élément. Vous pouvez cliquer à juste titre sur Dupliquer. Ensuite, je vais changer l'icône du téléphone en enveloppe comme ceci. Ensuite, je vais nous envoyer un e-mail à notre adresse e-mail. Ensuite, je veux les ajouter à l'horizontale, mais actuellement c'est à la verticale. Pour ce faire, nous pouvons facilement cliquer ici et cliquer sur Nouveau conteneur. Et ici, je vais faire glisser les codes de la boîte à icônes vers le conteneur, afin que je puisse faire de même et de la deuxième boîte à icônes Ensuite, je sélectionne le conteneur et je définis la direction comme horizontale. Alors faisons-le justifier au centre et je changerai cet écart en automatique. En fait, allons-y. En fait, faisons-en un espace comme ça. Ensuite, je peux cliquer sur cette boîte à icônes et maintenant je clique sur Avancer , passer à bordure par bordure, nous avons une ombre de boîte. Je clique simplement sur cette icône en forme de crayon. Ajoutons ensuite des détails. Je vais faire en sorte que le flou soit égal à 15, que l'écart soit égal à zéro, et que la couleur soit un peu plus claire En fait, n' ajoutons pas d'ombre à la boîte, cliquez sur Retour aux valeurs par défaut. Au lieu d'ajouter l'ombre de la boîte, ajoutons une bordure pleine. Cliquez simplement sur la bordure et ici, ajoutons une taille par deux. Faisons en sorte qu'il en soit un. Ensuite, changeons la couleur de la bordure comme suit. Ajoutons ensuite la réduction de la bordure à 15. OK. Maintenant, nous pouvons faire une mise en page avancée et ajouter du rembourrage. Ajoutons Padin à 20 OK. Maintenant, ça va ressembler à ça. Ça a donc l'air plutôt incroyable, et faisons de même. Cliquons sur cette boîte d'icônes et nous pouvons simplement cliquer avec le bouton droit de la souris et copier, puis cliquer avec le bouton droit de la souris et coller un style comme celui-ci. Ensuite, je clique sur le conteneur principal et ici, mettons-le au centre, et faisons en sorte que l' écart entre les colonnes passe en troisième position comme ça. Faisons en sorte que ce soit plus accrocheur. Pour cela, nous pouvons changer les couleurs. Je clique donc ici et je vais sur EtyleSoeStyle, clique sur l'icône et je clique sur Puis je clique sur cet échantillonneur de couleurs. Maintenant, je vais changer cette couleur en bleu comme ceci. En fait, prenons la même couleur bleue que celle du logo. Ça. Je vais ajouter le code couleur bleu ici. C'est zéro, double, F. Et puis ce que je peux faire, c'est cliquer avec le bouton droit sur copier et coller le style comme celui-ci. Maintenant, cela ressemblera à ceci sur le site Web. Comme nous pouvons le placer au centre si nous ajoutons minuit comme zéro. Alors maintenant, cela ressemblera ceci et nous pouvons ajouter d'autres styles, mais pour le moment, ce sera mieux. Alors maintenant je clique sur publier. Comme nous pouvons changer le design sur la vue tablette et la vue mobile. L'affichage sur tablette est correct, mais sur le mobile, je clique sur ce mobile, puis changeons ce texte pour que la taille du texte soit 38 et le reste ira bien. Le reste du design ressemblera ceci et à l'avenir, nous en apprendrons plus. Mais pour l'instant, publions et si je clique dessus, je pourrai le consulter sur le site Web. Cela ressemblera à ça. Maintenant, je vais aller page du mode maintenance et ici je dois cliquer sur Enregistrer car maintenant, si nous vérifions, nous avons cette page à venir, suffit de cliquer dessus et de cliquer sur une modification. Donc, une fois que nous l'avons fait, le mode maintenance est activé. Je vais donc copier l'URL du site Web et essayer avec une nouvelle fenêtre de navigation privée, afin que nous puissions voir clairement le design Cela ressemblera donc à ceci. Donc, pour accéder au backend, il suffit de slash WP admin Ensuite, nous pouvons ajouter ici un nom d'utilisateur et un mot de passe. Ensuite, je clique sur Login. Une fois que j'ai cliqué sur Connexion, je suis redirigé vers le tableau de bord WordPress, et si je consulte la page d'accueil du site Web, pendant que nous nous connectons en tant qu'administrateur, pendant que nous nous connectons en tant qu'administrateur, nous verrons le vrai site Web apparaître au lieu d'une seule page. Donc, si nous devons modifier le fichier d'entrée, nous pouvons accéder à Modèles et cliquer sur Enregistrer les modèles. Sur Satemdates, nous avons la zone d'entrée Je peux donc cliquer sur Modifier avec Elementor et apporter des modifications à cette page d'entrée dans la zone que nous avons créée C'est donc un outil très basique, mais à l'avenir, nous en apprendrons davantage et utiliserons nos connaissances pour créer un site Web personnalisé qui attire l'attention et représente la valeur et l'identité de la marque. Et lorsque vous serez prêt à lancer le site Web, vous pouvez supprimer cette page de zone à venir en cliquant ici, et vous serez redirigé vers la page des outils et ici sur l'onglet du mode de maintenance, et à partir de là, vous pourrez utiliser le mode pour le désactiver Ensuite, vous pouvez cliquer sur Enregistrer les modifications lorsque vous cliquez sur Enregistrer les modifications, et copions l'URL, puis passons à la fenêtre Incognitor et appuyons sur Entrée et vous ne le ferez plus Je dois créer un logo lorsque vous vous déconnectez et passons à la page d'accueil et vous ne verrez plus la page de la zone à venir 81. 0109 comment WordPress et Elementor sont conçus par: Bonjour, tout le monde. Avant d'aller plus loin, il est important de comprendre un peu les fondements des sites Web WordPress. Ces sites Web sont principalement créés à l'aide de STMS, de CSS et d'autres technologies Web Lorsque nous travaillons avec Elementor, nous n'avons pas besoin de maîtriser le STML et le CSS, mais nous devons connaître quelques concepts clés. Par exemple, en TML, vous rencontrerez des éléments tels que H un, deux, trois, un paragraphe En CSS, vous entendrez des termes tels que marge, rembourrage ou marge supérieure, marge inférieure, rembourrage supérieur, rembourrage inférieur et identifiant CSS Les termes apparaissent fréquemment et savoir ce qu'ils signifient vous aidera à vous y retrouver. Vous n'avez pas besoin d'apprendre ces concepts de A à Et, Vous n'avez pas besoin d'apprendre ces concepts de A à Et devez simplement vous familiariser avec leurs noms et leurs options. Au fur et à mesure que vous utiliserez Elemento, vous comprendrez naturellement mieux leur fonctionnement Passons maintenant à quelques-unes des structures de langage de balisage HTML ou hypertexte de base que contiennent les sites Web Considérez-le comme le squelette d'un site Web. Par exemple, H un, H deux, trois, sont des balises de titre qui définissent l'importance du titre sur une page H un est généralement le titre principal tandis que H deux et trois sont utilisés pour le subhding à titre d' exemple dans Element of Canvas Je clique sur ce texte Helloworld, et si je vérifie la balise HTM ML, c'est Si nous le voulons, nous pouvons sélectionner H un, H deux, H trois comme ceci. Nous avons alors ici P. P signifie paragraphe. Cette balise est utilisée pour du texte. Par exemple, si nous cliquons ici et ajoutons l'éditeur de texte, ajoutons-le comme ceci, puis nous pouvons le voir ici sous forme de paragraphe, ce qui signifie qu'il s'agit d'une balise P. Ensuite, si nous voulons ajouter le lien comme celui-ci, je mettrai en évidence cette partie et cliquons sur ce lien d'édition en encart, ajoutons notre lien sous le nom google.com et appuyons sur Entrée C'est le tag A. Donc, si je change ce visuel en texte et que nous vérifions ici, voici un tag. Lorsque quelqu'un clique sur cette partie, il sera redirigé vers le google.com car nous ajoutons ce google.com comme lien de ce texte Ensuite, si nous voulons mettre cette partie en gras, je peux simplement la surligner et cliquer sur cette partie en gras. Ensuite, le design, le texte changent et si nous passons au texte, nous avons obtenu cette balise forte comme celle-ci. Nous n'avons pas besoin de le modifier avec l'éditeur SDML. Nous pouvons simplement le modifier visuellement. La seule chose que nous devons savoir sur ce que nous sommes. Si nous connaissons les bases de ce que nous faisons, cela nous aidera à maîtriser l'élément. Ensuite, nous devrions envisager le CSS basic. CSS signifie cascade dans la feuille de style. Il s'agit du style E. Il contrôle l' apparence de votre site Web, comme les couleurs, les polices et l'espacement, nous pouvons les organiser en utilisant du CSS Habituellement, nous pouvons modifier le CSS dans cet onglet Style. Par exemple, je clique sur le bouton en forme de crayon de ce titre et je clique sur style E. Voici le CSS ou le jeu de styles que nous pouvons appliquer au texte Par exemple, si je veux changer la couleur, je peux cliquer ici et changer la couleur pour quelque chose comme ça, pas comme ça, comme ça. Il s'agit d'une propriété CSS de ce texte que nous avons juste. Ensuite, nous pouvons modifier l'alignement. Dans ce cas, l'alignement ne changera pas et si nous le voulons, nous pouvons ajouter de l'ombre au texte ou voici la propriété de la typographie Nous pouvons le modifier comme bon nous semble. Lorsque nous les modifions, nous changeons le style CSS de l'élément. Ensuite, vous utiliserez principalement la marge et le rembourrage. Intégrez ou simplifiez tous ces concepts dans des paramètres visuels. marge est l'espace I à l'extérieur d'un élément comme un espace entre le titre et le paragraphe Padin est l'espace I à l'intérieur d'un élément situé entre le contenu et sa bordure Intégrez ou simplifiez tous ces concepts en statines visuelles Par exemple, pour ajuster l' ispace autour d'un élément, nous pouvons accéder à l'onglet avancé et nous avons ici la marge et le pad Démontrez-le clairement, je vais créer une nouvelle boîte flexible et créer ce conteneur de type colonne directe comme celui-ci. Ajoutons ensuite la couleur de fond. Cliquez ici et allez sur Is dies, puis cliquez sur Classic et ajoutons de la couleur rouge comme celle-ci. D'accord. Ensuite, je vais dupliquer en cliquant avec le bouton droit de la souris et en cliquant en double, puis je vais le faire glisser dans le conteneur que nous avons créé. Ensuite, je vais cliquer sur l'icône en forme de crayon en forme de titre et passer à son style. Changeons la couleur du texte en noir. De plus, je vais dupliquer celui-ci et le mettre dans le conteneur comme ceci. Changeons sa couleur en quelque chose comme le blanc comme celui-ci. Maintenant, le texte jaune se trouve à l'extérieur du conteneur. Pour y remédier, je peux ajouter une marge en haut. Faisons-le. Je clique ici et maintenant je suis sur le conteneur et je vais sur Advance. Voici la marge et Padin. Ici, je clique sur Lier la valeur ensemble et je la dissocie. En gros, ce qui s'est passé, c'est que si je crée un lien et que j'en ajoute dix en haut, cela s'ajoutera au reste du design. Mais mettons-le à zéro et si je veux seulement ajouter la marge supérieure, je peux l'ajouter comme ceci. La marge est l'espace situé à l'extérieur de l'élément. Quand j'ajoute une marge pour passer 60, elle se situe à 62 à l'extérieur du conteneur, et si je la fais de un à 20, c'est de l'espace à 120 pixels à l'extérieur de ce conteneur, et si j'ajoute une valeur négative, c'est à -120 pixels à ce conteneur Donc, si je veux ajouter du rythme à l'intérieur du contenant, je peux ajouter du rembourrage Dissociez les valeurs, puis j' ajouterai un rembourrage supérieur à 120. Quand je l'ajoute, j'obtiens ce type de rythme, et si je le fais vers le bas, cela en ajoutera 120 en bas et nous pouvons faire de même vers la droite et comme ça Faisons en sorte que nous puissions facilement comprendre ou voir visuellement les changements comme celui-ci. En fait, c'est trop. Faisons environ 200. 200 est visuellement attrayant, comme ça. D'accord. Maintenant, si je veux ajouter plus d'espace entre ces deux textes, je peux cliquer sur ce texte et passer à l'avance, et à l'avance, je peux ajouter une marge comme 60, pas au-dessus. En fait, je dois ajouter une marge inférieure. Donc, si j'ai besoin de plus d'espace, je peux ajouter plus de pixels en bas comme ceci. Je peux cliquer sur ce paragraphe et dans la marge supérieure se trouve 60 et cela s'ajoute au haut du paragraphe. Ainsi, une compréhension de base de ces concepts facilitera grandement le dépannage et la personnalisation. Par exemple, si un bouton ne s'aligne pas comme prévu, vous devez vérifier la marge de rembourrage définie Avec Nina CSS, nous pouvons comprendre et créer un site Web personnalisé plus facilement. 82. 0110 design 01 section héros partie 01: Bonjour, tout le monde. Concevons cette section dédiée aux héros avec Elemento Il s'agit donc d'une interface utilisateur Figma que nous avons créée lors de la conception personnalisée du site Web avec la partie Figma Consultez donc la section des ressources pour obtenir ce fichier communautaire Figma Convertissons donc ce design Figma en elemento. Pour cela, je suis sur le tableau de bord de WordPress. Je passe juste sur les pages, je clique sur Nouvelle page, et modifions-le en tant que Hero One. Ajoutons donc le titre de la page en tant que héros. Ensuite, je vais simplement cliquer sur Modifier avec Elementor. Alors je reçois ce message. Je le ferme simplement parce que nous allons concevoir un site Web personnalisé. Nous n'avons besoin d'aucun modèle prédéfini. Bon, nous en sommes maintenant à l'éditeur Elemento. Donc, d'abord, je clique sur ce paramètre de page et sélectionne la mise en page comme élément de canevas. Comme ça. OK, maintenant nous avons une toile transparente. Voyons d'abord la taille de cette section de héros. Je sélectionne donc la section du héros, et ici, sa largeur est de 1440 et sa hauteur de 700 Alors maintenant, je clique sur cette icône plus et ici je vais définir Flex Box. Ensuite, je vais sélectionner cette colonne de direction et obtenir une section de colonne comme celle-ci. Ensuite, je peux voir la propriété de ce conteneur, et à partir de là, je le ferai à une hauteur minimale de 700 fixels Ensuite, pour la largeur, nous pouvons étendre la zone de largeur du contenu sur toute la largeur Ensuite, j'ardoise un pixel, et la largeur est de 1 400 40. Disons donc ceci : 1 440 OK. Ça a l'air bien maintenant. Donc, à l'étape suivante, nous devons ajouter cette image de fond. Pour l'ajouter, je vais sélectionner l'image d'arrière-plan à partir d'ici. Voici l'image de fond. Ensuite, je clique sur Exporter et je définis le type de fichier en JPG avec une taille de 1,5 X, puis je clique sur Exporter en MD one et c'est juste le téléchargement. Cependant, le nombre de kilo-octets est vraiment élevé, réduisons la taille du Pour ce faire, je vais aller sur tiny png.com, puis je vais simplement le glisser-déposer ici Ensuite, avant de l'optimiser, il contient 580 kilo-octets, mais maintenant il n'en a que 74 Je clique ici pour le télécharger. Bon, maintenant, je vais aller l'élément ou l'éditeur et sélectionner le conteneur pour le modifier, puis aller dans Estyle In Estyles. Je vais ajouter Le type d'arrière-plan sera classique et nous avons ici la possibilité d'ajouter une image. Je clique simplement sur Choisir une image et maintenant je peux simplement faire glisser et voler cette image sur notre site Web comme ceci. Puis je clique sur Salt. Maintenant, cela apparaît comme ça et maintenant ce que nous devons faire est de sélectionner l'option d'image d' arrière-plan. résolution de l'image d'arrière-plan sera donc maximale et la position sera centrale, puis la pièce jointe défilera, ce qui signifie que lorsque nous faisons défiler le site Web, l'image défilera. Mais si nous faisons en sorte que ce soit corrigé, je appellerai pas l'image lorsque nous ferons défiler le site Web Faisons-le défiler. Ensuite, je vais le dire sans répéter, puis la taille de l'écran sera couverte comme ceci et cela ressemblera à ceci. Lorsque nous vérifierons l'aperçu du site Web, il ressemblera à ceci, mais il devrait couvrir toute la zone. Corrigez-le, je clique sur le conteneur et je passe à la mise en page. Alors changeons ce bit à 100 % comme ceci. Maintenant cela fonctionne comme ça, alors passons au réglage latéral, pas au réglage de page, au réglage latéral. Pour passer au réglage latéral, nous pouvons cliquer sur cette icône d'ensemble, et ici je vais passer à la mise en page sur la mise en page, nous 1 140, je vais en faire 1 440 Cliquez ensuite sur Enregistrer les modifications et fermez ici. Ensuite, si nous vérifions le design, il ressemblera à ceci, et si nous le vérifions dans l'aperçu, il ressemblera également à ceci. OK. L'ajout de la partie arrière-plan est maintenant terminé. En fait, nous pouvons masquer cette grille en cliquant ici et nous pouvons voir clairement le design. Il ne nous reste plus qu'à ajouter ce logo et le menu. Il y a peu de façons de le faire. Passons donc à la méthode simple et facile car nous sommes encore en train d'en apprendre davantage sur l'élément. Pour le logo, je vais simplement ajouter un texte comme celui-ci, puis changer le texte en logo. Passons maintenant à la propriété de ce logo. Isolez le logo, c'est un semi-bool 35 de chemin de fer contenant du texte et des polices Ajoutons ces détails. Je clique sur le titre et ici sur le style e, puis je change la couleur en blanc et je clique sur l' icône en forme de crayon sur Typographie, et ici je vais changer la famille de polices en chemin de fer comme ça Ensuite, avec ce demi-gras, la taille est 35. Voyons voir oui, la taille est 35 et la couleur du champ est le blanc. Nous l'avons déjà fait. Bon, maintenant que nous avons le logo, nous devons ajouter le menu. Donc, dans le menu, je clique simplement sur Adeleans et je recherche Et voici quelques éléments de menu. Nous allons donc simplement obtenir cette simple ancre de menu comme celle-ci. Et ici, nous devons ajouter les détails du menu. Actuellement, nous n'avons aucun menu, nous pouvons créer un nouveau menu. Avant de créer un nouveau menu, il me suffit de cliquer ici et de cliquer sur Enregistrer le brouillon pour enregistrer ces modifications. Ensuite, ajoutons le menu pour ajouter le menu, j'irai sur le tableau de bord du site WordPress et sur WordPress, nous avons la possibilité d'ajouter un menu en apparence, mais actuellement nous ne voyons pas mais actuellement nous ne voyons pas la partie du menu car nous n'avons pas sélectionné de thème. Ainsi, lorsque nous créons un site Web avec elemento, il est recommandé d'ajouter le thème Hello elemento Ajoutons-le donc. Je suis maintenant sur le tableau de bord et l'apparence de WordPress et je sélectionne le thème. À partir de là, je clique sur Ajouter un nouveau thème. Et ici je recherche l'élément Hello. En fait, voici le thème. Cliquons sur les détails et sur l'aperçu, et voici Hello element by elemento, cliquez sur Installer puis sur Activer Maintenant que nous avons ce thème, nous n'avons donc pas besoin de ce 20251, il suffit de le sélectionner et de cliquer sur Supprimer Voici maintenant notre thème. Maintenant, si je vérifie l'apparence, nous pouvons voir le lien du menu. Si je clique sur Menus, je suis redirigé vers cette page de menus. Mais pour le moment, nous n'avons aucun menu. Créons un nouveau menu. Appelons-le comme menu Hero, puis je clique sur Créer et je n' ajoute aucun emplacement d'affichage ou quoi que ce soit Lorsque nous concevons un vrai site Web, nous pouvons tous les couvrir. OK, le menu est maintenant créé. Nous pouvons donc maintenant ajouter des éléments de menu. À l'heure actuelle, nous n'avons pas de pass ou de catégories payants. Nous sommes les seuls à pouvoir ajouter des liens personnalisés. Sélectionnons donc les liens personnalisés, et pour l'URL, j' ajouterai simplement un hashtag Et pour le texte du lien, nous pouvons copier ces textes. Tout d'abord, je copie la page d'accueil et colle comme ça, puis je clique sur Ajouter au menu, et elle vient d'être ajoutée au menu. Créons ensuite le deuxième élément de menu. Il s'agit de nous, collez-le comme ça et dis-le comme ça. Ajoutons ensuite cet élément de menu comme celui-ci , ainsi que notre coach et notre tag C. Maintenant, notre menu est terminé, et il y a beaucoup de choses que nous pouvons faire avec le menu. Par exemple, nous pouvons ajouter éléments de sous-menu comme celui-ci, mais pour l'instant, restons dans un menu simple comme celui-ci et, dans le cas d'un vrai site Web, nous passerons au menu. Maintenant, je clique sur Enregistrer le menu. C'est bon. Maintenant, je passe à la section des héros et nous sauvegardons le brouillon. Je vais donc supprimer cette page Quand je le presse, voici le menu et l'élément Kamenu, donc je clique sur cette icône en forme de crayon et je vais rechercher Hero. En fait, nous ne pouvons pas utiliser cette Je vais le supprimer et le menu de recherche à nouveau. Et prenons cet élément de menu WordPress, et je vais le glisser et le dérober comme ça et ici nous pouvons sélectionner le menu comme ceci, le menu est sélectionné comme ceci. Ajoutons ensuite ses cravates à ce menu pour ce faire. Allons voir le type de texte utilisé dans cet élément de menu Figma, il s'ouvre et est 18 en demi-gras. Ajoutons ces détails. Ici, je clique sur le style, je clique sur typographie et je recherche Open Sans comme ça, alors la taille est 18 et avec ce demi-vol comme celui-ci , puis dans Transform, nous devons le mettre en majuscules car ici c' est en majuscules et c' est bon pour le moment, alors changeons la couleur du texte OK. Maintenant, nous avons le logo et le menu. Nous devons également corriger ces détails Hor, et pour ce faire, en temps normal, la couleur du texte est le blanc au survol La couleur du texte doit être cette couleur rouge. J'ardoise ce texte et je copie la couleur de remplissage. Et je vois, voilà, je vais ajouter de la couleur sous forme de rouge et nous n'avons pas besoin du pointeur, donc je vais juste le supprimer de la couleur comme ça et ça ressemblera à ça. Je change simplement l'opacité de la couleur du pointeur. S'il est actif, je le mettrai en rouge et sur le pointeur, je supprimerai la couleur du pointeur. OK. Nous devons maintenant trouver le rembourrage entre les éléments, il fait donc 50 pixels et ajoutons-le à partir d'ici Donc, l'espace entre les deux sera de 50, comme ça. OK. Maintenant, si nous vérifions le design, il ressemblera à ceci et corrigeons les problèmes un par un. Le premier problème concerne le logo et le menu se trouve dans la même ligne. Pour y remédier, je vais passer au design, puis cliquer sur les éléments et cliquer sur le conteneur, il suffit de cliquer sur le conteneur et le conteneur ajouté et je clique ici, alors nous sommes dans le réglage du conteneur. Je vais changer le conteneur en pleine largeur comme ceci et à l'avance, je vais les mettre à zéro. Et ici, je vais changer l'écart entre les colonnes et les lignes à zéro, comme ceci. Ensuite, je vais ajouter ces logos et ajouter ce menu au conteneur comme ceci. Voici donc le conteneur et le logo et l' élément de menu se trouve à l'intérieur du conteneur. Je sélectionne donc le conteneur à partir d'ici, puis je vais le changer en diction horizontale. Je corrige comme ça, puis j'ajouterai que l'espace entre le logo sera sur le côté gauche et ensuite sur le côté droit. Maintenant, le deuxième problème concerne le fichier Figma : l'espace entre les deux est 140 Si nous allons ici, si nous cliquons sur la mise en page et vérifions ici, le rembourrage horizontal est de 140 Ajoutons également un rembourrage horizontal à notre design. Pour cela, je vais sélectionner le conteneur principal. Et cliquez sur Advance. Ensuite, nous avons le rembourrage. J'ajouterai 140 pour le rembourrage droit, puis 140 pour le rembourrage gauche OK. Maintenant, ça ressemble à ça. Alors ce que nous devons faire, c'est utiliser ce rembourrage supérieur. Le rembourrage supérieur est de 20. Ajoutons-le à. Allez ici et cliquez ici. Ensuite, ajoutons ces rembourrages supérieurs, 20 comme celui-ci. OK, jusqu'ici tout va bien. Maintenant, si nous vérifions ces deux modèles, ils sont assez similaires. 83. 0111 design 01 section héros partie 02: Bien, nous devons maintenant créer cette section. Commençons donc. Je passe au design. Tout d'abord, nous devons ajouter un sous-titre Je vais donc ici et je fais glisser un titre comme celui-ci, clique sur le titre et mettons-le Allons donc à l'intérieur de ce conteneur, mais nous en avons besoin en dehors de ce conteneur, comme ici. Et en fait, nous en avons besoin ici. OK. Passons maintenant à l'onglet Style et changeons le type. Tout d'abord, je vais en faire un centre de ligne. Passons ensuite à la couleur Y. Et là, double-cliquez dessus, et la typographie s' ouvre sans, semble Ajoutons ces détails. En ce qui concerne la typographie, la famille de polices est ouverte sans, W est un demi-bol et la taille est 20 et ce que nous avons ici , nous avons une hauteur de ligne de 31. Ajoutez à la hauteur de ligne 30, désolé, 31 comme ça Ensuite, nous devons en faire un gaz supérieur, donc transformer le gaz supérieur. Ajoutons maintenant le reste du contenu et fixons le tissu d'alignement. Ensuite, nous devons ajouter ce titre. Avant cela, je dois modifier le texte. Je vais copier ce texte à partir d'ici et venir ici, cliquer sur le contenu et modifier le contenu comme ceci. Ensuite, je vais simplement dupliquer ce titre et allons-y Ensuite, je vais le copier ici et la typographie est absente en gras 60 et la hauteur de ligne est automatique. Faisons-les. Cliquez sur cette icône en forme de crayon, passez à la vignette, et la typographie est Railway 60 en gras La hauteur de la ligne est alors automatique. Pour le rendre automatique, je vais cliquer ici et cliquer sur cette icône en forme de crayon. Ensuite, je peux ajouter la diapositive de texte Otto comme ceci. OK. Mais ce n'est pas du gaz supérieur, ça devrait être du gaz Je vais donc passer à la transformation et ajouter la valeur par défaut. Ensuite, allez dans le contenu et collez le contenu. En fait, la transformation, voyons la transformation, la transformation est en majuscules ici, changeons-la en majuscules en majuscules en typographie et la transformation est en majuscule comme ceci OK. Nous devons maintenant ajouter ce paragraphe. Alors d'abord, je vais le copier et vérifierons les détails. Il est ouvert sans 20, et je peux simplement dupliquer celui-ci à nouveau, puis le mettre ici, et ajouter le contenu comme celui-ci. Ensuite, dans le STMLTag, s'agit d'un paragraphe, donc je vais le changer en P et maintenant, encore une fois, les valeurs sont ouvertes de manière irrégulière. Faisons en sorte que la typographie soit ouverte sans 20 et que la taille soit normale, normal signifie normal Et ici, le boîtier est par défaut comme celui-ci. OK, maintenant nous avons le CTA seule chose dont nous avons besoin pour l' ajouter au centre Pour l'ajouter au centre, essayons de cliquer sur le conteneur et sur le conteneur, faisons-le comme «   justify center ». Quand je le fais, si je viens au centre, ça ne marchera pas. Maintenant, ce que nous pouvons faire, c'est ajouter ce contenu dans le conteneur. Cliquez sur l'élément publicitaire et créez un conteneur comme celui-ci, puis supprimons tous ces détails et définissons la marge comme zéro et le paddin comme zéro Ensuite, je mettrai tout ce contenu dans ce conteneur comme ceci. Maintenant, je sélectionne ce conteneur. Maintenant, je vais dans Advance et ici dans Margin, c'est comme Px ou fixel Il suffit de cliquer dessus et de cliquer sur l'icône en forme de crayon. Ensuite, ce que je fais, c'est ajouter Margin comme automatique, puis pour le bas, ajouter comme automatique comme ceci. Quand je fais ça, ça va au centre. En gros, ce qui s' est passé ici, c'est que lorsque nous, en haut, Otto, supprimons la devise du bas. Lorsque nous sommes arrivés en haut, Otto, l'espace entre le menu et le CTA était rempli jusqu'à ce que la section CTA atteigne le bas Et lorsque nous ajoutons Otto en bas, ce contenant se remplit par le bas. Nous avons donc tiré vers le bas depuis le haut et vers le haut depuis le bas, afin que ce contenu devienne le centre. OK, et ensuite, nous devons ajouter un bouton, nous devons ajouter ce bouton. Ajoutons-le donc. Je clique sur cet élément pour ajouter l'élément, et ici je recherche, et ici nous avons beaucoup de boutons, mais pour le moment, prenons ce simple bouton et mettons-le ici. Ensuite, je clique sur cette icône en forme de crayon, et ici d'abord, changeons le texte. Copions ce texte, et les propriétés du texte sont ouvertes et symbolisées. Ajoutons le texte ici, et actuellement le lien est hashtag parce que nous n'avons pas de lien, puis je clique sur Estyle et dans Estyle en typographie, la famille de polices est Open Sans 20 et laissez-moi voir que le reste des détails semble semi-gras, puis la transformation est OK. Nous devons maintenant changer la couleur d'arrière-plan, alors ardoisez l'arrière-plan et copiez la couleur, puis venez ici. Et découvrons la couleur de fond. Où est la couleur de fond ? OK. Dans l'ombre du texte, nous avons la couleur verte, mais nous la rendons rouge, et ici, ajoutons prend de la couleur blanche, et encore, ajoutons de la couleur sous forme de noir. Une couverture sur le texte sera de retour. Et pour le moment, restons comme ça. Ensuite, nous devons ajouter l' espace entre le texte et le bord du bouton. Il est 16 et nous en avons 20 ici. Il s'agit d'un rembourrage du 16 en haut et en bas et du 20 en gauche et à droite Alors faisons-le aussi. Cliquez simplement ici dissocier la valeur ensemble, et faisons en sorte que le rembourrage supérieur ne soit pas 60, 16, droite, 20, bas, 16 et droite 20, comme ceci Ensuite, définissons la position comme centre OK. Maintenant, ça a l'air bien. Les articles sont donc trop serrés, nous devons donc ajouter un tampon avant d'ajouter le bloc-notes. Voyons si le bouton a un coin arrondi. Vérifions le bouton. En fait, le rayon d'angle de ce bouton est nul, nous n'avons donc pas besoin d' ajouter de rayon d'angle Voyons voir l' article entre les tailles, 15 et 20 sur le bouton du bouton, et 15 pour les autres. Il s'agit donc actuellement d'un conteneur. À l'intérieur de ce conteneur, nous avons les gros titres et le bouton. Donc, dans la mise en page, je laisse simplement le conteneur et la mise en page. Définissez la ligne des espaces sur 15, et ajoutez simplement 15 comme taille intermédiaire. Et ici, le bouton est 220, il faut donc en ajouter cinq autres. Pour en ajouter cinq autres, je clique sur le bouton, je vais Advance et je clique ensemble sur la valeur de l' encre, et en haut, j'en ajoute cinq, et il y en a juste 220 et l'autre article a une taille intermédiaire de 15. OK, jusqu'ici tout va bien. Et voyons-le dans le design complet, les publicités ressemblent à ceci. Et si nous voyons le design de Figma, examinons le en mode affichage et il ressemble à ceci Il se trouve sur le site Web lui-même et nous pouvons cliquer sur cet aperçu des modifications et l'ouvrir dans une nouvelle fenêtre Cela ressemble à ceci sur le site Web, et voici le design de Figma Seule chose dans le design de Figma, la page d'accueil est rouge, mais ici le lien du menu d' accueil de la page d'accueil est blanc Pour y remédier, je dois ajouter ce menu d'accueil à cette page actuelle, car si nous passons au design et que nous cliquons ici, puis que nous cliquons sur le style pour vérifier le style du menu et Act signifie la page sélectionnée ou active signifie la page en cours. La couleur du texte de la page actuelle est le rouge, mais ici nous ajoutons simplement l'URL Dum, nous ajoutons juste le hashtag. Ajoutons donc l'URL de la page de champ. Je vais donc simplement sur le tableau de bord WordPress, et ici, passons à l'apparence et aux menus. Sur les menus, nous avons ce menu Hero one et sur la page d'accueil, nous avons juste un lien personnalisé. Mais dans les pages, je clique sur E. Donc, la page ne s' affiche pas encore pour corriger le problème, je dois publier cette section sur les héros. Cliquons sur publier et en direct ici où la page a été publiée, puis revenons au tableau de bord et passons à l'apparence, désolé, pas à l'apparence. » Dans les menus d' apparence sur les menus, ici sur les pages, je clique sur VUL et voici notre page Hero One Je le vérifie et je clique sur Ajouter au menu et il vient d'être ajouté, donc je vais le mettre comme ici, puis je supprime ce lien de page d'accueil et ici, clique ici et je renomme ce héros en accueil Cliquez sur Enregistrer le menu. Et regardons la page maintenant, cliquez sur l'icône pour la prévisualiser, et maintenant elle affiche le lien actif car nous sommes maintenant sur la page Hero one, et nous ajoutons simplement Hero one page comme page d'accueil de ce menu. Bien, passons à la prochaine conception de la section des héros, et si vous avez le moindre doute ou le moindre problème, vous le comprendrez clairement lors de votre entraînement avec les prochaines leçons. 84. 0112 0111 design 01 section héros partie 03: Bonjour à tous, nous avons conçu avec succès la page du héros. Corrigons maintenant la réactivité mobile et ajoutons de l'animation Commençons par optimiser cette section dédiée aux héros pour les téléphones portables. Dans l'élément de l'éditeur, nous avons la possibilité de visualiser la version tablette et mobile du site Web de cette manière. Si nous passons à la tablette, le design est correct, mais le menu ne s'affiche pas. Ainsi, lorsque nous passerons à la version tablette en cliquant ici, notre site Web ressemblera à ceci, mais nous pouvons l'améliorer beaucoup. Commençons donc à les réparer. Je clique donc sur le conteneur principal. Passons ensuite à Advance. Dans Advance, nous avons un rembourrage d' écriture de 140. Le problème est que c'est mieux pour la version de bureau, mais sur tablette, cela ne semble pas bon. Faisons en sorte que ce soit 60 comme ça. Mais quand j'ajoute 60, tout est passé à 60, mais nous n'avons pas besoin que tout soit 60. Je clique ensemble sur la valeur de ce lien, icône et ajoutons la passe supérieure 20 et la droite 60. Puis j'en ai laissé 60 comme ça, c'est bien mieux qu'avant. Ensuite, lorsque nous consultons le menu, il ne s'affiche pas. Alors, réglons le problème. Il me suffit de cliquer sur l'icône en forme de crayon de ce menu WordPress pour le modifier. Ensuite, si je descends, je peux voir cette liste déroulante mobile. Nous en sommes maintenant à la version pour tablette Portrat. Ici, je vais cliquer sur le bouton complet et si je le vérifie maintenant, il ressemblera à ceci et c'est bien mieux qu'avant. Alors ce que nous pouvons faire, c'est que nous avons ici l'icône du hamburger. Donc ici, cette icône par défaut est le hamburger, mais sa couleur est le noir, alors changeons de couleur Pour changer la couleur, nous devons passer aux cravates IE, ici nous avons le bouton togal et changeons la couleur du bouton à bascule Maintenant, si je le vérifie, il est de couleur blanche et nous pouvons changer la taille. Faisons en sorte que ce soit 36 ou 35, puis je clique sur elle sur Ha, changeons sa couleur pour cette couleur rouge. Je clique sur ce flou de couleurs et obtenons cette couleur rouge comme ça Maintenant, quand il devient rouge, le voici. Maintenant, ici, nous pouvons également changer cette couleur. ce faire, changeons de couleur, je clique sur le menu déroulant en mode normal, donnons un goût de couleur au noir. Ensuite, la couleur de fond sera blanche, gardons les mêmes couleurs. Pour ce faire, je vais changer la couleur du texte en blanc. Ensuite, je vais supprimer la couleur de fond, supprimons-la comme ça. Mais lorsque nous faisons cela, le design ne semble pas bon, alors ajoutons la couleur d'arrière-plan en blanc et faisons en sorte que la couleur de test soit le noir. Seulement si vous êtes actif, faisons en sorte que la couleur de test soit cette couleur rouge. Cliquez sur l'échantillonneur de couleurs et cliquez comme ceci, puis laissez cette couleur rouge Maintenant, ça ressemble à ça. N'ajoutons pas la couleur de fond. Gardons la couleur de fond blanche. Mais avoir une couleur de fond semble une bonne chose. Faisons en sorte que cela ressemble à une couleur cendrée claire comme ça. El good. Maintenant actif, faisons en sorte que la couleur du lien actif soit la couleur rouge pour cliquer ici et faisons-le comme ça et maintenant c'est bon. Nous devons également sélectionner la couleur d'arrière-plan active comme couleur cendrée. Faisons-le aussi, comme ça. OK. Nous pouvons maintenant ajouter un rembourrage horizontal Si j'ajoute un rembourrage horizontal, faisons-en deux, nous ajoutons un rembourrage sur le côté horizontal, et si j'ajoute un rembourrage vertical, nous pouvons modifier la taille intermédiaire Faisons en sorte que ce soit 15. OK, jusqu'ici tout va bien. Et ici, au loin, maintenons le zéro. OK, maintenant nous avons un menu qui fonctionne parfaitement, et passons à cette section. Donc, ici, ce texte est correct, mais nous pouvons minimiser la taille du texte de ce titre Cliquons donc sur cette icône en forme de crayon et passons au style E, puis cliquez sur Typographie, passons au style E, puis cliquez sur Typographie, et modifions la taille du texte à 50 OK, parfait. Lorsque nous apportons des modifications à la version tablette, cela n'affectera pas le bureau. Si je clique sur le bureau, les styles de texte sont les mêmes, et si nous passons à la tablette, cela change parce que nous le changeons pour le rendre plus clair. Si je clique sur la gauche ici, ce texte passe à gauche. Mais dans la version de bureau, c'est au centre. En version tablette, c'est à gauche. De plus, lorsque vous passerez à la version tablette, vous verrez que vous pouvez changer ici. Ici, actuellement, c'est sur tablette. Si je clique ici, c'est accéder au bureau et quand nous le ferons à partir d'ici, je pourrai le modifier. C'est ce que l'on appelle la réactivité mobile. Maintenant, nous sommes prêts à partir. Ensuite, je clique sur la version mobile de Patriot ici, changeons également ces détails. Cliquez sur le conteneur. Comme nous pouvons modifier l'aperçu mobile de cette façon, mais restons comme ça, maintenant je clique sur le conteneur, et nous avons ici les paddings 60, 60 Faisons en sorte que ce soit 15. Je clique ensemble sur la valeur du lien. Je peux supprimer le lien valorisé. Ensuite, j'ajouterai le top pass 20, puis nous serons en 2020, c'est un peu plus long. Faisons en sorte que ce soit 15 et il y en aura 15. Il en restera 15. OK. Ensuite, si je consulte le menu, il fonctionne parfaitement, puis nous devons changer ce texte. Cliquez sur ce crayon pour accéder aux styles et sur la typographie, faisons en sorte que ce soit 18, changeons la taille en 18 Modifions ensuite la taille du texte de ce titre pour qu'elle soit trop petite. 45 serait parfait ici. Je pense que le texte du paragraphe est correct, nous n'avons pas besoin de le changer, nous le voulons, nous pouvons simplement le changer en 18. Mais ce n'est pas nécessaire. Cependant, je vais le garder à 18 pour le moment et nous pouvons également modifier la hauteur de la ligne si nous le voulons, changeons-la comme ça. OK. En fait, définissons-le sur 1,5. OK. Maintenant, nous devons changer la taille de police de ce bouton, cliquer sur le bouton et aller dans Iteris et là, pour ce qui est de la typographie, faisons en sorte que la taille de police ne soit pas un, deux, trois Faisons comme si 16 ou 16 c'était le cas. OK. Maintenant, nous corrigeons simplement la version mobile et maintenant elle fonctionne parfaitement en version. Il ne nous reste plus qu'à ajouter de l'animation. Ajoutons une animation. Pour ajouter une animation, je clique sur avance et sur avance nous avons des effets de mouvement. Je clique dessus, et je vais parler de l'effet Icroolin et de la souris pour le moment, car ce n'est qu' Changeons donc l'animation d'entrée. Et actuellement, nous sommes au menu. Donc, le menu, créons le menu sous forme de diapositive Din comme ceci. Ajoutons ensuite un effet de faible intensité à un effet de mouvement, comme la diapositive DN, à gauche comme ceci. Ensuite, voici ce coaching en direct pour les plus performants, cliquez dessus et allez sur Avancer puis cliquez sur Effet de mouvement et ici, changeons-le en Il y a beaucoup d'animations, mais ajoutons-en quelques-unes Nous pouvons également ajouter la durée de l'animation et ajouter du retard à l'animation, ce qui signifie que si nous ajoutons milliers de millisecondes, cela signifie J'attendrai 1 seconde ou 1 000 millisecondes pour activer ce texte Passons ensuite à la tête et faisons avancer l'effet de mouvement. Il laisse ça rebondir, tout ira bien. Ajoutons-les au design. Swing swing n'est pas une bonne décoloration. Mais dans la plupart des cas, l'animation n' est pas professionnelle et elle affectera la vitesse de chargement du site Web, mais c'est juste pour apprendre et s'amuser, alors ajoutons ces animations. Ça tombe bien. Cliquez maintenant sur le changement d'aperçu pour voir l'animation fonctionner. Oui, c'est du travail. Et oui, c'est ainsi que nous ajoutons de l'animation. Il ne nous reste plus qu' à cliquer sur Publier et il sera disponible sur le site Web en direct. 85. 0113 design 02 section héros partie 01: Bonjour, tout le monde. Il est maintenant temps de concevoir cette section consacrée aux héros. Alors allons-y. Tout d'abord, je vais sur le tableau de bord de WordPress. Ici, je passe la souris sur cette nouvelle page et je clique sur la page. Il s'agit d'un raccourci pour créer une nouvelle page, et ici je vais ajouter le titre en tant que héros deux. Ensuite, je clique dessus avec l'élément ou le bouton OK. Maintenant, nous avons la page Elementor et maintenant cliquez sur ce paramètre d'espace et changez la mise en page en Elemento Canvas OK. Maintenant, nous avons une toile propre et à partir de là, nous devons d' abord créer cet arrière-plan. Pour créer cet arrière-plan, nous devons ajouter un conteneur, cliquer ici, cliquer sur la case Plex et cliquer sur ce conteneur. Voyons voir si la largeur est de 1 440, la hauteur est de 700 Ajoutons ces détails. En fait, pour la largeur, j'ajouterai la largeur totale, puis pour la hauteur moyenne, j'en ajouterai 700 comme ça. Maintenant, il ne me reste plus qu'à ajouter l'arrière-plan. Pour ce faire, je clique sur le style I puis sur Classic et ici nous devons ajouter l'image. Allons ici et isolons maintenant le BG. Ensuite, je clique simplement sur Exporter pour passer à 1.5, et passons-en au format GPG, puis sur Exporter, gros Maintenant, nous allons sur tiny png.com et cliquons ici, puis sur rag image, il contient Maintenant, il ne contient que 120 kilo-octets. Maintenant, j'appuie simplement sur JPG et c'est téléchargé, puis je vais ici, clique sur cette image et je la dépose-la comme ça. Ensuite, nous pouvons ajouter de l'ancien texte. Ajoutons un ancien texte comme 02g. En fait, cet ancien texte est utilisé à des fins de référencement ou si quelque chose est arrivé à cette image ou si cette image ne se charge pas, ce texte ALT s' affichera sur le site Web. Je vais cliquer sur Concealeg , puis modifierons le paramètre. Les résolutions de l'image seront donc complètes, la position sera au centre, puis la pièce jointe est par défaut, répétition, pas de répétition, taille d'affichage, couverture comme celle-ci. Voyons maintenant le design. Je vais ressembler à ça. Il ne nous reste plus qu'à ajouter ce menu. Avant d'ajouter le menu, nous devrons ajouter une marge. Parce que si on clique sur le cadre de Figma et ici, on obtient un 140 en guise de rembourrage horizontal Ajoutons, ici, allez à l'avance et dans la marge, faisons-le. En fait, ce n'est pas une marge, c'est du rembourrage. Le rembourrage droit sera de 140 et le rembourrage gauche OK. Maintenant, ajoutons ce logo. Le logo, c'est ma finance. Il suffit de cliquer dessus et voici les détails. Passons à l'élément et cliquez ici, puis glissez et déposez un titre pour vérifier la typographie Cliquez sur le texte et la typographie est Georgia Regular 45 et la couleur de remplissage est plate Précisons ces détails, cliquez sur le titre, cliquez sur le style, puis sur la typographie La police est Georgia GE OR, ici nous avons Georgia dont la taille est de 45 et la largeur est Revoyons la largeur avec cette marque normale avec une normale. La couleur du texte est désormais noire. Maintenant, nous allons copier ces réservoirs comme ceci, puis venir ici, puis aller dans Contenu, coller ce texte comme ça, et il changera. Si cela ne change pas, appuyez simplement sur Entrée et supprimez la touche Entrée. Cela va changer comme ça, alors ce que nous devons faire c'est en haut en ajoutant 25. Avant de l'ajouter, créons le menu et le bouton de contacts, puis nous pouvons ajouter le top des ajouts et d'autres éléments. Nous devons maintenant créer le menu. Cliquez ici et sur le menu de recherche et obtenons le menu Word Press, dis-le comme ça. Maintenant, nous devons cliquer sur Modifier et voici le menu Hero one et nous devons créer un menu pour ce M finer. Faisons-le d'abord, je clique sur l'écran du menu et redirigé vers l'écran du menu et ici je clique sur. Créez un nouveau menu. Appelons ce menu Hero Two, puis je clique sur. Créez des hommes OK. Maintenant, je sélectionne ici le menu Hero Two et je clique sur Sélectionner. Ensuite, ici, nous pouvons d'abord ajouter les liens en tant que page d'accueil, nous devons utiliser ces deux pages Hero. Pour ce faire, je dois le publier. Je clique simplement sur publier et maintenant je passe au menu et il va falloir supprimer cela pour réprimer la page. Et ici nous avons 02, cliquez dessus et ajoutez au menu. Ensuite, je vais cliquer ici et changer l' étiquette de navigation en forme. D'accord, nous devons maintenant ajouter un lien personnalisé, comme URL, je dirais hash tag Et puis voyons l'élément de menu, le premier élément de menu est service, copie, prestige, cliquez sur le menu AT. Ensuite, vérifions le second : emplacement, prestige, hashtag vers le menu, puis cliquons sur le hashtag vers l'URL et cliquons sur deux menus, puis sur une tâche sur un hashtag, cliquez sur le menu OK, notre menu est terminé, et vous verrez qu' il y a un bouton de contact. Il s'agit donc d'un bouton distinct, et nous le créerons à l'aide d' un élément de bouton et il ne sera pas inclus dans ce menu. Maintenant, je clique sur Enregistrer et je vais ici, puis je dois demander les deux pages du héros. Maintenant, je clique sur le menu et dans le contenu, je vais définir le menu comme menu Hero Two. C'est apparu comme ça, alors ce que nous devons faire est d' ajouter le style E. D'abord, je vais aller dans Advance et ajouter la marge et le rembourrage à zéro Alors, voyons les détails. Tout d'abord, nous avons une typographie comme Vertica 16 regular. Ajoutons ces détails. Cliquez sur Estyle typography, l'une des familles sera Vertica. Je pense que c'est Vertica, et que la taille est 16 Ensuite, avec cette moyenne régulière, normale en élémentaire. OK. Maintenant, la transformation sera à nouveau supérieure. OK, c'est bien. Ensuite, vérifions la taille intermédiaire. La taille intermédiaire est de 25 pour vérifier la taille intermédiaire. Sur Mac, vous pouvez sélectionner un élément, appuyer sur tout et passer le curseur sur l'élément suivant de cette manière Dans Windows, vous pouvez faire de même. Lorsque vous appuyez sur le, vous pouvez voir l'espacement ou le rembourrage qu'il contient OK, maintenant je vais en venir ici, puis faisons en sorte que l' espace entre les deux soit 25. Maintenant, je passe au survol, le survol devrait changer de couleur. La couleur est donc noire et la police est en gras. Essayons de le faire. Lorsque la couleur n'est pas blanche, la couleur est noire, nous n'avons pas besoin du pointeur Allons-y. La couleur est le noir. Et en temps normal, nous devons faire en sorte que la couleur soit noire et ainsi de suite. Maintenant, nous avons un problème car ici, nous n'avons aucun moyen de mettre cette police en gras pendant qu'elle survole Nous ne pouvons donc le faire qu'à partir ici, par exemple en l'ajoutant ici, mais quand nous le faisons , cela affecte le système pour la corriger , nous devons ajouter du CSS personnalisé faisons-le une fois cette conception terminée car c'est un peu délicat et continuons la conception, le reste du site Web Maintenant, ce que nous devons faire est de l'ajouter à une ligne horizontale ou à une seule ligne pour ce faire, je vais cliquer ici et sur un conteneur comme celui-ci. Passons ensuite au conteneur. Je vais remplir le contenant avec ça. Ensuite, à l'avance, retirons la marge et le rembourrage. Ensuite, je vais simplement les mettre dans ce contenant. Maintenant, c'est à l'intérieur du conteneur et cliquez sur le conteneur, passez à la mise en page et cliquez sur la direction sous forme horizontale brute comme ceci et ça a l'air plutôt beau, puis nous devons ajouter un bouton ici. Pour ajouter le bouton, cliquez ici. Bouton de recherche. OK, ici nous avons beaucoup de boutons, mais nous n'avons besoin que d'un simple bouton comme celui-ci, mettez-le ici. Pas l'extérieur du contenant à l'intérieur. Oui, on peut l'ajouter d'ici comme ça. OK. Il faut maintenant changer le style de ce bouton. Découvrons le style actuel, cliquez sur le bouton. Et ici, nous avons un rayon d' angle de 60. Passons à 60 et la couleur est noire. Créons-les d'abord et je passe au style e et au rayon de bordure, fixons-le à 60 et la couleur est le noir. Ici, la couleur est le noir et quel est le texte que nous pouvons copier. Et venez ici et passez au contenu. Et voilà, modifiez cliquez ici pour nous contacter et rendez-vous sur Estyle In Estyle, nous pouvons modifier la typographie Voyons donc la typographie. La typographie est Vertica Regular 16. Alors allons-y. Ici, familles de polices Vertica 16 Normal et en majuscules. Faisons en sorte qu'il soit transformé en majuscules. Il ne nous reste plus qu'à ajouter du rembourrage, cliquer sur le texte et à appuyer sur Alt Lorsque vous appuyez sur le bouton ancien, le rembourrage supérieur et inférieur correspond 16 et les coussinets gauche et droit à 37. Faisons-le. Faites avancer la marge et atteignez 16 points au maximum, pas ici. Désolé, pas ici. Fais-le tel qu'il est. Je passe juste au style. En fait, transformons-le en majuscules et c'est là, c'est ici. Le motif du haut est 16 et le motif de droite est 16, le motif de droite est 37 37, du bas 16, 37 comme le gauche. Nous avons maintenant le bouton parfait et changeons détails du survol lors du changement normal au survol, changeons la couleur du texte en noir et la couleur en blanc comme ceci Ça a l'air bien. Il ne nous reste plus qu' à ajouter un rembourrage Vérifie le rembourrage. Ici, sélectionnez tous ces éléments. Voyons ensuite que le rembourrage a 25 ans, ajoutons le rembourrage supérieur ou la marge supérieure Sélectionnons d'abord le conteneur, puis passons à 25 dans la marge supérieure. C'est bon. Maintenant, ce que nous pouvons faire, c'est passer à la pose et ici, nous pouvons placer les objets au centre et placer tous les éléments au centre de masse. OK. Dans la leçon suivante, ajoutons le texte actif en gras. Pour cela, il va falloir utiliser du CSS, et c'est assez simple. Allons-y. 86. 0114 design 02 section héros partie 02: OK, maintenant continuons. Si je clique ici et que je vérifie le design, il ressemblera à ceci, mais nous avons besoin qu'il soit parfaitement aligné pour ce faire, je cliquerai sur le conteneur et sur le conteneur, pour justifier que je cliquerai sur le conteneur et sur le conteneur, le contenu soit même dans l'espace. Ensuite, si je le vérifie à nouveau, il aura parfaitement l'air en bon état. OK. Maintenant, nous devons créer cette section CtA et cette image. Pour ce faire, je vais créer le nouveau conteneur, donc cliquons ici et sur conteneur, ajoutons-le comme ça, puis mettons-le Mettons-le ci-dessous comme ça. Non ici. Allons-y, d'accord. Maintenant que c'est là, je vais aller dans Advance et supprimer les éléments de design. Ramenons l'écart à zéro. Et d'abord, nous devons créer ce sous-titre, le paragraphe de titre et le bouton Pour ce faire, je vais venir ici et cliquer sur Ajouter un élément, puis ajouter le titre Ajoutons ces détails. Tout d'abord, je vous souhaite la bienvenue dans mes finances. Copions-le comme ça. Passez ensuite au style. La couleur était noire. Et voyons la typographie Georgia, normale 55. Let's Make comprend 55 polices, la famille de polices est God. Et en quoi le poids est-il normal ? OK, nous avons ici un problème dans la petite version du bureau. Corrigeons-le donc avant aller plus loin pour le corriger, voici ce que nous pouvons faire. Cliquons ici et supprimons les espaces comme zéro, et je pense que tout va bien à partir d'ici. Vérifions sa taille comme ça et oui, il est parfaitement ajusté. OK. Maintenant, continuons le travail, et ici j'ajoute le titre, puis nous devons ajouter ce paragraphe pour que le subbdingT fasse cela, je vais juste dupliquer cette partie, et ajoutons les tanks, et un style, nous avons Vatica regular, Ici, Vatica 25 régulier. OK. Maintenant, nous devons ajouter ces deux boutons. Donc, avant d'ajouter le bouton, vérifions la taille intermédiaire. Il est 20 ans. Faisons cela entre les tailles. Cliquez sur le conteneur et ici, la taille des lignes sera de deux 21e. Je clique ensemble sur la valeur du lien comme ceci, puis passons à 20. Maintenant, ajoutons le bouton. En fait, nous pouvons obtenir ce bouton, mais créons-le à partir de zéro. Je recherche le bouton, puis je le colle comme ça. Découvrons ensuite les détails. Ici, le texte est écrit VaticRegular, 20, et entre les tailles 18, 18, 35, 35 Allons-y. Tout d'abord, copions le style, puis passons au style, la typographie, c'est 20, Vertica C'est 20 ? Oui, c'est 20 et c'est normal. Transformez ensuite le gaz Ava , puis si je passe au design Figma et que j'appuie sur Alt, nous obtiendrons 18 pour marges supérieure et inférieure ou pour le rembourrage inférieur, puis 35 pour le rembourrage gauche et droit Ajoutons ces détails. Pas ici. Bien sûr, dans le style E, le rembourrage permettra d'ouvrir Moten comme 18, juste comme 35, 18, 35 Maintenant, les coins arrondis seront de 60. Le rayon de l'eau sera de 60 et la couleur est la couleur noire. Cette couleur sera le noir et dans notre cas, changeons la couleur du texte en noir et la couleur de fond en blanc comme ceci. OK, c'est bien. Maintenant, je dois créer ce bouton en savoir plus. Faisons-le. Je copie d'abord ce texte pour en savoir plus. Ensuite, nous pouvons simplement dupliquer ce bouton comme celui-ci à juste titre, cliquer sur Condo bligate et ici je vais changer le texte pour en savoir plus et passer au style en style E, je vais changer cette couleur à 0 % de visibilité et changer la couleur du texte Ensuite, je vais devoir ajouter la bordure pour ajouter la bordure, je vais cliquer sur le type de bordure solide. Et voyons la taille de la bordure ici, donc la taille de la bordure est égale à une. Faisons en sorte que la bordure ne fasse qu'une. OK. Maintenant, si nous vérifions le design, il ressemblera à ceci, et maintenant nous devons tracer une ligne horizontale. Pour ce faire, nous devons créer un nouveau conteneur et le mettre ainsi. Ajoutons ensuite les deux boutons à ce conteneur comme ceci et il se trouve à l'intérieur du conteneur, puis cliquons sur le conteneur et changeons la direction en horizontale. En fait, nous devons changer la position du bouton comme ceci. OK. Et voyons la taille intermédiaire, cliquez sur le bouton, appuyez sur tout. Il est 20 ans. Je crois qu' il en est déjà 20. Voyons voir. Oui, il en est 20. Ajoutons l'écart entre les colonnes plus deux. OK. OK. Jusqu'ici, tout va bien. Il ne nous reste plus qu'à passer à la conception. Il va falloir ajouter de l'espace ici. L'espace devrait être de 30 actuellement, c'est 220, donc je clique ici et je passe à ne pas styliser à l'avance. J'ajouterai une marge comme marge supérieure de dix. Ouais. Lorsque nous ajouterons les dix, nous obtiendrons un espacement. Maintenant, je dois vraiment mettre ce conteneur à l'intérieur du conteneur principal comme ceci. Maintenant, il ne nous reste plus qu'à cliquer ici et maintenant, passons à l'étape suivante et, dans la marge, je vais cliquer sur ce crayon. Je peux que le haut soit automatique et le bas soit automatique comme ça. C'est juste devenu le centre et ça ressemblera à ça. Voici le problème. Lorsque nous essaierons d'augmenter le design, celui-ci, venez ici. Celui-ci n'est pas venu ici, donc c'est le problème. Voyons ce qui s'est passé ici dans ce conteneur. Ce que nous avons fait, c'est ajouter de l' espace. Supprimons-le. Lorsque nous le supprimons, il change simplement. En fait, il faut ajouter de l'espace. Essayons. Oui, nous devons ajouter de l'espace entre deux, pas un espace uniforme, mais cela aura une belle apparence et fonctionnera bien OK. Voici donc notre conteneur principal, et nous devons ajouter une image ici, et sa direction est verticale comme celle-ci, mais nous avons besoin d'un conteneur qui a une direction horizontale. Pour créer celui-ci, je vais simplement cliquer sur Nouveau conteneur et ajouter le conteneur. Alors allons nager tous ces trucs ici, et les remplir avec Okay. Je vais maintenant définir la direction comme horizontale. Alors ce que je peux faire, c'est non, ce n'est pas dedans, je vais le mettre ici, alors pas ici. Ici, alors je vais ajouter ce conteneur à l'intérieur de ce conteneur. Dis-le comme ça. OK. OK. Encore une fois, nous devons ajouter la fonction de mise en page automatique. Nous devons ajouter automatiquement à la marge comme ceci, haut sera automatique, bas sera automatique. D'accord, maintenant nous pouvons ajouter une image. C'est donc horizontal, et ajoutons une image pour ajouter une image, cliquez ici et recherchez Image et ajoutons une image comme celle-ci. OK. Repassez d'abord l'image pour la refouler, je vais cliquer sur cette image je vais cliquer sur cette Voici l'image, cliquez dessus, sélectionnez l'image, puis cliquez sur Exporter et nous en avons besoin en version PNG car cette image n'a pas de fond. Ensuite, je clique sur le bouton Exporter et le téléchargement vient d'être effectué. Passez ensuite à Tiny PNG. Et ajoutez-le ici, optimisez-le, cliquez sur PNG pour le télécharger, puis venez ici, cliquez ici, puis cliquez sur l'image et ajoutez l'image comme ceci. Puis je clique sur Sélectionner. OK, l'image s'adapte et je vais changer la résolution de l'image au maximum. Maintenant, nous devons le configurer comme ceci. Actuellement, l'image ressemble à ceci, mais elle ne fonctionne pas. Maintenant si vous voyez un site Web comme celui-ci, vous pouvez simplement réduire cette section de structure et l'améliorer. Nous devons maintenant configurer cette image comme ceci. Pour cela, je vais cliquer sur l'image puis aller à l' avance sur la taille, je vais la définir comme croissance. Maintenant qu'il grossit, il ne me reste plus qu'à le mettre dans un coin du design Figma. Faisons-le. Pour ce faire, je vais modifier la valeur de la marge et j'ajouterai la marge laissée comme ceci ne reste aucune marge, nous devons ajouter une marge à droite et elle devrait être négative, qui signifie que cette partie sera envoyée en ignorant le rembourrage du conteneur principal Allons-y. Lorsque je fais plus que ce dont nous avons besoin, nous voyons ce type de barre ICO pour la supprimer, nous pouvons simplement la placer comme ça. Il fait moins 140 et maintenant, si nous vérifions le design, il ressemblera à ceci. Mon écran est de 24 pouces. C'est pourquoi ce design ressemble à ceci. Mais si nous le vérifions sur un petit appareil comme un ordinateur portable, bureau ou un autre appareil, cela ressemblera à ceci. Maintenant, je vais ajouter la partie suivante. Le robot est donc terminé, et maintenant nous devons créer cette pièce. Je le sélectionne et sa hauteur est de 270. Alors allons-y. Cliquez ici. Ensuite, je clique dessus plus une seconde pour créer un nouveau conteneur, et le conteneur sera une colonne directe, et ici je le mettrai sur toute la largeur, puis je supprimerai tous les éléments inutiles comme celui-ci, puis la hauteur de Mint sera de 270. OK, maintenant nous avons un autre problème. Imaginons que nous ajoutions le titre à ce conteneur. Je me suis installé dans le coin supérieur gauche, mais nous avons une marge de 140 ou 140 pouces ici. Pour l'ajouter, je dois cliquer ici et aller sur Advance, puis je devrai ajouter le padin droit comme 140 et le padin gauche comme Maintenant que c'est fait, il ne me reste plus qu'à centrer ce contenu. Cliquez sur le conteneur et passez à la mise en page dans la mise en page, je vais lui faire justifier le centre de contenu, comme ceci. Faisons ensuite en sorte que la direction soit horizontale comme ceci. Encore une fois, faisons-en un centre de ligne, et ici, mettons-le étoile, justifions-le comme étoile de contenu. OK. Maintenant, examinons ce texte. Ce texte est Georgia Regular 45, en fait, nous pouvons obtenir le style de cette section de héros pour le faire, je vais cliquer avec le bouton droit de la souris ici, copier, puis venir ici, cliquer avec le bouton droit de la souris pour coller ce style. Maintenant, je vais devoir changer cette taille de police à 45 comme ça. Maintenant, ce que je peux faire, c'est ajouter ce contenu, il suffit de le copier, d'aller au contenu et de le coller comme ça. Ensuite, nous devons l'ajouter en deux lignes pour ce faire, je vais ajouter le crochet R mean break, puis je ferme le Bagot et maintenant nous l'avons en deux lignes, pareil Passons ensuite à l'Estyle. Ajoutons la typographie. Ajoutons une hauteur de ligne que j'aime bien. C'est mieux. Nous devons maintenant ajouter ces trois sections. Créons donc celui-ci et ensuite nous pourrons le dupliquer. Avant cela, nous devons transformer cette couleur en noir. Voyons voir que la couleur est le noir, mais pas le noir foncé. Je copie donc le code couleur, je viens ici, vais sur Eastile, je clique sur le fond classique en couleur, je colle le code couleur Cliquez ensuite ici, puis changez cette couleur en blanc. OK. Commençons maintenant à concevoir ces deux sections. Alors voilà, je clique ici sur le titre comme celui-ci, puis je copie le contenu Maintenant, vérifions que la typographie est VaticRegular, 65. Faisons-le. Cliquons ici. Habituellement, nous devons ajouter le titre ici. Si nous l'ajoutons directement ici, nous obtiendrons des informations inutiles. Alors maintenant, je clique ici : typographie Estyle, famille de polices, Heaica 65, 65 et normal W est normal, c'est normal. OK. Maintenant, la couleur est la raison et nous devons maintenant ajouter cette expérience. Alors aidez VaticaRegular 25. Nous pouvons simplement dupliquer cette partie comme ceci, puis cliquer ici et ajouter le texte ici. Passons ensuite à 25 cette taille. OK. Maintenant, ce que nous devons faire est ajouter cette section horizontalement comme ceci. Pour ce faire, voyons d'abord la taille attrayante de l'article, c'est 15. Alors faisons-le. Pour ce faire, cliquez ici, cliquez sur conteneur et placez un conteneur comme celui-ci. Alors mettons ces choses dans ce contenant comme ceci. Oui, c'est à l'intérieur du conteneur, et ici, je vais supprimer cet espace et l'écart entre les rangées sera de 15 ou 20. Revoyons-le encore une fois. Il est 15 ans. L'écart est de 15, et il doit s'agir d'un point central. La direction est la verticale de la colonne. OK. Maintenant, je vais le dupliquer deux fois, le dupliquer et le dupliquer à nouveau. Ajoutons maintenant les autres détails comme ceci. C'est bon. Nous avons maintenant un autre problème. Réparons-le. Pour y remédier, augmentons la taille de la prise comme suit. Ensuite, nous pouvons diminuer cette taille pour qu'elle s'adapte ainsi. Nous pouvons le faire pour celui-ci, deux et pour celui-ci, comme ça. Maintenant, ce que nous pouvons faire, c'est vérifier la taille intermédiaire. La taille intermédiaire est 57, c'est 57. Ajoutons 57 comme taille intermédiaire. Pour l'ajouter, nous devons ajouter cette section dans un autre conteneur. Cliquez ici et ajoutons le conteneur. Faisons ça. Ajoutons ensuite ces trois sections à l'intérieur de ce conteneur. Je vais d'abord ajouter celui-ci, puis celui-ci, puis celui-ci, mais il n'y a pas ajouté l'intérieur, alors ajoutons-le dans celui-ci comme ça, comme ça, comme ça. OK, faisons en sorte que la direction soit horizontale. Et ici, ajoutons la taille des colonnes, 57. OK. Encore une fois, augmentons la taille de ces éléments comme ceci. Et voilà, faisons la même remarque ici, sélectionnons celui-ci et disons-le comme ça, ok et ok. Maintenant, sélectionnons le conteneur principal et cliquons sur l'espace autour ou nous pouvons simplement ajouter une taille de colonne comme 57, comme ceci, 57. Maintenant, ce que nous devons faire est de vérifier la taille intermédiaire ici, nous l'avons comme 116, mais ici, nous pouvons cliquer sur ce conteneur principal et passer à la mise en page dans la mise en page, nous pouvons cliquer sur Ipace entre les deux Si nous le vérifions dans le design, cela ressemblera à ceci. Quand on le compare au design original, il est vraiment beau. Le truc, c'est que nous avons une petite ligne. Essayons donc de le réparer pour le réparer, je vais dans la section des héros et je clique ici. Ensuite, en bas, la marge inférieure de l'image sera supprimée comme ceci. Maintenant, cela devrait être réparé. Voyons voir, voyons voir. Oui, c'est réglé, et c'est parti. Voici le design final du site. En fait, ici, nous devons définir un espace entre les deux, puis ça va apparaître. 87. 0114 design hero 2 partie 2 menu highlite: Bonjour, tout le monde. Nous devons maintenant mettre ces éléments de menu en gras dans Her stage et Active stage. Actuellement, cette page d'accueil est active, qui signifie que cette page d'accueil est celle sur laquelle nous nous trouvons actuellement. Donc, lorsque nous sommes ici, nous devons mettre cet élément de menu en gras. Parce que sur notre design Figma, c'est audacieux ici. Ajoutons cette fonctionnalité. Pour cela, je vais cliquer ici pour modifier le menu. Ensuite, j'irai chez Advance. Sur Advance, nous avons un endroit pour ajouter du CSS personnalisé. Nous ne parlerons pas beaucoup plus du CSS, mais vous pouvez en apprendre davantage sur le CSS en regardant Tutoris sur wscos.com, et ici nous allons ajouter du Si je passe au design et que je clique avec le bouton droit sur l'élément de menu et que je clique sur Inspec vous verrez ce type de balises STM Vous connaissez déjà l' élément ou utilisez le CSS pour styliser le site Web et le CSS styliser le site Web et le tant que fonctionnalité ou élément appelé classe si l'URL de la page actuelle est égale à l'élément de menu dans Elemento, c'est un élément Elemento c'est un Nous sommes actuellement à l' ATAC A mean Ankatag. Lorsque je le surligne, vous pouvez voir la page d'accueil surlignée. Si je clique ici et que je coche cet élément du menu de service ou ce service Ankatag, vous verrez la classe, mais dans cette classe, vous ne verrez pas la classe active de l'élément elemento Maintenant, je le copie, puis je vais ici, appuie sur le point et je colle la classe CSS active de l' élément. Et ici je vais ajouter une police avec. Il s'agit d'un style CSS avec lequel créer une police et dans ce cas, il doit être en gras comme celui-ci. Alors attaquons comme il est important, puis publions-le. Maintenant ça marche. Qu'est-ce que cette étiquette importante a fait ? Remplacez principalement le code CSS actuel. Maintenant qu'une partie est terminée , nous devons activer cet objet lorsque nous le touchons. Pour ce faire, je vais cliquer sur cette petite icône et cliquer sur l'un de ces éléments, et maintenant je dois trouver l' ULL signifiant liste non ordonnée, et ce menu est une liste, et nous avons ici cet identifiant, mais nous pouvons ajouter un identifiant à partir d'ici Ajoutons un identifiant clair. Pour ce faire, dans le menu d'édition préliminaire de WordPress, je vais aller sur lay. Lors de la mise en page, nous pouvons ajouter l'ID CSS ou les classes CSS et ajoutons simplement l'ID CSS comme le menu Hero, puis je vais le copier et aller dans Advance, passer au CSS personnalisé et ajouter comme Herou et une balise d'ancrage moyenne, et ici nous ajoutons H mean, et la façon dont le tweet de police sera en gras Je le copie et je le colle comme ça. Maintenant, si je le vérifie sur le design, cela devrait fonctionner ici, nous devrions ajouter balise de hachage et non un point pour classe CSS et un hashtag pour l'ID CSS Vous pouvez consulter ces Eta sur le site Web de W Three School. Je le publie et passons au design et il ressemblera à ceci. OK, maintenant nous avons réussi à créer cette partie et nous vous verrons dans la prochaine leçon. 88. 0115 hero 3 challenge de design: Nous avons réussi à convertir ces deux designs de héros de Pigma en Elemento, et voici votre défi Il est maintenant temps de convertir ce design de Figma Hero Three en Elemento Alors jouez avec et essayez de le faire. Et dans la prochaine leçon, je le ferai aussi. 89. 0116 héros du design 3 partie 01: Bonjour, tout le monde. Nous devons maintenant concevoir ce Hero Three. Commençons donc. Je suis sur le site Web, et ici, je vais accéder à la page et cliquer sur Ajouter un nouveau. Ensuite, j'ajouterai le titre 03. Cliquez ensuite sur Modifier avec un élément de seconde. Il sera redirigé vers l'élément ou éditeur et l'éditeur a été chargé, puis je clique sur le réglage de la page et sur le réglage de la page, je vais juste changer la mise en page en élément ou je peux maintenant commencer à concevoir Je dois d' abord trouver la hauteur de cette section. La hauteur est de 223, créons une boîte de dialogue et direction sera une colonne de direction comme celle-ci. Ensuite, cliquez ici, accédez à la section de mise en page du conteneur. Et ici, la taille sera parfaite deux, deux, trois. OK. Maintenant, je vais en faire une direction horizontale. Ensuite, à l'avance, je dois ajouter ce rembourrage. Le paddin est de 140, comme je l'ai déjà dit, lorsque vous cliquez sur une section de Figma et que vous appuyez sur Alt, vous pouvez voir un espace entre les éléments Ici, nous en avons 140. Ajoutons-le ici. La droite sera 140 et la gauche 140. OK. Maintenant, dans un premier temps, nous devons ajouter ce logo. Sélectionnez l'image du logo sur le Figma et cliquez sur Exporter l'image Faisons en sorte qu'il soit 1,5 h. Maintenant, je vais y aller. Et cliquez dessus sur l'icône de l'élément, et ici, ajoutons l'image comme ceci. Cliquez ensuite ici et glissez et déposez le logo comme suit : sélectionnez-le et définissez-le en taille complète. OK, le logo est flou pour le réparer, nous allons aller ici et le faire prendre à deux X, et essayons K. Ensuite, remplaçons ce logo Cliquez ici, cliquez ici, puis téléchargez ce logo comme celui-ci et cliquez sur Masquer . En fait, ce logo devient plus grand que la section hauteur minimale de cette section est donc de 223, mais maintenant sa hauteur est supérieure à cela. Cliquons sur le logo et passons au style. Alors, soyons au sommet de 2023, puis faisons-en plus de 100 comme ça. Maintenant, nous devons ajouter ce menu pour ajouter ce menu, nous devons d'abord créer un menu, cliquer ici et rechercher le menu dans la barre de recherche et obtenir le menu Word Press. Mets-le ici. Maintenant, nous devons ajouter le menu pour ce faire, je vais cliquer sur l'écran Menu ici pour créer un nouveau menu, cliquer sur créer un menu, créer un nouveau menu. Ajoutons ensuite ces détails. Tout d'abord, nous devons publier cette page car en tant que page d'accueil, nous devons définir trois pages pour ce héros. OK, maintenant c'est publié et je dois à nouveau supprimer cette page. Ajoutons ensuite le texte, comme le menu Hero Three. Cliquez ensuite sur Créer un menu OK. Et voici la troisième page de Hero, cliquez dessus et cliquez sur À deux dans le menu et cliquez ici pour l'agrandir, puis remplacez cette étiquette de navigation et puis nous n'avons pas le reste du lien. Créons donc un lien personnalisé sous forme URL dans le hashtag et dans le texte du lien, ajoutons ces prises d' abord à propos des tours deuxième service électrique à l'URL en tant que hashtag, troisième, contact, casting et hashtag, cliquez sur Ajouter au menu. OK, maintenant je clique sur Enregistrer, puis sur Enregistrer. Et maintenant, si je passe au Hero Three et que je ne vois pas le menu actuellement. Donc, si je presse cette page et que je clique maintenant sur le menu, nous avons maintenant un troisième menu, le menu 03 Ensuite, je vais passer au style E et nous devons changer de style. Voyons d'abord le texte. Ici, la typographie est Cabin, regular 18. Ajoutons d'abord ces détails Typographie  : la taille de la cabine est normale, celle du mermal normal, 18, et c'est une estimation supérieure La transformation sera la meilleure estimation. Voyons ensuite la couleur, la couleur est le noir. Voici la couleur noire. La couleur est le noir. Ensuite, vérifions l' espace entre sélectionner l'un des menus et appuyons sur vérifier sa taille, il fait 50 pixels, le collage entre les deux fera 50. OK, et maintenant nous devons changer le réglage Ha. Au survol, la couleur passera à cette couleur vert foncé, et nous aurons un soulignement Cliquez ici et collez la couleur comme ça, et ici nous avons le soulignement, cliquez sur Coller la couleur, OK, et si c'est actif, nous activerons automatiquement la couleur du survol donc nous n'avons pas besoin de faire quoi que ce soit OK, alors ce que nous devons faire est de placer ce centre OK, pour le placer au centre, je vais cliquer dessus et aller dans Contenu et non sur Contenu. Allons-y pour avancer sur Advance. Cliquez sur Aligner le soi, et c'est juste aligné au centre. Il vient d'être dirigé vers le centre. Et maintenant, il ne nous reste plus qu'à ajouter cette icône d'appel. Créons d'abord un conteneur et à l'intérieur de ce conteneur, nous pouvons créer cette section. OK, cliquez ici et ajoutez un conteneur plus grand, alors diminuons un peu sa taille comme ceci. Maintenant, faisons-le comme ça pour le moment et nous pourrons le modifier plus tard en cliquant ici. Ensuite, je vais rechercher une boîte à icônes. En fait, nous n'avons pas besoin de conteneur. Je vais simplement le supprimer. Nous pouvons simplement utiliser la boîte à icônes de recherche d'icônes. Et voici la boîte à icônes, dis-la comme ça. Cela devrait sûrement être après le menu tres comme celui-ci, alors ce que je peux faire, c'est d' abord cliquer ici. Cette icône est une icône de téléphone. Cherchons un téléphone et sélectionnons le téléphone, je peux cliquer sur Insérer, et ici nous devons modifier le contenu. Copions le contenu d'ici et maintenant, collons-le sur le niveau, puis copions ce numéro, puis collons-le dans la description. Jusqu'ici, tout va bien. Ensuite, ce que je peux faire, c'est ici, sur la vue, je vais passer au style E dans le style E. Faisons en sorte que la position soit droite comme ceci et l'alignement vertical sera au milieu comme ceci , puis passons à l'icône sur l'icône. Faisons en sorte que la couleur primaire soit le blanc, et nous devons ajouter l'arrière-plan. Prenons donc le blanc comme couleur principale, puis je passe à nouveau et dans la vue, j'ajouterai un cadre. En fait, ce n'est pas un cadre qui devrait être un trait et passer au style et au style sur l'icône. Ajoutons cette couleur de trait car cette couleur bleue copie la couleur bleue d'ici et la couleur secondaire sera Localement, la couleur principale sera le bleu et la couleur secondaire est l'icône, elle sera blanche. Améliorons-le une fois que nous aurons créé le reste. Ensuite, nous avons changé ce texte en cabine medium, 16,5 et la couleur est bleue. Allons-y, je vais passer au contenu La couleur du titre sera cette couleur. Alors la typographie sera cabine, désolé, 16,5 et la taille est moyenne moyenne moyenne moyenne 500 OK. Ensuite, nous devons modifier la description. Nous allons vérifier les détails de la description. La couleur de fond est le noir et la cabine est 25. Ce fond est vide, la typographie, la cabine 25 serait OK, jusqu'ici tout va bien Ce que nous devons faire, c'est vérifier le rembourrage. Ici, le rembourrage sera de 19 x 19. Ajoutons le rembourrage des icônes ici, le motif sera 19 et la taille de l'icône est de 25 à 25 Faisons-le après avoir réparé ces tissus d'alignement. Comme nous devons placer ce centre au centre, cliquez dessus et faites-le s'aligner. Maintenant, je clique ici et je passe à la mise en page dans la mise en page, je vais modifier ce contenu sur toute la largeur, puis laisser espace entre les deux, nous allons simplement coder selon la taille du site Web. n'est pas bon dans cette petite version, supprimons cette section de structure comme ceci et voici maintenant la vue. Je viens de publier 90. 0117 résoudre le problème de réactivité de l'ordinateur: Vous verrez ce type de problème d'alignement. Alors, réglons le problème. La plupart du temps, cela se produit parce que ce conteneur présente déjà des trous. Si je clique ici, cela s'affichera comme zéro, et si je passe dans le réglage latéral et dans les mises en page, nous avons également des lacunes Supprimons ces deux écarts pour les ramener à zéro. Nous n'en avons pas besoin et cliquez sur Enregistrer les modifications, puis fermez-le et cliquez sur Enregistrer ici. Il semble que cela n'ait pas été enregistré, et sauvegardons-le. Maintenant, je clique sur Retour pour modifier OK. Maintenant, ce que nous devons faire est de définir un autre espace inutile. Ici, je clique sur ce menu et sur ce menu, je mettrai ce pointeur à zéro et quand je le ferai, le pointeur ne s'affiche pas, alors faisons-le comme deux. En fait, voyons-le dans le design de Figma et ici, vérifions le pointeur. Il y en a en fait deux. Passons à deux, c' est déjà fait, puis faisons en sorte que le padin horizontal soit égal à zéro Et lorsque nous le faisons instantanément, l'espacement devient plus petit et faisons en sorte que le rembourrage vertical soit égal à zéro, deux Faisons-le réellement. Faisons en sorte que le rembourrage horizontal soit deux. Ensuite, ici, je vais supprimer le correctif à deux points de l'espace entre les deux. Nous avons maintenant un design clair. Je vais maintenant cliquer sur publier et me rendre sur responsive test tool.com et à partir de là, nous pouvons vérifier la réactivité Je clique sur l'aperçu des modifications et je copie l'URL, uniquement la partie URL, je la mets ici et je clique sur vérifier sur un petit écran, cela ressemblera à ceci. Passons ensuite à la version plus grande pour ordinateur de bureau. Donc, dans une petite tablette, cela ressemblera à ceci. Passons ensuite à la version suivante et dans cette version, cela ressemblera à ceci. Voyons ça de quelques centimètres. Il mesure 15,6 pouces, il ressemblera donc à ceci. Si je me souviens bien des sections précédentes sur les héros que nous avons conçues, nous avions rencontré le même problème. Passons à ces sections sur les héros et modifions-les. Passons donc à ses pages. Dans les pages, j'ouvre Hero Two, cliquons sur Modifier avec Elementor et ouvrons-le dans une nouvelle fenêtre ici, ouvrons celle-ci aussi. Sur Hero One, c'est comme ça. se produit principalement à cause de ce menu. Je clique ici et je vais dans TyleoType. J'ajouterai le pointeur avec un zéro et un padin horizontal comme zéro Dans ce cas, le rembourrage vertical sera également nul. Faisons des pagaies verticales par défaut comme ceci, puis elles ressembleront à ceci, mais maintenant nous avons un problème Ce n'est pas au centre. Pour le mettre au centre, je pense que dans ce design, oui, le design n' est pas au centre, donc ça ressemblera à ça, et nous corrigeons simplement ce problème puis nous le publions. Passons ensuite au héros deux sur le héros deux, nous aurons le même problème. Corrigons le problème en cliquant ici et en passant à « C'est allumé E fois, pointeur sera nul, rembourrage horizontal sera nul » Rembourrage vertical, gardons-le par défaut. Maintenant il se rapproche de plus en plus et ressemble assez à ce design C'est le problème qui a perturbé notre site Web. Maintenant, je vais aussi le publier. 91. 0118 hero du design 03 partie 2: Continuons le travail, et je clique simplement sur cette boîte à icônes. Et sur le design Figma, nous avons cette bordure bleu clair, mais dans Elemento, nous n' avons aucun moyen de l'ajouter Nous n'avons donc que la couleur primaire, c' est-à-dire la couleur de fond et la couleur secondaire comme couleur du texte Mais nous n'avons pas la possibilité d' ajouter une couleur de bordure. Donc, pour le réparer, nous pouvons utiliser la boîte à images. Téléchargez cette icône sous forme d'image. Ensuite, nous pouvons l' ajouter directement en tant qu'image. Pour ce faire, je vais sur la page de l'élément, puis je clique sur cet élément d'ajout, et ici je vais rechercher la boîte d'image. Ici, nous avons la boîte à images. Je vais juste le traîner et le corder comme ça. Ensuite, j'essaie simplement cliquer et de cliquer sur copier car nous avons déjà le style E. Nous pouvons donc directement coller ce style en cliquant avec le bouton droit de la souris ici et en cliquant sur Style de phase OK, ajoutons maintenant ces informations. Pour ajouter ces informations, isolez la boîte à icônes, accédez à la page de contact. Ici, je copierai le titre et je viendrai ici, puis je suivrai le rythme du titre. Ensuite, venez ici et copiez la description, et ici, suivez simplement le rythme de la description. Comme ça. OK. Maintenant, nous allons devoir passer au style E et c'est déjà au milieu. Supprimons cette partie, nous n'en avons plus besoin, donc je la supprime simplement. OK. Ensuite, ce que je peux faire, c'est cliquer ici et ajouter d' abord cette icône. Sélectionnez l'icône. Ici, nous avons cette couche de panicon et allez ici, cliquez sur Exporter et ici, définissez le format PNG et cliquez sur l'icône Exporter le pion P. Il vient d'être exporté. Allons-y ici. Cliquez ici et je vais simplement faire glisser et dérober l'icône comme ceci. Maintenant, je clique sur cette icône de sélection, elle est ajoutée comme ça et à partir de là, je vais définir les tailles complètes et maintenant passons aux Estyles dans Estils Je vais cliquer sur l'image. Image, je vais définir la largeur à 100 %, le type de bordure aucun. En fait, faisons la largeur comme ceci jusqu'à ce qu'elle ne corresponde pas à cette taille Maintenant, je vais avancer. Maintenant, nous devons l'aligner pour l'aligner, passer au style, cliquer sur la case, et ici l'espacement des images est de 15 Mettons-le à zéro. Et maintenant ça ressemble à ça et il va falloir l'augmenter un peu comme ça. Alors corrigeons ce problème correctement. Donc, dans la boîte de réception, j'ajouterai un alignement vertical en haut, puis l'alignement sera laissé. Et puis l'espacement des images, faisons comme si nous voyions l' espacement des images ici. Ça l'est aussi. Allons-y. Non, c'est un outil. L'espacement entre les contenus est alors de dix. Faisons en sorte qu'il y en ait dix. OK. Passons ensuite à l'image dans l'image, je vais régler la largeur à 100%. Oui, alors c'est bon et allons-y pour avancer à l'avance. Je vais modifier cette coutume avec la valeur par défaut. Ici, la taille en sera une chaîne. OK. Maintenant, je vais cliquer sur publier et actualisons cette page pour voir le w. actuel. Pour une raison ou une autre, il ne s'affiche pas correctement, alors ajustons ces éléments, et ici, la largeur devrait être 100 fixels comme ça et allons-y Nous avons un problème avec ce mariage, faisons en sorte que 100 % soit 100 %, et ensuite le contenu sera bon ici. J'ai l'air bien et la taille de l'image devrait être pleine. Ensuite, passez à l'avance, l' alignement lui-même sera au centre, ce qui devrait être le cas par défaut ou le cent pour cent le fera dévolter puis la taille Bien, mais pour une raison ou une autre, il ne s'affiche pas correctement. Et si on en changeait la largeur ? Nous allons changer la largeur de cette image à 50 comme ceci. Maintenant c'est beaucoup mieux. Ensuite, je vais avancer et définir la marge et le rembourrage à zéro Dans un appareil plus petit, cela ne fonctionne pas correctement. Diminuez cette taille comme ceci ici, supprimons la largeur Lorsque nous retirons la largeur, elle s'affiche correctement et ici à l'avance, elle apparaît bien sur l'image. Ajoutons de la personnalisation avec ce 45 45, ce sera bien. Publions maintenant ce design et voyons-le sur le site Web adaptatif pour ordinateur de bureau. Nous allons dans l' outil réactif et copions ici, collons comme ceci, cliquons sur vérifier et définissons la taille du bureau. C'est plus grand. Et qu'en est-il de cette taille ? OK, c'est du travail hebdomadaire, et à peu près de cette taille, il fonctionne toujours chaque semaine. Et qu'en est-il ici ? OK. Quand nous en arrivons à ce 280 x 800, il faut tout gâcher pour le réparer Voyons les tailles d'entrée 50, 64, revenons ici et cliquons dessus Ensuite, dans chaque fichier, voyons l'espace entre les deux, c'est 44 Rendons-le un peu plus petit. Faisons en sorte que ce soit 34. Et maintenant publiez-le, puis ici, nous pouvons cliquer à nouveau sur Vérifier, et maintenant il s'affiche correctement. OK. Passons maintenant à la partie suivante du site Web, qui consiste à ajouter cette bordure. Pour ajouter cette bordure, nous pouvons aller ici et cliquer sur ce conteneur principal et aller pour avancer sur Advance, nous devrions voir la bordure. À l'avance, nous n' avons pas de frontière, n'est-ce pas ? Oui, pas à l'avance. Passons à Estyle InStyle, nous avons une bordure. La bordure sera donc solide et cliquez ici. Alors voyons la frontière d'ici. OK, ici, la bordure est deux et la couleur est cette couleur. Alors copiez la couleur, venez ici. La bordure sera de deux, et ici seulement nous devons la placer en bas et la couleur de la bordure sera cette couleur. OK. Maintenant, ça va ressembler à ça. Ensuite, nous devons créer cette section. Pour créer cette section, je clique ici, je clique sur la case Cplex, je crée un nouveau conteneur comme celui-ci et je clique sur Advance on Advance Le motif droit sera de 140 et le rembourrage de gauche sera également de 140, comme celui-ci Ensuite, nous devons ajouter ce texte, donc je vais cliquer ici et Rag androper un titre comme celui-ci et La typographie est alors Cabin Medium 24. Passons à Estyle et la typographie est Cabin 24 Medium. valeur moyenne signifie 500, il suffit de copier le texte, de cliquer sur Contenu et de coller le texte comme ceci. Alors là, il faut changer de couleur. Copiez donc cette couleur de remplissage et mettez-la comme ceci. Ensuite, dans un article sur dix, c'est deux, et ici nous devons ajouter 50 pop ins en moyenne. Je duplique juste celui-ci et faisons-le entrer dans le style de la typographie Medium, 50 comme ça, alors copions le texte et collons-le ici comme ça. OK. Maintenant, je vais à nouveau cliquer sur ce conteneur et passer à la mise en page ici, l'écart doit être la ligne C et découvrons la hauteur moyenne. La hauteur moyenne est de 577. Faisons comme ça. Ici, l'article sera justifié au centre. Et faisons en sorte que ça se passe comme ça. Ensuite, je vais cliquer ici et accéder à eTyleoeStyle, cliquer sur Type d'arrière-plan et cliquer Téléchargeons ensuite cette image d'arrière-plan, cliquons dessus et cliquez sur Exporter. Définissons-le au format JPG, puis cliquez sur Exporter, comme ceci. Passons ensuite à Tiny PNG, cliquez ici. Il suffit de le faire glisser comme ça. Cliquez ensuite ici pour télécharger l'image optimisée et mettons-la ici. Cliquez sur Sélectionner et cela vient d'être ajouté comme ceci, et maintenant nous pouvons l'ajuster comme ceci Et là, il faut changer de couleur. La couleur est noire et l'article entre les côtés doit également être modifié, ce qui signifie que la ligne n'est pas l'élément entre les côtés. Faisons en sorte que la hauteur de la ligne soit 55 et agrandissons-la comme si cette couleur devait être le noir. Voyons maintenant que la taille de l'article entre les deux est un outil, alors cliquons sur le conteneur et passons à la mise en page dans la mise en page, l'écart entre les corbeaux devrait être de deux, comme celui-ci Ensuite, ce que nous devons ajouter, c'est le bouton. Ajoutons donc le bouton, cliquez ici, sur le bouton de recherche, et ajoutons simplement un bouton comme celui-ci. Ensuite, voyons le bouton prendre, copiez le texte du bouton. Donc, l' écart entre le texte du bouton est cabin medium 24, et c'est dans chaque cas, dis-le comme celui-ci , typographie, cabine, medium, 24 et la transformation devrait être en haut comme ça Voyons ensuite la taille intermédiaire. Le haut est 25, la gauche et la droite 30, 30. Faisons en sorte que ce soit 25 par 25. Cliquez ici, rendez-vous sur « Pas à l'avance » dans ce rembourrage. Faisons en sorte que ce soit 25, comme ça. Ensuite, la couleur doit être blanche et cette couleur bleu foncé et les coins doivent être nuls. La couleur est celle-ci et le blanc et cette couleur, le rayon de la bordure sera nul. Maintenant, nous avons un problème car le texte doit ressembler à ceci, pour le corriger, je vais passer à Advance and Advance, personnalisons-le avec 253 et il continue à grossir, c'est un problème et l'arrière-plan ne fonctionne pas comme il se doit. abord, résolvons ce problème pour le résoudre, je vais l'ajouter avec un fichier complet, puis ce que je peux faire est d'aller dans le contenu et d'ajouter ici BR. Ensuite, ajoutez ici le support BR SLA BR et fermez le support comme ceci , cela ne changera pas lorsque nous modifierons la taille de ce site Web. Nous avons maintenant un problème avec l' image de fond. Réparons-le. C'est facile. Cliquez sur le conteneur car nous ajoutons cette image au conteneur. Et cliquez sur la résolution de l'image maximum et la position sera au centre droit. Et quand on le verra, ça ressemblera à ça. Alors voilà, il ne nous reste plus qu'à répéter sans répéter cette couverture de paise Ensuite, si nous le vérifions, il ressemblera à ceci. Si nous le vérifions dans un petit appareil comme celui-ci, cela ressemblera à ceci. OK. Ici, nous avons un autre problème. Je pense que parce que cet espace est trop grand, non, il en va de même pour le design original. Donc oui, ici, nous créons simplement la troisième section des héros. 92. Elementor mis à jour 0119: Bonjour, tout le monde. Si nous allons sur le site Web, nous aurons une mise à jour. Il suffit donc de cliquer dessus, et voici la mise à jour de la version d' Elemento Passons donc aux plugins et cliquez sur Installer les plugins Nous avons ici la version 3.25 0.4 comme version actuelle, et nous avons la nouvelle version 3.26 0.2 Ici, nous avons un message intitulé Veuillez sauvegarder avant la mise à niveau, qui signifie que si nous voulons mettre à jour ce plugin, nous devons effectuer une sauvegarde de ce site Web car les mises à jour du plug-in peuvent endommager le site Web. Lorsque cela se produit, si nous avons une sauvegarde, nous pouvons la restaurer. Avant de mettre à jour ce plug-in, récupérons la sauvegarde. Je suis sur le panneau C sur le panneau C de Namecheap, j'installe ce Wordpress comme Wordpress l'utilise dans Softacula Si vous utilisez un autre hébergement Web, recherchez simplement sur Google leur système de sauvegarde et obtenez la sauvegarde. Dans ce cas, je clique sur WordPress géré par Softaculs et voici notre Il suffit de cliquer sur cette icône étroite vers le bas, et voici les détails de notre site Web. Et ici, nous avons un bouton vert appelé sauvegarde. suffit de cliquer dessus, et ici, il est indiqué que cette sauvegarde ne dure que 28 jours, mais c'est bon. Et à partir de là, nous pouvons ajouter un nœud. Je vais donc ajouter un nœud comme un élément ou une mise à jour du plugin pro. Et je vais définir emplacement de sauvegarde par défaut et ici je clique sur le bouton d'installation de sauvegarde et maintenant nous sauvegardons notre site Web WordPress. D'accord. Maintenant, nous avons obtenu la sauvegarde et je clique sur revenir à la gestion de WordPress. Et ici, si quelque chose arrive, lorsque nous mettons à jour l' élément ou le plugin, nous pouvons simplement cliquer sur ce bouton de sauvegarde ou de restauration du fstore Ensuite, nous avons les sauvegardes et si je clique sur ce nœud ou si je survole ce nœud, nous pouvons vérifier le nœud de sauvegarde que nous avons ajouté Voici donc la sauvegarde que nous venons de créer. Et si nous cliquons sur ce bouton Restaurer, cette sauvegarde lancera la restauration ou nous pouvons télécharger cette sauvegarde sur notre ordinateur local. OK, maintenant il est temps de mettre à jour le plugin. Il suffit donc d'aller sur la page de connexion, et ici je clique sur Mettre à jour maintenant, et la mise à jour est réussie. Je vais donc supprimer la page, et maintenant notre version est 3.26 0.2 Et si nous allons sur le site Web, le site Web fonctionne bien. Nous avons donc mis à jour le plugin avec succès. 93. 0120 claire du serveur Web: Bonjour à tous. Il est maintenant temps de convertir interface utilisateur de notre site Web FIGMA en site Web WordPress entièrement fonctionnel à l'aide d'Elementor Commençons par le faire étape par étape. Tout d'abord, je vais aller sur le tableau de bord WordPress et nous utilisons ce site Web WordPress pour créer nos pages de test. Il est maintenant temps de tous les supprimer. Alors allons-y. Tout d'abord, je vais au tableau de bord, le tableau de bord est clair, puis passons à Fst AposFstPage est clair, et passons Et voici quelques images. Cliquons sur la sélection groupée et sélectionnons toutes ces images comme celle-ci, puis cliquons sur Supprimer définitivement. Ou si vous avez beaucoup d'images, vous pouvez cliquer sur cette icône et cliquer ici, cocher cette case, puis supprimer toutes les images OK. Passons maintenant aux pages de Lpage Nous avons ces pages. Je vais cliquer ici et sur Action groupée, je vais cliquer sur Moto Trash puis sur Appliquer. OK. Maintenant, je clique sur la corbeille et je clique ici. Cliquez ensuite sur Supprimer définitivement, puis sur Appliquer. OK. Maintenant, la section de commande est claire et Elemento est clair, et vérifions le modèle de sauvegarde Et voici le modèle de zone à venir, mais nous en avons toujours besoin car si nous vérifions l'affichage de la page, il ressemblera à ceci. En fait, nous avons ici un problème. Corrigeons-le donc dans la prochaine leçon. Pour ce nouveau site web, nous avons besoin d'une page son. Revenez en arrière et passons à l'apparence et aux thèmes des thèmes Nous avons ce thème d'éléments Halo et nous allons utiliser ce thème Halo Elementor, donc je vais le garder comme ça Si vous avez un thème différent, vous pouvez simplement cliquer dessus sur le bouton « Nouveau thème » et rechercher « Hello, elemento like this Ainsi, lorsque vous le ferez, vous obtiendrez ce type de thème, cliquez dessus, et ici vous verrez Installer le thème, suffit de cliquer et d' activer le thème. Je l'ai déjà fait, alors maintenant je le ferme et sur les plugins, cliquez sur Installer le plugin. Nous avons Elemento et le plugin Elemento, que nous allons utiliser pour créer le site Web à partir de zéro et, une fois l'utilisateur, accéder à El Ici, nous n'avons qu'un utilisateur administrateur, et pour l'instant tout va bien, je vais passer au tableau de bord. Il est maintenant temps de passer à l'étape suivante, qui est la configuration latérale, et nous allons le faire dans la leçon suivante. 94. Polices et couleurs globales elementor 0121: OK. Il est maintenant temps de configurer les paramètres du site. Ainsi, lorsque nous examinons le design de notre Figma, nous avons déjà la taille de la version de bureau et le rembourrage du site Web C'est donc 140. Nous pouvons donc définir ces éléments sur le site Web d'Elemento. Alors faisons-le. Me voici sur le tableau de bord Wordpress, et dans un premier temps, je vais aller à la page d'accueil d'Elementor et je vais supprimer cette partie Ici, nous pouvons cliquer sur le côté indiqué. Il me suffit donc de cliquer sur Personnaliser. Lorsque je clique sur Personnaliser, je dois créer notre première page car nous n'en avons actuellement aucune. Commençons donc par là. Ici, nous avons un élément de message ou des données, il suffit de cliquer dessus, de cliquer ici pour l'exécuter maintenant et supprimons ce message comme ceci. Ensuite, je clique sur Nouvelle page et ajoutons le titre. Cette page sera notre page d'accueil et si nous allons sur le site Web, le nom de notre page d'accueil devrait être ce nom de site Web. Ici, nous avons les exigences de conception Web, le nom de l'entreprise ou le nom du site Web est JB Family Clinic, donc je le copie et le colle ici, puis je clique sur cette modification avec le bouton Elementor OK Je suis maintenant sur l'éditeur Elemento. Allons nous asseoir à partir d'ici. Pour ce faire, je clique sur cette icône de configuration du site, et voici les détails. Allons-y un par un. Tout d'abord, nous devons indiquer que nous pouvons définir le système de conception. Le système de conception Click here est un ensemble de composants réutilisables avec des normes d'utilisation clairement définies. Sur Elemento, nous pouvons utiliser couleurs globales et des polices globales en tant que système de conception. Nous pouvons créer des couleurs et des polices réutilisables. Tout d'abord, cliquez sur les couleurs globales et ici nous pouvons définir les couleurs. Si nous passons au design de Figma et sur notre fiche Ithica, nous pouvons voir les couleurs du site Web Définissons ces couleurs. Tout d'abord, nous avons cette couleur bleue il suffit de sélectionner le rectangle et en le remplissant, nous pouvons voir le code couleur, le sélectionner et le copier. Alors viens ici. Définissons-le comme principal. Alors ici, cliquez sur la couleur et collez la couleur comme ceci. OK. Alors allons-y. Nous avons ici la couleur secondaire. Il est en fait blanc, alors ajoutons-le comme ça. Ensuite, nous devons ajouter notre troisième couleur ou couleur de texte. Il suffit donc de le copier et ici, ajoutons la couleur du texte. Et nous n'avons que trois couleurs principales. Mais si nous vérifions le design, nous pouvons voir ce type de couleur bleu clair, je vais donc simplement le copier et nous pouvons l'ajouter comme couleur d'accent comme celle-ci. Mais dans votre cas, si vous n'avez que trois couleurs, vous pouvez simplement ignorer la couleur d'accent. Si vous avez plus de trois couleurs, vous pouvez cliquer dessus sur le bouton Couleur, et ici vous pouvez ajouter un nom à la couleur. Je vais donc ajouter Tn ou la couleur du bouton et ici je peux sélectionner la couleur comme je le souhaite. Vous pouvez créer autant de couleurs que possible, mais dans ce cas, nous n'avons pas besoin de couleurs personnalisées. Donc, je passe cela et nous avons ici le bouton de suppression, donc je clique sur Supprimer et je clique ici. Fais-le. OK. Maintenant, je vais cliquer sur Enregistrer les modifications. Et ici, nous avons également une section de polices globale. Ou si nous revenons en arrière, je clique sur Exit et revenons au réglage des sièges. Et si nous vérifions ici, nous pouvons cliquer sur cette police globale. Lorsque nous cliquons dessus, il est redirigé vers la même page. C'est comme un onglet. Maintenant, en ce qui concerne la police, si nous accédons à notre fichier Figma et à la typographie, nous pouvons voir les détails de la police que nous utilisons sur nous pouvons voir les détails de ce site Web OK, ajoutons les détails de la police. Ici, nous avons un en-tête en tant que lato 60 regular. Passons donc au site Web de WordPress, et voici le principal, cliquez dessus, et ici je définirai la famille de polices comme LTO Ensuite, la taille est 60 et la hauteur est régulière. Cela signifie normal in elemento. Maintenant, nous avons la police et ajoutons la hauteur de ligne car 36, 36 suffiront. Et l'avantage de définir ces paramètres ou ces polices et couleurs que nous pouvons réutiliser ces éléments dans le design. Passons à un exemple. Pour ce faire, je clique simplement sur Concevoir les modifications et revenons en arrière. Je clique simplement sur Plus et Flexbox, puis je crée une colonne temporelle directe et ici, clique sur Ajouter un élément et ajoutons un titre Ensuite, je vais dupliquer ce titre trois fois et ici je clique sur le titre pour le modifier et je clique sur Je Ici, nous avons configuré la typographie. Nous allons sélectionner le primaire comme tiographie. Maintenant, nous avons un problème. La hauteur de la ligne est trop proche, alors essayons de la corriger à partir d'ici. Faisons en sorte que la ligne 55 vaille la peine. Et maintenant, ce que je dois faire, c'est passer au réglage des assises , puis aux polices globales. Ici la taille principale sera la hauteur de la ligne de texte principale sera de 55. OK. Maintenant, enregistrons les modifications et revenons à la conception. Faisons maintenant de cette couleur la couleur du texte, et ici, faisons de cette couleur la couleur de la couleur d'accent. OK. Maintenant, je vais dupliquer ce texte en couleur d'accent deux fois, ce qui vous aidera à comprendre le pouvoir des couleurs et de la typographie prédéfinies Alors maintenant je clique sur Fablish, c'est bon. Publiez cette page. Maintenant, imaginez ce type de scénario. Le client de ce site Web souhaite donc changer cette couleur bleu clair en rouge et pense que nous avons ce type de texte, et pense que nous avons ce type de comme 60 textes remplis dans cette couleur, champ de texte ou des boutons de cette couleur. Et si nous voulons changer cette couleur bleu clair, nous devons modifier ces 60 textes manuellement en utilisant style et en le modifiant à partir d'ici comme ceci. Mais si nous parlons de variables globales ou de couleurs globales, nous pouvons simplement changer cette couleur dans le réglage latéral et cela affectera le site Web d'automne. Passons au réglage du siège et je passe à couleur globale. Nous devons changer en rouge comme ça, la changer en rouge comme ça, changer en rouge comme ça, puis je clique sur concevoir les modifications et cela s'applique à l'ensemble du site Web. Je clique sur Retour à l'éditeur, et maintenant vous voyez ces deux textes devenir rouges parce que nous avons défini la propriété de couleur globale de ce texte. C'est l'avantage. Et si vous devez modifier cette taille de texte, si vous utilisez une typographie globale ou une police globale, vous pouvez simplement modifier ce paramètre dans le paramètre de taille et cela affectera l'ensemble du site Web J'espère que vous comprenez pourquoi nous allons définir ce type de polices et de couleurs globales. OK, passons maintenant au texte secondaire. Le texte secondaire est donc fig tree 25 regular. Faisons en sorte que la police soit fk tree, 25, et que la largeur soit un nom normal. Réglez cette hauteur de ligne sur automatique en tant que typographie sur la typographie Figma, donc ce sera facile, réglez-la comme Otto comme ceci et faisons de même ici La hauteur de ligne est automatique et en cas de problème, nous pouvons simplement la modifier à partir d'ici, puis nous devons changer le type de texte. Le texte correspond aux polices de ce paragraphe. Le figuier est-il régulier ? Passons à un faux arbre 20, c' est normal et ici, la nuit des lignes est automatique, cliquez ici, cliquez sur le crayon et définissez-le comme Hto maintenant nous avons ici un axone En fait, je vais changer cet axone en bouton car ici nous l' avons sous forme de boutons Si nous le voulons, nous pouvons modifier d'autres textes et le texte du bouton est Victory 20 normal. En fait, c'est moyen ici il faut le remplacer par moyen. Quoi qu'il en soit, c'est Factory 20 Medium et c'est en majuscules. Allons-y. Nous devrions être majuscules ici, usine 20, et non 25 20, avec cette médiane en demi-volume qui signifie semi-v et transformation OK, et la hauteur de ligne sera à nouveau automatique Oui, oui, oui, oui. OK. Maintenant, nous pouvons réellement renommer ces noms. Remplaçons le principal en en-tête et le sous-din est le texte secondaire, et ce texte du bouton, nous le changeons déjà, et ici nous mettons le texte en paragraphe pour que nous puissions le comprendre facilement Et en fait, nous devons changer cette couleur d'accent en bleu clair car nous apportons déjà des modifications. Copions le code couleur et mettons-le ici comme ça. Cliquez sur Enregistrer les modifications, et maintenant je clique sur cette croix car nous devons configurer d'autres éléments. Encore une fois, je dois aller dans les paramètres du site, cliquer sur les paramètres du site. OK, maintenant nous définissons les couleurs globales et la police globale. 95. Configuration du site 0122: Bonjour, tout le monde. Maintenant , nous pouvons ignorer le style du thème car les paramètres hérités par le thème, nous allons concevoir notre site Web à partir de zéro couleurs et polices globales du système de conception sont suffisantes pour concevoir le site Web, puis nous devons passer aux paramètres. Dans SETNS, nous avons d'abord l'identité du site. Il suffit donc de cliquer dessus, et ici il faut ajouter le nom au site. Passons donc à notre design Figma. Et ici, exigence de conception du site Web, je copierai le nom de l'entreprise ou le nom du site Web. Ou nous pouvons aller ici et vérifier les leaders à partir d'ici et je les colle comme ça. Ensuite, nous devons ajouter la description du site. Il s'agit de la description ou du slogan du site. Je vais copier ce titre comme description ou titre du site et il ressemblera à ceci, puis nous devons ajouter le logo du site, le logo du site est déjà créé Voici le logo de notre site Web, et je clique simplement sur ce logo BG et je vais sur Exporter lors de l'exportation, je classe le format au format PNG, puis je clique sur Exporter le logo GB, I Epoded Ensuite, je vais aller sur le site Web, cliquer ici et téléchargeons le site comme ceci. Ensuite, j'ajouterai l'ancien texte en tant que logo de la JB Family Clinic et je cliquerai sur Sélectionner, il vient d'être ajouté, puis nous devons ajouter le FVCon Nous n'avons actuellement pas d'icône Fv, je crois, ou en avons-nous ? Non, nous n'en créerons pas un rapidement pour ce faire. J'appuie simplement sur ce cadre, et là, je clique comme ça et F Vicon devrait être cinq bien par cinq. Eh bien, réglons le test de largeur et de hauteur f trop bien, cinq trop bien, comme ça Ensuite, je changerai ce cadre en icône FV. Maintenant, je vais passer aux ASEDS dans Assets. Cliquez sur «   créé » dans ce fichier. Ici, nous avons le logo Je clique simplement sur l'instance ISAT, je clique sur le logo, et je clique simplement sur cette icône de détachement de l'instance, puis je déplacerai cette partie de la clinique familiale et ici je vais En fait, nous devons augmenter la taille de la police. Allons-y. Je vais aller dans les fichiers et dans les fichiers, sélectionner le texte et l'agrandir. Ici, j'ajouterai 500, 500 c'est trop gros, 200. Ici, je dois changer cette taille, comme ça. Faisons en sorte que ce soit 300. Nous pouvons l'augmenter davantage de cette façon. Maintenant, je vais augmenter le et ça a l'air bien. Ensuite, je vois cette icône FV et je clique sur Exporter, puis sur l'icône Exporter FV, puis je clique sur le Ti fas PNG OK. Maintenant, je vais ici, je clique ici, Dangers, glisser et déposer l'icône des favoris et j'ajoute du texte. En fait, l'icône des favoris est vide, donc je ne les modifierai pas Je vais cliquer sur Supprimer définitivement, quelque chose s'est passé pendant le téléchargement. Je le ferai. Voici notre cadre d'icônes FV, mais c'est dans ce logo JB Je sélectionne simplement le texte JB clique sur l' icône FV et je le colle Il se trouve maintenant dans le cadre de l'icône FV. Ensuite, je vais OK, maintenant c'est bon, sélectionner l'icône Fav et cliquer sur le port FV Alors mettons-le comme ça et coupons-le, copions-le ici, puis collons-le comme ça. Cliquez ensuite sur CLX, puis sur Enregistrer les modifications pour enregistrer ces éléments et revenons en arrière Maintenant, révisons cette page pour voir le nouveau look est difficile lorsque nous les ajoutons. Actuellement, nous avons le titre et si nous prévisualisons ce site Web, la partie JB ou l'icône FAV apparaissent dans l'onglet OK Maintenant, nous devons configurer la mise en page, cliquer sur la mise en page, et sur la mise en page, abord, nous avons la largeur du contenu. Si nous allons dans le fichier FIGMA et vérifions sur la page d'accueil, sélectionnez le cadre de la page d'accueil et ici la largeur est de 1 440 Ajoutons donc 1 440. Ensuite, il faut ajouter le rembourrage. Voyons le rembourrage actuel. Ici, nous avons un rembourrage, c'est-à-dire un rembourrage de 140, soit l'espace entre la gauche et la droite Par exemple, si je le mets à zéro, le design change comme ceci, mais si nous l'ajoutons 140, nous obtenons ce type de paddin ou d' espace entre les deux, de gauche à droite C'est 140, ici le côté droit est 140 et le côté gauche 140. Il y est déjà. Ensuite, nous avons des lacunes. Dans les espaces vides, nous avons une colonne et une ligne. Si nous le mettons à zéro, l'espace entre ces éléments sera égal à zéro. Mais si on en ajoute 50, ce sera 50. Voyons l'article entre les tailles. Ici, nous en avons 220 et ici, lorsque je sélectionne ou un élément et que je clique sur Y sur l'article suivant, nous pouvons voir la taille intermédiaire, donc c'est 220. Ajoutons Raw Gap ps 220. Je clique ensemble sur le bouton de la valeur du lien pour le décocher, la valeur brute sera alors 220 Alors qu'en est-il des lacunes ? Ici, l'écart est de deux. En fait, n'ajoutons pas un écart de colonne comme un écart entre deux éléments comme celui-ci, faisons-le manuellement. Je vais donc ajouter column gap Co. Ensuite, je clique sur Concevoir les modifications et la mise en page par défaut sera un élément de pleine largeur, comme ceci. Si nous sélectionnons un thème, les éléments du thème seront hérités, mais sélectionnons un élément de pleine largeur, puis cliquons sur Enregistrer les modifications. Conservons ensuite les points de rupture par défaut et revenons arrière. Nous avons correctement défini le réglage latéral. Maintenant, je vais fermer cet onglet Nous en sommes à la conception, et je vois ici un problème. Alors, cliquons comme ça. L'espace entre ce texte est alors trop grand. En fait, c'est corrigé lorsque nous rechargeons la page et jusqu'à présent, tout va bien, nous devons ajouter l'en-tête et le pied de page et c'est ce que nous allons faire dans la prochaine leçon Pour l'instant, je vais supprimer cette partie et cliquons sur Publier pour enregistrer 96. 0123 En-tête de conception 01: OK, maintenant nous devons commencer le design. Donc, dans Element, nous avons des modèles. Dans les modèles, je vais passer à Team Builder. Dans Team Builder, nous avons donc des sections de site Web. Ces sections sont donc répétées, et lorsque nous créons un design pour la section, il s'appliquera à l'ensemble du site. Par exemple, l'en-tête du site Web est assez similaire sur le site Web, ce qui signifie que si nous allons sur la page d'accueil, la section des menus sera la même, et si nous allons sur la page à propos ou sur le contact ou sur toute autre page, la section des menus sera la même section des menus ou l'en-tête sera le même. Nous pouvons donc créer des modèles pour les sections d'en-tête, pied de page et autres pages répétées du site Web, ce qui signifie que nous n'avons besoin de les créer qu' une seule fois et que nous pouvons les appliquer aux Dans ce cas, nous pouvons créer la partie d'en-tête en utilisant cette section de menu A, nous pouvons créer la partie putter Commençons par le design de l'en-tête. Pour le faire dans le générateur d'éléments ou de thèmes, je vais cliquer sur cette icône en forme de plus dans l'en-tête. Ensuite, nous aurons des modèles prédéfinis comme celui-ci, mais je ne sélectionne aucun d'entre eux, alors je clique simplement dessus pour fermer Je vais augmenter ce design comme ça. Ensuite, dans un premier temps, je vais créer un conteneur. Cliquez ici, cliquez sur la case Plex, cliquez sur ce conteneur de colonnes, et voyons la taille de cette section. Sa taille est donc de 120, donc définissons Mint comme 120 fixels comme ceci, puis je vais créer ce contenu en pleine largeur et ici j' ajouterai de la couleur de fond Ajoutons une petite couleur verte comme celle-ci car maintenant nous pouvons clairement voir où nous travaillons ? Maintenant, ajoutons d'abord ce logo à ajouter, cliquez sur cette icône en forme de plus pour obtenir le logo latéral, je fais simplement glisser et aligner un peu comme ceci. Ensuite, sur le conteneur, je définirai le centre de contenu de justification et la direction sous forme de ligne et je justifierai le contenu sous forme d'étoile comme ceci, puis un élément de ligne sera au centre. Créons maintenant cette section de menu pour créer le menu. Ici, je vais cliquer sur le menu de recherche d' un élément et ici je vais obtenir le menu WordPress. Disons-le comme ça et allons dans Estyle dans Estyle, la typographie sera Oui C'est la taille du bouton. Ensuite, en ce qui concerne le contenu, je vais définir l'alignement du texte comme centre et pour l'instant, définissons l'alignement comme point de départ. Ensuite, sur Estyle, changeons, d'habitude la couleur de test doit être , la couleur de test doit être la couleur et tout va bien pour le moment Cliquez sur l'image et dans le réglage de l'image, alignement doit être sur le plan et alignement automatique doit être au centre comme ceci Ensuite, créons simplement cette icône d'appel pour ce faire, je vais cliquer sur un élément et ici, créons une image bob comme celle-ci, ajoutons-la ici même. Ensuite, allez dans Estyle et dans la position de l'image, définissez-la comme ef et l'alignement sera réglé sur lap Voyons ensuite l' image en afficher six, définissons-la sur C. Maintenant, nous devons télécharger cette icône Cliquez sur l'icône ici et sur Exporter et PNG, cliquez sur Exporter, icône d'appel. Alors arrivons ici et cliquons sur la zone d'image sur le contenu, nous pouvons simplement cliquer sur le contenu. Encore une fois, enfilez ça. Ça peut me plaire. Cliquez ensuite sur C SLAC. Ajoutons maintenant les détails du texte, copions le texte et ajoutons le titre du test, puis copions le numéro et la description sous forme de disque. Passons maintenant au titre après le titre, cliquez sur l'image et l'image doit être 100 % réelle. N'ajoutons aucune taille à l'image avec 100 % réelle. N'ajoutons aucune taille à l'image Alors pour l'instant, conservons la largeur de l' image ou des éléments d'image comme celui-ci et passons au contenu du contenu ici Le type d'écart est Victory Medium 16, et pour l'ajouter, j'ajouterai du texte de paragraphe en fait, et voyons que sa taille est de deux, je vais juste le changer 16 et devrait-il être en gras ? Oui Et s'il s'agit du gaz supérieur, il doit être du regard supérieur et, en cas de transformation, je dirais qu'il s'agit du gaz supérieur comme ceci. Qu'en est-il de ce média ? Ce n'est pas normal, ça devrait être moyen. C'est bon. Alors la couleur est la couleur noire, cette couleur. C'est bon. Maintenant, voici ce que nous avons, c'est la figure 20 en gras. Ajoutons également ces détails. Sur la description, je vais placer le texte du paragraphe et maintenant je dois le modifier, sa taille est de 20 et avec ce gras, tout va bien pour le moment. Maintenant, je vais passer à l'avance qui devrait être pleine avec peut-être dérégler l' automatique en ligne. Cela sera corrigé comme ça et nous devrons changer la taille intermédiaire Voyons voir la taille intermédiaire, c'est Z. Passons à Etylectaspac, faisons-en six. Maintenant, cela ressemble à ceci, alors ce que nous devons faire est d' aller au contenu, pas au contenu, cliquer sur le conteneur et sur le conteneur, de cliquer sur Ispace de manière uniforme, donc il sera réglé comme ça et maintenant nous devons ajouter le menu car actuellement ce menu n'est pas le menu que nous voulons, ici nous avons le menu sur le blocage de notre fournisseur et de notre contact et la page d'accueil Cliquons sur cet élément de menu et ici dans le contenu, je vais cliquer sur G pour accéder à l'écran du menu et nous avons ici les menus que nous avons déjà créés. En fait, je vais les supprimer car nous n'avons plus besoin de ces éléments de menu comme celui-ci. Supprimons OK. Maintenant, je vais ajouter le nom du menu comme menu principal et cliquer sur Créer un menu et ici sur les pages, cliquer sur et ici je vais sélectionner la page Elementor comme page principale, et ici je vais changer le nom en home et maintenant nous devons ajouter d'autres pages d'abord à propos de la page En fait, pour l'instant, nous ajoutons simplement Dammnus comme ça pour le blog, puis nos fournisseurs et nous pouvons le copier, le coller ici sur Tumenu et cliquer sur sameno OK, maintenant nous avons le menu, donc allez à l'élément de la page et ici je clique sur publier et Il y a un brouillon, cliquez ici et cliquez sur Enregistrer le brouillon jusqu'à ce que nous ayons terminé le menu, puis je clique ici. En fait, je dois supprimer la page comme ça. Cliquez ensuite sur le menu et sélectionnez ici le menu principal. OK, maintenant allez dans Estil dans eTylef. Nous allons changer les couleurs et comment je vais changer la couleur du texte en couleur primaire En fait, nous n'avons pas besoin de pointeur. Passons au style en fonction du style, divisons ou quatre points seront nuls car nous n'avons pas besoin de pointeur. En fait, il devrait y avoir une option pour supprimer le pointeur ici, nous l'avons sur le contenu. Ce pointeur est nul. Définissons-le comme aucun, puis passons à Etie dans Estes, motif horizontal doit être zéro, motif vertical doit être zéro, l'espace entre les deux doit être 04 Et maintenant, vérifions ces espacements. Tout d'abord, l'espacement doit être 30 et l'espace entre les deux doit être de 30 30, c'est trop près. Je connais la raison de ce problème d'espacement. Si nous vérifions le design de Figma, il possède ce type de contenant blanc Créons ce conteneur et commençons à le modifier. Lors de l'ajout d'un élément, voici un conteneur. Je le traîne et je le corde comme ça. OK. Alors d'abord, changeons la direction de ce conteneur principal en colonne, et maintenant nous pouvons clairement voir les éléments, et voici le conteneur que j'ai ajouté. Je clique donc sur cette petite icône et je l'ouvre, puis je mettrai ce menu de logo dans une boîte d'image à l'intérieur de ce conteneur comme ceci. OK. Maintenant, cliquez sur le conteneur et cliquez sur la direction sous forme de ligne horizontale. Et ici, nous avons un problème avec l'espacement des adresses IP. La raison en est qu'il a ajouté le rembourrage 142 à gauche et à droite. Cliquons donc sur le contenant et passons à avancer sur la marge, retirons la marge sur le rembourrage, retirons le rembourrage Maintenant, cliquez sur le conteneur principal, puis sur le sous-conteneur et accédez à la mise en page sur la mise en page, définissez-le comme espace entre les deux Ajustons maintenant ces informations. Lorsque je sélectionne ce conteneur, je peux voir le bord de ce conteneur. Nous avons donc ici un espacement. Dans la zone d'image, je vais supprimer ce rythme en modifiant sa taille comme ceci et ici nous pouvons réduire la taille de la boîte d'image ou du logo Faisons en sorte que ça se passe comme ça. Maintenant qu'il s'affiche correctement et que nous avons un tissu d' alignement, cliquez sur le deuxième conteneur et cliquez sur aligner les éléments au centre. Cliquez ensuite sur cette image sur Advance. Ici, modifions-le comme dans Line Auto pour qu'il semble y avoir une marge en haut et en bas, alors ajoutons Dance et supprimons la marge. Supprimez la marge, cliquez ensemble sur la valeur du lien et ajoutons la marge négative en haut de la page comme ceci. Ensuite, en bas, nous avons la marge. Supprimons également cette marge. Maintenant, elle est parfaitement alignée, et si nous la vérifions dans la plus grande fenêtre, elle ressemblera à ceci, puis diminuons la taille de cette structure comme ceci afin d'en obtenir une conception claire. Il ne nous reste plus qu'à ajouter de la couleur blanche à ce conteneur. Pour ajouter la couleur blanche, je vais passer à C'est en arrière-plan chic, puis ici, ajoutons la couleur blanche La couleur secondaire est le blanc. Maintenant, je dois trouver l' espace I autour du menu. En fait, nous devons sélectionner le plus gros élément dans ce cas, c'est l'icône de ce téléphone. Donc, quand on le vérifie, il fait 29 et 15 à gauche et à droite. Ajoutons donc ces informations. À l'avance, le dessus du rembourrage est en fait « non », cliquez sur le contenant, et sur le dessus, il en fait 29 Puis à droite, 15 en bas, 15 à gauche, 29. Faisons comme si ce n'était pas sur la gauche, 15 à gauche et 30 en bas , pas 29. Faisons en sorte que ce soit 30. OK. Ensuite, nous devons trouver l'espace entre le coin supérieur et le menu. Il en est donc 20. Il suffit de sélectionner l'élément et de survoler l'élément situé à côté de l' élément sélectionné, puis d'appuyer sur tout et nous pouvons voir que l'espacement est de 20 Sélectionnons donc le conteneur principal et ajoutons une marge supérieure à 20 OK. Maintenant, nous devons ajouter des coins arrondis, voyons les coins arrondis. Les coins arrondis sont de 20 ou le rayon des coins est de 20 Pour obtenir le rayon des coins, allez à Itis et c'est à bord, ajoutez le rayon à 20. OK, juste comme ça, on peut voir le design. Maintenant, je peux cliquer sur le conteneur d'arrière-plan et supprimer l'arrière-plan comme ceci. Cliquez ensuite sur Publier. Avant de cliquer sur Publier, cliquez sur le paramètre d'en-tête, et sur le paramètre d'en-tête, changeons ce titre en-tête principal, puis cliquez sur Publier. Et lorsque je clique sur publier, une question s'appelle : où souhaitez-vous afficher votre modèle, et nous avons ici un bouton pour ajouter une condition. Je clique donc simplement sur ajouter une condition, et ici nous pouvons inclure ou exclure l'article. Je sélectionne donc inclure le site entier parce que je souhaite voir ce menu dans l'ensemble du site. Et nous pouvons ajouter d'autres conditions à titre d'exemple. Je veux l'exclure ou ne pas l' afficher sur la page d'accueil, nous pouvons cliquer sur singulier et ici nous pouvons sélectionner la page d'accueil, puis je peux cliquer sur San Clause. Dans ce cas, nous devons inclure ce menu sur l'ensemble du site Web Je le supprime et je clique sur Enregistrer et Clause, puis il vient d'être publié. Passons maintenant aux pages et pages ER et voici la page d'accueil Je clique simplement sur Modifier avec Element pour afficher notre menu. 159. Projet de classe: Toutes nos félicitations. Vous avez atteint la fin du cours de conception d'interface utilisateur de site Web personnalisé. Vous avez beaucoup appris en comprenant la structure d' un site Web pour créer un design unique qui se démarque. Avant de partir, nous avons un défi passionnant à vous proposer. Votre projet de classe. Votre projet consiste à créer un site Web personnalisé, interface utilisateur pour un restaurant. Appliquez tout ce que vous avez appris dans ce cours. Ne t'inquiète pas Je vais vous guider à travers les étapes une fois de plus. Dans cette section des ressources sur les projets de classe, vous trouverez ici une question du propriétaire du restaurant. Copiez-le et collez-le dans votre projet Figma et utilisez les informations pour guider votre conception Choisissez des couleurs et des polices qui correspondent aux restaurants, puis créez un logo simple mais professionnel. Marque Des idées de design de couleur et une inspiration adaptées à votre concept. Cela vous aidera à définir une orientation claire pour votre conception. Utilisez les instructions d'intelligence artificielle que vous avez apprises dans ce cours pour générer du contenu pour le site Web Laissez libre cours à votre créativité, concevez l'interface utilisateur du site Web section par section. Une fois que votre design est prêt, téléchargez-le dans la section de ce cours consacrée aux projets. C'est l'occasion de mettre en valeur vos compétences et de recueillir les commentaires des autres. Je suis très fier du processus que vous avez réalisé. réalisation de ce projet renforcera votre confiance et ajoutera de précieux frais à votre portefeuille. Si jamais vous vous sentez coincé, relisez les leçons ou posez une question dans la section de discussion Je suis là pour vous aider. Merci d'avoir appris avec moi. J'ai hâte de voir ton superbe design. Maintenant, allez-y et laissez libre cours à votre créativité. Rendons le monde plus beau. Un site Web à la fois.