Conception de portfolio universel : du modèle Figma au site WordPress en direct avec Elementor Pro

1. Bienvenue sur Figma pour WordPress : créer un portfolio universel avec un cours Elementor Pro: Bonjour, tout le monde. Bienvenue sur Universal Portfolio Website Design with Element of Pro, un cours où vous apprendrez à créer un magnifique site Web de portfolio professionnel sans écrire une seule ligne de code. Nous allons commencer par créer un compte Figma et ouvrir notre dossier de conception Vous apprendrez à modifier du texte, à échanger des images et à choisir de nouvelles couleurs en fonction de votre style personnel. Ensuite, nous allons passer à un domaine et configurer l' hébergement de votre site est en ligne et prêt à être partagé avec le monde entier. Ensuite vient la partie amusante nous installerons WordPress, Element Free et Elemento Pro et commencerons à recréer votre design Figma à l'aide de simples outils traganrof, aucun codage n'est nécessaire, mais Vous apprendrez également comment accélérer votre site à la page SCO afin que Google puisse vous trouver et connecter Google Analytics pour voir qui visite et sur quoi ils cliquent. Salut, je suis Akalanka, une web designer du Sri Lanka. Ma passion est de partager mes connaissances. J'ai rendu ce cours super convivial pour les débutants. Même si vous n'utilisez jamais Figma ou Wordpress auparavant, je vous guiderai à chaque étape Ce cours est parfait pour les débutants curieux de connaître freelances d' Elementp et les créatifs qui veulent un Quelqu'un est-il prêt à transformer son design Figma en un site Web fonctionnel ? À la fin de ce cours, vous aurez un site Web de portfolio entièrement fonctionnel, prêt à utiliser le SCO conçu par vos soins et construit en toute confiance, prêt à commencer les soins intensifs dans le cadre du cours 2. Introduction aux outils que nous utilisons : Avantages, Inconvénients et Alternatives: Dans ce cours, nous utiliserons principalement trois outils : Figma, verpus et elemento P. Jetons un coup d' œil à chaque Il y a des avantages et des inconvénients et quelques alternatives. Vous savez donc exactement avec quoi vous travaillez. Tout d'abord, Figma. Figma est notre outil de design. C'est là que nous créerons la mise en page et le style visuel de votre portfolio. Avant d' en faire un véritable site Web. Parlons de prose. Pigma s'exécute dans votre navigateur. Il n'est pas nécessaire de télécharger ou d'installer quoi que ce soit. C'est gratuit pour les utilisateurs individuels. Vous pouvez modifier vos designs en direct avec d'autres personnes. Ainsi, si vous travaillez avec un client ou un coéquipier, il peut vous suggérer des modifications ou encore plus d'éléments en temps réel Il est également doté de fonctionnalités pratiques telles que des composants de mise en page automatique et des bibliothèques partagées qui rendent conception efficace, même pour les débutants. Voici quelques inconvénients. L'interface peut être un peu encombrante au début. Il y a beaucoup de bannières et deux étudiants Comme il est entièrement basé sur le cloud, vous aurez besoin d'une connexion Internet stable pour fonctionner correctement. Comme alternative, il existe des outils comme AdovXD et Ikech. Vous pouvez également utiliser CanMA. C'est une option adaptée aux débutants, mais elle comporte de nombreuses limites. Ensuite, nous utiliserons WordPress. WordPress est notre plate-forme de site Web, la base sur laquelle repose votre site. C'est l'une des plateformes les plus populaires au monde. Utilisé par plus de 40 % des sites Web. Parlons des pros. C'est open source et gratuit. Vous avez le contrôle total de votre site Web, de la conception au SCO en passant par les performances. Vous pouvez installer des plug-ins pour ajouter presque toutes les fonctionnalités imaginables. Et c'est convivial pour les débutants, surtout lorsque vous l'associez à un constructeur visuel comme Elemento Maintenant, voici quelques inconvénients. Vous devrez acheter un domaine et un hébergement pour faire vivre votre site. Il nécessite des mises à jour et des sauvegardes régulières pour assurer le bon fonctionnement. Et bien qu'il soit flexible, configuration peut sembler technique au début. Alternative à Wordpress Wix et Square Space constructeurs de sites Web Earl in one sont plus faciles à utiliser, mais offrent moins de contrôle Webflow vous donne une plus grande liberté de conception. De plus, pour un site Web simple, le framer est un autre meilleur choix Le dernier élément de pro element of pro est notre constructeur de pages. L'outil qui vous permet de transformer ce design de port VoluFigma en un site Web Word entièrement fonctionnel Parlons des pros. C'est extrêmement convivial pour les débutants. Aucun code n'est nécessaire, juste Dragon Row. Vous aurez le contrôle total de la conception chaque partie de votre site, y compris l'affichage mobile. Elementor Pro inclut des widgets avancés tels que des formulaires, des sliders, un intervalle de prix, des témoignages, etc. Avec le team builder, vous pouvez concevoir visuellement la structure complète de votre site, les en-têtes, les pieds de page et les modèles de blocs. Element of Pro est un plug-in pour tablette, il n'est donc pas gratuit. De plus, si vous décidez de passer à un autre générateur ultérieurement, votre conception ne sera pas transférée, vous devrez la reconstruire et même s'il est facile à utiliser, vous devrez tout de même passer du temps à apprendre l' interface et les pratiques de base. Parlons maintenant de quelques alternatives. Il existe des constructeurs comme Prix Builder, Brave Builder, DV Oxygen Non seulement cela, nous avons éditeur par défaut de Wordpress, Gutenberg Dans la leçon suivante, plongeons-nous dans le monde du design. 3. Créez 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. Si ce n'est pas le cas, cliquez sur le bouton «   Commencer gratuitement » et ici, cliquez sur. Continuez avec Google pour vous inscrire avec votre compte Gmail. OK, maintenant je vais cliquer sur mon compte Gmail et cliquer 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 Design. Cliquez ensuite sur Continuer. Ensuite, il est dit : « Faites en sorte que l'une ou l'autre de ces descriptions décrive votre travail ». Ici, je vais sélectionner le freelance et vous le sélectionnez en fonction de votre position, puis je clique sur Continuer Ensuite, nous avons une autre question comme : 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 un autre, puis cliquer sur Continuer. Ici, avez-vous déjà utilisé un produit IgM, je l'ajouterai plusieurs fois Si vous ne connaissez pas l'IgM, cliquez simplement sur puis sur Continuer Ensuite, je sélectionnerai ce package de démarrage. Dans les prochaines leçons, j'expliquerai les avantages de l' abonnement à une page de Figma Cependant, nous pouvons suivre toutes ces leçons avec le forfait gratuit. Je clique sur Continuer et ici, je vais cliquer sur Eskep. Voici le tableau de bord Figma Tous nos projets seront chargés ici. premier temps, créons un nouveau fichier Figma pour que 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 4. Guide de Figma : exploration de l'interface: Bonjour à tous. Nous avons ici le fichier Figma du portfolio universel Il suffit de cliquer sur ce bouton d'ouverture de Figma pour créer une copie de notre fichier Figma Si nous vérifions le fichier Figma, nous avons ici la version féminine du portfolio et la version masculine du portfolio Cliquez sur la version féminine et cliquez sur ce bouton de lecture pour l' ouvrir dans un nouveau tag. Voici donc l'aperçu, et voyez, puis je clique sur le cadre suivant, et voici la version masculine du site Web du portfolio. Et pas seulement cela, nous avons ici l'instigat Istigaset est l' endroit qui définit les couleurs et la police de ce site Web de portfolio Je vais maintenant vous montrer comment changer les couleurs de police, le texte et les images. Commençons par les couleurs. Pensez que si vous n' aimez pas cette couleur ou si vous avez un secteur d'activité différent ou si vous envisagez de concevoir un vaste site Web sur la polio pour un coach relationnel, dans ce cas, cette couleur ne conviendra pas. La couleur appropriée sera le rose, le noir et le blanc. Changeons donc les couleurs. Pour changer les couleurs, il n'est pas nécessaire de passer en revue chaque élément. Ici, nous pouvons sélectionner cet élément de couleur de la palette de couleurs. Ensuite, vous verrez cette couleur de champ et cliquez sur la couleur principale, et ici vous verrez l'icône d'édition, cliquez dessus, puis cliquez ici sous la propriété. Ensuite, vous pouvez ajouter le code couleur ici. Je vais donc ajouter un code couleur comme le hashtag FF 200. La couleur prendra cette couleur orange. Et si on le vérifie sur le design, ici, tout passe à la couleur orange. Vous voyez, parce que dans Figma, nous définissons ce code couleur comme variable de couleur primaire ou comme couleur primaire est le carreau Lorsque nous le modifierons à un endroit, cela affectera tous les cadres. Et maintenant, changeons cette couleur en foie et en couleur. Cliquez ici et faisons-en site Web de coach relationnel. Ajoutons donc de la couleur rose. Couleur comme ça. OK, maintenant tout passe à la couleur rose, puis nous devons changer le texte. Le texte des deux cadres est donc modifiable, ce qui signifie que nous pouvons simplement double-cliquer sur le texte et le modifier Modifiez-le simplement comme un point Zugim comme celui-ci. Donc, à certains endroits, si nous double-cliquons simplement sur le texte, texte ne sera pas modifié si cela se produit sur Mac, vous pouvez appuyer sur commande et double-cliquer sur le texte comme ceci. Donc, ici, j'appuie sur la commande et je double-clique comme ça, et si vous utilisez Windows, vous pouvez appuyer sur Ctrl et double-cliquer. Vous pouvez ensuite modifier ces textes comme vous le souhaitez. C'est ainsi que nous pouvons modifier le texte, peu importe l'endroit, vous pouvez simplement le modifier comme ceci. Et cela aura une incidence sur le design, mais si le texte change le design de cette façon, dans ce cas, cette section est plus petite. Donc dans ce cas, nous devons ajouter une ligne et en faire une ligne comme celle-ci Ensuite, nous devons attacher les images. Pour ce faire, nous pouvons simplement sélectionner l'image comme nous l'avons fait auparavant. Si ce n'est pas le cas, nous cliquons lorsque nous double-cliquons, nous pouvons appuyer sur Commande ou maintenir la touche Commande ou Contrôle enfoncée. Nous pouvons appuyer sur Commande sur Mac et Ctrl sur Windows, et cela sélectionnera. Ensuite, dans le remplissage, nous avons la section image, il suffit de la sélectionner, et maintenant nous pouvons cliquer sur ce bouton de téléchargement depuis un ordinateur pour ouvrir le navigateur de fichiers. OK, ici je vais juste sélectionner une image. Sélectionnez celui-ci et il sera ajouté. Donc, lorsque nous l'ajouterons, il ressemblera à ceci. Donc, ce que nous pouvons faire, c'est une récolte pour le moment. Nous devrions le faire comme il convient. Ensuite, nous pouvons augmenter ce design en appuyant sur la commande tout en utilisant la molette de la souris pour augmenter la taille de cette manière ou, sous Windows, en touche Ctrl et la molette de la souris. Ensuite, ce que nous pouvons faire, c'est cliquer ici et le définir comme recadrage par tâche. Ensuite, ici, vous pouvez le modifier quand vous le souhaitez, donc je vais simplement l'ajouter comme ça et ici je peux simplement l'augmenter. Vous agrandissez l'image, vous devez appuyer sur Shift. Si vous n'appuyez pas sur la touche Shift, elle sera ajustée sans. Cela nuira à l' apparence de l'image. Appuyez donc toujours sur Shift et ajustez-le comme suit. Ajustons comme ça et disons-le comme ça. OK. Maintenant, il suffit de changer la première image et ici, changeons également cette image, sélectionnons-la. Vous pouvez donc voir ici l'image que nous avons sélectionnée, et ici, cliquez sur l'image, vous double-cliquerez sur l'image. Ensuite, nous pouvons cliquer sur l'image et cliquer sur télécharger depuis un ordinateur. Et ici, ajoutons cette image. Maintenant, nous devons modifier cela pour l'adapter, puis augmenter la section, puis recadrer et ne pas sélectionner les coins bleus, sélectionner l'image, et voici la fin de la feuille de presse sur l'image et ajuster en conséquence comme ceci. Ainsi, nous pouvons modifier les images. Ici, nous pouvons faire le même faux pas et modifier les images, et pour le fond, nous pouvons également le modifier Actuellement, je n' ai pas d'image de fond. Cependant, je vais simplement sélectionner l'arrière-plan, et nous avons ici la propriété de couleur blanche de l'image sur le terrain. Nous devons donc ici changer cette image. Cliquez sur l'image, cliquez sur Télécharger depuis un ordinateur et sélectionnons simplement celle-ci. Maintenant, nous devons le faire comme ajuster, puis recadrer. Je ne pense pas que cette image conviendra ici, puis appuyer sur Shift et D comme ça. Ensuite, nous pouvons l'ajuster comme bon nous semble, pour qu'il ressemble à ceci. Et maintenant, si nous sélectionnons le cadre du polo et que nous cliquons sur l'icône d'affichage, nous pouvons voir les modifications que nous avons apportées comme ceci. OK, c'est assez simple. Cette méthode vous permet de modifier le texte, images et les détails de ces cadres. Et je suis toujours en phase de développement du fichier. Une fois que je l'aurai complètement conçu, je renommerai ces cadres comme here, hero et ici nous pourrons ajouter un menu. Je les changerai comme ça. Ainsi, vous pourrez facilement comprendre les sections sur lesquelles vous travaillez actuellement. De plus, si vous avez une exigence de conception de site Web de portfolio pour une personne de sexe masculin, vous pouvez non seulement l'utiliser, vous avez maintenant une compréhension de base de Figma, ce qui signifie que vous pouvez créer vos propres sections Par exemple, ici, nous n'avons pas de section pour la galerie, vous pouvez donc créer votre propre galerie. Je vous verrai donc dans la prochaine leçon. 5. Créer un sous-domaine: Bonjour, tout le monde. Je suis maintenant sur notre site Web de portfolio universel Figma Design Vous pouvez consulter ce lien dans la section des ressources. Nous avons donc ici deux modèles de portfolio. Le premier est pour la version féminine, et le second pour la version masculine. Je vais donc utiliser cette version du portfolio féminin pour concevoir notre site Web. Nous allons donc concevoir un site Web pour Hannah Clark. Pour ce faire, nous avons besoin d' un hôte dans et d'un domaine. D'accord, si vous envisagez d'acheter un nouveau domaine et de l'héberger, vous pouvez ignorer cette leçon et passer à la leçon suivante Dans la leçon suivante, je vais vous montrer comment acheter un domaine et un serveur d'hébergement. Toutefois, si vous possédez déjà un domaine et un serveur d'hébergement, dans cette leçon, je vais vous montrer comment créer un sous-domaine et héberger notre site Web sur un sous-domaine Commençons donc. Maintenant, je suis sur le panneau C de mon fournisseur d'hébergement, j'utilise donc Name cheep comme fournisseur d'hébergement Donc ici, je passe à la section des domaines. Dans la section des domaines, il suffit de cliquer sur les domaines. Maintenant, ici, je peux voir tous les domaines que je possède actuellement. Je vais utiliser ce domaine de conception de site web personnalisé .us pour créer un sous-domaine Donc, pour créer un sous-domaine, il suffit de cliquer sur Created Domain Maintenant, je vais entrer le nom du sous-domaine. Dans mon cas, il s'agira de site Web personnalisée conception de site Web personnalisée aux États-Unis, car lorsque nous créons un sous-domaine, nous devons sélectionner le domaine principal Je copie donc simplement le domaine américain de conception de site Web personnalisé, et ici j'ajoute simplement le point Hanna et je mets le sous-domaine en phase , car notre Psonas ou le nom du coach d'affaires OK. Maintenant, lorsque je tape le nom de domaine, vous pouvez voir que nous avons un nom racine du document comme nom de sous-domaine Et ici, nous avons partagé la racine du document et il contient la partie fichier dans le SDML public Donc, si je prends ces documents partagés à la racine, conception de sites Web personnalisés Hanad fichiers américains de conception de sites Web personnalisés Hanad s'adapteront au DML public, mais nous n'en avons pas besoin, donc je ne vais pas le vérifier Ainsi, avec les paramètres, personnalisé Design.us du site Web Hanadt sera créé dans le dossier SDML public Lorsque je passe le curseur sur l'icône d'accueil, vous pouvez voir le répertoire de documents dans lequel nous allons créer ce dossier Maintenant, je clique sur le bouton Soumettre. OK, maintenant nos sous-domaines ont été créés avec succès, et si nous cliquons sur ce chemin de dossier, le gestionnaire de fichiers s'ouvrira et si nous cliquons sur ce sous-domaine, aperçu du domaine s'ouvrira, mais actuellement il contient un message et nous devons attendre 20 à 30 minutes pour que le DNS soit correctement configuré En attendant, créons un dossier appelé test point TML sur notre nouveau sous-domaine Et cliquons là, cliquez sur Modifier et modifiez-le. Ensuite, ajoutons du texte comme s'il s'agissait d'un sous-domaine. Faisons en sorte que ce soit Hello. Il s'agit d'un sous-domaine. Alors maintenant, je clique sur Concevoir les modifications, et essayons de le redéfinir. En fait, quand je le repasse, rien ne se voit. Attendons donc 20 minutes et je verrai après. OK, j'ai attendu environ 20 minutes, et maintenant voici l'apparence du site Web lorsque nous le visitons. Voici donc le fichier HTML à points de texte que nous avons créé. Lorsque nous cliquons sur cont, nous pouvons voir notre message Bonjour, il s'agit d'un sous-domaine, texte que nous ajoutons 6. Acheter un domaine et un hébergement: Bonjour à tous. 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 Commander 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. C'est également très important 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, comme si nous allions 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. Peu importe le type de domaine ou de fournisseur d'hébergement que vous choisissez. 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. OK, 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. 7. Installez WordPress sur votre hébergement: Bonjour, tout le monde. Nous devons maintenant installer WordPress sur notre site Web. Pour ce faire, je vais passer au panneau C. Dans le panneau C, vous verrez Softaguls App Installer sur Il me suffit donc de cliquer dessus. Lorsque je clique dessus, je suis redirigé vers cette page, et ici, je clique sur Installer sur WordPress Lorsque je clique sur Installer, sur Choisir l'URL d'installation, je la sélectionne comme hana point custom Web Design, États-Unis, puis je n'ajouterai aucun répertoire, et nous sélectionnerons la dernière version comme version WordPress Et en plus du réglage, nous pouvons ajouter le nom du site et la description du site. Mais pour l'instant, je ne vais en ajouter aucun, et sur le compte administrateur, nous devons ajouter le nom d'utilisateur administrateur et le mot de passe administrateur. Et voici le plug-in, je vais désélectionner l'un d'entre eux, et je les ajouterai plus tard. Si tu veux, tu peux les garder. Donc, j'administre le compte sur le nom d'utilisateur de l'administrateur, je vais juste ajouter le nom d'utilisateur. Cela peut être Hannah ou Admin Hanna ou quelque chose comme ça. J'ajouterai simplement Admin, puis sur le mot de passe administrateur, je générerai un mot de passe et je m'en souviendrai toujours, en utilisant un nom et un mot de passe Il vous faudra vous connecter au site Web. Ensuite, sur le courrier électronique de l'administrateur, j'ajouterai un e-mail d'administrateur comme celui-ci. Après cela, je clique simplement sur le bouton Installer. Maintenant, il faut commencer l'installation. Maintenant, nous avons le site Web installé par Wordpress. Donc, si je clique sur celui-ci, je peux accéder au Backend et nous pouvons simplement accéder au Backend en utilisant la barre oblique WB Admin de notre site Web D'accord, nous avons installé Wordpress avec succès 8. Tableau de bord WordPress propre: Bonjour à tous. Nous devons maintenant nettoyer notre tableau de bord WordPress. Commençons donc par le haut. À partir de là, nous avons ces options d'écran. suffit de cliquer dessus, et c'est là que je peux supprimer les éléments d'écran de ce tableau de bord. Je vais donc tous les supprimer car je n'en ai pas besoin pour le moment. Alors maintenant, je vais cliquer sur cette option d'écran pour la masquer. Et maintenant, nous avons un tableau de bord clair. Alors passons à Earl Post. Dans ErlPost, nous avons ce post sur Hello World. Je vais cliquer sur TASH et l' envoyer dans la corbeille. Ensuite, je vais sur TaSH et je clique sur Supprimer définitivement. Maintenant, pour les catégories, nous n'avons pas de catégories, nous n'avons que cette catégorie par défaut et pour la médiathèque, voyons voir, nous n'avons pas de médiathèque, puis je clique sur les pages R sur les pages ER, nous n'avons pas besoin de cet exemple de page ou de cette page de politique de confidentialité. Il suffit donc de les supprimer tous les deux. Ensuite, dans la corbeille, cliquez sur Supprimer définitivement et ici, cliquez sur Supprimer définitivement. Ensuite, sur les commandes, voyons voir, nous n'avons aucune commande et sur l'apparence, cliquez dessus. Sur les thèmes, nous avons trois thèmes, mais nous allons utiliser Elementor pro pour concevoir ce site Web, nous allons donc installer Hello Elementor Them Pour l'instant, Earl va désactiver ou désactiver le thème. Nous n'avons pas besoin de celui-ci non plus. À l'avenir, nous installerons le thème Halo Elemental. Pour l'instant, gardons-le comme thème principal ou voici le thème actif. Sur les plugins, clicon install plug in et ici nous n'avons pas besoin de ce chisme ou de ces plugins hedoly Donc Radio, je vous ai dit que j'utilise le nom Jeep dans le nom Jeep, cache Light Speed est automatiquement installé. Pour le moment, je vais le garder comme ça. Mais dans votre cas, si vous ne voyez pas le cache Light Speed, ne vous inquiétez pas. Dans les prochaines leçons, nous apprendrons comment installer et configurer plugin Light Speed Cache pour améliorer la vitesse de notre site Web et la mise en cache. OK, maintenant, en ce qui concerne les utilisateurs ou les utilisateurs, il n'y a que mon compte utilisateur. Nous avons maintenant un site Web propre. Donc, si nous passons au tableau de bord, et que nous avons ici un nouveau site Web mondial, et dans la leçon suivante, commençons à concevoir. 9. Procédure pas à pas sur 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. Donc, d'abord, je vais me déconnecter juste ici et cliquer sur Déconnexion Et pour vous connecter au site Web WordPress, nous pouvons ajouter une barre oblique après l'URL du site Web et sur wp admin comme ceci 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 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 par-dessus la nouvelle, puis 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 le survole et je clique sur cet administrateur. OK, nous avons ici les détails de votre profil personnel. À partir de là, nous pouvons changer la couleur d'administration. Ainsi, par exemple, si je sélectionne cette couleur, elle changera comme ça 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. Actuellement, notre site Web est à 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 cliquons sur Ad NW Et ici, nous pouvons ajouter le titre comme celui-ci et ici nous pouvons ajouter des détails et nous pouvons cliquer sur Publier. 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, ne passons en revue que les choses. 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 je peux voir les plugins ici puis si je recherche ici élément ou présentateur et cet élément ou présentateur et cet élément plugin de création de site Web est apparu, et ici il est écrit, et ici il est écrit, mis à jour pour la dernière fois il y a une semaine et il est compatible avec la version de notre site Web WordPress. Il est écrit design elemento.com, et nous pouvons simplement cliquer sur Installer maintenant et installer le plugin, puis l'activer, et cette section du plugin installé apparaîtra cette section du plugin installé apparaîtra À partir de là, nous pouvons cliquer sur ce plugin de téléchargement, et si nous le téléchargeons 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, etc. 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. 10. Installation d'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 widgets pré et pro et 86 projets, mais avec le plan essentiel, nous n'avons que 57 projets Comme si nous allions à la section marketing et commerce électronique, avec le plan solo avancé, nous obtiendrons le 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 accéder 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 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 Ad NE. Tout d'abord, nous devons installer le plugin elemento pre. À partir de là, je vais rechercher Elemento. Ensuite, nous avons le plugin de création de site Web Elementor. Il est développé par elemento.com, et il est compatible avec notre version Wordpress Je clique sur Installer maintenant. OK. Puis je clique sur Activer. C'est bon. Maintenant, je clique sur Ignorer et je vais sauter ces étapes ou je vais cliquer sur ce bouton Fermer car nous allons configurer Elementor Pro en utilisant le site Web d'Elementor Encore une fois, cliquez sur l'URL de la section des ressources et vous serez redirigé vers cette page. À partir de là, je cliquerai sur le bouton À l'heure actuelle sur le site Web Advance solo , sur le plan Builder, et ici je devrai renseigner les détails. Ensuite, je cliquerai sur payer maintenant et j'effectuerai le paiement. Une fois inscrit, vous pouvez le télécharger ici en cliquant sur ce bouton de téléchargement, ou vous pouvez accéder au bord Elementor en ajoutant mid elemento.com Et lorsque vous faites cela, vous verrez ce type d'icône de téléchargement, puis vous verrez élément se connecter à Download, cliquez dessus, téléchargement démarrera et vous avez maintenant le plugin element. Passons maintenant à notre site Web. Après l'avoir téléchargé, je vais dans les plugins et je clique sur Ad Plugin. Et ici, je peux cliquer sur Télécharger le plugin et cocher ici pour obtenir le bundle dans lequel téléchargeons le cFle Dragon Rob fichier C que nous obtenons sur le site Web d' Elementor Cliquez ensuite sur Installer maintenant, puis sur Active plug. OK. Maintenant, nous pouvons voir la section Elemento Plug in, et si vous voyez ce type de message, cliquez simplement sur Connecter et activer, puis sur Connecter et activer OK. Maintenant, si nous passons à la licence, statut est actif. Maintenant, nous pouvons utiliser la fonctionnalité Elemento Pro sur notre site Web et nous pouvons facilement concevoir ce portfolio universel sur notre site Web Elementor 11. Présentation de l'éditeur Elementor: Bonjour, tout le monde. 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 les tests. 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 G 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 permettez-moi d'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 12. Configurer les couleurs globales dans Elementor: Bonjour à tous. Maintenant, nous devons installer le thème pour le faire par-dessus l' apparence et cliquer sur le thème. Et ici, cliquez dessus et recherchez ici Hello elemento Voici le thème Hello Elementor, cliquez dessus, et lorsque vous cliquez sur cont, vous pouvez voir hello elementor Cliquez maintenant sur Installer. Cliquez sur activer OK, maintenant c'est activé, puis je clique sur ce thème 2025 et je clique sur Supprimer car nous n'avons pas besoin de ce thème et c'est sympa. Nous devons maintenant configurer le réglage latéral. Pour ce faire, je vais d'abord aller sur les pages et cliquer sur les pages. Et ici, nous avons la page par défaut Je vais donc cliquer sur Corbeille parce que nous n'avons pas besoin de cet élément ou de dix pages, puis aller dans la corbeille et supprimer en cliquant sur Supprimer définitivement , puis je clique sur la page et maintenant je vais créer la page d'accueil. Ici, je vais ajouter le titre comme page d'accueil, puis je clique sur Modifier avec elemento Lorsque je clique sur Modifier avec Elementor, cela ouvre le canevas Elementor et à partir de là, nous pouvons concevoir le site Web et la mise en page, nous pouvons modifier la mise en page dans le titre ajouter un exercice dans les prochaines leçons, je vous montrerai comment ajouter des extraits et comment classer notre page d'accueil sur un moteur de recherche Donc pour l'instant, configurons les paramètres du site pour ce faire, je vais cliquer sur l'icône des paramètres du site, et ici nous pouvons ajouter des couleurs globales et une police globale. Donc, si nous allons sur notre site Web Universal Dfolio, nous avons une feuille Itca Dans cette fiche Ita, nous avons les couleurs. Par exemple, il s'agit de la couleur principale, la couleur du texte et de la couleur blanche des couleurs secondaires. Ajoutons donc ces détails. Pour ajouter ces détails, je vais aller sur le site Web et cliquer d'abord sur cette couleur globale, nous avons les couleurs du système. Changeons les couleurs du système. Tout d'abord, nous avons le primaire. Trouvons la couleur primaire. Pour ce faire, je clique sur cette première couleur et je clique ici, puis je clique sur cette icône de style Modifier en T, je copie cette propriété de couleur clique ici puis je la colle comme ça. Le nom sera de couleur primaire , puis nous aurons cette couleur de texte. Cliquez ici, cliquez sur cet EditTStyle et copiez la couleur puis sur le texte, collez le code couleur et couleur du texte, changez ce titre en couleur de texte, et nous avons alors cette couleur blanche Nous pouvons faire de même pour celui-ci. Ce sera une couleur secondaire et collez la couleur comme ceci. En fait, nous devons ajouter un hashtag devant la couleur. OK. Ensuite, nous avons cette couleur d'accent, mais dans ce cas, nous avons cette couleur ho Her. Pour copier le code couleur Her, nous devons créer un rectangle comme celui-ci, puis cliquer ici, puis sélectionner la couleur OA, et maintenant nous pouvons cliquer sur la variable détacher La raison en est que nous utilisons actuellement cette couleur cho uniquement dans ce cube de couleurs. Donc, si nous la détachons simplement, la variable sera supprimée. Alors maintenant, je peux copier le code couleur d' ici et venir ici et placer le code couleur comme ceci. Alors voilà, créons cette couleur puissante. OK. Nous avons maintenant les codes couleur Earl. Maintenant, je clique sur Enregistrer les modifications. Ensuite, je vais supprimer celui-ci. Ensuite, je vais revenir en arrière, cliquer sur Enregistrer, et maintenant nous pouvons cliquer ici pour ajouter la police. Maintenant, nous avons la même structure. En fait, nous pouvons cliquer ici pour accéder à cette section. OK, maintenant nous devons ajouter du texte. En fait, supprimons celui-ci, et sur instigaset, j'ajouterai tous ces textes, ce qui signifie que nous devons modifier l' Donc, après avoir modifié l'Itigaset, je vous retrouverai dans la prochaine leçon 13. Configurer les paramètres du site et les polices globales dans Elementor: Bonjour, tout le monde. Essayons maintenant d'ajouter cette typographie Tout d'abord, nous avons un en-tête, donc je vais juste passer au réglage du siège et sur le principal, je vais changer ce texte en en-tête. Ensuite, double-cliquez ici et copiez-le comme ceci. Cliquez ensuite ici et voyons la typographie Nous avons donc Nunito bold 50 Nous pouvons donc vérifier. Cherchons que la taille de Nunito est de 50 avec cette balle, et quelle est la hauteur de la ligne ? La hauteur de la ligne est Otto. Faisons en sorte que la hauteur de la ligne soit 50. Oui, la hauteur de la ligne sera de 44. Faisons en sorte que la hauteur de la ligne soit de 50. OK. Maintenant, nous avons cette police de sous-en-tête Nunito Semibolt 26. Faisons en sorte qu'il en soit ainsi. Le second w sera une unité de 26 demi-gras six, nous serons un demi-boisé et Einheit Je crois que c'était 30. Voyons voir. Il en est 33, faisons en sorte que ce soit 30. OK. Ensuite, je vais changer ce texte en sous-en-tête, copier-coller comme ceci Ensuite, nous avons un texto. Le texte signifie paragraphe, copiez le texte du paragraphe. Si c'est comme ça, il faut alors ajouter la police. La police est ouverte sans normal 18 30 cents ouverts, 18 dollars réguliers signifient normal et la ligne est 30. S'il y a des problèmes, nous pouvons simplement les supprimer en venant ici et nous aurons un accent ? Oui, nous avons maintenant des boutons, copiez le texte du bouton, préfacez-le avec des couleurs accentuées et cliquez ici, puis le demi-monde ouvert 22 est ouvert, la taille du demi-volt ouvert est 22 et la hauteur de ligne sera Je crois que c'est 30 ? Non, c'est 25 ans, Iinight en Nous devons maintenant ajouter les liens personnalisés car nous devons ajouter la police manline Lien du menu et collez-le comme ça, puis cliquez ici et ajoutez simplement opens semivolteighteen, open semivolteighteen Et qu'en est-il de Line Night is 21. OK, maintenant nous avons les polices Earl, alors maintenant je clique sur Enregistrer les modifications. OK, alors je clique ici pour revenir en arrière et sur le mistie nous pouvons l'ignorer car nous allons utiliser les propriétés de l'élément ou de l' éditeur Donc, ignorez simplement ces styles de thème. Ensuite, nous avons défini la section, et dans un premier temps, nous avons l'identité du site, allons-y, et ici nous devons ajouter le nom du site et la description du site. Ajoutons le nom de notre site. Le nom du site est Hannah Clark, je vais donc simplement copier ce texte à partir d'ici et le coller comme ceci Ensuite, comme description du site, je vais le rendre vide. En fait, nous pouvons modifier ces éléments lorsque nous le faisons sur la page CO. Ici, nous devons ajouter l'icône sit FV, et dans notre feuille de tigre, je crée simplement un favicon qui inclut les premières lettres du nom de cette Hannah Clark Je vais donc simplement cliquer sur Exporter et en faire un JPG, puis cliquer sur Exporter. Cliquez sur le FVCon, définissez le JPEG, cliquez sur Exporter le favicon Et maintenant, nous devons passer au minuscule PNG. Nous sommes maintenant sur tiny png.com, donc tiny PNG est l'outil de compression de fichiers qui aidera à réduire la taille du fichier Nous avons donc 37 kilo-octets, et maintenant nous avons 8 kilo-octets, cliquez sur le bouton JPG pour le télécharger, puis allons-y et cliquez sur le favicon Sit et installons-le allons-y et cliquez sur le favicon Sit et installons-le Ensuite, juste à ALT, une icône FV à gaz Maintenant, revenez ici, nous avons des soutiens-gorge. le réglage maintenant, l' important est la mise en page, cliquez sur les mises en page pour la mise en page, la largeur du contenu est 1 140 et c'est la largeur du contenu par défaut, En ce qui concerne le réglage maintenant, l' important est la mise en page, cliquez sur les mises en page pour la mise en page, la largeur du contenu est de 1 140 et c'est la largeur du contenu par défaut, même si notre design Figma a une largeur de 1 440, mais par défaut élémentaire Ensuite, sur le conteneur, je les mettrai à zéro, et les écarts seront de 20 sur 20. Donc, ici, si nous cliquons sur cette image, appuyons sur Alt et vérifions l'espace entre les côtés, c'est 20, donc c' est l'écart entre les colonnes, et vérifions l'écart entre les lignes. L'écart entre les lignes est égal à dix, donc faisons en sorte que aap soit égal à dix. OK. Désormais, la mise en page par défaut sera un élément ou une largeur totale, et non un élément de thème ou toute la largeur. Et le point de rupture sera défini par défaut, et maintenant cliquez sur Enregistrer les modifications OK, revenez en arrière et nous pouvons ignorer d'autres choses pour le moment. OK, maintenant j'y retourne et voici à quoi ressemble notre site Web. En fait, je dois relancer cette page pour vérifier la nouvelle version OK. Dans la prochaine leçon, nous allons concevoir l'en-tête. Pour l'instant, je vais cliquer sur publier et publier la page d'accueil. Ensuite, je passerai au tableau de bord WordPress sur WP Admin après votre site Web, RL, puis nous pourrons passer à l'installation et à la lecture, changer l' affichage de votre page d'accueil en une page statique et sélectionner la page d'accueil puis cliquer sur Enregistrer les modifications. Maintenant, si nous visitons le site Web, le site Web ressemblera à ceci et à la leçon suivante, commençons à concevoir notre site Web. 14. Conception du menu d'en-tête - Partie 1: Bonjour, tout le monde. Il est maintenant temps de concevoir le site Web. Je vais sur le site Web du portfolio Universal, Fake Mobile, et c'est la version que nous allons concevoir. Ici, nous n'avons pas besoin de cette disposition en grille, je vais donc simplement cliquer ici pour la masquer. Et maintenant, nous avons un design clair. Donc, dans un premier temps, nous devons créer cette section, cet en-tête. Faisons-le pour cela, je vais sur notre site Web et passons au tableau de bord. Sur le tableau de bord, nous n'avons pas besoin de cet élément ou de cet aperçu, alors cliquez sur les options de l'écran et supprimez-le. OK. Maintenant sur le modèle, je clique sur Team Builder. Sur eux Builder, nous avons des sections distinctes. Nous avons donc ici un en-tête, un pied de page, une seule force, une seule page, et des choses comme ça Donc, dans un premier temps, nous devons créer l'en-tête. Je clique donc simplement sur ce cycle plus. C'est bon. Maintenant, il ouvre l' élément ou l'éditeur, et nous avons ici une bibliothèque. Dans cette bibliothèque, nous pouvons trouver un en-tête Ready Designs, mais je ne vais en utiliser aucun Je clique donc simplement sur cette icône de fermeture, et voici l' élément ou l'éditeur. Donc, ici, je clique sur cette icône plus, et nous allons utiliser Flexbox Je clique donc simplement sur Flexbox et le type de Plex Box sera une colonne directe OK. Ajoutez comme ça et je clique dessus et sur Advance, je supprimerai les marges et les rembourrages. Donc, dans un premier temps, nous devons ajouter ce logo pour l'ajouter, je le sélectionne, puis je clique sur Exporter, puis je clique sur Exporter, et ici je vais le créer en JBG car l'affichage ou le contenu est blanc et nous n'en avons pas besoin, nous n'avons pas besoin d'un arrière-plan transparent Ensuite, je clique sur le port. Passons au petit PNG et mettons-le simplement ici. Ensuite, il a été optimisé, puis je clique sur ce bouton pour le télécharger et c'est parti. Et dans un premier temps, nous devons ajouter le logo. Donc, ici, nous pouvons simplement ajouter un logo latéral comme celui-ci et ici nous pouvons ajouter le logo. Il suffit donc de cliquer sur Modifier le logo latéral, et ici, cliquer sur le logo latéral, puis nous devons télécharger la page de téléchargement. Et copions le titre et collons-le comme ça, Hanas. Faisons-en un logo. Il faut toujours ajouter la balise ALT. La balise ALT est très importante dans le référencement, et si ce logo ne se charge pas ou s'il est absent, la balise ALT ou ol apparaîtra. Ajoutez donc toujours un texte significatif (ancienne balise). OK, je clique sur Enregistrer les modifications et maintenant je clique sur Retour à l'éditeur, et notre logo vient d'être ajouté comme ça, mais nous en avons besoin sur le côté gauche pour le placer sur le côté gauche, je clique sur le conteneur et sur la mise en page, j'ajouterai cette direction sous forme horizontale brute, et seul le contenu y démarrera. OK, c'est arrivé sur le côté gauche. Et maintenant, découvrons ce qui se trouve entre les deux côtés. Nous en avons donc 20 en tête. Donc, pour obtenir ces détails, vous pouvez simplement sélectionner l'élément du fichier Figma que vous souhaitez vérifier et appuyer sur la touche ALTO all de votre clavier pour voir la taille intermédiaire Et si nous voulons voir la taille intermédiaire entre les deux, il suffit de cliquer comme ceci et de la trouver. Je crée donc un site Web personnalisé, classe complète, vous pouvez trouver ces informations. Ajoutons donc 20 en haut, allez ici et sur le conteneur, passez à l'avance, puis marge supérieure sera de 20 comme ça. OK. Ensuite, il ne nous reste plus qu'à ajouter le menu. Pour ajouter le menu, il suffit de cliquer sur l' élément publicitaire et sur le menu de recherche Ici, nous obtenons le menu WordPress, il suffit de le copier et de le faire glisser ici. Il suffit donc de le faire glisser ici et il s' ajoutera au conteneur, et nous devons créer un menu avant de le faire, je peux simplement cliquer dessus. Accédez à l'écran du menu pour en créer un, et ici, nous pouvons créer un menu. Donc pour le nom du menu, je vais ajouter le menu principal et cliquer sur Créer un menu. Ne sélectionnez aucun de ces éléments, créez un menu simple. OK. Maintenant, à partir de là, nous pouvons ajouter des pages ou des liens personnalisés. Ici, je vais sélectionner la page d'accueil. Sur les pages, nous avons une page d'accueil. Je l'ajoute simplement, puis nous avons un autre menu comme un service et un témoignage, connectons-nous Il s'agit donc d'une page de destination. Dans la page de destination, lorsque je clique sur ce A, cela redirige vers la section A. Donc, pour ajouter cela, nous devons utiliser ce lien personnalisé. Sur le lien personnalisé, j' ajouterai les liens pour prendre des escaliers et comme URL. Pour l'instant, ajoutons le hashtag une fois toutes les sections terminées , puis nous pourrons configurer le menu, ce qui signifie que lorsque je clique sur À propos, il sera lié à la section A comme celle-ci. OK. Maintenant, cliquez sur Ajouter au menu, puis nous avons le service de copier le texte et ici, placez le texte dans le tag de hachage de l'URL, cliquez sur Ajouter au menu, puis ici le témoignage, copiez-le et venez ici, copiez-le et venez ici, placez le texte du lien OK. Ensuite, sur Let's connect, ce devrait être un bouton, nous devons donc le créer séparément. Pour l'instant, je vais ajouter ces éléments et cliquer sur Enregistrer le menu. Alors revenons ici et maintenant nous devons publier ceci dans les détails. En fait, avant de le publier, créons-le sous forme de brouillon de sauvegarde comme celui-ci et publions-le après avoir créé la section de menu complète ou la section d'en-tête complète. Ensuite, je clique sur l'icône de recharge pour recharger cette page. OK. Après l'avoir rechargé, il a juste été ajouté Alors maintenant, je clique sur le menu WordPress et le menu est sélectionné car nous n'avons qu'un seul menu, et ajustons ces détails. abord, la mise en page sera horizontale et la mise en page sera Ir. Nous n'avons pas besoin de pointeur, nous n' avons pas de sous-menu, et dans le menu déroulant mobile, nous pouvons ajouter plus de détails, mais faisons-le dans la section de design réactif Et maintenant, nous devons passer aux styles E. Dans les styles E, nous pouvons définir la typographie. La typographie doit être constituée de liens de menu. Saviez-vous que nous créons des typographies de liens de menu sur des polices internationales ? Nous l'avons fait dans la section des paramètres latéraux, et au survol, définissons la couleur du texte comme couleur primaire, comme ceci Ou peut-être ajoutons-le, ajoutons Sa couleur sous forme de couleur orange. Et quand il apparaîtra en orange lorsqu'il est actif, nous devons définir la couleur principale. La couleur principale sera cette couleur verte. OK. Maintenant, nous n'avons plus besoin de séparateurs comme celui-ci, retirez-les, et maintenant nous devons ajouter le rembourrage horizontal pour l'ajouter Nous pouvons simplement cliquer sur un menu comme celui-ci, appuyer et survoler l'élément de menu suivant La taille intermédiaire est de 36. Faisons en sorte que le rembourrage horizontal soit 36. OK. Ensuite, nous pouvons ajouter un rembourrage vertical Voyons le rembourrage vertical à partir d' ici, voyons le rembourrage vertical. Il est 14 ans. Faisons en sorte que cela soit 14. OK. En fait, le motif horizontal doit être nul et l'espace entre les deux doit être 36, comme ceci 36 ans ? Oui, c'est 36. L'espace entre les deux doit être 36 et le motif horizontal doit être nul, comme ceci. OK. Nous n'avons pas de liste déroulante et nous n'avons pas de bouton total sur la version de bureau. Sur la version mobile, c'est ce que j'ai fait. OK. Nous devons maintenant corriger l'alignement. Alors corrigeons-le, cliquez sur ce conteneur et ajoutez un élément d'alignement au centre comme ceci. OK, alors il faut ajouter un bouton pour ajouter ce bouton de connexion, je peux cliquer sur les boutons d'élément et de recherche. Et là, nous avons un bouton, il suffit de glisser-déposer comme ceci. Donc, c'est ici, je vais juste cliquer ici et le mettre comme ça. D'accord, nous pouvons maintenant personnaliser ce bouton selon le design de Figma 15. Concevoir le menu de l'en-tête - Partie 2: OK, maintenant nous devons concevoir ce bouton. Pour ce faire, sélectionnez le bouton, passons à notre design Figma et vérifions les détails La couleur du bouton est donc la couleur du champ. Et qu'en est-il du texte du bouton ? Le texte du bouton est, je crois, le texte du menu. Oui, c'est un texte à lien manuel. Allons-y et changeons d'abord le texte. Le texte sera « Let's connect ». Je le copie et je le colle comme ça. Alors pour l'instant, ajoutons Link en tant que hashtag. Passez ensuite au style E dans le style E, la position du bouton sera en dentelle et la typographie est en manlin ce cas, nous n'avons pas besoin d'ombre de texte, et sur la couleur normale du texte, c'est cette couleur primaire. Non, la couleur du texte est une couleur secondaire car la couleur du texte est le blanc. Oui, la couleur du texte est le blanc. Alors maintenant, le type d'arrière-plan sera classique et la couleur sera cette couleur primaire. Et en survolant, la couleur du texte restera une couleur secondaire, et la couleur d'arrière-plan sera cette couleur comme celle-ci D'accord, pour l'instant, n'ajoutons aucune animation. Ou si nous le voulons, nous pouvons simplement ajouter like grow. Donc, quand je le survolerai, il grandira comme ça D'accord, maintenant, nous devons ajouter un rayon de bordure. Voyons donc le rayon de la bordure. Il en est 30. Le rayon d'angle est de 30. Ici, nous avons le rayon de la frontière. Faisons en sorte que ce soit 30 comme ça. Ensuite, il faut ajouter le rembourrage. Mettons-le à zéro pour l'instant, voyons le rembourrage, limons le texte, appuyons sur tout et comme ça, 30, gauche et droite 30 et haut et bas 18 Faisons partie du top 18. En fait, nous devons dissocier l'icône de valeur. Nous devons appuyer sur l'icône de dissociation de la valeur. Puis à droite jusqu'à 30, le bas est 18, la mise à gauche***. OK. Maintenant, si nous passons au design, le menu est sur côté droit et ce logo est sur le côté gauche. Pour ce faire, nous devons passer au conteneur, et nous pouvons simplement le rendre léger. On peut juste le faire comme un espace entre les deux. Et lorsque nous faisons cela, le menu est au milieu et ce bouton est à gauche. Mais si nous passons au design original, la taille intermédiaire devrait être 36 de ce bouton et du menu. Donc, pour y remédier, nous devons ajouter un élément, et ici nous devons ajouter un conteneur, juste un chiffon et un contenant en corde comme celui-ci Je n'ai rien ajouté. Faisons-le comme ça. OK. Avancez ensuite, supprimez les marges et les rembourrages sur la mise en page Dissocions les valeurs des espaces, et l' écart entre les colonnes sera de 36 OK. Maintenant, je vais mettre ce menu wordpress dans ce conteneur comme ceci. Ajoutons-le comme ça. Non, non, je n'ai pas ajouté, ajouté comme ça, puis faisons de même avec le bouton, et il devrait être comme ça. OK. Maintenant, si nous cliquons sur le conteneur, nous pouvons changer la direction en horizontal brut. Et le contenu de justification sera N, et nous avons ajouté la colonne Gap pass 36. Si nous le mettons à zéro, ce sera comme ça, il devrait être 36, et maintenant, si nous le vérifions, nous pouvons clairement voir l'espace entre les dessins et nous réalisons simplement ce que nous voulons atteindre. Donc, si nous allons ici, cela ressemblera à ceci et cliquons sur Aperçu des modifications et cela s' ouvrira dans une nouvelle fenêtre. Ainsi, le site Web ressemblera également au design. Dans ce conteneur, créez un élément de ligne au centre comme celui-ci. OK, maintenant notre partie d'en-tête est terminée. Cette partie, donc maintenant je peux cliquer sur Publier. Lorsque je clique sur Publier, nous recevons un Power Call. Où souhaitez-vous afficher votre modèle ? Je clique sur cette condition d'annonce, et je fais en sorte qu'elle inclue l'ensemble du site. Je veux voir ce menu en entier. Nous pouvons donc maintenant ajouter d'autres conditions, mais ce que nous voulons faire, c'est les afficher sur l'ensemble du site. Ensuite, je clique sur Enregistrer et fermer et le menu publier. Nous pouvons le voir d'ici. OK, maintenant je vais aller au bord WordPress et si nous allons dans le générateur de modèles et de thèmes ici, nous pouvons voir notre mais le nom est juste un élément ou un en-tête, Hashtag 226, nous devons le changer pour le changer. Nous pouvons cliquer sur Modifier. Ensuite, je vais cliquer sur cet en-tête défini , et sur le titre, je vais changer ce titre en en-tête, en-tête et cliquer sur publier. Ensuite, si nous revenons en arrière et que nous le vérifions, cela ressemblera à ceci. OK. 16. Conception de la section sur les héros - Partie 1: Bonjour, tout le monde. Nous venons de concevoir avec succès l'en-tête. Nous devons donc maintenant poursuivre le design. Maintenant, je dois aller de page d'accueil en page d'accueil, je vais juste aller à notre page d' accueil du site Web, et maintenant cela ressemblera à ceci. Maintenant, je peux cliquer sur Modifier avec Elementor. OK. Maintenant, dans les paramètres de page, nous devons apporter quelques modifications. Tout d'abord, nous devons changer la mise en page en élément complet avec. Ensuite, nous pouvons cliquer sur ce titre élevé en élément ou sur le titre complet avec la mise en page, le titre ne sera pas affiché, mais cliquons sur ce titre élevé pour masquer ce titre Ensuite, si je clique sur publier et actualisons, il est toujours là. Je pense que c'est sur le pied de page pour y remédier. Créons simplement un pied de page vide Je vais donc accéder au tableau de bord Wordpress et sur Team Builder, cliquer sur l' icône plus de ce pied de Ensuite, je vais fermer ceci et pour l'instant, je vais cliquer sur ce paramètre de pied et simplement changer le titre en pied de page, et je n'ajouterai Je clique simplement sur publier et sur Ad Cdition et ce sera affiché sur l'ensemble du site Alors maintenant, je clique sur Enregistrer et fermer. OK, c'est enregistré. Nous pouvons donc voir ici le site en direct. Voyons le live, donc maintenant nous ne verrons plus le texte du pied de page Donc, si nous le supprimons ici, nous pouvons voir qu'il ressemblera à ça OK. Il est maintenant temps de concevoir cette section consacrée aux héros. Pour cela, nous devons d'abord créer un conteneur. La taille du conteneur sera ici, nous en avons 90 et ici nous en avons 500. Il devrait être 590, alors allons-y, cliquez sur PlusConPlax Box, cliquez sur la colonne de direction puis ici comme hauteur moyenne, passons OK. Maintenant, changez de direction en ligne et justifiez le contenu sera affiché sur la ligne de statistiques. L'élément sera au centre. OK. Tout d'abord, ajoutons ces textes pour ce faire, je vais cliquer dessus, ajouter un élément, cliquer sur le titre et faire glisser le titre comme Ensuite, sur le titre, la balise HTML sera remplacée H one car il s'agit du titre principal du site Web Copions ensuite ce texte comme ceci. Il suffit ensuite de rythmer le texte comme suit. Ensuite, sur son dé, la typographie sera l'en-tête Ici, la typographie est l' en-tête, et sur le contenu, seule cette partie de Hannah Clark doit être la couleur principale, la couleur verte Faisons donc en sorte que la couleur du texte soit noire et ici, j'ajouterai Open tax is SP, A N, span, closed tag, puis encore une fois, open tag slash span Je viens de créer une balise DML. En fait, nous devons ajouter un identifiant, donc je vais rechercher set ID equal, et ajouter le titre de l'identifiant, le titre et le titre. Faisons en sorte que ce soit un héros, un titre de héros, il suffit de le copier. Il s'agit de simples ML et CHS, mais passez au CSS personnalisé Advance, il suffit d'ajouter un hashtag et un headale comme celui-ci C'est bon. Maintenant, cela n'a fait qu' affecter le design. Encore une fois, je clique sur Ajouter un élément et sur Ajouter un titre Lorsque j'ajoute un autre titre, il est également ajouté de manière horizontale Pour résoudre ce problème, je vais cliquer ici et ajouter le conteneur, et retirons tout ce qu'il contient. Ensuite, je ferai glisser ce titre dans le conteneur et je ferai glisser le titre suivant dans le conteneur. Ensuite, en ce qui concerne la mise en page du conteneur , définissons le centre du contenu et la direction sera la verticale des colonnes. L'alignement sera l'élément de départ et l'écart, voyons voir l'écart, l'écart est de 15, quel pro est de 15. OK, nous devons maintenant remplacer ce texte par ce texte, copier le texte et le placer, et changer cette balise HTM en H trois. Ensuite, une vignette, l'alignement sera laissé et typographie sera le sous-en-tête et la couleur est cette couleur de texte Vous pouvez consulter ces informations ici. OK, maintenant je vais simplement dupliquer ce texte parce que je n'ai pas besoin de le faire ou parce que je n'ai pas besoin de l'ajouter à nouveau. Je peux juste le faire, puis je copierai ce texte. Ce texte sera une typographie sous forme de paragraphe et la couleur du texte sera notre couleur de texte Collez comme ceci, puis sur le style, changeons cela en paragraphe Maintenant, ce texte s' agrandit vers la gauche. Nous pouvons simplement y remédier en ajoutant de la réalité virtuelle. Donc, si je passe au contenu, faisons de ce STM Lt un P ou un paragraphe et nous pouvons le définir comme suit Ajoutons BR comme ceci, puis BR comme ceci. OK, jusqu'ici tout va bien. Oui, alors nous devons ajouter un bouton pour ajouter le bouton. Je vais simplement cliquer sur Ajouter un élément et le bouton de recherche et placer le bouton ici. Ensuite, nous devons copier le texte du bouton. Cela fonctionne simplement avec moi sur le texte, et pour l'instant, créons un hashtag sous forme de lien sur le style E. Fixons la position car la typographie est alors un bouton. Voyons donc le typographe sur un bouton, appuyons sur le fichier Figma et voyons que sa taille est de 22 Nous allons donc cliquer ensemble sur la valeur du lien pour le dissocier et le haut est 22, 33 à droite, 22 en haut , 33 à gauche OK. Alors un rayon d'angle sera de 60, nous devrions en ajouter 60. Ensuite, la couleur du texte sera couleur secondaire et la couleur d' arrière-plan sera cette couleur. En outre, la couleur devrait changer comme ça et l'animation se développera comme ça. Jusqu'ici, tout va bien. Si nous examinons le dessin, nous pouvons constater un énorme espacement dû à la hauteur de ligne de ces prises Pour y remédier, il suffit de cliquer ici et de voir comment cela fonctionne lorsque l' on change la hauteur de la ligne. Il ne sera donc pas possible de modifier cette hauteur de ligne. Ici, nous pouvons modifier cette ligne de hauteur de ligne. Oui La nouvelle hauteur de ligne est donc de 20 dans le sous-en-tête, et ici nous pouvons changer hauteur de cette ligne de typographie en ligne 35 OK. Apportons ces modifications. Pour l'instant, faisons-en un en-tête, et passons au réglage latéral. le réglage de la taille, accédez aux téléphones globaux et à l'en-tête, la hauteur de ligne est de 35 et le sous-en-tête, la hauteur de ligne est de 26, cliquez sur Concevoir les modifications et cliquez ici pour revenir à l'éditeur Maintenant, si nous le voulons, nous pouvons également modifier la hauteur de ligne de ce paragraphe deux pour ce faire, nous pouvons simplement comme ceci. Si tu veux, tu peux le faire. Je vais juste en faire 28. Passons donc au réglage des sièges, les téléphones globaux et hauteur de la ligne de paragraphe seront 28 et cliquez sur Enregistrer les modifications. Cliquez sur Retour à l' éditeur pour accéder à OK. Maintenant, nous pouvons voir qu'il s'agit d' un espacement I pour corriger cet espacement. Nous pouvons ajouter une marge négative. Cliquez sur le paragraphe ou le titre, puis cliquez sur Avancer et cliquez ensemble sur Valeur du lien Puis en haut à une valeur négative comme celle-ci. Nous pouvons faire de même jusqu' en bas comme ceci. Maintenant, nous concevons simplement cette section , puis nous devons ajouter cette image. Ajoutons-le dans la prochaine leçon. 17. Concevoir la section de héros - Partie 2: Bonjour, tout le monde. Nous devons maintenant ajouter cette image de héros. Commençons. Tout d'abord, nous devons télécharger l'image. Je vais cliquer sur l'image et ici nous verrons Exporter, et je vais changer l'image en JPEG et cliquer sur Exporter. OK, alors passez au petit PNG et ajoutez une image au petit PNG. Cliquez ensuite sur ce J BG pour télécharger la version optimisée. Et maintenant, nous avons cette image. Alors maintenant, je vais sur Elementor et je recherche ici l'image. Ensuite, nous verrons cet élément d'image, et je vais simplement le mettre comme ceci. Voici donc notre conteneur de texte, et j'ajoute cette image en dehors de ce conteneur de texte dans le conteneur principal. OK. Maintenant, je clique ici pour modifier et nous pouvons choisir l'image et je clique ici, puis je télécharge simplement l'image optimisée, et pour les balises ALT de cette image, j'ajouterai ce texte, et en tant que titre, j'ajouterai ce texte, puis je clique sur Silt pour l'ajouter OK. Maintenant, ici, je vais définir la résolution de l'image comme complète. Bon, maintenant nos images ressemblent à ça, mais c'est joli, c'est petit, alors agrandissez-les. Nous pouvons sélectionner ce conteneur et l'ajuster avec. Faisons-le avec ça. Voyons la perruque d'ici. Avec ce 559, nous pouvons simplement en ajouter 559 ici avec fixel et 559 comme celui-ci ou nous pouvons l'ajouter En fait, ajoutons-le en pourcentage. Faisons en sorte que 50 ou 50 % soient parfaits. Maintenant, si nous vérifions le conteneur, l'écart entre les colonnes est de 20. Ici, je vais juste cliquer sur l'espace mordu pour aligner cette image sur le côté droit et ce texte sera aligné sur le côté gauche Très bien, jusqu'ici tout va bien. Cependant, le bas de ce conteneur est ici, mais l'image est ici. Nous pouvons placer cette image en bas, cliquer sur l' image, ajouter et définir align self comme N comme ceci. R À l'heure actuelle, nous devons concevoir cette section pour ce faire. Créons une nouvelle section. Cliquez sur l'icône plus, puis sélectionnez la case Plex et la colonne de direction sera une ligne. Découvrons ensuite la taille. La taille est de 200, passons à Minhightts comme ça, puis passons à Is dies et en arrière-plan, nous pouvons simplement cliquer sur Classique et changer la couleur de fond en cette couleur de texte car ici la couleur de fond est la couleur OK. Maintenant, si nous vérifions ici, il devrait y avoir un espace entre cette image et le fond noir. Donc, si nous vérifions qu'il y a un écart passé, pour ajouter l'écart, je cliquerai ensemble sur ce conteneur et sur Valeur du lien avancée, puis j'ajouterai le top pass 30 comme ceci. OK. Peut-être ajoutons-le car 20, 20 seront la meilleure taille, et ici aussi. Faisons en sorte qu'il en soit 20. Et ici, nous pouvons faire de même. Ok, maintenant c'est beaucoup mieux. Maintenant, pour l'étape suivante, nous devons ajouter ces sections. Sauvegardons donc les modifications en cliquant sur Enregistrer le rap. Bon, maintenant pour cette section sur les succès, nous pouvons utiliser un widget de compteur sur l'élément de f. Je vais donc aller ici et rechercher un compteur. Nous avons ici le widget du compteur. Je vais simplement l'ajouter et vous verrez que lorsque nous l'ajoutons, il y a un effet de comptage. Configurons-le. Tout d'abord, nous devons ajouter 40 plus, donc je vais simplement ajouter le numéro de départ comme zéro et le numéro de fin comme 240. Ensuite, si nous voulons ajouter quelque chose devant comme celui-ci, nous pouvons l'ajouter ou si nous voulons l'ajouter derrière, nous pouvons l'ajouter. Nous devons donc l'ajouter derrière. En fait, commençons par 50. Ouaip. Maintenant, la durée de l'animation sera de 2 secondes. Je vais passer à 1 seconde. L'animation se produira donc en 1 seconde. Donc, ce millier de millisecondes signifie millisecondes. Mille millisecondes signifie 1 seconde. OK. Ensuite, il faut ajouter le titre. Je vais juste copier le titre. J'ai aimé ça. Passons ensuite aux styles E. Avant de passer au style dans un conteneur. Lors de la mise en page, faisons-en un centre d'alignement. C'est bien mieux. Maintenant, éditez le widget de compteur et accédez à eTyleotyle, la position du titre se fera après que nous voulons devant, nous pouvons ajouter comme ceci, mais nous avons besoin et l'alignement horizontal sera centré comme ça, puis nous devons ajouter Découvrons l' écart. Je crois que c'est 20. Oui, c'est 20, faisons en sorte que ce soit 20. La position du numéro sera au centre. L'écart entre les nombres, l'écart entre les icônes plus, faisons en sorte que ce soit quatre. Oui, c'est la valeur par défaut. Faisons en sorte qu'il y en ait deux. OK. Chiffres, nous pouvons changer la couleur du texte pour notre couleur secondaire, c' est-à-dire le blanc, et changer la typographie en en-tête En fait, c'est déjà sur l'en-tête et nous n'avons pas besoin d'un trait de texte ou d'une ombre de texte sur le titre. La couleur du texte sera blanche et typographie sera le bouton «   voyons voir », la taille du bouton «   typographie », le bouton « o », et maintenant il va ressembler à ceci, et il nous en faut trois de plus Je vais juste dupliquer et dupliquer à nouveau, dupliquer à nouveau OK. Maintenant, cliquez ici et passons aux détails. Ce sont des années d'expérience. J'ai bien aimé ça, et il devrait y en avoir neuf. Le chiffre final doit être neuf, le numéro de départ doit être zéro, et la fin sera un plus o. Ensuite, nous avons ce taux de réussite, cliquez ici, changez ce titre en taux de réussite et ici, à heure actuelle, puis le taux de réussite est de 92 92, et nous allons commencer par 30 Oui Ça a l'air bien. Maintenant, il faut ajouter le dernier. Le dernier est garanti aux clients. Il devrait y en avoir plus de 5 millions. Ajoutons cinq ici, et faisons en sorte que ce soit zéro. Faisons-en un, et ici nous devons ajouter le dollar, puis ici il devrait être plus comme ça. OK. C'est bon. Maintenant, nous devons l'aligner correctement pour ce faire, cliquez sur le conteneur et sur la mise en page, nous pouvons cliquer sur cet espace entre les deux et il sera ajusté en conséquence. D'accord, nous avons conçu la section avec succès. Sympa. Maintenant, j'ai un autre problème. Ce n'est pas un vrai problème. C'est comme une amélioration. Ainsi, lorsque nous survolons ce bouton, couleur d'arrière-plan est meilleure, mais la couleur du texte doit être modifiée Donc, si nous changeons la couleur du texte en vert foncé, ce sera bien meilleur l'expérience utilisateur car pour l'expérience utilisateur car les utilisateurs pourront mieux le comprendre. Tu vois, peut-être que ça devrait être de couleur noire. Comme ça, maintenant c'est bien mieux qu'avant. OK, nous devons le faire pour cette section d'en-tête. Il suffit donc de cliquer sur Enregistrer le brouillon pour enregistrer les modifications, puis de cliquer ici pour modifier l'en-tête. Enregistrez le congé, puis cliquez ici et sur ce style sur notre texte, la couleur sera correcte. Maintenant c'est beaucoup mieux. OK. Maintenant, également ici, changeons la couleur de couleur en cette couleur principale. Cela doit être professionnel car cela doit être professionnel, si nous ajoutons beaucoup de texte ou de couleurs, ce ne sera pas bon. OK, maintenant je clique sur Modifier la page pour modifier la page d'accueil. OK, maintenant nous devons concevoir la section A. 18. Concevoir la section À propos de: Bonjour, tout le monde. Commençons donc à concevoir. Nous devons d'abord créer la section. Je clique ici, je clique sur la texte et je sélectionne la ligne de direction de la zone de texte Ensuite, retirez à l'avance la marge et le rembourrage, et si nous vérifions ici, l'article entre les tailles ou la section entre les tailles est 1220, alors passons à Marginus OK. Dans un premier temps, nous devons ajouter l'image, cliquer ici, rechercher une image et ajouter l'image comme ceci, puis nous pouvons aller ici, appuyer deux fois sur l'image. Cliquez sur Exporter et exporter au format JPEG. Si vous avez un arrière-plan transparent, vous pouvez l'exporter au format PNG, mais je le fais en JPEG car je n'ai pas d'arrière-plan transparent. OK, passons maintenant à Tin PNG et à Ragan Optimize, puis cliquez sur le bouton JPEG pour le télécharger cliquez ici et bloquez pour le télécharger Copions ensuite ce titre et ce rythme comme Altex. OK. Je viens d'ajouter Conclate, et maintenant nous devons créer cette section Pour créer cette section, nous devons ajouter le conteneur car ce conteneur principal concernant le conteneur principal de la section est horizontal, mais ce texte doit être vertical. Pour ce faire, je vais cliquer ici et ajouter un conteneur comme celui-ci. Il suffit de l'ajouter comme ça. Ensuite, j'ajouterai ceci. Faisons en sorte que ce soit 60. Je pense que 60, ça marchera. C'est bon. Ensuite, je cliquerai ici pour ajouter un titre. Il s'agira d'Hanna Clark, alors collez-le comme ça. Ajoutons ensuite du contenu avant de faire quoi que ce soit. Ensuite, nous devons l'ajouter, simplement le copier, le coller comme ça. Ensuite, nous devons ajouter ce texte. Il suffit donc de dupliquer celui-ci et d'ajouter le texte comme celui-ci. Maintenant, nous devons ajuster la typographie. Si nous ne le faisons pas, le design ne sera pas beau et nous ne serons pas en mesure de le modifier correctement Cliquez sur le premier titre et faites-en DA du gaz fondu H deux, puis une tuile, le sipographe sera le plan d' alignement de la tête et la couleur du texte sera la couleur du texte OK. Ensuite, voyons que la variable est un sous-en-tête. Il suffit de cliquer ici et de cliquer sur le sous-en-tête. Si vous souhaitez une taille différente, vous pouvez cliquer sur ce crayon lion et modifier la taille Mais dans notre cas, nous n'avons pas besoin de le faire, puis de sélectionner la couleur du texte pour que vous puissiez changer la couleur du texte à partir d'ici. OK, cliquez ici, puis copiez le texte et rythmez-le comme ceci. Ensuite, en ce qui concerne le style, typographie à gauche d' alignement sera paragraphe et la couleur sera la couleur du texte OK. Quand je passe au contenu, je dois le remplacer par un paragraphe et cette balise HTML de ligne doit être H trois. N'oubliez donc pas de le faire. Il est très important de faire en sorte que notre page classée sur le moteur de recherche et c'est à peu près au niveau de la page SO. En fait, nous analyserons notre site Web COSCO dans les prochaines leçons Ainsi, à partir de maintenant, cela nous aidera à améliorer notre site Web à l' avenir. C'est bon. Maintenant, ajoutons une marge négative. Le haut sera comme ça. OK. Et maintenant, nous devons créer ce centre. Si nous vérifions notre design Figma, il est en fait correctement aligné car nous devons ajouter plus de données Maintenant, cliquons sur ce conteneur et faisons en sorte qu'il justifie le centre de contenu. OK, maintenant je vais dupliquer cette partie, puis nous devons ajouter ce texte, copier le texte et le coller ici, puis le faire en H trois. Ensuite, si nous vérifions la typographie, c'est le bouton, donc le style, la typographie, changez-le en bouton comme celui-ci Ensuite, nous devons ajouter cette liste pour ce faire, je vais cliquer sur Ajouter un élément et sur la liste de recherche. Voici une liste que je peux énumérer. Je vais juste le glisser-déposer comme ça. En fait, il devrait être ici, puis je clique sur Con. Avant de modifier le contenu, nous devons passer au style et, sur le texte, définir la couleur du texte comme texte, ici la typographie sera un paragraphe Je pense que c'est un paragraphe, c'est un paragraphe. Maintenant, je vais copier un par un ce contenu, ici nous avons des éléments, collez-le comme ça. Ensuite, pour cette icône, je vais cliquer comme ceci et nous retrouverons ici la même icône. Il s'agit de la bibliothèque d'icônes de Pontosom. Ici, nous pouvons trouver cette même icône. Cliquez. Je cherche juste à vérifier que nous avons la coche Je peux simplement cliquer sur Installer. Voyons maintenant la taille. Sa taille est 22 x 22 et la couleur est la couleur primaire. Réglons ces détails. abord, je vais supprimer ces deux éléments et ici, sur l'icône , la taille est 22, puis l'écart est, voyons l'écart. L'écart est de quatre, faites un écart car l'alignement de quatre est reg, la couleur est la couleur primaire. Nous pouvons maintenant cliquer ici pour dupliquer l'article. Maintenant, je clique comme ça, puis je copie ce qui se passe comme ça. Ensuite, Dubltd copie cela en prend deux, et maintenant nous devons changer la taille intermédiaire pour ce faire, je vais passer au style Ici, nous avons un espace entre les deux, voyons l'espace entre les deux. Il est dix, faisons en sorte que ce soit dix. Très bien, jusqu'ici tout va bien. Ensuite, nous devons ajouter cette citation ou ce code. Je vais simplement copier le code et cliquer sur le devis de recherche d' éléments publicitaires. Maintenant, nous avons un code de bloc il suffit de glisser-déposer cet élément. Ensuite, j'ajouterai la citation et nous n'aurons pas besoin de l'icône du tweet ou de l'auteur. OK, l'écran va passer au devis. Passons à Style One Style. La couleur du texte sera cette couleur de texte et la typographie sera le paragraphe En fait, nous devons changer la typographie. La couleur du texte sera le texte et nous avons ici la date laquelle la couleur du code sera colorée et nous devons diminuer la taille. Comme ça, nous avons en fait besoin ce type de guillemet à guillemet. Cependant, nous n'avons pas ce dessin sur élément ou voyons voir, nous n'avons pas ce design Ajoutons donc le devis et nous pouvons améliorer l'alignement car nous préférons le centre d'alignement, mais faisons alignement car nous préférons le l' alignement à gauche et un dtylé, nous pouvons modifier l'écart Je vais donc faire en sorte que l'écart Typographie, remplacez-la par un paragraphe et cliquez ici. Ensuite, pour le style E, faites-en l'Italie comme ça. OK. Maintenant, ça a l'air bien et sur le code, nous pouvons réduire la taille du code. Faisons en sorte que ça se passe comme ça. C'est trop petit. La taille 4 sera la meilleure taille. Ensuite, nous devons créer cette section en ligne «   Trouvez-moi ». Pour cela, nous devons utiliser une mise en page horizontale. Je clique ici et sur conteneur, je vais juste mettre un conteneur comme celui-ci. Ensuite, à l'avance, c'est difficile et la direction sera brute et le contenu justifié sera au centre. OK. Maintenant, je vais simplement dupliquer ce texte et le coller à l'intérieur comme ceci. Ensuite, changeons le texte en ceci et en bouton de taille, collons-le comme ça sur Mistyle Typography is button. OK. Ensuite, nous devons ajouter l'icône des réseaux sociaux. Icônes sociales de Will. J'ai donc ici des icônes sociales, ajoutez-les. Nous devons l'ajouter à l' intérieur de ce conteneur. En fait, il a déjà été ajouté à ce conteneur, mais ce texte devrait être à peu près comme ça. Ensuite, je clique sur le conteneur et je fais en sorte qu'il aligne le centre de l'article comme ceci. OK. Ensuite, nous devons trouver la taille intermédiaire, donc c'est 15, afin que nous puissions facilement ajouter Gap pass, colonne Gap pass 15. Comme ça. OK, maintenant nous devons ajuster ce design pour ce faire, découvrons les détails. Il est donc de 51 sur 51 et le rayon de commande est de 30. OK, ajoutons ces détails. Cliquez ici Pour l'instant, gardons ce ligon social et la forme sera un cercle et les colonnes seront alignées automatiquement au centre un changement de style, les couleurs officielles à lancer ici changez la couleur principale car cette couleur et la couleur secondaire seront en fait couleur secondaire sera une couleur blanche comme celle-ci Ensuite, nous pouvons ajouter la taille telle que 51 51 doit être. L'icône ne sera pas le 51. Voyons la taille de l'icône. La taille de l'icône est 21. N'ajoutons pas de taille d'icône, mais ajoutons du rembourrage Si nous vérifions le rembourrage, rembourrage se trouvera sur le fixel 15 L'espace entre les deux sera six, ça fera six. Quel est le rayon dans l' icône Ou changeons sa couleur en cette couleur comme ceci et la couleur secondaire sera cette couleur de texte. Maintenant c'est beaucoup mieux. Si nous le voulons, nous pouvons augmenter la taille de l'icône. Faisons en sorte que ce soit 21. maintenant au contenu, ajoutons l'icône que nous avons d'abord liée. Cliquez sur Bibliothèque d'icônes et recherchez Link in. Ici, nous avons une icône liée. Cliquez sur Insérer et voici le lien de l'icône sociale et dans l'option de lien, nous pouvons ajouter Ouvrir dans une nouvelle fenêtre, ce qui signifie que lorsque le visiteur clique sur le bouton, cette personne sera redirigée vers cette page de réseau social dans un nouvel onglet. Ensuite, la deuxième icône, nous avons Facebook et Facebook, en tant que deuxième Licon Actuellement, nous n'avons pas page Facebook ou LinkedIn ou quoi que ce soit d'autre. Je vais donc simplement ajouter une page Facebook, l'URL du site Web Facebook, et ici nous ajoutons un lien dans l'URL du site Web, mais dans votre cas, vous devez ajouter l'URL de la page sur laquelle vous êtes disponible pour le client ou si vous créez ce site Web pour Business coach sur le Business coach, des liens vers les réseaux sociaux ou si vous créez ce site Web pour l'auteur sur les réseaux sociaux de l' auteur, si vous le comprenez, alors nous avons une icône YouTube. Mais ici, nous avons Instagram, recherchez Instagram et ajoutez, puis je vais ajuster Instagram R Okay. En fait, pour cette taille, nous allons faire en sorte que cette taille soit 22. Il devrait être un peu gros, passons à 24 et changeons le pad en. Faisons en sorte qu'il n'y en ait que 222, comme ça. Maintenant que nous avons cette section sur son animation, grandissons comme ça. Nous avons conçu avec succès la section à propos de cette façon. Je peux maintenant cliquer sur Saraft et passer à la section suivante 19. Concevoir la section des services: Bonjour, tout le monde. Nous devons maintenant concevoir cette section de services. Commençons donc. Je vais dans l'éditeur Elementor et je clique sur Ajouter un nouveau conteneur puis sur Flexbox et définis ici la colonne comme colonne de direction OK, maintenant nous devons ajouter entre les tailles une à une. Passons à l'étape suivante et sur la marge de 1 à 20, la marge supérieure est de 1 à 20. OK. Il ne nous reste plus qu' à ajouter ce texte, il suffit de le copier et de cliquer ici, puis d'ajouter le titre Ensuite, suivez simplement le rythme du titre comme suit. Ensuite, un style, faites-en un centre de ligne et typographie sera l'en-tête et la couleur sera la couleur du texte Ensuite, il faut ajouter cette deuxième partie ou le sous-titre, copier le texte et ici sur le contenu, conserver la balise HTML sous la forme H deux. Maintenant, je vais dupliquer cet en-tête, puis le faire en H trois et le coller comme ça. Ensuite, une vignette, la typographie sera un sous-en-tête comme celui-ci. Voyons la taille accueillante, la taille accueillante est dix. Faisons en sorte que ce conteneur soit de la taille de dix. La taille du corbeau sera de dix. En fait, il en est déjà dix. D'accord, il faut maintenant ajouter cette section. Pour ajouter cette session, nous pouvons utiliser une grille. Je clique donc sur Ajouter un élément et je recherche simplement dans la grille ou dans la sous-disposition, nous pouvons voir la grille Je vais juste le copier et le coller comme ça. Nous avons maintenant le design de la grille et ici, vous souvenez-vous que sur ce conteneur, nous ajoutons dix rangées, mais sur notre modèle Figma, c'est 30, ce qui signifie que nous devons en ajouter 20 de plus Donc, pour ce faire, je clique sur la grille et sur Advance link l value et j' ajoute le top pass 20 comme ceci. OK. Voyons maintenant que nous avons trois colonnes. Donc, en termes de mise en page, de grille, nous n'avons pas de moyen avec redowtline, nous n'en avons pas besoin sans Restons sans ligne pour le moment, et la colonne sera trois et la ligne deux, et les écarts seront, je pense, de 20 sur 20. Oui, c'est 20 par 20. Ajoutons des écarts de 20 par 20. OK. Nous pouvons maintenant ajouter du contenu à l'intérieur de cette grille. Pour ce faire, je clique sur cette icône plus ou je peux simplement glisser-déposer un conteneur dans cette colonne et la marge et le rembourrage du conteneur seront nuls pour le moment Sa direction doit être verticale. Faisons en sorte que la direction soit verticale et que l' ificonen le fasse Faisons-en le centre pour le moment. Ensuite, nous pouvons ajouter le contenu. Tout d'abord, nous avons cette icône. Cliquez dessus, puis sur Exporter. Exportons au format JPG, cliquez sur Exporter le vecteur, et sur Tiny PNG, ajoutez-le comme ça, puis réduisez-le de cinq, puis venez ici et j'ai un m, puis ajoutez l'image comme celle-ci et cliquez dessus, puis glissez et volez l'icône, puis je copierai ce texte et LTag sera ce texte pour changer le titre du texte copié Nous devons maintenant ajouter le titre du service, copier le titre et cliquer sur Plasicon. Ici, le titre, la balise HTML du titre sera H trois, rythmer le texte et son style, en faire un centre de ligne et la typographie sera un sous-en-tête Je pense que c'est un sous-en-tête. Oui, c'est un sous-en-tête, alors qu'en est-il de la couleur ? La couleur est la couleur du texte, changez de couleur en couleur du texte, puis dupliquez-le comme ceci, puis je garderai la balise HTML sous forme de H trois, copiez ce texte et cette typographie de texte est un bouton Au niveau du texte et de la vignette, remplacez la typographie par un bouton car il est plus petit Encore une fois, je peux le dupliquer, puis je vais copier ce texte et le cadrer comme ceci, puis transformer la balise STL en paragraphe, puis en mode style, changer la typographie en paragraphe comme celui-ci Nous avons conçu avec succès le premier service et voyons la taille de l'offre La taille de l'invité est de 6 et en plus de 40. Nous, en bas, c'est 40. Ajoutons ces détails. Pour cela, je clique sur le conteneur et sur le conteneur. Je pense que l'écart sera un écart de dix ans, pas encore. Oui, la ligne est dix. OK. Maintenant, en un coup d'œil, nous pouvons ajouter un rembourrage pour passer 40, six à droite et 40 en bas, six à gauche, comme ceci OK. Puis disparue. Nous devons maintenant ajouter un rayon d' angle. Le rayon d'angle est de 20. Faisons en sorte que le rayon d'angle soit égal à 20, et maintenant nous devons ajouter le type de bordure, pas le type de bordure, en fait, le type de bordure, bob shadow, cliquer sur cette icône et voir les détails de l' ombre Ici, nous avons une ombre portée, donc le flou est de quatre et la position X est nulle Trouvons ces détails. Horizontal sera zéro, vertical sera zéro. Blur is blur, c'est quatre sur la couleur, cliquez ici et ici, la couleur est celle-ci, cliquez ici et sélectionnez Css, et quand nous sélectionnons Css, nous pouvons obtenir le chd RGB en le copiant et nous pouvons simplement le coller comme ça Maintenant, c'est le même que le design Figma. Il ne nous reste plus qu'à sélectionner le conteneur et le ling, puis à dupliquer. Encore une fois, dupliquez. Lorsque nous le dupliquons, il remplira la grille. Tu vois, c'est assez facile. Je vais le reproduire trois fois de plus, car nous avons six services de ce type. Alors maintenant, je vais les ajouter , alors ajoutons-les un par un. Ensuite, nous avons les leaders, copiez le texte, mettez le texte en page ici, copiez ce texte, collez le texte ici, copiez ce texte, collez le texte ici Lorsque nous créons une structure, nous pouvons simplement dupliquer et concevoir facilement le site Web. Ensuite, nous devons changer l'image, cliquer ici et sur Exporter, JPG, cliquer sur Exporter le vecteur. En fait, je vais télécharger les images, puis je pourrai les télécharger. Je veux dire, réduisez la taille et téléchargez-les. Ensuite, il ne me reste plus qu' à les ajouter à chaque service. C'est bon. Maintenant, je vais aller sur Tine BNG et ouvrir les images définies ici. Je sélectionne des images, il suffit d'ajouter ces images comme celle-ci, deux , trois, quatre, cinq, six, nous avons six images. Maintenant, je clique sur ce bouton JPG pour le télécharger. tous. OK. Maintenant, ici, je peux voir que les images sont téléchargées. Je vais simplement les sélectionner toutes et cliquer sur cette image, cliquer sur OtoosImage et je peux simplement faire glisser et envelopper des images Une fois qu'elles ont été téléchargées, je peux simplement choisir l' image et cliquer sur Sélectionner. En fait, je dois ajouter le texte ALT. Ajoutez toujours du texte ALT, suffit de copier ce texte et de le coller comme sélectionné. Et là, je crois que j'ai déjà copié le texte. Nous devons maintenant modifier le contenu de cette section. Utilisons d'abord le, il suffit cliquer ici et les images seront chargées. Voici l'image de cette image, nous devons ajouter la balise ALT comme nous l'avons fait auparavant et cliquer sur Consil, puis nous devons mettre à jour le contenu, changer le titre, puis ajouter un titre, puis ajouter une petite description comme celle-ci. Nous avons ici trois lignes, mais ici nous n'avons que deux Ce que nous pouvons faire, c'est simplement ajouter un support BR fermer le support comme celui-ci. Lorsque nous faisons cela, il fait un saut de ligne sur STM, puis ce texte passe en dessous. Maintenant, nous devons changer le service du programme Mindset Master, il suffit de le sélectionner, coller, de sélectionner et coller ces réservoirs, copier et coller, puis de copier la petite description et de la coller comme ceci. Ensuite, nous devons le faire pour le prochain. Alors voilà, copiez le réservoir, collez les réservoirs, comme ça, sélectionnez-le, puis voilà, allons-y. Il suffit de copier le dessin figma et de le coller. OK, maintenant nous avons un problème. Ainsi, lorsque nous vérifions ce texte ici, nous pouvons voir de nombreuses balises. La raison en est que je le colle simplement comme ça, mais ce n'est pas la bonne méthode. Je dois copier le texte et coller ici, pas ici. Si nous le collons comme ça, ce problème ne se produira pas. Je pense que le reste de ce texte fonctionnera bien, et nous devons ajouter que nous sommes là pour conserver les trois lignes du paragraphe et la dernière, il suffit de changer le texte et de changer l'image, cliquer sur cette icône et de goûter l'icône, cliquer sur CLC maintenant nous avons ce texte dans celui-ci et nous devons agir B ici Nous avons conçu avec succès la section des services et lors des prochaines leçons, nous pouvons essayer ou ajouter un effet HA et une animation. Pour l'instant, il suffit de cliquer ici et de cliquer sur Savedra 20. Ajouter des boutons à la section Services: Nous devons ajouter ce bouton. Pour ce faire, passons à Elemental Editor et si nous faisons défiler la page vers le haut, nous avons le même bouton Cliquez donc avec le bouton droit de la souris et cliquez sur Copier. Ensuite, venez ici et voici la section dans laquelle nous voulons ajouter le bouton, sélectionnez le conteneur, cliquez avec le bouton droit de la souris sur et c'est parti. Maintenant, nous avons un bouton ici. Passez donc à la tuile Est sur la tuile Est. Définissez la position comme centre. Bon, il ne nous reste plus qu'à copier ce texte et à le coller. Passez donc au contenu et transmettez le texte comme ceci. Alors pour t'en assurer. Vérifie le rembourrage. Donc c'est 22 sur 33. Alors allons-y et vérifions-le ici. C'est aussi 22 x 33. OK. Maintenant, nous avons besoin d'un espacement. Si la case est vide, l'espacement est de 30 Nous pouvons facilement cliquer sur le bouton, avancer à l'avance, supprimer la marge et le rembourrage, puis ajouter la marge supérieure, passer 25, car nous devrions déjà en fait être 20 car nous en avons déjà dix pour cet espacement Sympa. Il ne nous reste plus qu'à créer cette section de révision. Créons-le dans la leçon suivante. 21. Concevoir la section des évaluations: Bonjour à tous. Nous devons maintenant créer cette section de révision. Alors allons-y. Je vais dans l' éditeur Elemento, et d'abord, nous devons créer le conteneur, cliquer sur cette icône plus et cliquer sur Flexbox Puis je clique ici sur la colonne daction. OK, maintenant nous avons entre un et 20 espaces, alors ajoutons-le, passons à l'étape avancée, supprimons la marge et le rembourrage par défaut et ajoutons la marge supérieure de 1 à 20 OK. Passons ensuite au design Figma et au design Figma, la hauteur est de 600 Ajoutons-le donc, cliquez sur le conteneur, et sur la mise en page, la hauteur minimale sera de 600. OK. Maintenant, dans un premier temps, ajoutons cette image d'arrière-plan. Pour ce faire, je vais cliquer sur l'image comme celle-ci, sélectionner l'image, puis cliquer sur ce bouton Exporter. OK, c'est en panne et maintenant je vais sur tiny png.com et nous allons le télécharger pour réduire la taille du fichier Puis je clique sur ce bouton pour le télécharger. Maintenant, je vais aller notre site Web élémentaire, puis sur Estyle cliquer sur le type d'arrière-plan comme d'habitude, puis cliquer sur cette image de Joe et télécharger l'image comme ceci Ensuite, je vais le copier dans ce texte en tant que texte ALT de cette image. Ajoutons-le donc comme ça. Cliquez ensuite sur Masquer ou sur les paramètres, faites en sorte que l'image soit en position complète, la fixation centrale sera par défaut, ou c'est simplement comme corriger et répéter sans répéter la taille, couverture L'écran sera recouvert comme celui-ci. La pièce jointe n'est pas fixe. pièce jointe doit être défilée et la taille de l'écran sera automatique ou nous pouvons ajouter une couverture. OK, maintenant nous avons le contexte. Ensuite, ce que nous devons faire est d'ajouter ce texte. C'est assez simple. Nous pouvons simplement cliquer ici et sur le titre comme celui-ci. Ensuite, allez ici, copiez les chars et payez le texte ici. Ensuite, dupliquons ce titre, et maintenant copions-le, prenons et collons du texte comme celui-ci, puis changeons la balise HTML en H trois Passons maintenant à Estyle Ici, nous avons sélectionné le sous-titre, cliqué sur cette police globale de typographie et défini le sous-en-tête, puis changé la couleur du texte comme suit Et nous devons faire les changements de style de cet en-tête pour que l'Estyle sélectionné soit au centre de l' en-tête, puis ici, couleur du texte, nous devons faire cet alignement au centre Et pas seulement cela, je vais cliquer sur le conteneur principal et sur le plan de mise en page pour aligner les éléments au centre comme ceci. OK, voyons voir entre les deux, je dis dix. Ici, cela semble trop proche, alors réparons-le pour le réparer. Nous pouvons simplement cliquer comme ceci et cliquer sur cette pension. Modifions ensuite la hauteur de la ligne. Faisons en sorte que la hauteur de la ligne soit 50 50, ajoutons-la comme 50, et ce que nous devons faire est de cliquer ici et de sélectionner l' en-tête, puis nous pouvons accéder à Global Bonds et nous pouvons modifier l'en-tête et ajouter des lignes 50 comme ceci. Cliquez maintenant sur Const changes et cliquez ici pour accéder à l'éditeur ou allez dans l'éditeur OK. Maintenant, nous devons ajouter le PADint en haut et en bas pour cela, cliquer ici et cliquer sur cette section, puis sélectionner l'en-tête et appuyer sur tout pour trouver la taille intermédiaire, c'est 70 Et qu'en est-il de ça ? C'est aussi 70, cliquez sur le contenant à l'avance en haut, rembourrez 70 et le bas sera 70 OK. Maintenant, ce que nous devons faire, c'est créer ces critiques. C'est assez simple et avant de le créer, nous devons ajouter la taille intermédiaire. Ici, la taille intermédiaire est 30. Peut-être que nous pouvons l'ajouter à la marge. Donc, évitons-le pour le moment. Donc, pour ajouter des avis, je clique sur Ajouter un élément, et ici je vais rechercher un avis OK, nous avons les avis ici. Nous venons d'ajouter comme ça. OK, maintenant nous avons trois critiques. Pour l'instant, gardons ces trois critiques factices. Et voilà, voyons voir, d'abord, je vais sélectionner cette case de révision et voir maintenant ce que nous devons ajuster. Donc, comme première option, nous avons des côtés par vue. Ici, nous avons un, deux, trois, trois côtés, donc je clique simplement sur trois et je fais glisser le curseur pour faire défiler Faisons en sorte que ce soit un, pas deux, un. Il y aura donc un défilement après un. OK, maintenant avec l'option par défaut et aucune option supplémentaire, nous n'avons pas besoin de flèches car il n'y en a pas. Si vous le souhaitez, vous pouvez conserver les flèches et jouer automatiquement, vitesse de lecture automatique de 5 000, soit 5 000 millisecondes en secondes, soit 5 secondes. OK. Maintenant, la boucle infinie sera oui, le push on how sera oui, le push on interaction sera oui. OK. Et nous pouvons ajouter une charge en tant que moyenne de charge. Si l'avis n'est pas présent sur la structure du site Web, il ne se chargera pas tant qu' il n'apparaîtra pas sur Design. Bon, maintenant nous devons aller à EstilSoets. Avant de passer à Estes, ajoutons de vraies critiques. Ajoutons de vrais détails. Tout d'abord, je vais supprimer ces deux éléments et ne conserver que le premier. Et d'abord, il faut choisir l'image. Pour ce faire, je vais aller ici et tuer ça. Cliquez sur cette image, cliquez sur cette image, cliquez dessus, sélectionnez-les toutes les trois , puis cliquez sur Exporter trois couches, et le fichier est téléchargé en tant que C. Donc je clique simplement dessus. J'utilise un Mac. Si vous utilisez Windows, cliquez avec le bouton droit de la souris et extrayez-le. Et voici la critique Emages. Passons donc à Tiny PNG et ajoutons ces critiques. OK. Maintenant, je vais en télécharger trois comme celui-ci. OK. Maintenant, j'ai L de trois critiques. Vous vérifiez le nom de cette image d' avis, c'est juste un nom aléatoire. Nous pouvons donc ajouter le nom réel de cette personne à ces images. Cela aidera à classer ces images dans Google, et c'est aussi un moyen professionnel de mettre en valeur nos images. Pour ce faire, il me suffit de cliquer ici et de copier ce nom, et c'est une bonne pratique. Alors je vais venir ici avec un nom comme celui-ci, et je ferai de même pour le reste des images. OK, maintenant que nos images sont prêtes, je les surligne toutes, et allons sur notre site Web et cliquons ici. Ensuite, je vais simplement glisser-déposer pour télécharger ces images sur notre site Web. Et c'est parti. Maintenant, je vais copier ce titre et le tester en tant que ALT et cliquer sur CLC. Maintenant, nous devons ajouter le nom, pour ajouter le nom, surlignons et copions le nom Après le nom, nous devons ajouter le titre, copier le titre, coller le titre ici, et l' évaluation sera pour vous Je peux. Nous n'avons pas besoin d'une icône de réseau social comme celle-ci, donc je vais la supprimer. Le lien sera donc vide. Ensuite, nous devons ajouter ce texte et le transmettre comme ceci. OK, nous avons maintenant la première critique. Maintenant, ce que je peux faire, c'est dupliquer cette critique deux fois de plus et cliquer comme ça, puis ajoutons d'abord l'image. Celui-ci devrait être l'image. Ajoutez une balise ALT à l'image. OK. Maintenant, recopiez le nom. Comme ça, copiez le titre comme ceci, note sera de cinq, copiez ce texte comme ceci et collez-le comme ceci. Donc, si vous voulez obtenir une note de trois, vous pouvez simplement l'ajouter comme trois, mais ajouter trois n'est pas bon pour les affaires, alors ajoutons-la à cinq. OK, maintenant nous devons modifier le troisième. Cliquez ici, cliquez sur Oui et ajoutez-le comme ça. Modifiez ensuite le titre, ajoutez le titre et transmettez-le comme ceci. Cliquez ensuite ici pour ajouter le titre. C'est le nom. C'est le titre. OK, alors ajoutez la critique, ajoutez-la comme ça. OK, maintenant nous avons les trois critiques. Réglons ce problème de design. Pour cela, je vais sur Estyle on Estyle. Découvrons l' espace entre les deux. Sélectionnez l'une de ces critiques et appuyez sur la touche Alt pour la révision suivante Il y a 20 droits d'espace entre 20 et une bordure avec, mettons le zéro à zéro. Nous n'avons pas besoin de frontière. Ensuite, le rayon de la bordure, voyons que le rayon de la bordure est de deux, puis le motif du haut et du bas est de deux et la gauche et de la droite sont neuf Ajoutons donc ces détails, le patron, cliquez ici, puis ici, les 20 en haut, à droite, neuf, les 20 en bas, les neuf à gauche. OK. Il faut maintenant ajouter la couleur de fond. En fait, nous pouvons ajouter une couleur d'arrière-plan à l'en-tête. Gardons-la comme couleur par défaut. Nous pouvons voir un séparateur. Si vous le souhaitez, vous pouvez le montrer, mais je ne le montrerai pas, alors attachez-le à la hauteur. Et maintenant, sur le texte, la couleur du texte sera la couleur du texte et la typographie le sera aussi Mais voyons la typographie. Ici, la typographie est open sense semi wall 18. Ajoutons ces détails. Nous, le paragraphe et famille, ouvrons 18 fois en demi-vol comme ceci, alors la hauteur de la ligne Est 30. La hauteur de la ligne est de 30. OK. Ensuite, la couleur du texte du titre sera cette couleur et voyons la typographie La typographie est ouverte sans norme 16. Allons-y. Sélectionnez d'abord le paragraphe, puis cliquez sur cette icône d'édition de taille 16, ce qui est normal Innit 30 comme ça. Bon, maintenant nous devons ajuster les images. La taille de l'image, découvrons la taille de l'image. Donc c'est 92. Vous voyez, la taille de l'image est 92, alors ajoutons simplement 92. OK. Maintenant, allons-y et allons-y vraiment. Les écarts entre les rayons des frontières, gardons-les. En fait, il faut ajouter l'écart. écart entre l'image et le texte est de 15, alors ajoutons-le sous forme de 15 et nous n'avons pas besoin d'ajouter un rayon de bordure et une icône. Découvrons l'icône. La taille de l'icône est donc de 23 x 22. Faisons en sorte que ce soit 22. Non, cette icône concerne une icône de réseau social, nous n'avons pas besoin de l'ajouter, alors ignorez-la. Lors de l'évaluation, la taille est de 22, et découvrons que l'espacement est de neuf Faisons en sorte que ce soit dix. Oui. Faisons en sorte que ce soit dix. OK. Ensuite, la couleur est, découvrons la couleur. Voici la couleur. Copiez le code couleur et rendez-vous ici, puis faites face au code couleur comme ceci. D'accord. Maintenant, ça a l' air plutôt bien. Ici, nous avons un problème. Cela ne va pas dans le même sens. Nous pouvons facilement y remédier en supprimant cet écart. Réduisons l'écart. Alors, faisons en sorte que Gap passe neuf ans. Maintenant, ça a l'air bien. Alors nous n'avons pas de texte, avons-nous modifié le texte de la critique ? Non, ici nous avons le texte de la critique défini, cliquez sur la typographie et la couleur sera également la couleur du texte comme celle-ci OK, maintenant ce que nous devons faire est d'ajouter cette pagination ou de modifier le design de cette pagination Pour ce faire, allez dans la navigation sur la navigation. Voyons que cette pagination mesure 15 x 15 et espaces 220. Ajoutons donc 15, c'est la taille, les espaces 220. La couleur est alors la couleur primaire et la couleur active est la couleur du texte. Tu vois, plutôt bien. Tu vois ? Maintenant, ce que nous avons seulement en fait, c'est ajouter de l'espacement. Si nous vérifions ce conteneur et ici, l'espacement brut est de dix, ce qui signifie que nous devons en ajouter 20 de plus car l'espacement entre les deux est ici Donc, pour ce faire, ce que nous pouvons faire, c'est aller ici. Cliquez ici et sur Advance margin top à 20, et maintenant nous en avons 30 de la taille. OK, maintenant, nous devons les placer au centre pour cela, cliquer sur ce conteneur et ici, il est indiqué de justifier le contenu en tant que centre. OK, maintenant ça a l' air plutôt bien. Nous avons donc conçu avec succès la section d'aperçu. Cependant, je peux voir qu' il s'agit d'espacement, essayons de le corriger Nous n'avons pas besoin de cet espacement. Oui, il y a un espacement entre les deux. Essayons de le réparer. Passons à un conteneur. Faisons-le à 100 %. Oui, quand on ajoute 100 %, c'est corrigé, et maintenant ça a l' air plutôt beau. OK, maintenant cliquez sur Enregistrer le greffon pour enregistrer la modification. 22. Concevoir la section Contact: Bonjour, tout le monde. Nous devons maintenant concevoir ce ctaxon pour cela Repartons de zéro. abord, je vais cliquer sur ce cadre passer à cette disposition en grille et décocher ce bouton de hauteur, cliquer sur ce bouton Afficher pour afficher la grille Et ici, nous avons une grille de 12 colonnes six pour cette section et six pour cette section. Nous devons ajouter une colonne contenant 50 % pour ce texte et 50 % pour le formulaire. Alors faisons-le. Ici, cliquez d'abord sur l'icône Li plus, puis sur Flexbox, et ici nous devons ajouter la ligne de direction Et ici, dans la mise en page avancée, ajoutons 1224 en haut et un style, cliquez sur le type d'arrière-plan et changeons la couleur en cette couleur primaire. OK. Nous devons maintenant ajouter ces textes. Ajoutons ces textes pour ce faire. Nous pouvons cliquer ici et simplement ajouter le titre comme celui-ci et passer au style, changer la couleur du texte en blanc et la typographie sera l'en-tête et l'alignement sera laissé à et la typographie sera l'en-tête et l'alignement sera laissé Et pour ce qui est du contenu, ajoutons ce texte comme ceci, puis collons-le comme ça. Il faut ajouter la ligne ici pour le faire. Nous pouvons simplement ajouter une balise BR comme celle-ci. Et si vous voyez que cette partie supérieure et que la partie inférieure de ce texte sont de deux types, vous pouvez simplement cliquer ici et modifier la hauteur de la ligne. Dans mon cas, c'est 50. Si vous en avez moins de 50 ou si cela ne semble pas bon. Vous pouvez cliquer sur Gérer les téléphones internationaux, puis ici, ajouter une hauteur de ligne et cliquer sur Enregistrer les modifications. Revenons maintenant en arrière et ensuite, ce que nous devons faire est de dupliquer celui-ci, cliquer sur Dupliquer et lorsque nous le dupliquons, il s'affiche de cette façon parce que nous avons sélectionné Pro Donc, pour y remédier, je clique sur Ajouter un élément et j'ajoute un nouveau conteneur. Et pour ce contenant, je vais supprimer toutes les marges et les rembourrages et lors de la mise en page, j'ajouterai la largeur à 50 % Ensuite, je peux ajouter ces articles dans ce conteneur comme ceci. OK, maintenant il a 50 % de taille. Autre texte. Cliquez ici et changeons le style en sous-en-tête. Copions le sous-en-tête à partir d'ici et collons-le comme ceci OK. Je vais maintenant changer cette balise HTML en H trois. Cliquez ensuite avec le bouton droit de la souris et dupliquez à nouveau ce texte. Ajoutez ensuite le texte de ce paragraphe, copiez-le et collez-le comme ceci, puis changeons copiez-le et collez-le comme ceci, la balise STML en paragraphe pour P, puis dans le style, changeons la typographie en paragraphe, comme Ensuite, ce que nous devons faire est d' ajouter ces icônes pour ce faire. Je vais cliquer ici et rechercher dans la liste ici, nous avons une liste d'icônes, donc je vais juste ajouter une liste d' icônes comme celle-ci. Ensuite, je vais supprimer les icônes inutiles et je clique ici. Ensuite, les textes de la liste d'icônes seront ce texte suffit de copier ce texte et l' icône sera cette coche Il suffit de rechercher, de vérifier et c'est parti, c'est parti. Nous avons cette coche ici. Ici, nous pouvons voir cette même coche puis cliquer sur OK, n'est pas sûr car dans le style de l'icône, la couleur est cette couleur d' arrière-plan Passons au blanc comme ça. OK. Ajoutons maintenant le contenu Earl avant modifier l'espacement ou le style. Dupliquez-le deux fois et collez les réservoirs. Nous devons donc copier celui-ci, mettre les réservoirs en phase. OK. Maintenant, nous devons ajouter ce texte, il suffit de copier le texte, de dupliquer celui-ci et de le mettre en bas comme ceci. Collez ensuite ce texte. OK. Il ne nous reste plus qu' à ajouter de la taille. abord, nous devons déterminer la hauteur totale de cette section ou nous pouvons simplement en ajouter 30 en haut et en bas, puis nous pouvons grandir à partir de là. Cependant, ajoutons la hauteur minimale, donc je clique ici et nous avons ici la hauteur minimale de 851, donc cliquons sur ce conteneur principal et sur la chaîne de mise en page La hauteur minimale est de 851 Ensuite, un élément de ligne sera placé au centre. OK. Maintenant, changeons cet eTylet, allons dans Estyle et dans Estyle, découvrons quel type de style. La taille des icônes est de 22 et l'espacement est de quatre, ajoutons ces détails sur la taille de l'icône est de 22, l'écart est de quatre et l' alignement sera en position verticale à gauche, nous n'avons pas besoin Faisons en sorte qu'il soit égal à zéro, et au moins un espace entre les deux sera égal à dix. Ajoutons dix comme espace entre les deux, puis le texte sera tipogapy et la couleur du texte sera cette couleur secondaire, car nous n'avons pas besoin d' Bien, nous avons conçu cette section avec succès . Maintenant, nous devons créer ce formulaire. Pour ce faire, nous devons d'abord créer un conteneur, alors cliquons ici et cliquez sur Ajouter un élément et voici juste un conteneur comme celui-ci. Ajoutons-le comme ça, alors la largeur du conteneur sera de 50 %. OK. Maintenant, vous pouvez changer la couleur d'arrière-plan en blanc sur chaque tuile. Cliquez ici, la couleur du type d'arrière-plan sera blanche et les coins seront également vides. Donc, à bord, le rayon de la frontière sera de deux. OK. Maintenant, nous devons l' ajouter. Il suffit de parier à partir d'ici et de cliquer ici et d'ajouter un titre, puis sur le texte, puis de remettre le DML en paragraphe et en un style, l' alignement est laissé à paragraphe et en un style, l' alignement est Je pense que c'est et que la typographie sera paragraphe et que la couleur sera cette couleur du texte Il faut maintenant ajouter le rembourrage. Découvrons le rembourrage Cliquez ici, 20 à gauche et à droite 30, en haut et en bas, ajoutons ces détails Pour ajouter ces détails, je vais sélectionner le conteneur. Conteneur à l'avance dans la marge et rembourrage en haut, c'est 30, 20, en bas, 30, à gauche 20 OK, c'est sympa. Il faut maintenant ajouter ce formulaire. Pour ce faire, il me suffit cliquer ici et de rechercher un formulaire comme celui-ci. Ensuite, déposez simplement le formulaire comme ceci. Nous avons maintenant des champs de formulaire. Ajoutons-les donc un par un. Tout d'abord, nous avons le nom complet. Je copie simplement le texte, et dans le nom, le type de texte sera du texte et l'étiquette sera nommée. Ajoutez simplement le nom, placez la soudure avec le nom requis et cliquez sur cette icône requise Et ici, je vais cliquer sur cette étiquette pour la masquer, afin que les étiquettes ne soient pas affichées. Ce ne seront donc que des espaces réservés. Maintenant que nous avons un e-mail, copiez simplement le texte et rendez-vous ici par e-mail, le type sera e-mail, l'étiquette sera e-mail et l'espace réservé sera e-mail est un champ obligatoire Alors nous avons un message pour le moment, je vais le supprimer, et maintenant je clique sur Ajouter un article, et qu'avons-nous ? Nous devons ajouter le téléphone. Il suffit donc de copier le texte et de le placer ici, puis l'espace réservé sera alors nous devrons changer ce type en nombre comme celui-ci, pas en nombre, il devrait être t TES. OK. Ensuite, nous devons ajouter cette entreprise, copier ce texte, et je vais simplement le dupliquer à partir d'ici. Ici, le type sera du texte, l'étiquette sera une composition et l'espace réservé sera compagne D'accord, ce n'est pas obligatoire, mais le numéro de téléphone est obligatoire. Maintenant, je vais ajouter cette étiquette, il suffit de copier le texte et de cliquer sur Ajouter ici, changer en SMS au SDMLte comme ceci Continuons comme ça pour le moment. Nous devons maintenant ajouter cette case à cocher pour ce faire. Nous pouvons cliquer sur un élément publicitaire et le remplacer par une case à cocher et le libellé de la case à cocher sera même. Maintenant, nous devons ajouter l'option Maintenant, ajoutons d'abord ces cases à cocher, copions ce texte et collez-le comme ceci. Ensuite, le suivant copie ce texte, colle comme ça, ensuite, copie ceci, colle-le comme ça, puis copie cette prise, colle-le comme ça, puis copie ce texte et colle-le comme ça. Maintenant, vous pouvez voir le titre ne s' affiche pas pour le corriger, nous pouvons cliquer sur l'élément publicitaire et le définir au format HTML Ensuite, nous pouvons simplement ajouter du texte HTML. Je vais le dire à ce sujet. En fait, je devrais être l'objectif principal du texte de coaching ici, ajoutez-le comme ceci. OK, maintenant cochez cette liste en ligne la liste ressemble à ceci. Passons design. Après avoir ajouté des champs de message, nous devons ajouter cette boîte de message ou les zones de texte. Pour ce faire, cliquez sur Ajouter Supprimer et changez le texte en zone de texte, puis l'étiquette sera Comme ça, alors le lieu de vente sera ce texte et ce n'est pas obligatoire. OK, maintenant nous avons le formulaire complet et le texte du bouton devrait être « demander, envoyer des demandes ». Allons donc ici et changeons le bouton envoyer pour envoyer des demandes. OK, maintenant nous devons ajouter le It 23. Concevoir le formulaire de contact: Bonjour, tout le monde. Maintenant, il faut ajouter l'Esty, cliquez sur cette icône en forme de crayon pour l'ajouter. Passons maintenant au style Esty.O, l'écart entre les colonnes. Nous n'avons pas besoin de l'écart entre les colonnes, mais de l'écart entre les lignes Passons à l'élément design et découvrons l'écart entre les lignes. Il est 15 ans. Ajoutons un écart de 15. L'écart entre les colonnes est dû au fait que si nous avons champs en ligne tels que le prénom ici et le deuxième nom ici, nous devons tenir compte de l'écart entre ces champs horizontaux, mais dans ce cas, nous n'avons ce type de champ nulle part. Disons 15. OK, maintenant l'étiquette est un espacement, nous pouvons ignorer cette partie de l'étiquette, et maintenant nous avons le champ STML Donc, sur le champ STML, l'espacement semble déjà correct, alors la couleur le sera réellement, nous devons changer de La couleur est cette couleur, il suffit de copier le code couleur et rythmer ce code couleur comme ceci. Ensuite, dans le champ STML, adaptez également cette couleur comme suit La typographie est un paragraphe, il faut ensuite modifier les champs Sur les champs, les couleurs du texte seront cette couleur de texte, puis la typographie sera la couleur puis la typographie sera la paragraphe et de l'arrière-plan, gardez la couleur d'arrière-plan blanche car la couleur de premier plan est également Bon, maintenant nous devons trouver la couleur de la bordure. Donc, la couleur de la bordure est, je pense, aussi la couleur que nous avions déjà. Voici donc la couleur. En fait, ce n'est pas cette couleur. Copiez simplement ce code couleur, et allons-y. Ensuite, sur la couleur de la bordure, ajoutez cette couleur. Et maintenant, la largeur de la bordure, déterminons la largeur 1 puis le rayon de la bordure sera de six OK. Ajoutons six comme rayon de bordure. Plutôt bon. Que devons-nous faire maintenant ? Nous devons maintenant passer à bouton dans bouton , la position sera laissée comme ceci, puis la typographie sera un bouton et le type de bordure ne sera aucun Nous n'avons pas besoin d'un type plus audacieux. La couleur d'arrière-plan est cette couleur principale survol, la couleur sera celle-ci, la couleur du survol comme celle-ci OK. En fait, nous devons changer la couleur du texte, comme ceci. OK. Maintenant, nous n'avons pas à soucier du bouton précédent car nous n'en avons pas. Et le rayon de bordure du bouton sera de 60, et découvrons que la taille est de 22, 33. Le rayon de bordure est donc de 60, et le remplissage du texte sera de 22 en haut, droite, 33, en haut, en bas, 33 à gauche, comme ceci Puis un message. La typographie du message sera donc paragraphe et la couleur du message de réussite sera ajoutons une couleur verdâtre. Cette couleur sera une œuvre. Colorions comme ça, alors la couleur sera cette couleur rouge. Dans la couleur du message en ligne, gardons-la par défaut et les étapes, nous pouvons simplement ignorer les étapes. Et c'est plutôt bon. Si nous voulons augmenter la taille de cette zone de texte, nous pouvons simplement aller au contenu et voici la zone de texte, et ici nous pouvons ajouter des lignes. Ajoutons-le comme cinq. OK. Maintenant, nous devons améliorer cette case à cocher. Pour ce faire, sur Estyle, nous devons découvrir le style de la case à cocher En fait, nous n' avons pas de style de case à cocher, nous devons donc le garder comme ça Pour ajouter un style de case à cocher, nous avons utilisé du CSS, je vais donc faire quelques leçons pour ajouter du CSS à l'avenir. Pour l'instant, restons comme ça. Notre formulaire est maintenant rempli. Nous devons maintenant configurer le formulaire et lors des prochaines leçons, nous le configurerons pour recevoir des messages sur notre tableau de bord WordPress et des messages sur notre boîte e-mail. Maintenant, je clique ici et je clique sur Enregistrer 24. Conception du pied de page: Bonjour, tout le monde. Nous devons maintenant concevoir la section de pied de page. Allons-y. Ici, nous enregistrons simplement le brouillon, et maintenant je passe au tableau de bord WordPress, je vais enregistrer à nouveau le brouillon et m'assurer qu'il est correctement enregistré. OK. Maintenant allons-y, partons d'ici et accédons au tableau de bord WordPress. À partir de là, sur les modèles, cliquez sur eux Builder sur eux Builder. Nous avons ce pied de page ou nous pouvons simplement cliquer ici et nous avons déjà créé le pied de page vide Retirez-le et regardez-le de zéro. Maintenant, je peux cliquer dessus et aller dans pied de page ou cliquer ici et sur Nouveau, puis le supprimer et cliquer ici et renommons simplement le titre en pied de page, comme ceci et renommons simplement le titre en pied de page, OK. Maintenant, ce que nous devons faire est de cliquer sur cet eigon plus et de cliquer sur la case Complexe, et nous serons une ligne de direction comme celle-ci Ignorez cette zone. Il n'apparaîtra pas sur le dessin. Et maintenant, il ne reste plus qu'à vérifier la taille. La hauteur est de 382. Faisons en 380. Ici, la hauteur minimale sera de 380. Ensuite, un style, cliquez sur le fond trempé, puis ajoutez la couleur d'arrière-plan comme couleur de texte. Voyons voir, la couleur de fond est la couleur du texte. OK. Maintenant, nous pouvons simplement cliquer sur publier et ici, cliquer sur ajouter une condition et définir l'ensemble du site, puis cliquer sur Enregistrer et fermer. De cette façon, nous pouvons voir qu'il s'applique réellement au site Web ou non. Je vais maintenant aller sur le site Web et voyons à quoi cela ressemble. Cliquez sur Telementor édité, nous n'avons toujours pas publié le site Web, nous devons donc aller voir l'éditeur pour le vérifier, et c'est parti nous devons donc aller voir l'éditeur pour le vérifier, et c'est Nous avons ici la section Puta. OK, nous sommes sur la bonne voie. OK, maintenant je vais cliquer sur cette icône plus et ajouter un conteneur. Et dans ce conteneur, fixons la marge et le rembourrage à zéro Et ici, nous devons ajouter cet en-tête, donc je peux simplement cliquer sur Exporter et l'exporter au format PNG ou nous pouvons simplement créer cette typographie, créons-la en typographie Ce n'est qu'un simple texte maintenant, donc pour ce faire, je vais aller dans le pied de page, cliquer ici et ajouter un titre comme celui-ci Ensuite, dans le style e sur la typographie, voyons les valeurs C'est du Nonito 39 volts. Non, nous devrions avoir 39 volts. OK. Ça a l'air bien. Ensuite, je copie simplement ce texte et je le place ici, puis nous devons le changer de couleur en blanc secondaire, la couleur secondaire comme celle-ci. OK. Maintenant, ce que nous devons faire, c'est simplement ajouter ce texte, copier le texte et en fait, sur le contenu, passer à trois pour la balise TML, puis je la dupliquerai et nous passer à trois pour la balise TML, puis je en ferons un P ou un paragraphe Mettez ensuite le texte en phase sur le style E. Il s'agira du texte du paragraphe, et la couleur du texte sera celle par défaut. OK. Maintenant, cette section est bonne. Maintenant, nous devons ajouter un nouveau conteneur, il suffit de cliquer ici et d'ajouter un conteneur comme celui-ci et à l'intérieur de ce conteneur, nous avons un lien rapide. Copiez le texte du lien rapide et ici, cliquez ici et ajoutez un nouveau titre comme celui-ci, puis ajoutez les réservoirs et sa taille est l'alignement des sous-en-têtes sera centré comme La couleur est alors secondaire. Ensuite, nous devons ajouter ce menu. Pour ajouter ce menu, nous devons créer un nouveau menu. Pour l'instant, publions ces modifications et maintenant nous devons accéder au tableau de bord WordPress sur le tableau de bord WordPress, les menus d'apparence, et nous avons ici le menu principal. Maintenant, cliquez sur Créer un nouveau menu et dans ce nouveau menu, je vais l'ajouter en tant que menu de pied de page Comme ça, cliquez ensuite sur Créer le menu et pour le pied de page, nous devrons ajouter ces sections Pour l'instant, ajoutons le hashtag en tant que lien. Ici, non ici, nous avons la page d'accueil. Nous pouvons simplement l'ajouter au menu, puis accéder à la balise de hachage personnalisée Links URLs, et le texte du lien sera le premier à propos d'ici, premier texte portera sur et hashtag, le deuxième texte sera le service, et le troisième texte contiendra le contact, et non Contact, balise de hachage des URL, puis termes et conditions comme celui-ci Ensuite, appliquez une politique de confidentialité comme celle-ci et ajoutez un hashtag, cliquez sur Ajouter à OK, notre menu de pied de page est terminé Maintenant, je clique sur le menu S et je n'ajoute rien de tout cela. Je vais maintenant rafraîchir la page. Ensuite, je recherche ici le menu comme celui-ci et je copie le menu Word Pres et je le place ici, puis je sélectionne le menu. Il est déjà sélectionné. L'alignement se fera au centre, et au point de cuisson, je vais définir le point d'arrêt comme nul parce que nous avons besoin d'un menu texte comme celui-ci Vous serez vertical. Rendons cette couleur visible. Nous voulons du style, la typographie sera Mnuulin et la couleur du texte sera cette couleur OK, nous avons ici le menu et maintenant, pour ce qui est du contenu, nous pouvons apporter les modifications nécessaires Ici, le soulignement ne sera pas souligné. Le pointeur ne sera pas comme celui-ci, alors l'icône que nous n'avons pas d'icône. Nous pouvons maintenant passer au style E. Au survol, définissons le style en surcouleur et en mode actif, définissons la couleur primaire pour le rembourrage actif et horizontal . Voyons voir. Le motif horizontal sera nul, mais nous avons le rembourrage vertical Découvrons le rembourrage entre ces articles. Il est 15 ans. Ajoutons que la valeur est 15. OK. En fait, ce n'est pas un rembourrage vertical. Faites en sorte que le rembourrage vertical soit égal à zéro et que l'espace entre les deux soit 15, comme ceci OK. Maintenant, nous n'en avons pas de liste déroulante, nous pouvons donc l'ignorer, et maintenant elle a l'air bien. Ici, nous devons trouver l' espace entre les 30. Nous pouvons facilement ajouter un clic ici et dans les espaces, nous pouvons ajouter un écart brut de 30. OK. Nous avons maintenant cette section centrale. Ensuite, nous n'avons qu'à créer cette amende sur les réseaux sociaux, il suffit de copier le texte, et nous pouvons simplement dupliquer ce conteneur parce que nous n'avons pas besoin de le faire encore et encore Je vais donc le dupliquer, et dans ce texte, je vais simplement ajouter celui-ci, supprimer ce menu, puis ici je vais faire une recherche sur les réseaux sociaux. OK, ici, nous avons des icônes sociales, ajoutez-les simplement ici et ajoutons l'icône sociale. En fait, il a un lien sur Facebook et Instagram. Facebook est donc au milieu, alors passons au milieu, et ce n'est pas Twitter Cela devrait être lié. Lien et ici nous devons ajouter l'URL. Je vais simplement ajouter l'URL du site LinkedIn, mais dans les UA ou sur le site Web réel, vous devez ajouter ici l'URL de la page LinkedIn ou de la page de réseau social Et la couleur, je ne vais pas ajouter de couleur officielle, je vais ajouter du Hasm mais on peut l'ajouter sur le I dies Pour l'instant, gardons-le comme couleur officielle. Sur Facebook, nous allons simplement accéder à l'URL Facebook comme ceci. Également sur l'option lien, nous pouvons l'ouvrir dans une nouvelle fenêtre. Lorsque quelqu'un clique dessus, il s'ouvre dans une nouvelle fenêtre. Et ici, nous devons ajouter Instagram, cliquer ici et rechercher l'icône Instagram. Insérez et voici l'URL de la page Instagram. D'accord, la forme sera arrondie ou faisons-en un cercle et la colonne sera automatiquement alignée au centre. Découvrons maintenant la taille, hauteur et d'autres choses. La largeur est de 51 par 51 et 15 15 est la taille de. Passons au style et changeons cette couleur officielle pour passer ici à la couleur principale, la couleur secondaire sera la suivante. La taille doit être 51 51. 51 c'est trop gros. Non, la taille n'est pas 51. La taille de l'icône doit être de 21. Faisons en 22, 22, comme ça. Rembourrage, découvrons le rembourrage. Le stylo a 15 ans. Passons au PaddinSF 15 et non à l'EM, faites en sorte qu'il soit réparateur comme ça Alors l'espace entre les deux sera égal à six. Faisons cela entre les lignes et les lignes. Nous n'avons pas besoin d'un écart entre les lignes. Ensuite, rayon de bordure, faisons-le comme C, maintenant nous pouvons ajouter des éléments de survol d' icônes Faisons de la couleur primaire une couleur de survol comme celle-ci et la deuxième couleur sera cette couleur noire comme celle-ci, voyez Si nous le voulons, nous pouvons ajouter son animation. Grandissons comme ça et maintenant c'est joli. Bien. Si elle vous semble trop petite, augmentez la taille de l'icône. Faisons en sorte qu'il soit 26 et c'est bon. C'est bon. Nous avons conçu avec succès notre pied de page. Voyons à quoi ressemblera le pied page et sur le conteneur principal, nous pouvons l'ajouter sous forme d'espace entre les deux, afin qu'il s'ajuste en fonction de l'espace du site Web, et maintenant nous devons ajouter le rembourrage en haut, le rembourrage est de 30, qu' en est-il du Rembourrage inférieur, faisons-en 20. Mais pour l'instant, ajoutons le rembourrage à 30 en fait. En bas, c'est 30. À l'avance, faisons en sorte que ce ne soit pas une marge, en ajoutant 30 en haut, en bas ou 30. OK, il ne nous reste plus qu'à ajouter cette section sur les droits d'auteur. Voyons donc le personnel. Nous avons donc ici une ligne. Je vais cliquer sur cette icône plus et sur le séparateur de ligne de recherche. Ici, nous avons le diviseur. Pour ce faire, nous devons créer un nouveau conteneur. Cliquez ici, cliquez sur Flexbox et ajoutez diviseur de colonne de direction, car cette colonne est horizontale, mais nous avons besoin de la mais nous avons besoin maintenant à ce style, Passons maintenant à ce style, adaptons-le à cette couleur de texte comme ceci. En termes de disposition, hauteur moyenne, nous n'avons pas besoin de hauteur moyenne. Nous devons donc maintenant ajouter le diviseur. Cherchons simplement le diviseur et faisons-le glisser comme ceci. Ensuite, un style, changez-le en couleur secondaire, et voyons plus d'informations, augmentez-le et voyons que la hauteur du diviseur est égale à un C'est en fait une frontière de toute façon. OK. Maintenant, la largeur est de un, l'écart sera de 15. Je pense que c'est 15 ou 20. Euh, l'écart est de 20, donc faisons en sorte que GAP soit zéro, et ajoutons 20 au texte. Pour l'instant, ajoutons 15 comme écart, mais faisons-le en utilisant le texte. Pour ajouter le texte du copyright, je vais ajouter le titre comme ceci Ensuite, sur ce titre, nous utiliserons une balise dynamique, cliquerons sur la balise dynamique et vérifierons la date Ici, nous avons la date et l'heure actuelles format de date sera personnalisé et nous n'avons besoin que du ici, donc je ne garderai que Y rest. OK, ici, nous avons le texte ici, mais ici, nous avons besoin du copyright, du actuel et du reste du texte. Je vais donc recopier tous les ts et ici à l'avance pour avant d'ajouter ce texte complet et pour avant nous n'avons besoin que de cette partie. Je vais juste copier. Ensuite, nous aurons besoin de cette pièce comme celle-ci. OK, ajoutez de l'espacement en fait, ouvrons-le dans l'éditeur de texte, et ce jour-là, nous pourrons voir tous les détails Pour l'instant, je vais simplement copier le texte, et maintenant je vais ouvrir l'éditeur de texte. Je viens d'ouvrir l'éditeur HTML W Three School. Je vais donc cliquer sur Essayer vous-même, et nous avons ici le moyen d'ajouter le texte HTML. Donc, en ce qui concerne le design, lorsque nous ajouterons ce texte, changeons le style en Menlink. Je pense que c'est Menu. OK, c'est la typographie, c'est le lien humain maintenant ici, donnez-lui le style Menlink et la couleur du texte sera de cette couleur, et l'alignement sera centré comme ça, ce texte est en lien manuel donnez-lui le style Menlink et la couleur du texte sera de cette couleur, et l'alignement sera centré comme ça, ce texte Maintenant, lorsque je clique sur cette Hannah Clark ou sur l'URL du site Web, cela devrait être redirigé vers la page d'accueil de ce site Web, comme si vous êtes designer, vous pouvez ajouter du texte comme celui-ci Après réception, nous pouvons ajouter quelque chose comme conçu par le designer XYZ Et lorsque quelqu'un clique sur ce designer XYZ, il doit être redirigé vers notre site Web, le site Web de notre portfolio Copions donc ce texte et allons dans SDMLEditor pour le rendre Donc ici, je vais mettre un tag. Donc, ici à Baggot AHF, je vais ajouter cette balise d'ancrage ou la balise A dans la section des ressources Et ici, nous devons ajouter l'URL du site Web. Voici l'URL du site Web, copiez-la et placez-la dans ce HF et ciblez ici un NU égal, puis fermez le tag A comme ceci. ML est assez simple. Et ce n'est que pour le HTML, vous pouvez en savoir plus sur le DML on W Three Schools Nous devons donc ajouter le nCat ou un lien vers ce texte, car il s'agit sites Web de notre portefeuille d'entreprises pour le faire à AhF égal et le fermer Fermez ensuite le NCatc comme ceci. Alors ici, au FS. Ajoutons-le HTTP, Ts collalah XY Il s'agit simplement d'une fausse URL. Il doit s'agir de l'URL du site Web et de la cible égale à la nouvelle moyenne, cela s'ouvrira dans une nouvelle fenêtre. Voici donc le code complet que nous devrons ajouter après 2025. Copiez le code et puis ajoutez ce texte. OK, maintenant ça ressemble à ça, testons-le après avoir ajouté d'autres détails. Tout d'abord, je vais passer au diviseur et au diviseur, l'écart sera de Co. Et sur ce texte de copyright, il faut en ajouter 20 comme taille intermédiaire. Pour ce faire, il suffit de cliquer sur ce texte de copyright et de passer à l'étape suivante. Le rembourrage du haut sera de 20, le rembourrage du bas sera de 20 comme celui-ci. De plus, si vous souhaitez pétrir ce texte dans une couleur différente, vous pouvez ajouter cette couleur du style, la couleur de fond sera : assombrissons-le comme ça, mais je vais garder la couleur d'origine car nous avons ce séparateur pour diviser ces deux sections Maintenant, vérifions-le en action. Nous créons simplement un titre et sur le titre, nous utilisons une balise dynamique et un paramètre de balise dynamique à l'avance, nous ajoutons avant une partie comme et nous devons ajouter cet espace ici et après une partie en tant que STM et aussi sur une balise dynamique, nous pouvons faire beaucoup Et maintenant, je vais publier cette section et vérifions-la dans le design. Je vais donc aller sur un site Web comme celui-ci et ici nous avons le pied de page, puis si je clique sur ce Sana Clark, il s'ouvrira dans une nouvelle fenêtre Et si je clique sur le site Web de notre concepteur, il s'ouvrira également dans une nouvelle fenêtre. En fait, nous avons une société appelée XYC Designers, mais je l'ai juste comprise sous le nom de Dum content Okay Comme nous pouvons utiliser le CSS pour changer ces styles, mais pour l'instant, restons comme ça. Maintenant, notre footy est terminé et je pense que je vais cliquer sur Modifier avec Elementor Je pense que notre version de bureau du site Web est entièrement développée, et maintenant nous pouvons la publier et vérifier la vue réelle. Je clique sur publier et maintenant je clique sur cet œil pour prévisualiser. OK. Maintenant, voyons voir, allons-y. Nous avons un site Web entièrement fonctionnel. Nous pouvons ajouter plus d'ESTA pour plus tard et nous avons ici un problème. Ce contexte devrait couvrir l'ensemble de la section. Réparons-le. Cliquez ici et un style, la taille de l'écran sera couverte. Il doit être couvert. Oui, comme ça. Donc. Cliquez maintenant sur publier et ce sera automatiquement refait. OK, nous avons ici l'en-tête. Nous pouvons ajouter des animations plus tard, et maintenant ça a l'air bien. Ensuite, nous avons la mousse et ici nous avons le pied de page. OK, ça a l'air plutôt bien. 25. Configuration de la messagerie: Tout le monde, ajoutons des fonctionnalités à ce formulaire. Donc, dans ce formulaire, ce que nous devons faire, c'est que si notre client ou visiteur a rempli ce formulaire, nous devrions recevoir ces informations dans notre boîte e-mail. Donc, avec Elemento Pro, il existe deux manières d'obtenir ces e-mails ou ces données de contact La première est que nous pouvons l'obtenir via la soumission d'éléments ou de formulaires. Si nous procédons à cette action après l'avoir soumise, qui signifie que si quelqu'un a cliqué sur ce formulaire de demande et qu'il a rempli le champ requis, nous pouvons collecter la soumission et obtenir ces informations par e-mail. Parlons donc d'abord de la collecte des soumissions. Pour ce faire, je vais sur le tableau de bord Wordpress, et sur le tableau de bord Wordpress, dans Elemento, nous pouvons voir cette soumission vous suffit de cliquer dessus, et nous n' avons actuellement aucune soumission. Essayons donc ce formulaire et voyons quels types de détails nous obtiendrons. Pour ce faire, je vais page du formulaire et sur un élément de l'éditeur, je clique simplement sur cette icône en forme de crayon et configurons tous ces éléments. Ici, je vais simplement ajouter une soumission collectée, ce qui signifie que nous obtiendrons les détails L dans cette section de soumission. Ensuite, lors de la collecte, nous pouvons ajouter le type de détails que nous devons recevoir. concerne les métadonnées, nous pouvons obtenir l'adresse IP de l'utilisateur et l'agent utilisateur, qui signifie que lorsque le visiteur remplit ce formulaire ce qui signifie que lorsque le visiteur remplit ce formulaire et clique sur Envoyer la demande, nous pouvons obtenir l'adresse IP de la personne et d'autres détails tels que le type de navigateur qu'il utilise , etc. Ensuite, nous avons le réglage des étapes. En fait, nous n'avons pas besoin de paramétrer les étapes pour ce formulaire car nous n'avons qu'un formulaire d'une seule page et si vous avez formulaire d'une seule page et options supplémentaires pour la validation du formulaire, définissez-le comme valeur par défaut du navigateur, ce qui signifie que si quelqu'un ne remplit pas les formulaires requis, cette personne recevra un message. Et sur les messages personnalisés, si je les active, nous pouvons modifier ces messages. Lorsque quelqu'un envoie des demandes avec succès, il verra que votre demande a été envoyée avec succès, mais nous rendons cela plus humanisé et convivial Nous pouvons simplement ajouter quelque chose comme si votre demande avait été envoyée avec succès. Alors voilà, nous pouvons vous dire, Hannah, que nous vous répondrons sous peu Donc, en cas d'erreur, nous pouvons également modifier ces messages, mais je ne vais rien changer. Pour le moment, nous enregistrons cette page en tant que brouillon. Mais pour tester cela, publions cette page. De cette façon, nous pouvons consulter le vrai site Web sur la page d'accueil comme ceci, puis je passerai dans la section du formulaire, et ici je vais entrer mes coordonnées. OK, il suffit de remplir le formulaire maintenant, je vais cliquer sur ce bouton d'envoi de demande et voyons ce qui va se passer. OK, maintenant que nous avons reçu ce message de réussite, passons maintenant aux soumissions, et dans les soumissions, je vais supprimer la page OK, nous avons ici les Emas que je teste. En fait, je le teste deux fois, alors examinons la première. Je clique donc simplement sur le bouton Afficher. Et c'est parti. Maintenant, nous avons les détails, et vous pouvez voir les pièces du formulaire que nous avons reçues. Nous avons ici le champ d'appel de test ou le CB et nous avons envie de creuser. Il s'agit donc du champ STML que nous avons ajouté, nous pouvons donc simplement l'ignorer, et sur la base d'informations supplémentaires, nous pouvons voir l'adresse IP de l'utilisateur et l'agent utilisateur comme celui-ci Ainsi, lorsque quelqu'un remplit ce formulaire et envoie des demandes à ce coach d'affaires, la Hanna obtiendra de nombreuses informations sur cette page de soumission. De plus, comme je l'ai déjà dit, nous pouvons envoyer ces informations par e-mail, cet e-mail arrivera sur notre boîte e-mail. Essayons de le faire aussi. Pour ce faire, je vais cliquer sur cette icône plus après avoir soumis et défini l'e-mail. De plus, si je clique sur cette icône plus et que je consulte la liste ici, nous pouvons faire beaucoup de choses. Nous pouvons simplement configurer Milam, obtenir une réponse, une fenêtre contextuelle , le convertir et faire bien plus de choses Il existe également un champ appelé E-mail, qui signifie client ou si les visiteurs nous envoient un e-mail, nous pouvons renvoyer un e-mail à cette personne parce que cette personne a son adresse e-mail sur cette boîte e-mail. Donc, en utilisant également le courrier électronique, nous pouvons envoyer un e-mail à l' adresse e-mail à laquelle il adhère. Donc, si je retire cet e-mail et que je vois ici, ici, nous n'avons que cet onglet e-mail, mais lorsque nous ajoutons un e-mail ici, nous avons la possibilité d'ajouter la deuxième image Créons maintenant un compte de messagerie et faisons en sorte que les e-mails fonctionnent. Pour ce faire, je vais aller sur Spanel de l'hébergement de mon site Web et il dispose de fonctionnalités de compte de messagerie. Je vais donc faire défiler la page vers le bas ou je peux rechercher ici e-mail ici, Je vais donc faire défiler la page vers le bas ou je peux nous avons un compte e-mail Cependant, si nous effectuons une recherche vers le bas, nous pouvons voir la section e-mail. Dans la section e-mail, nous avons les comptes de messagerie. Il suffit de cliquer sur et ici nous pouvons créer un nouvel e-mail. Je vais cliquer sur ce bouton Créer. Ensuite, je dois sélectionner le domaine. Je vais donc sélectionner ce domaine, et voici notre domaine , hnadt custom website Je le sélectionne simplement, et ici nous devons ajouter le nom d'utilisateur. Je vais donc créer deux e-mails, un e-mail pour le destinataire, afin que nous utilisions pour envoyer des e-mails depuis notre site Web. Et le deuxième e-mail est le courrier électronique du destinataire. Ainsi, le destinataire recevra l'e-mail lorsque nous enverrons des e-mails via notre site Web. OK, pour le nom d'utilisateur, l'e-mail du destinataire sera Hello at Hana Dot Custom Website Design Cette partie sera donc l'URL de votre site Web, et nous pouvons y ajouter un mot de passe. Nous pouvons générer un mot de passe comme celui-ci ou vous pouvez ajouter un mot de passe personnalisé. Assurez-vous de l' écrire quelque part ou de vous souvenir de ce mot de passe, car vous en avez besoin connecter à votre compte de messagerie. Je vais donc simplement créer un mot de passe. OK, je crée juste un mot de passe , puis je peux cliquer sur ce bouton Créer, et lorsque je clique sur le bouton Créer, l'e-mail est créé. Voici l'e-mail. Et ici, je peux cliquer sur cet e-mail de vérification et cocher la case e-mail. Vous pouvez donc configurer cet e-mail avec votre Gmail ou votre client de messagerie. Ainsi, vous recevez l'e-mail dans votre boîte e-mail sans vous connecter à la boîte e-mail comme ceci. Nous avons donc ici des informations sur notre e-mail, et nous utiliserons ces informations pour configurer la fonctionnalité de courrier électronique de notre site Web et configurer le SMTP OK. Maintenant, je vais voir les e-mails ci-dessous. Pour ce faire, je vais cliquer sur Créer et ici, choisir le domaine, puis j' ajouterai le nom de l'e-mail comme sur quatre. Ce nom d'e-mail sera donc un nom comme celui-ci ou mon nom. N'ajoutez simplement pas cet espace, créez l'e-mail comme celui-ci et pour celui-ci, je vais simplement ajouter des informations sur hanadt custom website design US OK, alors je vais saisir le mot de passe comme celui-ci, puis encore une fois, je vais cliquer sur Créer. OK, maintenant nous avons un e-mail Hello et des informations sur Hana Custom Website Design US email Maintenant, ce que nous pouvons faire, c'est passer à l'Elementoditor et à l'éditeur Elementor Nous pouvons configurer cet onglet e-mail. Nous devons donc ajouter ici l'e-mail. Donc, pour le courrier électronique, il y aura Hello Athnadt Custom Website Design US, deux seront le destinataire de l'e-mail et ici nous pouvons ajouter le sujet Ici, je vais changer ce sujet comme nouvelle demande de client pour le site Web d'Hannah Clark comme celui-ci Et dans les messages, j' ajouterai Earl Fields. Avec ce code abrégé Earl Fields, nous enverrons les détails du champ dans notre boîte e-mail, puis ici, nous devons ajouter à e-mail à partir du courrier électronique l'e-mail de l'expéditeur, donc ici nous le créons sous forme d'informations Voici l'e-mail de l'expéditeur. Je vais juste ici et simplement copier l'adresse e-mail et avouons-le comme ça et ici nous pouvons sélectionner la réponse à l'e-mail. Donc, ici, la réponse à doit être un champ e-mail. Champ e-mail de ce formulaire car lorsque nous cliquons sur le bouton de réponse, nous devons répondre à ce visiteur qui nous envoie un e-mail. OK. Ensuite, pour les métadonnées, nous pouvons ajouter toutes ces informations. Nous pouvons donc ajouter une URL de page diurne, nous n'avons pas besoin d'URL de page, d'adresse IP de l'agent utilisateur, de crédit. Et ici, nous ajoutons simplement les métadonnées Earl et définissons l'envoi au format HTML et à l'adresse e-mail, configurons également l'e-mail. Donc, comme je l'ai déjà dit, cet e-mail sera envoyé au visiteur qui remplira ce formulaire. L'e-mail de ce visiteur doit donc être celui qu'il saisit ici. Récupérons donc ce champ e-mail. Je clique donc sur ce champ de formulaire et sur e-mail, je vais sur Advance, et ici nous avons un identifiant de champ, un shortcode Je le copie simplement et par e-mail à, je vais simplement l'ajouter à l' e-mail comme ceci. Ensuite, nous devons ajouter le sujet et le message. OK, ajoutons un sujet, par exemple merci de nous avoir contactés et dans la boîte de message, nous n'avons pas besoin des champs Earl. Nous devons envoyer un message de remerciement et informer le visiteur que Hanna le contactera. Je vais le supprimer et ajouter des messages tels que, merci de m'avoir contacté, votre demande a été reçue avec succès et Hanna est ravie d'avoir de vos nouvelles. Un texte comme celui-ci ici, nous pouvons ajouter le nom de la personne. Pour ce faire, je vais aller dans les champs du formulaire et dans la section du nom complet, aller dans Advance et copier le code abrégé. Alors venez ici et ajoutez-le comme ceci et le courrier électronique du formulaire sera informatif à, copions-le à partir d'ici. L'e-mail du formulaire sera celui-ci il suffit de le copier et voici l'e-mail du formulaire. Le nom sera Hannah Clark et la réponse sera Hello at hana point, design de site Web personnalisé, et nous n'avons pas besoin de copie carbone, nous n'avons donc pas besoin d' envoyer Maintenant, nous avons un e-mail et un e-mail deux, je vais donc publier cette page. Regardons-le en action. Maintenant, je vais aller sur le site Web et supprimer le site Web . Passons au formulaire de contact remplissons ce formulaire et voyons si les e-mails sont envoyés ou non OK, je vais ajouter ici les détails du formulaire. OK, maintenant je vais cliquer sur Demande de consentement et voyons ce qui va se passer. message de votre demande a été envoyé avec succès et voyons voir qu'il est réellement arrivé dans la boîte e-mail. Nous avons donc reçu cet e-mail et nous avons ici une information. De cette façon, nous pouvons également obtenir les e-mails et voir l'e-mail ajouté par le visiteur. Dans mon cas, il s'agit de cet e-mail, donc le visiteur devrait également le recevoir. Nous y voilà sur mon compte e-mail. Nous avons reçu l'e-mail. Nous avons reçu cet e-mail comme celui-ci. Cependant, cet e-mail est sur une seule ligne, nous pouvons donc ajouter une ligne de rupture pour mieux le faire. Je vais aller ici et envoyer un e-mail ici, j'ajouterai juste le tag BR comme celui-ci et ici aussi le tag BR et ici nous pouvons simplement ajouter le tag BR et ici R comme ça, puis je peux publier et maintenant notre e-mail sera cassé pour les nouvelles lignes. Maintenant, nous avons une messagerie fonctionnelle au cas où les e-mails de votre site Web ne fonctionneraient pas, je vais vous montrer comment y remédier en configurant le plug SMTP 26. Résoudre les problèmes SMTP: Bonjour, tout le monde. Si votre formulaire ne fonctionne pas et que vous ne recevez pas les e-mails, corrigeons-le. Pour ce faire, allons d'abord sur le tableau de bord Worps, puis les plugins et cliquez sur At Plugin Maintenant, cherchons le plugin call SMTP. Il suffit de rechercher SMTP et vous verrez ce WP mail SMTP de WPForms, cliquez sur Installer, cliquez sur Je vais simplement cliquer sur Gb pour accéder au tableau de bord et le configurer manuellement. Alors maintenant, nous pouvons voir ce plugin SMTP de messagerie WP ici. Et sur ce plugin, nous pouvons configurer les données SMTP SMTP signifie protocole de transfert de courrier simple. Faisons-le d'abord sur les outils, vous pouvez disposer d'une fonctionnalité permettant d'envoyer un message de test ou un e-mail de test. Vous pouvez simplement ajouter l'adresse e-mail à laquelle vous souhaitez envoyer l'e-mail, puis cliquer sur SendMail, allons-y J'ajoute simplement l'e-mail et je clique sur Envoyer un e-mail et j'espère que cela devrait être envoyé car ma fonction de messagerie fonctionne correctement, elle envoie simplement comme ça. Et si vous n'avez pas reçu l'e-mail, vous pouvez voir un message ici. N'importe où, allons dans les paramètres et ajoutons d'abord le set, puis essayons d'envoyer l'e-mail. OK, maintenant je vais faire défiler la page vers le bas et je dois ajouter le mail d'origine. Je dis donc l'adresse e-mail à partir de laquelle les e-mails sont envoyés. Donc dans mon cas, ce sont des informations sur Hana Dot Custom Website Design US et cochez Hana Dot Custom Website Design US cette case de courrier électronique Force Fm Alors le nom du bal sera Hannah Clark. Et aussi, si nous le voulons, nous pouvons utiliser le nom FCEPom, qui signifie que ce nom sera le nom principal ou le nom de l'adresse e-mail de Fat Hana Dot Custom Designs OK, je vais juste m'en aller et le chemin de retour sera désactivé et sur le mailer, je prendrai cet autre SMTP Dans d'autres protocoles SMTP, nous avons du mal à configurer. Alors allons-y. Pour ce faire, je vais sur notre panneau C, et voici notre adresse e-mail, à partir de l'adresse e-mail. Alors maintenant, je clique sur ce bouton de connexion des appareils. Dans Connect Devices, nous pouvons découvrir ce paramètre de gestion du client de messagerie. OK. Maintenant, allons-y un par un. Tout d'abord, nous devons configurer l'hôte SMTP. Alors allons-y, et nous devons ajouter ce serveur sortant en tant qu'hôte SMTP Donc, il suffit de copier, de venir ici et de le coller comme ça. Et le chiffrement sera, voyons voir le chiffrement. C'est du SSL TLS, créons le TLS. Non, créons le SSL. OK, alors, pod SMTP, découvrons le pod SMTP. C'est 465. C'est déjà ajouté. Ajoutons ce pot et voilà que SM TPA utilise un nom et un mot de passe Le nom utilisé par le SMTP est donc l'adresse e-mail du courrier électronique. Il suffit de le mettre et vous devez ajouter ici le mot de passe que vous avez utilisé pour créer ce compte de messagerie. Et je vous ai déjà dit que le mot de passe est très important parce que vous avez besoin de ce mot de passe pour accéder à votre boîte e-mail. Je vais donc simplement l'ajouter comme ceci. Puis voici le réglage de sauvegarde d'Ilicon. Donc, si ce SSL ne fonctionne pas, il suffit de sélectionner le TLS et j'utilise le SSL OK, sauvegardez le réglage et passons aux outils. Envoyez ensuite l'exemple d'e-mail. Je change donc la valeur par défaut, courrier électronique SMTP, je l'ai configuré pour envoyer l'e-mail et voir ce qui va se passer OK, c'est une réussite. Alors voilà, nous avons ces messages et passons à notre boîte e-mail, et voici l'e-mail. Essayez cette méthode et voyez comment elle fonctionne. Donc, s'il n'envoie pas, vous voyez ici un message d'erreur. Vous pouvez utiliser l'AIGPD pour découvrir le problème ou vous pouvez simplement le rechercher sur Google et résoudre le problème D'accord, maintenant vous n' avez rien à faire, vous suffit de configurer le SMTP et selon vos données SMTV, cette boîte aux lettres devrait fonctionner Le mien était donc un mot prêt à l'emploi. Cependant, testons-le à nouveau, je vais donc renseigner ces informations. Maintenant, il suffit de cliquer sur Onsen request et voyons ce qui va se passer OK, nous avons reçu le message et voyons voir. Ici, nous avons reçu le message de remerciement comme celui-ci, et ainsi de suite, nous avons reçu le message du nouveau formulaire de demande client sur le site Web de Hannah Clark. OK. 27. Modification des couleurs: Il est maintenant temps de partir et nous devons maintenant résoudre les problèmes de réactivité et les autres problèmes d'interface utilisateur. Tout d'abord, lorsque nous passons la souris dessus, les boutons prennent cette couleur orange Cela semble un peu peu peu professionnel, cela ne correspond pas au thème du coach professionnel ni à la palette de couleurs Réparons-le. Pour le réparer, je vais cliquer sur Modifier avec Elemento et mon plan est survoler pour le faire apparaître dans la même couleur Fais-le, il faut y aller un par un et les corriger comme ça, cliquer sur le bouton et accéder à Estyle sur eTyleOh Passons de cette couleur à cette couleur, la même couleur et la couleur du texte seront blanches comme ceci. Maintenant, je peux cliquer et cliquer sur Copier, puis sur ce bouton, il suffit de l'écrire et de cliquer sur Pastyle Mais quand je changerai le design, j'appuierai sur Command Is ou Control sous Windows et modifions-le en cliquant ici et en accédant à Style on Ho, changeant ce blanc et changeant cette couleur primaire comme ceci. Ensuite, il suffit de cliquer sur le formulaire et sur Buttontyle. En fait faut aller sur le bouton et la couleur de fond sera la même et la couleur du texte sera la couleur blanche Nous n'avons pas à nous inquiéter pour le bouton précédent car nous n'en avons pas, puis nous devons le corriger ici, il suffit de cliquer ici et d'un style, je peux le changer en couleur hmary et comme ça Maintenant, ça a l'air plus professionnel qu'avant. Maintenant, je clique sur CF Bliz et nous devons corriger le même problème sur l'en-tête. Je clique sur cet en-tête pour modifier une partie, et c'est parti, cliquez dessus, puis sur la vignette Es sur Nova, changez la couleur en couleur par défaut comme ceci Maintenant, publiez-le , puis cliquons ici et cliquez sur Foot. Accédez à la section Futa. Sur FutaSection, nous devons faire la même modification pour changer l'icône du réseau social OK, ici, cliquez ici et sur le bord de l'icône Estyle, changez-la en cette couleur comme ça. Cliquez ensuite sur publier et passez à la vidéo suivante, résolvons le problème de réactivité. 28. Corriger la réactivité de la tablette: Bonjour à tous. Nous devons maintenant ajouter la réactivité de ce site Web Ce site n'est pas adaptatif sur tablette ou mobile. Commençons donc par le faire. abord, je passe à la version de bureau, et commençons par l'en-tête, alors cliquez sur cet en-tête pour modifier OK, maintenant je suis à l'en-tête, donc maintenant je vais cliquer sur cette version du portret pour tablette, et ici, nous devons d'abord ajouter de l'espacement à gauche et Cela sera donc intégré. Je clique donc sur Modifier le conteneur et sur Advance, vous pouvez voir ici que nous voyons maintenant la tablette Portrat et voici le bureau Voici le mobile. Donc, sur tablette, je vais dissocier cette valeur Ajoutons ensuite 20. Non, non, pas pour Top Top, il y aura zéro, c'est vrai 20. J'aime bien ça. Et puis, à l'étape suivante, le menu ne s' affiche pas correctement. Il est affiché sous forme de menu hamburger, mais nous en avons besoin comme menu normal car il y a un espace pour l'ajouter en tant que menu horizontal normal Donc, pour y remédier, nous pouvons simplement changer ce break pronto mobile Et de cette façon, le menu apparaîtra comme ceci. Ensuite, nous pouvons aller chez Style et régler ce genre de choses comme le rembourrage vertical Passons à six et réduisons l'espace I entre 20 Maintenant, il ressemblera à ceci sur la tablette et je pourrai cliquer sur ce conteneur, et ici j'ajoute l'écart entre les colonnes à 36. Faisons comme 25 Ensuite, allez dans le menu et ajoutez l'espace entre 25. OK, maintenant ça a l'air beaucoup mieux et la version tête sur tablette semble bonne. Et maintenant, passons à cette page principale pour le faire, abord, je vais le publier puis cliquer sur Modifier la page. Bon, maintenant je suis sur notre page d'accueil, je vais donc cliquer sur cette tablette Porto et là je dois aller dans Advance et ajouter un rembourrage à droite pour vider et à gauche pour vider comme ça Ici, je vais cliquer sur ce conteneur, et sur la mise en page, nous pouvons ajouter un centre de contenu justifié. Je veux juste mettre ça au centre. Essayons-le. Cliquez ici et sur Advance, vous devriez vous y retrouver. Découvrons ce set in. OK, ici, il n'est pas aligné sur la version tablette, faisons en sorte qu'il s'aligne lui-même au centre comme ça Maintenant, il s'ajuste correctement et nous n'avons pas besoin de changer la taille de la police, mais si nous le voulons, nous pouvons également modifier la taille de la police Pour ce faire, cliquons ici pour modifier l'en-tête à temps pour Apple, cliquez ici puis cliquez sur Man global fonts. Avant cela, nous pouvons simplement ajuster cette taille et trouver la meilleure taille. 38 sera donc la meilleure taille pour cet en-tête. Et qu'en est-il ici ? Essayons-le. Faisons comme si 22 serait bon pour le sous-en-tête, et qu'en est-il ici ? La taille du paragraphe sera correcte. Alors maintenant, encore une fois, je clique sur ce titre et je change la typographie en-tête et je change également cette typographie en sous-en-tête, Cliquez ensuite sur cette icône de police Managed Global et sur le paramètre de police global Je sélectionne simplement la version du portrait et je clique sur En-tête. Ici, nous pouvons voir l'icône de la tablette Faisons en 38 comme ça. Et ici, nous devons passer à 220 comme ça et la taille du bouton sera d'environ 18 ? Oui, 18 ans, ce serait bien. Et maintenant, la taille des liens du menu est correcte. Maintenant, je clique sur Enregistrer les modifications, puis sur Retour à l'éditeur pour revenir à l'éditeur. OK, maintenant je suis sur la page d'accueil et notre section de héros ressemble à ceci, et je vais cliquer ici. Et si on le souhaite, on peut diminuer le rembourrage de ce bouton. Faisons en sorte que ce soit comme les deux premiers et faisons-le comme les 15 premiers, 15 à droite, 15 en bas Il a gauche 15. Comme ça. Il semble trop petit. Qu'en est-il de 20, 15 ou 20 ans ? Pas bon 20 à 20. OK. C'est beaucoup mieux, nous devons faire de même ici, mais ici ça a l'air bien. Maintenant, nous n'avons rien à faire sur cette section, je vais donc cliquer sur ce conteneur principal, et à l'avance, nous pouvons ajouter le test 20 et le test 20 de gauche, et il s'ajustera en conséquence. Et dans la section ci-dessus, il suffit de cliquer ici pour ajouter rembourrages Nas 20 et 20 comme celui-ci Et encore une fois, je vais cliquer ici pour le voir s'aligner. Mettons-le au centre et il ressemblera à ceci. En fait, nous allons en faire une colonne. Nous avons donc actuellement deux colonnes, alors faisons-en une seule colonne. Pour cela, je clique sur ce conteneur. Lors de la mise en page, changeons cette direction colonne comme celle-ci et maintenant cela ressemblera à ceci. Maintenant, je vais cliquer sur ce conteneur secondaire et ce conteneur sera exprimé pourcentage et il sera comme ça à 100 %. Maintenant, ça a l'air plutôt bien. Maintenant, ça va ressembler à ça. Nous pouvons faire de même ici, mais la section des héros est déjà plus belle. Nous avons maintenant cette section. Nous devons d'abord ajouter les fadins gauche et droit 20, à gauche il y en aura également 20 OK. Ensuite, nous avons cette grille. Donc, cliquez sur la grille, cliquez d' abord sur la grille, et nous pouvons passer à la mise en page et sur les lignes et les colonnes de la grille, nous pouvons en faire une grille à deux colonnes et les lignes seront trois comme celle-ci. OK, maintenant c'est beaucoup mieux, faut changer ce bouton, rembourrant entre 2020 et 2020. OK. Maintenant, nous ne faisons que corriger la section deux des services, et nous avons maintenant cette section consacrée aux histoires de réussite. Cliquez donc ici et ajoutez le rembourrage. Ajoutons donc cliquons ensemble sur la qualité de ce lien pour supprimer la décoloration en haut et en bas Maintenant, à droite, testez deux et à gauche, testez 20. OK. Maintenant, si nous le voulons, nous pouvons modifier le nombre d'éléments à afficher. Nous pouvons simplement modifier aperçu en hauteur comme deux , puis deux affichages de base précédents comme celui-ci Passons ensuite à la section suivante et nous ajoutons ici la hauteur minimale. Si nous le voulons, nous pouvons supprimer la hauteur minimale. Fixons la hauteur minimale à zéro, puis nous pouvons ajouter un fondu supérieur 30 et le fondu inférieur sera de 30 comme celui-ci C'est bien mieux qu'avant. Ensuite, nous devons corriger Je vais donc cliquer sur le conteneur principal, et ici je vais supprimer la hauteur minimale à zéro. À partir de là, nous pouvons en faire une colonne pour la placer dans les deux rangées et avancer, ajoutons la droite à 20, la gauche à 220. Cliquez ensuite sur le conteneur secondaire, le conteneur à l'intérieur de ce conteneur, passez en pourcentage et faites en sorte qu'il soit égal à 100 %. Ainsi, nous pouvons faire la même chose ici en pourcentage à 100 %, comme ceci. OK. Maintenant, ça a l'air plutôt bien. Nous devons également ajouter le pad en haut et en bas. Passons donc en haut à 30 et en bas à 30 comme ceci. OK, maintenant nous résolvons également ce problème et maintenant nous devons corriger la section a. Cliquez donc sur Publier. OK, maintenant cliquez sur Avec le pied de page pour modifier la section du pied de page. Alors voilà, ça a l'air bien. Je clique donc sur le conteneur principal et maintenons ce rembourrage supérieur à 30, et la droite sera 20, bas 30, et la droite sera à gauche , 20 comme ça Nous n'avons donc rien à faire. Je m'adapte en conséquence. En fait, ici, il faut changer de couleur. Donc, lors de notre changement de couleurs primaires comme celui-ci. OK. Maintenant, ici, nous n' avons rien à faire, et la section des droits d'auteur semble bonne. Alors maintenant je clique sur Publier. Passons maintenant à la page principale, il suffit de cliquer comme ceci et je serai crédité sur la page principale. OK. Maintenant, notre version pour tablette est entièrement fonctionnelle et vous pouvez vérifier la conception de ce site Web sur outil Responsive Checker et le découvrir en détail Je vais simplement dans l'outil de test Responsive et copie simplement l'URL du site Web et la page URL ici. Cliquez sur C check, et ici nous pouvons voir l'aperçu sur son bureau, et nous pouvons découvrir sa taille avec différentes versions comme celle-ci. Et nous pouvons tester la version tablette comme ceci et sur tablette, elle ressemblera 29. Corriger la réactivité sur mobile: Bonjour, tout le monde. Corrigeons maintenant la réactivité mobile de ce site Web Si je clique sur Mobile Portre, cela ressemblera à ceci, et améliorons les choses Commençons par l'en-tête, je clique donc sur l'en-tête. OK. Nous avons maintenant cet en-tête que nous avons utilisé pour afficher le menu principal de notre site Web sur les versions mobile et tablette. Mais sur mobile, il devrait y avoir ce type de menu Hamburger, mais avec ce design, nous ne sommes pas en mesure de le faire Nous allons masquer ce design sur mobile et créatif. Pour ce faire dans un premier temps, je vais dupliquer ce menu et je clique sur ce premier menu et je passe sur Advance advance, nous aurons une section responsive dans une section responsive, nous pouvons la masquer dans le mobile. Cette section n' apparaîtra plus sur mobile et maintenant nous avons la deuxième section que nous vous demandons d'accéder à Advance et en mode réactif, masquons-la sur ordinateur et tablette et affichons-la sur mobile Maintenant, si nous passons au bureau, le second disparaît comme ça. Ensuite, ici, je vais cliquer sur le conteneur et sur la mise en page, il a la direction sous forme de ligne. Et dans ce bouton, essayons de cliquer et de supprimer le bouton. Cliquez ensuite sur ce conteneur, et fabriquons ce conteneur avec 60, 60 à 40. Faisons en sorte que 30, 20 ou 10 soient la meilleure taille. Peut-être faisons-en 20, 20 ou 20, et de cette façon, nous pourrons augmenter la taille de ce menu. Maintenant, je clique sur ce menu WordPress et nous devons créer un nouveau Mnutud pour cette section car nous supprimons simplement ce bouton de contact du menu mobile Ce que nous pouvons faire, c'est cliquer ici. Le menu est un écran et il va ouvrir les menus, puis ici je vais créer un nouveau menu. Sur le nom du menu, ajoutons un menu mobile et cliquons sur créer Meno, puis nous devons ajouter les éléments du menu Ajoutons d'abord la maison. Alors allons-y et passons aux tablettes , puis nous devons ajouter des informations sur le service, puis des témoignages. En fait, nous pouvons passer à notre design Figma. OK, sur notre design Pigma, nous pouvons copier ces textes, abord copier ici let's go et sur un lien personnalisé à propos d'un hashtag pour le moment, puis nous avons des services, cliquer dessus et ajouter des services comme celui-ci, ajouter un hashtag Ajoutez au menu, puis copie des témoignages est collée ici sous forme de hashtag sur Ajoutez ensuite le menu Let's Contact à ce menu, ajoutez un hashtag et cliquez sur Ajouter au menu. Version de bureau, nous ajoutons ce bouton de contact en tant que bouton séparé. Dans ce cas, nous devons donc l'ajouter au menu mobile et cliquer sur Enregistrer le menu. Et ici, je vais cliquer sur Publier, puis passer à la version mobile, et maintenant je vais à nouveau supprimer cette page. OK, passons maintenant à la section d'en-tête. Il suffit d'aller dans WP admin et ici sur les modèles de Them Builder, cliquer sur cet en-tête pour l'ouvrir et de cliquer sur ce bouton d'édition pour modifier le contenu. OK, maintenant je passe à la version mobile et clique sur le menu et ici je le change en menu mobile. Maintenant, si nous consultons le menu, nous l'aurons comme ça, mais nous pouvons le réparer pour le réparer. Creusez sur toute la largeur comme ceci, et maintenant si je le vérifie, il ressemblera à ceci et il y aura tous les éléments. Maintenant, ce que je peux faire, c'est aller sur Etles OneTils. La typographie sera un lien de menu et la couleur du texte sera cette couleur Et ici, nous devons passer au menu déroulant et ajuster le paramètre du menu déroulant. Donc, ici, la couleur de test sera cette couleur et la couleur d' arrière-plan, changeons la couleur d'arrière-plan comme ceci et rendons la couleur de test blanche, et maintenant elle ressemblera à ceci. Donc, en ce qui concerne Edge over, conservons la valeur par défaut, car sur mobile, le bord n'est pas important et nous n'avons pas besoin de bordure Et qu'en est-il du rembourrage horizontal ? Faisons en sorte que ce soit 20 comme ça, puis rembourrage vertical, disons-le comme ça et nous pouvons ajuster et nous pouvons ajuster la distance. Maintenant, faisons en sorte que la distance soit comme ça, et maintenant faisons-la comme deux, comme ça Et maintenant, passons au bouton Toggle. Sur Toggle, nous pouvons changer la couleur. Passons en fait à la couleur blanche, et la couleur de fond sera cette couleur primaire, et augmentons sa taille à 35, 35 sera une bonne chose. Maintenant, cela ressemblera à ceci, et nous n'avons pas besoin de rayon d'eau. Faisons en sorte que le rayon de l'eau et que ce soit bien meilleur, et nous n'avons pas à nous soucier trop de votre téléphone portable et notre menu mobile est terminé. Maintenant, je peux cliquer sur Publier et accéder à notre site Web, aller sur le site Web ou nous pouvons le vérifier à partir de outil de test réactif et passer à Voici le mobile. Voici le mobile et vérifions-le sur mobile, il ressemblera à ceci, et maintenant nous devons ajuster la section des héros pour le faire. Je clique sur la page d'accueil ici pour me rediriger vers la page d'accueil, puis je clique sur Mobile Board. Ici, c'est trop près. Alors corrigez-le, je clique sur le conteneur principal et sur Advance, ajoutez le haut en ajoutant comme 60. Non, il suffit de l'ajouter en haut. Additionnons le haut comme 60 et la droite sera 20, le bas sera zéro et la gauche 220 comme ça. Maintenant c'est beaucoup mieux. Si nous le voulons, nous pouvons diminuer la taille de la police, cliquer ici et passer à la typographie et essayer de la remplacer par Let's make it 28, c'est trop petit Ça aura l'air bien. Passons à 32 et 34, et le reste de la police restera le même. Cliquez ici Cliquez sur Gérer la police globale, puis sur l'en-tête et définissez le portrait mobile et faites-en 34 34 comme ça et cliquez sur Enregistrer les modifications et je garderai le reste de la taille de police tel quel. Lorsque nous le modifierons à partir d'ici, son effet sur le design global. C'est pourquoi nous utilisons les polices globales. OK, maintenant ça va être beaucoup mieux et cliquez ici. Si nous le voulons, nous pouvons créer ces polices pleine largeur. Nous pouvons donc ajouter ici un étirement et non un étirement. À l'avance, alignez-le, utilisez-le pour l'étirer. Cela fonctionne avec Will We Full Wo, ils ont l'air bien. Maintenant, si nous le voulons, nous pouvons créer ce haut et ce bouton de texte. Cliquez sur l'image et sur Advance, cliquez sur cette commande pour commencer ainsi. Maintenant, ça va ressembler à ça et c'est bien mieux qu'avant. Et maintenant, dans cette section, nous pouvons simplement passer à la mise en page et modifier deux colonnes comme celle-ci Ici, définissons le Roger Pass 220 comme ceci et ici, modifions-le entre les tailles. L'écart entre les titres, faisons-le comme si c'était le cas. Maintenant, cliquez avec le bouton droit sur copier et cliquez avec le bouton droit sur le style coller, collez le style, collez le style comme celui-ci. Ajoutons ensuite un peu d'espacement. Faisons comme si 30 ou 30, ce serait bien mieux. Ensuite, sur le conteneur principal, à l'avance, c' est-à-dire en haut, il y en aura 20, à droite, 220, en bas, 20, à gauche, 20 Ça ressemblera à ça. Ensuite, nous avons cette image et le texte qui sont beaux et là beaux et le mobile peut simplement cliquer dessus et ajouter un peu d'espacement Ajoutons un espacement au fur et à mesure et à l'espace des colonnes, faisons en sorte que l'espace des colonnes soit égal à 15, comme ceci Maintenant, cela ressemblera à ceci et vous n'aurez rien à faire, et ce bouton a l'air bien. Et ici, nous avons un aperçu d'une diapositive, et ici nous n' avons rien à faire. Tout semble bon. Ici, faisons-en un en-tête. Donc oui, ça devrait être un en-tête. De cette façon, cet en-tête sera ajusté. Le typogramme doit être défini comme en-tête, et ça a l'air bien Si nous le voulons, nous pouvons retirer un peu de rembourrage droit et gauche. Alors, allons-y. Définissons le chemin supérieur 30, droite il y aura deux puits, et en bas, 30, à gauche, ce sera le puits comme celui-ci. De cette façon, nous aurons un peu plus d'espacement. OK. Maintenant, la page d'accueil semble bonne. Et si vous le souhaitez, nous pouvons créer ces centres de texte comme celui-ci. C'est à vous de décider. Je vais le garder dans le côté gauche de cette façon, il sera facilement lisible. Alors maintenant, je vais cliquer sur Publier, puis je dois aller dans la section Pied de Cliquez sur le pied de page et sur le pied de page, nous n'avons pas grand-chose à faire, alors cliquez simplement sur le conteneur principal, et sur le conteneur principal, créons OGapas Quel 60. Oui, 60, ce sera bien mieux, et maintenant ça ressemblera à ça. La section sur les droits d'auteur semble donc bonne. Nous allons maintenant publier ces modifications, et la réactivité de notre site Web est entièrement conçue Dans la prochaine leçon, nous devrons ajouter l' animation à ce site Web et ajouter des fonctionnalités à chacun des boutons de ce site Web Faisons-le donc dans la prochaine leçon. 30. Relier des sections du site Web: Bonjour à tous. Nous devons maintenant lier ces sections, ce qui signifie que lorsque je clique sur cette page À propos, cela doit être renvoyé à cette ou pointer vers cette section à propos Alors faisons-le. Pour ce faire, nous devons attribuer des identifiants à chaque section. Pour cela, commençons par la maison. Je clique donc sur le conteneur principal sur la page d'accueil, puis je vais sur Advance. Sur Advance, j'ajouterai un identifiant CSS comme ceci. Passons ensuite à la prochaine séance. La section suivante est la suivante, cliquez dessus, et ici ce sera une session. Je vais juste ajouter des identifiants CSS à propos de. Ensuite, nous avons une session de service. Je vais ajouter de la danse et je vais ici et j'ajoute Ids Vss. Si vous avez deux mots « mes services », vous pouvez utiliser des services Mash comme celui-ci. Dans mon cas, il ne s'agit que de services et la section suivante est testimonio . Copions ce texte d'ici, puis cliquons sur le conteneur principal identifiant CSS comme témoignage et ajoutons toujours dans le même format, ce qui signifie que si vous ajoutez ce qui signifie que si vous ajoutez majuscule comme première lettre sur la maison dans le témoignage, ajoutez une majuscule comme Gardez la cohérence et nous avons ici des contacts. J'irai sur Advance et je l'ajouterai comme contact. OK, maintenant je publie ceci, et maintenant nous devons aller dans la section menu de notre site Web pour le faire, je vais simplement ouvrir ce site Web dans une nouvelle fenêtre, et ici je vais passer aux menus sur les hommes d' apparence et ici nous avons le menu mobile. Commençons par le menu principal, sélectionnons le menu principal et cliquez sur ce bouton de sélection. Et la page d'accueil est liée à la page d'accueil, puis nous avons cette page à propos. Sur une page, il faut ajouter un identifiant. Cliquons donc sur le conteneur principal, et sur le conteneur principal, ici nous avons l'ID CSS, copiez-le et ajoutez-le comme ceci. Ainsi, lorsque nous ajoutons l'identifiant, il doit commencer par un hashtag. Lorsque nous l'ajoutons, nous l'avons fait avec l'URL de la page d'accueil comme celle-ci car cette section se trouve à l'intérieur de la page d'accueil. Ajoutez toujours ce hashtag après l'URL de la page d'accueil. Je vais copier l'URL de la page d'accueil et passer aux services et aux services, faisons de même, l'URL du site Web, puis le hashtag, puis allez ici, cliquez ici. À CSS ID, ajoutez-le comme ceci, puis nous avons un témoignage, allez ici Sélectionnons le conteneur principal et à l'avance, copions ce texte et collez-le comme ceci. En fait, nous devons copier cette section comme ceci, puis la coller comme ceci, puis maintenant nous pouvons cliquer sur C savenu et maintenons cela en action Je vais aller ici et ouvrir le site Web dans une nouvelle fenêtre. Voyons voir maintenant que je clique sur « À propos », cela redirige vers la section A et lorsque « Nlck Css », c'est redirigé vers la section des services Lorsque je clique sur le témoignage, il est redirigé vers le témoignage C'est le moyen de lier notre site Web, car il s'agit d'un site Web d'une seule page. OK, maintenant nous devons ajouter la même action à ce contact, donc pour ce faire, nous devons y ajouter ces données. Contactons-le. Mais pour ce faire, je vais d'abord faire défiler la page ici et cliquer ici, puis copier ceci. Maintenant, je peux cliquer ici et passer à l'en-tête. Sur l'entête, ici nous avons le menu principal et ici nous avons le bouton. Sur ce bouton, par exemple, copiez d'abord l'URL du site Web avec le hashtag puis ajoutez l'option ID et lien, ne cochez aucune fenêtre ou autre, puis cliquez sur Publier Pas besoin de visionner, il suffit de cliquer sur Publier pour la publier, puis de supprimer la page Cliquez maintenant sur le bouton Contact et il sera redirigé comme ceci. C'est ainsi qu' il faut maintenant ajouter de l'action à ce bouton du héros. Passons donc à la page d'accueil pour modifier la page d'accueil et ici, cliquez sur ce bouton placez l'URL et après le hashtag, nous devons ajouter le contact car lorsque nous cliquons sur ce bouton, il doit renvoyer à ce formulaire de contact C'est le CTA ou l'appel à l'action. Ici, nous avons déjà ajouté les profils Facebook et LinkedIn et d'autres profils sociaux ici, nous devons ajouter la même URL comme celle-ci Ajoutons oui. Maintenant que c'est terminé, maintenant je le publie, puis si je le vérifie en action, redémarrez le site Web et cliquez sur cette œuvre avec moi et elle sera liée à cette section. Maintenant, nous devons aller dans le menu et sélectionner le menu du pied de page Ensuite, nous devons ajouter le même lien de menu au pied de page. Voici des informations et des services. Vérifions que l'identifiant du service est correct. Aux services que vous ajoutez, ce mot doit être exactement le même que le mot du lien. Si c'est différent, le processus de création de liens ne fonctionnera pas, alors contactez ici et termes et conditions et cinq politiques, nous devons générer ces deux pages. Alors maintenant, cliquons sur le menu Enregistrer, puis passons au menu mobile et faisons de même. OK. Maintenant, nous avons à peu près ce que nous pouvons ajouter à partir d'ici. Nous pouvons maintenant passer à une section de services comme celle-ci, puis ici à propos de ces services. Ensuite, nous avons des témoignages. Ajoutons une section consacrée aux témoignages. Comme ça, alors connectons-nous ici, nous devons l'ajouter à jour, et le témoignage est OK Celui-ci va bien. Les services sont corrects. est bon pour quoi. El good. Maintenant, je clique sur Csavmu et le menu mobile est également terminé. Nous pouvons maintenant le vérifier en action. Si je clique sur Conserver, il devrait être transmis aux services. Maintenant, le processus principal est Elgod et comme prochaine et dernière étape, nous devons ajouter les termes et conditions et statistiques de politique pri C le feront dans la leçon 31. Générer les pages relatives aux conditions et à la politique de confidentialité: Bonjour à tous. Il est maintenant temps de générer une politique de confidentialité et des termes et conditions. Pour ce faire, nous pouvons effectuer une recherche sur le générateur de politique de confidentialité de Google, et nous obtiendrons ce type de générateurs de politiques de confidentialité gratuits, il suffit de cliquer dessus, et ici nous devons passer par un formulaire simple. Alors d'abord, faisons-le étape par étape. Alors d'abord, je clique dessus. Nous utiliserons votre politique de confidentialité ? Ce sera un site Web, puis je clique sur Continuer et je génère une politique de confidentialité. Et ici, je dois ajouter l' URL du site Web. Copions l'URL du site Web à partir d'ici. Ensuite, nous devons ajouter le nom du site Web. Ajoutons le nom du site Web, copions le nom du site Web et ajoutons-le comme ceci. Ensuite, nous devons saisir le type, donc j'ajouterai que je suis un individu, puis nous devons entrer dans le pays. Ensuite, nous devons entrer dans l' État et sélectionner votre pays. Dans ce cas, je vais simplement sélectionner les États-Unis et cliquer sur Suivant. Alors il suffit de lire ceci. Quel type d'informations personnelles collectez-vous auprès des utilisateurs Dans notre cas, nous avons un formulaire. Dans ce formulaire, nous avons sélectionné l'adresse e-mail, prénom et le nom de famille, le numéro de téléphone et aucun profil de réseau social. Nous ne collectons que ces informations, puis nous les sélectionnons, puis nous cliquons sur l'étape suivante. Si vous avez d'autres champs, vous pouvez simplement choisir les deux autres, puis je clique sur l'étape suivante. Ici, nous avons une autre question intitulée Comment les utilisateurs peuvent-ils vous contacter pour toute question concernant votre politique de confidentialité ? Ici, vous pouvez ajouter par e-mail, visitant ou quoi que ce soit d'autre. Dans ce cas, j' ajouterai par e-mail, puis je pourrai ajouter l'adresse e-mail. L'adresse e-mail sera Hello at Hana Dot Custom Website Design us, puis cliquez sur l'étape suivante, et ici nous avons deux choix Pour le premier choix, nous avons opté pour la prime, mais nous n'en avons pas besoin. Il vous suffit donc de cliquer sur Non, je ne veux pas de politique de confidentialité professionnelle, cliquer sur l'étape suivante et je dois ajouter l'adresse e-mail ici. J'ajoute simplement l'adresse e-mail, puis je clique sur le bouton pour en générer une. OK, nous venons de générer la page de politique de confidentialité, je peux donc simplement cliquer sur copier ces deux presse-papiers Ou vous recevrez également cette copie sur votre adresse e-mail. Je vais simplement cliquer sur Copier dans le presse-papiers. Passons ensuite au tableau de bord du site Web et sur la page cliquez sur la page ici pour ajouter le titre en tant que politique de confidentialité. Cliquez ensuite sur Modifier avec l'élément de. Et ici, je clique sur l'icône plus, texte et la zone de presse seront orientées vers la colonne de direction Et ici, ajoutons une marge de passe, un, deux, 20. OK. Cliquez ensuite ici et ajoutez un éditeur de texte comme celui-ci, puis je cliquerai sur ce code, puis je rythmerai le code que j'ai généré l'aide de ce générateur de politique de confidentialité. Et voilà, passons à Estyle. Faisons l'alignement à gauche et la typographie sera un paragraphe, couleur sera la couleur du texte Comme nous pouvons ajouter de la couleur au lien. Ajoutons cette couleur verte à la couleur du lien. Et nous pouvons ajouter de l'espacement entre les paragraphes. Faisons en sorte que ce soit 15 et sympa, ça ressemblera à ça, et à la fin, ajoutons, cliquons sur le conteneur principal, et pour le bas, ajoutons 120 comme ça. Cliquez ensuite sur Publier . Nous venons de générer la page de politique de confidentialité et allons créer la deuxième page des termes et conditions. Pour ce faire, je peux simplement effectuer une recherche sur le générateur de termes et conditions de Google comme celui-ci, et nous avons ici quelques suggestions. Passons donc au générateur de termes et conditions, site Web, et nous devons ajouter ici. Où seront utilisés vos termes et conditions ? C'est donc un site Web, puis cliquez sur Continuer et générer les termes et conditions, et ici nous devons ajouter l'URL du site Web, et ici nous devons ajouter le nom du site Web et entrer le type car je suis individuel dans votre cas, s'il s'agit d'une entreprise, en tant qu'informations commerciales et autres informations commerciales. À mon avis, je sélectionne simplement Je suis individuel, puis je définis l'état, puis je clique sur const state et nous avons des questions, les utilisateurs de C créent des comptes ? Les utilisateurs peuvent-ils créer et télécharger du contenu ? Les utilisateurs peuvent-ils acheter des biens, proposez-vous des plans d'abonnement ? Je n'aime pas ça. Si tout cela est vrai, vous devez payer ce prix, mais le moyen le plus simple est d'utiliser l'IA pour générer une page de conditions générales. Ici, nous pouvons à nouveau ajouter l'adresse e-mail. Je viens d'ajouter l' adresse e-mail comme ceci, puis de cliquer sur l'étape suivante et de cliquer sur Suivant. Ici, nous devons également vérifier maintenant et cliquer sur. Étape suivante, puis je clique sur Je vais devoir ajouter l'adresse e-mail, ajouter l'adresse e-mail, puis cliquer sur Congénérer, j'ai généré les termes et conditions Maintenant, je copie ce texte de termes et conditions et je vais sur le site Web. Ici, je peux simplement cliquer sur Nouvelle page et ici, cliquer sur la page définie sous le titre comme termes et conditions. Ensuite, je vais suivre la même théorie que nous suivons auparavant comme ceci. Ensuite, ajoutez à l'avance la marge supérieure comme un, deux, 20 et la marge inférieure comme 12 comme ceci. Ensuite, je vais aller ici, il suffit de le copier dans le presse-papiers et de découper celui-ci et d'ajouter le texte modifié comme ceci, puis de passer au code et de le coller comme ça Ensuite, une vignette, faites-en typographie et l' URL du lien sera de cette couleur OK. Nous avons maintenant les pages des conditions générales et de la politique des prix. Maintenant, publiez-les. OK, maintenant allons dans le menu du menu Futter, sélectionnez-le et cliquez sur Masquer. Ici, sur les termes et conditions et la politique du Prieuré, suffit de les cocher Vous pouvez également cliquer sur Viewer, et vous verrez ici les termes et conditions et PriocPolicy Ensuite, cliquez simplement sur Ajouter à Man Ici, nous avons un lien personnalisé pour gagner des objets, supprimez-les. Nous n'en avons pas besoin. Et voilà, maintenant cliquez sur Enregistrer le menu et maintenant allons sur le site Web et voyons-le en action. OK. Maintenant, cliquons sur Politique de confidentialité, et c'est parti. Nous réagissons simplement à la page de politique de confidentialité et voici les termes et conditions, cliquez sur les termes et conditions et maintenant, si vous souhaitez accéder aux services, nous pouvons simplement cliquer sur les services et accéder aux services. OK. 32. Ajouter des animations: Tout le monde. Nous devons maintenant ajouter des animations à notre site Web. Vous pouvez ajouter des animations à chaque texte ou vous pouvez ajouter des animations à une section comme celle-ci de cette image. Le meilleur moyen est d'ajouter des animations aux sections, car si vous ajoutez trop d'animations, cela affectera la vitesse de chargement du site Web. Ajoutons des animations à ces sections. Sur l'entête, je ne vais pas ajouter d'animations. Je vais conserver l' en-tête par défaut et pour cette section, il me suffit de cliquer sur le conteneur et de passer à Advance. Dans Advance, nous avons les effets de mouvement sur les effets de mouvement, nous avons l'animation d'entrée. Nous pouvons donc ajouter du fondu, fondu à gauche, du fondu à droite, et nous avons beaucoup d' autres présages comme celui-ci et aussi du roll in Ils ne sont donc pas très professionnels. Dans ce cas, j' ajouterai le fading left. Comme ça. Ici, nous pouvons ajouter la durée de l'animation, je vais donc la rendre rapide comme ça. Ensuite, nous pouvons retarder l'animation. Ici, si vous en ajoutez 1 000, cette animation se produira au bout d'une seconde, mais je ne vais pas l'utiliser. Nous devons donc ici ajouter l' animation à cette image. Ici, passons aux effets de mouvement. L'animation d'entrée sera ajoutée comme ça, puis la vitesse sera transmise comme ça. Publiez-le ensuite et voyons-le en action. Alors maintenant, je clique sur l'aperçu des modifications et voyons voir, maintenant ce sera animé comme ça Ensuite, nous avons cette section, cliquez sur l'ensemble de la section et sur Avancer, passez aux effets de mouvement et ajoutez ici un fondu comme celui-ci Passons maintenant à cette section et faisons de même. Ici, sur les effets de mouvement, ajoutez un fondu vers la gauche comme celui-ci et ici ajoutez un effet de mouvement EffxFad Nous avons ensuite ces deux sections. En fait, ajoutons une animation à toute cette section. Alors cliquez ici et au fur et à mesure de Motion Effex, ajoutons-le en s'estompant comme ça Ensuite, nous avons cette section et dans cette section, cela ne semble pas bon si nous ajoutons une animation à cet arrière-plan. N'ajoutons donc que pour ce contenu. Ici, nous pouvons ajouter ces animations à cette section à trois vues, sélectionner et passer à l'effet de mouvement et ici, faire disparaître comme ça, ou peut-être les ajouter comme s'estompant, Non, non. Fais-le comme Fade In. Et ici, dans le design actuel, nous ne pouvons pas simplement ajouter une animation à ces deux éléments. Donc, pour y remédier, je vais devoir créer un nouveau conteneur comme celui-ci, supprimer le contenu de ce conteneur et simplement ajouter ces deux textes à l'intérieur de ce conteneur comme ceci. Ensuite, je peux sélectionner l'ensemble du conteneur, et sur Motion ewx, je peux l'ajouter comme ça OK, maintenant nous avons cette section, les sections et, à l'avance, passez aux effets de mouvement et ajoutez le fondu vers la gauche La durée de l'animation sera rapide et ajoutons-le à ce formulaire comme ceci. Très bien, nous devons le faire vite et nous devons faire le jeûne, celui-ci pour le faire vite ici comme ça et ici je pense que c'est rapide. Voyons voir. C'est normal, fais-le vite. Qu'en est-il de cette section ? L'effet de mouvement, anormal, le rend rapide et rapide. Essayez donc toujours de maintenir la cohérence du site Web. De cette façon, vous aurez un flux unique sur le site Web comme celui-ci. OK. Maintenant, voyons cela en action. Alors, on y va. Il suffit de cliquer ici et voyons voir, d'accord, l'animation fonctionne, et quand je fais défiler la page, elle sera animée comme ça. Pour le pied, je ne vais pas ajouter d'animations. Il suffit donc d'ajouter une animation Enranc à ces sections, et ces animations fonctionneront également sur les versions mobiles et tablettes 33. Configurer le calcul du classement pour l'optimisation du référencement on-page: Bonjour à tous. Il est maintenant temps de faire le SCO sur la page. Nous pouvons utiliser le plugin Rank MAT pour optimiser notre site Web au SCO. Passons donc à Plug-ins et sur Plugins, cliquez sur Plug-in. Notre objectif est que si quelqu'un effectue une recherche notre site Web ou recherche le nom de notre entreprise sur Google, notre site Web doit apparaître dans le premier résultat de Google ou de tout autre moteur de recherche. Donc, sur Plug Is, je vais cliquer sur Rechercher des plugins, et je vais rechercher ici Rank MAT presenter. OK. Ici, nous avons Rank So, maintenant je clique simplement sur Installer maintenant, puis sur Activer. OK. Nous allons maintenant sur cette page de configuration et nous devons connecter le profil Rank Max à Google. Je clique simplement sur Connecter le compte. Et ici, nous avons un endroit pour vous connecter ou si vous n' avez pas de compte Rank Math, vous pouvez cliquer sur S'inscrire maintenant et inscrire ou créer un compte Rank Math gratuit. Ici, je vais utiliser Google. Si vous avez un code Facebook, WordPress, vous pouvez les utiliser ou vous pouvez simplement utiliser votre adresse e-mail pour vous inscrire. Dans mon cas, j' ai déjà un compte Rank Math, donc je clique sur ce bouton de connexion, et ici je choisirai l'option Gmail. OK. Maintenant, je vais sélectionner mon Gmail et ici je vais cliquer sur Activer maintenant. Nous passons maintenant à cet assistant de configuration et ici je vais choisir cette option simple car nous ne sommes pas pros de SOT. L'option facile nous aidera à configurer ce plugin facilement sans aucune connaissance approfondie du référencement. OK, maintenant je clique sur Start Wizard, et ici je dois sélectionner le type de site Web. Dans mon cas, il s' agira d'un portfolio personnel. Et ici, le nom de notre site Web apparaît, et je vais ignorer ce site Web, nom alternatif, et le nom de l'organisation de la personne sera Hannah Clark. Si vous sélectionnez ce site comme petite entreprise, vous devrez ajouter d'autres informations dans mon cas Dans notre cas, il devrait s' agir d'un portefeuille personnel. OK, ici, nous devons ajouter un logo pour Google, la taille des bûches doit être un à un à souder Il s'agit actuellement du logo, mais il n'est pas quadrillé Ce que nous pouvons faire, c'est créer un logo carré. Pour ce faire, je vais aller sur notre FigmaFle Okay. Maintenant, je vais juste créer un cadre, il suffit de cliquer ici et de cliquer comme ça et maintenant je dois le créer également par un. Ensuite, je vais simplement copier ce texte et venir ici et le coller comme ça. Maintenant, je vais augmenter la taille en appuyant sur Commande ou Contrôle et en utilisant la molette de la souris comme ceci, puis je vais diminuer cette taille de police comme ceci. OK. Maintenant, ce que nous pouvons faire, c'est sûrement que nous pouvons centre aligné comme ce centre aligné comme celui-ci et le placer au centre et si je le souhaite, je peux changer cette couleur blanche en cette couleur foncée. Faisons-le rapidement ici et sur la couleur de remplissage, sélectionnez simplement la couleur principale et cette couleur de texte, sélectionnons-la comme couleur secondaire. C'est bien mieux. Maintenant, je vais le renommer en NC et maintenant sur Explore, sélectionner le type pass JPG et cliquer sur Explore J'ai téléchargé. Maintenant, allons-y. Cliquez sur Ajouter un fichier de téléchargement et cliquez ici, puis téléchargez ou téléchargez simplement le fichier téléchargé. OK. Et ici, ajoutons balise ALT et cliquez sur Utiliser ce fichier, et maintenant notre logo pour Google ressemblera à ceci, et maintenant nous devons ajouter l'image de partage social par défaut. Sa taille devrait donc être de 1206 cent 30. Créons donc un autre cadre. Allons ici, cliquez sur ce cadre et cliquez ici. Alors ici, découvrons la taille de l'image 1 200 630. OK, pour le web, 1206 30. OK. Le réseau social par défaut ici en image signifie que si quelqu'un partage notre site Web sur des réseaux sociaux tels que Facebook, un aperçu de notre site Web sera affiché. L'aperçu par défaut ne sera donc pas beau. Ainsi, dans ce calcul du classement, nous pouvons ajouter un aperçu une vue unique et une vue personnalisée, et ce sera très professionnel. Donc, dans cette section, je vais simplement sélectionner cette section de héros et appuyer sur Commande C ou Ctrl C pour la copier et la coller comme ça , puis je vais juste la placer au centre et maintenant je vais la changer en aperçu social. Maintenant, je vais cliquer sur Exporter et l'exporter au format JBG et cliquer sur le bouton Exporter un aperçu social pour le télécharger . Nous pouvons ainsi réduire la taille de ce fichier Pour ce faire, je vais aller sur tiny png.com et juste Dragon Rope it comme ça OK. Cliquez sur Télécharger pour télécharger et c'est parti cliquez sur Ajouter fichier et téléchargez simplement le fichier comme ceci. Ensuite, nous pouvons ajouter ALT D et cliquer sur Utiliser ce fichier pour télécharger le fichier. Désormais, lorsque quelqu'un partage le lien de ce site Web sur les réseaux sociaux, l'aperçu ressemblera à ceci. Maintenant, je clique sur Enregistrer et continuer et là encore, je dois connecter les services Google. C'est pour la console de recherche Google et d'autres services Google tels que Google Analytics. Faisons-le dès maintenant. Lorsque nous l'aurons fait, sélectionnez le compte GML que vous comptez utiliser pour la console de recherche Google Cliquez sur ce bouton de connexion aux services Google. Ici, je vais sélectionner l'adresse Gmail et cliquer sur Continuer. Et ici, cliquez sur Continuer. Maintenant, nous pouvons connecter la console de recherche Google et Google Analytic Hello, tout le monde Pendant que je crée cette leçon, une panne de courant se produit une fois que j'ai complètement installé et configuré le calcul du classement. Cependant, essayons à nouveau, passons aux configurations et je vais vous montrer étape par étape ce que j'ai fait Alors laisse-moi aller à l' endroit où nous nous sommes arrêtés. Nous complétons cette partie. Ensuite, nous avons terminé cette partie. D'accord, la console de recherche est déjà connectée à Google Analytics, mais recommençons. Pour l'instant, je vais cliquer sur ce bouton de reconnexion et sélectionner ici l' e-mail pour donner accès Je pense que vous avez déjà terminé cette partie. OK, vous allez maintenant sur cette page. Donc ici, pour le moment, ce n'est pas cliquable, mais attendons quelques minutes jusqu'à ce qu'il soit cliquable OK, ici, vous pouvez voir votre site Web et les autres sites Web associés à ce compte GML Donc, ici, je sélectionne simplement mon site Web, qui est un design de site Web personnalisé. Et ici, nous devons activer cet onglet d'état de l'index, il est donc actuellement activé. Cependant, je ne peux toujours pas cliquer dessus si ce bouton n'est pas activé, ce qui signifie que ce cercle se trouve de ce côté, il suffit de cliquer dessus et de l'activer une fois qu'il est cliquable Passons donc à la page Analytics sur la page Analytics, ici, sélectionnez mes analyses. Et voilà, j'ai déjà créé la propriété. En fait, j'enregistre cette vidéo deux fois et cette fois, cette panne de courant s'est produite, et c'est la troisième fois. Donc, ici, il suffit de cliquer sur créer une nouvelle propriété GA four. Et ici, vous pouvez voir cette fenêtre contextuelle, qui dit : Êtes-vous sûr de vouloir créer une nouvelle propriété GA Four ? Cliquez simplement sur OK pour créer une propriété GA Four ou Google Analytics. Donc, ici, il a créé une nouvelle propriété, et ici, sélectionnez le flux de données en tant que site Web. Et ici, nous devons installer ce code Analytics sur notre site Web. Pour ce faire, vous pouvez simplement cliquer sur cette case à cocher et lui demander d' installer le code d'édition. Et cette analyse est Google Analytics que j'ai utilisée pour suivre les visiteurs de notre site Web et les détails du trafic du site Web. Donc, si vous souhaitez exclure un utilisateur connecté, ce qui signifie que si vous vous connectez à ce site Web et que vous essayez d'accéder aux pages, vous serez considéré comme un visiteur. Mais si vous cochez cette case, vous ne verrez pas que vous êtes un visiteur. Si vous ne le voulez pas, cochez simplement cette case, mais pour l'instant, je ne le prendrai pas, et ici, ce n'est pas encore activé . Accens est destiné aux blogs sur les sites Web Pendant que cette console de recherche et cette analyse se configurent, essayons de visiter console de recherche Google et de voir ses propriétés. Vous pouvez donc cliquer sur ce bouton En savoir plus pour en savoir plus sur fonctionnement de cette console de recherche Google et sur la façon de la configurer. À mon avis, je vais simplement surligner ce texte et, à juste titre, cliquer sur Rechercher dans Google pour. Et ici, je vais ajouter la connexion à la console de recherche Google. Et voici la page de connexion, cliquez dessus. Et ici, nous devons sélectionner l' adresse Gmail que nous configurons avec notre site Web. Vous cliquez dessus et nous avons ce site Web, cette URL, suffit de cliquer dessus, puis passons à la vue d'ensemble d'Ovie. Nous n'avons aucun résultat, alors attendez une semaine ou parfois que du trafic arrive sur Nous n'avons aucun résultat, alors attendez une semaine ou parfois que du trafic arrive votre site Web. Vous verrez le résultat sur la console de recherche Google et accédez au plan du site sur les plans de site Si vous voyez ce plan de site soumis, vous pouvez y aller, mais si vous ne le voyez pas le plugin Rang Map créera un plan du site pour votre site Web. Nous pouvons simplement ajouter ce plan du site et nous le ferons une fois la configuration terminée. Passons maintenant à Google Analytics et voyons comment cela fonctionne. Je vais donc simplement cliquer sur Rechercher pour cela, et j'ajouterai ici GA, Google Analytics Go Google Analytics Login. Ajoutons votre identifiant et cliquez sur ce résultat. Ici encore, je dois sélectionner l'utilisateur. OK. Voici la page Google Analytics que j'ai mise en place. Dans mon cas, elle est prête à être configurée, mais dans votre cas, vous ne verrez pas ce type d'analyse. Si vous ne le voyez pas, attendez 30 minutes et vous verrez ce texte. Voyons la page d'analyse que j'ai créée lors de ma dernière tentative. Vous verrez ce type de panneau. Ici, vous ne verrez aucun utilisateur actif Vous pouvez donc simplement vérifier le fonctionnement du code Google Analytics sur votre site Web en accédant à la fenêtre IncoPNTO et en visitant votre Ensuite, vérifions l'activité. Donc voilà, si vous ne voyez toujours pas l'activité, cliquez simplement sur ce bouton et prenez cette antiquité, faites des choses comme ça et rentrez chez vous. À la maison, si vous ne le voyez toujours pas, attendez et rassurez le site Web comme celui-ci. Si vous utilisez le plug case dans mon boîtier, j'utilise ce cache ultrarapide Allez donc dans le cache et cliquez sur Perch A , puis réessayez comme ça et voyez si cela fonctionne Passons ensuite aux rapports sur les rapports. Nous pouvons créer notre instantané du pot. Ainsi, en utilisant cette section, nous pouvons voir les détails du comportement de l'utilisateur. Nous avons donc ici trois options. Dans notre cas, nous devons sélectionner le premier, celui comportement de l' utilisateur, et vous pouvez cliquer sur Aperçu du modèle pour en voir l'apparence. Donc, ici, cela ressemblera à ceci. Il suffit donc de cliquer sur, de choisir ce modèle. Et lorsque vous configurez correctement votre Google Analytics, vous y verrez le résultat. Donc dans mon cas, passons au premier que j'ai déjà installé, et voici les détails. Passons donc à trois rapports, vous pouvez voir ce type de détails. Une fois que nous l'avons configuré avec succès, nous pouvons cliquer sur Enregistrer et continuer sur le rapport par e-mail, je le décocherai car je n'ai pas besoin du rapport par e-mail, et s'il n'est toujours pas cliquable et qu'il est désactivé, attendez quelques minutes ou cliquez sur Enregistrer et continuer et nous pourrons le faire Ensuite, je cliquerai sur retourner au tableau de bord. Et ici, si vous ne voyez pas le plan du site comme celui-ci, actualisez-le quelques fois et si vous ne le voyez toujours pas, vous pouvez accéder aux paramètres généraux du GRA , cliquer sur Analytics, et ici vous pouvez prendre cet onglet Activer cet index d' état comme celui-ci, puis cliquer sur les paramètres du plan du site, et voici le site Web de l'UR, URL du plan du site. Il suffit donc de cliquer avec le bouton droit de la souris et de cliquer sur Copier l'adresse du lien et d'aller ici. Ensuite, il suffit de l'ajouter comme ceci. Et voici l'URL de notre site Web, et voici l'URL du plan du site, il suffit de cliquer sur Soumettre après l'avoir soumis, vous pouvez voir le sous-plan du site soumis ici, et la soumission de ce plan de site vous aidera à indexer rapidement votre site Web sur Google. OK. Passons maintenant en revue les fonctionnalités de Rang Math SO. Passons d'un tableau de bord à l'autre, nous n'avons rien à faire, et l'IA du contenu est une fonctionnalité premium. Dans ce cas, nous utilisons la version gratuite de rank Math, et la page d'analyse n'est pas nécessaire car nous pouvons vérifier les analyses sur Google Analytics et la page d'analyse est également prise en charge pour la version payante. Et ici, cliquons sur les paramètres généraux. Donc, dans ce paramètre général, conservez simplement les valeurs par défaut, ne modifiez pas les valeurs. Passons ensuite au titre et à la méta ici. Créez toujours ce méta-index des robots. Donc, si vous cliquez sur ce lien sans index, votre site Web ne sera pas indexé sur Google, alors ne cochez pas celui-ci. Cochez toujours l'index. Ensuite, sur le caractère séparateur, vous pouvez le modifier si vous le souhaitez. Je garderai le titre par défaut et vous pouvez le prendre ici si vous souhaitez mettre en majuscule le titre qui s'affiche sur Google Ensuite, en ce qui concerne le référencement local, nous téléchargeons déjà ces informations lors de la configuration du plugin Frank Math. Et ici, nous pouvons ajouter l'URL de la page Facebook, et ici nous pouvons ajouter un profil supplémentaire, un lien, un TIN ou un profil Instagram. Donc, si vous avez un profil LinkedIn, vous pouvez simplement ajouter votre profil in.com, et si vous avez également un compte Twitter, disons simplement .com, comme cette barre oblique Ainsi, vous pouvez ajouter des profils supplémentaires. Lorsque vous en ajoutez plusieurs, vous pouvez simplement les ajouter dans une nouvelle ligne comme celle-ci. OK. Ensuite, page d'accueil après page d'accueil, nous devons cliquer sur cette page d'accueil pour modifier la page d'accueil, aperçu du classement Google pour ce faire, je vais cliquer avec le bouton droit de la souris ici en cliquant sur Ouvrir le lien dans un nouvel onglet. Bon, maintenant je suis sur la page d'accueil, et voici l'éditeur Wordpress. Et ici, nous pouvons cliquer sur cette barre d'options et ici, sélectionner cette carte de classement. OK, nous devons maintenant ajouter le mot clé focus. Comme je te l'ai déjà dit, je l'ai déjà fait. C'est pourquoi le mot clé focus est déjà là, je vais donc le supprimer et je vais simplement ajouter le mot clé focus comme ceci. Et puis voici l' aperçu sur Google et voici l'avis sur réseaux sociaux et voici l'aperçu sur Facebook, voici l'aperçu sur Twitter. Saviez-vous que nous avons ajouté cette image miniature pour les réseaux sociaux et qu'ici, cliquez sur Général. Ce sera l'aperçu de Google et nous pouvons modifier cet aperçu en modifiant le Actuellement, notre titre est Hannah Clark ins like Clark, je le change simplement et nous pouvons ajouter ce titre et nous assurer que votre titre ne comporte que 60 caractères car sur Google, il n'affiche que les 60 premiers caractères Après une description, nous pouvons ajouter cette description, et pour la description ou la description des résultats de recherche, toujours ajouter le mot clé principal. Dans ce cas, le mot clé principal est Hanna Clark. Bonjour, je suis Anna Clark. Vous êtes prêt à transformer votre fils donc à cette description, n'ajoutez que 160 caractères car si vous en ajoutez plus de 60, cela ne s'affichera pas sur Google. Donc voilà, ça va ressembler à ça, et je vais le fermer. Et en ce qui concerne les réglages, le mot clé principal est celui-ci, et ici nous avons des problèmes, et une fois que vous l'avez terminé, vous pouvez simplement cliquer sur Enregistrer et il sera enregistré sur votre page. Après l'avoir enregistré, nous pouvons aller ici, ici, nous avons l'auteur, simplement le conserver par défaut parce que nous n' avons pas d'auteurs ici, peut-être le désactiver sera bien parce que ce site n'a pas d' auteurs et juste ici, conservez le titre de haine par défaut, et si vous voulez voir le titre de votre article différemment, vous pouvez ajouter ce texte ici, mais le conserver par défaut est le moyen le plus et si vous voulez voir le titre de votre article différemment, vous pouvez ajouter ce texte ici, simple et pages, si vous souhaitez modifier l'évaluation de votre page sur les résultats de Google, vous pouvez modifier ces informations, mais je les garderai par défaut. Et si vous cliquez ici, vous pouvez voir les conditions ou le shortcode que vous pouvez ajouter, mais ne changeons rien Et pour les catégories, nous n' avons pas de catégories ni de tags, il suffit de les conserver par défaut. Cliquez sur Enregistrer les modifications si vous apportez des modifications. Ensuite, le réglage du plan du site, nous avons déjà envoyé le plan du site, et l' élément important est cet analyseur SCO Vérifiez donc le score SCO de votre site Web et vous pouvez cliquer sur cet analyseur SO pour redémarrer ou cliquer sur cet analyseur SO pour analyser Et si vous voyez un SOScore inférieur, vous pouvez vous rendre ici et en priorité Si vous n'avez pas activé les mises à jour automatiques, cliquez simplement sur Activer les mises à jour automatiques, et nous avons ici une description U de base en U et H un tag H deux Donc, si vous ne le voyez pas comme ça, par exemple, vous avez trop de titres H deux, vous pouvez aller la page d'accueil. Imaginez si vous avez deux balises H un ou si vous n'avez pas de balise H un, avez trop de balises H deux pour corriger le problème, vous pouvez aller à la page d'accueil. Je vais simplement cliquer sur Modifier avec Eleanor sur cette page d'accueil OK. Voyons maintenant les principaux numéros Dans mon cas, cette balise HTML est H un, ce qui signifie que nous avons une balise H one pour le site Web. Ainsi, la page Web n'a qu' une seule balise H ou une balise de titre Et ici, c'est sur H 3, et ici, c'est gratuit. Tu peux changer ces choses. Donc, si vous vous souvenez, lorsque nous avons conçu ce site Web, je vous ai dit de toujours attribuer la balise HTML, car il s' agit d'une bonne pratique en matière de référencement. Et ici, si nous cochons celui-ci, c'est H deux et celui-ci est H trois, et ceci est un paragraphe. Dans le cas du gaz, si vous avez beaucoup de balises H deux, ajoutez simplement deux balises pour les titres des sections et faites en sorte que les autres balises H trois, H quatre, H cinq ou H six soient ajoutées au paragraphe quatre. J'espère que vous l'avez compris et qu' une fois ces modifications apportées, cliquez sur publier, puis vous pouvez cliquer sur cet analyseur de réinitialisation et essayer de toujours le conserver au moins 80 ou 80 Ici, vous pouvez vérifier les brûlures et ici, il est écrit que je n' ai pas de slogan secondaire Nous pouvons donc simplement cliquer ici et cliquer sur Ouvrir un nouvel onglet, et ici nous avons deux problèmes Ici, je parle de mots clés ciblés. Il y a encore deux pages sans mots clés ciblés, il suffit d'écrire, de cliquer et de l'ouvrir dans la fenêtre et sur le personnalisateur, nous pouvons accéder à l'identité latérale, et ici nous pouvons ajouter un slogan J'ai déjà ajouté le slogan, je peux ajouter un slogan ici. Donc, à propos de ce message, il y a deux pages sans focus, sans mot clé. Donc, si nous consultons ces deux pages, nous avons une politique de confidentialité et des termes et conditions. Nous n'avons donc pas besoin d' ajouter de mot clé à ces deux pages, car nous n'avons pas besoin de les classer sur Google Nous pouvons donc ignorer ce problème. Et ici, le titre de l'hôte ne contient pas de mots clés ciblés. suffit de cliquer dessus et c'est sur la page d'accueil, et nous connaissons également ce message car nous changeons le titre et la description de la page d'accueil via Rank Man, et nous n'avons pas besoin de changer ce titre à partir d'ici. OK. Après avoir apporté toutes les modifications, je cliquerai sur Redémarrer SO Analyzer , puis je verrai le SO SCO J'affiche tout de même le même résultat, mais ce SCO est plutôt bon pour classer notre site Web sur les moteurs de recherche. Voici donc comment nous pouvons utiliser Rank Math pour faire sur la page SCO de notre site Web. 34. Configuration du plugin LiteSpeed Cache pour obtenir un site plus rapide: Bonjour à tous. Augmentons maintenant la vitesse des pages du site Web dans ESCO. Pour ce faire, passons d'abord à la vitesse des pages de Google à l'intérieur. Je vais simplement sur Google et je fais une recherche sur Google PageSpeed, et voici PageSpeed Insights. Cliquez dessus, et ici nous pouvons ajouter l'URL de notre site Web, afficher URL du site Web et cliquer sur Analyser. D'accord, sur mobile, ses performances sont de 74, et voyons voir sur l'ordinateur de bureau, 92, et c'est une très bonne performance. Cependant, améliorons mieux cela. Pour ce faire, accédons au tableau de bord WordPress, puis connectons-nous et ajoutons un plugin. Et nous allons utiliser le plugin de cache Light Speed. Sur les plugins de recherche, je vais rechercher le cache Light Speed. Ici, nous avons le cache Light Speed, cliquez sur Installer maintenant, puis sur Activer. Le plugin a été activé avec succès et nous pouvons voir ici Lightspeed, le plugin de cache, l'icône, et ici, nous avons le cache Light Speed Je vais simplement passer au tableau de bord sur le tableau de bord, nous avons ce type de design. abord, je vais cliquer sur ce service Enable Quicdt Cloud, cliquer sur et je vais accéder à cette page et ici je devrai créer un compte Je vais donc simplement cliquer sur Google Option et m' inscrire auprès de Google. abord, je dois cliquer sur ce bouton pour conclure un accord, puis je clique sur le compte Gmail pour m'inscrire et ici, je vais cliquer sur terminer la configuration de l' encre et retourner Wordpress. Je peux voir ce type de fenêtre maintenant, et ici je vais cliquer sur page speed disco to fps et voyons le résultat. Cela prendra du temps. Disons qu' avant 91 après 91, je vais cliquer sur ce bouton pash gratuit pour vérifier le temps de chargement de la page. En fait, c'est vraiment une bonne vitesse de page, c'est co et voici un temps de chargement de page ici, chargez D en 0,58 seconde puis allons-y un par un et configurons correctement le stab Tout d'abord, je vais passer au préréglage. Sur le préréglage, nous pouvons configurer ou appliquer le préréglage par défaut, en cliquant simplement sur ce préréglage mais je ne vais pas le faire. Je vais sauter cet onglet et passer aux informations générales en général, je vais passer à la configuration générale et ici, le mode invité est désactivé, je vais l'activer et je vais désactiver l'optimisation des invités. Pour l'adresse IP du serveur, je vais cliquer dessus pour vérifier mon adresse IP publique et voici l'adresse IP. Je vais juste le copier, puis je le collerai ici comme ça. Ensuite, je désactiverai la notification. Lors du réglage, je vais conserver les détails par défaut, et maintenant je clique sur Enregistrer les modifications. OK, nous avons maintenant cet onglet de cache. Passons à l'onglet Cache. OK, maintenant nous devons configurer ces onglets. Activez donc le cache et désactivez le cache pour les utilisateurs connectés ou désactivez-le et conservez les autres éléments. Ensuite, activez Cash mobile, et c'est tout. Cliquez sur Savchange et lorsque vous apportez des modifications, essayez toujours de consulter votre site Web dans la fenêtre de navigation privée, car ces paramètres peuvent endommager votre site Web. Essayez donc toujours de consulter votre site Web sur la fenêtre de navigation privée. Et sur DTL, je vais continuer le dépôt et, sur le perchoir exclure le dépôt. Si vous avez une URL ou une page spécifique que vous ne souhaitez pas utiliser de mise en cache, vous pouvez ajouter cette URL ici, et pour l'instant, je vais l'ignorer, et le reste de l'onglet sera un EIS, conservez l'objet par défaut, conservez les données et le navigateur par défaut , exclure le dépôt. Si vous avez une URL ou une page spécifique que vous ne souhaitez pas utiliser de mise en cache, vous pouvez ajouter cette URL ici, et pour l'instant, je vais l'ignorer, et le reste de l'onglet sera un EIS, conservez l'objet par défaut, conservez les données et le navigateur par défaut. Cliquez sur le cache du navigateur activé et sur Advance définissez simplement une valeur par défaut , puis cliquez sur Enregistrer les modifications. OK. Encore une fois, cliquez ici perch, puis consultez votre site Web dans la fenêtre de navigation privée Écrivez ceci et voyez s'il se casse, il fonctionne parfaitement. Et puis nous avons le CDN. Sur CDN, nous pouvons configurer un tarif rapide sur le Cloud ou le Cloud, mais dans ce cas, je ne vais pas le faire, alors nous avons l'optimisation des images Optimisation de l'image, cliquez sur cette demande d'optimisation pour envoyer une demande d'optimisation et faites-le jusqu'à ce que la case Ti apparaisse ici. Actuellement, c'est 7 %, et si je réessaie, cela indique que vous avez une image qui attend d'être extraite, alors essayez de le faire le lendemain, faites-le jusqu'à ce que vous optimisiez complètement vos images. Et sur le réglage de l'optimisation de l'image, cliquez sur ce Cron de demande automatique Lorsque vous faites cela, la fonction Cron optimise automatiquement vos images, vous n'avez donc pas besoin de cliquer dessus encore et encore Voici le format d'image de nouvelle génération, faites-le Web P, et cela préserve les données EXIV XMP optimiser les images originales, activez-les et non les sauvegardez, puis descendez et pour cet élément, il suffit de l'activer et de cliquer sur Enregistrer les modifications Ensuite, nous avons l'optimisation de la page D'accord, comme je vous l'ai déjà dit, lorsque vous travaillez sur ce plugin, cliquez toujours sur le perche Earl après avoir apporté des modifications, notamment sur l'optimisation de la page Ensuite, consultez le site Web dans la fenêtre de navigation privée, et s'il y a des problèmes, vous pouvez les résoudre immédiatement en annulant les modifications que vous avez apportées au cache de la vitesse de la lumière OK, nous avons ici la minification du CSS et CSS combinés seront sur ce CSS en ligne, créez-le lors du chargement du CSS, puis activez-le et puis optimisation de l'affichage des polices sera par défaut Cliquez ensuite sur Enregistrer les modifications et cliquez sur le perchoir A. Ensuite, allez dans la fenêtre Incoto, appuyez sur la page, le site Web et vérifiez avec breakof Non, cela fonctionne pour un faible , nous le site Web et vérifiez avec breakof Non cela fonctionne pour un faible Les étoiles ne s'affichent pas, corrigeons-le dans la prochaine leçon. Passons maintenant au réglage JS sur le paramètre JS, Js minify sera sur Js combine et gardons les autres éléments par défaut, puis cliquez sur Enregistrer les modifications et tout purger, puis cliquez ici, puis cochez le bouton ici, voyez, ajuster, fonctionne bien, ne fonctionne pas bien, ne fonctionne pas bien puis allez dans la table d' équipe SDM minify, ici, supprimer ou Prismog et enregistrer les modifications, puis cliquez sur Tout exhorter maintenant sur les paramètres multimédia ici, puis cliquez sur Tout exhorter maintenant un espace réservé réactif et vous pouvez modifier la couleur du support réactif Je vais conserver la couleur par défaut. Fabriquez cette charge paresseuse sur laquelle je m'encadre. Actuellement, nous n'avons aucun cadre en I sur notre site Web. Cependant, créez-le et ajoutez des tailles, définissez ici la qualité d' image Wordpress, faites-en 83, et si vous ajoutez 50 ou quelque chose de moins de 83 82, la qualité de l'image sera significativement radio, ne faites pas ça. OK, alors nous avons ce Ike par défaut et ici l'exclusion. S'il existe un média ou une image que vous souhaitez exclure du Lazy Load, vous pouvez simplement ajouter cette image. Les images et le contenu à chargement différé se chargent lorsque le visiteur fait défiler le site Web jusqu'à cette section. Par exemple, si je fais défiler l'écran vers le bas, cette image ne se chargera pas tant que je n'aurai pas vu cette section comme celle-ci. Ensuite, nous avons cette localisation et l'affaire Gravatacas on Voilà, alors en mode réglage, il suffit de conserver le réglage par défaut. Ensuite, le CSS conserve également le paramètre de dépôt, puis nous avons la base de données de base de données, nous pouvons effacer les révisions et les expirations forcées et les autres fichiers indésirables, les enregistrements indésirables créés sur Vous pouvez simplement cliquer sur ce nettoyeur si vous n'avez pas besoin de ce brouillon automatique et d'autres éléments, ou vous pouvez simplement cliquer un par un pour les supprimer. Lors de l'optimisation de la base de données, il suffit de conserver le dépôt. Ensuite, nous avons un crawler, mais nous n'avons rien à faire dedans et la boîte à outils se trouve également dans la boîte à outils, il n'y a rien à faire pour nous, et c'est tout ce que nous pouvons faire avec le plugin de cache Light Speed Supprimons maintenant ce disque de vitesse de page et ce temps de chargement de page Supprimons cette page speed disco et voyons ce qui va se passer Nous pouvons donc essayer cela sur la vitesse de page à l'intérieur, et ici la vitesse de page ICO est de 90, mais nous n'avons apporté aucune amélioration. Je pense que la raison en est que ce plugin est déjà installé sur le site Web. C'est peut-être le cas, mais nous augmentons le temps de chargement des pages. Ici, c'est toujours 74 et en voici 96, et c'est une très bonne performance. Et voici comment améliorer la rapidité de votre site web et je vous verrai dans la prochaine leçon. 35. Résoudre le problème d'affichage des Emoji sur votre site Web: Nous avons ici ce problème. Lorsque nous nous déconnectons de notre site Web, les icônes en forme d'étoile ne s'affichent pas, alors corrigeons le problème. Pour y remédier, je vais aller dans les plugins, cliquer sur adn et rechercher Code ISNIP et installer ce plugin de code WP D'accord, il vient d'être installé, puis je vais aller dans Installer, plugin et ici activer le code WP, plugin léger. Maintenant, je peux ajouter du code, vous n'avez donc pas besoin de le coder. Je vais fournir le code, il suffit donc de cliquer sur le code ici et de cliquer sur Ajouter un nouveau. Ensuite, à partir de là, cliquez sur Custom Snip et sélectionnez PHP Snip . Ici, je vais donner un code. Il suffit de vérifier la section des ressources et de mettre ce code comme celui-ci, puis de cliquer sur celui-ci actif et de cliquer sur Enregistrer le Avant de cliquer dessus, n'ajoutez rien d'autre, ajoutez simplement ce code, je vous le demande Si vous ajoutez d'autres éléments, votre site Web sera en panne. Cliquez ensuite sur Enregistrer le SNIP OK. Maintenant, si je vais coder ce nip, ici, je peux voir que cet élément actif est supprimé. Modifions-le et ajoutons un titre à ce code, il sera clair que lorsque quelqu'un essaiera de consulter notre site Web, j'ajouterai simplement ce texte et je cliquerai sur Mettre à jour pour le mettre à jour Maintenant, je passe à l'élément et aux outils. Et si votre site Web affiche correctement ces icônes, vous n'avez pas besoin de suivre cette leçon. Et ici, je vais simplement cliquer sur effacer le fichier et les données. D'accord. Ensuite, cliquez également sur le bouton de synchronisation de la bibliothèque puis ici et sur Light Speed, cliquez sur Purger A. Ensuite, ouvrons ce site Web dans une fenêtre de navigation privée et voyons s'il fonctionne Maintenant, cela fonctionne parfaitement, et maintenant nous avons un site Web entièrement conçu. 36. Projet de classe: Bonjour à tous. Félicitations. Vous avez conçu avec succès ce site Web de portfolio pour un coach d'affaires, et il est maintenant temps de passer à votre projet de classe. Dans votre projet de classe, ouvrez ce site Web de portfolio universel et sélectionnez portfolio féminin ou design de site Web de portfolio sur FICMA et modifiez le contenu du texte en fonction de votre type de portfolio Créez un portfolio pour vous-même ou pour un personnage ou un personnage fictif que vous aimez pour concevoir un site Web de portfolio, ce soit un coach, un homme d'affaires, un studio ou n'importe qui de votre choix Il vous suffit donc de modifier ce contenu et de créer votre propre version. Vous pouvez donc modifier cette couleur de texte en fonction de vos besoins. Donc ici, si vous n' aimez pas cette couleur primaire, cliquez simplement comme ceci et cliquez dessus, modifiez ce style, et ici vous pouvez simplement changer cette couleur. Lorsque vous changez cette couleur, nous allons lui donner cette couleur rouge. Cela affectera l' ensemble du design de cette manière. Il suffit donc de jouer avec et de créer votre propre version du site Web et partager sur le projet de classe de cette façon. Nous pouvons le vérifier et vous faire part de nos commentaires. Donc, dans ce cours, j'espère que vous apprendrez des choses précieuses, et je vous verrai au prochain cours.