Conception de site Web personnalisée : de Figma à WordPress avec Elementor Pro

1. Bienvenue sur la conception de site web personnalisé : De Figma à WordPress avec le cours Elementor Pro: Bonjour, tout le monde. Vous voulez apprendre à transformer le design ItanInfigma en sites Web WordPress FixLPerfect entièrement fonctionnels Si vous avez toujours rêvé de maîtriser l'ensemble du processus de conception Web , du concept initial au site en ligne, vous êtes au bon endroit Ce cours s'appelle la conception de sites Web personnalisés, Figma WordPress avec Elementor pro Est le guide ultime pour créer un site Web personnalisé professionnel qui se démarque vraiment. Nous n'allons pas simplement parler de choses. Nous nous intéressons de près à l'apprentissage pratique. Vous commencerez par maîtriser l'essentiel de la conception UI UX, comprenant ce qui rend le site Web convivial et visuellement captivant Ensuite, nous utiliserons Figma pour concevoir les interfaces Eine à partir de zéro Je vous guiderai dans tous formes de base aux tours automatiques en passant par les techniques avancées telles que les bibliothèques de composants et le système de conception. Ensuite, nous prendrons ces conceptions et les transformerons en véritables sites Web en utilisant Worress et l'approche par éléments Vous apprendrez à créer des mises en page réactives, personnaliser chaque détail et même optimiser les performances et le référencement de votre site Si je parle un peu de moi, je suis Gian Akalanga et je suis le fondateur d'UX Alchemy Web Ma passion est donc de partager mes connaissances et mon expérience avec les autres. C'est pourquoi j'ai créé ce cours. Dans ce cours, nous aborderons tout, de la collecte de l'inspiration en matière de design, à l'application du concept de design centré sur l'utilisateur, à la conception de sites Web conviviaux, en utilisant Figma Ensuite, nous aborderons la configuration de votre hébergement et de votre domaine, l'installation de WordPress et d'Element of Pro, jusqu'au lancement sur votre site en ligne. Vous apprendrez à le créer dans les sections des héros, à le concevoir, à vous engager dans des pages. Même un ensemble de fonctionnalités avancées telles que les fenêtres contextuelles et les analyses. Que vous soyez un débutant ou un designer chevronné qui cherche à développer ses compétences, ce cours est conçu pour vous mener de 0 à 0 Vous acquerrez la confiance et l'expérience nécessaires pour créer des sites Web professionnels qui impressionneront les clients et rehausseront votre profil À la fin de cette étape, vous serez en mesure de créer une superbe interface utilisateur dans Figma Créez un puissant site Web WordPress personnalisé avec Elemento Pro, maîtrisez la conception et l'optimisation réactives, mettez en œuvre les meilleures pratiques et analyses de référencement et, surtout, transformez votre vision du design en réalité Si vous souhaitez apprendre à utiliser des sites Web personnalisés ciblés, ce cours est fait pour vous. Je te verrai dans la classe. 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. 97. 0124 En-tête design 02: Bonjour, tout le monde. Maintenant, nous avons un problème. Je clique donc sur cette icône plus, et créons un conteneur simple. Et dans le cadre de la conception de notre site Web, cette image doit être l'image de couverture de la page d'accueil. Essayons donc d'ajouter cette image. Cliquez sur l'image et cliquez sur pour sélectionner le fichier PNG, puis cliquez sur Exporter et la taille de l'image est plus grande Je vais donc aller sur tiny png.com, puis sur le site tiny png.com, puis les radios de l'image cliquent sur le bouton JPG pour la télécharger. Maintenant, je dois aller sur la page d'accueil et ici, faisons en sorte que cette hauteur minimale soit Maintenant, je dois aller sur la page d'accueil et ici, faisons en sorte que cette hauteur minimale Voyons la hauteur minimale de cette section. C'est 800, la hauteur est 800, alors faisons en sorte que cela soit 800, pas 700, 800. OK. Maintenant, allez dans Estils in Estyle, cliquez sur Background et classic et ici je vais ajouter cette image Et cette balise ALT d'image ne sera pas liée. Image du héros et cliquez sur C. OK. Quand je l'ajoute, il s'est ajouté en dehors de ce menu. Nous en avons donc besoin dans le menu. Pour cela, nous pouvons donc ajouter une marge négative. Je clique donc sur ce conteneur et je vais avancer sur Advance, puis sur Margin. Et pour couronner le tout, j' ajouterai moins cent. Quand j'ajoute moins cent, c'est passer au-dessus et si on ajoute moins 200 ? C'est aller plus haut, mais nous pouvons obtenir la taille exacte que nous voulons ajouter car lorsque nous cliquons sur le menu et que nous vérifions que la hauteur est de 120, nous en avons 20 autres, soit 140. Ajoutons une marge négative de 140 et nous devons en ajouter 60, 60 ce sera du travail, peut-être 50. Oui, le 150 fonctionnera parfaitement. Alors maintenant, nous avons toujours un problème car nous ne pouvons pas voir l'arrière-plan. Pour l'instant, je vais cliquer sur publier, puis je vais aller sur l'en-tête pour accéder à l' en-tête, je vais aller sur le tableau de bord, Elementor, et non sur l'élément du modèle, Team Builder Team builder, on peut voir l'en-tête principal, cliquer dessus et ici cliquer sur Modifier. Nous pouvons corriger en ajoutant un index informatique à ce conteneur, sélectionnant le conteneur et en passant à l'étape suivante. Et si vous vous demandez ce qu'est un index informatique, cet index est une propriété CSS qui contrôle l'ordre Iacin des éléments TML sur une Par exemple, si nous en ajoutons un en tant qu'index informatique de ce conteneur, il apparaîtra au début d'un élément. Ainsi, la valeur de l'indice It la plus élevée apparaîtra devant un élément et la valeur inférieure de l'indice It apparaîtra au verso. Maintenant, je clique sur Publier et je vais ici, puis rebashons Tu vois, quand je le refonds, notre menu apparaissait comme 98. 0125 supprimer le pied de page par défaut: Bonjour, tout le monde. poursuivre le reste de la conception, retirons cette partie et allons-y étape par étape ou section par section. Pour supprimer cette partie, je vais aller sur le tableau de bord Tress. Ensuite, je vais passer à Templates and Them Builder. Sur Them Builder, ici, je clique sur Pied de page et je le ferme, puis ici, je clique sur l'icône Plus et sur la case CilletPlex, puis je crée un conteneur comme celui-ci, puis je clique sur Footer set in et ici je change le titre du pied de page principal comme ça, puis je clique sur Publier et cliquez sur à condition et il apparaîtra sur à condition et il apparaîtra Cliquez sur Enregistrer et fermer. Maintenant, si je vais sur la page d'accueil et ici, cliquez sur Modifier avec un élément En fait, nous n'avons pas encore configuré la page d'accueil Nous devons donc accéder au tableau de bord sur les pages du tableau de bord, cliquer sur les pages, et ici, cliquer sur Modifier avec élément. Et maintenant, nous ne voyons plus le bas de page ni ce contenu, alors construisons section par section Ainsi, nous pouvons facilement comprendre ce que nous faisons. 99. Conception de la section des héros 0126: Bonjour, tout le monde. Lorsque je visite la page d'accueil de notre site Web, est-ce que ce type d'espace dû au fait que nous n'avons pas encore configuré la page d'accueil. Configurons la page d'accueil. Pour ce faire, je vais me rendre sur le tableau de bord du site Web. Ensuite, je vais entrer dans le set et cliquer sur la lecture. En lisant, nous avons ici une phrase pour définir votre page d'accueil. Je vais la définir comme une page statique et ici, je vais définir la page d'accueil comme JB Family Ginic qui est le nom de la page d'accueil et je clique sur Enregistrer les modifications. Maintenant, si je visite le site Web, nous pouvons voir notre page d'accueil Maintenant, je vais à nouveau accéder au tableau de bord et poursuivons la conception. Sur les pages, nous pouvons trouver notre page d' accueil et ici je clique sur Modifier cet élément et nous devons créer cette section. J'ai déjà créé cette pièce, mais partons de zéro. Je vais le supprimer et voici à quoi ressemble la page. Lorsque vous créez une nouvelle page, elle doit ressembler à ceci car nous avons déjà configuré la partie d'en-tête. Ici, je clique sur cette icône de classe, choisis Flexbox et je sélectionne le conteneur de type de colonne de direction Et sur ce contenant, je le fixerai au poids total. Ensuite, sur la marge et les rembourrages avancés, puis sur la mise en page, nous pouvons ajouter une hauteur minimale Découvrons la hauteur minimale. La hauteur minimale est de 800 ou la hauteur est de 800, alors ajoutons-le comme ceci 800. OK. Maintenant, ajoutons une image avant de faire quoi que ce soit. Pour ajouter une image, nous devons télécharger, sélectionner l'image comme celle-ci, puis cliquer sur Exporter. Je vais l'exporter au format JPG, puis nous devons aller sur tinpng.com, et ici je vais le glisser-déposer comme puis nous devons aller sur tinpng.com, ça Ensuite, il indique la taille du fichier par radio. Cliquez sur JPG, JPEG pour le télécharger. Je vais maintenant passer au style de ce conteneur, et ici je vais sélectionner le type d'arrière-plan classique. Ensuite, je clique sur Choisir une image. Ici, j'ai déjà téléchargé l'image et vous pouvez télécharger l'image à télécharger en sélectionnant le vieillissement comme ceci. J'ai déjà configuré l'ancien texte et maintenant je clique sur sélectionner ici, nous devons ajouter quelques paramètres. La résolution de l'image sera la position au centre, et la pièce jointe est un défilement et une répétition, pas de répétition, taille d'écran de couverture. OK, maintenant ça va ressembler à ça, mais le problème est que ça devrait commencer à partir d'ici. En fait, nous avons déjà fait cette partie, donc la hauteur de cette pièce est de 120, et nous y ajoutons 20, donc ce sera 140, et cliquons sur le conteneur, et à l'avance, nous devons ajouter une marge négative de 140 peut-être 50. OK, 150 fonctionnent bien. Maintenant, nous l'avons juste configuré comme ceci. Maintenant, ce que nous devons faire, c'est dans cette section. C'est assez simple. Je vais copier le texte à partir d'ici et accéder à l'Elementor cliquer sur cette icône en forme de plus , puis mettre ce puis mettre Notre titre se trouve ici, alors corrigeons-le pour le corriger, je vais cliquer sur le conteneur et sur la section de mise en page du conteneur, nous pouvons définir où doit se trouver notre contenu Si je clique sur justifier le contenu, il arrivera ici et ici. C'est à ce rythme que nous voulons l'ajouter Pour une raison ou une autre, les rembourrages gauche et droit n' étaient pas configurés Ajoutons-les donc manuellement pour les ajouter, je clique sur le conteneur et je passe à Advance Sur Advance, j' ajouterai les paddins droits 140 et gauches 140 comme ceci OK. Maintenant, continuons ici, nous pouvons définir la typographie ici, la typographie sera l'en-tête et la couleur devrait être secondaire. Est de couleur blanche. OK, maintenant nous devrions avoir un espace d'ici pour le faire. Je vais passer au contenu et me voilà au BR comme ça. Ajoutez ensuite le paragraphe, copiez-le puis cliquez ici, puis ajoutons un titre comme celui-ci et changeons la balise TML du titre en P, et ici, ajoutons le contenu du texte et passons à Estyle Définissez ce texte comme paragraphe, voyez qu'il s'agit du 225 normal et quels seront les détails du texte du paragraphe. Pour vérifier le texte du paragraphe, je peux simplement cliquer sur cette modification à l'aide d'un bouton. Quand je le vérifie, c'est 220, donc c'est le problème. Et si on ajoutait un sous-titre ? Oui, c'est le sous-titre. Je vais le garder comme ça pour le moment, puis changeons la couleur du texte en blanc. Ensuite, nous devons ajouter ce bouton, ajouter ce bouton. Donc, pour ajouter ce bouton, je clique sur cet élément d'ajout, puis le bouton de recherche clique sur un bouton et je le dépose comme ça. OK, ajoutons ces détails. Ici, je vais copier le texte et venir ici, coller le texte comme ceci. Pour l'instant, gardons le lien aussi paso qu'un hashtag. Ensuite, il faut changer les couleurs. C'est facile, passez au style E et la couleur d'arrière-plan est cette couleur de texte bleue est cette couleur blanche. OK, maintenant ce que nous devons ajouter, c'est de l'espace. Sélectionnons donc le t et appuyons sur tout. 252-53-5305. Ajoutons ces détails dans le bloc-notes ici, puis 25 en haut, à droite, 35, en bas, 35 à droite. OK, maintenant nous devons vérifier les coins. Les coins 15. OK, voyons ce que dit la radio 15. OK, maintenant nous avons le titre, le texte et le bouton. Maintenant, ce que nous devons faire, c'est à BR à partir de ces points. Donc, ici au BR et au BR, bon contenu sur la famille et le BR comme celui-ci. Ensuite, nous avons assuré et publié le Bok Nice. Il ne nous reste plus qu'à trouver l'espace entre cette partie inférieure et cette section. Donc c'est 60. Ajoutons donc ces détails. Cliquez sur le conteneur, et à l'avance, nous devons ajouter un pad inférieur de 60 pixels comme celui-ci. OK, ça a l'air bien. Maintenant, je clique sur Enregistrer le brouillon et repassons-le. En fait, publions-le quand même car ce site Web est en mode Coming zone. Alors maintenant, si je rafraîchis la page, elle ressemblera Et là, nous avons un problème. Nous avons un espace pour nous affronter. OK, j'ai trouvé la raison de ce problème. Ainsi, lorsque nous configurons le réglage latéral, nous ajoutons un écart brut de mise en page par défaut au-delà de 220, je vais donc le supprimer. Lorsque je le supprimerai, ce problème sera résolu, et maintenant je clique sur Enregistrer les modifications. Ajoutons-le manuellement. Cliquez ici et nous avons déjà un peu d'espacement. Donc, pour le supprimer, nous pouvons ajouter une marge négative comme celle-ci. C'est en fait dix et si nous passons au design, la taille intermédiaire indique 20. Nous en avons donc déjà dix. Si nous supprimons cette marge négative, nous en avons déjà dix. Donc, si j'en ajoute dix comme ça, ce sera 20, donc nous devons le faire pour une section comme celle-ci, dix ou nous pouvons en ajouter dix à ce conteneur comme celui-ci. La même chose se produira. Ajoutons-en dix à ce contenant, car c'est le moyen le plus simple. Et oui. Lorsque nous le ferons, l'espace en question sera résolu et agréable. Maintenant, je clique sur Publier et maintenant si nous vérifions le design en vrai, il ressemblera à ceci. En fait, la taille du site Web sera généralement la suivante, mais comme je vous l'ai déjà dit, mon bureau est plus grand, c'est pourquoi il s' affiche comme ça. OK. Il ne nous reste plus qu'à ajouter de l'animation. Ajoutons une petite animation. Je clique d'abord ici, allons-y pour avancer. Dans Advance, je vais passer aux effets de mouvement. Sur les effets de mouvement, nous pouvons définir l'animation d'entrée. Ajoutons des choses simples, comme s'estomper ou rebondir c'est trop, écrire c'est trop. La décoloration sera basée. Ajoutons un fondu pour chaque section. Cliquez ici, cliquez sur Effets de mouvement, et par défaut, ajoutons du fondu. Et ici, effets de mouvement, cliquez sur Fading Down. Non, Padin ira bien. C'est bon. Vous pouvez maintenant publier et maintenant il sera chargé comme ça. C'est très simple car ce site Web est destiné aux professionnels et ajouter trop d'animation ne va pas bien. OK. Nous devons maintenant concevoir cette section. Concevons-le lors de la prochaine leçon. 100. 0127aboutsummerysection01 ALTERED: Concevons maintenant cette section. Je vais sur la page et ici je clique sur l'icône Plus et sur le livre Plax, puis sur celui-ci Ensuite, voyons que je sélectionne la section, puis que j'appuie sur tout et que je vérifie la taille intermédiaire. C'est un, deux, 20, et allons-y, je passe à l'avant de ce conteneur et je règle la marge supérieure de 1 à 20 comme ceci. Ensuite, nous devons trouver la hauteur, la hauteur est de 600. Ajoutons la disposition en hauteur dans la mise en page, la hauteur moyenne sera de 600. Maintenant, nous devrions avoir la direction horizontale brute et dans un premier temps, nous devons ajouter cette image. Pour ajouter l'image, nous devons la télécharger, double-cliquer dessus, cliquer sur Exporter la messagerie instantanée et ici, allons sur tiny png.com et téléchargeons Dragan op ici pour l'optimiser En fait, il se télécharge au format PNG, mais nous n'en avons pas besoin au format PNG. Voyons si nous le téléchargeons au format JPG, nous aurons peut-être plus d' espace ou si nous pouvons obtenir image beaucoup plus petite, comme C ici, nous avons 90 kilo-octets, mais ici nous en avons 26 kilo-octets mais ici OK. Maintenant, je vais aller ici et cliquer sur l'icône Con plus, puis rechercher une image, un chiffon et une boîte d'image comme celle-ci, cliquer dessus et télécharger ici l' image et le titre Pour l'ancien tag, j'ajouterai « like doctor at JB Family Clinic », car cela contribuera à augmenter l'optimisation des moteurs de recherche Ensuite, je clique ici et c'est au centre. Mettons-le au centre en cliquant sur cette icône centrale sur le conteneur. Maintenant, il ne reste plus qu'à ajouter ces deux éléments. Commençons par ceci pour ajouter ceci, je peux simplement créer un conteneur, puis nous pouvons ajouter ces deux sous forme de texte. Faisons-le d'abord. Nous devons cliquer ici et ajouter le conteneur. Ajoutons un conteneur comme celui-ci. Maintenant, ce que nous devons faire est d'ajouter aux titres celui-ci, puis de cliquer ici sur un deuxième titre comme celui-ci, puis de copier ce texte ici, je le copie et le colle comme ça, puis je copie celui-ci et je le colle ici Maintenant, passez au style et la taille du texte doit être P normale, ce qui signifie que nous l'avons déjà configuré sous forme de paragraphe comme celui-ci. Alors je pense que c'est le titre. Voyons voir, c'est un titre, alors ajoutons de la couleur noire comme ceci Ensuite, nous devons nous faire une idée de l'espacement. Il semble que l'espacement soit d'environ six ex alors ajoutons l'espacement sous forme C. Cliquez ici et supprimez celui-ci, puis ajoutez comme Maintenant, il faut le placer au centre, cliquer sur le centre de la ligne. Ensuite, je vais avancer à l'avance, je vais définir la taille de la chaîne. Rien ne se passe. Ajoutons un bloc-notes. Découvrons le rembourrage et ajoutons-le. Ensuite, nous essaierons de modifier l'espacement. C'est 20 sur 20 et 12 sur 12. OK. Ajoutons ces détails ici : en haut comme deux, bien tester à droite, en bas comme deux, test à droite. Ensuite, nous devons le décréter. Diminons-le comme ça. Ça devrait être comme ça. Je l'ajuste manuellement, puis j'ai la couleur de fond et cette ombre. Ajoutons de la couleur de fond, nous devons faire en sorte que le coin soit 20. Ajoutons ces détails à ajouter, je clique ici et je clique sur Type d'arrière-plan. Ensuite, sélectionnez ici le fond en blanc. OK. Cliquez ensuite sur le tableau et voici l'ombre de la boîte. Allons voir les détails de l'ombre ici. Nous avons donc ici une section eff dans la section eff. Nous avons les détails. C'est la position zéro, zéro et nous 15, puis la couleur est la couleur noire avec 15 % d'opacité Ajoutons ces détails ici, nous devons définir le flou 15 et la couleur au noir, puis définir l'opacité Pour définir l'opacité, nous devons en fait obtenir le code couleur Pour ce faire, je sélectionne d'abord la couleur noire, puis je passe à ce HA et là je la définis comme Hs L, et ici nous avons zéro, zéro, et ici nous en avons 15. Allons ici et réduisons ces deux valeurs jusqu'à ce que la dernière valeur de ce HSL atteigne 0,15, et maintenant ça s'affiche comme ça OK. Maintenant, ce que nous devons faire, c'est ajouter un coin de dés égal à 20 comme ceci. OK, nous venons de créer cette section, et elle semble bonne, et maintenant ce que et elle semble bonne, nous devons faire est de l'ajouter ici pour l'ajouter dans cette position Je vais la définir comme absolue, et maintenant je peux changer de place, mais quand nous la définissons comme absolue, notre modification de conception corrigeons ce mais quand nous la définissons comme absolue, problème pour le résoudre, je passe à la mise en page et évaluons le résultat jusqu'à ce qu'il soit défini comme ceci. Maintenant, je peux avancer et partir comme je veux. En fait, à partir de là, nous avons un problème, je vais le définir comme complet et pour une raison quelconque, il deviendra plus important que cela, nous allons changer cette coutume par défaut comme celle-ci. Maintenant c'est parfait, cliquez ici, puis définissez ces paramètres pour le régler, nous devons vérifier la position, elle est donc là, alors ajustons-la. Cela semble bien, peut-être que nous ajoutons trop d'espacement, alors changeons ce haut à deux puits et ce bas à un puits similaire Maintenant, nous devons le faire car cela semble bon maintenant et maintenant ce que nous devons faire est de créer cette section. Pour créer cette section, je vais créer une boîte d'image. Avec la boîte d'image, nous pouvons facilement créer cette section, cliquer ici et rechercher une image ou ajouter une boîte d'icônes parce que c'est une icône, peut-être ajoutons une boîte d'image car à l'avenir, nous pourrons la modifier si nous le voulons. Je l'ajoute simplement ici, je dois télécharger cette icône, cliquer sur l'icône, cliquer sur Exporter le vecteur, et là je copie le t et je viens ici, puis j'ajouterai le titre au fur et à mesure, puis je supprimerai cette description car nous n'avons pas besoin de description Voyons voir la taille. La taille est normale, 25 g par rapport au contenu, la couleur doit être le noir et la typographie doit être la suivante Nous devons maintenant supprimer cet espace entre l' icône et les réservoirs. Mettons zéro et sur l'image, nous pouvons utiliser la largeur, mais pour l'instant, gagnons l'image, cliquons ici et téléchargeons directement cette image et supprimons le titre, cela concilie ici nous avons un grand espacement, bon à styliser avec mais pour l'instant, gagnons l'image, cliquons ici et téléchargeons directement cette image et supprimons le titre, style, style espace de l'image pour qu'il n'arrive pas si nous ajoutons moins valeur ajoutée moins valeur ne changera rien Que devons-nous faire ? Je vais supprimer la marge et le rembourrage et passer au style E dans le style E. Non, je vais passer au contenu par contenu, changeons ce titre en D et c'est un peu mieux. Maintenant, il ne nous reste plus qu'à ajouter arrière-plan et cette ombre pour cela, je vais avancer à l'avance, je vais aller dans cette section d'arrière-plan et ici je clique sur le type de fond comme classique sur la couleur secondaire. Voyons maintenant l'espacement, à gauche et à droite comme en haut et en bas comme Examinons ces détails ici, en haut et en bas et 20 à gauche et à droite. Maintenant, nous devons réduire les angles en arrière-plan, nous devons en ajouter 20 parce que je pense que c'est 20 cents, la radio frontalière ou la radio d'angle coûte 20 cents. OK. Il faut maintenant ajouter cette ombre pour ajouter l'ombre. Nous devons vérifier les détails et ici, sur la bordure, nous pouvons vérifier les détails ici. Je vais cliquer sur ce x et copier ce code couleur pour que nous puissions directement modifier à partir d'ici, cliquer dessus et sur la bordure, cliquer sur l'ombre de la boîte, qui sera 15 et à ce code couleur Parfait. Maintenant, cliquez ici, puis nous devons le positionner de la même manière pour cela, vérifier la position, changer la valeur par défaut en absolue. Nous pouvons maintenant définir le décalage. C'est comme ça. Voyons voir, voyons que le E devrait être et celui-ci devrait être ici. Nous avons créé la section avec succès et nous devons maintenant ajouter ce texte. Ajoutons-le dans la prochaine leçon. 101. Section de résumé - Partie 02: Bien, nous devons maintenant créer cette section. Commençons donc. abord, nous devons ajouter un conteneur car c'est de manière verticale et cliquez ici pour ajouter un conteneur comme celui-ci. Lorsque nous passons en revue l'image, nous pouvons voir l'endroit où nous pouvons ajouter un conteneur, cliquer ici, passer à l'étape suivante, supprimer tous ces arrêts. Maintenant, je vais ajouter les colonnes de sélection : nous avons d'abord un titre, puis un paragraphe Nous devons faire le titre, le premier titre. Et le deuxième titre, le deuxième titre devrait être P parce que c'est un paragraphe et cliquez ici, puis copiez ce texte, collez-le comme ça, collez-le comme ça, puis changez le style pour qu'il prenne la couleur noire, puis copiez-le à nouveau et collez-le et ici nous devrions changer la typographie en couleur du paragraphe et du texte comme ceci nouveau et collez-le et ici nous devrions changer la typographie en couleur du paragraphe et du texte Nous devons maintenant ajouter l'espacement, donc l'espacement est de 20 Ajoutons un rythme pour l'ajouter rapidement sur le conteneur, et ici, pour ce qui est de la mise en page, ajoutons le format brut sous forme de 20. OK. Maintenant, ce que nous devons faire, c'est ajouter entre les espacements. Si l' espacement entre les deux est égal à 90. Réglons-le, cliquez ici, puis passez à Advance et nous pouvons simplement rechercher 90 dans la marge de gauche. Parfait. Il ne nous reste plus qu' à ajouter le bouton. Je vais ici le bouton de recherche et le bouton Dragon Opper comme ceci, puis nous devons ajouter le texte pour en savoir plus, comme ça Oublions le lien pour le moment et passons au style E dans le style E, changez le bouton typogravito et la couleur fond est cette couleur bleue et la couleur du texte est la couleur blanche Maintenant, voyons que le radio aquatique est 15 et ajoutons-le comme 15. Nous n'avons pas besoin d'ombre, il suffit de le supprimer en le réglant comme suit. Faites zéro et maintenant c'est bon, nous devons vérifier la taille intermédiaire. Inscrivez le texte et cliquez dessus et voici 2020 d'ici 30 ou 30. Ici, nous avons le rembourrage : top 20, droite 30, top 20, droite, 30 et bon Là encore, nous avons cet espacement, cet espacement étrange, et c'est un gros problème, mais il continue d'apparaître et nous n'avons rien à faire Pour y remédier, je vais simplement ajouter une marge négative. Maintenant, ce que nous devons faire, c'est ce bouton secondaire, c'est assez simple. Donc, cliquons ici et ajoutons le bouton ou nous pouvons simplement le dupliquer cliquant avec le bouton droit de la souris et en cliquant sur Obliger, puis nous devons ajouter un conteneur ici comme celui-ci Ensuite, ajoutons ces détails à l'intérieur du conteneur, cliquez ici et passez à zéro. Lors de la mise en page, ajoutez l'horizontale comme direction et la colonne sera de 20. Je crois que c'est 20. Oui, c'est 20. Maintenant, ce que nous devons faire est de supprimer l'arrière-plan pour supprimer la couleur d'arrière-plan. Je vais cliquer sur le bouton et passer au style, Je vais cliquer sur le bouton changer la couleur d'arrière-plan en transparent et changer la couleur du texte en primaire comme ceci. Ensuite, nous devons ajouter icône et modifier le texte. allons changer cela et pour ajouter l'icône, nous pouvons facilement cliquer sur Bibliothèque d'icônes. Nous avons ici la bibliothèque icônes fontosm et voyons le nom de cette icône En fait, il n'y a pas de nom pour cette icône. Nous pouvons simplement le vérifier d'ici. Cherchons comme une flèche. Ici, nous avons l'icône, cliquez dessus et cliquez sur Insérer, et ici nous pouvons définir la position de l'icône. Je vais ajouter la position des icônes comme ceci , puis nous pourrons définir l'espacement des icônes Voyons l'espacement entre les icônes. Définissons-le comme et nous devons ajouter un ESS personnalisé pour augmenter la taille de l'icône. Faisons-le donc dans la prochaine leçon. Là encore, je clique ici et nous devons le régler pour qu'il soit aligné au centre de l'article, afin qu'il soit correctement aligné au centre. OK, jusqu'ici tout va bien. Maintenant ça va ressembler à ça 102. Section de résumé - Partie 03: Bonjour, tout le monde. Nous devons maintenant augmenter la taille de cette icône. Pour cela, nous devons utiliser du CSS. Commençons donc. Je clique sur cette icône en forme de crayon pour modifier le bouton, et nous avons ici un endroit pour ajouter un identifiant à ce bouton. Je vais donc ajouter ID en tant que fournisseur BTN. Ajoutez simplement cet identifiant et quand je l'ajoute, je n'ajoute aucun espace car nous devons l' ajouter sur une seule ligne. Maintenant je le copie, puis je passe à Advance. Dans Advance, nous avons un endroit pour ajouter du CSS personnalisé. Maintenant, j'ai déjà créé l'identifiant, donc je sélectionne cet identifiant sur le CSS pour faire cette balise de hachage Ipress et je colle le nom de l'identifiant. Voici comment nous sélectionnons identifiant sur le CSS et maintenant je clique sur Ensuite, je clique sur Aperçu des modifications et sur le code CSS, il faut ajouter ce type de crochet pour ajouter du code DA. Maintenant, j'ai fait défiler la page vers le bas, il suffit d'écrire ici, cliquer sur et de cliquer sur Inspec Maintenant, je clique sur cette icône et je sélectionne l'icône comme celle-ci. Voici l'icône. Si nous cochons ici, notre identifiant est visible et maintenant nous devons sélectionner cette partie pour le faire, je peux copier cette classe puis venir ajouter de l'espace, nous utilisons un point pour sélectionner la classe comme ceci. OK. Maintenant, je vais ajouter le code pour augmenter la taille de cette icône. Cette icône est du texte, donc je vais ajouter du code comme la taille de la police, et ici je vais l'ajouter comme si 30 pixels étaient trop grands. Lorsque je l'ajoute, vous pouvez voir l'aperçu en direct. Qu'en est-il de 25 626, c'est mieux. Quand j'en ajoute 26, ça baisse, faut donc rattraper le retard. J'ajoute un point-virgule et ici j' ajouterai un petit code comme la marge en haut, la marge en haut, présentateur, puis ici j'en ajouterai Ajoutons moins dix pixels, c'est trop. Qu'en est-il de cinq ? C'est encore trop. Qu'en est-il de deux ? On dirait qu'un, non, deux seront deux, c'est l'alignement parfait. Nous avons réussi à agrandir l'icône de notre bouton et maintenant je clique sur publier et sur l'aperçu réel, cela ressemblera à ceci dans la vidéo suivante, ajoutons une animation à cette partie. 103. Section de résumé - Partie 04: Maintenant, nous devons ajouter une animation, allons-y. abord, je dois ajouter du moment à ces deux éléments lorsque nous faisons défiler le site Web. Commençons par le faire pour ce conteneur. Je sélectionne le conteneur ou je le sélectionne ici. En fait, c'est le conteneur. Je sélectionne le conteneur, puis avec style, vous pouvez voir l'effet de défilement. Cet effet de défilement s' applique aux éléments intérieurs. Cela ne fonctionne donc pas, nous devons ajouter un effet de défilement à toute cette section Pour ce faire, je clique sur «   avance » à l'avance, nous avons une section d'effets de mouvement. Dans l'effet de mouvement, nous pouvons ajouter cet effet de défilement. Dans l'effet de défilement, nous avons beaucoup d'options et nous avons ici une fonctionnalité permettant de sélectionner l' appareil sur lequel nous voulons utiliser l' Mais pour l'instant, restons comme ça. Ensuite, je dois ajouter le défilement vertical. Quand je le fais défiler, je dois le faire de haut en bas. faire, je clique sur cette icône en forme de crayon, et ici, lorsque je sélectionne l'effet de défilement, je peux le régler vers le bas ou vers le haut Donc, si je le configure comme configuré, il augmentera lorsque nous le ferons défiler. Lorsque nous le faisons défiler vers le bas, il montera vers le haut. Lorsque nous faisons défiler la page vers le haut, elle descend. Et j'ai besoin de le déposer. Je dois maintenant configurer le point de vue. OK, maintenant je monte et voyons les mouvements. Lorsque notre point de vue est là, nous pouvons afficher cette icône sur cette partie, mais je n'en ai pas besoin pour l'afficher ici. Donc, pour y remédier, je vais remplacer ce point de vue en bas par ici. Alors si j'appelle, ça partira d'ici. Vous voyez, lorsque le bas comme celui-ci commence à défiler vers le bas et que nous devons ajouter ce point de vue supérieur pour l'ajouter, nous devons descendre plus que cela, donc je vais ajouter un nouveau conteneur vide comme celui-ci. Ensuite, ajoutons que la hauteur moyenne est 800, voyons ici 800 c'est suffisant. Et sympa. Encore une fois, je clique ici sur une hache de danse et voilà, voyons voir et si notre haut de notre partie supérieure frappait comme ici, je dois passer uniquement à cette partie comme celle-ci. Maintenant, vous pouvez voir que cela change clairement et si je veux le rendre horizontal, je peux utiliser ce scolin horizontal Maintenant, ça va aller des deux côtés comme ça, mais j'aime bien le haut et le bas et pour cela, ajoutons du haut vers le bas. Pour ce faire, je sélectionne cette case d'image et je passe à l'avance. Nous passons au mouvement vers l'arrière et cliquez ici sur le défilement vertical, j'ajouterai la direction de, ce qui signifie que lorsque nous faisons défiler la page, cette section montera vers le haut. Réparons le W quand il arrivera ici, j'ai besoin que le haut descende comme ça. J'ai juste besoin d'y aller comme ça et de voir, c'est bien. Nous devons changer de position pour l'améliorer. Cliquez sur cette zone d'image et passons à mise en page. Dans le décalage vertical, mettons-le ici. Maintenant, je pense que cela devrait mieux fonctionner qu'avant ou pourquoi ne pas le placer ici au milieu ? Oui, lorsque nous l'ajouterons au milieu, il fonctionnera parfaitement. Sympa. Sympa, sympa. Passons maintenant aux effets de mouvement et cliquez ici. Ensuite, réglons le fond. Ici, je vais le faire. Ici, si ça se passe comme ça, je vais définir cette passe supérieure ici, puis faire défiler la page vers le haut, le défilement vers le haut fonctionnera correctement. Non, quelque chose ne va pas. En fait, nous devons placer cette position de mise en page plus centrale comme ça , voyons voir un problème. Mais maintenant je pense que ça marche bien. Ça marche bien. Nous devons certainement faire ce point. OK, maintenant ça marche. OK. Nous devons jouer avec les valeurs utilisées pour obtenir le meilleur effet de mouvement, et maintenant je trouve que ça fait du bien. OK. Il suffit de l'ajouter et ici, ajoutons l'effet de mouvement à toute cette section. Je clique donc sur la section et je vais sur Advance car l' ajout d'effets de mouvement et transactions ralentira le site Web Nous devons donc en tenir compte et j'ajoute ce type d'effet. Publions-le et voyons-le sur le vrai site Web. Oui, cela fonctionnera comme ça, mais cela ne devrait pas être similaire au design de l'en-tête. Voyons voir que l'effet de mouvement du contenu de cet en-tête s'estompe, nous devons donc ajouter un fondu dans cette section effets de mouvement, pas de décoloration des parties, comme celui-ci. Publiez-le. Maintenant, si vous vérifiez le design, oui, il ressemblera à ceci, nous avons ici un problème. Lorsque nous le faisons défiler de haut en bas, c'est à ce rythme que le rythme est Nous devons donc fixer le ruban adhésif sur le grand écran, mais nous devons quand même le corriger, non Pour le corriger sur la mise en page, je vais ajouter une touche personnalisée avec like, alors ça devrait aller. Je pense. Voyons voir, je peux publier et quelque chose ne va pas. Qu'est-ce que c'est ? Faisons disparaître cette structure et réduisons également cette section. Quand je le diminue, ce design s'agrandit de plus en plus et il y a un problème, nous devons le réparer à l'avance et voilà, faisons en sorte que le décalage rétrécisse, c'est bien. Le problème. Cliquons sur ce texte, plaçons le texte au centre et supprimons tous ces éléments Faisons de même avec toute la largeur et alignons le texte au centre, et voyons voir jusqu'à ce que le problème soit résolu. Pourquoi est-ce arrivé ? Je l'ai défini comme correctif avec quelque chose de o. Maintenant c'est possible, nous devons le définir dans fixel Faisons comme si 500, 500 c' est trop faible et 400, 200, 202 petits, 300, 300 c'est pour la deuxième semaine. En fait, nous pouvons vérifier la taille d'ici. La largeur est de 215. À quelle heure je le fais ? 215 devrait être le vent. OK. Maintenant, ça devrait aller. Vous voyez, petit correctif indiquant que le poids de passe est maintenant bon, publiez-le et voyons voir dans le design Oui, cela ressemblera à ça maintenant jusqu'à ce qu'il y ait un problème. En fait, essayons de le réparer aussi. Je pense à gauche et à droite comme ça. Mettons notre 250 personnalisé, peut-être que 200 200 conviendront. Pas d'amende. 15 publications. Maintenant, ça marche bien, d'accord. 104. Conception de sections de service - Partie 01: Bonjour, tout le monde. Nous devons maintenant concevoir cette section. Mais avant de concevoir cette section, nous devons trouver de meilleures icônes. Ces icônes ne sont pas belles et ne représentent pas le service que nous fournissons dans la section des services. De plus, ici, nous avons d'autres icônes et c'est mieux chez Slim icon. Pour trouver des icônes, nous pouvons utiliser un site Web comme Adobe Itok et des icônes de recherche ou nous pouvons utiliser les icônes Google pour utiliser des icônes Les icônes Google sont gratuites pour accéder à l'icône Google Material, vous pouvez simplement rechercher des icônes Google sur Google. Pour obtenir le symbole matériel et les icônes cliquez dessus et vous avez l'icône ici. Je dois changer l' apparence de ces icônes, je vais réduire la largeur à 200 et créer un tiret gris de 200. Alors la taille optique sera 40 weixel 40 weixel c'est mieux et ici le style sera arrondi et le arrondi et Je le sélectionne simplement et faisons en sorte que la note soit zéro, que l'icône soit un peu plus grande que 300 et que la note soit 200 et ici nous pouvons rechercher l'icône. Tout d'abord, nous devons remplacer cette icône de téléphone. Pour ce faire, il suffit de cliquer sur l'icône du téléphone et nous allons voir sa taille. Il fait 32 pixels avec cherchons ici comme un téléphone, ici nous avons une icône de téléphone et sélectionnons tout ce téléphone et ici nous devons faire en sorte que cette taille 32, appuyez sur Entrée et la couleur est blanche, faisons la couleur blanche et cliquez sur PNG, et l'icône a été téléchargée. Maintenant, allez ici et cliquez simplement ici image et vidéo, sélectionnez l'icône comme celle-ci et appuyez sur Entrée et maintenant vous pouvez simplement cliquer ici. Nous l'avons déjà sélectionné. En fait, vous devez sélectionner l'icône co ici, alors cliquez maintenant sur l'icône et mettez-la comme ça. Maintenant, ce que nous devons faire est réduire légèrement sa taille, nous devons sélectionner l'icône et diminuer sa taille comme ceci. En fait, il est conçu en 32 pixels. Quoi qu'il en soit, maintenant, fixons la hauteur car 32 32 c'est trop petit, tu ne trouves pas ? Oui, 32 c'est trop petit. Faisons en 48. 48 c'est mieux, gardons le 48 comme taille. Descendons maintenant et nous avons une infirmière. Cherchons ici comme infirmière Lorsque nous cherchons une infirmière, nous avons ce genre de choses. Cherchons comme à l'hôpital. Qu'en est-il de la santé ? OK, en matière de santé, cherchons. Trouvons une icône adaptée à ce rythme. Oui, cette icône ira bien. Sélectionnez-le, ou avons-nous des icônes différentes meilleures que celle-ci ? Non, à partir de ces icônes, cette icône lui conviendra. Essayons simplement de diminuer le poids. Obtenez une icône en forme de ligne fine, dont la couleur est bleue. Je vais simplement copier cette couleur bleue afin que nous puissions facilement changer la couleur de l'icône à partir d'ici comme ceci. D'accord. Ensuite, vérifions la taille. La taille est de 57. Fais-en 57. En fait, 57 c'est trop gros. Faisons en sorte que ce soit 48. Et cliquez sur Copier et télécharger GTU. Maintenant, allez ici, sélectionnez l'icône et cliquez sur image pour ajouter qu'elle n'a pas été mise à jour. Cliquez sur toute cette section pour l'ajouter comme ceci et le mettre comme ça. Maintenant, la taille est 57, réduisons cette taille à 57. Le 57 est trop petit. 98 auront l'air bien. Restons-en à neuf. En fait, la ligne 20 est plus grande que ce que j'imagine. Vous pouvez supprimer cet arrière-plan en cliquant ici et en cliquant sur le recadrage, puis nous pouvons copier l' arrière-plan comme ceci. Ensuite, nous aurons une meilleure icône. Et qu'en est-il de 30 à 57 ans ? Jusqu'ici, tout va bien. En fait, l'icône fine est plus belle que cette icône. Quoi qu'il en soit, faisons en sorte que le rouge égal à 100 et voyons l' apparence fine de l'icône fine. Voici le plus fin. Voici le plus fin. Cliquez ici et c'est fait. Quoi qu'il en soit Nous devons maintenant changer ces icônes. Passons d'abord au préambule et à la recherche. Ça a l'air bien. Cliquez ici Nous avons une bouteille de lait et elle a l'air bien ici. Nous devons trouver la taille de l'icône vectorielle. C'est 60 x 80. Faisons en sorte que ce soit un 60 et la couleur est bleue. Cliquez sur Confi eng Download sélectionnez cette icône ici et cliquez ici Ensuite, il suffit de l'ajouter comme ceci. Je n'en ai pas ajouté. Oh, je vois pourquoi cela n' ajoute rien parce que c' est un composant. Cliquez ici et cliquez sur Détacher l'instance, puis je pourrai ajouter que s'est-il passé ? Qu'est-ce qui s'est passé ici. Maintenant, ajoutons-le ici, il suffit de cliquer comme ça, puis de le sortir comme ça Diminuez maintenant sa taille. Que s'est-il passé ? Ici. En fait, je dois le supprimer , oh voyons cette image comme ça. Avec quoi figurait l'image ? Il est 60 ans. Sélectionnons l'image et faisons-la avec 60, non, pas bon, 120, la taille de l'arrière-plan doit être de 12110 La taille doit être de 110. Maintenant, je dois cliquer sur cette image, puis sur Recadrer et la placer comme ça parce que nous pouvons l' agrandir en supprimant cette taille inutile, puis je peux la faire passer à 60, donc présélectionnez puis je peux la faire passer à 60, donc présélectionnez l'image, appuyez sur Shift pour l'agrandir Il est six heures OK, ça a l'air bien, et voici ce texte, copions la partie sur la grossesse. OK, nous avons ici une image de grossesse et cliquez sur PNG pour la télécharger et remplaçons cette image. Cliquez sur cette image pour la supprimer. Et ici, ajoutons cette image. Nous venons de le télécharger ici, puis d'appuyer deux fois sur l'image et de recadrer l'espace inutile comme celui-ci. Nous pouvons maintenant diminuer sa taille, son décalage spatial et sa taille de cette manière. Maintenant, nous avons des femmes qui copient des femmes humaines. Cherchons P et nous avons ici des femmes. Nous pouvons simplement ajouter ce type d'icône féminine ou d'icône féminine comme ceci ou cette icône fonctionnera. Téléchargez-la et mettons-la , supprimez-la ici et pas si étroitement. Il suffit de cliquer dessus, de le coller dans la boîte comme ceci et de le mettre. Nous devons vérifier la taille jusqu'à présent, donc nous avons la médecine familiale, alors copions-la et collons-la comme ça, comme si c'était la famille. J'aimerais ajouter ce type d'icône car ce type d' icône cliquera sur PNG pour le télécharger et supprimer celui-ci. Rapidement, collez-le comme ça, puis appuyez sur Ajuster comme ça Maintenant, c'est bien. Il ne nous reste plus qu'à ajouter ces icônes à notre site Web WordPress. Cliquez sur cette icône et sur X quoi, cliquez sur Télécharger et allez sur le site Web et cliquez ici, puis cliquez ici et nous pouvons simplement le télécharger. C'est un très petit fichier, donc je peux OK. Oui, il suffit de le télécharger et de le faire comme ça et ça a l'air bien, cliquer sur publier pour enregistrer et maintenant nous pouvons commencer à concevoir ce sexe 105. Conception de sections de service - Partie 02: Bonjour, tout le monde. Créons maintenant cette section. Je passe donc à notre tableau de bord. Nous devons créer un conteneur comme celui-ci et voir sa taille. La hauteur moyenne était de 666. Passons ici Mnhight 66, six, et maintenant c'est bon, et ici nous devons ajouter ce titre pour l'ajouter, je le copie comme ça, puis je viens ici et j'ajoute le titre comme celui-ci, titre du visage et aller au réglage du style Aligner le centre et la couleur de l' en-tête et du texte des typographies devraient être de cette couleur noire et le texte doit être découpé d'ici, donc pour ce faire j'ajoute Frère, je dois vérifier C'est 120. Ajoutons-le, cliquez ici et allez sur Avancer, la marge supérieure est de 1 à 20. OK, jusqu'ici tout va bien. Nous devons maintenant ajouter cette section. Si vous consultez cette section, nous avons un carrousel Élément I Pour ajouter un carrousel, nous pouvons cliquer sur cet élément d'ajout et rechercher le carrousel Et quand je fais une recherche, nous obtenons ce type de résultat et ici j'ajoute simplement cet article de voiture. Maintenant, je dois supprimer ces choses inutiles. Tout d'abord, je vais supprimer la première diapositive et n'en conserver que deux. La diapositive affichée sera deux. Alors je vais aller ici, allons-y pour nous installer, c'est bon. Navigation, la navigation est correcte. Faisons des trucs géniaux une fois le design terminé. Maintenant, si vous vérifiez le design du boîtier, il est trop proche. Donc, pour y remédier, je clique sur ce conteneur d'édition, et maintenant, si nous cochons ici, nous pouvons vérifier le hashtag 1 via at Slider Donc, si nous le voulons, nous pouvons également le renommer. Mais pour l'instant, je vais le supprimer et ici, supprimons l'espacement comme ceci Maintenant, nous devons ajouter le pad gauche et le pad droit pour ajouter le pad, je clique sur le conteneur et ici je dois ajouter le padnas droit 140 et le padnus gauche OK. Maintenant, vite, nous avons deux conteneurs. Je sélectionne le causal et je vais sur Advance à l'avance, supprime d'abord tous ces éléments inutiles ici, nous devons d'abord ajouter ce titre et ici je recherche une zone d'image comme celle-ci, il suffit de mettre une boîte d'image à l'intérieur et avec une boîte d'image, nous pouvons terminer la tâche assez facilement alignement sera à gauche et la position de l'image est correcte. Je passe maintenant au contenu dans le contenu. Ajoutons ces détails comme ceci, puis copions celui-ci comme ceci et téléchargeons cette image, sélectionnons l'icône et exportons dans exxpot, cliquez sur l'icône Exporter Alors ici, je peux l'ajouter à un petit PNG, mais pour celui-ci, il suffit de le télécharger comme ça. Ajoutons le texte ALD dans cette partie pédiatrique et cliquez sur Consilate. Sélectionnez maintenant la case image et résolvons les problèmes Tout d'abord, découvrons que la taille intermédiaire est de 20 par 20. OK. Passez maintenant au style E avec style, Imagepason vaut 20, le contenu et le pacage sont 20 Maintenant, passez à l'image et la bordure de l'image n'est pas la largeur de l'image sera de 100 %. En fait, il ne s'agit pas d'une largeur d'image. De cette façon, l'image utilisera la taille par défaut et nous devons maintenant placer l'image au centre pour ce faire. Remplaçons ce STMLtg en D et passons maintenant au style E. En ce qui concerne le contenu, la couleur périodique doit être la couleur texte et la typographie doit être subfdée OK. Ou supprimez la marge et le rembourrage qui seront sur toute la largeur, alors ici, l' alignement vertical devrait être au milieu donc c'est bon. Maintenant, nous devons ajouter cette ombre de fond, ombres rocheuses ou cliquer sur l'ombre de roche et c'est 15 et nous avons les informations ici Faisons-le. Nous sommes prêts, si vous vous en souvenez, sélectionnez la case image pour avancer à l'avance, nous avons la bordure par bordure Commandez l'ombre du carnet, le nerf est 15 et la couleur doit passer à HL X, puis venez ici et la couleur doit changer pour cliquer ici et HXL sélectionner le CSS, copier le code couleur et venir ici Si le code couleur est comme celui-ci, il suffit d'ajouter une date et modifier le rayon de la bordure. Si nous vérifions le rayon de la bordure, la réduction du tableau est de 20, réduisons à 20. OK. Maintenant, notre drop shadow ne fonctionne plus. Vous souvenez-vous que le même problème s'est produit dans le design de Figma ? Et ce que nous avons fait, c'est simplement créer un rembourrage de 120, puis d'ajouter de la marge de 20 Faisons-le pour celui-ci. Pour cela, je sélectionne le conteneur. À l'avance, je change ce 140 en 120 et ici aussi je le fais 120. Cliquez ensuite ici. Pour ce curseur, je peux ajouter 20 pour le rembourrage droit et 20 pour le rembourrage gauche OK. Lorsque nous faisons cela, nous pouvons clairement voir la frontière. Comme nous devons ajouter le rembourrage supérieur à 20 et le rembourrage inférieur sera également Maintenant, nous devons ajouter le rembourrage de cette zone d'image, c'est ajouter le rembourrage de cette zone d'image, 20 et cliquer sur la zone d'image et ici, cliquer sur l'icône de la chaîne puis ajouter 20 Jusqu'à présent, tout va bien et ça ressemble à ça, alors ce que nous devons faire est simplement de dupliquer celui-ci et ici nous devons trouver la taille intermédiaire. C'est également 220, nous pouvons donc simplement cliquer ici. Ou pour la mise en page sur mise en page, nous pouvons en ajouter 20. Maintenant, je dois modifier ces informations. Modifions-les, copiez-les d'ici, cliquez ici et collez-les comme ceci et changez l' image pour la changer. Nous devons télécharger cette icône et copier ce texte pour l'ajouter à l'ancien texte et cliquer sur Masquer OK Maintenant, nous ne créons qu'un côté et maintenant je vais dupliquer cette diapositive parce que nous avons besoin du deuxième côté pour le faire Je vais sur Carsels et je clique sur ce bouton pour dupliquer le slider. Ici je vais ajouter le slider comme nom, et maintenant nous devons modifier les détails comme nous le faisions Comme ça, fais la même chose ici, juste comme ça. Pour exporter, cliquez sur l'icône Exporter ici. Lors de l'exportation, ajoutez ensuite la balise Al comme celle-ci, cliquez sur Consiler now are good et nous avons ici un problème Celui-ci est plus grand que celui-ci, pour le réparer, je clique sur cette boîte d'image et ici, clique sur grandir et il grandira comme ça et nous pouvons faire de même pour ces objets aussi. Nous avons maintenant un grand espace pour le retirer. Je clique sur Karasel et Incara. Je vais passer au style avec style, écart entre le ballon sera nul et la balle sera réduite, nous n'en avons pas besoin Maintenant, nous pouvons cliquer sur la diapositive 1 et ajouter le pavé droit sous forme de dix. Ensuite, cliquez sur celui-ci et passez à l'étape suivante en ajoutant le pavé gauche sous forme de dix. Ça a l'air bien maintenant. Ici, dans le carrousel, nous pouvons modifier les détails du contenu. Ici, nous pouvons ajouter le nom du carrousel, donc j'ajouterai des services, puis ici, nous devons ajouter un autre slider et quand j'ajoute le slider, je peux Pour ce faire, modifions les détails des points. Je devrais passer à la navigation dans la navigation, pas sur la flèche, ce devrait être la navigation sur la page. Dans le cas de la pagination, il est défini sous forme de points et allez dans Style de pagination Voyons le style. Je pense donc que le style est 220. Voyons donc, voici le jour J. Je vérifie juste le style, c'est 20. Faisons donc un espacement de 20. C'est l'espace par rapport au curseur. Voyons l'espace indiqué par le curseur. Je pense que c'est aussi 20, mais voyons voir. Oui, c'est 30, pas 20. Faisons en sorte que la position 30 soit le centre, puis la taille détermine la taille de ce point. C'est 20 par 20, faisons en sorte que la taille soit 20. L'espace entre les points sera de 20. N'est-ce pas ? Oui, 20 ans, quoi de moins ? Cela semble trop, alors faisons en sorte que dix, c'est encore trop. Fais comme si six c'était mieux. Et la couleur, je vais créer la couleur primaire fur et à mesure et notre couleur sera cette couleur d'accent. OK. Maintenant, cela fonctionne parfaitement et avons-nous des flèches ? Non, nous n'avons pas de flèches, donc je vais les supprimer pour les supprimer pour la navigation Je peux simplement définir zéro ou sur le contenu, voyons voir s'il existe un moyen de simplement supprimer cette partie de flèche et elle disparaîtra comme ça OK. Ajoutons maintenant d'autres contenus. Pour les ajouter, nous avons la liste des contenus. Alors allons-y. OK, voici le contenu, et nous devons l'ajouter à la diapositive suivante. Alors allons-y. Il suffit de le copier, de mettre du contenu et de le coller comme ça. Ensuite, copiez la petite description. En fait, ce n'est pas une petite description. La description du prêt doit être la partie que nous devons ajouter. Non, c'est une question de contenu de page. Voici le contenu selon lequel nous avons l'immunité et Maxine, copiez-le ici dans notre section de service, ajoutez le contenu à partir de là et soyez celui-ci, puis copiez la petite description, collez-la comme ça, telle qu'elle est ici et ajoutons d' abord le contenu, puis nous pouvons ajouter les titres soutien en santé mentale, description adamall, puis copiez-la , ajoutez-la ici et puis collez ceci. OK, collez-le ici. Sympa. Il faut maintenant ajouter les images. Donc, pour ajouter les images, copiez le texte d'ici , copions la partie vaccination et mettez-la sur le vaccin, ce sera le texte, mettez-le sur Google. Cliquez sur PNG pour le télécharger et ici, nous devons l'ajouter pour l' Je vais créer une instance de ce type, puis je vais la détacher, cliquer ici pour la détacher, puis je peux simplement remplacer cette image par l'icône et cliquer sur l'image et nous avons ici le vaccin comme ça Donc, nous passons à la hache et nous la fabriquons réellement, nous pouvons simplement l'ajouter comme ici En fait, il suffit de cliquer comme ça, puis de cliquer dessus et de le mettre à l'intérieur de l'icône, de supprimer ce vecteur et de diminuer cette taille comme ça et là, elle devrait être de la taille comme suit. Voyons voir les tailles 125, 110, faisons de cette icône une taille de 125, un OK. Maintenant, cela semble parfait et cliquez ici, puis sur Exporter, cliquez sur l'icône d'exportation, et je vais d'abord continuer, je vais le mettre ici, puis je continuerai à garder le générateur, copier ce texte, à passer au matériel et à le laisser comme ça. Alors prenons ce type d' icône et mettons-le ici. Je le configure comme ça, c' est bien, je l'exporte, puis je fais des recherches sur la santé mentale. Rechercher un mentor. Ici, nous avons la partie psychologie, téléchargez-la, allez ici et une image comme celle-ci, puis sélectionnez l'icône, cliquez sur l'icône Exporter, puis nous avons Counsel Search Health. Qu'en est-il de la nutrition ? Nutrition. Cette icône fonctionnera , téléchargez-la, cliquez ici et mettez-la comme ça. Je vais maintenant cliquer sur l'icône Exporter. Nous pouvons maintenant ajouter ces icônes. Cliquez sur cette boîte d'image, cliquez ici et nous avons d'abord l'icône. Je pense que c'est la première icône. Ça devrait être l'icône. Oui, oui, oui, c'est l'icône, copiez-la et copiez le titre pour ajouter un vieux texte. L'ajout de texte ancien est très important car cela aide à affermir votre site Web, à affermir cette image sur le moteur de recherche. Essayez toujours d'ajouter la balise L et ensuite ce que nous avons à ajouter. Je pense que celle-ci est en mental, je pense que j'ajoute la mauvaise image, mais c'est une image mentale, une santé mentale, et il suffit de ne pas l'ajouter pour le moment. En fait, la santé consiste à dépister et à prévenir les soins. La santé, c'est l'écran et les soins préventifs, cliquez dessus, et cela devrait être que la recherche ne peut pas le faire. En fait, je vais vérifier le design. Donc, je vois que celui-ci est le bon. Je peux maintenant diriger vers un espace et cliquer sur Sélectionner. OK, ici, on peut ajouter l'icône de la santé mentale comme ça. OK. Maintenant, nous pouvons ajouter cette icône Apple. Très bien, cliquez sur Publier. Voyons voir le design et notre design ressemblera à ceci . Nous pouvons en ajouter autres, il fonctionne parfaitement et nous pouvons ajouter autres éléments, comme des effets de couverture et d'autres éléments. Ajoutons-les après avoir conçu l'ensemble du site Web. Je pense que ce serait bien mieux que de l'ajouter d'ici. Ici, nous avons un problème à résoudre. Je vais juste cliquer sur Casel et passer à set in. Je vais supprimer le parchemin infini et je pense que cela résoudra le problème, publiez-le et maintenant voyons voir, voyons voir. Je ne corrige plus de défilement infini et plus de problème. Tout va bien pour l'instant et je vous verrai dans la prochaine leçon. Nous devons ajouter l'icône Her effect. En fait, ajoutons-les une fois le site Web terminé. Au revoir. 106. Amélioration de la sécurité: Bonjour, tout le monde. Avant d'aller plus loin, améliorons la sécurité de notre site WordPress. Il y a donc quelques choses que nous devons faire dans un premier temps, installons le plugin de sécurité. Je vais donc aller dans les plugins et cliquer sur Nouveau plugin. OK, ici je vais rechercher Word Pence. Vous allez maintenant voir Wordpens security by WordpensPlug in. Nous allons donc installer ce plugin. Cliquez sur Installer maintenant, et c'est en cours d'installation , puis je clique sur Activer. OK. Ici, je vais cliquer pour obtenir une licence Word Pens. Ici, nous avons un plan tarifaire, et je vais utiliser Word gratuitement Bland Ici, je clique sur Obtenir une licence gratuite, et ici je vais cliquer sur Je vais bien, attends 30 jours pour me protéger contre les nouveaux fils de discussion, cliquez dessus, et ici j'ajouterai mon e-mail. si vous souhaitez que l'alerte de sécurité et de vulnérabilité de WordPress vous soit envoyée par e-mail, je cliquerai sur Non , puis sur cette case à cocher pour accepter les termes et conditions. Ensuite, je clique sur s'inscrire. Maintenant, il va envoyer un e-mail à notre adresse e-mail. Je vais aller sur mon compte Gmail et vérifier l'e-mail et je l'ai reçu ici. Je vais simplement cliquer sur Installer ma licence automatiquement, et ici, elle sera redirigée vers le site Web et je cliquerai sur Installer la licence. OK, maintenant je clique sur. Accédez au tableau de bord. Très bien, nous avons installé avec succès le plugin de sécurité Wordpens sur notre site Web WordPress, et nous devons maintenant effectuer une certaine configuration Donc, dans un premier temps, vous verrez que nous avons un message pour activer la mise à jour automatique du plugin de sécurité Wordpress. Je clique donc sur Activer la mise à jour automatique. Si vous ne l'avez pas vu, vous pouvez l'ignorer, et maintenant, d'abord, je vais également cliquer sur ce pare-feu Vous verrez ici un message d'appel pour rendre votre site aussi sécurisé que possible. Prenez un moment pour optimiser pare-feu de votre application Web Wordpens Je clique donc sur cliquez ici pour le configurer OK. Vous allez maintenant obtenir ce type de fenêtre contextuelle. Ici, je vais sélectionner cette version recommandée et cliquer sur Télécharger le fichier HT Access pour télécharger notre fichier d'accès HD. Ici, je peux simplement cliquer sur Continuer et sur OK. Nous en sommes maintenant à la section du pare-feu et l' état du pare-feu de l'application Web est actuellement en mode apprentissage . Le pare-feu de notre site Web sera automatiquement activé au bout de quelques jours . Cela se produira le 13 février. Je vais le garder comme ça et maintenant je peux cliquer sur Ican et le supprimer. Ensuite, nous pouvons démarrer Ican. Je cliquerai sur Démarrer un nouvel Ican et cela lancera notre site Web. Ensuite, je vais passer à la sécurité de la connexion, supprimer et, pour ce qui est de la sécurité de la connexion , nous pouvons ajouter l' authentification à deux facteurs, mais je n'active généralement pas mais je n'active généralement pas l' authentification à deux facteurs pour notre site Web WordPress car j' ai notre site Web WordPress car j' ai un autre moyen de protéger notre page de connexion Pour l'instant, je vais cliquer sur Configurer pour configurer, faire défiler l'écran vers le bas et cliquer ici sur Activer la recapture lors de la connexion et page d'enregistrement des utilisateurs. Grâce à cette fonctionnalité, nous pouvons ajouter Google Recapture à notre site Web Je clique sur cette page d' administration de recapture et elle renvoie à notre Google recapture Page. Lorsque vous vous connectez à cette page, vous pouvez cliquer sur le bouton Créer, et nous pouvons y ajouter les détails de notre site Web. Ici, nous devons ajouter une étiquette. Ajoutons une étiquette comme notre nom de domaine. Comme ça, je vais juste ajouter uniquement le nom de domaine et le type de chapitre le sera. Ensuite, nous devons ajouter notre nom de domaine. Je vais simplement copier le nom de domaine, supprimer le contenu et n'utiliser que le nom de domaine avec .com ou Dans ce cas, des points, puis je clique sur Ajouter un domaine et l'ajout est réussi. Et là, nous devons configurer plateforme Google Cloud et j'ai la plateforme Google Cloud et j'ai déjà créé un projet sur Google Cloud Je vais donc choisir l'un d'entre eux, puis je clique sur Subm. Maintenant, nous avons la clé latérale et la clé de sécurité Je vais donc simplement les copier et les coller comme ça . Je vais donc simplement les copier et les coller comme ça, puis je clique sur Sauf si nous avons ajouté avec succès la sécurité de connexion pour le vérifier, je me déconnecterai du site Web et lorsque j'irai sur notre page de connexion WordPress, nous verrons cette protection par le logo f capter, qui signifie qu'elle a été ajoutée avec succès à notre site Web. Maintenant, je clique à nouveau sur Se connecter. OK. Ensuite, dans les stylos Word, passons au tableau de bord. Passons ensuite à la page de numérisation et vérifions le résultat. Aucun problème n'a été détecté pour le moment, et c'est une bonne chose. Si vous constatez des problèmes, vous pouvez les vérifier et les corriger. Je vais maintenant passer à L ptionSoelOptions, je vais conserver la plupart d' entre elles par défaut, et dans la préférence e-mail, je cocherai un e-mail si Wordpens est désactivé et un e-mail si le pare-feu des applications Web de Wordpens est désactivé, et je n'ai pas besoin de m' le pare-feu des applications Web de Wordpens est désactivé, et je n'ai pas besoin Si nous l'ajoutons, nous recevrons beaucoup de courriels, et je n'ai pas besoin de celui-ci. Je n'ai pas besoin de celui-ci. Si votre site Web contient beaucoup de fils de discussion, vous devez activer ces doublages, mais car ce n'est pas nécessaire Je n'ai pas besoin de celui-ci, de celui-ci, celui-ci, et je ne garde cette alarme que lorsqu' il y a une forte augmentation du nombre d' attaques détectées sur mon site Lorsque nous définirons ces préférences d' e-mail, nous recevrons les e-mails pour les mises à jour les plus nécessaires. Maintenant, je clique sur Enregistrer le changement 107. Changer l'URL de connexion WordPress: Bonjour, tout le monde. Nous pouvons accéder à n'importe quel site Web WordPress, page de connexion en utilisant. Bonjour, tout le monde. Nous pouvons accéder à n'importe quelle page de connexion WordPress en tapant notre site Web. IrlahwPadmin. Dans ce cas, le design personnalisé du site Web est marqué d'une barre oblique par un point WP admin N'importe qui peut accéder à la page de connexion de Word Press. La plupart du temps, nous utilisons le nom d'utilisateur en tant qu'administrateur et si quelqu'un lance un bot sur votre page de connexion ou essaie de deviner les informations de connexion, cette personne pourra accéder au tableau de bord WordPress. Pour résoudre ce problème, nous pouvons modifier URL de la page de connexion Wordpress. C'est ce que nous allons faire. Tout d'abord, je vais au tableau de bord WordPress en me connectant au site Web WordPress, et ici je vais accéder aux plugins et ajouter un nouveau plugin. Et ici, je vais rechercher le présentateur de WPs H Login. Maintenant que nous avons ce WPs, masquez le login , connectez-vous et il n'est actuellement pas testé avec notre Mais essayons de l'installer. Lorsque vous consultez cette leçon, il est possible qu'elle soit compatible avec votre site Web. Je clique sur Installer maintenant et je clique sur Activer pour activer avec succès et maintenant je vais passer en revue le set in set in, nous pouvons voir WpS hd se connecter Il suffit de cliquer dessus et lorsque je fais défiler la page vers le bas, nous pouvons spécifier l'URL de connexion nous pouvons spécifier l'URL de connexion et l'URL de quatre ou quatre pages non trouvées, ce qui signifie que nous pouvons créer une page personnalisée de quatre pages introuvables et la définir ici, et pour le moment, modifions uniquement l'URL de connexion. Pour ce faire, vous pouvez simplement modifier ce texte, je vais donc ajouter ici GA login comme ceci et n'oubliez pas de toujours mémoriser cette URL ou le texte que vous allez ajouter. Je vais simplement ajouter un identifiant. Si vous oubliez cette URL, vous ne pourrez pas accéder au tableau de bord WordPress. Vous devrez modifier la base de données et le fichier du plug-in. Souvenez-vous toujours de cela. Je vais simplement ajouter un identifiant et cliquer sur Enregistrer les modifications, puis sur Logo. Lorsque je clique sur Déconnexion, l'URL de la page change en connexion, et maintenant si j' essaie d'ajouter WP admin, elle fera référence à la page quatre sur quatre Ajoutons un identifiant ici, afin que vous puissiez désormais partager cette URL uniquement avec le nom d'utilisateur et le mot de passe. Si une personne essaie d'ajouter un administrateur WP ou essaie de se connecter, cette personne ne pourra pas le faire, ce qui aidera à conserver le site Web professionnel et personne ne connaîtra la page de connexion de votre site Web. OK, maintenant je clique sur Se connecter au site Web. Ici, nous pouvons voir l' activité des tendances de Word au cours de la semaine écoulée. En fait, je n'ai pas besoin de dates, donc je vais passer à l' option Écran et sélectionner cette icône de l'activité de Worden la semaine dernière et Earl Good 108. Créer des champs personnalisés grâce au plugin Champs personnalisés avancés: Bonjour, tout le monde. Nous devons maintenant créer cette section dédiée aux fournisseurs. Voici donc la page des membres de l'équipe sur l'élément où nous n'avons pas de widget pour créer des équipes. Nous avons une boîte orthographique et une boîte image, mais si nous créons cette section avec cette boîte image ou cette boîte orthographique, problème est que nous ne pouvons pas ajouter ce type de lien Par exemple, créons simplement une Flexbox et cliquons ici pour ajouter un élément et rechercher une image. D'accord, voici à quoi ressemble la boîte d'image et elle ne contient pas ce type de lien, le lien d'affichage du profil, le lien d'affichage du profil case ortho et modifions-le comme Orthobox ne fonctionnera pas de toute façon. Un autre problème est que même si nous utilisons ce type de boîte à images, je pense que vous avez actuellement dix membres dans votre équipe. Mais à l'avenir, dans quelques mois, votre entreprise embauchera trois autres membres, ce qui signifie qu' elle devra ajouter ce nouveau membre de l'équipe en modifiant le design du site Web. Mais si nous créons une section différente dans laquelle nous pouvons ajouter les membres de notre équipe, cela signifie que nous allons à la page d'administration de WordPress. Si nous avons ici une section telle que les membres de l'équipe, nous pouvons facilement ajouter des membres à l'équipe en utilisant cette section. Ainsi, lorsque nous ajouterons les membres de l'équipe, WordPress ajoutera automatiquement ce membre de l'équipe à notre section dédiée aux fournisseurs. Pour ce faire, nous pouvons utiliser un plugin de champ personnalisé. Les plugins de champs personnalisés nous permettent de créer un type de pose personnalisé. Actuellement, nous avons des types de pose tels que des articles et des pages, mais avec ce plugin de champ personnalisé, nous pouvons libérer le véritable potentiel de WordPress et nous utilisons également l'Elemento Pro Sur Element of Pro, nous avons des éléments Loop Grid et Loop Carasa, ce qui signifie que nous pouvons ajouter des modèles complets à ces sections Vous ne le comprenez peut-être pas complètement, mais dans les prochaines leçons, vous comprendrez clairement les types de poses personnalisés et le pouvoir de l'élément pro. Commençons. Tout d'abord, je vais aller le tableau de bord de WordPress et ici sur les plugins, cliquer sur Ajouter un nouveau plugin et rechercher un présentateur de type de point de vente personnalisé. Maintenant, nous obtenons ce type de résultat et voici ce que nous sélectionnons , ce sont ces champs personnalisés avancés par WP Engine, cliquez sur Installer maintenant. Cliquez ensuite sur Activer. OK, je l'ai activé. Si nous cliquons sur Afficher les détails, nous pouvons voir que le champ personnalisé avancé transforme le site Web Word en un système de gestion de contenu à part entière en vous donnant les outils nécessaires pour en faire plus avec vos données. Commençons bien, vous verrez maintenant un élément de menu appelé ACF. Sur cet élément de menu, je vais d'abord passer au type de pose. Dans le type de pose, nous pouvons créer un nouveau type de pause. Je clique sur Ajouter un nouveau et ici je définirai l'étiquette en tant que fournisseur. En fait, nos fournisseurs. Ajoutons le fournisseur. Et le nom singulier sera provider et la clé de publication sera automatiquement ajoutée Actuellement, nous n'avons aucune taxonomie existante Je ne sélectionnerai donc rien et la visibilité sera publique Ici, je clique simplement sur Enregistrer les modifications. Lorsque je clique sur Enregistrer les modifications, vous verrez dans le menu nouvelle section intitulée Nos fournisseurs. Si je clique sur les fournisseurs d'EO, il devrait être vide et correct. Cependant, l'icône n'est pas liée à nos fournisseurs pour changer l'icône, je vais cliquer sur configuration avancée sur configuration avancée, je vais cliquer sur visibilité sur visibilité. Ici, nous avons le jeu d'icônes, et ici nous pouvons sélectionner une icône liée à notre site Web ou à notre section fournisseur. J'ajouterai ce type d'icône, puis nous concevrons les modifications. Je change juste comme ça. OK, la première partie est terminée. Ensuite, je vais passer aux groupes de champs par groupes de champs, je vais cliquer sur Ajouter un nom et ici nous pouvons ajouter les champs dans lesquels nous voulons stocker les données de nos fournisseurs. Passons au contenu de notre site Web. Voici le contenu de notre site Web, et dans notre section dédiée aux fournisseurs, nous avons le nom, le rôle et brève description, puis la description du prêt. Nous avons également une image. Ajoutons ces détails. Le premier libellé du champ sera le nom du fournisseur, nom du fournisseur, et cet espace comme celui-ci, alors je n'ajouterai aucune valeur par défaut. Avant cela, nous devons ajouter le titre du groupe de champs. Ajoutez le titre du groupe de champs, j'ajouterai le champ de nos fournisseurs comme celui-ci, puis je le ferai ici. Ensuite, nous ajoutons simplement un groupe de champs de type texte, et maintenant je clique sur AddFel pour ajouter un nouveau champ et voici ce dont nous avons besoin pour ajouter ce rôle ici rouleau de copie et ici type de champ, nous avons de nombreuses options à sélectionner Nous allons vérifier les types de champs, et ici nous avons le choix entre sélectionner. Ajoutons-le en tant que sélection, puis ici j'ajouterai étiquette du champ sous forme de rouleau et le nom du champ sera automatiquement ajouté, et ici nous pouvons ajouter des rouleaux. Voyons donc actuellement les rôles de ces fournisseurs. En fait, ils ont des rôles différents. Nous pouvons donc simplement ajouter un champ de type zone de texte pour cela car nous n'avons pas de rôles répétés Nous allons donc changer ce type de champ en zone de texte ou en texte. OK. Encore une fois, je clique sur Ajouter nouveau et ici nous pouvons fermer ici, ici, nous pouvons cliquer sur Fermer le champ. Et d'accord, maintenant ce que nous devons ajouter est une courte description. Il suffit de recopier cette courte description. Mettons-le comme étiquette de champ, et ici, changeons ce texte en zone de texte et cliquons sur Fermer et Ajouter un fichier pour ajouter un nouveau champ Et voyons voir. Maintenant, nous avons la description du prêt, il suffit de la copier. Et pour celui-ci, on peut ajouter l'éditeur. Ici, nous avons un éditeur Visivc, nous pouvons donc cliquer sur ViswKEditor et ici, comme étiquette de champ, nous pouvons ajouter une description du prêt, cliquer sur Fermer et sur le champ, puis ce que nous devons ajouter, puis ce que nous devons Donc, pour l'image, je vais simplement ajouter l' étiquette du champ sous forme de portrait, puis le type de champ sera image Le format de retour sera un tableau d'images, et je pense que nous avons maintenant un champ. Nous avons donc le nom du fournisseur, brève description du rouleau, une description du prêt, etc. Oui, je veux dire, il suffit de changer ça en nom. Pas besoin d'ajouter le nom du fournisseur, il suffit de l'ajouter comme nom. OK. Si vous souhaitez créer un autre type de passé ou un autre type de site Web, vous pouvez ajouter ce type de champ comme vous le souhaitez. Pour celui-ci, ce sera génial et nous devons établir la règle. La règle affichera ce groupe de champs si nous pouvons définir ici la pose et si elle est égale à celle de notre fournisseur. Saviez-vous que nous avons créé notre type de professionnel en tant que fournisseur ? Nous pouvons donc l'ajouter comme ceci et actuellement, nous n'avons besoin que de voir ce groupe de champs dans cette section des fournisseurs. Cliquons donc sur Enregistrer les modifications pour enregistrer ce groupe de champs. Maintenant, si je vais chez nos fournisseurs et que je clique ici sur Ajouter un nouveau fournisseur OR, et que nous avons ici les détails de notre fournisseur, nous pouvons donc augmenter le nombre de ces fournisseurs de cette façon. Et voici le nom, une brève description du rôle, une description et le portrait pour ajouter cette image C'est donc similaire à l'article, mais ici, nous avons des champs personnalisés que nous pouvons utiliser pour ajouter les détails des membres de notre équipe. Ajoutons donc ce contenu à la section O provider et continuons la leçon. Alors voilà, sélectionnez roll collez-le comme ça et copiez la courte description, collez-la comme ça, et voici la description du prêt pour la description du prêt, je vais simplement la copier sous forme de texte comme celui-ci. Mais si nous le voulons, nous pouvons ajouter des styles à cette description de prêt, et maintenant nous devons ajouter le portrait Ajoutons le portrait pour ajouter le portrait Je clique sur Addimage accéder à notre médiathèque. Je clique sur télécharger des fichiers et sur sélectionner des fichiers . Ici, nous avons l'image de nos fournisseurs . Je les sélectionne tous et je clique sur Ouvrir pour les télécharger tous Découvrons maintenant l'image. La première image est celle de la docteure Sarah Thomson. Ce sera la première image. Ajoutez le nom du médecin au texte ALT et cliquez sur C CLC. J'ai juste ajouté comme ça. OK. Maintenant, je vais ajouter le titre en tant que docteur Sarah Thompson et je n'ajouterai aucune description. Ensuite, je clique sur publier pour publier les détails du fournisseur. OK. Maintenant, si nous vérifions ici, nous pouvons voir les coordonnées du médecin. Jusqu'ici, tout va bien. Continuons donc à ajouter les coordonnées de notre fournisseur Je vais aller ici et copier le nom du médecin ou le nom du fournisseur, copier le rôle et une courte description, la description du prêt. Enfin, l'image, ajoutez le nom au titre et allez sur Ajouter une image. Voyons ensuite l'image. Voici l'image sur ALT tanks et cliquez sur CLF, puis sur Publier Nous pouvons maintenant cliquer dessus sur New Our providers et ici, nous allons obtenir le nom du médecin suivant ici, et le nom ici. En fait, nous n'avons pas besoin de ce champ de nom car nous avons déjà le titre comme nom, mais pour l'instant, gardons-le comme ça. Faites face au faux, brève description, description longue, puis ajoutez une image. Docteur Emma, voici le médecin qu'Emma peut publier, cliquez sur en ajouter un nouveau. Nos prestataires ici ajouteront les autres médecins et vous verront. Nous avons ajouté nos médecins avec succès. Je vais aller dans notre section fournisseurs et cliquer sur les fournisseurs ELO. Voici les fournisseurs Earl que nous avons. Maintenant, si nous le voulons, nous pouvons cliquer sur Modifier envoyer à la corbeille ou faire n'importe quoi. Actuellement, si nous cliquons sur, nous ne verrons pas les détails car nous ne les avons pas configurés. En fait, nous n'avons pas besoin de les configurer comme ceci et dans la leçon suivante, ajoutons ces détails à la page d'accueil. 109. Concevoir notre section fournisseurs - Partie 01: Bonjour à tous, nous venons d'ajouter coordonnées de notre fournisseur et il est maintenant temps de concevoir le site Web. Dans notre fichier Figma, voici la section que nous devons concevoir Ici, nous avons un carrousel et commençons. abord, je vais dans l'élément ou l' éditeur et supprimons cette section car nous n'en avons pas besoin. Je vais cliquer ici pour créer une nouvelle section et déterminer la hauteur de la section. Ensuite, je vais copier le texte et ici, cliquer sur cette icône plus pour ajouter un titre et ajouter un texte de titre comme celui-ci, puis aller au centre d' alignement des styles et typographie sera l'en-tête et la couleur du texte sera cette couleur Encore une fois, je clique sur le conteneur. Dans le conteneur, je changerai le contenu B en plein avec et la direction sera la colonne, la verticale, l'élément d'alignement sera au centre. OK. En fait, créons le contenu avec la zone des tâches et sur Advance, cliquez ici et ajoutez la marge supérieure de 120. OK. Maintenant, voyons la taille intermédiaire. La taille intermédiaire est de 60, alors passons au design de WordPress, et ici je vais sélectionner le conteneur. Conteneur, je vais en ajouter un 60 comme celui-ci. Ce que nous devons maintenant ajouter, c'est cette section. Pour ajouter ce carrousel, nous pouvons utiliser une boucle de carrousel Ajoutons une boucle de carrousel. Pour ce faire, je vais rechercher une boucle ici et lorsque nous recherchons une boucle, avons obtenu un élément de boucle de boucle Je l'ajoute juste comme ça. Ce carrousel à boucles est une grille à boucles qui permet aux modèles ou aux éléments de défiler d'une diapositive à Nous pouvons créer un modèle et à l'aide de ces requêtes, nous pouvons donner des éléments ou des données que nous voulons ajouter à ce carrousel ou à cette modèles ou aux éléments de défiler d'une diapositive à l'autre. Nous pouvons créer un modèle et à l'aide de ces requêtes, nous pouvons donner des éléments ou des données que nous voulons ajouter à ce carrousel ou à cette boucle. C'est ce que nous allons faire. Tout d'abord, nous devons créer un modèle. Pour ce faire, je vais cliquer sur créer un modèle, et ici je vais cliquer sur OK. Maintenant, si vous cochez cette case, nous avons créé l' élément Elemento Loop, qui est notre modèle Ici, je vais rechercher l' élément 370 de la boucle d'éléments. Ici, changeons ces détails et voyons d'abord ce qui va se passer Je vais définir le nombre de diapositives à trois et j'affiche, ce qui signifie que le côté que nous voulons afficher ici sera de trois , le côté sur le défilement sera de un et ici la même hauteur. Passons à Query. Lors de la requête, le changement est proposé à nos fournisseurs , puis cliquez sur publier pour voir si nous pouvons le modifier ou non. Ici, je vais cliquer à nouveau sur Modifier le modèle. OK. Retournez. OK, maintenant je vais au modèle et ici nous pouvons modifier les détails du modèle. Je pense que quelque chose ne va pas avec mon navigateur, alors faisons-le à nouveau pour que vous compreniez clairement ce que j'ai fait. Tout d'abord je vais aller sur la page d'accueil du site Web et cliquer sur Modifier avec elemento Et voilà, faisons défiler la page jusqu'ici. OK. Je vais maintenant sélectionner ce parasol à boucle, puis sélectionner le type de modèle tel que posé et créer un modèle Ensuite, j'ajoute le nombre de diapositives comme trois et le nombre de diapositives vers le bas comme trois Si j'en fais deux, je n'en verrai que deux, mais il nous en faut trois comme ça. Ensuite, j'ai dit que la requête en tant que source serait celle de nos fournisseurs et que ces détails seraient définis par défaut et que si nous le voulions, nous pouvons modifier OK. Modifions maintenant le modèle. Pour ce faire, je clique sur Modifier le modèle. OK. Maintenant, je peux modifier le modèle. Donc, je vais d'abord cliquer ici pour vérifier les détails, puis je clique sur ajouter un élément. J'ajoute un élément, nous avons titre de l'article, le contenu de la fonctionnalité, les informations sur les publications, mais nous n'en avons besoin d'aucun. J'ajoute donc la zone de texte comme celle-ci, puis vous verrez les balises dynamiques Cliquez simplement dessus, vous pouvez voir des détails tels que l'ajout d'une date de pause, identifiant de force, etc., mais nous devons ajouter le nom du membre de l' équipe ici. Je clique simplement sur ce champ ACF. OK. Maintenant, si nous voyons ici, d'abord, nous avons ce rôle. Ajoutons d'abord le rouleau. Ici, je vais cliquer sur ce champ ACF et cliquer ici. Ensuite, nous avons le rôle à jouer. Je clique simplement sur Faire défiler la page sur Advance, nous n'avons rien à ajouter avant ou après le rôle Maintenant, le problème est que nous ne voyons aucune information, mais nous pouvons accéder à cet élément de boucle défini, puis sélectionner l'aperçu défini et modifier ce message ou cet élément spécifique, le définir comme fournisseur et cliquer sur Appliquer pour prévisualiser comme ceci. Quand je le ferai, ça se verra comme ça. abord, choisissons l'espace en question pour ce faire, je clique sur ce conteneur et voilà, allons-y pour avancer, sorte qu'ils soient nuls, comme ceci. Lorsque nous faisons cela, nous nous débarrassons simplement de cet espace E. Maintenant je clique sur ce titre que j'ai déjà ajouté et je passe à Etile et dans la typographie, je vais changer la typographie Voyons voir, si pi 20, voyons notre paragraphe, c'est un pit 20 normal. Maintenant, je vais vérifier ici. Le nom est le titre de la pose, mais nous n'avons pas besoin du titre de la pose ici. Nous avons plutôt besoin du nom du fournisseur. Si nous accédons à notre section des fournisseurs et que nous cliquons sur AD, vous pouvez voir que nous ajoutons le titre du message comme nom du fournisseur. De plus, nous créons le nom de notre fournisseur le champ personnalisé avancé J'utiliserai donc ce nom au lieu d'utiliser le titre de cet article. Cliquez ici et supprimez-le, cliquez avec le bouton droit de la souris et cliquez sur Con Dilete. Maintenant, ici, je vais avoir le titre comme celui-ci et ici, cliquez sur les balises dynamiques et Affeld puis sur le ACFFeld et la clé sera Ces champs de balises dynamiques ne sont disponibles que sur Element of Pro. Il s'agit d'un élément de la fonctionnalité pro, lequel nous pouvons créer un modèle ou nous pouvons créer un seul modèle et le définir pour la section Pago Ensuite, les données que nous demandons dans le champ dynamique seront automatiquement ajoutées. À titre d'exemple, vous pensez que nous devons ajouter le titre de la force. Nous pouvons simplement cliquer sur ce champ dynamique et cliquer sur le titre de force comme celui-ci et je vais le dupliquer. Voyons si nous voulons ajouter l'heure ou l'heure de publication, l'heure de publication s'affichera comme ceci et si nous voulons la date de publication, la date de publication sera affichée comme ceci. Nous n'avons besoin de définir cette balise dynamique qu'une fois que la base de données se connectera à ce champ et nous donnera des détails. Supprimons maintenant ceci. Ici, nous avons défini le nom, pas le titre. Réglons l'Affeld et cliquez ici, cliquez sur le nom de la valeur ajoutée, puis accédez à Estyle Voyons les détails. Il fait 25 ans, je pense que c'est en train de diminuer. C factory, 25 normal et nous avons ici les mêmes détails. Nous devons maintenant changer la couleur du texte pour cette couleur noire. Avant de modifier l' espacement et d'autres éléments, ajoutons les détails ici Ensuite, nous devons ajouter la brève description. Pour ajouter, je vais cliquer sur l'élément et rechercher quelque chose comme. Ajoutons un autre titre, et cette fois, la balise STML sera P ou paragraph Une vignette, définissons la typographie sous forme paragraphe et la couleur est cette couleur noire Maintenant sur le contenu, cliquez sur la balise dynamique, et ici, faites défiler la page vers le bas, cliquez sur le champ ACF Et cliquez ici, la clé doit être une courte description comme celle-ci. OK. Il faut maintenant ajouter l'image. Ajoutons l'image. Pour ajouter l'image, je clique ici et je recherche l'image. OK, nous avons ici l'image. Je vais ajouter l'image en haut, régler la résolution sur Baisse et cliquer sur cette balise dynamique. En fait, cliquez sur cette balise dynamique et ici, dans le champ d'image ACF, cliquez ici, sélectionnez la photo du visage et l'image ajoutée comme cette résolution d'image sera complète, sans légende Liens. OK. Maintenant, il ne reste plus qu' à ajouter ce profil de vue. Pour l'instant, ajoutons simplement un simple bouton pour afficher le profil. Je vais rechercher BTN ou bouton et bouton Rager comme ceci et passer à Estyle in Estyle Voyons les détails. Nous avons déjà atteint ce bouton. Vous pouvez simplement copier les détails du bouton à partir d'ici. C'est ce que nous allons faire. Ou créons-le à nouveau. Pour ce faire, allez dans Style et dans Typographie, sélectionnez le bouton et sélectionnez la couleur, cliquez simplement sur Couleur du contexte et définissez-la comme type principal et comme type d'arrière-plan En fait, nous n'avons pas besoin d'arrière-plan et ombre du tableau, autre que la boîte, devrait être comme ça et nous avons toujours l'arrière-plan. Maintenant, nous n'avons aucun historique. Maintenant, je supprime les rembourrages et à l'avance, je vais supprimer les rembourrages, qui seront pleins, en faire le contenu par défaut, le type est par défaut et nous devons ajouter l'icône Cliquez sur la bibliothèque d'icônes ici, vérifions l'icône. En fait, nous avons besoin de cette icône. Ici, nous avons l'icône. Cliquez dessus et cliquez sur Insérer et la position de l'icône sera N. D'accord. Maintenant, nous avons un problème. Nous avons un espacement énorme et voyons l'espacement entre les icônes. C'est l'espacement et le style des icônes en Z , placez la position à gauche pour supprimer l'espacement, nous pouvons ajouter une marge négative comme 110. Comment utiliser le carrousel en boucle - Partie 01: Sur l'élément de, nous avons une fonctionnalité intéressante appelée Loop Carusel. Cherchons une boucle ici, et nous avons ici un carusel à boucles Avec ce carrousel en boucle, nous pouvons ajouter des contenus dynamiques tels que suspendre les champs personnalisés, suspendre les types de pose personnalisés que nous avons déjà créés à l'aide de champs personnalisés avancés, les connecter, et si vous gérez du commerce électronique, vous pouvez ajouter des produits et créer un L'avantage est que nous n'avons créé le design d'arusel qu' une seule fois, puis nous n'avons qu'à créer du contenu sur le tableau de bord WordPress et ils s' adapteront automatiquement au design que nous créons à l' aide de Loop Allons plus loin et faisons quelques exercices avec le post. Tout d'abord, je vais sur le tableau de bord WordPress de notre site Web et créons un article. Je vais chez Earl Post. Actuellement, nous n' avons aucun article, je vais donc chercher en profondeur pour générer un article. Je vais donc ajouter MPMP et vous souvenez-vous que dans nos leçons précédentes, nous parlons d'invite à l'IA, donc j'utilise simplement ces instructions, et ici je vais attribuer rôle à un médecin de clinique qui a de l'expérience dans la rédaction d'articles, de l'expérience en rédaction et des tâches Je veux que vous génériez dix articles, et Nous n'avons pas besoin de celui-ci, et ici nous générons dix articles, nous générons dix articles. OK, ce prompteur fonctionne, alors j'appuie sur Fin et voyons quel type d'articles nous recevrons D'accord, je génère simplement la structure de l'article ou les données de l'article. Nous n'en avons pas besoin, alors je l' arrête et je vais taper « J'ai besoin d' article réel au moins avec 500 OK, voyons voir ». Voyons voir. Ce n'est qu'un exemple, alors n'essayez pas de le faire. Ce sont en fait de très petits articles, mais cela fonctionnera pour Beckley Donc, ici, je dois dire que j'ai besoin de dix articles réels. Disons dix articles réels au moins 500 comme celui-ci. Lorsque nous le générerons ainsi, nous obtiendrons dix articles réels. D'accord, nous venons de générer dix articles comme celui-ci, et il ne nous reste plus qu'à les ajouter au site Web. Allons sur le site Web et ici je vais publier et cliquer sur EL Post. Actuellement, nous n'avons aucun article ni aucun article, alors je clique sur Nouveau message, et ici, copions ce titre et collons le titre ici. Ensuite, je vais simplement copier ce contenu et le coller ici. En fait, nous devons améliorer les choses. En fait, et si nous demandions à Deepsek de générer ce contenu pour l'éditeur de blocs Wordpress Alors disons, pouvez-vous générer ce contenu pour l'éditeur de blocs Wordpress ? Je peux donc modifier sans creuser et copions le contenu. Voyons ce qui va se passer. Je génère avec le contenu DML, et ici je vais supprimer tout ce contenu ici DML Nous avons une balise DML, nous pouvons donc simplement ajouter ce contenu dans cette balise HTML Cela peut prendre un certain temps, mais attendons de voir si cela fonctionne ou non. OK, ici, nous devons dire que le nom de la clinique doit être la famille JB Disons-le dans la partie suivante. Donc pour l'instant, je copie simplement le code HTML, je colle le code HTML et je clique sur Aperçu, et ça ressemblera à ça. Et ici, changeons cela en J. Ne pouvons-nous pas le changer comme ça ? Je dois aller au TML et trouver cette partie. Oui, en tant que Clei de la famille JV. OK, maintenant c'est bon, et maintenant je clique sur Compost et nous devons définir l'image vedette. Pour créer l'image vedette, j'utiliserai Canva, et ne vous inquiétez pas, je vais utiliser toutes les images et les articles dans la section des ressources Maintenant, je suis chez Canva, je clique sur personnaliser et faisons 600 x 400 comme avec et pour l'image des fonctionnalités Et ici, copions le titre. Copions comme Family Health. Non, pas celui-là, ici. Oui, la santé familiale, passez aux éléments, rythme comme ça et aux photos. Et sur les photos, nous avons ce type de photo. Agrandissons-le. Et tu n'as pas besoin de celui-ci. Ensuite, je clique sur C Share, je clique sur Télécharger, sélectionne le JPG de test et je clique sur Télécharger. OK, maintenant je vais sur le site Web, clique sur Concept Featured Image, et ajoutons l'image téléchargée comme ceci. Cliquez ensuite sur Image vedette du concept. Et cliquons sur Publier Publier. Maintenant, je peux visionner le premier. Cliquez ici avec le bouton droit de la souris et cliquez sur Ouvrir dans une nouvelle fenêtre. Voici notre article et actuellement il ne s'affiche pas très bien car nous n'avons pas créé de modèle pour notre article de blog, un seul article de blog, nous le ferons dans les prochaines leçons, mais pour le moment, cela fonctionnera. Maintenant, je clique sur Nouveau message et je crée le nouveau message pour le deuxième article. Voici la deuxième force, copiez le quatrième titre, et ce n'est pas bon pour la rédaction d' un véritable article. Ceci est juste pour en savoir plus sur carrousel à boucles et cet article peut nous aider à créer notre section de page de blog. Allons-y. Et ici je vais copier le contenu. Disons, pouvez-vous générer le contenu pour l'éditeur de blog Wordpress ? En fait, changeons cela et disons, pouvez-vous générer environ contenu d'un article à environ dix articles, le contenu pour ajouter un éditeur de blog WordPress, afin que je puisse l'ajouter sans le modifier. De plus, le nom de la clinique est JB Family Clinic, et voyons ce qui va se passer D'accord, ça ne marche pas, alors maintenant je vais copier cette commande et passer au GPT Sur Ja GPT, j' ajouterai cette commande, et sur les codes doubles, j'ajouterai la pose Donc, ici, nous n'avons pas besoin du premier. Nous en avons besoin d' ici. Voyons voir. Le post, cinq, six, sept, huit, neuf, dix. OK, maintenant mettez ce contenu, et voyons voir si cela ne fonctionne pas, non, non. Je dois dire, disons qu'au-dessus de neuf articles pour l'éditeur d'arbres dans DM en TML, en dessous de 94 OK, maintenant je clique sur le consentement, et maintenant il devrait être généré en SDML. Nous verrons, d' accord, ça ne marchera pas OK, il est généré au format SDML. Nous n'avons pas besoin de cet en-tête mais nous n'avons besoin que du texte d'ici, alors allons-y, l'article a été généré, et maintenant je n'ai plus qu'à les ajouter. Il s'agit du deuxième article. Je pense que nous n'en avons pas besoin et que nous en avons besoin aussi, et voici le titre, et ici je vais simplement copier ce contenu dans cette balise de paragraphe de ce paragraphe. Et ici, ajoutons-le. Non, non, cliquez ici, recherchez THDM et écrivez-le comme ça En avant-première, cela ressemblera à ceci. OK, alors passez au post in post. Nous devons ajouter l' image en vedette, copions-la et faisons face à la vaccination des enfants et téléchargez-la. Lick Concept feature Dimage, cliquez ici et ajoutez-le comme ça Cliquez ensuite sur Concept feature Dimag puis sur Publier, publier OK, maintenant cliquez sur Ajouter un nouveau message, et voici le troisième article, copiez ce titre, et voici la force réelle. Je le copie simplement comme cette clé. Maintenant, ici, du HTML, du HTML personnalisé, collez-le, cliquez sur Aperçu, ça a l'air bien, et là, nous devons ajouter le stress en famille. Générons notre force. Voyons voir. Ensuite, cliquons ici pour définir l'image en vedette Je continuerai à créer le message et nous reviendrons à 111. Comment utiliser le carrousel en boucle - Partie 02: Bonjour, tout le monde. Nous avons maintenant le post, et commençons à en apprendre davantage sur les Loop Cars. Nous devons donc créer une nouvelle page, aller sur les pages ER et cliquer sur AdNWPage et ici sur Adtitle ajouter un titre comme Disons que c'est un blog. C'est donc juste pour tester. Peut-être que nous pouvons utiliser cette page pour le site Web actuel. Alors publions-le et accord. Maintenant, je clique sur Modifier avec l'élément de droite, je vais cliquer ici et cliquer sur la case Complexe, puis ajouter ce conteneur de colonnes directes et ici je vais rechercher Loop Carsel Ici, nous avons Loop Carsel, je vais juste l'ajouter et quand je l'ajouterai, je peux voir ce type de design Ici, nous avons la possibilité de créer modèle ou si nous avons déjà un modèle, nous pouvons le rechercher à partir d' ici, mais dans ce cas, nous devons créer un nouveau modèle. Notre objectif est d'afficher cette publication sur cette page de blocage. Je vais simplement cliquer sur créer un modèle et cliquer sur Enregistrer. Voici notre modèle et si nous survolons ici, nous pouvons voir le nom du modèle Maintenant, ce que je peux faire, c'est ajouter des éléments à cette section. abord, créons un conteneur de type colonne de direction, et je clique ici, puis au préalable, je dois supprimer la marge et le bloc-notes, puis sur la mise en page, je vais cliquer ici, puis ici nous pouvons ajouter un élément. Par exemple, ajoutons une image et ajoutons-la comme ceci. Ensuite, nous avons une image et sur Element of Pro, nous avons des tags dynamiques. À l'aide de ces balises dynamiques, nous pouvons ajouter des données personnalisées. Par exemple, si nous ajoutons simplement une image directement à partir d'ici, ajoutons cette image depuis notre boîte multimédia et elle restera la même. Mais si nous cliquons ici sur la balise dynamique et ici, nous pouvons dire images. Par exemple, définissons la fonctionnalité Dimage et lorsque nous définissons la fonctionnalité Dimage, elle sera dynamique Si je l'explique plus en détail, je peux cliquer sur Enregistrer et revenir et voici le post présenté par Dimage Vous souvenez-vous que nous avons déjà créé le message et que nous l'avons tous redirigé ici ? Je clique sur Modifier le modèle , puis sur Modifier le modèle. Ensuite, cliquez sur Modifier et supprimons cette balise d' image en vedette. Ajoutez simplement cette image depuis la section multimédia et cliquez sur Enregistrer et revenez ici, nous ne voyons que cette image statique. C'est la puissance de la balise dynamique et sur requête, nous pouvons définir le type de données que nous voulons atteindre ici. À l'avenir, nous allons créer notre section fournisseurs et notre section de révision en utilisant cette boucle pour les créer, nous utiliserons des champs personnalisés avancés. Lorsque nous créons des types de pose à l'aide de champs personnalisés avancés, nous pouvons sélectionner la source comme type de pose. Actuellement, la source est la publication et ici, nous pouvons définir la date à laquelle nous voulons ajouter, mais je vais le faire au fur et à mesure et nous pouvons définir l'ordre par détails Ici, je vais définir l'ordre par date et la commande sera DESC, et nous avons deux types de commande DESC signifie court terme décroissant, ce qui signifie que si nous le classons par date, nous pouvons voir le dernier article au plus ancien Si nous le définissons comme ASC, nous pouvons voir le premier sur le plus ancien et le dernier sur le dernier comme le dernier. Faisons en sorte que ce soit aussi beau que DESC. Il ne nous reste plus qu'à créer le modèle. Maintenant, je clique sur Modifier le modèle, puis sur San Okay. Maintenant, je clique sur cette icône en forme de crayon, et je pense que vous comprenez et que vous connaissez maintenant les balises dynamiques Supprimons cette image comme ceci. Maintenant, ce que nous devons ajouter, c'est publier. Nous avons ici de nombreux éléments. Si nous le voulons, nous pouvons personnaliser les éléments. Ajoutons donc un titre et dans le titre, allez dans Style, cliquez sur le titre sous forme de sous-ligne et la couleur sera noire Et maintenant, pour ce qui est du contenu, je vais cliquer sur cette balise dynamique, et ici je peux voir les balises Earl que nous ajoutons sur le post. Donc, si je clique sur le titre de l'article, nous obtiendrons le titre du message que nous avons créé. Maintenant, nous pouvons cliquer sur Ajouter un élément et ajouter l'image en vedette. Ici, je vais ajouter l'image ici. Ensuite, comme je l'ai fait auparavant, cliquez sur ici et sur le post, sélectionnez l' image en vedette, et pour l'instant, je garderai le style par défaut ici si je clique ici et que j' ajoute un autre titre, ici nous pouvons ajouter une date de publication par un expert comme celle-ci, puis ici, changeons cela en bouton et couleur reviendra et je cliquerai sur En fait, je clique sur la structure et ici sur le conteneur, je vais ajouter Roger pass. Ajoutons-y. Voyons maintenant si nous voulons ajouter un lien, je vais rechercher ici un lien et peut-être un bouton. Ajoutons un bouton comme celui-ci au texte, je vais effectuer une recherche comme en savoir plus et dans Lien, je clique sur le tag dynamique, et ici nous pouvons sélectionner l'URL du message. Et sur l'option Lien, je peux cliquer sur Ouvrir dans une nouvelle fenêtre. Et maintenant, si je clique sur Enregistrer et revenir, nous pouvons voir notre message comme ceci. Si je clique sur la page américaine, voici notre article. Donc, si je clique sur ce bouton Lire la suite, il sera redirigé vers la page de publication. Donc, actuellement, nous ne créons pas la page de publication, mais si vous voyez l'URL, nous redirigeons simplement vers la page de publication. Je vais donc à nouveau cliquer sur Modifier le modèle. Ici, je vais sur le conteneur, je vais supprimer le titre de l'image et le bouton comme ceci Maintenant, ce que nous pouvons faire, c'est un élément prédéfini. Si je fais une recherche ici après un appel à l'action, nous pouvons obtenir ce type de widget et ici, définissons le skin comme classique et définissons la position à gauche et ici nous pouvons définir la position. Mais pour le moment, restons comme ça et en utilisant des balises dynamiques, nous pouvons ajouter du contenu dynamique. Si je clique ici et que je clique sur la balise dynamique, définissez l'image en vedette L'image vedette ressemblera à ceci. Sur le contenu, nous pouvons ajouter le titre tel que le titre et la description de la pause le seront. En fait, nous n'avons pas besoin de la description, je vais donc la supprimer et le lien sera URL de publication comme celle-ci et cliquez sur Ouvrir une nouvelle fenêtre. Maintenant, ce que nous pouvons faire, c'est opter pour ce style Peut-être que nous changerons la peau en couverture pour qu'elle soit bien plus belle. Sur ce style, nous pouvons régler le rembourrage. Ajoutons donc un rembourrage en 2020 un peu plus grand, Ensuite, il y aura du travail et du contenu, changeons la typographie en su pad in et la couleur du titre sera blanche, et nous avons également le bouton Ajoutons le bouton 12 à gauche et à droite, et la couleur du texte du bouton sera blanche. Sur la typographie, définissez la typographie des boutons, définissez la couleur d'arrière-plan comme cette couleur bleue Et sur la boîte, nous pouvons ajouter de la hauteur à notre guise. Peut-être ajoutons une hauteur de 450. Sur son effet, nous pouvons ajouter de la couleur de superposition. Ajoutons donc de la couleur de superposition sous forme de noir. Modifiez ici l' opacité comme suit. OK. Jusqu'à présent, tout va bien maintenant, je vais cliquer sur Enregistrer et noir. Quand je clique sur Enregistrer et revenir, nous pouvons voir ici notre article comme celui-ci. Il suffit de cliquer sur le casel en boucle modifier le nombre de diapositives Donc, si nous en faisons quatre, nous n'aurons que quatre curseurs, page par page Faisons en sorte qu'il y en ait deux, ça ne ressemblera qu'à ça. Et pour la navigation, nous pouvons masquer la flèche si nous voulons comme ça, mais je veux montrer les flèches selon le style, nous pouvons passer à la navigation et nous pouvons changer la taille de l'icône comme ça. Passons de couleur au bleu et à la position, passons à l'extérieur. En pagination, nous pouvons ajouter une pagination comme celle-ci et la couleur sera bleue. Voici la puissance des balises dynamiques bca usel et Si je vais voir les pages, la page ressemblera à ceci et nous pouvons la personnaliser comme nous le souhaitons. Mais pour l'instant, ce sera un bon exemple de compréhension du loop carsel. À l' avenir, dans les prochaines leçons, nous apprendrons et utiliserons beaucoup plus de balises dynamiques et de champs personnalisés en utilisant un plug de champ personnalisé avancé 112. Concevoir notre section fournisseurs - Partie 02: OK. Maintenant, lorsque nous comparons ce bouton avec notre bouton d'origine, l'icône est un peu plus grande. Comme nous l'avons fait ici, nous devons utiliser du CSS pour agrandir l'icône. Mais le problème est dans ce modèle, nous avons des boutons répétés. Ici, nous n'avons que ce bouton, mais maintenant nous avons une situation différente. Nous allons nous occuper de ça. abord, je vais cliquer sur ce bouton, et comme je l'ai déjà dit, nous avons sélectionné un seul bouton, afin de créer un code CSS unique et de le rendre disponible pour A de ce bouton. Pour cela, nous pouvons utiliser la classe CSS. Ici, je vais ajouter le nom de la classe CSS sous forme de vue, de vue de profil, , TN, puis de cliquer sur Publier pour l'enregistrer. Et maintenant, nous avons le tableau de bord WordPress. Pour ajouter ce code CSS, je peux accéder à l'apparence et cliquer sur Personnaliser pour personnaliser. Je peux cliquer sur du CSS supplémentaire. Et ici je peux ajouter le code CSS. Nous pouvons donc voir ici le design. Même si nous ne l'avons pas terminé, nous pouvons le voir d'ici. OK, maintenant nous devons agrandir ce bouton, donc pour ce faire, donc pour ce faire, je vais coller le code CSS, le code classe CSS et j'ajouterai un point parce que nous utilisons des points pour mettre en cache les classes CSS et je ne vais pas trop approfondir le CSS. Pour l'instant, je vais simplement ajouter ce code pour agrandir cette icône. Si nous allons sur cette page d'accueil, passons à la page d'accueil et ici, cliquez sur Modifier avec un élément et faites défiler la page jusqu'à ici, puis cliquez sur cette modification et si nous allons sur Advance on Advance, nous avons un ESS personnalisé et nous avons ici le code que nous avons utilisé pour agrandir ce bouton. Je vais juste le copier. Copions le contenu et passons à la personnalisation et à la modification ici. À partir de là, je n'ai besoin que de cette section car cet identifiant, nous n'en avons pas besoin Je vais simplement créer cette classe CSS comme celle-ci et cliquer sur la deuxième page pour ajouter ce contenu, et lorsque nous le ferons, notre icône s'agrandira. Si je l'enlève, il est petit. Si je l'ajoute, il est plus grand. Maintenant, je clique sur publier et ici je clique sur Actualiser. Je dois le rafraîchir à nouveau car le design ne s'est pas très bien chargé. Qu'est-ce qui ne va pas ? Le site Web n'est pas connecté comme nous le souhaitons. Maintenant, je clique sur l'élément Modifier ou je pense que c'est un problème de cache, mais voyons voir, c'est du cache. Maintenant, encore une fois, je clique sur Modifier le modèle pour le modifier et ici, nous pouvons le modifier à partir d'ici. Lorsque je le modifierai, cela affectera la section. Si nous allons dans WP Admin et que nous allons dans le tableau de bord et ici sur les modèles, je clique sur Enregistrer les modèles sur Enregistrer les modèles, je clique sur Publié, et nous avons ici ce modèle que nous sommes en train de modifier. Actuellement, son nom est Elemental Loop Item. Cliquons sur Modifier et changeons ce nom en un nom similaire à nos fournisseurs dédiés, puis cliquons sur Mettre à jour et nous pouvons cliquer ici pour le modifier et le modifier à partir d'ici. Comme ça ou nous pouvons cliquer ici pour supprimer celui-ci et le modifier à partir d'ici montage à partir du site Web lui-même est la meilleure solution, car nous pourrons alors clairement comprendre à quoi ressemblera le design dans la section des héros. Encore une fois, nous avons eu ce problème, alors actualisons-le et cliquons sur Modifier avec un élément ou faites défiler , puis cliquez à nouveau sur Modifier. C'est vrai. Maintenant, ce que nous devons ajouter, c'est l'espacement I. Si nous vérifions l'espacement sur le cochon Mateen Brad, il est de deux L. Ajoutons l'espacement Si je clique ici, vous pouvez voir qu'il s'agit d'un conteneur. Si nous cliquons ici et ajoutons raw as, cela devrait ressembler à ceci et voyons voir, c'est deux et c'est un élément sous forme de deux. OK. Il ne reste plus qu'à ajouter dans ce coin les radios et l' ombre. Ajoutons-les. Pour les ajouter, isoler le contenant et sur le contenant, je vais chez Estyle on Estyle. Cliquez sur Obarder et sur Box Shadow. Ajoutons l'ombre de la boîte. Copions donc les détails de l' ombre de la boîte à partir d'ici. Cliquez ici, la couleur est celle-ci, alors cliquez ici pour obtenir les couleurs CSSORGBA. Cliquez ici. La couleur RGBA est la suivante et ajoutez-la comme ça. Maintenant, le flou est de 15 et X et Y sont nuls. Cliquons ici. Blurrinus est égal à 15 et les autres à zéro. OK. Nous devons maintenant ajouter des coins arrondis. En fait, le coin du rayon doit être ajouté pour ce faire, nous avons ici le rayon de la bordure. Si je clique sur cette section et vérifie le rayon de la bordure, il est de 20. Faisons donc en sorte que cette radio soit 20, nous verrons les changements. J'ai ajouté, cependant, que nous ne pas placé sur l'image pour le faire apparaître, je clique sur Modifier sur l'image et je passe à Style In Estyle, nous pouvons ajouter des radios de bordure comme el, mais seulement 20, pas 20, mais seulement nous avons le rayon de bordure du haut comme 20. Ajoutons-le donc. Nous n'avons donc pas radios corporelles de 20 en bas de l'image Donc, cliquons ici et en haut, faisons 20 et 20 en haut à droite, la gauche sera 20 et pas en bas, il suffit d'ajouter les dix premiers, 20 à droite et bien, puis nous devons ajouter l' espace ici, c'est 220. Ajoutons de l'espace inférieur ou ajoutons ce rembourrage de conteneur Clet, le conteneur est de 20 ? Oui, c'est Clet, le récipient sur fond rembourré à 20h. OK. Nous devons maintenant trouver la taille intermédiaire. La taille intermédiaire est de 20. Pour l'ajouter, il faut aller dans le carasel en boucle Je vais le publier à partir d'ici et cliquer sur Enregistrer et revenir Maintenant, ça va ressembler à ça, mais ça n'a pas l'air bien. Nous devons créer l'ombre. Mais pour l'instant, concentrons-nous sur la taille intermédiaire pour ce faire, optez pour le style et l'écart entre les tailles devrait être aussi important, il devrait l'être. OK. Et avant de résoudre le problème des ombres tombées, ajoutons du style à la navigation et à d'autres éléments. Donc, pour ce qui est de la navigation, cliquez ici. OK, c'est avec une hauteur ts 220, donc faisons avec un test de hauteur, 20, pour le faire. Passons à la navigation et en fait, nous n'avons pas de navigation gauche et droite, supprimons-la d'abord Pour les supprimer, je vais passer au contenu et à la navigation, nous n'avons pas besoin d'afficher de flèches et pour la génération de pages, nous avons des points et passons à Estils dans Estes, nous devons passer à la génération de pages, pas à la navigation et à l'espace entre les deux, si je me souviens bien nous devons passer à la génération de pages, pas à , cela fera 20 ans et la taille est de 20 sur 20, la taille sera également de 20 en 2021, c'est 20 et la couleur est cette couleur primaire nous n'avons pas besoin d'afficher de flèches et pour la génération de pages, nous avons des points et passons à Estils dans Estes, nous devons passer à la génération de pages, pas à la navigation et à l'espace entre les deux, si je me souviens bien, cela fera 20 ans et la taille est de 20 sur 20, la taille sera également de 20 en 2021, c'est 20 et la couleur est cette couleur primaire et nous obtenons automatiquement la couleur par défaut sous la forme de cette couleur bleu clair. En ce qui concerne la couleur O, je vais en faire un accent car nous n'avons pas besoin d' ajouter de la couleur primaire comme couleur de survol Ici, nous avons un problème. Nous avons cette couleur bleu clair, mais nous n'avons pas besoin qu'elle soit bleu clair, mais il n'y a aucune option pour y remédier, mais gardons cette couleur comme ça pour le moment et ajoutons-la entre espacement de ce curseur et la pagination, c'est 30, donc faisons-en OK. Maintenant, je vais cliquer sur publier et pour l'instant tout va bien. Mais ici, nous avons beaucoup de problèmes. Réparons-les un par un. 113. Concevoir notre section fournisseurs - Partie 03: Bonjour à tous. Résolvons les problèmes que nous rencontrons avec cette section dédiée aux fournisseurs. Donc, pour ce faire, je vais cliquer sur Modifier le modèle, et lorsque nous irons ici, nous verrons clairement que cette image ne correspond pas bien. Donc, d'abord, je clique ici et je sélectionne l'image, puis je passe à Advance Advance, je vais définir la taille comme suit : grandir et c'est maintenant comme ça. Maintenant, je peux le publier et voyons voir ça sur le design et sur le design, il ressemblera à ça. Donc, en ce qui concerne le deuxième problème, nous pouvons voir ici que nous avons un rembourrage nul, mais nous avons besoin d'un rembourrage à gauche et à droite Voyons voir que je passe au fichier Figma et sur Figma, voyons la taille du bloc-notes Je sélectionne l'un de ces textes et j'appuie sur tout le rembourrage, donc ajoutons-en six comme rembourrage Maintenant, si nous ajoutons simplement du rembourrage à ce contenant, je passe à l'étape suivante et j'ajoute le Padin droit à six et le padna six à gauche, vous pouvez voir que l'image est Nous ne pouvons pas ajouter un motif comme celui-ci. Au lieu d'ajouter un modèle comme celui-ci, nous devons ajouter un rembourrage pour les champs individuels Sélectionnez donc le champ ici, passez à l'étape suivante et ajoutez Padin six, à gauche un six Faisons de même : six à droite, six à gauche et pour le bouton. Maintenant, je clique sur publier et voyons le design. Réprimez le design et il semble maintenant parfait. Maintenant, nous avons un problème d'alignement, résolvons ce problème d'alignement. Je viens de trouver le problème. Si nous accédons au modèle et que nous cliquons sur Image dans l'image, nous avons dit taille au fur et à mesure que nous grandissons. Je l'enlève simplement. Quand je le retire, c'est juste corrigé, et ici seulement nous avons besoin d' ajouter l'alignement automatique. Ensuite, je clique sur Enregistrer un sac et je clique ici pour régler la même hauteur. Et maintenant, si nous vérifions le design, il aura l'air parfait comme ça. 114. Concevoir notre section fournisseurs - Partie 04: Et maintenant, nous avons un autre problème. Si vous vérifiez attentivement à gauche et à droite, nous ne voyons pas l'ombre noire, nous devons donc la réparer. J'ai trouvé une solution à ce problème en consultant les forums et en effectuant une recherche sur Google à ce sujet. Sur Google, je recherche simplement Drop Shadow ou ne s'affiche pas dans l'élément ou le résultat de Luka Et voici le résultat que j'ai trouvé sur ce forum Gita, j'ai trouvé la solution Appliquons donc cette solution. Et comme je l'ai déjà dit, vous devrez faire une recherche sur Google ou si vous avez des questions, recherchez simplement sur Google. Si vous l'obtenez maintenant, probable que quelqu'un d'autre l' obtiendra avant vous. Commençons maintenant le travail. Tout d'abord, je dois supprimer l'ombre actuelle, l'ombre supprimée et la radio d'angle. Je sélectionne le conteneur et sur le conteneur, nous devons passer aux matrices E sur la bordure des matrices E, mettre la bordure zéro et redéfinir l' ombre de la boîte pour revenir à la valeur par défaut. OK, maintenant je clique sur Publier et maintenant, si nous voyons le design, il n'y aura aucune ombre. Sur notre image, nous avons toujours les radios du coin image. Si nous allons ici et sur le style de l'image ici, nous avons des radios Border comme sur l'image. Pour l'instant, restons comme ça. Maintenant, je dois copier ce code. Il suffit de le copier ici et vous pourrez le lire, mais je ne vais pas déjà lire ceci et ce travail avec le design. Je vais maintenant procéder à l' avance de ce conteneur. Le conteneur va dans Advance et ici sur un ESS personnalisé, dans le CSS comme celui-ci. Maintenant, je clique sur publier pour moment et voyons cela dans le design. Si nous vérifions le design, nous pouvons maintenant clairement voir les ombres gauche et droite. Corrigeons maintenant cela en fonction de notre conception. Il faut d'abord supprimer cet espacement. Allons-y ici. Si nous voyons le CSS, nous avons ce rembourrage et nous n'en avons pas besoin Je l'enlève juste comme ça. Maintenant, si nous le publions et voyons le design, il ressemblera à ceci. En fait, il faut ajouter le rembourrage. J'ajouterai le rembourrage au format 20 x 20 et j'appuierai sur publier. Et ici, si on vérifie le design, ça ressemblera à ça. En fait, nous n'avons pas besoin du rembourrage supérieur, je vais donc retirer le rembourrage supérieur et voici le haut à gauche, en bas, Je pense à la valeur, alors voyons à nouveau le design, et maintenant il ressemblera à ceci. Ensuite, nous devons changer l'ombre portée. Pour changer l'ombre portée, nous devons trouver notre ombre portée. Je vais donc passer à notre conception de Rigma et sélectionner cette section réservée aux fournisseurs uniques Et nous avons ici l'ombre portée. Et si je clique sur ce Dev Moot, je peux voir le style CSS, et ici nous avons le style box shadow Je ne fais que le copier. Remplaçons cette ombre de boîte par notre ombre de boîte. Cette spécification conserve cette balise importante ici, publions et voyons le design OK. Maintenant, ce que nous devons faire est là, nous devons ajouter le top collins 20 et le bottom B 2015. 50. Et publions-le et concevons. OK, la gauche et la droite sont 15 imitateurs, aucune ici, en haut, à droite, en bas, à gauche, encore trop faibles, peut-être que dix seront les produits de 2010 Et j'espère qu'il sera temps de partir. OK, jusqu'ici tout va bien. Et maintenant, nous devons ajouter des coins arrondis. Ajouter des coins arrondis est trop facile car nous avons déjà trouvé le style ici Copiez cette étiquette de style boat reduce 20 , puis mettez-la ici comme ça. Faisons ça. OK, maintenant c'est bon, viens ici et réprime le dessin. Lorsque je supprimerai le dessin, il ressemblera à ceci et il est assez similaire à notre design Mais le problème, c'est que nous avons cette lacune. Essayons donc de combler cette lacune. Selon le design précédent, suffit d'en ajouter 20 comme marge, les supprimer parce que nous en ajoutons 20 comme rembourrage sur les douanes Je vais actualiser comme ça et maintenant, le message est parfaitement clair : OK Ici, nous avons un problème avec ce bouton d'affichage du profil car ici il est en bas et ici il est un peu en haut. Je vais donc le garder comme ça car il faudra peut-être du CSS pour le corriger. OK, maintenant ce que nous devons faire est d'aller ici et de cliquer sur Ponce et b, puis nous devons ajuster le ici et dans la requête et non sur la mise en page, nous devons ajuster le nombre de Actuellement, je pense que nous en avons cinq en avons un, 25, cinq et cliquez sur Publier. Et là, nous avons beaucoup de génération de pages. D'accord, pour corriger l'ination de la page, nous pouvons passer à la mise en page et faire défiler les diapositives sur le défilement. Actuellement, nous en avons un. Si nous le réglons sur deux, nous pouvons le corriger comme ceci, et maintenant nous allons faire défiler deux diapositives à la fois comme ceci. OK, maintenant cliquez sur Publier en C et allons sur le site Web pour voir le design. OK, ça va ressembler à ça. Nous avons un problème ici. Si nous vérifions attentivement ce colis, nous verrons le même résultat encore et encore. voyez maintenant, ce médecin est là et si nous vérifions maintenant, il est toujours là. Donc, pour y remédier, je vais cliquer sur Modifier Carsel et le problème est que nous n'avons actuellement que cinq fournisseurs, mais nous avons mis de côté pour faire défiler la page comme deux Faisons en sorte que ce soit trois, et quand nous le définirons comme trois, cela fonctionnera correctement. Tu vois ? La raison en est que nous n'avons pas suffisamment de détails sur les fournisseurs pour adhérer. Maintenant Earl a l'air bien, et maintenant si je rafraîchis ici, tout fonctionnera bien sans aucun OK, jouez avec ces options et obtenez le meilleur résultat. Si nous passons aux requêtes, nous pouvons définir l'ordre par date et si nous le définissons comme un A, nous pouvons organiser les éléments du plus petit au plus grand, ce qui signifie qu'il les affichera en premier que nous ajouterons en premier. Maintenant, je vais publier et maintenant, si je rafraîchis, nous ajoutons cette docteure Sarah Thompson comme première valeur sur notre fournisseur, comme sur le FIC Maple, et elle s'affichera correctement car nous la modifierons sur l'aztino Nous venons de terminer notre section dédiée aux prestataires, et ici nous pouvons ajouter plus de médecins ou de prestataires et l'améliorer. Ensuite, nous devons créer cette section entrer en contact avec. Ici aussi, nous devons ajouter une fenêtre contextuelle à ce lien d'affichage du profil À l'avenir, nous les ferons également. 115. Section de prise en contact avec la conception - Partie 01: Bonjour, tout le monde. Nous devons maintenant concevoir cette section. Commençons. Tout d'abord, je vais cliquer sur la section et vérifier la hauteur. C'est 600. Allons ici et cliquez sur l'icône Plus, sélectionnez Flexbox et Flexbox Tight sera la colonne de direction, et ici, la hauteur moyenne sera de six et non de 300, elle devrait être de 600 et nous pouvons modifier après la conception D'accord, et la direction sera horizontale brute, et ici, nous devons ajouter cette section. abord, nous devons ajouter l'en-tête, et avant d'ajouter l'en-tête, nous devons diviser cette section en deux comme nous l'avons fait ici. Donc, si nous vérifions le conteneur, nous aurons un conteneur différent dans cette section. Faisons de même. Donc, tout d'abord, je vais devoir cliquer ici pour ajouter un élément, cliquer sur conteneur suivre et déposer le conteneur comme ceci. Ensuite, j'ajoute Dance et retire les parties gauche et droite de ce conteneur. Ensuite, je dois faire la mise en page, la direction sera une colonne, et maintenant je clique ici pour ajouter un titre comme celui-ci Copiez le texte du titre à partir d'ici, collez le texte ici et ajoutez-le pour couper la ligne, puis allez dans Estyle et la typographie sera l'en-tête, puis la couleur du texte sera cette couleur Maintenant, nous devons ajouter cette boîte d'icônes, nous pouvons utiliser la boîte d'image. Je pense que la boîte à images fonctionnera, peut-être pas. Ajoutons la zone d'image, la zone d' image de recherche et ajoutons la zone d'image à l'intérieur ce conteneur sur Estyle. Définissez la position de l'image comme à gauche Mais le problème réside dans la boîte à image, nous n'avons pas beaucoup de fonctionnalités pour ajouter les trois lignes, nous devons donc le faire manuellement. Venons-y et changeons d'abord cette icône. Pour changer l'icône, je vais aller sur l'icône Google. Dans les symboles matériels et les icônes, je peux trouver les icônes. Icône de recherche hon. Nous avons cette icône d'appel, et voyons les détails à partir d'ici. En fait, ça vient d'ici. Ajustons la largeur pour qu'elle soit mince comme ça. OK, maintenant je clique sur ce PNG et voyons la couleur avant de le télécharger. La couleur est cette couleur bleue, copiez le code couleur et collez le code couleur. Je pense que c'est le même code couleur. OK, maintenant je clique sur PNG, en fait, il faut définir la taille. Donc, ici, la taille est 60. Essayons d'en ajouter 60, 60 ce sera du travail. Cliquez ensuite sur PNG et allez sur fig Musign faites défiler l'écran ici, cliquez sur cette icône et supprimez cette icône vectorielle, puis sélectionnez la disposition de l'icône, cliquez ici et placez l'icône comme ça Ensuite, nous devons ajuster l' icône de sélection uniquement et l' ajuster comme suit. OK. Maintenant, nous devons également obtenir l'icône de localisation. Cette icône fonctionnera, téléchargez-la, allez ici, supprimez cette liste déroulante et sélectionnez la disposition des icônes sur les vidéos illustrées téléchargez-la, allez ici, supprimez cette liste déroulante et sélectionnez , sélectionnez l'icône déroulante et déposez-la comme ceci. Ensuite, sélectionnez l'icône et réduisez sa taille comme ceci. OK. Ensuite, nous devons faire un rapport. Oui, ou celui-ci. Nous allons sélectionner ce profil de laboratoire comme suit. Retirez-le. Non, pas cette icône. Je décoche donc à juste titre l'icône, et ce sera l'icône OK. Dis-le comme ça. Alors et OK, jusqu'ici tout va bien. Et maintenant, nous pouvons télécharger ces icônes, sélectionner l'icône et cliquer sur l'icône Exporter. OK, créons-le. Tout d'abord, nous avons besoin d'un conteneur comme celui-ci. Ensuite, à l'avance, fixons marge de remplissage du conteneur à zéro, puis ici, ajoutons d'abord une boîte d'image et dans la zone cliquez ici et une ligne sera là, une ligne sera la direction de la ligne horizontale, ligne commencera et maintenant nous devons créer un autre conteneur à l'intérieur ce conteneur car ce conteneur est en ligne horizontale mais ces sections sont placés de manière verticale. Voyons voir que voici le conteneur que nous avons ajouté. Mettons-le comme ça, puis encore une fois, nous devons passer aux ajouts et c'est comme ça. Ici, passez à la mise en page et définissez la direction en tant que colonne ou ligne verticale, et maintenant nous pouvons ajouter un titre Voyons quel est le titre. Ajoutons trois titres ou nous pouvons simplement dupliquer celui-ci. d'abord, créons les détails en cliquant ici, face ici sur Esty, la typographie sera sous-titrée , puis la couleur sera cette couleur noire Ensuite, je vais le dupliquer pour trois fois comme celui-ci. Ensuite, nous demandons à ce texte de copier le texte et d'espacer le texte comme ceci sur chaque cravate, le changer en paragraphe et voici le numéro, je pense que ce sera une taille personnalisée, donc ce dernier 35 normal. Nous allons remplacer cette famille de polices par at 3535 regular. Voyons maintenant la taille de l'entrée, sélectionnez-en une La taille d'Ibteen est dix, sélectionnons le conteneur et définissons la ligne comme dix OK, passons au conteneur principal dans le conteneur principal, cliquez sur le centre des articles comme ceci. Voyons maintenant la taille de l'entrée. Il y en a également dix. Ici, la colonne sera 100 et cliquez sur le conteneur qui a un titre Allons ici et vérifions la taille de l'entretoise. C'est 30, ici nous pouvons définir la ligne comme 30. OK. Maintenant, nous devons dupliquer trois fois, je vais cliquer avec le bouton droit de la souris et dupliquer, dupliquer. Maintenant, si on en voit 30. Maintenant, nous allons copier ces autres détails comme celui-ci, d'abord le titre il a le même libellé et l'adresse a également le même libellé, puis nous devons lire trois preso, supprimer celui-ci et ajouter le bouton et le bouton sera là en fait, nous pouvons utiliser ce même Je pense que nous pouvons utiliser ce même bouton. Pour ce faire, je vais cliquer sur Modifier le modèle, puis sur Enregistrer et laisser. Nous pouvons simplement copier la propriété de ce bouton à partir d'ici. Cliquez ici, cliquez avec le bouton droit de la souris et cliquez sur Copier. Cliquez ensuite sur Enregistrer et revenir en arrière pour revenir en arrière, car il s'agit d'un modèle, et ici, nous pouvons facilement cliquer avec le bouton droit sur le bouton et cliquer sur le côté supérieur de cette vignette. Lorsque je place ce dé, suffit de coller le style du bouton et de cliquer ici, puis nous devons ajouter l'icône, sorte que l'icône sera une flèche. Et ce n'est pas ce type de flèche, découvrons la flèche. Ici, nous cliquons dessus, cliquez sur Insérer. OK, jusqu'ici tout va bien. Maintenant, nous devons copier le texte et le cadencer ici, et nous avons ici un problème. Nous en ajoutons six à droite et à gauche. Mettons-le à zéro pour ici, car nous n'avons pas besoin d'agir à gauche ou à droite, mais ici. Ensuite, je vais cliquer avec le bouton droit sur le dupliquer et le mettre ici et ici aussi, nous n'avons pas besoin de celui-ci, désolé, pas de celui-ci. Le contrôle est défini ou les options sont activées et supprimez celle-ci. Ensuite, nous aurons l'icône du planificateur Vs et nous la collerons comme ceci Modifions ensuite le contenu. Nous devons maintenant changer l'icône, cliquer sur cette icône et venir ici. Cliquez ensuite sur l'icône d'entrée et cliquez sur Exporter au format JPG, nous n'avons pas besoin de PNG. Sélectionnez l'icône JPG, cliquez ici, téléchargez l'icône, cliquez sur CLEC et maintenant nous avons cette icône et cliquez sur Exporter, JavGoIçon et criez et placez cette icône Nous avons maintenant le design du côté gauche selon ce design, et maintenant nous devons créer ce design du côté droit. Faisons-le dans la prochaine leçon. 116. Section de prise en contact avec vous - Partie 02: Bien, nous devons maintenant concevoir cette section. Commençons donc. Tout d'abord, je vais sélectionner cette image, cliquer sur Exporter, définir le type pass JPG et cliquer sur Exporter. Et ici, je vais passer à Tiny PNG et à Dragon Rope cette image afin que nous puissions l'optimiser. Ensuite, je clique sur le bouton JPEG pour le télécharger. OK, maintenant nous devons l' ajouter dans le conteneur principal. Trouvons donc le conteneur principal. Alors, cliquez ici. Ici, nous avons notre conteneur principal, et je clique simplement sur l'icône Plus et je recherche une image et mettons une image comme celle-ci . Sint it added see, let's see. Non, ça ne l'est pas. Ajoutons-le à nouveau. Nous devons l'ajouter ici. OK. C'est bon. Je vais maintenant cliquer sur l'image. L'image téléchargée, puis ici nous allons copier ce texte. Ajoutons-le sous forme de texte. OK, je clique sur Sélectionner et l'image est ajoutée. Maintenant, ce que nous devons faire est de sélectionner ce conteneur, et découvrons la valeur par défaut avec ce 550. Ajoutons à ce 550, cliquez ici pour sélectionner Px et 550. OK. Ensuite, nous devons ajouter de l'espace entre les deux Cliquez ici et nous devons également optimiser la résolution de l'image sur eTyleeGod. Dans ce conteneur principal, ajoutons une colonne de 90, la taille de l' invité était de 90 Maintenant, ce que nous devons faire est de cliquer sur l'espace entre et dans une fenêtre plus grande, cela ressemblera à ceci, puis nous devons le placer au centre. Cliquez sur Aligner le centre comme ceci. Maintenant, nous devons ajouter ces deux éléments, allons-y. 117. Section de prise en contact avec vous - Partie 03: Nous devons maintenant créer ces deux éléments, alors commençons par ici. Découvrons d'abord la largeur, la largeur est 213 et la hauteur est 152. Venons ici et cliquons sur notre conteneur principal. À l'intérieur du conteneur principal, créons un sous-conteneur comme celui-ci et placons-le après l'image Et maintenant, le design a été modifié, mais continuons et nous pouvons les corriger. Cliquez ici et accédez à Advance définissez la marge et ajoutez un zéro. Ensuite, dans la mise en page, nous pouvons définir en cliquant ici et en cliquant sur configurer , la largeur était de 213 Faisons en sorte que la largeur 213 et la hauteur soient 152. La taille de l'homme sera de 152. En fait, nous ne pouvons ajuster la hauteur que ce que nous devons régler. Nous l'avons donc déjà fait ici. Donc, si nous vérifions les choses comme ça, nous pouvons voir que nous avons ajouté ces détails. OK. Il ne nous reste plus qu'à cliquer sur le conteneur et à avancer sur la photo sur la position définie à l'avance comme absolue. OK, alors nous pouvons régler le set Op comme ceci pour le moment, restons-le ici. Et maintenant, nous devons ajouter ces textes, cliquer ici et cliquer sur le titre et ici sur le style, la typographie sera la tête, la couleur du texte sera cette couleur noire et le texte 24 heures sur 24, 7 jours sur 7, comme ça, puis je le dupliquerai et copierai celui-ci, puis je le collerai comme ça et sa taille sera inférieure. Je pense que la taille est enregistrée, est-ce que c' est le lit 25, voyons voir cliquer sur le titre et ici sur le style, la typographie sera la tête, la couleur du texte sera cette couleur noire et le texte 24 heures sur typographie sera la tête, la couleur du texte sera cette couleur noire et le texte 24, 7 jours sur 7, comme ça, puis je le dupliquerai et copierai celui-ci, puis je le collerai comme ça et sa taille sera inférieure. Je pense que la taille est enregistrée, c' est le lit 25, voyons Oui, c'est un ajout et cliquez ici, puis ajoutez une couleur d'arrière-plan à cette mise en page Passez au style sur fond de style, la couleur sera blanche comme ceci. Maintenant, nous devons ajouter une bordure, ajouter des radios de bordure. Si nous vérifions le rayon de la bordure, il cliquera sur cette mise en page et elle sera égale à 20 Mettons-le à 20 lors de la mise en page, placons-le au centre de la valeur et découvrons la taille attrayante. La taille attrayante est dix. Définissons-lui une tâche dix, pas une colonne. En fait, ça devrait être une rangée. OK. Maintenant, nous devons ajouter le rembourrage, vérifions-le Le rembourrage est de 20, sur le contenant, allez dans les ajouts et sur le rembourrage, réglez-le OK. Maintenant , nous devons ajouter cette ombre d'arrière-plan pour ce faire Je peux accéder au style et au style de l'ombre de la boîte, à l'ombre de la boîte, copions les détails de l'ombre de la boîte. Ici, cliquez sur l'ombre encadrée copiez les couleurs RGBA et venez ici, rythmez les couleurs RGBA, et le flou est de 15 et les autres Faisons en sorte que ce soit 15. OK. Maintenant, disons que c'est ici, alors établissons la position. de suite, le décalage sera comme ceci et le décalage vertical sera exactement ce qu'il est ici. Oui. Et nous oublions d'ajouter du rembourrage au conteneur principal, notre rembourrage devrait être Oui, c'est 120. Vous allez ajouter en haut de la marge pour le rembourrage 1220. Encore une fois, sélectionnez celui-ci et réglez-le comme ceci. Oui, jusqu'ici tout va bien et maintenant que nous avons celui-ci , nous devons ajouter le second Continuons de la même manière, cliquez d'abord ici pour ajouter un conteneur. Mettons un conteneur comme celui-ci et plaçons-le sous l'image comme ceci. OK. Ensuite, à l'avance, il reste zéro, et découvrons la largeur, la largeur est 213 fixel 213 Passons ensuite au style et ajoutons une couleur d'arrière-plan comme celle-ci. Copions ensuite le texte et ajoutons-le ici pour ajouter du texte à l'intérieur de ce conteneur. Ensuite, pour ajouter le vrai texte, et ici, disons la taille du même jour que celle du paragraphe, mais ce n'est pas le côté du paragraphe, non. Oui, la taille de police est de 40 . Faisons donc cette taille de police à 40 par un manuel comme celui-ci. OK, alors dupliquons ceci et copions celui-ci, mettons ce texte ici. Et pour ce qui est du style, la typographie sera un sous-titre. OK, maintenant, mettez-le au centre, placez également ce texte au centre et cliquez sur le conteneur, conteneur sur la mise en page, faites-en un centre d'alignement, et découvrons la taille intermédiaire. La taille intermédiaire est de dix, sur le rang, faites en sorte qu'elle soit dix et sur le rembourrage, il y en aura Une marque de rembourrage. Qu'en est-il des rembourrages gauche et droit ? Les rembourrages gauche et droit sont trop bons, trop bien, la gauche sera trop belle. Quelque chose ne va pas. Victoire, 40 ans, normal. Nous devons augmenter le Faisons la gauche et la droite, mais à zéro. Non, ça ne marche pas. Nous devons augmenter cela avec peu. Le 215-22-0220 fonctionnera. OK, jusqu'ici tout va bien. Et maintenant, il faut ajouter le coin. Donc, voyez le rayon d' angle, le rayon d'angle comme Voyons le rayon d'angle, le rayon d'angle est deux, le style sur le rayon du coin de la bordure est de deux vides, nous devons ajouter l'ombre de la boîte, le code couleur de l'ombre de la boîte, nous devons le copier d'ici. Définissez le CSS et copiez la couleur RGPA ici, nous devrions en faire 15 Maintenant, ça a l'air bien. Maintenant, ce que nous devons faire, c'est avancer et position sera absolue et nous pouvons la mettre ici. Et maintenant, changeons le décalage et voilà. C'est au milieu. Ajoutons-le donc à l'horizontale centrale. Faisons cette orientation horizontale afin de l'amener ici comme ça, elle devrait être juste au milieu. OK. Et nous avons oublié de changer la couleur du texte. Changeons la couleur du texte. OK, jusqu'ici tout va bien. Maintenant, nous avons ces deux éléments, et maintenant nous devons ajouter l'animation à cet élément. Alors allons-y. 118. Section de prise en contact avec la conception - Partie 04: OK. Lorsque je fais défiler la page vers le bas, je veux animer cette section vers le haut et quand je monte, elle doit être redirigée vers le haut et contenir le même jour, section le jour même Lorsque nous faisons défiler l'écran vers le haut et vers le bas, il doit aller à gauche et à droite horizontalement. Ajoutons donc ces animations. Cliquez donc ici puis lorsque vous avancez, allez dans effet de mouvement et sur effet mouvement, sur effet de défilement. l'effet de défilement, nous avons besoin de cette verticale, alors cliquez ici sur la verticale et voyons qu'elle est en En fait, ça devrait être comme ça. OK. Maintenant, définissons le point de vue. OK. Créons maintenant une nouvelle section afin bien comprendre l'animation Cliquez ici et ajoutez Maxt à 600 min de hauteur et maintenant, cela fonctionnera comme ceci C'est descendre, cliquez ici et arrêtons-nous quand ça vous plaira. Donc, c'est parti et arrêtons ça comme il faut. Ici, non, non, non, non ? OK. Sympa. Il faut maintenant ajouter le même effet à celui-ci. Cliquez ici et sur Effet de mouvement avancé, cliquez sur effet de défilement. Et ici, il faut ajouter le défilement horizontal. Et quand je le fais défiler, ça devrait se passer comme ça. Donc ici, ça se passe comme ça et ça redescend, quand je clique comme ça, il faut arrêter ici. Alors voyons voir. OK. Sympa. Nous avons maintenant complètement terminé la section « entrer en contact avec la clinique familiale JB OK, voilà, je viens de trouver un problème. Donc, si j'augmente la taille du site Web, cette section ira ici. Nous pouvons donc simplement le réparer, alors cliquez ici et allez à l'avance définissez à l'avance l' orientation horizontale comme correcte, et maintenant nous pouvons la définir ici. C'est comme ici ? Voyons voir. OK. Sympa. Cliquez sur publier 119. Correction du problème d'ombre de boîte: Lorsque je consulte le site Web, je peux voir ce type d'ombre d' arrière-plan et le rayon d'angle Nous n'en avons donc pas besoin ici, et j'en connais la raison , corrigeons-le. Si nous passons au fournisseur R, je valoriserai le modèle de fournisseur R dans le carrousel Loop et je cliquerai sur le conteneur Ensuite, si je passe à Advance et CSS personnalisé, nous avons ici le CSS, nous ouvrons donc le site Web sur un nouvel onglet. Voyons voir, et ici je vais supprimer ce CSS en appuyant sur Commande, une commande pour le couper et en cliquant sur Con Pablish. Maintenant, si je consulte le site Web, le problème sera résolu R Lorsque nous le supprimons d'ici, nous pouvons voir que l'arrière-plan des éléments dédiés au fournisseur disparaîtra également. Pour y remédier, je vais d'abord le mettre comme ça et ici je peux passer à la mise en page et dans la mise en page, je vais ajouter une classe CSS. Ajoutons notre panel de fournisseurs. Ce nom peut être n'importe quoi, mais je vais ajouter ce type de nom. Ensuite, je vais le copier et passer au CSS personnalisé. Ici, je vais simplement ajouter notre panneau de fournisseurs comme celui-ci. Faisons-en dix, ajoutons-le comme ça, ajoutons-le comme ça, ajoutons-le et espérons que cet argent ça et espérons que cet argent sera réglé ici, mais là, nous avons le problème. En fait, nous devons ajouter cette classe CSS deux, pas sur ce conteneur. Je pense que nous devrions l'ajouter sur le Carsel. Je vais donc le supprimer ici et passer à la publication. Désolé, nous devons le modifier ici Je les retire simplement. Ajoutons-les comme ça. Et espérons que cela fonctionnera, s'il vous plaît, puis cliquez sur couvent pour revenir ici, cliquez ici. Et puis essayons de modifier la classe CSS ici. Je pense que cela fonctionne. Il semble que cela fonctionne et cliquez sur publier. Encore une fois, passons à Modifier le modèle, le conteneur sur CS ici encore, nous avons un problème. Nous avons juste un CSSU. Nous n'avons pas ajouté d'espace ici Allgood, alors maintenant je clique sur publier et maintenant, quand je le coche, ça devrait fonctionner OK, maintenant ça marche. 120. Section sur l'examen de la conception - Partie 01: Tout le monde doit maintenant créer cette section fiable de familles Y comme Q. Il s'agit de la section d'aperçu. Pour ce faire, nous pouvons utiliser les mêmes techniques que celles que nous utilisons pour créer notre section dédiée aux fournisseurs. Commençons comme nous l'avons fait auparavant Je vais accéder au tableau de bord de Votress où nous pouvons créer un groupe de champs personnalisés avancés pour ajouter les avis Donc, ici, nous avons actuellement le champ de nos fournisseurs et je clique sur Nouveau. Et ici, je vais dire le nom en tant que champ d'évaluation des clients. Puis je clique sur Enregistrer les modifications. En fait, avant de créer le groupe de champs, nous devons créer les types de poses. Je clique donc sur les types de force, et ici nous avons les types de pose de nos fournisseurs, et ici nous avons les avis des clients, le type de publication, ajouter un nom rural comme avis du client et le nom singulier sera l'avis du client et le type de pose e sera l'avis du client, et nous n'avons pas besoin de noms de texte et la visibilité est publique et cliquez sur Enregistrer Maintenant, dans la configuration avancée, nous pouvons changer de laboratoire. En fait nous pouvons ajouter des icônes à ce champ personnalisé. Donc, actuellement, il y a des avis clients sous forme d'icône en forme d'épingle. Donc, si je passe à la visibilité ici, je peux voir une icône ici, ajoutons-la comme une étoile. OK. Quelle étoile d'évaluation fonctionnera avec cela, sélectionnez-la et cliquez sur Enregistrer les modifications. OK, c'est Secky maintenant je vais dans les groupes de terrain et ici je vais modifier roues d'évaluation des clients que nous avons déjà créées, et dans le champ, je vais cliquer sur Modifier et nous devons d'abord ajouter un nom. En fait, nous pouvons ajouter ce nom comme titre Si nous allons voir nos fournisseurs, prestataires et que nous avons ici nos fournisseurs, alors je clique sur Modifier et quand je modifie, nous pouvons ajouter ce docteur Lisa ou le titre comme nom du réviseur, comme ici dans MR se trouve le nom du réviseur et sur la description, nous pouvons ajouter l'avis et nous avons besoin du champ personnalisé pour le portrait En fait, ajoutons un champ de description comme ce champ d'image au portrait. C'est ce que nous allons faire. Ici, je vais ajouter un champ de description, ce qui signifie que la zone de texte et l'étiquette seront du texte de révision. Passons en revue. Pas besoin d'ajouter du texte il suffit de vérifier et le nom du champ sera révisé. Nous n'avons pas besoin de valeur par défaut, puis je clique sur le champ. Et ici, nous devons le sélectionner comme image. C'est une telle image. OK. Et la table de champs sera une photo de la tête, et le retour sera un tableau d'images et en bon état. Je vais maintenant passer au réglage dans la règle de localisation. Le type de publication sera égal à l'avis du client, et maintenant je clique sur Enregistrer les modifications. Un bon. Maintenant, si je vais dans section Avis du client et que je clique sur Nouveau commentaire du client, nous avons ici un endroit pour ajouter le titre comme nom et l'avis, puis l'image du portrait Si je consulte le contenu du site Web, nous pouvons voir le nom du client. Copiez le nom du client et placez-le comme titre. Ensuite, nous avons la description, puis nous devons obtenir l'image. Actuellement, nous n'avons pas d'images. Nous avons ces quelques images. Peut-être que dans le dossier d'images, nous pouvons voir les images. Nous avons ces avatas de critique dans notre dossier d'images. Nous avons ici le dossier d'images et, dans la première revue du projet, les Avatas Je vais simplement les mettre en évidence et ajouter l'image et je vais simplement les coller, ce qui signifie que nous pouvons les utiliser lorsque nous ajoutons l'image réelle. Nous avons donc le premier Avatar et cliquez sur Sélectionner puis sur Publier, publiez-le. D'accord, je vais ajouter le reste des commentaires des clients. Pour ce faire, je clique sur ajouter un nouvel avis client et copie ici le nom et la description. Copiez le nom en fonction d'une description et placez-le comme critique, puis trouvez le David et voici le David, nous cachons publions le commentaire Je ferai le reste et je vous verrai dans la prochaine leçon. 121. Section de révision avec élément évaluation: vous souhaitez créer la section de révision de manière simple, je vais également vous montrer le chemin. Nous pouvons simplement utiliser les éléments de révision de l'élément et les utiliser. Cette leçon sera la leçon avant de créer le carrousel ci-dessus, donc ne vous inquiétez pas dans la prochaine leçon, vous verrez comment créer le carrousel OK, maintenant je clique sur l'icône Plus et ici je recherche un avis. OK, nous avons ici une boîte de révision, déposez-la comme ça Et ici, nous devons ajouter des éléments. Donc, ajoutez d'abord les articles, nous devons trouver l'article. OK, en ce qui concerne le contenu du site Web, nous avons les détails, donc ajoutons je vais les ajouter un par un, mais nous aurons le nom et nous n'avons pas de titre, supprimez-le et nous avons la critique comme celle-ci, donc nous n'avons pas besoin de l'icône, supprimez l'icône sur l'image. Ajoutons une image comme celle-ci. OK. Faisons de même pour la course. J'ajouterai ces cinq critiques et à bientôt. OK, ajoutez les diapositives ou les critiques, et maintenant il ne reste plus qu'à définir le côté à afficher. Ce sera trois points de vue sur l' option supplémentaire, actuellement, je garderai l' option par défaut et sur le style, nous devons modifier les options. côté entre les deux sera de 20 la couleur de la bordure devrait être nulle et le rayon de la bordure de 20, la bordure avec devrait être zéro, la couleur de la bordure devrait également être et le rembourrage était trop beau, le rembourrage était trop beau, donc si nous le vérifiions d'ici, nous pouvons voir que donc si nous le vérifiions d'ici, le rembourrage est Donc maintenant, en ce qui concerne l'en-tête, nous n'avons pas besoin d'une couleur d'arrière-plan pour le séparateur, nous n'avons pas besoin d'une couleur d'arrière-plan pour le séparateur. La seule chose dont nous avons besoin , c'est de l'ombre. Essayons d'ajouter l' ombre de la boîte une fois ce design terminé et nous devons passer au texte, et dans le texte, la couleur du nom sera noire et la typographie est en sous-édition Oui, c'est du type subeding, et maintenant en ce qui concerne le titre, nous n'en avons pas, nous n'en avons pas, donc nous n'en avons pas Et la couleur de la critique sera le texte et la typographie sera le paragraphe Sur l'image, voyons la taille de l'image. Le design Figma, la taille de l'image 64 x 64, en fait 64. Maintenant, nous devons trouver l'écart, n'est pas le cas, c'est deux L et le rayon sera de 60. Faisons en sorte que ce soit 60. Nous n'avons pas besoin d'icônes. Nous n'allons pas modifier les détails de l'icône et nous avons ici une icône de révision. Voyons la taille de l'icône de révision. C'est 23 sur 23. Nous obtenons un espacement de 23, c'est six, et la couleur est : voyons la couleur, copions le code couleur et collez le code couleur ici Le fait est que nous ne voyons toujours pas les critiques, voyons comment les afficher. En option supplémentaire, avons-nous un avis ? Non. OK, ici nous devons ajouter la note. Ajoutons une note de cinq comme ceci. OK ? OK. Je t'ai compris. Je t'ai compris. Cinq. Oui, la note est toujours de cinq parce que pour le site Web, nous ajoutons la meilleure note pour le OK, maintenant tout va bien et nous avons obtenu le même résultat et nous avons encore beaucoup à faire. Donc, si nous allons dans Estyle et que nous devons maintenant définir la partie navigation sur la navigation, je mettrai la flèche zéro car nous n'avons pas besoin de flèches Voyons s'il existe un moyen de supprimer les flèches. Non. Je ne vois aucun moyen de supprimer la flèche, un style, on peut le faire. D'accord, et la pagination devrait être de deux. Je pense que l'espacement entre les deux est de 20 et la taille de Faisons donc la taille 20. La couleur est la couleur primaire, la couleur active sera cette couleur. Désolé, la couleur est la couleur d'accent, et la couleur active sera cette couleur. OK. Maintenant, que manque-t-il ? Alors voyons voir, voyons voir. Ici, il nous manque le contexte. Passons donc aux diapositives et en avons-nous ? Oui, nous avons des couleurs de bordure. Nous avons un moyen d'ajouter la bordure, mais pas au niveau de l'ombre. Alors voyons voir, voyons voir. Il devrait y avoir un moyen ou endroit pour ajouter l'ombre de la boîte. À l'avance, voyons la bordure, fixons le rayon de la bordure à 20 et supprimons l'ombre. Non, il est ajouté à toutes les sections ou ne le faisons pas, il suffit de l'ajouter à la diapositive. Donc, si je glisse, la couleur d'arrière-plan est correcte, les bordures sont bordées par deux, et le rayon du corps, la couleur du corps ne sera pas le blanc et le noir En fait, nous n'avons aucun moyen d'ajouter de l'ombre, mais nous avons déjà créé le CSS peut-être que l'ajout de ce code CSS ici fonctionnera. Je vais donc sélectionner le loop carer. Celui-ci, sélectionnons cette boucle Carsel. Vous souvenez-vous que nous ajoutons du CSS cast comme celui-ci ? Et allons-y. Passons à Advance et en CSS, allons-y, ça marche. Waouh sympa. Passons maintenant au contenu et je ne pensais pas que cela fonctionnait, mais ça marche. Ici, je vais recouvrir la bordure d'un corbeau et la couleur de la bordure sera « Non C'est la puissance du CSS alors nous devons supprimer le séparateur, bien sûr, et l'écart sera de k. Je pense que l'écart a disparu, c'est trop bien, pas six trop bien OK. Et ici, nous avons la note ci-dessous. Je pense qu'il n'y a aucun moyen d' ajouter la note ci-dessous. Oui, nous devons créer un ESS personnalisé, mais nous pouvons utiliser un modèle comme celui-ci en utilisant le carasel à boucles Ce sont les limites qui s'appliquent également aux diapositives dans les diapositives, nous devons régler le pad. Nous avons déjà organisé le mariage. Oh, non, il faut régler le haut vers le bas. Oh, peut-être que nous allons cliquer ici et ajouter le bas comme 30, afin d'obtenir les mêmes résultats. 81, c'est un peu plus grand. Ajoutons le bas comme six. OK, maintenant c'est bon. Et sur la navigation, les éléments de pagination de navigation sont trop proches, alors essayons de les corriger Je sais comment y remédier. Nous devons en avoir 60. Oui, nous verrons ce que nous pouvons faire. Mais pour l'instant, restons comme ça, et maintenant nous devons ajouter le même effet. Pour ce faire, voyons ce que nous pouvons faire. abord, je vais publier ceci et nous n'avons pas non plus la possibilité de créer cet effet ci-dessus, nous devons donc également ignorer celui-ci. Maintenant, je vais rafraîchir et nous devons trouver un moyen d'ajouter Drop Shadow ici. C'est donc l'inconvénient d' utiliser les éléments prédéfinis, mais avec la puissance de l' élément orp, nous pouvons créer des éléments personnalisés pour notre site Web et créer un site Web entièrement personnalisé à l'aide de modèles Maintenant, essayez au moins de résoudre ce problème de pagination. Je me suis également installé. OK, voilà, j'ai un moyen de masquer les flèches et la végétation devrait être ponctuée de points sur les diapositives OK, nous avons ici un moyen d'ajouter le mariage, mais nous n'avons pas besoin d'ajouter le avec. Let's make slides s' appelle « trois ». Faisons en sorte que ce soit quatre. Non, il devrait y en avoir trois ici et les diapositives sont correctes. Maintenant que nous corrigeons une chose et nous devons encore ajouter le dessus rembourré, voici, bon en termes de style, avons-nous un espace de taille 20 entre Et si on avance Voyons à l'avance. Je ne pense pas que nous ayons un moyen, car cela s'est produit lorsque nous avons ajouté cette classe CSS, nous devons donc corriger cela avec du CSS. Quoi qu'il en soit, nous n'allons pas utiliser cette critique de la boîte d'évaluation, je vais donc simplement la supprimer. C'est juste pour vous apprendre à le faire et nous devons ajouter du CSS, nous concentrons donc pas sur le CSS dans ce cours. Je supprime simplement cette partie et je vous verrai dans la prochaine leçon, qui porte sur la création du pied de page 122. Section sur l'examen de la conception - Partie 02: OK, maintenant nous avons ajouté des critiques. Commençons donc à concevoir. Donc, ici, d'abord, vérifions la taille de ce conteneur. C'est donc 492. La hauteur est de 492, alors faisons-en 500. Donc d'abord, je vais supprimer ce conteneur inutile et je clique ici iPlexBX en cliquant sur OK, voilà, allons-y pour avancer à l'avance. Supprimons tout ce qui est bloqué et faisons 140, 140, droite et gauche. Non, non, pas de marge. Ce devrait être du rembourrage Le rembourrage est de 140 et le rembourrage est également de 140, et la marge supérieure sera OK. Passons maintenant à la mise en page dans la mise en page. La taille de l'homme sera de 500 pixels. Maintenant, dans un premier temps, nous devons ajouter cet en-tête. Venons-y, choisissons un élément et ajoutons l'en-tête, puis copions ce texte, ajustons le rythme du texte et placons-le au centre de l'alignement. La typographie est l'en-tête et la couleur du texte sera ce texte OK. Il ne nous reste plus qu'à ajouter ce carrousel. Passons au carrousel à boucles. Je vais accélérer cette icône d'élément publicitaire et boucle de recherche. Nous avons ici un carrousel en boucles, ajoutez-le et maintenant je sélectionne le conteneur principal et, au format brut, je vais le faire à 60 parce qu'ici nous avons la taille attrayante Maintenant, allons-y, cliquons sur ce casel en boucle et nous devons d'abord créer un modèle Je vais simplement cliquer sur créer un modèle et cliquer sur Sato pour le créer OK, j'ai été créé, et je dois en sauver un. OK, maintenant sélectionnez à nouveau le conteneur. En fait, sélectionnons le casel en boucle et voici notre modèle automatiquement ajouté Et ne nous inquiétons pas du nombre de diapositives pour le moment. Et passons à la requête dans la requête. Je vais définir la source comme étant les avis des clients, puis effacer les données par défaut, puis cliquer sur Modifier le modèle OK. Maintenant, je vais cliquer sur ce plus, cliquer sur la case Plex, cliquer sur cette colonne de direction, accéder à Advance et supprimer la marge et le rembourrage Maintenant, dans un premier temps, nous devons ajouter l' image et le nom pour faire cette phrase, ajouter un élément et rechercher une image puis simplement ajouter l' image comme ceci. Ici, je vais cliquer sur la balise dynamique, et sur le champ d'image ACF, je vais définir la clé comme photo de la tête d' évaluation du client, comme celle-ci, l'image ajoutée et la résolution de l'image sera maximale Et pour afficher le résultat, je peux cliquer sur l' élément de boucle défini dans et sur le paramètre Query on review dans Query, je vais définir le paramètre d' aperçu de la source, définir l'aperçu d'un article de publication spécifique à examiner par le client et cliquer sur Appliquer et prévisualiser. C'est bon. Ajoutons maintenant le reste des détails, puis créons le design. Maintenant, je dois ajouter le nom, donc je vais ajouter le titre à l'intérieur et à partir de là, je vais définir et à partir de là, je vais définir le titre de l'article si je me souviens bien que le titre de l'article est le même ou nous pouvons cliquer sur Modifier pour le voir OK, ici, le titre de l'article est le nom du réviseur. OK. Maintenant, je vais juste le changer de couleur et voyons la police huit normale 25, ce qui signifie qu'ici, elle devrait être subding, elle est sous-titrée, laissez le sous-d entrer, et maintenant je vais dupliquer ce texte et sélectionnons ici le type de pose ici, supprimez le titre de la pose et cliquez sur tag dynamique et le champ ACF, cliquez dessus La clé sera la révision. Oui, l'avis vient d'être ajouté et sa taille doit être de la taille d'un paragraphe. Passons donc au réglage ici, définissons-le sous forme de paragraphe et sur conteneur, ajoutons la taille intermédiaire, la taille de l'invité est la taille de l'invité, donc je vais passer à la mise en page et la taille de la ligne sera de deux l'invité est la taille de l'invité, donc je vais passer à la mise en page et la taille de la ligne sera Maintenant, nous avons un problème. Actuellement, nous avons le jeu d'icônes , toutes ces icônes sont au nombre de cinq, mais si quelqu'un de Four Star Revue a un endroit où nous pouvons le faire, nous devons le personnaliser, car si nous ajoutons simplement quatre ou cinq étoiles ici, nous ne pourrons pas le personnaliser. Essayons de passer à la suivante. Maintenant, nous avons ajouté des critiques. Commençons donc à concevoir. Donc, ici, d'abord, vérifions la taille de ce conteneur. C'est 492, la hauteur est 492, alors faisons-en 500. Je vais d'abord supprimer ce conteneur inutile et je clique ici lex box, puis sur la colonne Fatigué. OK, voilà, allons-y pour avancer à l'avance. Supprimons tout ce qui est bloqué et faisons 140, 140, droite et gauche. Non, non, pas de marge. Ce devrait être du rembourrage Le rembourrage est de 140, le rembourrage est également de 140 et la marge supérieure sera OK. Passons maintenant à la mise en page dans la mise en page. La hauteur de l'homme sera de 500 pixels. Maintenant, dans un premier temps, nous devons ajouter cet en-tête. Venons-y, élément p, et ajoutons l'en-tête, puis copions ce texte, espacons le texte et placons-le au centre de l'alignement. La typographie est l'en-tête et la couleur du texte sera ce texte OK. Maintenant, il ne nous reste plus qu'à ajouter ce carrousel. Passons au carrousel à boucles. Je vais accélérer cette icône d'élément publicitaire et boucle de recherche. Ici, nous avons un carrousel en boucles, ajoutez-le et maintenant je sélectionne le conteneur principal et au format brut, je vais le faire à 60 parce qu'ici nous avons la taille attrayante de 60, Maintenant allons-y, cliquons sur ce casel en boucle et nous devons d'abord créer un modèle Je vais simplement cliquer sur créer un modèle et cliquer sur Sato pour le créer OK, j'ai été créé, et je dois en sauver un. OK, maintenant sélectionnez à nouveau le conteneur. En fait, sélectionnons le casel en boucle et voici notre modèle automatiquement ajouté Et ne nous inquiétons pas du nombre de diapositives pour le moment. Et passons à la requête dans la requête. Je vais définir la source comme étant les avis des clients, puis effacer les données par défaut, puis cliquer sur Modifier le modèle OK. Maintenant, je vais cliquer sur ce plus, cliquer sur la case Plex, cliquer sur cette colonne de direction, accéder à Advance et supprimer la marge et le rembourrage Maintenant, dans un premier temps, nous devons ajouter l'image et le nom. Pour ce faire, je vais ajouter un élément et rechercher une image et ajouter simplement l'image comme ça et oui, nous devons ajouter l'image et le nom. Pour ce faire, je vais ajouter un élément et rechercher une image et ajouter simplement l'image comme ça et oui, ici, je vais cliquer sur la balise dynamique, et sur le champ d'image ACF, je vais définir la clé comme tête d'affiche de révision par le client comme ceci, l'image ajoutée et la résolution de l'image seront complètes et pour montrer le résultat Je peux cliquer sur l'élément Loop défini dans et sur Query. Non, lors de la révision sur Query, je vais définir le paramètre d' aperçu de la source, définir l'élément de publication spécifique à l'aperçu pour examen par le client et cliquer sur Appliquer et prévisualiser. Ajoutons maintenant le reste des détails, puis créons le design. Maintenant, je dois ajouter le nom, je vais ajouter le titre à l'intérieur et à partir de là, je vais dire le titre de l'article, si je me souviens bien que le titre de l'article est le nom, nous pouvons donc cliquer sur Modifier et le voir OK, ici, le titre de l'article est le nom du réviseur. OK. Maintenant, je vais juste le changer de couleur et voyons la police normale 25, ce qui signifie qu'ici, elle devrait être subding, si elle est sous-titrée, laissez le sous-d entrer, et maintenant je vais dupliquer ce texte et sélectionnons ici le type de pose ici, supprimez le titre de la pose et cliquez sur tag dynamique et le champ ACF, cliquez dessus La clé sera la révision. Oui, l'avis vient d'être ajouté et sa taille doit être de la taille d'un paragraphe. Passons donc à l'installation, et ici, définissons-le sous forme de paragraphe et dans définissons-le sous forme de paragraphe et le conteneur, à la taille invitante, la taille inversée est de deux La taille attrayante est de deux, je vais donc passer à la mise en page et la taille des rangées sera de deux. Maintenant, nous avons un problème. Actuellement, nous avons les icônes, toutes ces icônes sont au nombre de cinq, mais si quelqu'un ajoute une revue quatre étoiles, nous avons un endroit où nous pouvons la consulter, nous devons la personnaliser, car si nous ajoutons simplement quatre ou cinq étoiles ici, nous ne pourrons pas la personnaliser. Essayons de le faire dans la prochaine leçon. OK, maintenant nous avons ajouté des critiques. Commençons donc à concevoir. Donc, ici, d'abord, vérifions la taille de ce conteneur. C'est donc 492. La hauteur est de 492. Alors faisons-en 500. Donc d'abord, je vais supprimer ce conteneur inutile et je clique ici Vlexbx en cliquant sur OK, voilà, allons-y pour avancer à l'avance. Supprimons tout ce qui est bloqué et faisons 140, un, 40, à droite et à gauche. Non, non, pas de marge. Ce devrait être du rembourrage Le rembourrage est de 140, le rembourrage de gauche est également de 140, et la marge supérieure sera OK. Passons maintenant à la mise en page dans la mise en page. La taille de l'homme sera de 500 pixels. OK. Maintenant, dans un premier temps, nous devons ajouter cet en-tête. Venons-y, choisissons un élément et ajoutons l'en-tête, puis copions ce texte, mettons-le en phase et placons-le au centre de l'alignement. La typographie est l'en-tête et la couleur du texte sera ce texte OK. Il ne nous reste plus qu'à ajouter ce carrousel Passons au carrousel à boucles. Je vais accélérer cette icône d'élément publicitaire et boucle de recherche. Nous avons ici un carrousel de boucles, ajoutez-le Maintenant, je sélectionne le contenant principal, et à l'état brut, je vais le faire à 60 parce qu'ici nous avons la taille intermédiaire à 60. OK. Maintenant allons-y , cliquons sur ce casel en boucle et nous devons d'abord créer un modèle Je vais simplement cliquer sur créer un modèle et cliquer sur Sato pour le créer OK, j'ai été créé, et je dois en sauver un. OK, maintenant sélectionnez à nouveau le conteneur. En fait, sélectionnons le casel en boucle et voici notre modèle automatiquement ajouté Et ne nous inquiétons pas du nombre de diapositives pour le moment. Et passons à la requête dans la requête. Je vais définir la source comme étant les avis des clients, puis effacer les données par défaut, puis cliquer sur Modifier le modèle Maintenant, je vais cliquer sur ce plus, cliquer sur la case Plex, cliquer sur cette colonne de direction, accéder à Advance et supprimer la marge et le rembourrage Maintenant, dans un premier temps, nous devons ajouter l'image et le nom pour faire cette phrase, ajouter un élément et rechercher une image et simplement ajouter l' image comme ceci. Ici, je vais cliquer sur la balise dynamique, et sur le champ d'image ACF, je vais définir la clé comme portrait de l' avis du client, comme celui-ci OK, l'image a été ajoutée et la résolution de l'image sera maximale. Et pour afficher le résultat, je peux cliquer sur l'élément Loop défini dans et sur Query. Non, lors de la révision sur Query, je vais définir le paramètre d' aperçu de la source, définir l'aperçu d'un article de publication spécifique à examiner par le client et cliquer sur Appliquer et prévisualiser. Ajoutons maintenant le reste des détails, puis créons le design. Maintenant, je dois ajouter le nom, je vais ajouter le titre à l'intérieur et à partir de là, je vais dire le titre de l'article, si je me souviens bien que le titre de l'article est le nom, nous pouvons donc cliquer sur Modifier et le voir OK, ici, le titre de l'article est le nom du réviseur. OK. Maintenant, je vais juste changer la couleur et voyons la police normale 25, ce qui signifie qu'ici, elle devrait être subding. Oui, il s'agit donc d'une sous-ardoise et maintenant je vais dupliquer ce texte . Sélectionnez le type de pose ici et ici, supprimez le titre de la pose et cliquez sur le tag dynamique et le champ ACF, cliquez dessus La clé sera la révision. Oui, l'avis vient d'être ajouté et sa taille doit être de la taille d'un paragraphe. Passons donc au réglage ici, définissons-le comme paragraphe et sur le conteneur, ajoutons la taille intermédiaire, la taille attrayante est de deux. La taille de l'invité est de deux, je vais donc passer à la mise en page et la taille des lignes sera Maintenant, nous avons un problème. Actuellement, nous avons les icônes, toutes ces icônes sont au nombre de cinq, mais si quelqu'un ajoute une revue quatre étoiles, nous avons un endroit où nous pouvons la consulter, nous devons la personnaliser, car si nous ajoutons simplement quatre ou cinq étoiles ici, nous ne pourrons pas la personnaliser. Essayons de le faire dans la prochaine leçon. OK, maintenant nous avons ajouté les critiques. Commençons donc à concevoir. Donc, ici, d'abord, vérifions la taille de ce conteneur. Donc c'est 492, la hauteur est 492, disons 500. Donc, d'abord, je vais supprimer ce conteneur inutile et je clique ici Plex box, puis sur la colonne Fatigué. OK, voilà, allons-y pour avancer à l'avance. Supprimons tout cela, et faisons 140, un, 40, à droite et à gauche. Non, non, pas de marge. Ce devrait être du rembourrage Le rembourrage est de 140, le rembourrage de gauche est également de 140, et la marge supérieure sera OK. Passons maintenant à la mise en page dans la mise en page. La hauteur de l'homme sera de 500 pixels. Maintenant, dans un premier temps, nous devons ajouter cet en-tête. Venons-y, choisissons un élément et ajoutons l'en-tête, puis copions ce texte, mettons-le en phase et placons-le au centre de l'alignement. La typographie est l'en-tête et la couleur du texte sera ce texte OK. Il ne nous reste plus qu'à ajouter ce carrousel Passons au carrousel à boucles. Je vais accélérer cette icône d'élément publicitaire et boucle de recherche. Ici, nous avons un carrousel en boucles, ajoutez-le, et maintenant je sélectionne le conteneur principal et, à l'état brut, je vais le faire à 60 parce qu'ici nous avons la taille attrayante OK. Maintenant allons-y , cliquons sur ce casel en boucle et nous devons d'abord créer un modèle Je vais simplement cliquer sur créer un modèle et cliquer sur Sato pour le créer OK, j'ai été créé, et je dois en sauver un. OK, maintenant sélectionnez à nouveau le conteneur. En fait, sélectionnons le casel en boucle et voici notre modèle automatiquement ajouté Et ne nous inquiétons pas du nombre de diapositives pour le moment. Et passons à la requête dans la requête. Je vais définir la source comme étant les avis des clients, puis effacer les données par défaut, puis cliquer sur Modifier le modèle Maintenant, je vais cliquer dessus et je peux cliquer sur la case Plex, cliquer sur cette colonne de direction, accéder à Advance et supprimer la marge et le rembourrage Maintenant, dans un premier temps, nous devons ajouter l' image et le nom pour ce faire , je formule « ajouter un élément » et « rechercher une image et simplement ajouter l' image comme ceci. Ici, je vais cliquer sur le tag dynamique et sur le champ d'image ACF, je vais définir la clé comme photo de tête de l' avis du client, comme ceci l'image sera ajoutée et la résolution de l'image sera complète. Pour afficher le résultat, je peux cliquer sur l' élément de boucle défini et sur le paramètre de requête lors de la révision sur Query, je vais définir le paramètre d' aperçu de la source définir l'aperçu d'un article spécifique pour consulter le client et cliquer sur Appliquer et prévisualiser. C'est bon. Ajoutons maintenant le reste des détails, puis créons le design. Maintenant, je dois ajouter le nom, donc je vais ajouter le titre à l'intérieur et à partir de là, je vais définir le titre de l'article, si je me souviens bien que le titre de l'article est le même, afin que nous puissions cliquer sur Modifier et le voir OK, ici, le titre de l'article est le nom du réviseur. OK, maintenant je vais juste changer de couleur et voyons la police normale 25, ce qui signifie qu'ici, elle devrait être subding. Oui, s'il s'agit de sous-définir le sous-lit, je vais maintenant dupliquer ce texte . Sélectionnez le type de pose ici , supprimez le titre de la pose et cliquez sur tag dynamique et le champ af, cliquez dessus La clé sera la révision. Oui, l'avis vient d'être ajouté et sa taille doit être de la taille d'un paragraphe. Passons donc au réglage ici, définissons-le comme paragraphe et sur le conteneur, ajoutons la taille intermédiaire, la taille attrayante est de deux. La taille de l'invitation est de deux, donc je vais passer à la mise en page et la taille des lignes sera légèrement différente Maintenant, nous avons un problème. Actuellement, nous avons un ensemble d'icônes , toutes ces icônes sont au nombre de cinq, mais si quelqu'un ajoute une revue quatre étoiles, nous avons un endroit où nous pouvons le faire, nous devons la personnaliser, car si nous ajoutons simplement quatre ou cinq étoiles ici, nous ne pourrons pas la personnaliser. Essayons de le faire dans la prochaine leçon. OK, maintenant nous avons ajouté les critiques. Commençons donc à concevoir. Donc, ici, d'abord, vérifions la taille de ce conteneur. Donc c'est 492, la hauteur est 492. Alors faisons-en 500. Donc, d'abord, je vais supprimer ce conteneur inutile et je clique ici Plex box, puis sur la colonne Fatigué. OK, voilà, allons-y pour avancer à l'avance. Supprimons tout cela et faisons 140, 140, à droite et à gauche. Non, non, pas de marge. Ce devrait être du rembourrage Le rembourrage est de 140, le rembourrage de gauche est également de 140, et la marge supérieure sera OK. Passons maintenant à la mise en page dans la mise en page. La taille de l'homme sera fixée à 500 points. Maintenant, dans un premier temps, nous devons ajouter cet en-tête. Venons-y, choisissons un élément et ajoutons l'en-tête, puis copions ce texte, mettons-le en phase et placons-le au centre de l'alignement. La typographie est l'en-tête et la couleur du texte sera ce texte OK. Il ne nous reste plus qu'à ajouter ce carrousel. Passons au carrousel à boucles. Je vais cliquer sur l'icône de cet élément publicitaire et rechercher Loop. Nous avons ici un carrousel en boucle, ajouterai et maintenant je sélectionne le conteneur principal et au format brut, je vais le faire à 60 parce qu'ici nous avons la taille attrayante OK. Maintenant allons-y , cliquons sur ce casel en boucle et nous devons d'abord créer un modèle Je vais simplement cliquer sur créer un modèle et cliquer sur Sato pour le créer OK, j'ai été créé, et je dois en sauver un. OK, maintenant sélectionnez à nouveau le conteneur. En fait, sélectionnons le casel en boucle et voici notre modèle automatiquement ajouté Et ne nous inquiétons pas du nombre de diapositives pour le moment. Et passons à la requête dans la requête. Je vais définir la source comme étant les avis des clients, puis effacer les données par défaut, puis cliquer sur Modifier le modèle Maintenant, je vais cliquer sur ce plus, cliquer sur la case Plex, cliquer sur cette colonne de direction, accéder à Advance et supprimer la marge et le rembourrage Maintenant, dans un premier temps, nous devons ajouter l'image et le nom pour faire ce que je formule, ajouter un élément et rechercher une image et simplement ajouter l' image comme ceci. Ici, je vais cliquer sur la balise dynamique, et sur le champ d'image ACF, je vais définir la clé comme en-tête d' évaluation par le client, comme ceci, l'image ajoutée et la résolution de l'image sera maximale Et pour afficher le résultat, je peux cliquer sur l'élément Loop défini dans et sur Query. Non, lors de la révision sur Query, je vais définir le paramètre d' aperçu de la source, définir l'élément de publication spécifique à l'aperçu pour examen par le client et cliquer sur Appliquer et prévisualiser. Ajoutons maintenant le reste des détails, puis créons le design. Maintenant, je dois ajouter le nom, je vais ajouter le titre à l'intérieur et à partir de là, je vais dire le titre de l'article, si je me souviens bien que le titre de l'article est le nom, nous pouvons donc cliquer sur Modifier et le voir OK, ici, le titre de l'article est le nom du réviseur. OK. Maintenant, je vais changer sa couleur et voyons la police normale 25, ce qui signifie qu'ici, elle devrait être subding. Oui, il est donc trop tard pour ajouter le sous-titre et maintenant je vais dupliquer ce texte . Passons la sélection du type de pose ici, supprimez le titre de la pose et cliquez sur le tag dynamique et le champ ACF, cliquez dessus La clé sera la révision. Oui, l'avis vient d'être ajouté et sa taille doit être de la taille d'un paragraphe. Passons donc au réglage ici, définissons-le comme paragraphe et sur le conteneur, ajoutons la taille intermédiaire, la taille attrayante est. La taille de l'invitation est de deux, je vais donc passer à la mise en page et la taille de la ligne va changer maintenant nous avons un problème Actuellement, nous avons les icônes, toutes ces icônes sont au nombre de cinq, mais si quelqu'un ajoute quatre étoiles, nous avons un endroit où nous pouvons le faire, nous devons le personnaliser, car si nous ajoutons simplement quatre ou cinq étoiles ici, nous ne serons pas en mesure de le personnaliser. Essayons de le faire dans la prochaine leçon. 123. Section sur l'examen de la conception - Partie 03: Premièrement, regarde ça. Nous avons un widget d'évaluation IA, si nous l'ajoutons ici et ici, nous pouvons définir l'échelle de notation, fixons-le à cinq et dans le classement, nous pouvons ajouter un t dynamique, nous pouvons ajouter un t dynamique, ce qui signifie que nous devons créer des champs personnalisés avancés dans lesquels nous pouvons avoir la possibilité d'ajouter un point de notation sous forme Faisons-le. Avant cela, si nous recherchons un avis, nous pouvons également voir cette boîte d'avis , y ajouter des avis individuels et personnaliser le design. Dans ce cas, continuons avec le loop carsel et voyons ce que nous pouvons faire Je passe maintenant au champ personnalisé avancé et au groupe de champs. Dans le groupe de champs, nous devons sélectionner le champ d'évaluation du client. Modifions-le. Ensuite, nous devons ajouter un nouveau champ. Ce champ sera de type numérique. Ajoutons le libellé du champ car la révision se déroule comme ça. Maintenant, je clique sur Enregistrer les modifications et maintenant si nous passons à l' évaluation du client et à la révision de la couverture, nous pouvons voir de nouveaux champs d'évaluation Je vais donc en faire cinq et les enregistrer. OK, faisons-le pour le reste. En fait, ici, nous n'avons pas besoin de les ajouter manuellement car nous les avons déjà créés. Nous pouvons ajouter une valeur par défaut à ce champ. Passons au champ personnalisé avancé et au groupe de champs dans le groupe de champs, modifions le champ de révision cien. Et ici, nous devons modifier cette critique ici comme valeur par défaut, je vais en saisir cinq Non, il n'est pas nécessaire d'ajouter un nouveau champ. Ici, nous ajoutons cinq comme valeur par défaut et cliquons sur Enregistrer les modifications. Passons maintenant aux avis des clients. Et si nous passons à celle-ci de cette revue, nous devons voir le score de cinq. Nous avons simplement ajouté un champ vide parce que je pense que lorsque nous avons supprimé ce champ, il n'a pas été supprimé. Revenons en arrière . Nous n'avons pas besoin de simplement le supprimer et de cliquer sur Enregistrer les modifications. OK. Maintenant, dans les revues passons à MI et sa valeur par défaut est cinq. OK, jusqu'ici tout va bien. Et maintenant, il faut ajouter le design. Passons à notre article élémentaire, et nous avons ici ces critiques, passons à l'évaluation et à la personnalisation par avance Hum, ajoutons les as. En fait, nous devons le répéter. OK, nous avons déjà économisé et c'est une bonne chose. Donc, si nous ajoutons deux, cela sera affiché sous la forme de deux, mais dans ce cas, nous pouvons définir la balise dynamique, cliquer sur le champ avancé de la balise dynamique et cliquer sur Advancnumber wheel que nous avons examiné Très bien, jusqu'ici tout va bien maintenant je peux le publier et si nous le voulons, nous pouvons le voir dans le design. OK. 124. Section sur l'examen de la conception - Partie 04: OK, modifions le modèle et améliorons le design. Je clique sur Modifier le modèle, et c'est parti. Voyons voir, nous devons d'abord créer cette image sur le côté gauche et le nom sur le côté droit, et l'image que je vois est 64 x 64. Comme il faut ajouter le rayon des coins arrondis. Allons-y, je sélectionne d'abord l'image. Un style, créons le centre d'alignement, puis changeons la cellule maximale à 64 et le rayon sera de 30, 30 n'est pas bon, mais environ 60, 60 fonctionneront parfaitement. Ça a l'air bien, alors ce que je dois faire c'est créer un nouveau conteneur, créons un conteneur comme celui-ci et passons à l'étape suivante, pas ici. Sélectionnez le conteneur que nous venons de créer et, à l'avance, supprimez la marge et le rembourrage et ajoutez l'image à l'intérieur du nom du conteneur à l'intérieur du conteneur Sélectionnez ensuite le conteneur et, lors de la mise en page, changez-le dans la direction d'une ligne comme celle-ci, puis faites-le aligner au centre. Ici, nous avons un petit problème. Si nous vérifions que cette image n'est pas parfaitement alignée, nous pouvons peut-être définir cette image de taille moyenne car sur Advance, nous pouvons ajouter le rembourrage supérieur inférieur, et non le rembourrage, la marge supérieure, faisons en sorte que la marge passe supérieure soit négative non le rembourrage, la marge supérieure, faisons en sorte que la marge passe supérieure Oui, maintenant ce sera parfait et je clique sur le deuxième conteneur, et ici nous devons ajouter l'écart entre les colonnes. Si nous vérifions ici et que nous voyons que la colonne est trop belle, faisons-la également. Et maintenant, nous devons nous occuper de ces EA. Copiez la couleur des étoiles et cliquez sur le style r one. Changeons cette couleur comme ceci. Et qu'en est-il de la taille ? La taille de l'étoile est de 23 sur 23 et l'espace est de six. Faisons en sorte que l'espacement soit six et que la taille soit 23 par 23. D'accord. Maintenant, que devons-nous modifier ? OK, pour l'instant tout va bien tout sera parfaitement aligné, et entre les tailles 12 ici. Je crois que je l'ai déjà ajouté entre les deux. Si ce n'est pas le cas, oui, nous l'avons déjà ajouté. D'accord. Maintenant, nous devons ajouter l'effet d'arrière-plan comme nous l'avons fait ici. Nous avons déjà créé le code CSS et la classe CSS. Ajoutons-le. Avant de l'ajouter, ajoutons les rembourrages autour de cette boîte. Voyons les modèles ici. Il y en a deux et voilà, et la taille de cette boîte est de 300. Réglons ces détails, installons le conteneur et, à l' avance, il y aura un PaddinaSTL La largeur sera alors de 300. Non, la hauteur sera de 300. Allons-y. OK, qu'en est-il du rayon d'angle ? Voyons voir que le rayon d'angle est de 20, donc dans le style, le rayon de bordure est de 20. OK, je pense que tout va bien, alors cliquez sur Publier ou sur Seven Badge. Et maintenant, il ne nous reste plus qu' à ajouter cette classe CSS. Essayons donc de trouver cette classe, et ainsi de suite, nous devons sélectionner le loop carel Dans loop carsel à l'avance, nous avons la classe CSS, donc copions la classe et sélectionnons cette boucle CarUselo advance ajoutons le CSS plus ici et voyons qu'il vient d'être ajouté comme ça Maintenant, il ne nous reste plus qu'à trouver une taille attrayante. La taille accueillante est de 20, ici, il faut aller chez Estyle in style gap between should be 20 D'accord. Maintenant, je vais le publier et il est tellement bon jusqu'à présent que nous l'ajoutons. Cependant, lorsque nous vérifions le design, nous pouvons voir dans la troisième revue que nous ne voyons que la moitié de cette critique. Créons cet effet pour cela, nous devons passer au contenu. ce qui concerne le contenu et la mise en page, nous devons d' abord déterminer le nombre de diapositives. Voyons donc que nous n' avons actuellement que cinq diapositives. Faisons en sorte que cela soit cinq, et la diapositive affichée en aura deux. Alors maintenant, vous n'en verrez que deux, mais ne vous inquiétez pas. Je vais vous montrer comment y remédier, et Slide on Icroll en sera une Ensuite, si nous passons au réglage, nous avons ici une diapositive de décalage. Je vais ajouter une diapositive offset à gauche. Quand je l'ajoute comme à gauche, nous ne voyons que la diapositive d'ici. En fait, ça devrait être juste comme ça. Et si on augmentait cette largeur de décalage ? Lorsque nous ajoutons la largeur du décalage, elle apparaît simplement comme ceci, mais nous en avons besoin pour en afficher davantage. Pour ce faire, nous pouvons simplement ajouter le décalage de 200. Disons que 200 sera la taille. Il devrait être un peu plus grand. Passons à 20 à 30 à 52. 50 sera la meilleure taille jusqu'à présent, donc bon. Et maintenant, pour ce qui est de la navigation, je n'ai pas besoin de montrer les flèches, alors masquez-les. Dans la pagination, je veux voir le point comme la pagination. Ajoutons du style à ces points. Passons au style sur la pagination. Les points entre les deux seront 220 et les côtés des points seront de 20. L'espace entre les points sera de 20, taille de 20 et la couleur sera cette couleur primaire. Maintenant, l'espacement devrait être, je pense que c'est 30, c'est 20 Faisons en sorte que ce soit 20. Et maintenant nous avons un problème, nous avons ici beaucoup de points. Faisons en sorte que la couleur soit bleue. D'accord. Maintenant, pour réduire ce nombre de points, nous devons modifier la diapositive sur Scroll. Faisons en sorte qu'il y en ait deux. Dans ce cas, deux seront la solution parfaite. Alors maintenant, deux diapositives seront modifiées comme ceci. OK, maintenant je clique sur Publier et nous avons ici une section de critique comme 125. Section de pied de page de conception: Bonjour, tout le monde. Nous devons maintenant concevoir ce pied de page. Alors faisons-le. abord, je passe à notre modèle Elemento et nous n'avons pas besoin de cette section Supprimons-la et cliquons sur Publier, puis nous devons créer le modèle de pied Je vais donc aller dans WP Admin, et sur WP Admin, je vais accéder aux modèles et enregistrer Et si nous cliquons sur Publier, nous pouvons voir le modèle Nous avons déjà créé le modèle principal, mais nous n'avons ajouté aucun contenu. Cependant, la création de la section Puta est très simple. Cliquez simplement sur ce bouton pour ajouter un nouveau modèle et vous pouvez sélectionner le type de modèle ici. Ici, dans ce cas, isolez le pied et ajoutez le nom, puis cliquez sur Créer un modèle. Je l'ai déjà fait et ici je vais cliquer sur Modifier avec élément. Je pense que tu l'as déjà fait aussi. Et ici, ne pensez pas à ces deux-là, commençons à concevoir. Je vais fermer le conteneur que j'ai déjà créé, puis je clique sur passer, puis je clique sur le conteneur de type colonne de direction. Allons-y ici. Cliquez ensuite ici pour trouver que la hauteur est 42, quatre. Ajoutons la hauteur minimale comme 42, désolé, 42, quatre. OK, et nous devons d'abord créer cette section. Pour créer cette section, nous pouvons créer un nouveau conteneur. Faisons donc en sorte que cette direction soit brute , puis cliquez sur Plus seconde et ajoutons un conteneur comme celui-ci. Et dans ce récipient, retirez à l'avance tous les rembourrages et les marges. OK. Nous devons d'abord ajouter ce logo, sélectionner le logo, cliquer sur Exporter et cliquer sur Exporter le logo, et ici recherchez une image et ajoutez l'image comme celle-ci, cliquez ici et faites simplement glisser le logo que nous venons créer et cliquez sur Sélectionner et ici sur Lien, cliquez ici et cliquez sur URL personnalisée, et ici nous devons ajouter le titre de la page d'accueil. Ici, nous pouvons simplement sélectionner les balises dynamiques et cliquer sur l'URL du site, ce sera donc l'URL de la page d'accueil et nous devons créer cette couleur dans cette couleur noire. Je vais copier le code couleur de Figma Design et cliquer sur le conteneur principal sur Estyle, cliquer sur le type d'arrière-plan et ajouter la couleur comme ceci Jusqu'ici, tout va bien. Ensuite, sur le style de l'image, définissez l'alignement sur la gauche et maintenant nous devons ajouter ce texte Je vais donc simplement copier le texte plus deuxième titre dans le titre ici, coller ici et le texte taille le paragraphe et l' alignement à gauche, puis la couleur sera blanche Nous n'avons pas besoin de penser à la largeur de ce contenu, car nous pouvons le corriger une fois la conception terminée, puis à ce que nous devons ajouter à ces liens de réseaux sociaux. Pourquoi rechercher ici une icône sociale et ici nous avons une icône sociale. Je les glisse et je les vole comme ça et ici nous pouvons ajouter les icônes. Voyons quel type d'icône nous avons. Nous avons Facebook, Twitter ou X liés à Instagram. Ajoutons ces systèmes Twitter C'est l' icône que vous voulez. Facebook, Twitter, lié, cela devrait être lié et ici, nous devons ajouter l'URL du lien pour le moment, je ne vais ajouter aucune URL, puis cliquer sur Ajouter un élément et ajouter l'élément suivant, qui est Instagram. Cliquez ici, recherchez en étoile ici nous avons une icône Instagram. Maintenant, l'alignement doit être arrondi et la forme doit être arrondie et un style doit changer de couleur officielle en couleur personnalisée. Dans la couleur primaire, faisons en sorte que cette couleur de remplissage bleue comme celle-ci et que la couleur secondaire soit blanche comme celle-ci. Jusqu'ici, tout va bien. Découvrons la taille de cette icône. C'est 56 par 56. Faisons cette taille car 56 56 c'est trop parce que nous ajoutons l'espace, diminuons la taille et faisons en sorte que 28 ou 28 soient pires. Et rembourrage, le rembourrage doit être petit. Voyons donc le rembourrage entre ces icônes. Passons à une icône approximative. Estimons grossièrement qu'il devrait être six. Faisons en sorte que ce soit six pour six pixels. OK, maintenant on peut changer ça en 56 comme ça. OK ? Et l' espacement est de deux, faisons en sorte qu'il n'y ait pas de rembourrage, que le rembourrage soit de six. L' espacement est comme ça six. L' espacement est comme Voyons maintenant le rayon d'angle, cliquez ici et le rayon d'angle est de neuf et passons ici, puis au rayon de bordure, non au rayon d'angle de neuf. OK. Et sur IconHo, la couleur primaire sera la couleur primaire, la couleur secondaire sera secondaire, ce sera comme ça et maintenant nous devons ajouter la taille intermédiaire Si nous vérifions la taille intermédiaire, elle est de 20, ajoutez l' écart entre les rangées dans les conteneurs. Laissez le conteneur sur la ligne de mise en page être espacé de 20. Cette section est correcte. Nous avons maintenant cette section de liens rapides. Créons. Vous pouvez simplement dupliquer ce conteneur comme ceci, cliquer avec le bouton droit de la souris et dupliquer. Maintenant, ce que nous devons ajouter, c'est sélectionner le texte du lien, puis supprimer cette image changer lien faible et changer le type de gravital d comme ceci, puis nous devons l' ajouter au menu, c'est facile Je vais également supprimer cette section et ici le menu de recherche. Prenons ce menu Word Press, disons-le comme ceci et sélectionnons le menu. Pour l'instant, sélectionnons le menu principal car le menu et la mise en page seront définis, l'alignement vertical débutera. Je pense que c'est un début. C'est le cas et il faut changer le design. Donc, avant de faire quoi que ce soit, changeons le design. Donc, la typographie sera composée de boutons et la couleur du texte sera aussi cette couleur blanche entre les tailles, créons un pointeur Non, nous n'avons pas besoin de pointeur, alors passons au contenu et à l'alignement vertical Le pointeur n'est pas une animation, ce n'est pas un indicateur su. Nous n'en avons pas besoin. Et le point d'arrêt mobile sera nul, car nous n'avons pas besoin d' ajouter le menu déroulant mobile ou le menu Hamburger à ce menu Putter Passons maintenant à Estyle dans eTyleOh, faisons en sorte que la couleur du texte soit principale et active, passons couleur du texte à principale et Algod, nous devons maintenant modifier Ici, nous avons un test et si nous ajoutions ce S ? Cela a bien fonctionné. Tout va bien. Qu'en est-il de la taille intermédiaire ? Entre les deux, la taille est 30. Faisons en sorte que la taille intermédiaire soit 30. Ici, non, pas ici sur le conteneur, le côté entre les rangées doit être 30. OK, dupliquons ce conteneur et créons le troisième menu avant que nous n'ayons un problème Ce menu n'est donc pas sur la gauche, alors faisons-le à gauche Ajoutez un padina zéro horizontal et ce sera parfait comme ça OK. Maintenant, voici ce que nous devons faire, nous devons ajouter les informations de contact, copier les informations de contact. Changez le titre comme ceci, puis il ne reste plus qu'à ajouter ces informations. Je vais supprimer ce menu et ajouter ici un titre dans ce conteneur nouvellement créé. Sur ce style, changez typographie en paragraphe et la couleur du texte sera Est-ce un paragraphe ? Oui, c'est un paragraphe. Oui, je parcourt. Copiez le téléphone. Contentez juste un téléphone comme celui-ci, puis ajoutez le PR comme celui-ci et dupliquons-le et voici l'e-mail, copiez-le et collez-le comme ça. Ensuite, nous avons l'adresse, copiez-la et dupliquez celle-ci avec l'adresse et le BR pour couper la ligne. Ensuite, nous avons des heures pour le dupliquer. Sur nous au Bo. Maintenant, il ne nous reste plus qu'à trouver la taille interne. La taille de l'entretoise est de deux. Cependant, entre les deux, les informations de contact et le texte sont 30. Le contenant principal entre les deux ou la taille doit être 30 et je vais cliquer ici pour ajouter un nouveau contenant dans ce conteneur. Supprimez le message désolé, je vais cliquer ici et supprimer la marge et les garnitures, puis je mettrai ce contenu dans ce conteneur, je sélectionnerai le contenu et je le mettrai dans ce conteneur comme ceci Je pense que cela devrait être le meilleur e-mail, bien et sélectionnez que le conteneur et ligne de disposition des lignes devraient être payants. Et là, nous avons un autre problème, nous n'avons donc pas besoin de ce rembourrage, et si nous le retirions ? Lorsque nous l'enlevons, c'est réparé, mais nous avons besoin du rembourrage, nous pouvons ajouter l'espace entre les deux comme ceci. Il y en a deux. Ouais, il y en a deux. Très bien, jusqu'ici tout va bien et maintenant nous avons le contenu, et maintenant ce que nous devons faire est de cliquer sur le pied de page principal et nous avons ici 30 espaces en haut Faisons le 30. Léchez le rembourrage et sur le dessus, faites-en 30, 140, et à gauche, 140, et à gauche, 140, comme ça Maintenant, en ce qui concerne la mise en page, nous devons ajouter l'espace uniformément, sinon l'espace entre les deux devrait être la solution. Encore une fois, si nous le vérifions, encore une fois, si nous le vérifions, nous en avons 88 comme taille intermédiaire. Ajoutons 88 comme taille intermédiaire. Ici, la taille de la colonne doit être de 88 comme ceci. Maintenant, cela ressemblera à ceci et c'est plutôt bien ici que nous avons un problème. Cette image doit être telle que nous ne pouvons que cliquer sur l' image et sur la marge, il suffit d' ajouter une marge négative en haut comme ceci. D'accord, ce sera basé. Alors maintenant, cliquez sur publier et nous avons maintenant un pied de page parfait, puis nous devons créer cette partie copyright Maintenant, si nous vérifions cela sur le design, ouvrons cette nouvelle fenêtre et faisons défiler la page vers le bas. Le pied de page ressemblera à ceci . Ici, nous devons ajouter de l' espacement. Nous pouvons simplement cliquer ici et sur Avance et sur la marge, ajouter Margin top 20 Publiez-le et voyons le design. Nous devons maintenant ajouter le crédit photo allons donc modifier la leçon suivante. 126. Section de droit d'auteur du pied de page de conception: Créons maintenant cette section sur les droits d'auteur. Commençons. abord, je vais au pied de page et créons un nouveau conteneur, et dans ce conteneur, nous devons changer la couleur La couleur est la couleur que nous avons dans la section ci-dessus. Nous pouvons donc facilement définir le style en fonction de la couleur, laisser la couleur utiliser nos couleurs globales. Et ici, découvrons la taille, la hauteur est de 64. En fait, nous déterminons la hauteur en utilisant ce texte, et pour l'instant, ajoutons cette bordure blanche. Découvrons les détails de la bordure. Le trait est d'un pixel, alors allons-y et nous pouvons facilement rechercher des ressources humaines Nous avons un diviseur, donc dis-le comme ça et un type, la couleur doit être blanche et l'écart doit être nul OK. Nous ajoutons simplement le diviseur et maintenant nous devons ajouter celui-ci copier le t, aller dans Main Butter et cliquer ici pour ajouter le titre, ajouter un titre L'a fait. Ajoutons le titre, texte ici et le dragon drop dans ce conteneur comme ceci OK. Et pour ce qui est du style, changez-le en « Je pense que la taille est taille du bouton et secondaire ». Voyons voir. Voyons voir. Oui, la taille correspond à la taille d'un bouton. Oui, ça devrait être moyen, non ? Oui, moyen 20, moyen. OK. Bien. Il ne nous reste plus qu'à ajouter de l'espacement. L'espacement est de 20 par 20, non ? Oui, c'est 20 x 20. Donc, sur le titre, passez à l'avance, le rembourrage du haut devrait être de 20 et le rembourrage du bas devrait être de 20 comme ça OK. Ensuite, nous devons ajouter le texte. Nous devons donc ajouter le courant ici. Pour l'ajouter, il suffit d'aller ici et sur la balise dynamique, nous pouvons obtenir la date actuelle. Voyons la date actuelle ici. Nous avons la date et l'heure actuelles, sélectionnez-la et le format de date sera. Voyons le format de date. Le format de date est correct, mais nous n'avons besoin que de la date. Nous n'avons pas besoin, nous avons juste besoin de l'ici. Voyons voir si nous avons décidé de n' utiliser que la version personnalisée. Sur la personnalisation, nous pouvons simplement ajouter ce Y et supprimer le reste des détails comme celui-ci. OK. Maintenant, à l'avance, nous pouvons ajouter cette partie relative aux droits d'auteur. Ajoutez uniquement le droit d'auteur à ce moment-là après sera le reste des détails comme celui-ci. OK. Nous devrions avoir un espace. OK, c'est bien. Et maintenant, glicon publie pour publier le design, et maintenant, si nous voyons dans le vrai design, il ressemblera à ceci Et là, nous avons un problème. Les icônes sont trop grandes, alors corrigeons cela, cliquez ici. Et pour ce qui est de la taille, faisons-les un peu petits, comme 45, pour paddy quatre et l'espacement istelo. Maintenant, ça fait beau et Nous concevons simplement l' ensemble de la section de la page d'accueil. Maintenant, nous devons ajouter l'animation et rendre ce design adapté aux mobiles , puis nous devons passer à la leçon suivante. 127. Ajouter un effet de mouvement: OK, ajoutons maintenant un effet de mouvement à notre site Web. Nous en sommes donc déjà à un certain effet de mouvement. Par exemple, si je clique sur ce titre et que je passe à l'avance à l' effet de mouvement, on peut voir un fondu dans une animation d'entrée normale Donc, à partir de la deuxième section, je n'ajouterai pas d' éléments individuels au lieu de cela, j'ajouterai pour l' ensemble de la section. Je clique donc sur la section et je vais avancer à l' avance sur l'effet de mouvement dans l'animation d'entrée, pour le faire disparaître, comme ça. Passons ensuite à la section suivante et à la section suivante. Ainsi, chaque fois que vous concevez un site Web, pensez toujours à l'utilisateur. L'utilisateur n'a pas besoin de trucs sophistiqués. Il doit avoir un moyen simple de trouver une solution à leur problème. Nous devons donc nous attaquer à cela au lieu d'ajouter de nombreuses animations et de compliquer notre site Web. Donc, l'ajout de ce type d' effet de mouvement simple nous permettra d' obtenir le meilleur résultat. Bon, maintenant je clique sur Publier et pour le pied de page, je n'ajouterai aucun type Imagine. OK, maintenant, si je vérifie le design, ouvrons le design dans nouvel onglet et il ressemblera à ceci. OK. Maintenant, dans la vidéo suivante, résolvons le problème de réactivité ou rendons le site Web adapté aux mobiles 128. Corriger le problème de réactivité - Partie 01: D'accord, rendons notre site Web adaptatif pour les mobiles. Avant de passer au mobile et à la tablette, examinons l'apparence de notre site Web dans la version de bureau. Pour ce faire, nous pouvons utiliser l'outil de test adaptatif du site Web. Ou vous pouvez simplement vérifier la réactivité de Google Mobile et vous verrez beaucoup de résultats, donc je vais obtenir ce Et ici, actuellement, si j'ajoute l'URL de notre site Web, elle ne nous montrera que la page en mode mainteneurs, et elle est également connue pour être adaptée aux mobiles de toute façon, nous n'avons pas à nous soucier de la page d'accueil Cependant, nous devons mettre le site Web en ligne pour vérifier la réactivité mobile Alors faisons-le. Accédez au site Web, au tableau de bord, ici et ici, cliquez sur le mode de maintenance. Et ici, choisissons le mode à désactiver et cliquons sur Enregistrer les modifications. OK, maintenant je clique sur Vérifier. En fait, je dois vider le cache. Nous n'avons toujours pas parlé du cache, mais si vous voyez ce type de cache, qu'il s'agisse d' plug-in ou de ce type de cache, je peux simplement cliquer sur Perch et me rendre ici, cliquer sur Vérifier D'accord, ici, notre site Web ressemblera à bureau de taille 1024 et il n'est pas du tout beau, mais nous pouvons vous en occuper sur la tablette. Découvrons une taille différente et cliquons sur cette taille, puis sur la troisième taille, et ici, cela ressemblera à ceci. Je vais simplement dans notre éditeur, et nous avons ici la version pour tablette, et Tablet Fortet affichera jusqu'à dix à 24 fixels, ce qui signifie que nous pouvons ignorer le 1024, mais à partir de là, nous devons tenir compte du design En fait, le 12 au 18, je pense que cela s'appliquera également à la tablette. Voyons voir, puis nous devons passer à cette taille et d'accord, nous avons ici un problème avec ces boutons. Alors, réglons le problème. Accédez au design et cliquez ici pour voir quel est le problème. Voyons d'abord le réglage du conteneur, cliquez sur le conteneur, et le conteneur sera plein. OK, il n'y a rien à réparer. Et ici, voyons l' image sur l'image que nous n'avons rien à corriger et voyons ce conteneur. OK, ici, nous en avons 90 comme rembourrage et marge de gauche, donc je vais les supprimer Ensuite, je passerai au conteneur principal et à la mise en page. Faisons en sorte qu'il y ait un espace entre les deux. Cependant, nous avons ici un problème car cet expert de confiance est sur le bon chemin pour le résoudre. Et si on ajoutait du gaz à colonne 90 60. Ajoutons ce GaAs 60, et quand nous ajouterons le Gapass 60, tout ira parfaitement bien et là, nous devons faire en sorte que le contenu justifié commence comme et quand nous ajouterons le Gapass 60, tout ira parfaitement bien et là, nous devons faire en sorte que le contenu justifié commence Maintenant, c'est corrigé, publions-le et cliquez sur OK pour vérifier le design Ici, nous disons ce problème pour le résoudre, je vais passer au design et cliquer sur ce bouton et à droite, nous avons de la place. Si nous enlevons ce côté droit, en le déplaçant, nous pourrons gagner de l'espace comme celui-ci Et ici, créons ce site Web, il y en a deux, car sur le design, nous avons le SS 20 et ici, nous avons le SS 20 entre les tailles 20. OK. Maintenant, si nous publions et vérifions le design, cela devrait être corrigé. Nous pouvons vérifier. OK, j'ai corrigé comme ça, et d'accord maintenant, passons à la section suivante. Ici, nous avons quelques problèmes d' alignement, pouvons donc pas y faire grand-chose, mais je vais revoir la page et la seule chose que nous pouvons faire est supprimer la hauteur égale et elle s'ajustera toujours en fonction du texte, mais allons-y, mais ce ne sera pas un gros problème Je vais donc cliquer sur le carrousel et ici je vais supprimer la hauteur égale, et vous verrez que quand nous le ferons, cela n'avait pas l'air très beau, mais je vais le publier Et maintenant, si je vérifie le design, il s'ajustera uniquement en fonction du texte, ce qui signifie que l'icône sera alignée avec le texte, seule la boîte de services ne sera pas alignée correctement, mais c'est bien mieux qu'avant. Passons maintenant à la section suivante et là, tout semble beau, et maintenant passons à la section suivante et là, tout est beau et en pied de page, tout a l'air bien, passons à la taille suivante sur le bureau Actuellement, nous sommes à 13 66, passons à cette taille , cette taille semble bonne, et nous avons le même problème que nous avions déjà, mais c'est bien mieux qu'avant. Passons maintenant à la taille suivante, voyons jusqu'à ce que Earl soit bon. Maintenant, cette partie sera belle et maintenant nous avons beaucoup d'espace dans la plus grande fenêtre, elle ressemblera à ceci, mais je pense que c'est bien parce que c'est sur la plus grande fenêtre, pas dans la petite fenêtre. Alors, restons comme ça. OK. Passons à la version tablette. Sur le design, cliquons sur Tablet Prod create à partir d'ici Ici, nous avons beaucoup de choses à corriger. Commençons un par un. Tout d'abord, nous devons corriger l'en-tête. Cliquez sur l'en-tête pour le modifier et je pense que nous avons un problème avec le paramétrage du site. Si je passe au réglage et à la mise en page, nous ajoutons le rembourrage par défaut. En fait, je peux apporter des modifications au concept et dans le remplissage du contenu, nous ajoutons le rembourrage, mais nous ne pouvons pas le changer à partir d'ici. Revenons donc en arrière et revoyons l' en-tête pour modifier l'en-tête. Ici, lattez le conteneur et passez à l'avance, retirez le rembourrage comme ceci modifications au concept et dans le remplissage du contenu, nous ajoutons le rembourrage, mais nous ne pouvons pas le changer à partir d'ici. Revenons donc en arrière et revoyons l' en-tête pour modifier l'en-tête. Ici, Revenons donc en arrière et revoyons l' en-tête pour modifier l'en-tête lattez le conteneur et passez à l'avance, retirez le retirez Lorsque nous retirerons le rembourrage, cela ressemblera à ceci Ajoutons ensuite le patène droit comme 30, le patène 20 et le patène gauche comme 20. OK, je sélectionne ce deuxième conteneur et prenons la direction verticale et justifions le contenu. À partir de là, notre logo est parfait. Si je passe à l'avance, nous avons une marge maximale de 20. Non, c'est 20, d'accord. Lorsque nous modifierons les options ou les valeurs à partir d'ici, cela ne s'applique qu'à tablette. Ne vous inquiétez pas, rien ne se Donc, ici, nous avons la marge supérieure, passe 24. Mettons-le à zéro. En fait, nous en avons deux. Ici, nous avons une marge supérieure de 24 et une marge inférieure de sept Je vais donc cliquer ici et ajouter à nouveau la marge négative. OK, je vais garder ce set dedans. Ici, nous avons ajouté à la passe 30, changeons-le en 220 et à droite, il suffit de cliquer ici sur une chaîne et la droite sera zéro, bas sera également zéro, la gauche sera zéro. Maintenant que c'est centré et que nous devons penser au menu dans le menu, je vais changer ce point de cuisson en mobile et lorsque nous changerons le point d'arrêt en mobile, nous pouvons voir le menu complet, puis nous avons cette zone d'image. La boîte à images a un caractère personnalisé avec, je vais la remplir comme ça. OK, jusqu'ici tout va bien. Faisons maintenant en sorte que cette entrée soit double. taille de l'Ibuttwin devrait donc être affectée au conteneur et à la mise en page Faisons de Pros 20, 22 semaines, 15. Oui, 15, ça ira. Ainsi, lorsque nous vérifierons cette icône Claus 24, elle sera plus grande Et grâce à cette icône, ce menu sera plus grand. Ainsi, lorsque le menu sera plus grand, cette image de fond ne s'affichera pas correctement, je vais donc masquer cette icône Claus 247 sur la tablette Pour ce faire, je sélectionne la case image et je passe à l'étape Avance sur Advance. Cliquez sur RSF Sis, puis je cliquerai sur Hight sur tablette OK. Maintenant, je clique sur publier pour voir le véritable aperçu, mais nous devons procéder à d'autres ajustements. Mais pour l'instant, voyons l'aperçu de la tablette. Vérifiez. L'aperçu de la tablette ressemblera à ceci, mais nous en avons encore plus à modifier. Donc, dans un premier temps, je clique ici et ajoutons 20 en bas du bloc-notes comme ceci, puis je clique sur publier et je clique ici, marge supérieure sera de 20. Est-ce que ça va aller ? Oui, c'est bon. Maintenant, je clique sur publier, vérifions-le à nouveau. Maintenant c'est beaucoup mieux et j'aime bien ce design. Si cela ne nous plaît pas du tout, nous pouvons simplement masquer toute cette section sur tablette et créer une nouvelle section. Mais pour l'instant, c'est bien mieux et passons maintenant à la section des héros et au reste du design. 129. Corriger le problème de réactivité - Partie 02: D'accord, nous devons maintenant créer ce design de page d'accueil adapté à la tablette. Je clique sur Modifier la page et cela me redirigera vers la page d'accueil. Ici, nous avons la section héros J'écris donc conteneur et je clique sur Modifier le conteneur. Et voilà, ce que nous devons faire, c'est abord aller sur Advance on Advance, je vais changer le bloc-notes en 60, le rembourrage à gauche sera de 60 à 60, c'est plus grand Faisons en sorte qu'il soit 30 comme ça et le bas sera 30 et en haut, nous devons le faire en sorte qu'il soit supérieur à 150. Qu'en est-il de 160 ? 160 est trop court et ça devrait être comme ça. Il est 230. Très bien, ça a l'air bien et la taille de police est correcte, je me demande quelle est la taille de police ? Sa taille de police est de 60, peut-être que nous pouvons la réduire, mais pour le moment, je pense que ça a l'air bien. Cliquez sur publier et si nous voulons réduire cette taille de police, nous pouvons simplement cliquer sur le paramètre latéral. Nous avons ici des polices globales cliquez sur cette icône d'édition et voici la version Ptrit pour tablette, donc je peux en faire 50 50, ça ira. Passons à 52 et subdin, faisons en sorte qu'il soit 20, 21. D'accord, le paragraphe sera 18 et le bouton sera 21 OK, maintenant cliquez sur Const changes, nous changeons la police globale pour qu'elle s'applique au reste du design ou au design comme celui-ci Encore une fois, nous sommes ici, beaux et sur le bouton, si nous le voulons, nous pouvons réduire un peu la taille du bouton, par exemple 20, 30, 20, 30, 30, comme ça. Nous avons maintenant la section suivante et l'en-tête est ici ce que nous devons faire. abord, c'est un gros gâchis. Cliquez d' abord sur le conteneur et, Cliquez d' abord sur le conteneur et à l'avance, depuis le rembourrage, nous ajoutons 30 points de rembourrage Je pense que nous l'ajoutons à 30. Voyons voir, le rembourrage droit et gauche devrait être de 30. Faisons en sorte que 30 soit 30, et qu'il en reste 30. Maintenant, nous devons changer cette position, alors cliquez ici et au préalable , nous avons décalé. Mettons-le ici et cela fonctionnera comme ça. Nous devons réparer cette boîte d'image, la boîte d'image et, à l'avance, faire le décalage comme ça. Et là, nous avons un problème. Dans la version tablette, nous n'avons pas de place pour ces deux sections Je peux donc cliquer sur le conteneur et sur la mise en page, changer le sens en ligne et cela montera vers le haut et vers le bas comme ça. Ensuite, au rang suivant, j'ajouterai le Gap pass 20 comme ceci. Ensuite, cliquez ici, tout semble bien, et maintenant je dois le changer à nouveau. Modifions-le en offset, ce sera comme ça. Ensuite, voici bien et les boutons apparaissent bien. Voici ce que nous devons faire, cliquer dessus et avancer, retirer le rembourrage, faire en sorte que le rembourrage droit soit 30, le paddinus gauche 30 OK. Ici, ces icônes ont l'air bien. Si nous voulons plus d' espace sur Carsel, nous pouvons le mettre de côté en tant que tel Le design ressemblera à ceci et c'est bien meilleur qu'avant, et les autres espacements sont acceptables, mais si nous le voulons, nous pouvons modifier cette ligne de 60 à 30 ou 2020 avoir à nous soucier de la colonne OK, jusqu'ici tout va bien. Ensuite, nous avons nos fournisseurs dédiés. Ici, nous avons un espace énorme pour supprimer l'espace, je peux simplement supprimer la marge à zéro. Maintenant, ça a l'air bien , cliquez ici, puis retirez le rembourrage ici, il y en aura 30, 30 . C'est plutôt bien, nous pouvons ajouter deux fournisseurs à la fois et ça a l'air bien, donc je vais le garder comme ça Jusqu'ici, tout va bien alors ce que nous avons à faire ici. Encore une fois, nous avons un gros gâchis. Cliquez ici, puis sur Advance, supprimez les rembourrages et faites en sorte que le motif droit soit 30, rembourrage gauche 30, comme nous l'avons fait auparavant, nous pouvons passer à la mise en page et changer de direction en colonne et tout ira bien. Si nous le voulons, nous pouvons créer cette image vers le haut et le texte C'est ce que nous allons faire. Pour ce faire, on peut facilement passer à l'avance. Nous devons noter à l'avance que vous devez cliquer sur le conteneur, donc cliquez sur le conteneur et à l'avance, nous pouvons modifier la commande. Passons à N et ça se passera comme ça. Mais ça ne marche pas là-bas, alors disons-le. Maintenant que nous avons un problème ici, celui-ci fonctionnera bien, mais celui du bas ne fonctionne pas. Je clique sur ce conteneur et en haut de la marge, il se trouve en haut de la marge 70 et ici, je clique sur celui-ci et sur l'avance, je modifie le décalage comme ça, jusqu'ici tout va bien. C'est bon. Maintenant, nous n' avons rien à réparer ici. Revenons en arrière et là, nous avons un gros gâchis. Cliquez ici et, si vous le modifiez à l'avance les deux marges supérieures devraient être un à 20 et le rembourrage gauche devrait être de 30 La droite est 30 et la gauche 30. Ensuite, nous avons ce carrousel en boucle et ici nous pouvons simplement changer de côté sur ce jeu. Maintenant, ça a l'air bien. Oui, c'est très simple et je clique ici et nous en avons un rythme de 30 Faisons en sorte que ça se passe comme ça. Jusqu'ici, tout va bien, il faut changer 62 20. Si nous le voulons, nous pouvons créer ce centre, mais nous n'avons pas besoin de le faire maintenant ou nous pouvons simplement l'aligner en tant qu'étirement. Nous pouvons rendre l'alignement automatique sous forme d'étirement. Et maintenant, nous devons modifier le pied de page. Je trouve que la page d'accueil semble bonne. Passons donc au pied de page et encore une fois, c'est un petit gâchis. Avant de le faire, je clique sur publier pour publier les modifications Et si on passe à la version desktop, rien ne changera car on change tout en version mobile ou en version tablette. OK. Maintenant, descendez vers le bas et ici, cliquez sur Pied de page, puis sur Enregistrer et laissez ici ce que nous avons d'abord, je clique ici sur Advance, le rembourrage droit est de 30, et le rembourrage de gauche est Maintenant, ce que nous devons faire, c'est que l'écart entre les colonnes devrait être moindre. Faisons en sorte que ce soit 30. OK. Et pour une meilleure utilisation, nous pouvons créer ce centre de manière à ce qu'il ne s' approche pas trop du texte de gauche. Nous avons ici un gros problème, passez au style et changez la taille comme ça. L'espacement doit être de six, prenons un six et faites un rembourrage comme celui-ci. Ça a l'air bien. Ici , tout ira bien. Nous n'avons pas grand-chose à modifier, alors je clique sur par live. Et là, nous avons un problème en haut, je dois ajouter un rembourrage Cela fait partie de 20 Recon Publish. Maintenant, vérifions-le sur le design. Maintenant, ça va ressembler à ça. Ici, nous avons un problème et le reste du design fonctionnera très bien, mais nous avons un problème avec cela. Les boîtes, en fait, on peut les retirer. Si nous les supprimons, nous n'aurons pas ce type de problème sur la tablette et le mobile. meilleur moyen est de les masquer sur le mobile et la tablette et de les conserver uniquement sur la version de bureau. Mais si vous le souhaitez, vous pouvez simplement les ajuster en fonction du site Web A, les ajuster en fonction du site Web A, mais c'est un gros problème Vous pouvez donc parler à votre client et le supprimer. Dans ce cas, je vais tous les supprimer. Donc pas de mal à se cacher. Je clique sur Modifier la page pour modifier la page d'accueil. Et voilà, voyons voir, ici, cliquez sur tout ce conteneur et sur Advance, nous pouvons accéder à Responsive, masquer le port mobile et le masquer sur tablette Désormais, il ne sera plus visible sur le mobile et la tablette et nous pouvons faire de même sur Responsive ID, affiché uniquement sur le bureau. Encore une fois, cliquez ici sur Advance hide, ici, la réactivité peut être publiée et semble bonne, puis si nous la testons sur le site web, nous n' aurons plus ce problème Maintenant, nous n'avons que les objets que nous voulons voir. Nous pourrons peut-être résoudre ce problème si nous ajoutons le carausel à boucles, mais je crée un modèle différent et j'ajoute ces détails en utilisant un temple de découpe avancé, mais je ne sais pas si cela fonctionnera ou non, restons comme ça 130. Corriger le problème de réactivité - Partie 03: D'accord, nous devons maintenant prendre la réactivité mobile ou rendre notre site Web adapté aux mobiles Ainsi, selon Google ou Jamini environ 55 à 65 % des visiteurs consultent des sites Web à l'aide d'un téléphone portable donc très important de rendre notre site Web adapté aux mobiles. Commençons donc. Tout d'abord, comme nous l'avons fait auparavant, nous pouvons le faire à partir de l'en-tête. Accédez à l'en-tête et à l'en-tête, actuellement cela ressemble à ceci. abord, je vais cliquer sur le conteneur et dans le conteneur, faisons le rembourrage 15 x 15, gauche et droite 15 x 15 et nous avons ici un problème Nous avons besoin que ce menu de hamburgers soit du bon côté. Réparons-le. Je clique sur le conteneur et sur la mise en page, prenons la direction OK, ajoutons de la largeur à cela. Je clique sur cet élément du menu Hamburger et ici, mets le bouton d'alignement à gauche pour que la mise en page soit rétablie, qu'en est-il de la verticale là-bas ? Non, cela doit être horizontal. Et un style, voyons un bouton à bascule sur un bouton à bascule, définissons une taille Réglons cette taille sur 35 de largeur de bordure, nous n'avons pas besoin de bordure. Et changeons de couleur pour cette couleur primaire. La couleur d'arrière-plan sera accentuée ou faisons de la couleur d'arrière-plan couleur principale et la couleur sera le blanc comme ceci. Alors nous devons le mettre ici. Essayons de le faire à l'avance, changeons avec deux en ligne, pas par défaut, pas de pleine largeur, non. Faisons en sorte que cela soit personnalisé et ajoutons-le personnalisé. Lorsque nous ajouterons le custom with, il sera parfaitement aligné. Ajoutons de la personnalisation avec un 50. Voyons ce qui va se passer. Quand on fait ça, ça ressemble à ça. Pour y remédier, je vais aller ici. Faisons-le sur toute la largeur. Quand on le met sur toute la largeur, il devient comme ça et ça a l'air bien. OK, ici, ici, c'est trop près, pour réparer le contenant, passons au rembourrage à droite et à gauche Le haut sera 20, il est normal d'en avoir 20 en haut, la droite six et la gauche également six. Ensuite, sur la mise en page, l'écart entre les colonnes sera de 15 et l'écart entre les colonnes sera également de six Maintenant, cliquez ici sur Advance, modifions-le avec ceci. Ici, nous avons toujours le problème. L'icône est trop grande , donc sur le bouton Tittal, la taille doit être petite La taille sera à peu près la suivante, et maintenant nous voulons que cette ligne soit centrée pour cela, nous pouvons supprimer les 20 derniers et maintenant elle est plutôt bonne Maintenant, nous pouvons modifier la largeur de cette image ou la largeur de ce logo. Créons un logo avec 80, cela fonctionnera, et maintenant nous pouvons supprimer la taille intermédiaire et d'autres éléments pour gagner de la place. Il devrait y en avoir six. Et sur la ligne, la colonne doit être nulle ou six t doit être zéro. Et maintenant, ce bouton a plus de largeur que le souffle, alors augmentons-le. OK. Maintenant, dans ce style, la taille du bouton de bascule doit être augmentée. Comme ça. Maintenant c'est plutôt bon, et maintenant nous devons nous occuper de ce menu déroulant. D'accord, pour ce faire, nous devons passer au menu déroulant et au menu déroulant. Faisons un rembourrage vertical quant à, et la distance sera nulle La typographie sera un bouton. La couleur d'arrière-plan sera cette couleur, la couleur du texte sera le texte et la couleur du texte est celle-ci lorsqu'elle est active, couleur de test est la suivante. Sur Ha, nous n'avons pas besoin de couleur de fond. Gardons la couleur de fond blanche et si vous activez cette option, elle sera la même. Maintenant, ça a l'air bien. Bon, maintenant notre menu ressemblera à ceci, et c'est bon, je vais le publier et voyons le dans le responsive design. Voici le mobile et vérifierons le point d'arrêt du mobile. En fait, nous devons le faire pivoter comme ça , monter et cliquer sur vérifier. Ici, il faut cacher celui-ci. Donc pour le masquer, je vais cliquer dessus et sur Responsive, il devrait être masqué sur le port mobile et cliquer sur Publier. Maintenant, je vérifie et tout fonctionnera. En fait, nous devons ajouter du rembourrage en bas. Ajoutons-le ici, le conteneur, motif du bas devrait être de 20 comme celui-ci, puis nous publions et vérifions-le sur le mobile. Ça ressemble à ça. Ajoutons cette liste de menus à partir d'ici pour ce faire, nous pouvons facilement cliquer sur ici et sur un style dans le menu déroulant, la distance sera la suivante puis cliquer sur publier pour voir le design. C'est plutôt bien. Peut-être allons-y un point et vérifions-le. Maintenant, ça a l'air bien. Maintenant, il ne nous reste plus qu'à vérifier cela sur l'autre mobile. Je vais ressembler à ça sur l'iPhone 8 d'Apple. Ici, qu'en est-il du Samsung Galaxy ? Cela ressemblera à ça. Et voici l'iPhone X d'Apple, et il est plutôt bon. Nous devons donc maintenant changer l'en-tête car le texte de l'en-tête n'est pas du tout beau. Cliquons donc ici pour modifier la page d'accueil. OK, sur la page d'accueil, je vais d'abord cliquer ici, puis sur Ti ou Graffy ce titre Typographie, cliquons ici et passons aux téléphones du monde entier. Sur les téléphones internationaux, voyons que l'en-tête, le bouton principal ou la taille du texte seront de 44, peut-être que 40 fonctionneront et que le sous-din sera de 18. Qu'en est-il de 20. 20, ça ira. Le paragraphe sera 18 et les boutons seront 18. Cliquez maintenant sur Enregistrer les modifications puis revenons à l'éditeur pour passer au titre Donc, dans le titre, nous avons beaucoup de problèmes, nous devons donc sélectionner la typographie Je ne sais pas pourquoi ça n'a pas l'air bien, mais voyons voir. OK, alors nous devons passer au conteneur et actuellement nous avons 30 à droite et à gauche, donc faisons en sorte que 15, le bas devrait également être 15 et cette police ne semble pas bonne, 40, réduisons la police avec 35, ce sera 37 38. 36 sera la meilleure taille. Passons à 36 et la taille du texte du bouton devrait également être réduite. Apportons ces modifications. Tout d'abord, je vais publier le réglage actuel et ici, cliquer sur le réglage latéral, puis passer à Goble prawns et en-tête sur en-tête Cela devrait être 36 et le sous-ding réduisons cela à 18 et le paragraphe est 18. Non, non, f den doit être 20 si le paragraphe est 18, le bouton est 18. La taille du bouton est correcte. La taille du bouton est correcte, cliquez sur maintenant. Enregistrez Angers et cliquez sur Retour à l'éditeur pour accéder au conteneur. OK. Maintenant, nous devons nous occuper de ce bouton car il n'a pas l'air bien, alors passons à l'étape suivante. Passons au style et au style. Nous devrions réduire le rembourrage, donc le rembourrage supérieur sera de 12, 50 Que diriez-vous de 15 h 15 ou 50. Euh, il n'y aura pas 20 en haut , 15 à droite, 20 en bas. OK, ce sera le meilleur ami. Donc, si nous alignons le centre du texte, cela paraîtra beaucoup plus clair, mais lorsque nous le placerons au centre d' alignement, c'est difficile à lire. Disons-les donc comme ça. Oui, c'est bien ici. Je vais donc le publier. Passons maintenant au design adaptatif et voyons le design du téléphone et c'est un Apple iPhone X. D'accord, c'est pas mal. Faites-le pivoter. OK, ça a l'air bien. Maintenant, nous devons continuer. Donc voilà, cette image est correcte. Et voilà, allons-y. Et d'accord, nous cachons cette partie 100 % soignée sur mobile, donc nous n'avons pas à nous inquiéter à ce sujet. Passons donc au conteneur, et tournons à droite à 15 et à gauche à 15. OK, nous avons ici un problème avec le bouton, alors créons ces deux boutons comme celui-ci et l'écart entre les lignes sera de 15. OK. Et voici ce bouton qui se trouve en haut. La raison en est que nous avons une marge supérieure de 20, donc je vais la mettre à zéro. Ça a l'air bien maintenant. OK, ça a l'air d'aller bien. Alors allons-y ici et là, en avance à droite, 15, à gauche 15. Facile. Alors voilà, ces pièces sont en train de regarder. OK. Les pièces ont l'air bon état et j'espère que ça marche, ça marche. Nous pouvons réduire cet écart. Passons donc au style dans la pagination. Faisons en sorte que cet écart soit égal à 15. Oui, 15 marcheront. Ensuite, nous avons notre section réservée aux fournisseurs, et nous devons ajouter une marge supérieure. Donc 12120 ira bien, peut-être que nous pouvons en faire 90, mais nous en ajoutons déjà 120 à ces éléments. Donc, restons-en à un à 20. OK, nous n'avons rien à modifier. En fait, nous avons ce lien qui ne semble pas bon. Donc oui, modifions-le avant de le modifier. Avons-nous changé le gras de droite et de gauche ? Non, faisons en sorte que cela soit 15 par 15. Maintenant, publions ces modifications passons à la modification du modèle, puis sélectionnons le bouton. Il ne se charge pas pour le moment, mais c'est bon sur ce bouton, désolé, faisons en sorte que la marge soit égale à zéro. En fait, ici, le bas est égal à dix. Restons-le à dix et nous devons changer le haut à zéro, bas sera inférieur à dix. Je pense que ça ira. Maintenant, cliquez sur Publier. En fait, nous pouvons cliquer sur Enregistrer et revenir. Et voyons le design. OK, je vais prendre un peu de temps. OK, j'ai chargé. Et ici, c'est trop bas. Il se peut que nous devions ajouter quelque chose comme 50. Cliquons donc sur Modifier le conteneur et là, en fait, il est toujours en cours de chargement. Attendons donc de le charger. OK, cliquons à nouveau sur le modèle d' édition et passons au mobile. Ensuite, sélectionnez le bouton et à l'avance, faisons en sorte que cette passe supérieure moins -15 fonctionne Maintenant, publiez-le et c'est bon. Passons maintenant à la page. Encore une fois, passons à l' affichage mobile et voilà, c'est bon. Bien, passons à la section suivante et cette image semble correcte. Et voici ce que nous devons faire. OK, cliquons sur ce conteneur et en fait. Faisons ces icônes au milieu. Pour ce faire, cliquez sur le conteneur. Aligner les éléments est déjà au milieu, alors cliquons sur cette image pour la placer au centre. Je ne suis toujours pas allée au centre. Cependant, faisons ce centre comme celui-ci, nous pouvons facilement le placer au centre, mais nous devons faire en sorte que ce bouton aligne également le centre, mais pas un bouton. C'est une image, changeons-la en colonne et elle sera au centre, puis nous devrons ajouter un peu d' espacement ici, peut-être une ligne de dix OK. Maintenant, ça a l'air bien et faisons de même ici. Cliquez sur le conteneur et mettez-le au centre comme ceci, cliquez ici, mettez-le au centre et cliquez sur l'icône ou le lien, alors le lien doit être -15 ou 15 Et fais en sorte qu'il soit aligné au centre comme ceci. Nous pouvons également faire de cet article un centre, oui, oui. Là encore, nous devons faire en sorte que cette colonne de direction soit dix ici, placer au centre qui prend d au centre et ce bouton doit être à -15 Ensuite, faites en sorte qu'il soit aligné au centre ici, nous devons faire du bien. Maintenant, nous venons de créer cette section, avons-nous réellement supprimé la gauche et la droite ? Non, ici nous devons ajouter 15 de la gauche et de la droite. C'est bon. Maintenant, nous devons régler ce problème. abord, je vais cliquer sur le conteneur et à l'avance, faisons 15 à droite et 15 à gauche. Ensuite, nous avons le carrousel. Nous avons donc ici ce carrousel en boucle. Ce carrousel en boucle, nous devons faire en sorte que le côté affiché ne fasse qu' Et en compensation avec Let's make it zero. Quand on le met à zéro, ça a tout simplement l'air bien. Si nous le voulons, nous pouvons simplement en ajouter dix. Ajoutons dix car lorsque nous ajoutons dix, les deux côtés deviennent égaux. OK, nous n'avons rien à modifier ici. OK, maintenant je vais cliquer sur Publier en C, et maintenant ce que nous devons faire est de modifier le pied de page Cela semble vraiment mauvais, mais nous pouvons facilement améliorer les choses. Cliquez donc sur CFoter et ici le premier est OK et nous avons un problème avec Faisons en sorte que ce soit 15 à droite et à gauche. Ici, le haut sera 20, la gauche 15 et la droite 15 également. Et voici le conteneur, ce sera 2020, 20, ça ira. Et ici, dans le menu, cliquez sur aligner les éléments et cela sera aligné comme ceci. Maintenant, commençons. C'est pas bon. Voilà, ça a l'air d'aller bien. S'étirer. Lorsque nous l'aurons étirée, elle aura l'air bien. Alors là, nous devons vraiment, nous ne devons rien faire ici, simplement nous aligner correctement. En ce qui concerne la section des droits d'auteur, nous avons beaucoup à faire et ici, le droit sera de 15. En fait, il n'y a rien à faire non plus dans la section des droits d'auteur. Et dans ce style, tout semble aller bien. C'est bon. Cliquez maintenant sur Publier et voyons le design sur iPhone X. Apple iPhone X, cliquez sur Vérifier. OK, voici notre section héros, et voici notre menu Hamburger, la section héros, la section A. Nous pouvons placer ce bouton vers la gauche. Donc, si nous arrivons à gauche, ce sera beaucoup mieux. Cliquez donc ici pour le modifier actuellement sur le pied de page principal, nous sommes maintenant sur la page d'accueil Et ici, créons un élément de ligne à gauche et faisons de même. Non, non, il faut tourner à gauche. Nous pouvons le faire. Voyons voir, voyons voir, positionnons-nous à gauche. OK. C'est bon. Maintenant, c'est aussi à gauche et en ce qui concerne le style, nous pouvons supprimer la gauche comme o. Et ici, nous pouvons ajouter le haut comme 2010, bas comme 20. Mais pas besoin d'ajouter du bas. OK, maintenant cliquez sur publier, et encore une fois, vérifions-le dans le vrai design. OK. Voici maintenant notre section à propos, et voici notre section catégorie, et notre fournisseur reçoit dix contacts, avis et pieds de page En pied de page, nous pouvons ajouter de l'espace à cette balise HR. De plus, si nous vérifions cela, la première partie est sur le côté gauche, mais à partir de là, elle passe au milieu, mais ça va. Si nous le voulons, nous pouvons simplement les faire partir, mais je vais continuer comme ça et faisons en sorte que ce HR ou le diviseur, top pass, fonctionne peut-être Cliquez ici pour modifier le pied de page et ce qui s'est passé. Dans ce conteneur, allons-y pour avancer sur Advance Bottom, il y en aura 220. S'il s'est passé quelque chose là-bas. Très bien, cliquez sur Publier ici. Maintenant, nous pouvons aussi le vérifier. OK, ça a l'air bien. Sympa. Nous vous verrons dans la prochaine leçon, qui portera sur la création de la page suivante. 131. Concevoir la page - Partie 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. 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. C'est ce que nous allons faire. 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 juste 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 ici l'image et elle vient d'être téléchargée. Ici, ajoutons simplement le texte ALT ou 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. Allons-y. 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 En ce qui concerne 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. Cliquons 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. Essayons donc. 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, il s'agit d'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à. 132. Concevoir 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 D'accord. Le dernier. Copions le format à partir d'ici et collons-le. Maintenant, testez-le comme ça, copiez-le, collez-le comme ça. D'accord. 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, ce qui signifie que nous avons créé avec succès la section Designer About. Nous devons maintenant concevoir la section du bloc. 133. Page de blog de conception - Partie 01: Bonjour à tous. Il est maintenant temps de concevoir cette page de blog sur Elementor Passons donc au tableau de bord Elementor, et maintenant je suis dans la section Earl Pages Et si on passe à Post et Earl Post, on a un post. Commençons donc à concevoir. Et encore une fois, je vais sur Earl Pages, et à partir de là, nous avons la page du blog. Donc pour l'instant, supprimons cette page de blog et partons de zéro, cliquez sur la corbeille et expliquons pourquoi le site Web se charge très lentement. C'est peut-être à cause de ma connexion Internet. Quoi qu'il en soit, maintenant je vais dans la corbeille et je clique sur Supprimer définitivement. Maintenant, je clique sur cette nouvelle page d'annonce. Ensuite, j'ajouterai un titre tel que le blob de la clinique familiale JB. Ensuite, je clique sur publier, publie simplement cette page, puis je déplace à nouveau cette partie et je passe au tableau de bord et dans les paramètres, je passe en rouge. Lectures ici, nous avons un endroit pour configurer l'affichage de notre page d'accueil. Ici, je l'ai définie comme une page statique et la page d'accueil est JB Family Clinic, qui est la page d'accueil et pour la page de publication, je vais sélectionner ce bouton de nettoyage de la famille JB Maintenant, ici, nous pouvons tout au plus configurer l'affichage des pages pour chiens, mais je pense que nous pouvons ajuster ces éléments après avoir conçu la page, mais configurons-le à partir d'ici de toute façon. Et ici, nous devons afficher six pages par ou six articles par page. Alors, passez à six et cliquez sur Enregistrer les modifications. Ensuite, nous utilisons Element of Pro, nous avons donc des fonctionnalités professionnelles pour configurer cette page de blog. Donc, pour y accéder, allez dans les modèles et cliquez sur Enregistrer les modèles. Ce que nous allons faire, c'est créer un nouveau modèle pour nos pages. Dans Wordpress Earl, les données, blog, les commentaires et autres éléments sont enregistrés sous forme d'archives. Donc, ici, je vais voir cette archive et ici je vais ajouter un nom en tant que modèle d' archive Faisons en sorte que ça se passe comme ça. Le modèle est incorrect. Bien, cliquez maintenant sur Créer un modèle. Pour cette bibliothèque, je vais simplement la supprimer ou si je vais dans mes modèles, nous trouverons ici notre section héros pour les sous-pages. Insérons-le et cliquons sur App OK, nous avons ici la section des héros que nous avons déjà créée, et ici, je clique sur ce titre et sur le titre, je vais juste sélectionner le titre de l'archive comme celui-ci et la petite description, je vais sélectionner la description du giv, et nous devrons peut-être ajouter ces informations pour Publions celui-ci et cliquons sur Atcdition et incluons Earl Si nous disons que Earl donne, nous pouvons voir ou nous pouvons voir toutes les informations relatives aux auteurs, à la date, aux résultats de recherche, aux archives des articles et aux catégories et à d'autres éléments qui se chargeront sur ce modèle. Maintenant, je clique sur Enregistrer et fermer et c'est publié, et maintenant nous avons déjà configuré la page des articles de blog. Passons donc aux pages et visionnons la page du billet de blog, et nous verrons l'aperçu actuel lorsque nous consulterons la page de publication. Donc actuellement, il ne montre rien. Alors réglons ça. 134. Page de blog de conception - Partie 02: J'essaie juste différentes choses pour résoudre le problème, mais je n'ai toujours pas de chance. Essayons donc une autre méthode. Pour l'instant, créons l' archipage et lorsque nous l' aurons, elle sera censée charger l'auteur ou la catégorie ou d'autres éléments si quelqu'un le demande Ici, nous ajoutons le titre de l'archive, et maintenant nous devons ajouter cette partie de l'arche Je clique ici, je clique sur Cplexbx et je clique sur la colonne de direction, et ici je vais appuyer sur l'élément Ajouter et faire glisser cette section chi post, et ici nous devons ajouter tirets gauche et droit 41 40 et la gauche sera également 140, et le haut devrait être 60 Découvrons l' espace supérieur à partir d'ici. Il est 12 ans. Oui, ce n'est pas 60, c'est 1220. OK, maintenant ajustons ce design. Et actuellement, je vais conserver le même réglage pour le moment, puis passer au style E et à partir de là, voyons que l' écart entre les colonnes est de 220 à 20 et que l'écart brut sera également de 220 et l'alignement, alignons à gauche sur l' image, le rayon de bordure, voyons le rayon de bordure, le rayon de bordure est mixte, mais nous devons le vérifier, c'est 20. Ajoutons le rayon du corps comme 20. En fait, nous n'avons besoin que des 20 premiers, pas de gauche, haut et de droite comme 20 et l'espacement est correct, puis passons au contenu et au contenu, voyons que la couleur du texte est la couleur par défaut Utilisons-en la couleur du texte, et la typographie disparaîtra. N'est-ce pas ? Voyons le design de Figma. Oui, cela devrait être un sous-PEDInF pour une raison quelconque de ce changement de fichier Figma Je ne sais pas ce qui s'est passé, mais ça devrait être remplacé, encore une fois, pour la date, il faut changer la couleur primaire La typographie sera un paragraphe, taille et son espacement des paragraphes En fait, cette date devrait être supérieure, mais gardons-la ici pour le moment et l'espacement est de Cet espacement sera bien, pas 12. Maintenant que la couleur sera couleur du texte, la typographie sera paragraphe et l'espacement le sera également. Je pense que si nous n'avons pas le lien Freed More, mais c'est bon et la pagination, nous devons ajuster cette dénotation de page avant d'ajuster la nation de la page, ajustons ce paramètre de contenu et pour les méta, nous n'avons pas besoin de commentaires, suffit de supprimer la commande et la date, puis nous devons vérifier la longueur de l'exer Quelle est la longueur ? Copions ce texte et allons sur wordcounter.net. Faisons face au chèque et il y a 150 caractères et 22 Faisons en sorte que ce soit 22, rien, faisons en sorte que 150 ici, la méta devrait être morte. Non, pas besoin de séparateur et nous n'avons pas besoin d' afficher le bouton Lire la suite pour l'ination de la page, fixons la limite de pages à cinq, ce qui est affiché. Les réglages sont bons et nous devons vraiment le faire. Ajoutons, appliquons un mélange personnalisé et voyons voir. Ensuite, nous devons passer au style et, à l'avance, ajouter une bordure. Découvrons ici que nous avons la frontière. Je pense qu'il faut continuer comme ça. Lors de la pagination, nous pouvons changer la couleur en bleu, et voyons cette pagination Et ici, nous avons une taille entière égale à six, mais en ce qui concerne l'espacement, vérifions-le L'espacement sera de 30 et ici, nous n'avons pas beaucoup d'options de personnalisation, alors restons comme ça et cliquez sur publier. C'est mieux pour les pages d'archives, mais nous devons créer une page de publication personnalisée pour améliorer notre site Web Faisons-le dans la prochaine leçon. 135. Page de blog de conception - Partie 03: OK, nous devons maintenant essayer une autre méthode pour concevoir cette page de blocage. Commençons. Tout d'abord, je vais sur notre tableau de bord Wordpress. Ensuite, je vais m' installer et lire. Lors des lectures, je désélectionne la page de publication et elle ressemblera à ceci, puis je clique sur Enregistrer les modifications Maintenant, je passe aux pages et aux pages Earl, et voici la page de blocage. Je clique donc sur Modifier, puis sur Modifier avec l' élément en bon état. Maintenant, je peux ajouter l' en-tête sur le modèle M, et ici nous avons une section héros, sous-page, cliquez sur Insérer, cliquez sur Appliquer OK. Ajoutons maintenant ces informations. Copiez d'abord le titre, collez-le ici, copiez-le. Vous devez le coller ici et ajouter BR, BR ici. Le prochain BR sera là. Voyons voir. Voyons voir. OK, maintenant la partie en-tête est terminée. Maintenant, je vais cliquer sur Nouveau conteneur et ajouter le conteneur de la colonne de direction. Et ici, la marge et le rembourrage ajoutés à gauche et à droite équivalent à 140, comme ça Ensuite, nous devons également ajouter une marge supérieure sous la forme d'un, deux. Maintenant, nous devons ajouter de la force, cliquer sur Ajouter un élément et rechercher une force de recherche. Nous avons ici un élément de force. Je vais juste le lâcher comme ça. OK, maintenant notre force est apparue, et maintenant ce que nous devons faire, c'est apporter les modifications. Si nous examinons ce design, il ressemblera à ceci, alors changeons de skin et assistons à la première Je le remplace donc par une carte et l'apparence de la carte correspondra le mieux à notre design. Et qu'est-ce que le contenu intégral ? Non, le contenu complet n'est pas un avantage. Les cartes sont le moyen de le montrer. Ensuite, ce que nous devons montrer, c'est le titre et l'extrait. La taille de l'extrait sera de 100. Je pense que c'est 150 comme ça, oui, 150 caractères. OK. Maintenant, nous n'avons pas besoin d' afficher les commentaires, nous n'avons qu'à afficher la date, et nous n'avons pas besoin de lire la suite . Nous n'avons pas besoin de blaireaux et pas besoin d'Avada Now Le seul problème est que cette fois , nous ne pouvons pas le faire Donc, demande, la source sera forcée et nous n'avons pas besoin d' ajouter d'inclusion par condition, et ordonnons-le par date et par format DESC Ensuite, dans la pagination, définissez l'ination de la page sous forme de chiffres plus le précédent et le suivant Si nous le vérifions dans le design, cela ressemblera à ceci ou nous pouvons ajouter la fonction de défilement infini, mais ce sera une bonne chose. Pour le précédent et le suivant, nous devons utiliser ce design au lieu de celui-ci. Nous devons maintenant ajouter ou modifier le style E. Passons au style E dans le style E. Voyons l' écart entre les colonnes, il était de 20, il était de 20 et ici, entre les deux, la taille est de 30. Faisons en sorte que la taille de l'internat soit 40. L'écart entre les colonnes sera de deux, l'écart entre les lignes sera de 40 joueurs. Et sur le panier, la couleur de fond sera la couleur blanche et la bordure pour la bordure. En fait, nous n'avons pas besoin de frontière. Le rayon de la bordure, voyons que le rayon de la bordure passe à deux. Oui, le rayon est de 20 comme rayon de bordure, et ce sera comme ça et le pad horizontal, le vertical horizontal Pademiac, voyons le rembourrage vertical voyons 830. Faisons comme si tout irait bien, et comment faire, n' ajoutons aucun effet pour l'ombre de la boîte, ajoutons des coques d'ombre de boîte, mais pour une raison ou une autre, nous n'avons pas la possibilité de modifier l'ombre de la boîte, alors gardons-la telle que dévolue et maintenant passons à Image, Espace image Pour l'instant, il se peut que la page soit nulle et que pour le contenu, la couleur du titre sera la couleur du texte. La typographie sera un sous-titre. L'espace que nous voyons, voyons cet espace, c'est de l'espace. Qu'est-ce que cette méta ? Je pense que la méta est cette date. Passons à cette couleur bleue et nous n'avons pas besoin de séparateur. La typographie sera un paragraphe. Ensuite, la couleur d'exception sera cette typographie en couleur, la phase du paragraphe devrait être voyons l'espace, c'est deux Sauf que c'est trop long, alors contentons-nous et d'une longueur jusqu'à 20, 20 encore plus grands, 15, dix sur mesure, rien ne se passe. Pourquoi ce n'est pas le cas, voyons voir sur l'espace de l'image, d'accord, mais sur l'image, nous avons un problème car elle n'est pas alignée en haut. 136. Page de blog de conception - Partie 04: OK, j'ai trouvé le problème. Donc, dans cette image, un style sur carte, nous ajoutons un rembourrage vertical de 20 Si nous le supprimons, l' image est parfaitement corrigée. Et pour ce texte sur le contenu, nous ajoutons une longueur de 20. Dans ce cas, il faut en ajouter 22 car les exerps apparaissent dans le nombre de mots Donc, si nous en ajoutons 24 et que nous publions , nous ajoutons les 22, puis je passe à l'aperçu, cela ressemblera à ceci. Et maintenant, si nous copions simplement ce contenu, il s'affichera sous forme de 22 mots. OK, maintenant ce problème est résolu et nous devons ajouter de l'espace en bas. Essayons donc de le faire , mais la taille intermédiaire de ce titre et de l'image est trop grande, alors essayons également de corriger ce problème. L'image, l'espacement, mettons-le à zéro publions-le et voyons-le dans le vrai design Cela ressemble maintenant à ceci, et il semble que nous ayons fait tout notre possible pour créer cette section de blocs. Maintenant, je peux cliquer sur publier et nous devons modifier pagination. Passons à mise en place de la pagination et voyons ce que nous pouvons faire abord, je vais définir le texte comme typographie et, en mode normal, la couleur sera cette couleur et selon la façon dont la couleur sera la couleur primaire en mode actif, la couleur sera la couleur primaire et l'espace entre les espaces sera fixé à 20 et voyons à partir de là, entre les tailles, l'espacement sera de 20 et l'espacement sera de 40 comme ça à partir de là, entre les tailles, l'espacement sera 20 et l'espacement sera de 40 Malheureusement, nous avons fait ce design comme ça et nous devons utiliser du CSS personnalisé pour le faire, mais je ne vais pas le faire dans ce cours. Ici, peut-être à l'avenir, je vais créer des leçons vidéo pour le CSS et Wordpress. Maintenant, je clique sur publier et voyons le résultat dans le design réel. Il ressemblera à ceci, et si nous cliquons dessus, nous redirigerons vers la page d'article de blog unique et nous devons créer cette page. Pour l'instant, passons à la page de blog, d'accord . Si nous cliquons sur le second, il passera à la deuxième page et affichera le reste du design. Et aussi, nous pouvons ajouter le défilement infini, mais je pense qu'il serait préférable d'ajouter le défilement infini. Donc, en pagination, nous avons ici le défilement infini, ce qui signifie qu'il faut ajouter de la rotation. Ensuite, je vais cliquer sur Publier en C car c' est beaucoup plus moderne que la pagination Maintenant, si on m'appelle, le message s' affichera comme ça. Je vais le supprimer à nouveau et voir le message se charger et le message se charger comme ça et c'est bien mieux Dans le style de pagination, nous pouvons le changer de couleur pour cette couleur bleue La couleur tournante sera le bleu, cette typographie, plus de pages, plus de message de publication, sera noir et il figurera sur le titre, pas sur le titre, sur le sous-titre L'espacement sera donc de 40. Et maintenant, voyons le design. Nous allons voir que c'est bien mieux qu'avant. Et maintenant, créons la page d'article de blog unique. 137. Page de blog de conception - Partie 05: Bonjour, tout le monde. Créons maintenant cette page d'article de blog unique. Nous n'avons pas de design figma pour la seule page d'article de blog En gros, nous devons montrer l'image du billet de blog, puis le titre, puis le billet de blog lui-même. Faisons-le, ce qui signifie que dans un autre cas, si quelqu'un clique ou accède à un seul article de blog, il apparaîtra dans le meilleur design. Donc, pour ce faire, je vais aller dans le tableau de bord sur le tableau de bord, je vais enregistrer le modèle ou nous pouvons accéder à leur créateur. Passons à Team Builder. Je pense que nous n'avons pas utilisé la partie Team Builder, mais les deux sont assez identiques. Voici donc nos modèles actuels. Maintenant, nous devons ajouter un seul article. Actuellement, nous n'en avons pas, alors maintenant je clique dessus sur le bouton Nouveau. Ensuite, nous avons recommandé ici des bibliothèques de publications en blocs. Je n'utiliserai pas ce matériel parce que nous allons le concevoir à partir de zéro. Donc, nous devons d'abord ajouter l'en-tête sur mes modèles, nous avons une section héros pour nos pages, cliquer sur Insérer puis sur Appliquer et ici nous devons afficher le titre du bloc de publication. Cliquez ici et cliquez sur les balises dynamiques dans les balises dynamiques, ici nous avons un titre forcé. Il suffit de l'ajouter comme ça. Alors pour celui-ci, je ne vais pas utiliser la ligne Safed, donc je vais juste essayer de cliquer dessus et de la supprimer Pour cette image de fond, nous devons utiliser la miniature de la publication Je vais cliquer avec le bouton droit de la souris et cliquer sur Modifier le conteneur, et une vignette ici, nous avons l'image. Donc, ici, cliquez sur le tag dynamique, et sur le post, nous avons l'image en vedette. Réglons l'image sélectionnée et elle ressemblera à ceci. Réglez la résolution de l'image telle que l'image complète et positionnez les centres lors de la répétition noc et l'affichage seront automatiques Auto n'est pas une bonne valeur par défaut. Couvercle. Faisons en sorte que les écrans servent de couverture, ce qui signifie qu' ils apparaîtront comme ça. Ensuite, sur la superposition d'arrière-plan, ajoutons le Olay , ajoutons simplement de la couleur du texte comme celle-ci et augmentons légèrement l'opacité comme ceci. Nous avons maintenant le titre et l' Si nous le publions et que nous cliquons sur Ajouter une condition, ajoutons un singulier, mais si nous voulons afficher le message, nous pouvons simplement ajouter un article, qui signifie que seul ce modèle s'appliquera à la publication de ce site Web. Ensuite, je clique sur Enregistrer et fermer. Passons maintenant à la page blog de notre site Web. Ensuite, si nous entrons dans l' un de ces articles, il ressemblera à ceci, mais nous l'avons encore amélioré. Je vais ressembler à ceci et encore une fois, passez à notre modèle et nous devons maintenant ajouter le contenu. Créons une zone de texte comme celle-ci et sur un élément, nous avons du contenu forcé. Nous devons ajouter le contenu forcé comme celui-ci, puis l'alignement sera laissé à gauche couleur du texte sera la couleur du texte et la typographie le paragraphe À l'avance, nous n' avons rien à faire et cliquer sur le conteneur, et à l'avance, nous devons ajouter la marge supérieure de 1 à 20, et la droite sera 140, gauche 140, comme ça. Pour celui-ci, 120 c'est un peu plus. Faisons en sorte que ce soit 60. OK. Ici, nous avons beaucoup d'articles. Nous avons ici de nombreux éléments à ajouter. Ajoutons des informations forcées et nous n'avons pas besoin du commando Ajoutons navigation forcée pour naviguer dans autre force. Ajoutons donc une table des matières Mais je pense que la table des matières ne fonctionnera pas dans ce cas, mais ajoutons-la quand même. Ici, je n'en ai pas beaucoup d'idée, alors je clique dessus dans le modèle, et sur les blocs, nous pouvons voir un autre design de modèle. Passons donc à celui-ci, et ici, nous pouvons ajouter cette partie de publication affiliée, et ajoutons-la ici, parlons de satellite. Cliquons sur Insérer et le voici inséré, et je veux voir cette section sur les pièces connexes. Donc, avant d'aller plus loin, modifions d'abord ces styles, nous avons ici les informations de publication, et nous n'avons pas besoin de montrer l'auteur. Il suffit d'afficher la date sans commentaire, uniquement la date et ici sur le style de l'icône, la couleur de l'icône sera couleur primaire et la taille de l'icône est correcte. Passons à 16 et sur le texte, couleur du texte sera également décolorée et la typographie sera Faisons la taille intermédiaire 12. Si nous le voulons, nous pouvons ajouter un séparateur, mais nous n'en avons pas besoin Et ici, ajoutons un pass de 20 pour ces deux grands 15 pour toute cette section, et voici la table des matières. Ajoutons une table des matières ici et pour la table des matières, passons au style. La couleur d'arrière-plan sera la couleur d' accent ne fonctionne pas. Ajoutons de la couleur cendrée comme ceci. La bordure noire ne fonctionnera pas, alors n'ajoutons aucune bordure. Rayon de bordure, créons le rayon de bordure comme dans l'en-tête, la couleur du texte sera cette couleur et le type gramme sera le sous-titre Pour la couleur du texte, n' ajoutons pas de soulignement la couleur du marqueur sera la suivante. OK, maintenant sur la boîte, faisons en sorte que cette icône soit bleue. Je pense qu'ils sont bons et contents. Restons comme ça et maintenant le contenu de l'article est correct, car il n' y a qu'ici que nous devons ajouter la couleur du texte et la typographie et tout est parfait Ensuite, pour le billet précédent et suivant, passons au style et la couleur sera cette couleur, la typographie sera, ajoutons-le dans le titre, quel est ce titre ? Nous n'avons pas besoin de titre. Donc ici, supprimons le titre obligatoire, affichons flèche par flèche, faisons en sorte que la couleur soit bleue et sur l'étiquette, la typographie sera un paragraphe comme celui-ci OK. Je pense que c'est mieux. Et si on changeait la couleur en bleu ? Oui, il vaut mieux changer de couleur en bleu. OK. Nous avons maintenant le contenu de l'article. Et si nous le voulons, nous pouvons ajouter une partie de publication Donc, pour le faire sur un élément publicitaire, passons au titre et collons le titre comme les hôtes associés Et un style, la typographie sera un sous-titre, couleur du texte sera le texte, puis cliquez sur l'icône Plus pour ajouter un hôte Ici, nous avons un post juste au post, et nous n'en avons besoin que pour les deux hôtes comme celui-ci et copions ce style de publication depuis la page de publication. Ici, nous avons la première page, bouton droit de la souris sur copier, puis cliquez avec le bouton droit de la souris et collez ce type comme ceci. Et là encore, nous en avons besoin de deux, et la page de publication sera au nombre de deux et pour le moment, il y en a chez les RH. Ajoutons un séparateur ici pour diviser ces deux sections, et je pense que nous n'avons rien à faire en matière de style Nous allons changer la couleur de ce séparateur en couleur cendrée comme ceci. OK. Maintenant, cliquons sur Publier pour voir le véritable aperçu. Passons maintenant à ce post et que s'est-il passé ? Passons à FostPage et voyons si fs ressemble à ceci quelque chose OK, maintenant ça va ressembler à ça, et ce n'est pas beau. Nous devons changer la section forcée affiliée. Pour ce faire, allez ici, cliquez sur Modifier, et ici sur le contenu, la couleur du titre doit être noire, et il doit être sur subdin et nous n'avons pas besoin de l'afficher sauf celui-ci Et pas besoin d' afficher la méta, il suffit d'afficher le texte avec le bouton Lire la suite et de commander Bile, faisons l'ordre au hasard comme ceci, puis ontile faisons un écart entre les lignes Faisons en sorte que l'écart de colonne 20 soit acceptable. Et dans la case, l'image orientée vers 20 est correcte, ou le rayon sera de 20, mais en bas, il devrait être nul et la gauche devrait également être zéro. Et sur le contenu, l' ambiance de lecture sera décolorée. La typographie sera un bouton. C'est bon. Faisons-le face à un 20. Passons maintenant à la mise en page, alignons automatiquement les boutons. Maintenant, dans ce séparateur nous devons changer ce skin en carte. C'était la partie manquante. Encore une fois, nous devons modifier tous les détails et en forcer deux. Il n'est pas nécessaire d' afficher l'exercice et le titre, lire la suite, de voir du banc et sur le contenu du style et de lire plus sur la couleur du bouton avec cette couleur Et c'est quoi ce grand espace ? OK, maintenant cliquez sur publier, et c'est ce que nous pouvons changer. Et voyons-le dans le vrai design, cela ressemblera à ceci, et nous avons ici un autre problème. Pour ce faire, nous devons clairement montrer uniquement le texte de force. Nous pouvons simplement dupliquer ce diviseur et l'ajouter comme ceci. Encore une fois, dupliquez-le et mettez-le ici. Ensuite, il sera séparé du reste du design et ressemblera à ceci. C'est bien mieux, et voyons-le dans le vrai design. Ouvrons donc cinq d'entre eux comme ça, et ça ressemblera à ça. En fait, ce texte sera bien meilleur que celui-ci car dans le précédent, nous ajoutions simplement du texte factice, mais nous devons ajouter un meilleur texte pour obtenir le meilleur résultat et oui, je vois un problème Nous voyons que l' image de fond se répète. Corrigons le conteneur d'édition, et l'image d'arrière-plan ne devrait pas se répéter. En fait, ce n'est pas une répétition, mais pour une raison ou une autre, cela s'est répété. OK, allons-y. Pour cette pose connexe, c'est un peu plus grand. Nous pouvons donc ajouter un rembourrage droit et gauche 990, afin qu'il soit plus petit, peut-être un par un Oui. 90 x 90, ce sera parfait. Et là, nous avons un problème. La hauteur de la ligne est si petite, alors passons à la hauteur de la ligne, pas trop grande 1,1 0,21 0,4 Oui, 1.4 sera mieux. Peut-être que 1,5 sera bien mieux. Ouais. OK. Maintenant, modifions cet article et maintenant nous avons la page des articles de blog et elle fonctionne bien. Mais lorsque nous verrons l'URL, nous verrons la date. Pour résoudre ce problème, nous pouvons accéder au tableau de bord WordPress et passer à la lecture. Non, pas lors de la lecture des liens permanents, nous pouvons définir cette structure de permalien comme jour et nom pour publier le nom et cliquer sur les modifications Passons maintenant à la publication, et maintenant si nous vérifions l'un de ces articles comme celui-ci, l'URL sera affichée comme ceci et elle sera bien meilleure. 138. Concevoir un formulaire de contact - Partie 01: Bonjour, tout le monde. Nous devons maintenant concevoir ce formulaire de contact ou cette page de contact. Passons donc au tableau de bord Press sur les pages, cliquez sur Nouvelle page, et le nom de cette page sera contact et cliquez sur Modifier Tielemento pour ouvrir l'éditeur Elementor Très bien, dans un premier temps, je clique sur l'icône de ce dossier sur mon modèle, je vais voir cette section héros pour le modèle de sous-page, il suffit de l'insérer C'est bon. Et copions le texte. Nous nous asseyons, puis prenons ce texte. Ajoutez ensuite B comme ceux-ci aux points de rupture comme ceci. OK. Maintenant, ce que nous devons faire est d'ajouter ce formulaire, puis d'atteindre coloration de la clinique et d'ouvrir nos icônes. Et c'est ce que nous allons faire. Pour ce faire, je clique sur l'icône pas et sur Plex Box, puis je sélectionne ce type de structure, et ici K C également ici, il suffit de mettre la marge et le rembourrage à zéro Et si nous vérifions ce design, nous avons une plus grande taille ici et une petite taille là. Passons donc à l'intérieur de ce conteneur. Maintenant, changeons ces deux colonnes comme ceci et d'accord, dans un premier temps, nous devons ajouter la marge supérieure et le wtf trabm sera de 140 x 140 Et ici, nous devons ajouter ce texte pour copier le texte et cliquer ici sur le titre, car ce texte sur la typographie de style sera un titre et la couleur du texte sera cette couleur de texte OK, l'alignement sera laissé, puis nous devrons créer le formulaire. Cliquez donc ici pour le formulaire de recherche. Donc, l'élément de quatre a ce formulaire auquel ajoutons le formulaire et cliquons ici voir la taille intermédiaire. Je crois que c'est 220. Il est 220. Alors voilà, passons à 20 ans. OK. Maintenant, ajoutons le nom du formulaire en tant que contact. Formulaire. Et maintenant, nous devons ajouter ces détails. abord, nous devons ajouter le nom complet, copier la partie du nom complet et ajouter ici espaces réservés. En fait, l'espace réservé doit être le nom complet requis Faisons donc de l'espace réservé le nom complet obligatoire et cochons la case et la colonne requises seront 100 et que le type pariera. Pour le libellé, nous n'avons pas besoin de l'étiquette Ensuite, nous devons ajouter Emas, nous avons des images, pas d' étiquette, un espace réservé, le label sera neuf et ensuite nous devons ajouter ce numéro de téléphone, le supprimer et cliquer ici, puis changer ce type Oui, ici nous avons la queue et la place, donc il y en aura. En fait, nous devrions ajouter une étiquette, et ici nous pouvons mettre les étiquettes en hauteur comme ceci. Nous devons donc ajouter des étiquettes comme celles-ci. OK, étiquettes. Copie étiquetée comme e-mail et ici téléphone. Maintenant que le champ suivant est sujet, il est facultatif. Ajouté en tant que sujet et ici à ce jour, étiquetez le texte en tant que sujet et ce type sera du texte et le numéro de téléphone requis est non, et ici le numéro de téléphone est L'adresse e-mail est obligatoire. OK. Nous pouvons maintenant modifier la taille de saisie ici, mais nous pouvons la modifier à partir de la balise de style. Donc pour l'instant, ajoutons ces détails et nous avons maintenant une zone de texte des messages. Le type sera donc une zone de texte. OK, la rangée sera de cinq. Voyons voir, voyons voir. Quatre c'est mieux que cinq comme ça et cela nécessite de passer à la suivante. Nous avons la méthode de contact préférée et elle devrait être listée. Passons donc à un espace réservé et c'est facultatif. L'étiquette sera la méthode de contact préférée, et ici nous devons la changer CL et ici nous devons ajouter les options. Ajoutons donc des options comme le courrier électronique, dit entrez chaque option une ligne distincte pour différencier l'étiquette de la valeur. Séparez-les par le pipeline. Par exemple, prénommez Okay, nous l'avons obtenu, puis voici le pipeline et ajoutons Emil Et voici que le ciel est si fin que c'est un zoom. Non, Zoom ne fonctionnera pas ici. Conservons donc ces trois options. Et si nous le voulons, nous pouvons ajouter une option multileon, mais ici nous n'avons pas besoin de multiléation Il suffit d'en mettre un en retard. Non, si nous vérifions le design, nous ne voyons pas l'espace réservé Donc, pour ajouter l'espace réservé, je vais présenter et ajouter la méthode de contact préférée comme celle-ci C'est une méthode de contact préférée des sols. Et il fonctionnera comme machine à souder et ce n'est pas un champ obligatoire, et passons à l'élément suivant L'article suivant est Clecoption. Comment avez-vous entendu parler de nous ? Cleco, il y a beaucoup de types de terrain à jouer avec ces types de terrain et à tous les apprendre. Et je vais copier ce texte ici comme ça. Alors l'étiquette sera comment avez-vous entendu parler de nous ? Et ici, allons-y, ne gardons que ces objets Et je pense qu'ici, nous n'avons pas besoin d'ajouter la ligne ppe car nous n'avons besoin d' ajouter les cinq lignes que si nous utilisons du texte séparé ou essayons de représenter des textes différents à partir de ce texte. Par exemple, dans le cas d'un e-mail, si nous essayons d'en obtenir un, c' est-à-dire s'il s'agit d'un e-mail de quelqu'un, et si nous voulons en obtenir un lors de l'envoi du formulaire, nous pouvons ajouter ce pipeline comme celui-ci. Ou ici, dans ce cas, le ciel sera deux et le téléphone trois. Ensuite, si quelqu'un envoie le formulaire, nous recevrons ce texte sous la forme un, deux, trois. D'accord, nous n'en avons pas besoin, alors retirons-le. Et maintenant, ce qu'il faut ajouter. Ici, nous avons téléchargé le champ humain. Ajoutons donc un nouvel élément, et ici, disons le type de téléchargement de fichier et l'étiquette sera le document de téléchargement. Et ici, nous pouvons définir la taille maximale du fichier. Créons l'option e-mail avec pièce jointe et ce n'est pas obligatoire. Nous pouvons ajouter des types de fichiers autorisés, nous avons donc autorisé ici le type de fichier PDF, JPG, PNG, JPG PNG. PDF, comme celui-ci. Bon, maintenant, seul le visiteur peut télécharger le document de type JPG, PNG ou PDF, et au format Maxfle, faisons-en trois La taille maximale du fichier doit être inférieure à 3 mégaoctets. OK. Maintenant, je pense que notre formulaire est rempli, mais lorsque nous vérifions ici, il n'a pas de nom. 139. Ajouter un code css pour afficher l'étiquette dans le champ fichier: OK, maintenant nous avons ce problème. Nous cachons les étiquettes. Ainsi, lorsque nous masquons les étiquettes, nous ne voyons pas cette étiquette de téléchargement de document Il suffit donc de choisir le bouton Fichier. Donc, pour y remédier, il faut ajouter le code CSS. Je vais donc simplement le publier et voici son apparence, mais nous devons télécharger le texte du fichier ici. Donc, je vais d'abord copier le texte et le placer comme ceci, puis le publier et maintenant je vais au tableau de bord. Sur le tableau de bord, je dois ajouter ce code, je vais donc passer à l'apparence et à la personnalisation. Vous trouverez ce code dans la section des ressources. Ensuite, je passe au CSS supplémentaire ajoute le code CSS comme celui-ci et je clique sur Publier. Venons-en maintenant ici et examinons les modifications. Nous pouvons maintenant voir l'étiquette. Retrouvez ce code dans la section des ressources. Nous devons ajouter le code CSS. Avant cela, je pense que cette taille est un peu plus grande, alors venons ici et fixons cette largeur 60 et la largeur de ce deuxième conteneur à 40. Ensuite, nous avons la taille 100 de la largeur. OK, maintenant ce que nous devons faire c'est ajouter 140. Page de contact de conception - Partie 02: Nous devons également modifier le titre de ce bouton pour le soumettre, alors faisons-le ici. Découvrons le bouton, et changeons d'envoi pour envoyer comme ceci. OK. Passons maintenant à Estyle in Estyle Faisons en sorte que l'écart de colonne soit nul et que l'écart de deux lignes soit égal à zéro. Voyons les interlignes. Les interlignes sont au nombre de deux. Micro-espaces 20, espacement des étiquettes, faisons de l'espacement des étiquettes, zéro pour l'instant, et la couleur sera la couleur du texte, et le texte sera la typographie Nous n'avons pas de champ DML, nous n'avons donc pas à nous inquiéter à ce sujet Ensuite, nous avons le terrain. La couleur du test sur le terrain sera donc noir et la typographie sera le paragraphe Donc ici, on clique sur le champ, la couleur de remplissage est nulle, ce qui signifie que sa couleur de fond est le blanc, et sur la bordure, nous avons la couleur du trait comme cette couleur cendrée, et la largeur sera égale à une. Ajoutons donc l'aquarelle sous cette forme et élargissons celle-ci. En fait, la couleur de l'eau devrait être de cette couleur. OK, alors nous devons trouver le rayon de la frontière. Le rayon de bordure est de six, et trouvons la couleur du texte Couleur du texte Cette couleur est en fait la couleur de l'espace réservé Et passons au bouton. Donc, sur le bouton, la couleur d'arrière-plan du bouton sera de cette couleur, et le bouton n'est pas plein de boutons, donc la typographie sera le bouton et position des styles d' alignement sera gauche, test de couleur du texte testera la couleur blanche Oui, la couleur du texte est le blanc, et découvrons les bordures. Le rayon de la frontière est de 15 et environ la taille intermédiaire de 2020 par 30 ou 30 Le rayon du corps est donc de 15, le modèle du texte sera de 20 en haut, à droite, 30, en bas 20 en ont laissé 30, comme ça. OK. Le type d'eau sera nul. Oh, allons sur la page d'accueil et regardons la phase de survol. Nous n'avons pas encore ajouté les détails au survol, mais faisons en sorte que la couleur du texte passe au noir sur notre arrière-plan couleur du texte passe au noir Donc, pas bon. Faisons en sorte que ce soit encore meilleur. Peut-être gardons-le comme par défaut. Nous n'avons pas besoin d'en faire. Nous devrions ajouter ce type d'animation comme ceci. En ce qui concerne le contenu, je pense que la saisie devrait être moyenne, et maintenant ce sera bien mieux comme ça. Maintenant, publiez ceci et voyons le design sur Je vais partir, pour qu'il ressemble à ceci. OK. Le formulaire est rempli , il faut maintenant créer cette section. Et ajouter une action au formulaire sera une autre étape incontournable. Faisons-le donc après avoir terminé la conception complète du site Web. 141. Page de contact de conception - Partie 03: Nous devons maintenant concevoir cette section. C'est assez simple car nous l'avons déjà conçu. Si nous allons sur la page d'accueil de notre site Web et que nous faisons défiler la page vers le bas, nous avons cette section similaire. Passons à l'édition avec Elementor pour modifier cette section, modifier la page et copier la section Faites défiler la page vers le bas C'est bon. Copions un par un, bon exemplaire, venez ici. Non, ici, collez-le comme ça et là, copiez-le assez simple. Non Je pense que nous n'avons pas besoin de celui-ci. Nous pouvons faire le travail avec ces deux objets. Donc, d'abord, je vais copier, sélectionner le conteneur principal et envoyer le contenu de justification au centre. De plus, pour le conteneur principal, je vais passer à la mise en page et à la mise en page, la colonne sera de 220, nous aurons donc cet espace et dans le sous-conteneur, la glace en ligne sera également de 20, comme celui-ci Je crois que c'est 20, n'est-ce pas ? Il en est 30. La rose a 30 ans. OK. Maintenant, d'abord, le S est le même, puis nous avons l'emplacement de la clinique , et ici nous n' avons pas besoin celui-ci, alors supprimez-le, et puis nous avons de celui-ci, alors supprimez-le, et puis nous avons des heures d'ouverture aux , je duplique celui-ci , puis je télécharge cette icône comme ceci, puis je viens ici et cliquez comme ça, puis sélectionnez ici et elle sera ajoutée comme ça, puis il nous faut ajouter ce texte. Copiez l'openn paste comme ceci, puis ici, copiez le texte, cliquez ici et placez le texte comme ceci Nous avons maintenant ces trois sections, et maintenant ce que nous devons ajouter à cette carte. Pour ce faire, je vais cliquer sur l'icône plus. Colonne de direction de la zone de texte, et ici, la taille attrayante sera en haut sera un, deux et, et à droite , 140 x 140 Maintenant, je vais rechercher ici la carte. Ici, nous avons Google Map, ajoutez-le. Et maintenant, copions-le. Copions cet emplacement sur la carte et collons-le comme ceci pour qu'il apparaisse comme ça. Donc, si nous le voulons, nous pouvons zoomer un peu plus loin et ajuster la hauteur. Voyons donc la hauteur ici. La hauteur est de 500, donc ne faisons pas 400 ou 500 comme hauteur, et c'est plutôt bien. D'accord. Sympa. Maintenant, je peux le publier, et voici notre page de contact. Cela aura une meilleure apparence sur ce type d'appareils. 142. Corriger l'en-tête: Bonjour, tout le monde. Maintenant, nous ne faisons que concevoir les pages Earl, mais nous avons encore beaucoup de travail à faire. Nous n'avons toujours pas rendu ces pages réactives. Cependant, repartons étape par étape. Tout d'abord, en ce qui concerne la page d'accueil, nous avons beaucoup de travail à faire. Commençons donc par la page d'accueil et rendons le site Web fonctionnel. La première étape, si je vérifie le lien sur la page d'accueil, le lien d'accueil fonctionne pour bloquer notre fournisseur, donc contacter l'un de ces liens ne fonctionne pas. Donc, si je clique sur cette icône d'appel, cela ne fonctionne pas deux fois et cette icône d'appel n'est pas correctement alignée Corrigeons donc d' abord ces problèmes pour modifier l'en-tête principal. Je clique donc sur l' en-tête principal pour le modifier dans Elemental et c'est parti Donc, tout d'abord, nous devons changer ce menu et pour changer le menu, nous pouvons cliquer dessus, aller sur l' écran du menu pour le gérer. Et voici le menu actuel, mais ces liens sont des liens personnalisés, nous devons donc les modifier. Donc, dans les articles Admeno, nous avons des pages. Donc, si je clique sur O view, nous pouvons voir les pages que nous avons. Nous devons donc remplacer cette page à propos, cette page blog, cette page de contact, et notre cavalier sera la section. Donc, pour l'instant, ajoutons ces éléments au site Web, et ici je vais changer cette étiquette de navigation à peu près », puis la mettre ici, puis supprimer ce lien personnalisé et nous aurons un contact. Je vais supprimer ce lien et ce tag personnalisés et ne conserver que le contact Nous avons alors la page de blocage Let's Change est donc en mesure de bloquer et de supprimer le lien personnalisé. Maintenant, ces éléments devraient être utilisés, alors maintenant je clique sur Savino Ensuite, lorsque quelqu'un clique sur le lien de ce fournisseur, cette personne doit être redirigée vers la page d'accueil. Je vérifie que je redirige vers la page d'accueil, notre section fournisseur vers cette section. Pour ce faire, nous allons créer cette fonctionnalité. Je vais cliquer sur Modifier avec l'élément droit, puis faire Je vais cliquer sur Modifier avec l'élément droit, défiler la page vers le bas jusqu'à notre fournisseur dédié, cliquer ici, puis accéder à Advance. À l'avance, j'ajouterai un identifiant CSS. Je vais juste ajouter ici notre fournisseur Ders et le copier, puis publier les modifications et maintenant aller dans Menu et sur Menu avec le hashtag que nos fournisseurs aiment ça. Alors maintenant, je clique sur Enregistrer le menu , puis voyons les fonctionnalités. Donc, dans un premier temps, si nous cliquons sur A, cela réagira vraiment à la page A comme ceci et nous retournerons à la page d'accueil. Et si je clique sur nos fournisseurs, cela se rapportera à la section des fournisseurs. Quelles pages ont fait cela ? Nous avons simplement ajouté l'ID ou nous avons simplement attribué un identifiant CSS à cette section, et dans Menu, nous l'ajoutons simplement comme un hashtag à nos fournisseurs Ainsi, lorsque nous cliquons sur nos fournisseurs, vous pouvez voir ici que nous avons un hashtag OU un fournisseur, un tag comme celui-ci. Voyons voir ici et vérifions-le à nouveau. Passons donc à la page d'accueil et vérifions-le à nouveau Voir Quand je le fais, notre balise de fournisseur apparaît et cette section redirige vers la page des fournisseurs ou la page redirige vers la section des fournisseurs OR, et si je clique sur la balise Con, elle sera redirigée vers la page de contact. D'une manière ou d'une autre, si je clique sur nos fournisseurs, rien ne se passera car cette URL n'est pas correcte. Actuellement, si je clique sur Notre fournisseur, il est ajouté après cette URL de page de contact, mais cet identifiant de fournisseur OR se trouve sur la page d'accueil. Donc, si nous voulons rediriger, nous devons pointer cette URL vers la page d'accueil comme celle-ci. Maintenant, si j'essaie de supprimer la page ou d'accéder à la page, elle sera redirigée vers notre section dédiée aux fournisseurs Donc, pour y remédier, je peux simplement copier le contenu et aller dans le menu Ici, au lieu de simplement ajouter le paramètre URL, je peux ajouter l'URL du site Web, puis Ashtag et le paramètre Ensuite, je vais cliquer sur Enregistrer le menu et maintenant passons à l'action. Alors d'abord, allez simplement sur la page d'accueil et maintenant je suis sur la page d'accueil. Maintenant, si je clique sur notre fournisseur, il sera redirigé vers notre fournisseur, et si je clique sur Contacter puis sur notre fournisseur, il sera à nouveau redirigé vers la section Notre Tu vois, maintenant ça marche parfaitement. Maintenant, notre menu fonctionne. Ce menu de pied de page fonctionne donc, mais nous devrons modifier le menu de pied de page Mais pour le moment, c'est parfait. Et si nous vérifions cela, appelez-nous 24 heures sur 24, 7 jours sur 7, je peux si quelqu'un clique sur cette icône pour lire ou si nous pouvons ajouter fonctionnalité pour ouvrir le dialem du mobile ou du PC et que cela ne fonctionne pas actuellement Si nous le vérifions clairement, nous pouvons clairement voir qu'il y a un problème d'alignement. Réparons donc à ces problèmes. Maintenant, je suis de nouveau sur le sujet principal faire, résolvons d' abord ce problème d' alignement, je clique sur l'élément de la boîte d'image, puis je passe à Estyle dans Estyle dans le contenu Si nous vérifions l' égalité pour le graphisme, nous ajoutons le tiret Otto à la hauteur de la ligne, mais je vais le faire en pixels et ajoutons-le comme un. Maintenant, il monte en haut , puis je vais cliquer ici pour changer cette auto en une comme celle-ci. Maintenant, il suffit de réparer, et maintenant je peux contenir l'espacement. Ajoutons-le comme ça. Maintenant c'est plutôt bon. Neuf seront peut-être la base. Oui, neuf seront basés. Alors maintenant publiez-le, et à l'étape suivante, nous avons Call Link. Accédez donc à Google et recherchez la balise de lien d' appel en HTML. Et voici la balise HTML, il suffit donc d' obtenir cette partie révélatrice, de copier cette partie révélatrice et de venir ici. Ensuite, en ce qui concerne le contenu, nous avons ici un endroit pour ajouter le lien. Donc ici, j'ajoute simplement dire et maintenant ce que je dois faire est d'ajouter ce numéro. Ajoutons donc ce numéro comme ceci. Il s'agit d'un faux numéro, mais ajoutez-le au code du pays. Publiez-le. Et maintenant, passons à la page d'accueil du site Web et d'accord, nous avons un problème de pri Mais lorsque nous cliquons sur cette icône d'appel, la fenêtre contextuelle indiquant « Ouvrir le kip » s'ouvre, ce qui signifie que si nous le faisons sur mobile, le clavier numérique s'ouvre OK. Maintenant, nous avons un problème. Le problème est que nous supprimons la hauteur de ligne ici sur le contenu, faisons de cette description la hauteur de la ligne de typographie à 30 et sur le titre, faisons en sorte que la hauteur de ligne soit la hauteur de la ligne Zéro, publiez-le et reposez-vous sur le design. OK, j'ai parfaitement fonctionné comme ça. OK. C'est bon. Maintenant, notre menu fonctionne parfaitement, et nous devons maintenant passer à la section Hero. 143. RDV de demande de design - Partie 01: Bonjour, tout le monde. Nous devons maintenant concevoir cette page de demande de rendez-vous. Alors faisons-le. Je vais sur le tableau de bord WordPress ou nous pouvons passer la souris ici et cliquer sur la page, et maintenant je vais la copier En fait, copions ce titre et cliquons sur Modifier avec Elemento Très bien, comme nous l'avons fait auparavant, cliquez ici, cliquez sur mes modèles et nous avons ici section des héros Wasa, cliquez dessus , cliquez sur Appliquer C'est bon. Maintenant, ajoutons l'en-tête et disons d' abord de copier le titre, après le titre comme ceci, puis nous devrons peut-être ajouter BR Mais sans R, cela semble également bien, et copions d'abord cette partie, et ici, nous devons ajouter BR ou ligne de rupture ici. Comme ça. OK. Nous devons maintenant ajouter ce formulaire. En fait, dans la dernière vidéo de Figma, j'ai oublié de mettre à jour cette section, donc je vais la mettre à jour et nous reviendrons 144. RDV de demande de design - Partie 02: Ici, sur Figma Design, nous avons les champs du formulaire de contact Ainsi, sur GPT, nous pouvons voir le champ du formulaire de demande de rendez-vous. Ajoutons donc d'abord ces SP, nous devons avoir un nom complet, et actuellement nous avons ici un nom complet, puis une adresse e-mail. Et ici, nous avons l' adresse e-mail, puis le numéro de téléphone. Numéro de téléphone, alors nous devrions avoir une liste déroulante du service de sélection Copions-le et ici, utilisons simplement cette case prévue comme service de sélection de demandes de sélection comme celui-ci et nous ne devons pas cliquer sur celui-ci et le mettre comme ça OK. Ensuite, nous devons avoir une date/heure préférée, alors copions-la et ajoutons-la comme ceci Ensuite, nous devrions avoir un message ou des notes supplémentaires, alors copions-le. Alors faisons de la publicité comme ça. En fait, c'est facultatif. Ajoutons donc ces détails comme celui-ci, et ensuite nous aurons votre consentement. En fait, nous n'avons pas besoin de consentement, et le bouton d'envoi devrait être demander un rendez-vous ». Ici je vais supprimer ces deux options. Alors celui-ci change ensuite le bouton de soumission pour demander un rendez-vous. OK. Nous pouvons maintenant utiliser ce formulaire pour concevoir notre élément ou formulaire Wordpress. 145. RDV de demande de design - Partie 03: C'est vrai. Nous avons maintenant le formulaire. Allons-y. En fait, nous pouvons copier ce contenu depuis la page de contact. J'ouvrirai ce site Web dans une nouvelle fenêtre et j'irai sur Contact, et sur Contact, je cliquerai sur Modifier avec Elementor et nous avons ici ce formulaire de contact En fait, je vais simplement copier toute la section copiant correctement C juste après. Maintenant, nous n'avons plus besoin de ces objets. Au lieu de cela, nous avons besoin de celui-ci, alors je vais simplement le présenter comme ceci. En fait, il devrait être ici. Non, pas dans ce contenant comme ça. Maintenant, nous n'avons plus besoin de ces trois, je vais donc simplement les sélectionner et les supprimer comme ça. Maintenant, nous avons d'abord le formulaire, modifions-le. Ici, nous avons d'abord besoin du nom complet. Je pense que nous avons déjà le nom complet ici, et ici nous devons le changer pour demander un rendez-vous orthographique, et maintenant c'est un formulaire de demande de rendez-vous et ici nous devrions avoir le nom complet. Je vais fermer celui-ci, puis l'adresse e-mail, le nom complet, ici nous avons l'adresse e-mail puis le numéro de téléphone, je pense que nous avons déjà le numéro de téléphone, puis sélectionnez un service. Copions la pièce de service du sélecteur et nous n'avons pas besoin de cet objet Je vais donc changer l'étiquette du sujet en service de sélection et placer le service de sélection et le type sera Select et le type sera Encore une fois, je vais ajouter l'étiquette. Maintenant, comme nous l'avons fait auparavant, ajoutons d' abord l'option vide et nous devons maintenant ajouter nos services Earl. Nous pouvons trouver nos services à partir de la page de contenu, passons au contenu OK, ici nous avons le contenu ou ici nous avons les services. Nous avons donc ici huit services. Copions-les un par un et mettons-les en page. Je vais le réduire comme ça. Maintenant, vous pouvez facilement voir à quelle heure copier. Donc, tout d'abord, nous avons les soins pédiatriques, et il suffit de les ajouter tous. Nous avons maintenant les services. Passons au champ suivant et le champ suivant est la date et l'heure préférées, copiez-le et ici je supprimerai ces éléments inutiles. Ajouter la nouvelle étiquette sera préparée à la date et à l'heure. Déplaçons la demande. Chez Place Solder, en fait, nous devons créer ce champ de date et d'heure Ici, nous avons un champ de date qui devrait être obligatoire. Cependant, nous n'avons pas de champ de date et d'heure. Faisons-le d'abord comme ça. Nous avons une date préférée, la date préférée est un champ obligatoire, et ici, comme espace réservé, ne créons que la date préférée comme celle-ci, puis dupliquons ce champ de date et changeons son étiquette en heure, et l'heure n'est pas obligatoire, comme si cette heure était et l'heure n'est pas obligatoire, facultative Supprimons cette étiquette directement et ajoutons l'espace réservé L'espace réservé sera facultatif. Les mots facultatifs sont. L'heure est facultative. En fait, nous devons créer ce champ horaire, pas comme ça, afin de pouvoir sélectionner l'heure ici et la date ici comme ça. OK, maintenant nous avons un champ de date et d' heure, puis nous avons besoin d' un message et d'un autre, pas de copie Modifions la zone de texte actuelle, ce n'est pas un champ obligatoire et ce champ horaire n'est pas un champ obligatoire pour OK, bien. Nous devons donc maintenant changer le libellé du bouton. Modifions-le donc, copiez demandez un rendez-vous et appuyez sur l'étiquette du bouton comme ceci, et c'est plutôt bien. Alors maintenant je clique sur publier. Et ici, nous devons changer le titre et le texte. Faisons donc ici, copions le titre, passons le titre, puis dupliquons le paragraphe comme ceci et changeons cette typographie en paragraphe changeons OK. Et voyons que la taille intermédiaire entre les tailles est de 30, faites-en Je pense que cela devrait être 2020. Ensuite, nous devons ajouter cette image. C'est assez simple. Nous pouvons simplement copier le contenu de l'image à partir d'ici, ou en créer une nouvelle. Cliquez sur Ajouter un élément et recherchez une image. Et ici, placez l' image comme ceci. Cliquez ici, et nous pouvons simplement télécharger cette image. Cliquez sur Exporter et passons à Tiny PNG, réduisez ainsi la taille du fichier et téléchargez-le. Ajoutons ensuite l'image comme ceci et dans le titre de tout le texte, j'ajouterai une demande de rendez-vous et je cliquerai sur Masquer OK Maintenant, je vais cliquer ici et créer ce centre d'appareil comme ceci. OK, ça va, et maintenant nous avons la page deux de la demande de rendez-vous. Vérifions-le dans la vue arrière. OK, je vais ressembler à ça, et je pense qu'ajouter ces deux éléments ici serait bien mieux. Alors faisons-le. Essayons d'ajouter celui-ci ici, et celui-ci également ici. Vérifions-le. C'est bien mieux qu'avant. 146. Page d'accueil des liens: Lions maintenant notre site WordPress. Je vais aller sur la page d' accueil et nous sommes prêts à accéder au lien et aux problèmes résolus dans le menu, et maintenant nous devons passer à la section des héros et au reste. Je vais cliquer sur Modifier avec l'élément OK Maintenant que nous avons ce bouton de demande de rendez-vous, je clique ici pour le modifier et je passe à Estyle dans Estyle au survol, ajoutons une animation de survol comme Grow. Il grandira donc comme ça lorsque le visiteur survolera le bouton, et c'est un design simple, donc cela suffit Mais si vous souhaitez changer la couleur du texte de cette façon, vous pouvez le faire, mais nous n'allons pas le faire sur ce site Web. OK, maintenant je vais passer au contenu, et pour ce qui est du contenu, nous devons lier ce bouton. Pour ce faire, nous pouvons simplement copier l'URL de la page et la coller ici. Pour ce faire, je vais aller sur le tableau de bord du site Web, ouvrir le tableau de bord ici. Ensuite, je vais accéder aux pages pages, copier la demande de rendez-vous, aussi simplement copier l'adresse du lien de ce u et ici, ajoutons-le simplement dans cette option de lien, je l'ajouterai tel qu'il est ouvert dans une nouvelle fenêtre. Maintenant, le visiteur clique sur ce bouton, nouvelle fenêtre s'ouvrira et il demandera un rendez-vous aujourd'hui. OK. Maintenant, nous devons ajouter l'URL en savoir plus, voici le résumé A. Cela devrait donc aller sur la page A. C'est sur la page, copions un lien de page comme celui-ci. Ensuite, venez ici, l'URL de la page comme celle-ci, et elle s'ouvrira dans une nouvelle fenêtre. Ici, pour ce qui est du style, nous devons ajouter l'animation H, que l'animation grandisse et qu'elle ressemble à ça. Dans les fournisseurs MTO, nous sommes prêts à ajouter ici l'URL de nos fournisseurs. Ainsi, lorsque quelqu'un clique ici, celle-ci doit être redirigée vers notre section dédiée aux fournisseurs Ce que nous pouvons faire facilement, c'est aller sur le site Web et ici, je copie simplement cette URL, puis je la colle comme ça. OK. Maintenant, également un style, nous pouvons ajouter notre animation comme grandir comme ceci. OK. Maintenant, la section suivante et ici nous devons ajouter une fenêtre contextuelle. Ainsi, lorsque quelqu'un clique sur Afficher le profil, nous devons ajouter une fenêtre contextuelle et nous le ferons dans la leçon suivante. Et avant cela, ajoutons d'autres liens. Nous devons donc ajouter l'URL de l'appel Je vais donc copier ce numéro de téléphone et cliquer sur cliquez sur l'image, et si quelqu'un clique sur l'image, passons à cette URL personnalisée, et si quelqu'un clique sur l'image, clavier numérique de l'appareil sera ouvert. Nous devons donc maintenant ajouter cette URL. Ce sera donc une page de contact sur pages nous copiant et ici, ajoutez-la, ouvrez-la dans une nouvelle fenêtre et planifiez une visite, accédez à la page de facturation de la demande de rendez-vous aujourd'hui et collez le lien comme ceci et ouvrez-le dans une nouvelle fenêtre. Et pour ces liens, si nous le voulons, nous pouvons ajouter l'animation de croissance. Cela peut affecter le design, mais il est ajouté et cela peut ne pas affecter énormément le design Donc maintenant, ce que nous devons faire est sur la page d'accueil, Earl Good. Maintenant, nous pensons à Earl, donc si nous cliquons sur ces liens, nous pouvons le voir en action. Je vais donc publier ceci. Laissez-moi le publier, puis vérifions-le. Donc, si nous cliquons sur ce bouton Héros, il sera envoyé pour demander un rendez-vous aujourd'hui. Et si nous cliquons dessus, cela devrait être redirigé vers notre section fournisseur et nous devrions avoir une action pour afficher le profil. Et ici, si on clique sur celui-ci, on le lit sur la page de contact et tout fonctionne bien. Ajoutons maintenant une fenêtre contextuelle à ce lien d'affichage du profil, et nous vous verrons dans la prochaine leçon. 147. Créer une fenêtre popup: Pour passer de plans solo à expert, nous pouvons utiliser Pop Up Builder, mais pour l'essentiel, nous n'avons pas accès à la fonctionnalité Pop Builder. Donc, dans notre plan, nous avons inclus la fonctionnalité Pop Builder, et maintenant nous allons ajouter ce générateur Popup Lorsque quelqu'un clique sur ce profil, il ou elle apparaît dans une fenêtre contextuelle, nous aurons plus de détails sur le fournisseur. Alors faisons-le. Je vais d'abord sur le tableau de bord WordPress et sur le tableau de bord WordPress dans les modèles, vous verrez des fenêtres contextuelles. Cliquez donc sur les fenêtres contextuelles. Et actuellement, nous n' avons pas de fenêtres contextuelles, alors je clique simplement sur Ajouter une nouvelle fenêtre contextuelle, et ici le type est pop up et je vais ajouter le nom. Ce nom sera donc notre fournisseur. Ajoutons-le comme une fenêtre contextuelle. Notre fournisseur apparaît et cliquez sur Créer un jeu d'équipe. OK, nous avons ici quelques designs pop art, mais créons-en un à partir de zéro. Je vais supprimer celui-ci. Et ici, nous devons le modifier Je clique donc sur Ajouter une boîte Plex et sur la colonne de direction. Et ici, si je passe à la mise en page avancée en termes de mise en page et de rembourrage, je supprimerai tous ces détails, et pour le rembourrage, ajoutons-les comme 20 en haut, à droite, 20, et les 20 en bas à gauche, ajoutons le rembourrage en 20, puis nous devons ajouter Alors faisons-le. Dans ce cas, nous avons d'abord besoin de l'image. Donc, cliquons ici, recherchons une image et ajoutons l' image comme ceci, alors pour l'instant, ajoutons une image stupide Ajoutons donc cette image. Donc, si vous vous en souvenez, nous créons cette section pour nos fournisseurs en utilisant un champ personnalisé avancé comme type de pose différent. Si nous accédons au tableau de bord et au tableau de bord, nous aurons cette section réservée aux fournisseurs sous forme de pose dédiée. Donc, avant d'ajouter ces informations, créons simplement le design. Donc, d'abord, nous avons cette image et je vais l'ajouter comme ceci, puis nous avons besoin d'un titre Donc dans ce cas, le titre sera donc je vais ouvrir le design de Figma OK, nous pouvons copier ces informations d'ici. Ici, nous allons avoir ce titre comme premier titre, puis passer au style, passer au paragraphe comme celui-ci, et dans le conteneur, ajoutons pro as Je pense que cela fonctionnera. Et pour l'instant, ajoutons simplement le design de base. Encore une fois, je crée un titre différent. Et si vous vous souvenez, j'ajoute toujours une balise HTML à deux, mais ce n'est pas une bonne pratique. Dans la partie SEO, je vais vous expliquer plus en détail, mais pour le moment, ajoutons les détails par défaut. Ensuite, ajoutons le nom modifié comme ceci, puis le nom sera sous-titre et la couleur du texte sera cette couleur noire Ensuite, nous avons une petite description, mais nous devons ajouter une description du prêt. Donc, si nous allons chez nos fournisseurs et cliquons sur Modifier, diminuons ce chiffre. Nous n'avons donc ici aucune description. Pour l'instant, je vais simplement copier ce texte car nous n'avons besoin que du texte. Alors maintenant, je vais doubler cette section et ajouter la description comme ceci, et ici nous allons la changer en OK, maintenant ça a l'air bien, puis j'ajouterai un bouton comme demander un rendez-vous. Donc, passons au bouton, en fait, nous pouvons copier le bouton d'ici car nous n'avons pas besoin de le créer à partir de zéro, non. Modifions donc la page d'accueil et copions simplement ce bouton, copions le bouton, revenons ici, appuyons sur le bouton comme ceci, puis il ressemblera à ceci. Et faisons en sorte que le bouton soit plein de boutons. Donc, faites en sorte que la position soit étirée comme ceci. Modifiez ensuite ce texte pour demander une demande et un rendez-vous. Ou faisons une demande de rendez-vous, et ça a l'air bien. Maintenant, je passe au conteneur et maintenant ajustons le design Je vais donc faire en sorte que ce soit encore trop bas, peut-être que six ne feront pas 60, les six fonctionneront. Et si nous le voulons, nous pouvons ajouter d'autres motifs, mais pour l'instant, je vais rester comme ça et ici, cliquez sur l'image et définissons centre d'alignement et le rayon de bordure, faisons-en 220. Et changeons cet alignement pour qu'il soit centré comme ceci. Et voilà, faisons-le en deux, et maintenant ça ira beaucoup mieux. Encore une fois, l'espace dans lequel la ligne sera de trois sera bon. Et d'accord, si nous le voulons, nous pouvons ajouter les réseaux sociaux, mais je ne pense pas que ce soit une bonne chose. Mais si nous le voulons, nous pouvons ajouter les réseaux sociaux, mais nous n'en avons pas actuellement, donc si vous le souhaitez, nous pouvons également ajouter une courte description, mais je pense que nous n'avons pas besoin d'une courte description ici. Maintenant, ce sera le look du design et ajustons les détails de la fenêtre contextuelle. Pour modifier la taille de la fenêtre contextuelle et d'autres éléments, cliquez simplement sur cette icône de configuration. Je vais passer au réglage de la fenêtre contextuelle, et ici nous pouvons changer la largeur à notre guise, mais je vais donner à la largeur 600 ou 680, cela aura l'air parfait et nous pouvons ajouter un emplacement de fenêtre contextuelle comme celui-ci, mais le centre horizontal et vertical sera le meilleur endroit et faisons en sorte que la hauteur soit adaptée au contenu, ce qui signifie que la hauteur s'ajustera fonction du contenu et si nous le voulons, nous pouvons l'adapter à l'écran, donc la fenêtre contextuelle sera plus grande. Mais dans notre cas, je vais l' adapter au contenu et ici, si nous le voulons, nous pouvons masquer la superposition, mais je pense que la superposition de cabine sera une bonne chose ici, nous avons un bouton de fermeture, affichons le bouton de fermeture et nous n'avons pas besoin d'animation d'entrée ou de sortie Si vous le souhaitez, vous pouvez ajouter des paramètres généraux, il n'y en a pas beaucoup et lors de l'aperçu, nous pouvons vérifier l'aperçu, mais pour le moment, nous ajouterons simplement des données par défaut, mais lors de la prochaine leçon, nous ajouterons une balise dynamique à tous ces éléments. Nous avons un problème avec ce bouton. Nous allons passer à ce bouton. Nous verrons ce type de problème. Faisons-le disparaître. Pour le faire disparaître, nous pouvons simplement créer ce centre et le contenu sera au centre et le bouton sera plus petit. Encore une fois, allez dans les paramètres contextuels et dans un style, nous faisons plus de choses. Donc pour l'instant, faisons en sorte que le type de bordure passe nun et que le rayon de bordure soit deux, sans avoir besoin d' ombre ni de superposition J'aime bien cette couleur de superposition, mais si nous le voulons, nous pouvons simplement changer la couleur de superposition Mais je pense que la couleur par défaut est meilleure, et sur le bouton de fermeture, agrandissons un peu le bouton de fermeture. Donc, pour ce qui est de la taille, faisons-la taille 22, et la couleur sera bleue. Et oh, pas besoin de faire quoi que ce soit. Et si nous le voulons, nous pouvons changer de position, mais je pense que celle-ci est bien meilleure. OK. Maintenant, sur Advance, nous pouvons ajouter un chronométrage, mais je vais ignorer ce chronométrage. Et ici, nous avons beaucoup d'options, mais je les garderai par défaut. Ici, nous pouvons ajouter des marges et du rembourrage, ainsi que du code personnalisé OK. Maintenant que nous avons cette fenêtre contextuelle, je vais simplement la publier et fois publiée ici, nous aurons trois onglets. Allons-y un par un. Le premier est la condition. Je dis d'appliquer les modèles actuels à ces pages. À partir de là, nous pouvons ajouter ces conditions. Je clique donc simplement sur ajouter une condition, et ici nous pouvons inclure ou exclure. Par exemple, si vous ne souhaitez pas afficher la fenêtre contextuelle sur une page spécifique, nous allons obtenir des pages spécifiques par page. Nous pouvons cliquer sur Exclure et changer tout ce site en singulier et ici nous pouvons sélectionner la première page. Comme ça. De plus, si nous voulons afficher cette page d'accueil contextuelle uniquement, nous pouvons définir Inclure dans la page d'accueil. Dans ce cas, nous devons configurer cette fenêtre contextuelle en première page. Incluez le singulier et la première page. Si nous l'ajoutons à l'ensemble du site, cette fenêtre contextuelle s'ouvrira dans toutes les pages. Dans ce cas, cela ne fonctionnera pas car le bouton contextuel permettra d'afficher le profil uniquement situé sur la page d'accueil. Nous avons donc maintenant ces déclencheurs. Je dis quelle action l'utilisateur doit faire pour que la fenêtre contextuelle s'ouvre. Donc, ici, nous avons différentes options. Donc, si nous voulons afficher la fenêtre contextuelle lors d'un chargement, nous pouvons simplement l'activer lors chargement de la page et ajouter des secondes ici . Donc, si je veux afficher cette fenêtre contextuelle après 5 secondes pendant laquelle l' utilisateur accède à notre site Web, je peux l'ajouter comme ceci, mais je vais le faire savoir, et nous avons ici une autre option. Donc, si c'est sur iCall, nous pouvons ajouter la fenêtre contextuelle lorsque iCall tombe sur le Ensuite, il ne reste plus qu'à faire défiler l'élément. Donc, si nous l'ouvrons, nous pouvons simplement définir une section en utilisant la classe CSS. Et lorsque le visiteur accède à cette section, la fenêtre contextuelle apparaît. Je vais donc le faire savoir et clic signifie que si le visiteur clique sur le site Web, nous pouvons ouvrir la fenêtre contextuelle. Donc, si nous en faisons trois, donc lorsque l'utilisateur clique trois fois, par exemple un, deux, trois, cette fenêtre contextuelle apparaîtra la troisième fois. Nous avons donc ici beaucoup plus d'options. Nous avons ici la détection des blocs publicitaires. Les utilisateurs utilisent donc des bloqueurs de publicités pour bloquer les publicités sur notre site Web, en particulier si vous gérez un site de blog WordPress qui contient des signets publicitaires ou d'autres publicités Vous pouvez déterminer si l'utilisateur utilise le bloqueur de publicités, et si vous ne voulez pas qu'il utilise le bloqueur de publicités, vous pouvez simplement l'activer D'accord, nous avons maintenant un onglet de règles avancées. Ici, ce sont des exigences qui doivent être définies pour que la fenêtre contextuelle s'ouvre. Cette coque, montrée après X pages tissées. Si cela nous appartient, nous pouvons ajouter le nombre de pages qui vérifient l'utilisateur. Par exemple, si j'ajoute ces cinq pages et que l'utilisateur visite cinq pages, la fenêtre contextuelle apparaîtra. Il y a beaucoup d'autres déclencheurs, mais je ne vais pas les passer tous en revue, jouer avec ça. Il existe des objets super sympas que nous pouvons utiliser pour déclencher des fenêtres contextuelles et attirer l' attention du visiteur. OK, maintenant je vais aller à la page d' accueil de notre site Web, et assignons-le à un bouton. Donc, actuellement, nous n' avons aucun bouton ici. Donc, pour ce faire, je vais simplement créer un bouton pour le tester, donc je vais ajouter le bouton ici, et je vais changer le texte du bouton pour qu'il apparaisse , je ne sais pas comme ça sur le style, changeons la couleur principale et ajoutons Padin 22 pour mieux vous et ici nous devons utiliser ce lien pour que cette fenêtre apparaisse Sur le lien, cliquez sur les balises dynamiques, et sur les balises dynamiques, vous verrez une fenêtre contextuelle d'action. Maintenant, vous pouvez cliquer ici et l'action s'ouvre dans une fenêtre contextuelle. Ici, nous pouvons rechercher le nom de notre fenêtre contextuelle, fenêtre contextuelle de notre fournisseur. Cliquez dessus, et maintenant je vais le publier, ce qui signifie que lorsque je clique sur ce bouton, nous devrions avoir cette fenêtre contextuelle. Essayons de faire défiler la page vers le bas, comme ceci. Cliquez ensuite dessus. Lorsque je clique dessus, la fenêtre contextuelle apparaît et je peux la fermer. Lorsque je clique sur demander un rendez-vous, en fait, nous n'avons pas configuré ce bouton de demande de rendez-vous, alors configurons-le. Ici, cela devrait être redirigé vers la page de demande de rendez-vous, donc je vais juste obtenir le titre, comme demander un rendez-vous. Voici le titre de la page de demande de rendez-vous aujourd'hui, collez-le, ouvrez-le dans une nouvelle fenêtre et cliquez sur publier. OK, maintenant essayons à nouveau. Et c'est parti. Ensuite, la fenêtre contextuelle est apparue, et si vous cliquez sur demander un rendez-vous, elle sera redirigée vers la page de demande de rendez-vous aujourd'hui, et nous pouvons fermer la fenêtre contextuelle. D'accord, la fenêtre contextuelle fonctionne bien et je vais supprimer cette fenêtre contextuelle. Et maintenant, nous devons attribuer l'action du bouton à ce profil d'affichage. Configurons avec une fenêtre contextuelle et voyons l'action. Pour l'instant, je vais le publier et je vous verrai dans la prochaine leçon. 148. Ajouter des pop-ups dynamiques avec un carrousel en boucle: Ici, nous avons un problème. Il me suffit de définir le champ personnalisé avancé pour cette fenêtre contextuelle, puis de passer dans les paramètres de la fenêtre contextuelle, définir nos fournisseurs et de cliquer sur Appliquer et prévisualiser. Cela a bien fonctionné. Mais ensuite, ce que j'ai fait, c'est aller dans le carrousel et de configurer cette fenêtre contextuelle sur ce profil de vue Le résultat est que lorsque nous cliquons sur le lien, nous n'affichons que ce type de fenêtre contextuelle Le contenu n'est pas chargé dans la fenêtre contextuelle agit d'un problème lié l'élément et ils n'ont toujours pas résolu ce problème. Mais lorsque j'ai vérifié la solution à ce problème, j'ai trouvé une vidéo de la chaîne YouTube webqudn, et il a réussi à résoudre ce problème Appliquons donc cela à notre section dédiée aux fournisseurs. Donc, pour résoudre ce problème, nous devons ajouter un nouveau champ de type d'URL à nos fournisseurs, puis nous devons y ajouter le lien Popa Alors faisons-le. Tout d'abord, je vais aller dans le champ personnalisé avancé, et dans le groupe de champs, nous aurons nos fournisseurs. Je clique simplement sur Modifier et voici les champs, et maintenant nous avons besoin d'un nouveau champ, donc je clique sur le champ, et ce type de champ sera Lien. Ensuite, j'ajouterai une étiquette de champ sous forme d'encre contextuelle comme celle-ci. Ensuite, je vais cliquer sur Enregistrer les modifications et passer à la partie suivante. Alors maintenant, je vais revenir ici. Nous n'avons qu'une seule fenêtre contextuelle, mais pour que cela fonctionne, nous devons créer des fenêtres contextuelles individuelles pour tous nos fournisseurs. Dans ce cas, nous devons en créer cinq. Je vais renommer ces fenêtres contextuelles en tant que noms de fournisseurs. abord, je vais copier nom de ce fournisseur, puis cliquer sur Modifier les détails, puis sur Modifier. À partir de là, je vais le remplacer par le nom du fournisseur, puis cliquer sur Mettre à jour. Maintenant je clique sur Modifier avec un élément ici Ce que nous pouvons faire est de supprimer les détails des champs personnalisés avancés et, dans un premier temps, nous devons ajouter ces informations. Actuellement, voici le portrait, choisissez cette image dans notre médiathèque Voilà, cliquez sur Consilate puis nous avons ce titre, cliquez ici et supprimons la dynamique Et ajoutez le rouleau comme ceci. Ajoutons un rouleau, puis le suivant, je crois que c'est son nom, supprimons celui-ci. Ajoutons donc le nom du médecin ou le nom du fournisseur comme ceci, puis le suivant dans le suivant, nous avons la description du prêt. Nous avons donc ici la description du prêt, suffit de la copier et de la coller comme ceci. D'accord. Maintenant, nous avons une première fenêtre contextuelle, maintenant je clique sur publier. OK, maintenant que notre première fenêtre contextuelle est terminée, je vais donc y retourner puis aller à la fenêtre contextuelle. Et à partir de là, je vais le dupliquer. Pour le dupliquer, je vais simplement cliquer sur Exporter le modèle, et ici, cliquer sur le modèle Implod et placer le fichier Jason comme ça, puis cliquer sur Importer et cliquer sur Continuer Ensuite, je clique sur Activer et importer. OK, maintenant je passe à pops et aucun pop ups n'est juste importé, et voici l'original Voici celle qui a été importée. Cliquons donc sur Modifier avec élément. Ici, modifions ces détails. Donc, dans notre fournisseur, prenons ce second et copions le nom. Voici le nom. Changez le nom. Maintenant, il est facile de suivre le rythme du rôle de cette façon. Ensuite, nous avons la description du prêt, copiez la description du prêt. Collez la description du prêt ici. Ensuite, regardez le portrait et allons-y. Changez la photo du visage en celle du docteur Carlos. Je pense que c'est le docteur Carlos. Oui, sélectionnez-le comme ça. D'accord. Maintenant, je vais cliquer sur publier et sur conditions, ajoutons le singulier et ici la première page. Cliquez sur Enregistrer et fermer. OK, maintenant c'est publié. Et maintenant, nous avons deux fenêtres contextuelles. Voyons voir, oui. Ici, nous avons deux fenêtres contextuelles. En fait, il faut changer le titre. J'ai oublié de changer le titre. Cliquons sur Modifier et collons-le comme ceci. Cliquez ensuite sur Mettre à jour. OK, maintenant nous avons deux fenêtres contextuelles distinctes. Maintenant, nous devons ajouter ces boutons Pow up to. Passons à la page d'accueil. Cliquez maintenant sur Modifier avec 112. Il ne nous reste plus qu'à ajouter un bouton. Je vais juste créer un bouton comme celui-ci et le bouton a un design , cliquez ici. Faisons en sorte qu'il clique ici et sur le lien, nous devons le configurer comme fenêtre contextuelle, sélectionner la fenêtre contextuelle puis l'oreille contextuelle, nous devons rechercher le nom du médecin. Je pense donc que nous avons le docteur Lisa. Tapons donc DR. Voici la fenêtre contextuelle du docteur Lisa. Alors maintenant, je vais changer ce texte en DR Lisa. Et encore une fois, je vais dupliquer ce bouton. Créons un conteneur et ajoutons ces articles au conteneur sans simplement perturber notre site Web Je vais créer un nouveau conteneur comme celui-ci, puis ajouter un bouton, et là je vais supprimer, je vais déjà non, ici, je vais supprimer ce bouton, et d'accord ici, nous ajoutons la fenêtre contextuelle, elle fonctionne donc maintenant, je dois dupliquer ce bouton pour la deuxième fois et nous pouvons facilement le faire si le conteneur est direction sous la forme d' un espace plus deux. On le voit clairement. Maintenant, nous devons trouver le second pour Pally ici et, sur terre changer en DR Garlos puis changer le nom en euh OK, maintenant je dois le publier publier et cliquer sur Aperçu Maintenant, je vais descendre et maintenant si je clique ici, du docteur Lisa apparaîtra, et si je clique ici, le docteur Carlos Propyle apparaîtra comme ça Maintenant, il ne nous reste plus qu' à cliquer avec le bouton droit de la souris et à cliquer sur Copier l'adresse du lien. Ensuite, si je mets cette adresse de lien sur l'URL, nous verrons ce type d'adresse de lien En fait, ouvrons un éditeur de texte, éditeur de texte en ligne comme celui-ci, puis je mettrai du texte. Donc, dans ce texte, nous n'obtenons ce texte qu'à partir de cet élément de balise de hachage Copiez cette partie et accédez à nos fournisseurs ici, nos fournisseurs et à nos fournisseurs. Nous le sélectionnons simplement auprès du docteur Lisa, alors modifions-le et faisons défiler la page vers le bas sur le lien contextuel. Je vais juste coller l'URL comme ceci. D'accord. Maintenant, je clique sur Enregistrer et revenons en arrière. Cela devrait être sauvegardé. Cela permet d'économiser. OK, c'est enregistré, puis je passe au profil du docteur Carlos et à partir de là, copiez correctement la robe du lien, copiez correctement la robe du lien, espace le lien dans l'éditeur de texte et copiez le lien sur ce lien Pop, ajoutez simplement l'URA comme ceci. OK, maintenant sauvegardons celui-ci aussi. Donc, pour l'instant, ajoutons uniquement à ces deux éléments. OK, il ne nous reste plus qu'à parcourir en boucle nos fournisseurs dédiés et à cliquer sur Modifier la température D'accord. Maintenant, sur ce profil d'affichage, je supprime cette partie contextuelle du lien et sur la balise dynamique, je vais ajouter un code court. Ensuite, nous pouvons ajouter un code court ici. Ce code court devrait donc être le code abrégé de notre lien contextuel. Donc, si nous accédons au tableau de bord et ici au groupe de champs personnalisés avancés, et que nous avons ici les champs de nos fournisseurs, cliquez sur et voici le lien contextuel. Voici donc le nom de ce champ, copiez-le et revenez à notre modèle dédié et ajoutez des crochets ici, le champ ACF, le double code égal et le lien contextuel Donc, voici ce qui s'est passé, c'est que lorsque ces informations sont renseignées avec le fils de notre fournisseur , cette URL sera également remplie avec le lien contextuel , et lorsque nous cliquons dessus, , et lorsque nous cliquons dessus, la fenêtre contextuelle liée à ce fournisseur apparaîtra. Essayons-le, cliquez sur Publier et passons maintenant à notre page d'accueil et à la section de nos fournisseurs. OK, quand je clique dessus, rien ne se passe et nous manquons une partie ou nous n'en avons pas fait une correctement. Passons donc à notre groupe de champs avancé puis aux champs de nos fournisseurs et cliquez sur Modifier. Ensuite, dans ce lien contextuel, je vais le modifier pour que la valeur de retour soit dans le tableau d'encre, mais elle devrait être dans LinkRL. Je vais configurer avec LinkRL et maintenant cliquer sur Et maintenant, supprimons cette page. Voyons voir. Voyons voir. Il ne se passe toujours rien. OK, essayons encore une fois, mais cette fois, rien ne se passe. Donc, ce que nous pouvons faire, c'est prévisualiser l'article que nous avons ajouté à cet endroit. Pour ce faire, je vais donc me rendre dans notre section dédiée aux fournisseurs. Ensuite, ajoutons un nouveau titre comme celui-ci, puis faisons-en un paragraphe et changeons sa couleur en noir D'accord. Maintenant, ce que je vais faire, c'est juste le code court et le code court sera le code court que nous avons ajouté ici. Copions donc ce code abrégé. Celui-ci, collez-le comme ça. D'accord. Cliquez maintenant sur publier et voyez ce qui va se passer. Réprimez la page. Non, pas celui-ci. Réprime celui-ci. Et voilà, le shortcode ACF est désactivé sur le côté OK, maintenant nous avons ce problème, nous devons donc activer le shortcode ACF Je vais juste activer le code court, nous pouvons simplement utiliser ce code PHP et je vais vous montrer comment procéder. Je vais accéder au tableau de bord WordPress comme celui-ci et sur les plugins, cliquons sur Ajouter un nouveau plugin. Nous allons ajouter un nouveau plugin, le nom de ce plugin sera donc WP code. C'est le plugin qui est compatible avec notre version, cliquez sur Installer maintenant, sur Installer et cliquez sur Activer Nice. Voici le plugin, je vais donc cliquer sur Code is NB et actuellement, nous n'avons pas de nibbt d'activation, nous allons donc vérifier PHP et nous n'en avons qu' un seul, mais il est désactivé Nous allons donc cliquer sur Ajouter un nouveau. OK, ici, nous avons beaucoup de Nibbt construits gratuitement mais nous n'avons pas besoin de ces talons Dans ce cas, nous allons créer notre propre Snibit, cliquez sur CustomNBT Et ici, nous devons sélectionner le type, donc notre type sera un script PH Ici, je vais simplement coller le code que nous copions à partir d' ici et vous pouvez consulter la section des ressources pour obtenir ce code, et ici j'ajouterai un titre Ce titre activera donc le code abrégé ACF. Ensuite, choisissez n'importe quel appareil , conservez tous les détails par défaut et cliquez sur Enregistrer Snibit pour qu'il soit toujours inactif, il suffit de cliquer sur actif C'est une mise à jour, puis passons aux sites Web. Assurez-vous donc d'ajouter ce code correctement, car si vous l' ajoutez de manière incorrecte, cela cassera le s. Bien, voyons maintenant la page d'accueil et voyons ce qui se passe. 149. Corriger les fenêtres popup dynamiques qui ne montraient pas de problème: Il semble que le code fourni par document ACF ne fonctionne pas pour une raison quelconque, et nous avons un nouveau code, je vais simplement ajouter le code et cliquer sur mettre à jour et vous verrez ce code dans la section des ressources Voyons maintenant le site Web en action. OK, cliquez sur nos fournisseurs et nous avons les détails ici. Si vous cliquez sur l'icône, elle apparaîtra comme ceci car cette URL a ajouté un code court. Passons maintenant à la modification avec Elementor et nous n'avons pas besoin de cette partie URL, alors supprimons-la Cliquez sur Modifier le modèle, et ici nous n'avons pas besoin de ce texte. Je vais donc simplement le sélectionner ici, Je vais donc simplement le sélectionner ici cliquer sur Supprimer et cliquer ici. Ensuite, nous avons simplement ajouté le code court et cela fonctionne. Maintenant, je clique sur publier, puis nous devons créer Popa pour le reste de nos fournisseurs Ici, quelque chose ne va pas. Alors faisons les choses correctement. Alors le docteur Carla a dit docteur Lisa. Copiez simplement l'adresse du docteur Lisa, rendez-vous ici, puis collez-la. Non. Il suffit de le coller comme ceci, puis de copier cette partie. Et sur le tableau de bord, accédons à nos fournisseurs, nos prestataires, et sur celui du docteur Lisa j'ajoute accidentellement l'URL du docteur Carlos. Je pense que c'est le problème qui s'est produit, alors supprimons celui-ci et cliquez sur Concilateink, sur le lien, puis sur Lien et enregistrez Passons ensuite au design et voyons-le dans l'action. On y va, ici et là, ça marche maintenant. OK, maintenant faisons-le pour le reste de nos profils de fournisseurs. Donc, d'abord, nous devons créer les fenêtres contextuelles et créons des fenêtres contextuelles. Je vais supprimer ces onglets inutiles car nous n'en avons pas besoin pour le moment. Et d'accord, ici, cliquez simplement sur Exporter le modèle. En fait, nous avons déjà exporté le modèle. Quoi qu'il en soit, cliquez sur Importer des modèles et ajoutez le modèle comme ceci. Continuez, et nous devrons le faire encore et encore deux fois. Encore une fois, veuillez continuer. Passons maintenant aux fenêtres contextuelles, nous avons le docteur Lisa, docteur Carlos, puis modifions celui-ci. Ce sera Emma. Et ouvrons-en trois. Et voici les coordonnées du docteur Emma, et il y a une fenêtre contextuelle. OK, ici, je vais copier le nom et cliquer sur Modifier avec Elemento En fait, nous devons effectuer une mise à jour après avoir changé le nom, puis cliquer sur Modifier avec Elemento, et c'est aux coordonnées du docteur Emma Chargé ici, le nom sera changé le rôle et la description du prêt OK, maintenant l'image. Regardons l'image. OK. OK. Maintenant, cliquez sur Consilate, cliquez sur Publier , puis enregistrez et fermez, puis revenons en arrière et voyons le suivant Dans la fenêtre contextuelle, c'est parti, cliquez sur Modifier, puis nous avons le docteur Michel, c'est mis à jour. Nous pouvons modifier avec un élément ou changer le nom premier et la description du prêt nominal. Violoncelle, Michael. Je pense que c'est Michael, pas Michel en tout cas. Ajoutons l'image. OK, c'est bien. Cliquez sur Publier, puis sur Enregistrer et fermer. Retournez. Et la dernière est Sara Sara Sara. Ajoutez donc les noms, mettez-les à jour, puis cliquez sur Modifier avec Elemento, puis ajoutons ces détails Changez d' abord le nom cette description du prêt , puis l'image Si nous avons 20 fournisseurs, nous devons le mettre à jour 20 fois. Ce n'est pas la meilleure façon de le faire, mais nous devons le faire car champs personnalisés avancés ne fonctionnent pas avec le carrousel en boucle, en fait, les balises dynamiques Loop Carsel, et les champs personnalisés avancés, et les champs personnalisés avancés contextuelles ne fonctionneront Avec l'élément ou les fenêtres contextuelles sur Loop Prosel contenant du contenu dynamique ne fonctionneront pas automatiquement, nous devons les ajouter manuellement OK. Nous avons maintenant des fenêtres contextuelles pour les fournisseurs. Passons donc à la page d'accueil. Il est maintenant temps de copier l'URL pour copier l'URL, cliquez sur Modifier avec Elementor et ici, changez simplement de docteur Lisa En fait, nous n'avons pas besoin de titre maintenant , cherchons, voyons notre fournisseur Emma. Ensuite, cliquez avec le bouton droit de la souris. En fait, nous devons changer le titre en ma et ajouter le titre, puis nous devons ajouter le second, le Mich. Encore une fois, dupliquez celui-ci deux fois, je crois, deux fois ou une fois. Nous avons donc ce dernier fournisseur, et voici un nom comme celui-ci. OK, maintenant je clique sur publier et il est temps d'obtenir l'URL. Donc, le premier, nous avons un malik, une adresse de copie du lien, une adresse fasink ici, et nous le copions comme ça Ensuite, l'Ema édite le dossier d'Emma. Ici, sur un lien contextuel à l'URL comme celui-ci, cliquez sur une URL et cliquez sur Enregistrer. OK. Retournez. Et puis nous avons le docteur Mike, voici l'URL de Michael, copiez l'adresse du lien, et sur un lien comme celui-ci, puis cliquez sur Enregistrer Ensuite, nous avons l'adresse du docteur Sara Oink, allez ici et copiez l'URL, puis revenez en arrière et nous passons à la dernière page lors de la sauvegarde du lien, alors nous n'avons pas besoin de cette section, je vais simplement la supprimer , cliquer sur publier et visitons le site Web Alors, nos fournisseurs, voyons la fenêtre contextuelle. Nous avons un problème. Donc, lorsque nous essayons d' ouvrir la fenêtre contextuelle, elle ne s'ouvre pas, et j'en connais la raison. Passons donc à inverser le modèle de tableau de bord sous le modèle , nous avons des fenêtres contextuelles Alors voilà, ouvrons cette fenêtre contextuelle Sara Thompson et ouvrons-les toutes. Nous devons tous les ouvrir, et en guise de réglage, OK, je sauvegarde les options, nous pouvons voir l'état d'affichage. En condition d'affichage, nous le rendons simplement vide, mais nous devons ajouter une condition comme celle-ci Nous devons donc inclure le site entier, ou nous pouvons l'ajouter au singulier ou au singulier, mais je vais en faire un site entier et cliquer sur Enregistrer les modifications. OK, alors je vais le faire pour le reste des pop-ups comme celui-ci. OK, maintenant il ne nous reste plus qu'à consulter le site Web. Vérifions-le, demandons la page, et maintenant cela devrait fonctionner. Oui, maintenant ça marche. Tu vois ? C'est donc un petit problème que nous devons résoudre. Maintenant, ça a l'air bien. 150. Rendre le pied de page fonctionnel: OK, la page d'accueil est prête maintenant, et en bas de page, nous devons apporter quelques modifications Les boutons ou ces icônes de réseaux sociaux ne fonctionnent pas et nous devons également ajouter d'autres liens rapides, et ici nous devons ajouter une action à ces numéros de téléphone et e-mails. C'est ce que nous allons faire. Pour ce faire, nous devons modifier le pied de page Donc, si je survole cette modification avec un élément ou si nous avons ici l' en-tête principal et le pied de page principal, je sélectionnerai le pied de page principal . C'est bon. Ensuite, nous devons ajouter un lien vers cette icône de réseau social. Je clique ici. Et ici, la liste des icônes des réseaux sociaux se charge et actuellement, nous n'avons aucun profil de réseau social pour JB Family Clinic Je vais donc simplement ajouter l'URL du site Web, comme ici, Facebook, URL, cliquer sur l'option de lien et assurer qu'il s'ouvre dans une nouvelle fenêtre et ici Twitter Je vais juste ajouter HTTP, scall et slashlashx.com, puis nous avons LinkedIn. Je vais juste ajouter un appel HTTP et slashlas linkedin.com.com puis nous avons LinkedIn. Je vais juste ajouter un appel HTTP et slashlas linkedin.com.com. En fait, ça devrait être un point, comme ça. Et enfin, nous avons Instagram. Instagram, c'est parti. Alors, c'est bien. Maintenant, nous ajoutons simplement un lien vers les réseaux sociaux et sur Quickink, nous venons d' ajouter le menu principal, mais créons un menu différent pour les aliments et ajoutons un lien Puta Donc, pour ce faire, je vais cliquer sur cet écran de menu, et cela ouvrira le menu dans une nouvelle fenêtre. Et ici, je vais cliquer sur créer un nouveau menu, et à partir de là, j' ajouterai un menu similaire à Puta Cliquez ensuite sur Create Meno et ne définissez aucun emplacement d'affichage ou quoi que ce soit Ensuite, dans les pages, je vais cliquer sur Afficher EL et ici nous avons besoin première page sur le contact, le blocage, la demande, le rendez-vous. Ajoutons tous ces éléments et nous devons changer le titre. Dans l'étiquette de navigation, je vais indiquer que le premier est à la maison, le second est à peu près et le troisième est un contact, et ici celui-ci sera bloqué et le troisième sera une demande de rendez-vous comme celui-ci. Maintenant, je clique sur Samno et ici, je publierai ces modifications en cours et je devrai rafraîchir cette page pour charger ce menu Actualisons la page. OK. Cliquons sur le menu pour le modifier Nous avons maintenant une option de menu à temps plein Sélectionnez-la et le menu complet apparaîtra comme ceci. Nous devons également ajouter l'URL des termes et conditions et de la politique de confidentialité à cette section hebdomadaire et je le ferai sur les prochaines vidéos Maintenant, au téléphone, comme nous le faisions auparavant, si quelqu'un clique sur ce texto téléphonique, il ou elle doit ouvrir le cadran téléphonique à la mode. Pour ce faire, je copie d'abord le numéro, puis j'ajoute simplement tell fallen et ajoutons le numéro comme ceci. C'est un faux numéro. Vous devez ajouter un vrai chiffre dans votre cas comme ceci. OK. Il suffit d'ajouter « Tell and call » sur le premier texte du lien. OK, maintenant nous devons passer à l'e-mail, copier l'e-mail. Maintenant, sur Google, je vais simplement rechercher le code HDL de l'e-mail, et aucun lien e-mail Le lien e-mail, le code dM, sera également envoyé par e-mail. Donc je le copie et je viens ici, colle comme ça, puis je colle l'e-mail OK. Ouvrez-le dans une nouvelle fenêtre, maintenant je clique sur le publier et pour l'adresse et les heures d'ouverture, c'est bon, et maintenant nous devons modifier la section des droits d'auteur. la section des droits d'auteur, ci-dessous, je vais juste sur ancha tag go link AHF HREF equal et fermer le crochet, puis dans Hf je vais sur l'URL de la page d'accueil de notre site Web comme ceci, coller, puis à la fin, je fermerai le tag A comme OK, maintenant il devient juste URS, donc quand quelqu'un clique ici, donc quand quelqu'un clique ici, il sera redirigé vers Cliquez maintenant sur Publier. Et si vous le souhaitez, nous pouvons ajouter deux barres obliques créées par l'URL du site Web de notre entreprise, mais dans ce cas, je vais juste l' ajouter comme ça et bien, le pied de page est prêt à être affiché Voyons donc où nous allons. Ainsi, lorsque nous cliquons sur ces liens, redirigés vers le compte de réseau social et vers Nice. Passons donc à la page suivante. 151. Rendre le site Web réactif: Maintenant, nous devons corriger la page A. Je vais cliquer sur Modifier avec Elementor et maintenant, si nous vérifions le design ici, nous avons un bouton Je vais donc cliquer sur Modifier pour accéder à la page de demande de votre rendez-vous Je vais ouvrir les pages Word Press , les pages L ici, copier l'URL sur la page de demande d'affirmation aujourd'hui et placer simplement l'URL et sur l' option liée adt comme ouvert dans une nouvelle fenêtre, et c'est tout, alors ce que nous devons faire est de rendre le site Web adapté aux mobiles Commençons donc par le haut. Donc, ici, ça a l'air bien sur la version tablette. La raison en est que nous utilisons déjà la section de la page d'accueil pour le concevoir. Cependant, ici, nous pouvons ajouter de l'espace dans ce bouton. Sélectionnons donc le bouton et à l'avance, je supprimerai ce moins haut. Ouais. Quand je retire le moins en haut, ça a l'air bien, peut-être en ajoutant moins dix. OK, maintenant c'est beaucoup mieux, et voilà, c'est bon. Et ici, je vais cliquer sur cette grille et sur Grille. Faisons en sorte que cela prenne la forme d'une colonne sur mobile comme ça et non sur mobile, une colonne dans la vue tablette, et maintenant ça a l'air bien, non ? Et en bas de page, tout va bien, mais nous avons quelques éléments à modifier sur le pied de Publions donc ceci et passons au pied de page principal et dans le pied de page principal, cliquez sur la tablette et ici, créons ce centre d'alignement d'URL Ici, alignez-le au centre. Pour une raison quelconque, ce texte n' est pas correctement aligné, mais je pense qu'il vaut mieux commencer l'alignement. Et à partir de là, changeons la typographie. La typographie des boutons devrait être un peu plus petite sur la version tablette, alors cliquons ici pour accéder à Global phone et sur Globalfon, ajoutons la taille du bouton comme 18 Enregistrez les modifications. Très bien, cliquez ici pour revenir en arrière, fermez cette fenêtre pour enregistrer et c'est bien mieux qu'avant. Et là, il ne nous reste plus qu'à retirer le rembourrage et la marge pour que tout soit beau Peut-être ajoutons 30 pour le rembourrage droit 30 pour le rembourrage gauche OK. Maintenant, ça a l'air bien sur la tablette, et maintenant revenons à la page à propos de nous, puis cliquez sur Modifier avec Elementor Ensuite, l' affichage de la tablette est meilleur. Passons ensuite à l'affichage mobile. En mode mobile, l'en-tête est correct. Vas-y, reviens. En mode mobile, l' en-tête est beau, et nous avons ici le texte de l'en-tête et le texte d'arrière-plan. Si nous le voulons, nous pouvons ajouter une image différente, une image d'arrière-plan différente parce que cette image ne l' affiche pas correctement, mais je pense que je vais la garder comme ça car elle est correctement visible et ici ressemble ici, donc ça a l'air bien. Sur Footer, ça a l'air bien. Donc rien à modifier sur la vue mobile, donc I will n'est effectivement publié. Passons maintenant à la section suivante. Alors d'abord, allez à la page d'accueil, puis nous avons maintenant la page Bloquer. Sur la page Bloquer, cliquez sur Modifier avec un élément, puis voyons si nous devons apporter des modifications jusqu'à présent, tant mieux. Alors maintenant, je vais passer de tablette en tablette, nous devons apporter quelques modifications. Alors cliquez ici et sur ce rembourrage à droite et à gauche, nous devrions le remplacer par 30 x 30, c'est trop grand. Peut-être faisons-le 20 par 20. Oui, 20 x 20 ça va faire du bien. Je pense que ça devrait être 30 x 30, 30 x 30. Ouais. Quand je l'ai fait 30 x 30, l'alignement était correct, et le reste est OK, donc maintenant je peux le vérifier sur mobile. Voyons donc la vue mobile, et sur mobile, elle est superbe. Nous n'avons pas besoin de faire quoi que ce soit. En fait, nous pouvons modifier la taille du rembourrage. Le rembourrage sera de 15 x 15. Oui, le schéma est de 15 x 15. OK. Cliquez maintenant sur publier, puis nous devons modifier le message en bloc unique. Passons à l'un de ces blocs comme ceci et nous devons modifier le design de cette page de bloc. Pour ce faire, nous avons ici un élément de publication unique ou nous pouvons simplement accéder aux modèles ou au team builder à l'intérieur du modèle, puis vérifier le message unique, et c'est le message. Alors maintenant, cliquez sur l'ajouter. C'est bon. Voyons maintenant l' aperçu de la tablette sur tablette. Nous devons changer les deux. L'en-tête semble correct. Maintenant, changez ce paramètre en 30 par 30, et le reste semble normal. Et ici aussi, nous devons faire en sorte que cela soit 30 par 30 comme ça. En fait, nous n'avons pas besoin de faire 30 x 30 sur le mobile sur la tablette, et maintenant ça a l'air bien. Passons maintenant au mobile. Le mobile ressemblera à ceci. Et ici, nous devons changer cela à 15 par 15. Le récipient doit être réglé sur les pagaies 15, à droite, 15 à gauche OK. Maintenant, cliquez sur Publier. OK, passons maintenant à la page suivante. La page suivante est « Éviter ». En fait, notre identifiant n'est pas une page. C'est cette section et sur la page d'accueil, nous sommes prêts à la rendre adaptée aux mobiles, et maintenant nous devons passer au contact. Sur Contact, cliquez sur Elément modifié Passons maintenant au design ici. Nous avons tous les détails, et maintenant ce que nous pouvons faire est cliquer sur cette image et sur l'image, nous pouvons ajouter une URL personnalisée et ajouter ce numéro. Copiez le numéro ici. Ce sera de la queue, du code et ainsi de suite. accord. De plus. Donc, comme je l'ai déjà dit, il s'agit d'un numéro de page. Alors n'y pense pas. Ou lorsque vous ajoutez le numéro, ajoutez-le avec le code du pays. Dans mon cas, ce devrait être plus 94. Et voilà, maintenant je dois passer à la tablette PortraTV et changeons-la L'en-tête semble correct, et ici nous devons changer cette hauteur sera de 30 et la gauche de 30. En fait, ça n'a pas l'air bien. Ce que nous pouvons faire, c'est réduire les recettes ici. Alors faisons en sorte que ce soit 21. Oui, 25, 25, ça ira. Maintenant, ça a l'air d'aller bien. Ensuite, sur la carte, nous allons faire 30 x 30. OK. Maintenant, le portrait de la tablette est beau. Passons maintenant au mobile. Sur mobile, ici, nous pouvons faire 15 x 15 , puis ajouter de l'espace, donc ajoutons une marge supérieure, passe 30. Oui, il nous faut de l'espace comme ça. OK. Maintenant, si nous le voulons, nous pouvons placer ce bouton au centre. Bouton Faisons. Passons à style de bouton par style de bouton. Ici, nous avons le centre de position. OK, maintenant c'est beaucoup mieux, et ici ce que nous pouvons faire c'est changer la droite à 15 et la gauche à 15. OK. Ça a l'air bien. Maintenant, je clique sur publier, puis ce que nous devons faire est de modifier cette nouvelle ouverture, oui, modifier la demande sur une page de rendez-vous. Cliquez sur la page et cliquez sur Modifier avec un élément ou sur OK. Tout semble bien et cliquez sur Tablet port rea et ici Agod et ici, faisons en sorte que ce soit 30 à droite, 30 à gauche OK, ça a l'air bien. Alors oui, nous n'avons qu'une seule section. Ensuite, sur mobile, faisons 15 à droite et 15 à gauche. OK. Publiez-le. Et sur mobile, le menu ne s'affiche pas. OK. Cliquons donc sur le pied de page et ici sur mobile. Non, mettons-le au centre. L'alignement sera envoyé. OK. Lorsque nous en faisons un centre d'alignement, ça a l'air bien. Alors publiez maintenant. OK, publiez-le et 152. Configurez un formulaire de contact: Bonjour, tout le monde. Il est maintenant temps d'ajouter une action à ce formulaire de contact. Donc actuellement, si nous cliquons simplement sur Soumettre, nous devons remplir le formulaire, rien ne se passera car nous ne l'avons pas configuré, alors maintenant je clique sur Modifier avec Elementor Dans Elemento Pro, nous avons une fonction de formulaire de contact. Donc, s'il s'agissait d'un élément gratuit, nous devons utiliser un autre plugin comme contact form seven ou W form. Alors maintenant, je clique sur Modifier le formulaire de contact pour le modifier. OK, voici les champs de formulaire et nous les avons correctement configurés, et maintenant nous avons l' action après la soumission. Allons-y donc un par un. Donc, le bouton, nous l'avons déjà configuré, puis nous avons cette action après l'avoir soumis. Nous avons donc ici une étape que nous pouvons faire. Donc, si je les supprime tous, faisons-les tous. Donc, lors de l'ajout de l'action, je clique sur cette icône plus. Dans l'icône Plus, nous avons une option appelée Collecter la soumission. Si nous ne sélectionnons que celui-ci et lorsque quelqu'un ajoute ses coordonnées sur ce formulaire de contact, nous serons en mesure de recueillir ces soumissions. Pour les récupérer, je peux me rendre sur le tableau de bord. Dans Elementor, nous avons ici une section de soumission et à partir de là, nous pouvons voir la soumission Nous en avons actuellement un. Cela semble être un spam. Comme celui-ci, nous pouvons enregistrer ou collecter une soumission à partir de ce tableau et pour plus d'informations, nous pouvons voir d'où elle provient. Et nous pouvons cliquer pour voir le contenu. Ce n'est qu'un faux code. Il s'agit simplement d'une soumission IPAM et je vais vous montrer comment empêcher ces deux IPAM Maintenant, cela vient de cet e-mail. Maintenant, je vais y retourner et nous avons plus d'options. Nous avons l'option e-mail et e-mail. Si nous sélectionnons cette option d'e-mail, nous pouvons obtenir les détails du formulaire. Si quelqu'un remplit ces informations du formulaire, nous pouvons recevoir un e-mail dans notre boîte e-mail, et par e-mail également, nous pouvons également envoyer un e-mail à la personne ou au visiteur qui a rempli ce formulaire. Ajoutons donc ces informations. Lors de la collecte, nous pouvons également obtenir l'adresse IP de l'utilisateur et l'agent utilisateur. Vérifiez ici, nous pouvons voir ici l'utilisateur IV et l'agent utilisateur correspondent à ces détails. Terminons tout le processus de courrier électronique et testons-le. Nous avons d'abord une section e-mail. Si nous sélectionnons ici e-mail, nous pouvons voir cette section e-mail et ici, je vais simplement la supprimer et ici nous pouvons mentionner les deux e-mails, ce ici nous pouvons mentionner les deux e-mails, qui signifie que nous pouvons mentionner l'e-mail dont nous avons besoin pour recevoir ces e-mails du site Web, et ici nous pouvons ajouter un objet. Je vais donc garder le même sujet. C'est donc comme un nouveau message de JB Family Clinic et nous ajoutons ici les champs Earl, ce qui signifie que l de ces champs s' ajouteront au message de l'e-mail Et puis ici, nous pouvons définir à partir du courrier électronique. Je vais vous montrer comment créer des e-mails avec notre compte de messagerie. Par e-mail, on entend l' e-mail qui envoie un e-mail aux visiteurs ou notre boîte e-mail ici, nous pouvons ajouter à partir du nom Conservez donc les informations par défaut et vous pouvez modifier n'importe lequel de ces détails et ici, nous pouvons ajouter une réponse au courrier électronique. Nous n'avons actuellement aucune réponse à l'e-mail. Pour la réponse au courrier électronique, je sélectionnerai le champ e-mail et si nous le souhaitons, nous pouvons ajouter une copie conforme de l'OCC et du BCC Nous n'avons besoin d'aucun d'entre eux. Et sur les métadonnées, nous pouvons également ajouter ces détails. Je vais tous les ajouter. Notre e-mail est maintenant terminé. Ensuite, nous avons le deuxième e-mail. Envoyez un e-mail à deux hommes qui pensent que les visiteurs nous envoient un e-mail. En tant que propriétaire du site Web, nous recevrons cet e-mail. Nous aurons donc toutes ces informations et nous pourrons envoyer un message de réponse automatique lorsque le visiteur clique sur le bouton d'envoi, nous pouvons répondre automatiquement à son e-mail car nous avons déjà son adresse e-mail ici. Je vais donc ici changer le sujet et les messages. Utilisons l'IA pour générer. OK, je suis ici chez JAG PT, donc je vais vendre JAG PT pour générer un e-mail de réponse aux visiteurs qui remplissent le contact Voyons quel type de message nous générons par jGBT. C'est trop long. Disons que c'est bref. Je vais simplement ajouter ce type de message, donc je vais simplement copier le message et venir ici, pas ici, venir ici. En fait, je vais supprimer celle-ci parce que nous n'en avons pas besoin. Il suffit de l'ajouter et de la supprimer s'il s'agit d'une partie urgente et d' ajouter uniquement ce type d'image. Et ici, nous pouvons sélectionner le prénom, car si nous allons dans le prénom, car si des champs de formulaire sur des champs de formulaire, en fait, nous avons le nom complet dans le nom complet. À l'avance, nous pouvons voir le nom du champ. Je copie simplement le nom du champ comme ceci, puis je pense que cela fonctionnera. Si cela ne fonctionne pas, voyons ce que nous pouvons faire. Il suffit de le coller comme ça et c'est bien. Maintenant, nous avons cet e-mail et ici nous devons ajouter l'e-mail d'origine et le nom du formulaire ira bien et ici, la réponse devrait être l'e-mail saisi par les visiteurs pour accéder au formulaire. À l'avance, nous pouvons remplir et ajoutons 32 comme ça. Nous avons maintenant le réglage des étapes. En fait, nous n' avons aucune étape à franchir, et en option supplémentaire, nous sommes prêts à partir Nous en sommes déjà aux dessins, et nous verrons les résultats. Maintenant, je vais simplement publier ceci et ensuite nous devons créer la boîte e-mail car si nous essayons de l'envoyer, cet e-mail ne sera jamais envoyé ou l'e-mail n'ira pas dans notre boîte e-mail ou celui-ci ou e-mail 2 % parce que nous n'avions pas de courrier électronique et deux e-mails. C'est ce que nous allons faire. Pour ce faire, je vais accéder à mon compte nominatif. Vous devez vous rendre chez le fournisseur d'hébergement et accéder au panneau C. Donc, ici, je clique simplement ici et je clique sur Accéder au panneau C. OK, je redirige vers le panneau C et sur le panneau C, donc si vous n'avez pas utilisé Jeep, peu importe, le panneau C est le même sur tous les fournisseurs HostEM Il peut y avoir quelques modifications, mais c'est assez similaire. Et si vous n'avez pas compte e-mail, si votre fournisseur de services n'en a pas, vous devez le contacter et l'obtenir auprès d'eux. En ce qui concerne le nom, nous avons déjà reçu les e-mails. Si je fais défiler l'écran vers le bas, nous pouvons ici le compte e-mail ou nous pouvons simplement rechercher ici le courrier électronique. Allons-y. À partir de là, je vais simplement cliquer sur le compte de messagerie. OK, voilà, j'ai mes anciens e-mails. À partir de là, il me suffit de cliquer sur Cre et sélectionner l'URL de notre site Web. Pour le nom d'utilisateur, j'en ajouterai quatre et générerons un mot de passe. Je vais générer un mot de passe et nous reviendrons. C'est bon. Maintenant, je clique sur Concreate. L' e-mail sera affiché sur un point de conception de site Web personnalisé. Vous pouvez donc ajouter n'importe quel nom ou n'importe quel nom ici. Par exemple, si vous êtes Joan, vous pouvez ajouter Joan à l'URL de votre site Web, et maintenant je clique sur C Create D'accord, nous avons besoin d'un autre e-mail à ajouter sous forme de deux e-mails. À partir de l'e-mail, il y aura des informations, et créons deux e-mails en sélectionnant le domaine, et j'ajouterai mon nom. OK. Ensuite, je vais configurer le mot de passe comme ceci, puis je clique sur Créer. Nous avons maintenant ces deux e-mails. Définissons ces informations. Copiez simplement l'e-mail et passons au formulaire de contact. Par e-mail, j'ajouterai à partir des e-mails cette application d'information, le site Web personnalisé design.us, puis je copierai cet e-mail, copierai et l' ajouterai sous forme de deux e-mails Ensuite, en tant qu'e-mail à, j'ajouterai à l'e-mail l'adresse e-mail que l'utilisateur saisit ici. Optez pour ps et on compile par e-mail, avancez, copiez le manque à gagner, courrier électronique un est bon, courrier électronique deux fera deux, deux sont la personne ou le destinataire ou la personne qui a rempli ce formulaire et le formulaire sera informatif Copions l'e-mail d'information. Toujours là, et la réponse à cette question sera que je me suis trompé auparavant. La réponse à sera une information sur la conception de sites Web personnalisés. Les deux devraient être les deux e-mails devraient être l'e-mail que l'utilisateur maintenant publié cycliquement et que nous n'avons toujours pas configuré le SMTP, mais essayons de savoir si cet e-mail passe ou non et prévisualisons, et maintenant je vais remplir ce formulaire de contact OK, allons-y. J'ajoute simplement les informations, et ici je n'ai ajouté aucun document, alors maintenant je clique sur Soumettre, et voyons ce qui va se passer. OK. Supposons que votre soumission ait été acceptée, et voyons si nous recevons réellement l'e-mail. Pour vérifier le courrier électronique, je vais aller ici et quel est l'e-mail configuré comme tel et les deux sont un réseau. Allons ici et cliquons sur jet email. Et ici, nous avons un logiciel de messagerie Web, il suffit de cliquer sur Ouvrir. Voyons si cet e-mail passe ou non. Oui, c'est vraiment passé, mais je ne m'y attendais pas. Donc, quand il sera adopté, nous le verrons comme ça. Oui, c'est vraiment un passage. C'est un signe causal. Cependant, si vous n'avez pas l'e-mail dans votre boîte e-mail, lorsque vous essaierez, je vous montrerai comment y remédier et je vous montrerai comment configurer le SMTP Ici, nous avons ces guillemets sur l'en-tête, donc voyons ici les sujets doivent supprimer cette citation est connue Nous n'en avons pas besoin. Et voyons voir aussi sur l'e-mail. C'est aussi sur l'e-mail. En fait, le sujet de l'e-mail doit être modifié. Le sujet devrait recevoir un message Allons-y ici, testez-le simplement comme ça, et j'espère que vous le comprenez. Si vous ne comprenez rien de cette partie, faites-le moi savoir. Je vais créer une vidéo différente. OK. Voyons maintenant notre e-mail testé en tant qu'utilisateur, j'ajoute ce GM. Voyons si nous recevons l' e-mail à G Okay, voici ma boîte e-mail, et il a été reçu Voici donc notre message. Bonjour Gian Gian, est le nom complet que j'ai saisi, merci de m'avoir contacté. Et voici l'e-mail. En fait, l'e-mail est en une seule ligne. Nous devons l'améliorer. Pour améliorer les choses, je pense que nous pouvons ajouter STMA. Essayons d'ajouter STM, le BR, c'est casser la réalité virtuelle et publier Les e-mails fonctionnent donc parfaitement ici. Comme je l'ai dit, c'est bon signe. Cependant, si vous ne recevez pas l'e-mail lors de la prochaine leçon, je vais vous montrer comment y remédier. Avant cela, passons à soumission et cliquez sur Soumission, et sur Soumission ici, nous avons l'e-mail. Nous pouvons cliquer ici pour voir et vérifier les détails du courrier électronique comme ceci et c'est sympa. 153. Corriger le problème d'envoi des e-mails qui ne sont pas envois | configurer le plugin SMTP: Bonjour, tout le monde. Si vous ne recevez pas d'e-mails de votre site WordPress, voici comment y remédier. Tout d'abord, passons aux plugins et cliquez sur Nouveau plugin. Et ici, cherchons WP mail SMTP. Pas de courrier principal. Courrier. C'est bon. Voici le plugin et il est compatible avec notre version Wordpress. Cliquez sur Installer maintenant. C'est bon. Maintenant, cliquez sur Activer. Je vais simplement cliquer sur Revenir au tableau de bord. OK. Nous avons maintenant le réglage. Nous pouvons également tester si notre e-mail fonctionne correctement ou non. Si nous passons aux outils sur les outils, nous avons ici un test d'e-mail, et ici nous pouvons ajouter notre adresse e-mail et cliquer sur envoyer un e-mail, cela signifie qu' un émetteur a été détecté Cependant, cette adresse e-mail du site fonctionnait auparavant. Voyons si nous recevons un e-mail cette fois. D'accord, je me connecte simplement à mon compte Gmail et je ne vois pas l'e-mail qui signifie que ce plugin interrompt la fonctionnalité de messagerie de mon site Web. Réparons-le. Je vais d'abord passer au réglage ici, je vais devoir configurer l'e-mail du bal de fin d'année. Notre e-mail de bal sera celui-ci . Copiez-le et placez le Primmil ici Le mail du bal de fin d'année signifie le courrier électronique que nous envoyons des e-mails depuis ce site Web puis ici , nous pouvons définir le nom. Je garderai le nom par défaut et je conserverai les données par défaut. Ensuite, dans le mailer, j'ai utilisé le SMTP. OK, ici nous devons ajouter l'hôte SMTP. Nous allons donc obtenir ces informations. Pour obtenir ces informations, je peux simplement accéder au panneau C, et voici notre e-mail, et je clique simplement sur Connecter les appareils. OK, nous avons ici toutes les informations. Tout d'abord, nous avons besoin d'un hôte comme hôte, je vais utiliser cette adresse e-mail. Allons ici et ajoutons l'hôte comme adresse e-mail actuelle. Ensuite, pour le cryptage, sélectionnez SSL et ici le port SMTP est 465 OK, et l'hôte SMTP devrait être ce serveur sortant. Copiez-le et collez-le ici, pas l'adresse e-mail et nom d'utilisateur SMTP sera l'adresse e-mail L'utilisation et ici le mot de passe du compte e-mail. Saviez-vous que lorsque nous créons un compte de messagerie, nous créons simplement le mot de passe correspondant à ce mot de passe, nous rythmons le mot de passe, OK, l'authentification est activée, puis je clique sur Enregistrer les paramètres Si vous utilisez Google Workspace ou un autre fournisseur de messagerie, il vous suffit de sélectionner l'expéditeur que vous utilisez et de configurer les informations Dans ce cas, nous utilisons le protocole SMTP du serveur, j'ai donc configuré ces informations OK, passons aux outils, et là nous avons un problème. Rafraîchissez-le. OK, ici, sur l' e-mail d'envoi , cliquez sur Envoyer un e-mail et voyons ce qui va se passer. Pour une raison quelconque, le site Web ne se charge pas, mais espérons que cela fonctionnera. D'accord, cela indique le succès et voici un message d'avertissement. Et pour l'instant, ignorons-le. Alors maintenant, nous avons reçu l'e-mail. Donc, si vous suivez la même étape que moi, vous pourrez résoudre avec succès le problème de non-envoi d'e-mail. Alors maintenant, testons notre e-mail ou testons notre formulaire de contact. Cliquez simplement sur le formulaire de contact et ici, accédez simplement au formulaire de contact et ajoutons ces informations. Et cette fois, téléchargeons le fichier. Cliquez sur ConChoosFle et téléchargeons cette image, puis cliquez sur Soumettre en C pour voir quel type d'e-mail nous avons reçu OK, disons que la soumission a été réussie. Passons donc à notre e-mail et actualisons-le. Ici, nous avons reçu l'e-mail et ici aussi, nous avons reçu la pièce jointe. Ici, nous avons des informations. C'est donc plutôt bien que les e-mails fonctionnent, et ils devraient être reçus ici. Nous avons reçu votre e-mail. OK, sympa. En ce qui concerne les éléments ou les soumissions, nous aurons une trace de cet e-mail. Voici ce mail, il est très gentil. Nous devons maintenant passer à la demande de rendez-vous, demander votre formulaire de rendez-vous. Je demande votre rendez-vous, nous avons le formulaire ici. Nous devons faire en sorte que ce formulaire fonctionne. Cliquons sur Modifier avec Eli Mondo pour le modifier et ça marche Cliquez sur cette icône en forme de crayon pour modifier le formulaire. Nous avons déjà les champs du formulaire et le bouton fonctionne. Nous devons maintenant passer à l' action après la soumission et ici nous aurons collecté la soumission et le courrier électronique. Ajoutons également un e-mail. Ensuite, lors de la soumission de la collecte, ajoutons UserIb et agent utilisateur ce qui concerne le courrier électronique, configurons les mêmes informations que celles que nous avons définies ici. L'e-mail sera là seront les deux e-mails ici. Voici les deux e-mails. Copions ensuite ce texte et mettons le sujet comme demande et rendez-vous. Ensuite, nous verrons les champs, et maintenant nous devons configurer le formulaire de courrier électronique. Nous partons du courrier électronique, collons ici, puis le nom sera celui-ci et la réponse sera le champ e-mail. Pas de copie carbone ni de CC. Ensuite, nous collecterons les métadonnées et maintenant, par e-mail, les deux seront des adresses e-mail. Passons aux champs et là, passons à l'étape suivante et copions le code abrégé de l'e-mail. Donc, comme je vous l'ai déjà dit, lorsque quelqu'un reçoit son e-mail, il reçoit un message de confirmation du site Web. Ajoutez-le comme indiqué par e-mail et pour le nom du bal, copiez cette avance, puis collez-la comme ça, puis la réponse sera cet e-mail. Copiez la réponse à, et ici nous devons ajouter le message. Alors ici, ajoutons simplement ce message comme ceci. Vous pouvez améliorer ces messages. Je le crée simplement comme ça, ajoute le BR et je supprime cette partie. Nous n'avons pas besoin de celui-ci, ajoutez à nouveau le BR pour couper les lignes, et ici nous devons passer du champ à ce champ. Et d'abord comme ça, puis bien. OK, sympa. Nous pouvons publier et voyons voir si cela fonctionne ou non. Pensez que si nous voulons modifier le message de réussite, nous pouvons simplement accéder à des options supplémentaires et cliquer sur le message personnalisé. Et voici les messages. Ici, nous pouvons donc changer. Faisons en sorte que le courrier envoie un message lorsque vous essayez de demander un rendez-vous. Ajoutons ceci : votre demande de rendez-vous a été envoyée. Alors maintenez-le ici et cliquez sur publier , puis essayons-le. À partir de là, je clique sur le bouton « Demandez votre rendez-vous », et voici le formulaire. Ajoutons donc ces détails. OK, ici je remplis les informations. Maintenant, je clique sur le bouton de demande de rendez-vous, et voyons ce qui va se passer. OK, voilà, votre message de demande de rendez-vous a été envoyé. Donc, lors de la soumission, si nous actualisons ici, nous avons l'e-mail, donc si nous voulons le filtrer des formulaires, nous pouvons simplement sélectionner ici, demander un rendez-vous et cliquer dessus pour filtrer automatiquement les e-mails du formulaire de demande de rendez-vous. Ensuite, si nous voulons exporter, nous pouvons simplement cliquer sur Exporter le filtre vers CHV et oui, c'est plutôt cool et voyons nos adresses e-mail Ici, nous avons reçu l'e-mail. En fait, c'est le mail. Pour une raison ou une autre, cet e-mail n'a pas l'air bien. Alors voyons voir et essayons de le réparer. Nous devons également changer de sujet ici, donc changeons le sujet des modifications de la demande de rendez-vous par rapport à la demande rendez-vous dans une clinique familiale , comme alors nous sommes déjà sur le tag BR break Pourquoi ça ne marche pas, ça devrait marcher. Quoi qu'il en soit, cliquez sur publier et si nous voyons les détails ici, nous avons reçu l'e-mail avec les détails comme celui-ci et nous obtenons également les méta-détails. Maintenant, nos e-mails fonctionnent bien et si nous le voulons, nous pouvons simplement réécrire, mais pour le moment, je ne vais pas écrire à nouveau. Si nous passons au style et aux messages, nous pouvons changer la couleur du message dans le message de réussite, nous pouvons changer la couleur du message dans le message de réussite, lui donner cette couleur verte comme celle-ci, et nous pouvons également faire des choses comme ça. exemple, ce message d'erreur sera en rouge comme ça, alors cliquez sur publier. OK, je te verrai à la prochaine leçon. 154. Configurez le plugin SEO Rank Math: Bonjour, tout le monde. Nous devons maintenant nous occuper de la technique et du référencement sur page. Pour le SCO sur la page, nous pouvons facilement le configurer en suivant l' étape de configuration de Rank Math. Alors allons-y. Tout d'abord, je vais dans les plugins et je clique sur Nouveau ou sur Ajouter un plugin. Et nous avons ici sept plugins à mettre à jour. Je vous montre déjà comment mettre à jour site Web sans aucun problème. Et maintenant je vais chercher le plugin. Donc, tendance de recherche. Présentateur de mathématiques. OK, nous avons obtenu le Rank Math SEO et il est compatible avec notre version WordPress, donc je clique sur Installer maintenant et sur Activer. OK, dans un premier temps, je dois connecter ce compte Rank Math à mon compte Gmail. Ou des comptes Google. Ici, je vais cliquer sur Connecter votre compte, et ici nous avons la possibilité de vous connecter Je clique donc simplement sur cette option Google. Dans ce cas, j'ai un compte, mais si vous n'avez pas de compte Rang Math, vous pouvez simplement cliquer sur S'inscrire maintenant et créer un compte gratuit avec Google Facebook gowordfx.com, ou vous pouvez utiliser votre adresse e-mail que vous utilisez pour recevoir des e-mails de Dans mon cas, j' ai déjà un compte, je vais donc m'y connecter, cliquer sur Google pour m' inscrire avec Gmail. Maintenant, je suis l'étape, il suffit de cliquer sur continuer ici, de cliquer sur Actif maintenant. Le plugin est configuré et nous devons maintenant terminer cet assistant de configuration. Ici, je vais sélectionner « facile car le référencement est un sujet profond différent. Ainsi, lorsque nous sélectionnons cette option simple comme les concepteurs Web nous aiment, cela nous aidera à utiliser les connaissances que nous avons déjà, et le reste sera configuré par le plugin. Ensuite, je clique sur Configuration, c'est OK, ici je dois ajouter les détails. Dans ce cas, mon site Web est un site de petite entreprise, donc le type d'entreprise l'est. Ici, je dois sélectionner le type d'entreprise. Dans ce cas, ce devrait être la santé. Je vais donc faire une recherche sur la santé réelle ici, nous avons un hôpital sur la santé. Non, nous avons un hôpital. Oui, nous avons un hôpital, alors sélectionnez le type d'entreprise, et voici le nom du site Web, puis nous avons le logo Do. Ici, la taille est donc de 100 puits par 100 puits et cette image doit être quadrillée Donc, mon image actuelle n' est pas carrée, alors créons une image carrée Pour cela, il suffit de me rendre notre Figma et de cliquer sur notre projet Et si nous examinons la feuille d'autocollants, nous pouvons voir notre logo ici. Créons un nouveau cadre et créons-le comme ceci. Alors faisons en sorte que ce soit 5 puits par 552 bien. Maintenant c'est carré et maintenant je vais ajouter le logo. Dans les bibliothèques d'actifs, j' aurai le logo, sélectionnez-le. Sélectionnez Insérer une instance et placez-la ici. Allons l'agrandir. Ici, je vais simplement détacher l'instance pour modifier ce logo car je souhaite en augmenter la taille Il s'agit d'un logo textuel, ce qui signifie que j'ai augmenté la taille de la typographie Si vous utilisez une image comme logo, vous pouvez simplement l'agrandir. Dans ce cas, je vais le faire puis agrandissons cette partie de la famille, comme si 100 c'est trop. J'ai créé le logo, et maintenant nous allons le renommer logo. Google aime ça et maintenant sélectionnez-le et cliquez sur Exporter, je vais créer ce logo au format JPG et cliquer sur le bouton Exporter, Exporter. Ensuite, je vais sur tinypng.com et réduisons ce logo comme ça, puis je clique sur ce bouton JPG pour le télécharger et maintenant allons-y, supprimons celui-ci et cliquez sur Ajouter un fichier Et ici, ajoutons simplement ce logo, ajoutons du texte ALT comme celui-ci, puis cliquons sur Utiliser ce fichier, puis cliquons sur Utiliser ce fichier, et maintenant nous avons un logo comme celui-ci et maintenant nous reproche l'image de partage sur les réseaux sociaux. Cette image apparaîtra donc lorsque quelqu'un partagera l'URL de notre site Web sur les réseaux sociaux tels que Facebook, LinkedIn, Twitter , Twitter Minix ou toute autre plateforme Facebook, la taille de l'image doit être de 1 200 et 630 Créons donc un autre cadre. Faisons comme ça et mettons-le ici. Finissons-en avec le social, oui, social et il y en aura 1 200 et la hauteur sera 630 comme ça et nous devons ajouter une image. Dans ce cas, je vais simplement ajouter cette section héros, sélectionner la section héros, copier et voici notre cadre. Ici, il suffit de le coller comme ça et maintenant je vais diminuer sa taille comme ça. Ensuite, ajoutons également ce texte. Copiez ce texte et ce texte et collez-le, sélectionnez-le et collez-le ici, puis faisons-le comme ça. Nous devons supprimer celui-ci. Faisons en sorte que ce soit 90. Encore une fois, je vais copier ce globo à partir d'ici et le mettre comme ça, puis la couleur du texte devrait passer au blanc OK. Peut-être réduisons cette taille à 50, ici, par exemple 36. OK. En fait, nous pouvons simplement copier l'en-tête, cette partie, copier et revenir ici, supprimer celui-ci, puis le coller comme ça. Ensuite, je vais supprimer ces deux parties et voilà, faisons cette taille comme ça et disons-le comme ça. C'est bien mieux. Maintenant, je sélectionne ce cadre et je passe à l'exportation, le définis au format JPG, l'exporte et sur un petit PNG, nous pouvons réduire la taille à cinq. OK. Téléchargez-le. Donc, si vous avez un autre type d'image, vous pouvez également l'ajouter, mais dans ce cas, nous avons déjà le fichier Figma C'est pourquoi nous pouvons simplement créer notre design à l'aide du fichier Figma Et ajoutons du texte ALT comme celui-ci, cliquez sur utiliser ce fichier. OK, maintenant cliquez sur Enregistrer et continuer. OK, maintenant nous devons nous connecter avec notre compte Google. prochaines leçons, nous créerons donc un profil Google Analytics et Google Search Console et le configurerons avec notre site Web pour obtenir une meilleure visibilité sur le classement des recherches Google. Nous devons donc sélectionner le compte Gmail que nous allons utiliser pour le service Google que nous allons utiliser. Je vais donc cliquer sur Connecter les services Google, et à partir de là, je vais simplement sélectionner compte Gmail que je vais utiliser pour le site Web. Cliquez sur Continuer, puis sur Sélectionner, puis sur Continuer. OK, actuellement, nous n'avons aucune de ces informations, et dans le futur ou dans les prochaines leçons, nous les créerons. Pour l'instant, cliquez sur Enregistrer et continuer. Cliquez ensuite sur Retourner au tableau de bord. D'accord, nous configurons simplement le Rank Math SO avec notre site Web. Nous sommes donc ici à Rank Math SO, au titre et à la méta. À partir de là, nous pouvons voir à quoi ressemblera notre site Web sur Google. Et ici, nous avons des onglets. Donc, avec ces onglets, nous pouvons ajouter plus de détails. Ainsi, par exemple, si vous souhaitez ajouter votre adresse e-mail, vous pouvez simplement ajouter une si vous souhaitez ajouter votre adresse e-mail, adresse e-mail, et si vous souhaitez ajouter votre adresse ou votre adresse professionnelle, vous pouvez l'ajouter ici, puis vous pouvez ajouter les heures d'ouverture, les numéros de téléphone , et ici, vous pouvez sélectionner la page A rechercher un contact. C'est la page que nous avons déjà créée, et ici je ne vais pas ajouter d' heures d' ouverture si vous le souhaitez, vous pouvez l'ajouter. Type d'entreprise que nous avons déjà sélectionné pour l'adresse, je ne vais pas ajouter l'adresse et vous pouvez créer un profil Google My Business je ne vais pas ajouter l'adresse et vous pouvez créer un profil Google My Business. Ainsi, vous pourrez ajouter toutes ces informations sur votre compte Google My Business et vous pourrez configurer ce site Web ou ajouter ce site Web à votre profil Google My Business. Alors passons à Ho Helmetta. Ici, vous pouvez ajouter votre page Facebook, et si vous avez d'autres profils comme X, LinkedIn ou tout autre, ajoutez-les simplement sur un profil supplémentaire Une fois que vous avez apporté toutes ces modifications, vous pouvez cliquer sur Enregistrer les modifications, et nous avons plus de choses ici. Mais si vous ne savez pas grand-chose sur le référencement, gardez-les par défaut. Et dans cette section de page d'accueil, nous devons modifier notre page d'accueil pour que accueil de notre site Web apparaisse sur Google lorsque quelqu'un effectue une recherche comme JV Family Clinic Pour ce faire, cliquez sur Modifier la page et sur le nom de la page que vous verrez ici, il suffit de cliquer sur et lorsque vous vous rendez ici, vous verrez ce type de lieu. C'est l'éditeur du blog, et ici vous verrez cette icône de classement mathématique, il suffit de cliquer dessus. Lorsque vous cliquez dessus, vous verrez l'aperçu de Google. Cliquez sur Modifier le snip et vous pouvez ajouter un titre ici. Ajoutons donc le titre. J'ajouterai JB Family Clini. Faisons-le ensuite sur la description, nous devons ajouter la description. Ainsi, lorsque vous créez ces informations, par exemple, si quelqu'un dit JV Family Clinic sur Google, je veux voir ce site Web C'est pourquoi j'ai inclus ce texte dans le titre. Je dois également inclure ce texte dans la description. Donc, dans ce cas, ce texte est le mot-clé principal. Donc, à la description, je vais ajouter ce type de texte et maintenant, lorsque quelqu'un effectue une recherche sur Google, le site Web s'affiche comme ça et pour le faire apparaître sur la première page de Google, cela prendra quelques jours et si vous avez un mot clé très compétitif, vous devrez peut-être faire plus de choses de référencement. Dans ce mot clé de focus, vous pouvez ajouter un mot clé de focus dans ce cas, j'ajoute simplement JB fami Clinic et ici nous pouvons voir les informations que nous devons créer Maintenant Earl Good, alors maintenant je clique sur ST pour enregistrer cet aperçu. Maintenant, je reviens au tableau de bord et sur les pages ER, nous pouvons ajouter ces détails aux pages Earl. Cliquez sur Modifier et je l' ouvrirai dans une nouvelle fenêtre. Ensuite, cliquez sur ce tapis de classement et ajoutez le clavier de mise au point. Ajoutons à propos JV Family Clinic et sur Modifier, nous pouvons simplement ajouter à propos de JV Family Clinic et simplement copier, copier et ajouter Ensuite, ici, nous pouvons également ajouter une description. Essayez toujours d'ajouter ces textes d'aperçu manuellement et vous obtiendrez ainsi un excellent résultat. Cependant, si vous avez beaucoup de pages, vous pouvez simplement configurer l'aperçu pour qu' il apparaisse sur chaque page. Pour ce faire, allez dans Frank Map et Title and meta. Ici sur les pages, vous pouvez définir la façon dont il doit apparaître. Dans ce cas, je n'ai pas besoin ce nom de site, je vais donc simplement le supprimer. Dans le titre et le séparateur de page, puis si je clique ici, je peux voir plus de choses que nous pouvons ajouter. Donc, dans ce cas, nous n'en avons pas. Dans ce cas, je vais simplement ajouter un titre comme celui-ci et dans la description, vous pouvez ajouter et cliquer sur Concevoir les modifications. Ce format s'appliquera donc aux pages du site Web, et lors de la publication, nous pourrons faire de même. OK. Dans la leçon suivante, nous allons configurer le plan du site, configurer la console de recherche Google et Google Analytics. 155. Configurer la console de recherche et GA4: Ouvrez la console de recherche Google. Ainsi, lorsque nous configurons notre site Web avec la console de recherche Google, nous pouvons surveiller et maintenir présence du site Web sur les résultats de recherche Google. Nous pouvons donc comprendre ou nous faire une idée des performances des mots clés, par exemple quels mots clés sont classés sur Google et nombreuses visites que nous recevons grâce à la recherche Google, etc. Comme nous pouvons envoyer plan du site Web à la console de recherche Google, cela nous aidera à classer notre site Web plus rapidement sur Google. Commençons donc. Passons d'abord au référencement de la carte de classement et à la section S générale sur les paramètres généraux. Ici, nous avons des outils pour les webmasters et ici d'abord, nous avons la console de recherche Google Je clique donc simplement sur la page de vérification de la console de recherche. Lorsque je le fais, je peux voir l'étape à suivre pour configurer la console de recherche Google. Faisons d'abord étape par étape. Nous devons aller sur le site Web de la console de recherche Google. Vous verrez alors ce type de fenêtre. Ici, cliquez simplement sur Démarrer maintenant et vous devez ajouter ici les détails du compte e-mail. Je vais l'ajouter et nous vous verrons à l'étape suivante. Lorsque vous faites cela, vous verrez ce type de fenêtre. Donc, si vous avez déjà un site Web, il peut s'afficher ici. Ici, nous avons ce site web personnalisé design.us. La raison en est que nous configurons ce compte de messagerie ou que nous créons le décompte des classements sur notre compte Gmail, puis la console de recherche Google est automatiquement configurée. Donc, si vous allez sur Analytic, vous pouvez le voir ici OK. Maintenant, si vous ne voyez pas ce site Web, cliquez simplement sur la propriété et ajoutez l'URL de votre site Web ici. J'ajoute donc simplement l'URL de mon site Web comme ceci, puis je clique sur Continuer. Et j'ai reçu ce message de vérification. Et si vous n'avez pas configuré le classement mathématique SO et que vous ne l'avez pas configuré comme compte GML, vous devrez l'ajouter, ajouter une balise TML, copier cette balise DML et la mettre ici L'apparence du SDMLTag sera la suivante. Maintenant, je clique sur Accéder à la propriété et à partir de là, je peux d'abord ajouter le plan du site. Cliquez sur le plan du site et ici nous devons ajouter le plan du site. Passons aux calculs de classement et à la configuration du plan du site. Dans les sitemaps, nous pouvons ajuster les informations. Ici, je vais le garder par défaut en force, le faire par défaut et les pages faire par défaut et les éléments flottants, nous n'avons pas besoin de classer ces éléments sur Google, donc je vais les antiquiser parce qu'ils font partie de la conception du site Web, non d'une page complète ou d'un article. Donc, si vous vous souvenez des avis clients que nous avons créés à l'aide de roues personnalisées avancées et nous n'avons pas besoin de les classer par rapport à nos fournisseurs, vous n'aurez pas besoin de les classer car ces articles font partie d'une page complète. Par exemple, nos fournisseurs sont chargés sur la page d'accueil Une fois la page d'accueil classée, elle sera automatiquement classée sous la page d'accueil. Maintenant, je clique sur Enregistrer les modifications, nous n'avons pas besoin de catégories, il suffit de supprimer des catégories. Mais si vous vous concentrez sur le blog et que vous avez des catégories, ne dissociez pas ces deux éléments Cliquez sur Enregistrer oui , puis sur Général. En général, nous avons ici l'URL du plan du site. Donc, si je clique dessus, ça ressemblera à ça. Nous devons donc simplement copier cette partie EML. Ici, nous avons l'URL et la barre oblique de notre site Web. Je copie le texte après la barre oblique, je vais ici et je le colle comme ça Cliquez ensuite sur Soumettre. OK, le plan du site a été ajouté avec succès et contient des informations. Alors maintenant, si je vais ici, je vois un problème, il suffit donc de cliquer sur Signaler et de voir le problème. OK, supposons que Google ait détecté du contenu préjudiciable sur certaines pages de votre site. Il s'agit d'un site Web de démonstration, et si vous voyez ce type de message d'erreur, corrigez-le simplement et cliquez sur demander une révision. Dans ce cas, je ne vais rien faire de tout cela. Et au fil du temps, je vais voir les performances et les données d'indexation sur cette console de recherche OK. Il ne nous reste plus qu'à configurer Google Analytics. Google Analytics fournira un aperçu de la manière dont les utilisateurs interagissent avec notre site Web. C'est donc très important. De cette façon, nous pouvons voir ce que les utilisateurs font sur notre site Web , combien de temps ils passeront sur notre site Web et dans quels pays les utilisateurs se rendent de notre site Web à notre site Web. OK, maintenant configurons-le. Donc, dans le domaine de l'analyse, nous avons ici la partie Analytics, mais ici, nous n' avons pas de propriété. Faisons-le donc à partir de zéro. Si je clique sur Cliquez ici pour accéder à KH, nous pouvons voir plus d' informations sur Google Analytics. Cependant, faisons une recherche sur Google. Google Analytics pour vous connecter et cliquez sur ce lien Google Analytics. OK, à partir de là, je sélectionne le compte GML. Alors là, j' ai déjà un compte Analytics, mais créons-en un à partir de zéro. Pour créer, cliquez sur ce bouton Créer puis sur le compte. Ici, je vais simplement ajouter un nom d'utilisateur. Je vais simplement ajouter mes analyses. Ensuite, cliquez sur Suivant, et ici nous devons ajouter le nom de la propriété. Pour le nom de la propriété, j' ajouterai JB Family Clinic, le nom du site Web JB Family Clinic, comme ceci Ensuite, États-Unis, si vous venez d'un autre pays, sélectionnez-le, je sélectionnerai les États-Unis et vous pourrez donc changer d'État. Je vais simplement garder la valeur par défaut activée et la devise sera le dollar américain, cliquez sur Suivant. Ici, nous pouvons sélectionner la catégorie de l'industrie. Je vais chercher comme la santé. Non, je dois le chercher un par un. Voyons voir ici que nous avons la santé et que dans Google, la catégorie santé comporte des restrictions de charge Continuons. J' ajouterai la taille de l'entreprise comme petite, une à dix, puis cliquez sur s et je pourrai sélectionner des objectifs commerciaux. Dans ce cas, je peux sélectionner Afficher l'engagement et la rétention des utilisateurs et sélectionner Comprendre le trafic des applications du site Web et cliquer sur. Créez ici, je clique sur Accepter, je clique sur cette case à cocher et je clique sur J'accepte. OK. Ici, je dois choisir la plate-forme dans mon site Web et ici nous devons ajouter le site Web, Lou, l'URL, je vais juste ajouter un design de site Web personnalisé. États-Unis et sélectionnez HTTPS. Ici, nous devons ajouter le nom du site Web. Je vais l'ajouter en tant que JB Family Clinic et cocher cette case, puis cliquer sur, créer et continuer OK, puis cliquez sur Suivant. Et ici, cliquez sur Installer manuellement. En fait, nous pouvons utiliser le plugin Rank Math pour l'installer. Je vais afficher cette page dans Analytics, voyons voir dans Analytics, je vais cliquer sur Reconnecter et sélectionner l'adresse e-mail, puis cliquer sur Continuer, continuer OK. Maintenant, la console de recherche fonctionne, et ici nous avons le compte My Analytics, et sur place, nous avons la propriété de JB Family Clinic et le flux de données sera JB Ici, je vais cliquer sur Installer le code Analytics. Je conseille d'activer cette option uniquement si vous n'utilisez aucun autre plugin pour installer le code Google Analytics. Je ne l'ai donc pas utilisée. Maintenant, c'est bon, cliquez sur Enregistrer les modifications. Search Console s'affiche désormais en vert et Analytic Analytics en vert et elle est connectée Maintenant, si je vais dans Analytics et que je le diffuse et que nous verrons, il suffit de cliquer ici. Je vais juste rafraîchir. Maintenant, je vais sélectionner mes analyses. ABM. Maintenant, cela montre qu'il est connecté. Maintenant, visitons notre site Web. Je viens d'ouvrir une nouvelle fenêtre de navigation privée et de personnaliser de nouvelles méthodes de conception de sites Web. Ici, nous visitons notre site Web et voyons celui-ci, nous devrions avoir des utilisateurs actifs en personnaliser de nouvelles méthodes de conception de sites Web Ici, nous visitons notre site Web et voyons tant qu'un, mais il n'est pas Donnons-le pendant quelques minutes. OK, maintenant il montre un utilisateur actif et vient du Sri Lanka, donc c'est moi. OK. Tout va bien. Si vous ne le voyez pas, cela indique également que cela peut prendre jusqu'à 24 heures pour apparaître dans votre compte Analytics, cela ne prendra pas autant de temps, et vous verrez ce type d'utilisateurs actifs compter. OK, maintenant nous avons configuré la Search Console et Google Analytics. 156. Utiliser l'analyseur de référencement sur la page: Rank Math SO possède une fonctionnalité intéressante appelée SCO Analyzer. Utilisons cette fonctionnalité pour analyser le référencement de notre site Web. C'est donc sur Rang Matso & SO Analyzer. Vous verrez ce type de design ici, suffit de cliquer sur Démarrer SO Analyzer pour qu'il scanne l'ensemble de notre site Web et nous donne le résultat actuel de SCO D'accord, actuellement, son SCO ISCO est de 7 400. Donc, si nous vérifions ici, nous pouvons voir les problèmes. Et la première priorité est la mise à jour automatique. Activons donc la mise à jour automatique de ce plugin. Et maintenant, nous avons beaucoup de problèmes, et corrigeons-les un par un pour résoudre le problème El. Nous avons donc ici un avertissement. Il s'agit d'un en-tête en forme de H. Aucune balise H one n'a été trouvée sur votre page d'accueil. Ajoutons donc la balise H one pour que le clicon visite le site à partir d'ici, cliconeEdit avec un élément ou ici, si nous vérifions ce texte, agit du texte principal de notre site Web et voici une balise HTML Faisons en sorte qu'il soit H un et cliquez sur publier. Ensuite, cette arrivée sera corrigée. Toujours dans H deux titres, plus de 20 H deux tags ont été trouvés sur votre page d'accueil. Conservons donc uniquement les sous-titres sous forme de H deux, et résolvons tous ces Donc pour cela, je vais d' abord copier ce texte et voyons voir si c'est bien celui-ci. Nous en faisons donc déjà un H, et ici nous avons dédié votre cellule familiale, nous devons donc y aller une par une. Gardons donc ce chiffre deux car il s'agit d'une sous-ligne et ici nous avons 100 % sous forme de H deux, OK, voici le 100 %. Cliquons dessus, et faisons en sorte que ce soit H trois. Ainsi, dans la balise SDM, nous pouvons avoir H trois, H quatre, H cinq, H six, et les balises de paragraphe Dpantag et PO Nous devons rendre cette structure de page HTML conviviale pour le référencement en suivant les directives de référencement. Cela nous aidera à classer notre site Web sur Google et cliquons ici. Faisons alors H trois. En fait, je pense que nous ajoutons beaucoup de H deux. Faisons en sorte qu' ils soient tous H trois. Ici, nous n'avons aucun problème. Ici, nous avons beaucoup de H deux, alors je clique sur San Li et ici nous pouvons modifier le modèle. Modifions-le donc d'abord. Nous avons H deux ici, faisons H trois, et faisons ceci sur trois. Trois paragraphes. OK, maintenant je clique sur publier, puis sur Enregistrer et revenir. OK, sympa. Maintenant, si je fais défiler la page vers le bas, encore une fois, nous avons beaucoup de T, faites-en trois. Et si nous le faisons en partie sur le design, ce sera facile, mais maintenant nous devons le faire manuellement. Je vais donc en faire un paragraphe. Celui-ci devrait être un paragraphe, et celui-ci en contient trois, c'est bien. Et ici, faites-en un paragraphe. Non ici, cela devrait faire l'objet d'un paragraphe et ici, cela devrait être H trois ou H quatre, trois suffiront. Je pense que nous devons également modifier ce modèle, alors modifions-le. OK. Maintenant, d'abord, ce nom doit être H deux et H trois, et cela doit être HP ou balise de paragraphe, puis je clique sur sept bains et ici aussi nous aurons ce H trois et H quatre, C quatre. Maintenant, je clique sur publier et voyons comment cela résoudra ces problèmes ou non. Maintenant, ici, je clique sur redémarrer l'analyseur SO. D'accord, ça passe à 82 et essayez de faire en sorte que ce SoCore soit supérieur à 80 % Nous devons donc maintenant ajouter toutes les balises aux images. Nous pouvons copier cette balise SRT et la coller comme ceci et voir l'icône Voici donc cette icône. C'est donc sur l'en-tête. Cliquez dessus pour modifier l'en-tête. OK, maintenant cliquez ici sur l'ancienne balise, copiez simplement le titre, placez l'ancienne balise comme celle-ci et cliquez sur publier. Ensuite, je clique sur Modifier la page pour modifier la page d'accueil. OK, maintenant je suis de retour. moyen le plus simple est donc accéder au tableau de bord, et sur le tableau de bord, nous pouvons trouver Media, puis de cliquer sur Médiathèque. Et ici, nous aurons les images. Il suffit de cliquer sur Modifier, et ici nous pouvons ajouter une balise ALT. Ajoutons-le comme bannière sociale, cliquons sur mettre à jour, revenons en arrière. En fait, c'est plus facile lorsque nous cliquons sur cette icône de galerie et les images seront affichées comme ça, et maintenant nous pouvons les ajouter comme ça. Comme ça. C'est la méthode la plus simple pour modifier comme ça, rendez-vous Bickst et icône de l'horloge Je vais donc ajouter toutes ces icônes et à bientôt. OK. Maintenant, si nous le vérifions à nouveau, nous aurons un meilleur résultat. Cliquez donc sur Rs pour démarrer l'analyseur S. Nous avons encore beaucoup de balises H two, et ici, nous devons également modifier ce pied de page. Sur le pied de page, nous avons également beaucoup de balises H two. Cliquez sur CFoter conserver. Maintenant, modifions-les tous. Cela devrait être un paragraphe, et ici, cela devrait être un paragraphe ou nous pouvons ajouter H deux, mais ajoutons un paragraphe. Je vois, nous en avons beaucoup. Et voilà, faisons-en un trois. Et ici, formons cela en trois et la section des droits d'auteur sera un paragraphe, cliquez sur publier et vérifions-le à nouveau. OK, maintenant c'est 91, et c'est plutôt bien. Nous avons donc ici le ratio de liens, nous devons donc ajouter plus de liens externes, mais pour le moment, je ne vais pas en ajouter, et pour le moment, le 91 est bien meilleur qu'avant. 157. Vitesse de chargement de page avec le plugin cache LiteSpeed: Bien, il nous reste maintenant une étape : conception complète de notre site Web. C'est-à-dire, optimisez notre site Web et chargez-le plus rapidement sur mobile, ordinateur de bureau ou tablette. Alors faisons-le. Tout d'abord, si je dois me connecter et installer des plug-ins, je peux entendre ici en avons beaucoup grâce à la mise à jour, et nous avons ici le cache Light Speed. Je vais le désactiver. Et s'il est là, c'est parce que le fournisseur d'hébergement que j'utilise est puce nominative et une puce nominative ajoutera automatiquement le boîtier Light Speed. Je vais le supprimer, puis je copierai URL du site Web et je vais saisir le code de la page. Je vais effectuer une recherche sur Google, Google Page Speed, et nous pourrons voir des informations sur la vitesse des pages, il suffit de cliquer dessus. Il s'agit donc de pagespeed point web point Dv, je vais donc simplement mettre en page l'URL du site Web et cliquer sur Analyser. OK. Sur mobile, ses performances sont de 64, et c'est mieux. Cependant, nous pouvons faire mieux que cela, et sur ordinateur, c'est 89. Augmentons donc la vitesse de notre site Web WordPress. Pour cela, nous pouvons utiliser Light Speed, le plugin de cache, donc je clique sur ajouter un plugin. Ensuite, je vais rechercher le cache Light Speed. D'accord, nous avons ici le plugin Light Speed Case et il n'est actuellement pas testé avec notre version WordPress. Ainsi, lorsque nous installons des plugins non testés, essayez toujours d'obtenir des sauvegardes Dans les leçons précédentes, je vous montre comment obtenir des sauvegardes. Nous avons déjà la sauvegarde, je clique donc sur Installer maintenant. Cliquez ensuite sur Activer OK, nous aurons maintenant ici le plugin de cache Lightspeed Je clique donc sur le tableau de bord pour aller sur Da pour le moment, ça ressemblera à ça. Ajoutons donc le paramètre. Tout d'abord, nous avons des préréglages et en ce qui concerne les préréglages, nous n'avons pas besoin de le faire car nous allons le faire manuellement Parce que si nous utilisons ces préréglages, cela peut endommager notre site Web, et si quelque chose casse notre site Web, nous ne serons pas en mesure d' identifier la partie qui perturbe notre site Web Donc, si vous êtes à l'aise, vous pouvez simplement cliquer sur les préréglages de l'application et passer à autre Mais dans notre cas, allons-y un par un. Passons d'abord aux généralités, il suffit de cliquer sur cette option pour activer IC Cloudserve et vous verrez ce type de fenêtre Vous devez donc vous inscrire ici. Je vais donc m'inscrire auprès de Google. Cliquez sur J'accepte, puis sur Google. Poursuivre. Et ici , il suffit de cliquer sur Terminer le réglage du lien et sur les paramètres généraux, activer le mode Devinette et l'optimisation des invités sera désactivée. Et ici, cliquez sur Vérifier mon adresse IP publique et copiez cette adresse IP. OK, voilà l'adresse IP. Je le copie et le colle ici sur l'adresse IP du serveur, et je vous enverrai la notification. Cliquez ensuite sur Enregistrer les modifications. Et chaque fois que vous apportez des modifications dans le cache Light Speed, il vous suffit de cliquer sur ce perchoir Earl, d'ouvrir votre site Web dans la fenêtre de navigation privée et vérifier que tout fonctionne Et lorsque nous faisons cela, nous pouvons comprendre s'il se casse ou s'il fonctionne bien. OK. Ensuite, nous avons l'onglet cache. Cliquez dessus. Sur le cache, je vais décocher ce cache pour les utilisateurs connectés et cocher le cache mobile, puis les autres éléments seront définis par défaut, puis je cliquerai sur Enregistrer les modifications et consulter le site Web dans la fenêtre de navigation privée Ensuite, sur TTL, conservez le paramètre par défaut. Sur la page, vous pouvez conserver le paramètre par défaut, puis nous avons des exclusions dans des exclusions. Si vous souhaitez avoir une page ou article que vous ne souhaitez pas utiliser dans le cache, vous pouvez simplement ajouter ce chemin de page dans ce format. Nous n'avons donc pas ce genre de problèmes. Passons donc à SIO ESI, conservons le paramètre par défaut, puis nous avons objet par objet, conservons le paramètre par défaut. Ensuite, dans le navigateur, activez le cache du navigateur et cliquez sur Enregistrer les modifications. Ensuite, à l'avance, maintenez l'avance telle qu'elle est dévolue. Toutefois, si vous disposez d'un espace de stockage important, d'un serveur énorme et d'un serveur dédié, vous pouvez utiliser ce clic instantané, qui signifie que lorsque le visiteur survole un lien de page ou un lien de publication, contenu sera préchargé avant que l'utilisateur ne visite cette page Cela nécessitera beaucoup de puissance de serveur. N'utilisez donc toujours ce clic instantané que si vous disposez de cette puissance de serveur. Donc, si vous l'activez et si vous n' avez pas beaucoup de puissance sur votre serveur, cela affectera la vitesse de votre site Web, et votre site Web ne fonctionnera pas en raison de la surcharge de votre serveur. Nous avons donc le CDN. Cliquez dessus. Donc, si vous voulez que le CDN possède ce cloud giveic point, vous pouvez l'activer d'ici, mais je ne vais pas l'utiliser Donc, si Cloudfare est configuré sur votre site Web, vous pouvez l'activer Je vais configurer Cloudfare lors des prochaines leçons, mais pour le moment, je vais le garder comme ça Nous avons maintenant l'optimisation de l'image. Cliquez dessus, et ici, nous pouvons cliquer sur Envoyer une demande d'optimisation et le plugin optimisera automatiquement nos images. Il se peut que nous devions le faire 45 fois. Maintenant, nous disons que vous avez des images qui attendent d'être dupées, attendez que l'outil automatique les termine ou remplissez-les manuellement maintenant Donc pour l'instant, attendons et laissons le temps d'optimiser les images. Ainsi, lorsque vous vous connecterez à votre site Web la prochaine fois, vérifiez l'état de vos images, et si ce n'est pas 100 qui n'a pas été optimisé, cliquez simplement sur envoyer une demande d'optimisation et au fil du temps, 100 seront complètes. D'accord, nous avons maintenant l'optimisation des pages. Avant de procéder à l'optimisation des pages, comme je vous l'ai déjà dit, obtenez une sauvegarde, puis effectuez l'optimisation et vérifiez le site Web indiqué. Donc, lors de l'optimisation des pages, je vais cliquer sur Je vais cliquer sur CSS Minifi et sur CSS Combine et de cela, générer du CSS, puis voir en ligne, puis du CSS combiné externe et interne sera ensuite chargé du CSS manière synchrone sera activé et le CCSS pour l'URL sera activé en ligne, le CSS sera activé et l' optimisation de l'affichage des polices sera activé et l' optimisation de l'affichage des polices Cliquez sur Enregistrer les modifications , puis sur Purger l'ERL, puis accédez à la fenêtre de navigation privée et vérifiez si l'URL fonctionne correctement Le site Web fonctionne donc dans mon cas. OK. Parfois, cela peut endommager le site Web. Donc, si cela se produit, il suffit sélectionner ces éléments un par un et de voir quel est le problème. Et lorsque vous trouvez le problème, désactivez-le simplement. Ensuite, nous avons le réglage JS. Sur les paramètres JS, JS minify sera activé sur JS combiné, sera sur JS combiné externe et en ligne sera activé Ensuite, ou JS Diver changera d'officier et purgera , accédez à la fenêtre Incognitor et fenêtre Incognitor OK, fonctionne bien. Ensuite, nous avons le réglage SDM sur le paramètre SDM, minification du DML sur le DNS, contrôle gratuit des pages sera activé et la suppression de WordPress Imog Cliquez ensuite sur Enregistrer les modifications et testez-le à nouveau. Ensuite, en ce qui concerne les paramètres multimédia, si vous voulez ajouter Lazy Loadimage, il suffit de le faire, mais je le fais et ici, il suffit d' ajouter de la soudure ResponPlace, ce qui signifie que si le chargement de l'image prend du temps, elle affichera un espace réservé et nous pouvons changer Je vais juste conserver la couleur par défaut et créer ce générateur de cloud LQIP et le cadre Lazy Load I sera activé. Les tailles Admion seront activées Et ici, la qualité d'image sera de 82, et ici je vais aussi parler du chargement différé des images, parfois cela peut casser le site Web, cliquez sur Enregistrer les modifications et sur perchoir. Maintenant, testez-le ici et je fonctionne bien, passons à l'étape suivante Je garderai le VPI désactivé et l' image du point de vue Crone sera également désactivée et le support Si vous voulez des images auxquelles vous ne voulez pas ajouter effet de chargement différé ou si vous voulez qu'elles donnent la priorité au processus de chargement, vous pouvez ajouter l'URL ici, mais dans ce cas, je ne vais rien ajouter de tout cela. Maintenant, nous avons la localisation, faisons de Gavita le cas où le cache Vata C sera activé et garderons les autres éléments par défaut, puis nous avons le réglage, cliquez sur Concevoir les modifications, puis maintenons le réglage par défaut et le réglage par défaut et n'apportons aucune modification au Nous avons maintenant une base de données. Sur la base de données, il y a des révisions et d'autres listes que nous n' utilisons plus, il suffit de les vérifier une par une, et si vous pensez qu'il y a des éléments dont vous n'avez pas besoin, cliquez simplement sur Effacer ou vous pouvez simplement cliquer un par un. Dans ce cas, si je veux effacer cela, suffit de cliquer dessus et il les supprimera tous. Donc, si vous n'avez pas besoin d'un autographe, vous pouvez simplement cliquer dessus et effacer la base de données Ensuite, nous avons Crolero Croler, je ne vais rien changer Je vais le définir par défaut, puis nous avons la boîte à outils et je n' utiliserai aucune option sur le oh Maintenant, si je visite le tableau de bord, nous aurons ce type de fenêtre et ici je peux cliquer sur Reps et vérifier le discothèque de vitesse de la page sur ce plugin et nous pouvons voir le chargement de la page à temps Cliquez sur Repress pour vérifier le temps de chargement de la page avant 3,76 secondes et maintenant 1,22 secondes Maintenant, nous pouvons copier l'URL du site Web, accéder à la vitesse de la page, dépasser l'URL et voir le résultat. Maintenant, avez-vous vu ses performances augmenter de 82 % ? Sur les ordinateurs de bureau, elles sont de 79 %, et là, nous avons des problèmes auxquels nous sommes confrontés, mais c'est mieux que nous ? Cependant, en ce qui concerne l'optimisation des images, je ne me souvenais pas que nous convertissions une image normale en Web P, voyons voir, passons à l'optimisation de l' image et à l'optimisation de l'image définies ici, nous devons le faire ici et là créez le format d'image de nouvelle génération en tant que Web P. Ensuite, désactivez-le pour conserver les données EXI XMP de l'image optimisée, tout ira bien Cliquez maintenant sur Enregistrer les modifications et accédez au tableau de bord, puis sur Envoyer l'optimisation. Demandez, cliquez sur Auto Request tron, et allons-y pour que les images soient automatiquement optimisées. OK, maintenant voyons à nouveau votre texte et voyons si quelque chose change. OK, maintenant c'est devenu 90, donc maintenant c'est mieux qu'avant. OK, donc une fois que vous avez optimisé votre site Web, et si vous apportez des modifications ou créez de nouvelles pages, mettez à jour les pages actuelles ou modifiez des images, utilisez toujours les meilleures pratiques, comme si vous ajoutez une nouvelle image, mettez sur le site Web tinyng.com et si vous modifiez la taille du fichier et faites des choses comme ça Et ici, nous avons un onglet COSCO. Nous n'en avons pas besoin car d'autres fonctionnalités ne sont disponibles que pour P, alors je clique sur Fermer puis sur. OK. Maintenant, nous pouvons voir le site Web comme ceci. OK. 158. Meilleure largeur de contenu pour Elementor Pro: Bonjour, tout le monde. J'en viens maintenant à notre design Figma. Et voici le design Figma avec ce 1 440. Et tout au long de la conception du site Web, nous ajoutons également ces 1 440 et lors de la conception du site Web, il s'agrandit Mais si nous allons dans les paramètres du site et que nous passons ici à la mise en page sur la mise en page, il s'agit par exemple du contenu par défaut avec ce 1140 Supprimons celui-ci par défaut qui sera ajouté ici ou nous pouvons simplement l'ajouter comme ceci. Faisons en sorte que le rembourrage droit soit égal à 30, et que le rembourrage gauche soit également Cliquez ensuite sur Concevoir les modifications, et pour votre information, j'utilise simplement la mise en page 1440 comme contenu pour concevoir l'ensemble de ce site Web, mais je me rends compte que ce n'est pas une bonne chose pour la réactivité du site Web Donc, n'en ajoutez pas 1 440 au lieu de vous contenter d'en ajouter 1 140 et de continuer les leçons C'est ce que je veux que vous suiviez toujours à la valeur par défaut. Et si vous avez des questions, n'hésitez pas à me le faire savoir. 159. Règles cruciales d'optimisation de la vitesse et d'hébergement: Dans cette leçon, nous allons aborder l'une des plus grandes plaintes que les gens ont à propos de WordPress et Elementor Le chargement lent est renversé. Maintenant, lançons un mythe majeur dès le départ. La plupart des sites Web d'Elementor ne sont pas lents à cause d' Elementor lui-même Ils sont lents à cause de la façon dont les gens les construisent. Trop de plugins, fichier de conception non optimisé, animation lourde et hébergement de faible qualité À la fin de cette leçon, vous connaîtrez le système exact, étape par étape, pour transformer n'importe quel Elementor surdimensionné en rapide en ruche Commençons par optimiser. Voici notre design Figma et je pense que je veux ajouter cette image Pour l'ajouter, je peux sélectionner l'image et l'exporter comme ça. Notre image a été exportée. Et ce que font la plupart des débutants et des créateurs de sites Web bricoleurs, c'est télécharger directement cette image sur le site Web. C'est le tueur numéro un dans le domaine des sites Web. Vous devez optimiser les images avant de les utiliser. Voici donc exactement le flux de travail d'image professionnel que vous devez suivre. Tout d'abord, nous pouvons l'exécuter via un outil de compression gratuit tel que Tiny PNG. Je suis sur Tiny PNG. Je vais juste signaler et corder cette image comme ceci. Tu as vu ? La taille de l'image d'origine était de 557 kilo-octets. Mais notre version optimisée ne fait que 87 kilo-octets, et si nous la téléchargeons et vérifions la qualité, voici la version optimisée, voici la version optimisée, ainsi que l' image non optimisée, et c'est l' image non optimisée, et Vous pouvez voir que nous avons la même qualité d'image. Le deuxième problème rencontré par la plupart des débutants est qu'ils téléchargent simplement des images sans regarder les dimensions de la mise en page. Si votre conteneur ne contient que 200 correctifs, ne téléchargez pas d'image blanche de 4 000 pixels. Conservez l' échelle maximale de vos images de bureau standard de 1200 à 1600 pixels Ce que font la plupart des débutants, c'est simplement télécharger l'image ici et l'utiliser directement. Mais si vous vérifiez la taille du fichier et les dimensions de cette image, elles sont bien trop élevées. Ce que vous devez faire, c'est modifier les dimensions. La prochaine chose à considérer est convertir nos images au format webb, mais nous n'avons pas besoin de convertir nos ressources une par une Nous pouvons utiliser un plugin Wordless pour ce faire. Nous pouvons donc télécharger notre image par défaut, comme JPG ou PNG, et installer un optimiseur d'image fiable Passons donc au plugin et cliquez sur Au plugin. Et ici, cherchons le plugin appelé Ewww image optimizer et ce plugin convertira automatiquement nos images au format Web Je vais l'installer. Vous pouvez également utiliser un plugin comme un convertisseur pour les médias. Dans ce cas, je vais utiliser ce plugin. Après l'avoir installé, je vais procéder à l'installation, et nous pouvons suivre cela ici. Ici, disons accélérer notre site Web et je vais m'en tenir à la gratuité, je vais décocher la suppression des métadonnées et le chargement différé et vérifier les conversions Web P, puis nos fichiers seront automatiquement convertis en Web P. De plus, ici, j'ajouterai 1920 et Max en tant que 1920 Donc, ce qui s' est passé ici, c'est que si quelqu'un ou votre client télécharge une image de 4 000 images fixes, elle sera réduite à cette taille grâce à ce plugin et la sauvegarde de l'image sera locale, puis vous pourrez cliquer sur Enregistrer les paramètres C'est bon, tu as terminé. Parlons ensuite de la mise en cache. Au lieu de concentrer WordPress sur la création complète de vos pages à partir de zéro chaque fois qu'un visiteur clique sur un lien, le serveur prend un instantané statique de votre page et affiche instantanément cette version enregistrée. Le temps de chargement de cette radio est significatif. Si vous hébergez une infrastructure Safa Acid, je vous recommande vivement d'utiliser le plugin gratuit de mise en cache de la vitesse de la lumière Si vous utilisez un serveur Apache ou un serveur d'ingénierie standard, plugins premium tels que WV Rocket sont fantastiques Pour les débutants, vous n'avez pas besoin de trop compliquer les choses ou de cocher toutes les cases Activez simplement les bases de base, mise en cache des pages et la mise en cache du navigateur Il suffit d'activer ces deux co-paramètres pour que votre site Elementor soit instantanément dynamique. Parlons maintenant de quelque chose que la plupart des gens ignorent complètement. Plug-in en gras. Chaque plugin que vous activez ajoute un script supplémentaire et le met en forme dans l'en-tête de votre page. Le code signifie plus de demandes de télévision numérique, qui enregistrent directement votre chargement à temps. Voici une règle d'or stricte pour votre projet de conception Web. Si vous n'utilisez pas activement un plugin, supprimez-le complètement. Plus important encore, si Elementor peut déjà le faire négativement, n'installez pas de plugin distinct pour cela Ne surchargez pas votre site avec quelques informations avancées sur Elementor provenant de tiers Elementor provenant de tiers juste pour utiliser un seul widget Limitez votre configuration au minimum. Un backend propre est toujours synonyme plaisir rapide. Regardons l'intérieur de l'éditeur Elementor lui-même Ici, certains ont l'air géniaux, mais ils sont incroyablement lourds en termes de rendu sur le navigateur. Je parle de sliders de page d'accueil massifs. Je garde des curseurs Cier, et ici nous avons des carrousel Riders qui, fournis par le plugin premium Advanced, seront plus lourds sur le site De plus, les vidéos d'arrière-plan et les nombreuses animations de traces affecteront gravement la vitesse de chargement de votre site Web. Rappelez-vous toujours que les arrière-plans vidéo lourds enveloppent complètement les utilisateurs mobiles lors de connexions plus lentes. Optez plutôt pour des choix de conception intelligents et performants. Remplacez ce curseur lourd par une section de héros statique audacieuse Remplacez l'effet de mouvement complexe exaltant par les états de survol CSS natifs et épurés. N'oubliez pas que vous concevez pour votre look. Mais il doit absolument se charger rapidement ou permettre aux utilisateurs de rester sur la page. Cela nous amène aux flacons Web de base. La véritable matrice de performance que Google a utilisée pour classer votre site Web, ne vous inquiétez pas. Nous n'allons pas nous enliser dans un jargon technique approfondi Il vous suffit de suivre trois choses principales. Le premier est le LCP ou peinture complète au contenu le plus important. Cela mesure simplement la vitesse à laquelle votre alimentation principale au-dessus du défaut contient de la crème. Le second est le CLS ou le cumul des couches. Cela permet de suivre la stabilité visuelle. Vous devez vous assurer que vos éléments de mise en page ne sautent pas violemment pendant le rendu de la page Et le troisième est l'INP ou l'interaction avec la peinture suivante. Cela permet de mesurer la réactivité. À quelle vitesse le site réagit-il lorsque vous utilisez un menu ou un bouton ? Voici votre raccourci. Si vous suivez les étapes que nous allons aborder en ce moment, optimisant vos images, en supprimant les plugins inutiles et en créant des mises en page propres, vous activerez automatiquement les trois matrices sans trop réfléchir aux données techniques Maintenant, soyons totalement réalistes. Vous pouvez avoir l' Elementor le plus optimisé, le plus beau et le plus propre au monde. Mais si vous l'hébergez sur un hébergement mutualisé Chief Loa Tier, il se chargera quand même comme une tortue lente Si vous voulez vraiment créer sites Web de manière professionnelle pour vos clients, vous avez besoin d'une infrastructure décente. Optez pour des environnements d'hébergement basés sur des serveurs ultrarapides. En outre, ils doivent avoir de solides records de disponibilité et des centres de données situés à proximité de votre public cible réel Pour aider votre serveur, WordPress et Elementor utilisent par défaut des fonctionnalités appelées « lazy loading Cela garantit que les images situées plus bas sur la page ne chargent que la fraction de seconde exacte pendant laquelle l'utilisateur fait défiler la page. Maintenir le lancement de la page initiale incroyablement rapide. Assurez-vous simplement de laisser cette fonctionnalité active. Examinons l'impact dans le monde réel. Avant l'optimisation, les sites Web traînent souvent raison de l'énorme quantité de messages multimédias et de l'encombrement des scripts Mais après avoir appliqué cette liste de contrôle, le temps de chargement a été réduit de moitié Votre expérience utilisateur devient totalement fluide et vos taux de conversion augmentent. L'optimisation de la vitesse consiste à rechercher une magie unique. Il s'agit de combiner une petite habitude intentionnelle, ressources multimédias propres, une utilisation minimale des plugins, règles de mise en cache solides et une conception de mise en page performante Si vous mettez en œuvre ne serait-ce que la moitié de la stratégie que nous avons définie aujourd'hui, les sites de vos clients se sentiront nettement plus rapides OK, c'est ça. Suivez ces étapes pour obtenir le meilleur résultat. 160. 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.