Créez un site web de blog professionnel avec WordPress et Elementor Pro

1. Introduction à la création d'un blog professionnel avec WordPress et Elementor Pro: Êtes-vous prêt à créer un blog professionnel qui non seulement est magnifique, mais qui peut également être monétisé ? Bienvenue pour créer un site Web de blog avec Wordpress et Elemento Pro Dans ce cours, je vais vous guider étape par étape dans la création d'un blog WordPress moderne, réactif et entièrement fonctionnel réactif et entièrement fonctionnel à l'aide d'Elemento Pro ? Nous allons commencer par le tout début. Achat d'hébergement et de domaine, installation de WordPress et configuration d'Element of Pro. Ensuite, nous passerons au design où vous apprendrez à concevoir un blog unique entièrement personnalisé, créer des pages de blog, des pages à article unique et des pages de catégories. Ajoutez une fonctionnalité de recherche pour faciliter la recherche de contenu. Configurez un formulaire d'abonnement pour commencer à créer votre liste d'e-mails. Créez des pages importantes telles que celles sur les contacts, la politique de confidentialité et les termes et conditions. Corrigez la réactivité mobile pour que votre site soit parfait partout. Ensemble d'e-mails et de SMTV pour une communication professionnelle. À la fin de ce cours, vous aurez un blog magnifique, convivial et monétisable, personnalisé pour votre marque personnelle, votre entreprise ou Bonjour, je suis Akanka, une web designer du Sri Lanka et également la fondatrice d'UX Alchemy J'ai créé ce cours pour rendre le blogging plus facile, plus rapide et plus accessible, même si vous débutez. Si vous vous êtes déjà senti dépassé par WordPress ou si vous ne saviez pas par où commencer, ce cours vous apportera la clarté et la confiance dont vous avez besoin. Si vous êtes prêt à créer un blog professionnel, manière intelligente à l'aide outils modernes tels que WordPress et Elemento Pro, commençons à créer votre blog ensemble, à bientôt dans le cours 2. Avantages et inconvénients d'Elementor et WordPress: Dans ce cours, nous utiliserons principalement deux outils, WordPress et Elemental Pro Voyons ce que fait chaque outil, ses avantages et ses inconvénients. Quelques alternatives également. Vous savez exactement sur quoi vous travaillez. Tout d'abord, nous allons utiliser 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 de prose. C'est open source et gratuit. Vous avez le contrôle total de votre site Web, de la conception à la performance en passant par le système d'exploitation. 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. Bien qu'il soit flexible, sa configuration peut sembler technique au début. Alternative à Wordpress, Weeks et Square Space constructeurs de sites Web Earl in one sont plus faciles à utiliser, mais ils 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 est notre constructeur de pages. L'outil qui vous permet de transformer ce design Pt VolufGMA 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, Dragon Room. Vous aurez le contrôle total de la conception chaque partie de votre site, y compris l'affichage mobile. Elementp inclut des widgets avancés tels que des formulaires, des sliders, des intervalles de prix, des témoignages, etc. Avec le générateur de thèmes, vous pouvez concevoir la structure complète de votre site, les en-têtes, les pieds de page, les modèles de blocs, Element of P est un plugin payant, il n'est donc pas gratuit. De plus, si vous décidez de passer à un autre générateur ultérieurement, votre design ne sera pas transféré, vous devrez le reconstruire. 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, passons au design 3. Acheter un hébergement et un nom de domaine: Bonjour, tout le monde. Il est maintenant temps d'acheter un domaine et de l'héberger car nous avons besoin du domaine et hébergeur pour héberger notre site Web WordPress. Donc, choisissez d'abord le domaine. Il existe un site Web appelé taldls.com. Sur ce site Web, vous verrez toutes les promotions et offres des fournisseurs de domaines, et à partir de là, vous pouvez acheter un domaine qui sélectionne le meilleur Hostin et obtenir un domaine moins cher Ici, vous verrez un filtre. Ici, je vais rechercher notre nom de domaine en tant que conception Web personnalisée, et ici je dois cliquer sur vérifier que vous n'êtes pas un robot. OK, nous avons ici les domaines disponibles, et à partir de ce filtre de prix, je vais le mettre comme 1$ et voyons quel type de domaine nous avons pour 1$. Ici, nous avons domaine point S personnalisé 4099 de conception Web. Nom Jeep. Je vais donc choisir celui-ci dans le vaisseau spatial où nous pouvons obtenir le domaine point XYC pour Ici, je clique simplement sur Name Jeep et cela sera redirigé vers le nom jib Et ici, je peux rechercher le nom de domaine. Copions-le donc d' ici et collons-le. Cliquez ensuite sur Rechercher. Nous n'avons pas besoin du .com. Il nous faut des points. Ici, nous pouvons voir le point s, en fait, nous pouvons ajouter le point S. D'accord. Maintenant, nous l'avons pour 2,98 dollars. Il suffit de cliquer sur Ajouter à la carte pour ajouter à la carte. Maintenant, je clique sur Checkout et je peux ajouter le code promotionnel ici. Je vais donc aller ici et découvrons le code promo. Cette offre spéciale de 99€ est le code promotionnel. Il me suffit donc de le copier et de le coller ici, puis de cliquer sur Appliquer. OK, maintenant je dois me connecter au compte Name Jeep, en fait j'ai déjà un compte Name Jeep. Si vous n'en avez pas, vous pouvez cliquer sur Créer un compte gratuit et suivre les étapes. Dans mon cas, je vais cliquer sur me connecter, et j'ajouterai ici mon nom d'utilisateur et mon mot de passe. OK, je viens de me connecter au compte Namechp et ici, je vais ajouter le code promo, copier d'ici et le coller comme ça Cliquez sur Appliquer, et maintenant le sous-total est de 0,99, et je vais décocher tous ces éléments, donc supprimez-les Nous n'avons besoin d'aucun de ces trucs. Je peux donc 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 sur une base 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 nous avons ici le nom Chief Basic DNS. Je vais le changer pour le nommer Chief Web Hosting DNS. Ensuite, je vais cliquer sur ce savy et ça change. OK. Il ne nous reste plus qu'à passer au panneau C. Je vais héberger dans la liste, et dans la liste d'hébergement, voici notre hôte. Nous passons donc au panneau C, puis-je simplement cliquer dessus et il sera redirigé vers le panneau C. type de domaine ou de fournisseur d'hébergement que vous choisissez n'a donc pas d' importance . Les panneaux A C ont les mêmes fonctionnalités. Je vais donc faire défiler la page vers le bas et nous avons ici une section de domaine, suffit de cliquer dessus et maintenant, à partir de là, je clique sur, créer un nouveau domaine. Voici le nom de domaine défini, il suffit de cliquer sur, de créer un nouveau domaine, puis d'ajouter le nom de domaine, copier le nom de domaine et de le coller comme ceci. Ensuite, sur le serveur d'hébergement, il créera un nouveau point de conception de site Web personnalisé Fold Call. D'accord, nous aurons donc un sous-domaine. Alors maintenant, je clique sur le bouton Soumettre. OK, le domaine a été créé avec succès. Donc, si je clique ici et que je vais sur le site Web, cela ressemblera à ceci. Dans le nom G, nous avons un certificat presl pour un proche. Ainsi, lorsque nous cliquons ici, nous pouvons voir la connexion Cece, ce qui signifie que le certificat SSL est correctement configuré et que notre URL est TTPS Alors maintenant, Earl Wood, si vous n'avez pas obtenu cette page, attendez cinq à dix minutes et cette page apparaîtra. OK. Il ne nous reste plus qu'à installer WordPress dans le domaine. 4. Comment installer WordPress à partir de zéro: Bonjour, tout le monde. Il est temps d'installer WordPress. Je vais sur le panneau C et dans le panneau C, nous avons l'installateur de l'application Soft Tacular Il suffit de cliquer dessus et voici Wordpress et à partir de là, je clique simplement sur Installer. Et maintenant, je dois sélectionner les détails. abord, je vais sélectionner le protocole TTP, sans ce point www, donc uniquement le protocole TTP, puis je sélectionnerai le nom de domaine Voici donc notre nom de domaine et ici je vais choisir la dernière version du Wordpress et je n'ajouterai aucun répertoire. Je vais simplement installer WordPress dans le dossier racine, et ici nous pouvons modifier le nom du site et la description du site. Mais changeons-les pendant que nous concevons le site Web. Pour l'instant, gardons ces choses telles quelles. Et ici, nous devons ajouter le nom d'utilisateur administrateur et le mot de passe administrateur. J'ajouterai ces informations et j'ajouterai également un mot de passe. Assurez-vous de vous souvenir de votre nom d'utilisateur et de votre mot de passe, car vous devriez avoir à utiliser ce nom d'utilisateur et passe pour vous connecter au Wordpress. À partir de là, je remplacerai cet e-mail d' administrateur par un e-mail de travail, car cet e-mail ne fonctionne pas actuellement . OK, faites défiler l'écran vers le bas et ici je n'ai pas besoin de plugins supplémentaires. Supprimez les plugins supplémentaires et cliquez maintenant sur ce bouton d'installation et l'installation de WordPress sur le site Web commencera . D'accord, Wordpress a été installé avec succès et à partir de là, je peux cliquer sur cette URL et accéder au site Web de WordPress dans l'URL d'administration, je peux accéder à Wordpress comme ça. À partir de là, je clique simplement sur Non, je ne veux pas essayer un processus de configuration ET, et voici notre tableau de bord WordPress. Pour accéder au tableau de bord WordPress, nous pouvons simplement accéder à l'URL de notre site Web, puis ajouter WP Admin à la fin de l'URL du site Web. Voici maintenant à quoi ressemble notre site Web. Dans la leçon suivante, nous allons nettoyer le Wordpress et supprimer les éléments inutiles de notre site Web WordPress. 5. Installation et activation d'Elementor Pro Pro: Bonjour, tout le monde. Nous allons utiliser Elementor Pro pour concevoir notre site Web personnalisé, car Elementor est le meilleur constructeur de sites Web WordPress sur Elementor a une version préliminaire, mais ses fonctionnalités sont limitées Voyons les plans d'Elementor. Pour accéder à cette page, cliquez sur le lien dans la section ou la description des ressources, et vous serez redirigé vers cette page. Ensuite, nous avons un plan tarifaire. Le plan tarifaire recommandé est Advanced Solo Website Builder. Avec ce plan tarifaire, nous pouvons obtenir 118 budgets avant et pro, et il comporte 86 projets, mais avec le plan essentiel, nous n'avons que 57 projets. Comme si nous allions au marché dans la section commerce électronique avec Advanced Solo, nous obtiendrons un générateur de fenêtres contextuelles. C'est une fonctionnalité que nous allons utiliser, et dans la marque Essential, nous n'avons pas beaucoup de fonctionnalités. Toutefois, si vous envisagez de concevoir plusieurs sites Web, vous pouvez passer au plan avancé. Ou si vous êtes un indépendant qui crée un site Web pour vos clients, vous pouvez acheter la version experte En choisissant ce type de plan, nous pourrons remplacer de nombreux plugins et modules complémentaires, ce qui contribuera à augmenter la vitesse de chargement des pages et à optimiser l' ensemble du site Web. Commençons donc par installer Elementor. Pour ce faire, je vais aller sur le tableau de bord de notre site Web, et ici je vais aller dans les plugins et cliquer sur AdNeu. Tout d'abord, nous devons installer le pré-plugin element. À partir de là, je vais rechercher Elementor. Ensuite, nous avons le plugin de création de site Web Elemento. Il est développé par elemento.com, et il est compatible avec notre version Wordpress Je clique donc sur Installer maintenant. D'accord. Puis je clique sur Activer. C'est bon. Maintenant, je clique sur Escape et je vais sauter ces étapes ou je vais cliquer sur ce bouton Fermer car nous allons configurer Elementor Pro à l'aide du site Web d'Elementor Encore une fois, cliquez sur l'URL de la section des ressources et vous serez redirigé vers cette page, et à partir de là, je cliquerai sur le bouton À l'heure actuelle sur le site Web Advance solo, plan Builder. Et ici, je vais devoir renseigner les détails. Ensuite, je cliquerai sur payer maintenant et j'effectuerai le paiement. Une fois inscrit avec succès, vous pouvez le télécharger à partir d' ici en cliquant sur ce bouton de téléchargement, ou vous pouvez accéder au bord Elementor en ajoutant ind elemento.com Et lorsque vous faites cela, vous verrez ce type d'icône de téléchargement, puis vous verrez l' élément se connecter à Télécharger, cliquez sur puis le téléchargement va démarrer et vous avez maintenant l' élément de plugin. Configurons maintenant notre site Web pour le faire. Je vais accéder au tableau de bord WordPress accéder aux plugins et cliquer sur Installer le plugin. Ensuite, je clique sur Ajouter un nouveau plugin. Ensuite, je clique sur ce bouton de téléchargement de plug-in. Ensuite, je clique sur pour empiler, et voici le plugin Element Pro téléchargé. Il s'agit donc d'un fichier C. Il me suffit donc de le sélectionner et de cliquer sur Ouvrir. Ensuite, je clique sur Installer maintenant. L'installation prendra quelques minutes. D'accord. Ensuite, vous verrez cette fenêtre. À partir de là, il vous suffit de cliquer sur ce bouton d'activation du plug-in. Et il s'installera avec succès. Voici donc le plugin d'installation. Maintenant, je clique sur connecter et activer. J'en viendrai ensuite à ce type de page. Je clique donc ici sur activer ma licence. D'accord, Elemento Pro a été activé avec succès, et maintenant nous pouvons utiliser les fonctionnalités de l'Elemento 6. Nettoyer le tableau de bord WordPress: Bonjour, tout le monde. Sur votre tableau de bord WordPress, vous verrez ce type d'élément. Pour les supprimer toutes, vous pouvez simplement cliquer sur ces options Estren et décocher ici l'onglet Istab que vous n'aimez pas voir Ainsi, lorsque vous les décochez, vous ne verrez plus ces onglets En ce qui concerne les plugins, je vais passer à Installer le plugin. Il installe automatiquement le cache Light Speed sur le site Web. Voici un plugin de cache à vitesse légère installé sur mon serveur. Je vais cliquer sur Désactiver car pour l'instant nous n'avons besoin d' aucun plugin de cache Je vais le supprimer. OK, parfait. Commençons par concevoir le site Web dans la leçon suivante. 7. 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. Alors 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 8. Installation du thème et configuration du blog: Maintenant, installons le thème. Je vais me rendre sur Apparence et cliquer sur Équipe. Sur Tens, cliquez dessus. Ici, je vais rechercher Hello Elementor. Nous avons trouvé le thème. Nous pouvons cliquer sur Installer et cliquer sur Activer. Nous avons maintenant Elemento Pro et Halo Element Thème. Maintenant, ce que nous devons faire, c'est créer quelques articles de blog. Sur le post, cliquez sur tous les articles et voici actuellement trois articles de blog, mais j'ai besoin de plus d'articles de blog car si je n'en ai pas, nous ne pourrons pas obtenir aperçu de qualité de notre site Web, ce qui signifie que nous aurons beaucoup d'Ipaces Créons quelques articles factices et une fois la conception terminée, nous pourrons tous les publier, cliquer ici et cliquer sur les modèles, puis supprimer ces publications et les supprimer définitivement. Je vais me rendre sur ChagPT et à Douvres, je dirai ici que vous êtes un conseiller financier et que je veux que vous génériez 12 articles de journal et je les supprimerai Voici une partie plus d'informations et ici je dirai qu'ils devraient avoir un titre 500 à 600 mots. La catégorie devrait être les finances personnelles, les impôts, la gestion des dettes. Investissements. Je vais le supprimer, me donner trois choix et ici je dirai également, donnez-moi également petite description de chaque catégorie pour chaque catégorie et appuyez sur Entrée, ici nous avons les descriptions des catégories , et ici nous avons et ici nous avons Les posts du bloc sont vraiment petits, ce qui signifie que ce n'est pas une bonne chose Je dois dire que vous devriez être généraux et hôte électronique doit avoir au moins 700 mots ou plus. Voyons voir. Oui, je vous en prie. Ici, je génère le journal de bord. Il doit maintenant générer le B deux. Je dirais, s'il vous plaît, cela générera le reste du billet de blog, et dans cet article de blog actuel, ceux-ci ne sont pas liés au créneau financier. Je vais simplement les supprimer toutes, cliquer sur cette case à cocher et cliquer sur Action groupée. Maintenant, appliquer sur Rash, cliquer ici, supprimer par C'est bon. Je vais maintenant passer aux catégories Nous avons actuellement cette catégorie non classée, mais nous avons déjà généré quelques catégories. Disons donc, s'il vous plaît, ici pour générer le reste. Et montons. Et ici, ajoutons ces catégories, il suffit de cliquer sur les finances personnelles et d'ajouter le nom et la description comme suit, cliquer sur la catégorie, puis sur la description fiscale, catégorie de gestion de la dette, la description, enfin sur l' investissement. C'est bon. Nous avons maintenant quatre catégories et la catégorie Non classé est la catégorie par défaut. Laissez-le là, puis passons à tous les articles et maintenant nous devons ajouter ces messages. Voici le premier article de blog. Copiez d'abord le titre et allons-y, cliquez sur « at post ». Très bien, nous avons ici éditeur Gutenberg, nous devons utiliser cet éditeur, il suffit de copier le titre, de copier le reste du message comme ceci et de le coller Ici, nous pouvons supprimer ces éléments comme celui-ci, le supprimer et également supprimer celui-ci, sélectionner l'élément et Oh, il sélectionner l'élément et Oh, suffit de sélectionner l'élément et d' appuyer sur Supprimer sur le clavier. Nous avons ceci et ces titres sur H trois, je vais en faire un H deux. De plus, je vais faire ce H deux et ce titre est sur le titre principal est sur le H et le reste du titre sera un H deux et s'il y a beaucoup de H deux, ce n'est pas une bonne chose Dans ce cas, nous pouvons trouver les en-têtes de cet en-tête principal puis en faire un H trois Pour l'instant, je vais juste faire les choses comme ça et le plugin rank math, vous pouvez le faire facilement. Je vais maintenant cliquer sur publier et publier le billet de blog. Actuellement, nous avons un article de blog comme celui-ci et je vais y retourner et ici nous devons ajouter une image en vedette. Sans cette image vedette, cet article de blog ne sera pas beau. Je vais créer les images en vedette et nous vous verrons dans une seconde. C'est bon. Je viens de créer l'image en vedette. Cliquons sur ce titre, puis nous pouvons voir le bouton Image de cette fonctionnalité. suffit de cliquer dessus et je téléchargerai ici toutes les images en vedette que j'ai déjà créées. Allons-y. Je sélectionne toutes les neuf d'entre elles, et attendons qu'elles soient téléchargées pour que vous puissiez découvrir les images en vedette ou les images définies dans la section des ressources Ici, si vous vérifiez ces images, largeur et la hauteur de toutes ces images sont identiques. Ici, nous en avons 1060 en largeur et 720 en hauteur. Assurez-vous donc toujours d' ajouter une force d'images ayant la même largeur et la même hauteur pour rendre le site Web unique Si nous ajoutons des images tailles différentes, cela affectera la conception de notre site Web. Maintenant, je clique sur définir l'image de la fonctionnalité. De plus, je dois ajouter une balise ol, une balise ALT, puis je clique sur, dit futur Dimag, maintenant je clique sur Enregistrer et c'est parti Nous venons de créer notre premier article de blog et il nous en reste huit autres. Toujours dans la catégorie, nous devons sélectionner la catégorie. Nous avons déjà créé nos catégories, la catégorie Fst par défaut est Uncategorized Je vais le supprimer et voici les finances personnelles, article de blog, maintenant je clique sur Concevoir à droite. Maintenant, cet éditeur Gutenberg possède de nombreuses fonctionnalités. Si vous le souhaitez, vous pouvez les utiliser. Par exemple, si vous souhaitez ajouter une nouvelle section ici, il vous suffit de cliquer ici et d'appuyer sur Entrée, puis de cliquer sur le blog de cette annonce. Vous pouvez sélectionner ici type d'élément que vous souhaitez ajouter. De plus, si vous cliquez sur Parcourir ou sur cette icône en forme de plus, vous pouvez voir tous les éléments. Pour l'instant, tout va bien, je vais donc cliquer sur Enregistrer. Maintenant, je vais cliquer ici, passer à la page A post et cliquer sur «   at post » pour ajouter un nouvel article. Maintenant, montons. Nous avons déjà ajouté celui-ci et maintenant nous devons ajouter le second, copier le titre et faire face au titre. Tu crois que c'est plus beau que ça. C'est juste pour tester, copier-coller comme ça. OK. Maintenant, je vais cliquer sur ce post et cliquer sur Enregistrer l'image en vedette. Désolé, définissez l'image en vedette, et nous avons ici l'image du fonds d'urgence, ajoutez le tag Al et la catégorie Slate, finances personnelles, cliquez sur publier, publiez le message. Maintenant, je peux cliquer sur Publier et ajouter le premier article, donc je le ferai et à bientôt. 9. Configuration des paramètres du site: D'accord. Nous avons maintenant tous les articles et ici cette catégorie de publication est sélectionnée comme non classée. Cliquons sur Quick Edit et ici nous pouvons le définir comme mise à jour de la gestion de la profondeur. Maintenant, nous avons également les détails de notre marque. Voici le logo de la marque. Je viens de le créer et voici le guide de style. Nous avons donc ici les détails de la marque et les codes couleur, ainsi que l'en-tête et le corps du texte. Que nous sommes censés utiliser. D'accord. Nous avons maintenant toutes les informations. Ensuite, ce que nous pouvons faire, c'est accéder aux pages, cliquer sur toutes les pages. Et ici, cliquez sur la page pour créer notre page d'accueil. Pour le nom de la page d'accueil, je vais simplement ajouter Wealth Wise. Désolé pour le titre, je vais copier et le coller comme ça. Ajoutons ensuite cette partie au slogan du site Web. Lorsque je le colle simplement en appuyant sur Command V ou Control V sous Windows, il est ajouté sous forme de paragraphe. Ce que nous pouvons faire, c'est coller texte ici et surligner le texte, commande A ou contrôle A, puis commande X. Et ensuite, le coller comme ça. D'accord. Maintenant, je vais cliquer sur Modifier avec Elemento D'accord. Sympa. Nous sommes maintenant chez Elemento Editor Ce que nous pouvons faire, c'est définir ces éléments sur le décor. Cliquez ici et cliquez sur ce paramètre latéral. En ce qui concerne le réglage, passons aux couleurs globales et nous avons ici le texte secondaire principal et les couleurs d'accent. Copions ces codes couleurs. Ajoutez à notre site Web comme ceci. Allons-y. En fait, cela devrait être la couleur d'arrière-plan, pas la couleur du texte. Je vais donc simplement ajouter un arrière-plan, Je vais donc simplement ajouter pas besoin couleur, il suffit d'ajouter un arrière-plan au texte, ajoutons une couleur primaire au texte, ce qui signifie que nous devons copier cette couleur primaire d'ici et la coller comme ceci. Ou peut-être faisons-nous en sorte que cette couleur soit un peu plus foncée, car elle devrait être facile à lire car il s'agit d'un bloc et même s'il ne s' agit pas d'un bloc, lorsque nous créons un site Web, nous devons vérifier l'accessibilité des couleurs, et maintenant je clique sur Enregistrer modifications, puis nous avons les polices. Ce que nous pouvons faire, c'est revenir en arrière et cliquer sur Polices globales, et voici les polices. Ajoutons ces polices. abord, nous avons les fopens, copions les fenêtres contextuelles, ajoutons une famille de polices sous le nom de fopen, ajoutons une famille de polices sous le nom de fopen, et la taille sera 62 et avec cent en gras Je vais faire la transformation en majuscules et changer la ligne neuf Faisons comme ça et l'espacement des lettres est plutôt bon Je vais donc changer ici ces deux en-têtes principaux. Ensuite, nous devons ajouter un sous-en-tête pour le sous-en-tête, famille de polices familiale apparaîtra et sera dimensionnée, faisons en sorte que la taille soit 52, pas 62, 52 avec mold crasformg line night, faisons-en 52, d'accord, et ici nous devons ajouter C'est Laura, il suffit de le copier. Aura et faisons en sorte que ce soit 21. Peut-être que 20, ce sera du travail. Alors avec cette normalité, disons comme Linet, peut-être devons-nous changer la hauteur de la ligne Vérifions-le une fois que nous en serons arrivés là. Ensuite, je dois appuyer sur le bouton pour le texte du bouton , obtenir HopinshPins 21, faire un paese Peut-être faisons-en un médium. Linet aura également 21 ans. Maintenant, veuillez concevoir afin que nous ayons maintenant les polices globales et couleur globale et que nous ignorions leur style. Ensuite, en ce qui concerne l'identité du site, ajoutons-les pour plus tard. Pour l'instant, nous devons passer à l'arrière-plan. arrière-plan, je vais cliquer sur le type d'arrière-plan comme d'habitude, et ici je dois ajouter la couleur d'arrière-plan, alors cliquez ici et sélectionnez la couleur d' arrière-plan comme celle-ci. Ensuite, le concept change, puis revenons en arrière. Et maintenant, nous devons ajouter la mise en page. Définissons donc la valeur par défaut avec ceci, alors l'écart sera de deux. Le remplissage du conteneur par défaut est de dix, restons-en ainsi et revenons en arrière et tout sera prêt Fermez maintenant ici et passons au site Web. Maintenant, je vais cliquer sur la mise en page, sur la mise en page, la mise en page sera un élément de pleine largeur. Toujours sur la mise en page, faisons-en un élément de pleine largeur. Revenons ensuite en arrière et en ce qui concerne l'identité du site, ajoutons ces détails dès maintenant. Donc, copiez d'abord le nom du site, collez le nom du site ici, puis copiez le slogan. Collez le slogan ici. De plus, ici, nous pouvons ajouter le logo du site, cliquer ici, et voilà, nous avons le logo du site, ajoutez-le simplement et sur l'ancienne balise, cliquez sur l'icône Select and sit FV Je viens de créer le Fav Con. Cliquons sur cette image Qs et ajoutons cette icône FV. Vous trouverez ces informations dans la section des ressources OK, maintenant cliquez sur le masquer maintenant , cliquez sur Enregistrer les modifications Et passons à la fenêtre de l' éditeur. C'est bon. Maintenant, le site Web ressemble à ceci, alors maintenant je clique sur publier et supprimons cette page Quand je presse la page, elle ressemble à ceci 10. Création et personnalisation d'un en-tête: C'est bon. Maintenant, dans un premier temps, nous devons créer l'en-tête. Passons donc au tableau de bord WordPress. Donc, notre site Web, UrlaWP Admin. Ensuite, à partir de là, nous avons ces modèles et cliquez sur Team Builder. Sur Team Builder, ici nous avons un en-tête, cliquez sur l'icône plus. Sympa. À partir de là, nous pouvons sélectionner un en-tête ou en créer un à partir de zéro. Ici, je vais fermer ceci et créer à partir de zéro. À partir de là, je clique sur l'icône plus et je sélectionne la case Plex. La boîte Plex sera la ligne de direction. Et voilà, il suffit de faire avancer ce conteneur et de retirer toutes les marges et les rembourrages. Et comme le perchoir représente la profondeur, j'ajouterai le logo St Cliquez ici pour ajouter un élément et nous avons ici le logo latéral. Allons-y. Passons ensuite à eTyleoeStyle, nous pouvons en modifier la largeur Faisons en sorte que le M reste avec 75 % et le repos sera bon. Alors maintenant, je clique sur le conteneur et j'ajoute un rembourrage en haut et en bas Ajoutons le haut comme six et le bas comme ceci. Maintenant, nous devons ajouter l'homme, alors cliquez sur Ajouter un élément et sur le menu de recherche. Et ici, nous avons un nouveau menu, ajoutez-le simplement comme ça. Actuellement, nous n'avons pas de menu dans les menus. Donc, ce que nous devons faire, c'est cliquer dessus, accéder à l'écran du menu. Et gérez le menu à partir d'ici. Donc, ce que je vais faire, c'est cliquer dessus pour créer un nouveau menu. Ensuite, j' ajouterai ici le nom du menu. Faisons-en un menu principal et créons un menu. OK, nous avons créé avec succès le menu principal, et maintenant nous devons ajouter l'élément de menu. Voici la page d'accueil. Cliquez simplement sur la page d'accueil, puis sur Ajouter au menu. Et si nous allons tout voir, nous n'avons pas d'autres pages. Ici, nous avons une page appelée accueil. Mais voyons voir, pour vérifier, je vais passer aux pages et aux pages. Sur toutes les pages, nous n'en avons aucune. Maintenant, ce que je peux faire, c'est cliquer ici et changer cette étiquette de navigation en home comme ça. Ensuite, nous devons ajouter des informations sur le blog et les pages de contact. Ce que nous pouvons faire, c'est créer un lien personnalisé ici, il suffit d'aller sur customink et d' ajouter le hashtag des URL ici, ajoutons des textes de lien nous concernant. Cliquez sur Meno, puis à nouveau le hashtag et sur le Link Texas Blow Nous devons créer des pages distinctes pour tous ces liens personnalisés, mais pour l'instant, concentrons-nous sur le menu principal et la page d'accueil. Ou en fait, nous pouvons créer la page vide pour chaque page ou nous pouvons créer des pages vides et l'attribuer directement ici. Ainsi, nous n'aurons pas beaucoup de travail à faire. Je vais donc supprimer ces messages et cliquer sur Enregistrer le menu. Maintenant, nous pouvons aller sur les pages et cliquer sur At NW. Et ici, je vais ajouter titre de cette page à propos de nous, publiez-la, cliquez sur la page AD, bloguez, publiez-la, cliquez sur la page et contactez-nous pour publier. OK. Maintenant, ce que je peux faire, c'est revenir aux menus et ici, sous apparence, nous avons des menus et ici maintenant nous pouvons cliquer sur pages et tout afficher. Ici, nous avons toutes les pages comme celle-ci, les sélectionner toutes et cliquer sur Atomnu et le résultat a été ajouté comme ça Ensuite, sur les catégories, nous pouvons classer et cliquer sur Ajouter un menu et nous pouvons ajouter ces catégories sous ce coup comme ceci. Il suffit de l'ajouter comme ceci sous la page principale. Cliquez maintenant sur Enregistrer le menu et passons maintenant à l'en-tête Elementor et publions-le pour le moment En fait, nous pouvons l' enregistrer en tant que brouillon, cliquer ici et cliquer sur Enregistrer le brouillon. De cette façon, nous pouvons l' enregistrer sans le publier. Sélectionnez maintenant le menu Worresmenu et ici, choisissez le menu comme menu principal OK, le menu s'est chargé comme ça et maintenant je vais sélectionner le conteneur principal et, lors de la mise en page, ajouter comme espace entre les deux. OK, maintenant nous devons changer le design du menu. Ce que je peux faire, c'est cliquer sur le menu et aller sur Estyle et la typographie sera Cependant, nous devons modifier sa taille. Changeons-le comme 18. Ensuite, la couleur du texte sera le texte, couleur normale, et sur HA en fait, nous n'avons pas besoin de diviseur Si vous aimez le diviseur, il vous plaira Ensuite, sur le bord supérieur, la couleur du texte sera cette couleur verte. Donc, quand je passerai, il paraîtra vert et nous n'aurons pas besoin de pointeur. Ainsi, en couleur active, la couleur du texte sera secondaire. Et si le contenu est ici comme pointeur, vérifiez qu'il n'y en a aucun. Si vous aimez un pointeur comme celui-ci, vous pouvez le conserver, mais je n'aime pas simplement cliquer sur aucun, et l'alignement démarrera. OK, maintenant tout va bien et passe au style E. Et ici, faisons en sorte que ce motif horizontal soit égal à zéro, et le motif vertical sera également égal à zéro. Maintenant, je vais ajouter un espace entre nous. Ajoutons que 90, 90 c'est trop gros. Faisons en sorte que ce soit 60. Oui, 60 ça a l'air bien. OK. Passons maintenant à la liste déroulante. Faisons du texte déroulant la couleur principale ici. Ensuite, la couleur d'arrière-plan sera cette couleur d'arrière-plan, et la typographie sera le bouton, mais la taille de la police est de 80 comme ça Et sur le bord supérieur, la couleur du texte sera verte et la couleur d'arrière-plan le sera. Faisons-en une couleur primaire et voyons comment cela fonctionne. Oui, ça marche parfaitement. Et si vous êtes actif, faisons-le. OK. Ici, nous n'avons pas besoin de bordure. Et ici, ajoutons des motifs horizontaux, faisons-en 30, et voyons voir si ce devrait être un motif vertical. Créez un motif vertical car 30, 30 c'est trop. Peut-être que nous arriverons à 20 et le schéma horizontal en fera également 20. Maintenant, cela ressemble à ceci, et ici nous pouvons changer la distance depuis le menu. Faisons en sorte que 2020 soit trop. Faisons comme si neuf c'était plutôt bien. Bouton de bascule. Cette bascule, mais nous devons ajuster les détails du bouton de bascule sur la vue mobile, car actuellement, la vague mobile ressemble Mais dans les leçons à venir, nous allons corriger l'affichage mobile Pour le moment, gardons-le comme ça et placons-le au centre. Cliquez simplement sur ce conteneur principal et alignez les éléments qui seront au centre et cliquez également ici. Maintenant, je vais sélectionner ce conteneur et les articles en ligne, cliquer sur Center pour créer ce centre comme celui-ci et il a l' air plutôt beau. Corrigons également les versions tablette et mobile en même temps. Donc, ce que je peux faire, c'est cliquer sur la version tablette. Sur la version tablette, je sélectionnerai le conteneur et, en margeant à gauche et à droite, disons 15 et à gauche 15 OK. Maintenant, cette image est plutôt belle, et maintenant cliquez sur ce menu Hamburger. Et ici, nous pouvons changer la taille à notre guise. Changeons-le. 36 et la largeur de la bordure sera égale à zéro, le rayon de la bordure sera également égal à zéro. Et la couleur de fond sera cette couleur primaire ou la couleur du texte, et le menu Hamburger sur la couleur sera la couleur de fond. OK. Nous avons maintenant un problème. Lorsque nous ouvrons ce menu, il s'ouvre avec le reste du conteneur. Pour corriger le problème, je vais cliquer sur le mot Rsmo et ici sur le contenu, je vais le faire en pleine largeur Et puis si je le vérifie, il s'ouvrira comme ça. Et maintenant, nous avons un problème. Ce bouton à bascule ne répond pas et c'est comme si vous n'étiez pas dans la mise en page Ce que nous pouvons faire, c'est cliquer sur le conteneur et le conteneur changer de direction en colonne verticale, et maintenant si je le vérifie, cela ressemblera à ceci, et maintenant il a vraiment l'air bien. Ici aussi, nous pouvons placer le contenu du logo de ce site au milieu en l'ajoutant à cent pour cent comme ceci. Et si vous vérifiez ces propriétés, vous verrez cette icône de portrait de tablette Cela signifie donc que lorsque nous apportons des modifications alors que nous sommes sur la version tablette, ces modifications n' affecteront que la version tablette. Si nous passons à la version de bureau, le design est le même, et vous pouvez voir ici l'icône du bureau. Et si vous cliquez sur mobile, vous pouvez voir le mobile ici. Bien, travaillons maintenant sur la version mobile. OK, passons au mobile et voilà, il suffit de cliquer sur le conteneur principal et de régler la direction sur Pro Horizontal. OK. Maintenant, allons-y. Pour ce faire, cet élément de menu doit se trouver sur le côté droit. Ce que je peux faire, c'est aller m'asseoir avec le logo. Ici, passons maintenant à l'avance, je vais modifier cette largeur non l'image avec la largeur du logo de ce site. Personnalisons-le et diminuons sa taille comme ceci. Ajoutons-le comme ça. OK. Faisons en sorte que ce soit 270 Nice. Maintenant, nous avons déjà eu ce problème, qui est que le bouton côte à côte ne s'affiche pas correctement et j'ai trouvé la raison de ce problème. Si nous passons d' un conteneur à l'autre, nous ajoutons une marge de 15 à droite et à gauche. Mais ce que nous devons faire, c'est l' ajouter sur le rembourrage. Faisons en sorte que la marge de gauche à droite soit nulle. Lorsque nous l'avons fait, le problème a été résolu. J' ajouterai ici les six premiers et le rembourrage sera de 15 Et le rembourrage gauche sera également de 15. Encore une fois, nous devons réduire cette taille un peu plus comme ça. En fait, si nous optons pour ce qui n'est pas ici dans un conteneur, passons à la mise en page. Lors de la mise en page, fixons l'écart à zéro. Et maintenant, sur le logo latéral, nous pouvons l'ajouter comme ça, pas 25245 OK. Maintenant, ça a l'air plutôt bien. Et si on passe à la version tablette, on peut faire la même chose sur la version tablette. Il suffit donc de cliquer ici et de faire en sorte que la ligne de direction soit horizontale. Et allons-y, enlevons cette marge à droite et cette marge à gauche. Alors ajoutons-le ici même. En fait, nous devons cliquer ensemble sur la valeur du lien pour la vérifier 615615 C'est bon. Nous n'avons pas ajouté de marge à droite et à gauche sur la version de bureau, nous pouvons donc la mettre comme ça et c'est parti, voici notre menu et notre logo, et voici l'en-tête. Cliquez maintenant sur Publier, puis nous avons ici « À condition ». Je vais donc cliquer sur Condition, et je vais inclure l'ensemble du site. Ensuite, je clique sur Enregistrer et sur la clause Ar. Passons maintenant à notre page d'accueil. Revenons à la page des paris. Et c'est parti. Voici la page d'accueil. Vérifions-le OK, maintenant ça ressemble à ça, et voici la partie en bas de page Pour l'instant, créons un pied de page vide et nous pourrons créer le pied de page une fois que nous aurons terminé la section des héros Pas la section des héros, la page d'accueil. Bien, passons aux modèles Team Builder Team Builder. Et ici, nous avons deux en-têtes. Il s'agit de l'en-tête. Donc, si je vais ici. Il s'agit de l'en-tête, je vais donc le supprimer. Dans la corbeille, modifiez la corbeille, cliquez ici et cliquez sur Renim. Alors, passons à Head, changez-le comme ceci. C'est bon. Ça a l'air bien. Passons ensuite au pied de page. Je clique simplement ici, et voici quelques pieds de page. Pour l'instant, je vais l'ignorer et simplement cliquer sur publier sur l'ensemble du site, puis sur Enregistrer et fermer. OK. Voyons voir. Allons-y. Voici maintenant le site web. Dans la leçon suivante, nous devons concevoir la page d'accueil. 11. Concevoir la section de héros: Tout le monde. Concevons maintenant la page d'accueil. Actuellement, si nous allons sur la page d'accueil, cela ressemblera à ceci, et je veux définir la page d'accueil. Dans notre cas, passons au tableau de bord et à la page des pages 0, et nous devons configurer cette page. Donc, pour ce faire, je peux appuyer sur le tableau de bord, puis passer à set in et à Tding Je vais l'ouvrir dans une nouvelle fenêtre, et ici, sur votre page d'accueil, cliquez sur une page statique et définissez cette page d'accueil comme notre double page d'accueil que nous avons créée. Maintenant, je clique sur Enregistrer les modifications. Maintenant, si je visite le site Web, il ressemblera à ceci car notre page d'accueil est vide. Maintenant, je clique dessus avec Elemento, d'accord. Il est maintenant temps de concevoir la page d'accueil. OK, commençons le design. Tout d'abord, nous devons créer la section des héros. Mon plan est donc de créer un slider de publication. Ce slider contiendra donc environ trois articles, probablement les trois derniers. Faisons-le. Tout d'abord, je clique sur cette icône plus Xbox et la direction sera indiquée dans la colonne. OK, maintenant je vais passer à Advance et supprimer tout le rembourrage et les marges Je vais maintenant cliquer sur cet élément publicitaire. Donc, dans Pro, nous avons un carrousel à boucles À l'aide de ce carrousel en boucle, nous pouvons créer des sliders avec La publication est donc un contenu dynamique, ce qui signifie que nous pouvons ajouter publication en utilisant notre tableau de bord en d'autres termes. En d'autres termes, WordPress est un système de gestion de contenu CMS. Utilisons donc cette fonctionnalité pour créer notre grille de publications. Pour ce faire, je vais simplement utiliser un chiffon et dévaliser ce carrousel à boucles à l'intérieur OK. Ici, je peux sélectionner le type de modèle. Dans notre cas, il devrait s'agir de posts. Si vous créez différents types de force à l'aide de champs personnalisés avancés du plug-in, tous ces éléments seront chargés ici. Dans notre cas, nous avons un post, puis ici nous pouvons définir la requête avant de définir la requête. Créons un modèle. Je clique donc sur Créer un modèle puis sur Enregistrer ici pour enregistrer ce design. OK. Maintenant, ce que je vais faire c'est cliquer sur cette icône plus et sur la case Plex, la direction sera une colonne. OK, alors comme je l'ai fait auparavant, je supprime tous les éléments E inutiles et je clique sur Ajouter un élément. Et ici, nous avons le titre de la pose, extrait de la publication, la fonctionnalité Dimag, contenu de la publication, les informations sur la publication Ce que nous devons ajouter, c'est le contexte. Pour ajouter l'arrière-plan, je vais ajouter la fonctionnalité forcée Dimage Ce que je peux faire, c'est sélectionner ce conteneur et aller dans Estyle, cliquer sur Classic et ici, je peux utiliser cette fonctionnalité de balises dynamiques, cliquer dessus, et nous avons ici des balises dynamiques. Dans notre cas, j'ai besoin de la fonctionnalité Dimage. Cliquez simplement sur la fonctionnalité Dimage. La fonctionnalité Dimage montre comme ceci. Avant d'aller plus loin, je vais cliquer sur cet élément de boucle défini et ici je vais changer ce titre en modèle de curseur de pause Ensuite, je publierai ceci. Maintenant, je clique sur Enregistrer et retour et nous revenons à notre page d'accueil. Ici, nous devons sélectionner le Loop Garsel et maintenant nous devons ajouter le nombre de diapositives J'ai besoin de trois diapositives. Sit on display en sera un et sit on Scroll en sera un également. Maintenant, je clique sur le modèle, et c'est parti, notre modèle change comme ça. Maintenant, ce que je peux faire, c'est cliquer sur le conteneur et ajouter Might. Ajoutons la hauteur de 700 comme ceci. Passons maintenant aux tuiles Es sur les fichiers E. La position sera au centre et la pièce jointe sera celle par défaut, répétez, pas de répétition, taille d'affichage, faisons en sorte que la couverture soit la suivante. Ensuite, nous pouvons ajouter un effet de défilement, mais je ne l'ajouterai pas, et ici nous pouvons ajouter un effet de souris. Je ne vais pas le faire. Ce que je vais faire, c'est ajouter une superposition d'arrière-plan, cliquer ici, cliquer sur normal, et le type d'arrière-plan sera classique et la couleur sera notre couleur principale Ou ça. Donnons-en une couleur de fond, et augmentons l'opacité comme cinq. Je n' ajouterai sûrement aucune couleur de fond Maintenant, ce que je veux faire, c'est ajouter le titre de la pose et une petite description ou petite information sur le message, comme extrait, et voici un bouton appelé Read Me. Faisons-le. Pour ce faire, nous pouvons cliquer sur Ajouter un élément et d' abord, ajouter le titre de l'article. OK, je ne m'autorise pas à mourir. Donc, ce que je peux faire, c'est publier ceci et cliquer sur Modifier la page. OK. Encore une fois, cliquez sur Modifier le modèle. C'est bon. Maintenant, je peux ajouter que c'est comme un problème. Il suffit donc d'ajouter le titre de l'article et le titre du message est là. Je veux le mettre ici. Avant cela, créons simplement le design. Alors je veux un extrait du post. Ajoutons comme ceci. Alors ce que je veux c'est un bouton. Appuyons sur le bouton comme celui-ci. OK. Maintenant, ce texte ne s'affiche pas correctement. Donc, ce que nous pouvons faire, c'est ajouter la couleur de fond à ce texte. Pour ce faire, je dois créer un nouveau conteneur. Attachons un contenant comme celui-ci à la corde avec un dragon. Et encore une fois, supprimons tous les éléments inutiles, et passons à la colonne verticale, et je les mettrai ici, puis j'ajouterai tout le titre de la pause, l'extrait du post et le bouton à l'intérieur de ce conteneur En fait, faisons-le comme ça. OK. Maintenant, je vais sélectionner le conteneur et aller dans Estyle, cliquer sur le type d'arrière-plan et changer la couleur d'arrière-plan. Couleur primaire comme celle-ci. OK, plutôt bien. Maintenant, modifions-le avec le titre. Sélectionnez le titre de l'article, accédez à la vignette Est. L'alignement sera laissé et la typographie sera un en-tête comme celui-ci Ensuite, la couleur du texte sera la couleur du texte d'arrière-plan. Sympa. Il faut maintenant ajouter l'extrait. Ici, je vais donc fixer la longueur à dix. Vérifions-le. Et si nous cliquions sur Appliquer pour publier du contenu. Ok, maintenant c'est ici dix, ce n'est pas bien. Faisons en sorte que ce soit 225. OK, 25 ans c'est bien mieux. Passons à l'alignement des styles, à l'alignement gauche, et la typographie sera La couleur du texte sera alors la couleur de fond. Maintenant ça ressemble à ça, et maintenant je veux améliorer ce bouton. Je vais cliquer sur le bouton et le texte du bouton sera lu plus en détail. Nous lisons donc plus comme ça. Et si vous le souhaitez, vous pouvez ajouter des balises dynamiques, mais je ne vais pas le faire. Et pour le lien, nous pouvons ajouter une balise dynamique. Cliquez sur la balise dynamique, et ici nous pouvons ajouter l'URL de la publication. Si vous n'avez aucune idée des tags dynamiques et du garausel UV ou si vous souhaitez approfondir vos connaissances, j'ai déjà un cours complet sur Elemento Pro . Vous pouvez le consulter ou simplement ajouter votre commentaire dans j'ai déjà un cours complet sur Elemento Pro Vous pouvez le consulter ou la section questions-réponses. Je créerai une leçon séparée sur les balises dynamiques, le lobe carser et les notes à ce sujet lobe carser et OK. Passons maintenant à Estes on Es, la position sera à gauche, le temps d'écart sera le bouton. Saviez-vous que nous avons défini toutes ces informations sur le réglage latéral et que la couleur du texte sera « Faisons la couleur d' arrière-plan », et la couleur sera une couleur secondaire. Tu as vu ce que j'ai fait ? Ici, la couleur du texte, le code couleur global, il y a l'arrière-plan et la couleur d'arrière-plan est cette couleur verte. Rayon de bordure, il sera égal à zéro et faisons en sorte que le rembourrage soit égal à. Faisons en haut, à droite, 30, en bas, 22, à gauche 30 comme ça, mais c'est un peu plus grand. Passons à 20 ou 20 maintenant c'est beaucoup mieux, peut-être 25. Oui. 25, c'est beaucoup mieux. Et ici, passons au design, alors cliquez dessus et cliquez sur fait passer la couleur à la couleur primaire, et le type d'arrière-plan sera ou la couleur d'arrière-plan sera changée en blanc comme ceci. Tu vois ? Vous pouvez également ajouter une transaction comme une animation, comme celle-ci. Grandissons, tu vois ? Ouais. Et maintenant, ce que je veux faire, c'est ajouter ceci ci-dessous ici et le rendre plus petit. Pour ce faire, je sélectionne le sous-conteneur que nous avons créé, je passe à l'étape suivante et ajoutons du rembourrage Cliquez ici et ajoutons un rembourrage de 20 tous ces côtés et l'alignement commence Et ici, je peux changer la largeur en 60. Non, 60, ce n'est pas bien. Peut-être que 90 fonctionneront. Oui, 90 c'est plutôt bien. Ensuite, je dois aller du conteneur principal au conteneur principal. Je dois également ajouter le pad. Disons que c'était 20. Et maintenant, passons à la mise en page. Et ici, je peux définir le contenu de justification comme fin et aligner l'élément sera lancé. Ok, tu as vu que c'est beaucoup mieux maintenant ? Et ce que nous pouvons faire, c'est cliquer sur ce deuxième conteneur ou sur le conteneur d'arrière-plan, et ici, si je clique ici et que nous pouvons simplement réduire son opacité, faisons-le comme ça OK, maintenant ça a l' air plutôt bien et aussi sur notre extrait, nous pouvons ajouter du texte après la fin de ce paragraphe. Ce que nous pouvons faire, c'est passer à Advance et ainsi de suite. Ajoutons trois points comme celui-ci. Et sur le bouton, ces trois points ne sont pas beaux, donc je vais juste les supprimer. Ainsi, lorsque quelqu'un clique sur ce bouton, cette personne sera redirigée vers cette page ou cet article. Cliquez également sur l'option Lien et modifions-la pour l' ouvrir dans une nouvelle fenêtre. OK, maintenant ça a l' air plutôt bien. OK, maintenant je peux cliquer sur publier, puis sur Enregistrer et B. Et voyons voir. Voici le design. Et maintenant, passons au design. Tout d'abord, configurons la requête. Cliquez donc sur le carrousel Loop et accédez à Query. La source de la requête sera mise en pause. Et ici, si nous le voulons, nous pouvons ajouter des termes d'auteur, inclure ou exclure, mais je ne vais pas le faire. Donc, la date sera une commande d'ici, elle devrait être décroissante en DESC, ce qui signifie que le dernier article sera affiché premier et le plus ancien sera affiché en dernier. OK. Maintenant, lors du réglage, nous pouvons modifier la vitesse EPL. Et lorsque nous prenons le dessus, le côté est poussé et nous pouvons changer de direction, ou si nous avons plusieurs côtés, nous pouvons ajouter ou définir des diapositives, et dans notre cas, nous n'en avons pas besoin, et je supprimerai la navigation parce que nous n'en avons pas besoin. Et aussi, je vais supprimer la pagination. OK. Maintenant, la principale chose qui me préoccupe dans ce design est de ne pas couvrir entièrement la mise en page et c'est plutôt moche. Cela avait l'air vieux, donc ce que nous pouvons faire, c'est cliquer sur le conteneur, et ici, la largeur du contenu sera pleine comme ça. Maintenant, ça a l'air bien. OK ? OK, maintenant ça a l' air beaucoup mieux, et ce dont j'ai besoin, c'est d' augmenter le nombre minimum de nuits. Essayons de le faire ici. Non, ça ne part pas d'ici. Je vais donc cliquer sur Modifier le modèle, sept fois partir et ici, cliquer sur le contenant, et changeons ce Min Night en VH et pH 200 Cela signifie que cela s'affichera sur toute la page d'accueil. Mais le problème est que j'oublie que nous avons déjà cet en-tête. Donc, ce que je peux faire, c'est que je peux atteindre une hauteur minimale de 80. Oui, cela fonctionnera et cliquez sur Enregistrer. Cliquez ensuite ici pour modifier l'en-tête. Maintenant, je suis sur l'en-tête, il suffit de cliquer sur le conteneur d'en-tête et de régler Mnhight sur VH OMG est grand, mais voyons voir qu'il devrait être parfait. Cliquons ici pour modifier la page. Oui, c'est plus grand que ce à quoi je m'attendais. Donc, cela devrait sûrement être 80, pas des pixels VH ET, publiez, voyons voir Ici, faisons-en dix. Dix seront du travail, gardez-le. Allons-y, sélectionnons ce conteneur, ajoutons-le sous la forme 90 et enregistrez-le. En fait, je l' ai ajouté pour Rome Place, donc je dois le modifier dans la section de la page d'accueil, pas dans ce modèle Je vais donc passer à Modifier les modèles et ici, ici, je sélectionne le conteneur et je le remplace par. Modifions-le comme ça, cliquez sur le remplacer par Hundren, puis sur Publier Voyons voir. Revenons ensuite à notre page d'accueil, cliquez ici. Cliquez comme ça. OK, maintenant c'est LF 12. Concevoir la section Articles en vedette: D'accord. Créons maintenant une section de publication en vedette. Pour ce faire, je vais aller ici et cliquer sur l'icône plus, puis Flexbox et la direction de la Pex Box figureront en colonne Ensuite, sur Advance, je supprimerai toutes les marges et les patins. Ensuite, je clique sur un élément, et ici je vais rechercher des articles. Ici, nous avons des éléments de publication, donc je vais simplement les mettre comme ceci neuf. Maintenant, à partir de là, nous pouvons changer de peau. Je sélectionne cette carte et trois colonnes seront travaillées et le message par page sera de six, ce qui signifie que six ou le message s'affichera comme ceci Maintenant que la résolution de l' image semble bonne et que le ratio d'image est également bon sur ce numéro, nous devons vérifier le titre. Ici, nous devons afficher le titre et la balise de titre sera H trois. Ensuite, sur exerp, j' ajouterai longueur de l'exercice comme ils en ont ajouté 15 Je pense qu'il n'a pas été mis à jour. Oui, il ne s'agit pas d'une mise à jour. Supprimons peut-être EAP, cliquez sur ce bouton d'affichage pour le masquer Maintenant, c'est comme ça et je vais également supprimer le bouton en savoir plus. Nous n'avons pas besoin de date ou de nombre de commentaires, et je vais ouvrir une nouvelle fenêtre. Alors ce badge ira bien, nous n'avons pas besoin d'en montrer deux à l'Avatar. Maintenant, ça va ressembler à ça. Mais si vous avez vraiment besoin d'un extrait, vous pouvez l'afficher et faire en sorte que la longueur de l'exp soit égale à cinq. Voyons le voir sur les vues réelles, il s'affiche correctement. Nous devons donc faire en sorte que cette longueur d'exp soit égale à faire en sorte que cette longueur d'exp Maintenant, si nous le vérifions, c' est parti, nous l'avons en taille 50. Passons maintenant à requête sur requête. La source est les publications et la date seront toutes, puis l'ordre B sera aléatoire, ce qui signifie que les publications de cette section seront classées de manière aléatoire . Nous pouvons également les trier en fonction du nombre de commandes , de la dernière modification ou en utilisant l'ordre des menus, mais je vais le rendre aléatoire. Ensuite, en ce qui concerne la pagination, nous n'avons pas besoin de pagination. Ce que nous pouvons faire, c'est aller dans l'onglet Style de l'onglet Style Faisons en sorte que cet écart de colonne soit égal à 20. L'écart entre les lignes sera également de 20 points d'alignement à gauche, et la couleur de fond de la carte sera cette couleur d'arrière-plan, et ne changeons pas la couleur de la bordure. Je vais faire en sorte que le rayon de la bordure zéro et nous avons ici l'ombre de la boîte , la faire ouvrir, et nous aurons cette ombre de boîte. Et sur l'image, je garderai l'image par défaut. Passons ensuite au contenu. concerne le contenu, la couleur du titre sera principale et la typographie sera celle du sous-en-tête, mais nous devons modifier les détails Ici, je vais faire en sorte que ce soit 21, puis le boulon sera de taille moyenne. Moyen, non, pas moyen. Peut-être que Semibold fonctionnera. Oui, Semibold est bon, et là aussi, faisons-en Espacement des lettres, définissons-le par défaut. Faisons en sorte que la hauteur de cette ligne soit égale à 30. Maintenant, 28, ce sera du travail. D'accord. Maintenant, nous pouvons ajuster l'espacement, je vais donc en ajouter six et nous n'avons pas de méta-détails ici Donc, ce que nous pouvons faire, c'est passer à Sauf pour l'extrait, la couleur sera la couleur du texte et ici nous pouvons également faire cette couleur de texte la couleur du titre, mais gardons-la comme couleur principale et ensuite la typographie sera du texte Cette typographie est trop proche, si je me souviens bien, je l'ai déjà modifiée, mais voyons voir avant de le faire, ajoutons de l'espace dans la ligne 20 du bas Et pour le contexte de clic typographique, cliquez sur cette police de gestion globale, puis sur Contexte et transformons cette ligne en tant que Ajoutons-le comme 26 et enregistrons les modifications dans l'éditeur. D'accord, maintenant c'est plutôt bon, mais c'est encore trop proche. Encore une fois, allons-y et cliquez ici, cliquez sur Définir et texter, faisons en sorte que ce soit 30. Maintenant c'est beaucoup mieux. Maintenant, si nous le voulons, nous pouvons ajouter la suite. En fait, ajoutons la lecture. Cliquez ici, et c'est parti. Passons au contenu de Style on Estyle dans la section Contenu, ici nous en avons lu plus Je vais créer la couleur comme couleur secondaire et définir la typographie des boutons, mais ici, nous devons réduire la taille de la police Faisons en sorte qu'il soit 16. Et voici, changez cet espace en six. Et ici, il y a de l'espace supplémentaire en 20. OK, maintenant ça a l' air plutôt bien. OK, maintenant tout va bien. Donc, ce que je peux faire, c'est simplement cliquer sur publier, voir les modifications. OK, maintenant ça va ressembler à ça. Nous devons également en savoir plus sur le titre. Alors faisons-le. Ici aussi, nous n' avons pas d'image vedette, et l'espace entre le titre et cette image est trop grand, alors corrigeons-le. Allons-y, et nous pouvons transformer cet espace en trois. Et ici, nous pouvons modifier les détails du badge. Ici, nous pouvons changer la couleur de fond comme ceci et couleur du texte sera en fait la couleur du texte d'arrière-plan fonctionnera comme ceci. OK, maintenant publie-le. Et nous y voilà. Maintenant, voici le design et il a l'air plutôt beau. Ajoutons donc le titre pour ajouter le titre, je vais cliquer ici et ajoutons l'en-tête. L'en-tête, la balise M, sera donc H deux. Ajoutons-le comme nos dernières informations et passons à Setin, faisons-en une typographie linéaire qui sera en-tête et je vais aussi le dupliquer, puis la balise ML sera P et c'est là, ne manquez rien Lisez nos articles les plus récents et les plus populaires, et adoptons-les sous forme de texte. Ensuite, je vais cliquer sur cette section d'article, et j'en perds deux à la marge. Maintenant, il y a plus d'espacement. Publiez et c'est parti. Maintenant, cela ressemblera à ceci et je vais cliquer sur le bouton Lisez-moi la profondeur Snowball was depth Avalanche Cliquez sur Modifier l'article, puis sur Concept (image vedette). Ajoutons cette image vedette comme ceci et cliquons sur le concept. D'accord. Passons maintenant à l'étape suivante. 13. Concevoir la section catégorie: Bien, nous allons maintenant créer une section pour afficher toutes les catégories. Donc, je vais d'abord cliquer sur cette icône plus et ajouter une boîte flexible, un type de colonne de direction, un conteneur, puis supprimer à l'avance toute la marge et le rembourrage Ensuite, ici, j'ajouterai une marge de un à 20. L'espace comme celui-ci, puis ajoutons un en-tête et un texte d'en-tête exploreront votre parcours financier. Je vais également dupliquer et ajouter le sous-titre comme celui-ci, puis en faire Maintenant, je vais mettre ce centre. Cliquez sur le titre, le style, cliquez sur la typographie et sélectionnez le type de sous-en-tête ici, placez-le au centre et faisons en sorte que ce centre et le texte soient ainsi sorte que ce centre et le texte Maintenant, nous devons ajouter des catégories. Passons donc à notre site Web et aux articles, ici nous avons des catégories, et ici nous avons quatre catégories. Ce que nous pouvons faire, c'est utiliser la boîte à icônes. Donc, tout d'abord, ajoutons un élément et ajoutons le conteneur à l'intérieur de ce conteneur principal. Supprimons ensuite tous les rembourrages et les marges, puis passons à mise en page et le sens de la mise en page doit être la ligne Ensuite, je vais cliquer sur Ajouter un élément et sur la boîte à icônes de recherche Voilà, nous avons la boîte à icônes, et ajoutons les détails de la catégorie. D'abord, je copie le nom de la catégorie et je le colle sur le titre, puis copions la description de la catégorie , après la description comme ceci. Ensuite, je vais également cliquer sur la vue, cliquer sur copier l'adresse, y ajouter l'adresse du lien et cliquer sur Ouvrir une nouvelle fenêtre. Nous devons maintenant modifier le design pour y parvenir. Passons à EstilSoets si nous le voulons, nous pouvons placer l'icône comme ceci et la faire de gauche à droite pour le faire, je vais cliquer ici et l'alignement vertical comme celui-ci sera à gauche et l'espacement des icônes, faisons-en 15 et aussi pour l'espacement du contenu, faisons en sorte que 15 15 c'est trop, mais ça Maintenant, changeons l'icône. Passons à l'icône et en fait, pour ce qui est du contenu, je dois changer l'icône à partir d'ici. En fait, ce que je peux faire, c'est copier toutes les catégories comme celle-ci, puis passer à hag BT , coller ceci et supprimer ces éléments comme celui-ci Ensuite, je dirai, donnez-moi une icône géniale pour chacun. Voyons voir, c'est parti. Copions celui-ci, collons-le. Vous devez supprimer ces lignes. En fait, il n'y a pas d'icône appelée handhold en dollars. Donnez-moi des icônes de téléphone gratuites. Voyons voir. Disons qu'il y en a plus. Oui, copions l' université et collons-la. OK, insére-le. Passons maintenant au style E sur le style E, changeons la couleur de l'icône en couleur secondaire. Et la taille est correcte. Ensuite, en ce qui concerne le contenu, changeons la typographie en bouton. La typographie du titre est un bouton et la couleur normale est la couleur du texte La couleur Go sera cette couleur verte comme celle-ci. La description TirOf sera alors du texte et la couleur sera la couleur du texte OK. Maintenant, pourquoi nous écrivons et cliquons sur bligate et cela se dupliquera comme ça Ensuite, il ne me reste plus qu'à modifier ce contenu. Passons aux catégories, copions les investissements, ne sélectionnons pas les investissements, investissons. Comme ça, alors copions ce texte. Voilà le texte, cliquez avec le bouton droit de la souris pour copier l'adresse du lien, collez-le et tracez le graphique. Graphique d'icônes. Voilà, je peux simplement cliquer sur le conteneur et cliquer avec le bouton droit de la souris, puis dupliquer. Il se dupliquera comme ça. Ensuite, ajoutons à nouveau les détails, ajoutons-les comme ceci. Ajoutons le portefeuille. Bénéficiez toujours de l'aide de l'IA lorsque vous concevez un site Web. Copions la partie « bruit » et mettons-la ici « bruit » et « taxes ». Réservoirs. Copiez-le, collez-le ici. Et aussi, je dois coller l'URL. Je crois que j'ai oublié de coller l'URL sur les finances personnelles. Cliquez avec le bouton droit de la souris pour copier l'adresse du lien, collez-le comme ceci. OK. Maintenant, on y va. Ici, nous avons les quatre éléments, mais nous avons beaucoup de problèmes. Réparons-les d'abord un par un. Je veux que cette taille soit de 50 %, alors passons à Advance et cliquez sur Personnaliser et sur 50. Ensuite, cliquez également ici et accédez à Advance et à Custom 50 comme ceci. Ensuite, je vais cliquer sur copier, puis cliquer sur coller le style, coller le style. Maintenant, nous avons également un problème, que nous n' avons pas assez d'espacement. Donc, ce que nous pouvons faire, c'est créer un conteneur séparé. Mettez ce contenant ici, puis retirons ces choses et je mettrai ce contenant à l'intérieur de ce contenant. De plus, celui-ci se trouvera dans ce conteneur principal que nous avons créé, et sur la mise en page ici, je peux définir la ligne et la colonne. Faisons en sorte que 40 et 40 pour que je n'aie pas besoin d' ajouter 40 à la colonne. Maintenant, ça va ressembler à ça et faisons-en 60. Ensuite, je vais cliquer sur l'une de ces cases à icônes , passer à Itis et passer à Advance, passer à la bordure et consolider le tout. En fait, nous n'avons pas besoin d'une bordure, mais nous avons besoin d'une ombre. Ajoutons une ombre de boîte comme celle-ci, et je ne vais pas changer les détails de l'ombre de boîte, et pour ce qui est de la mise en page, changeons le rembourrage à six, peut-être que oui, 15 suffiront et maintenant, à juste titre, copiez, collez ce style, collez ce style, également ici, collez le style En fait, nous pouvons utiliser une grille, pas ce conteneur, et si nous utilisons la grille, elle s'ajustera automatiquement en fonction de la grille. Passons à ici et ajoutons la grille. Ajoutons la grille comme celle-ci et la grille sera composée de deux colonnes et celles-ci le seront également. L'écart est de 40, c'est trop. Faisons Gaps 20. Ensuite, j'ajouterai ces cases à la grille. Nous pouvons simplement l'ajouter et le mettre ici et aussi à partir d'ici, lui donner la taille par défaut et l'ajouter ici, cliquer avec le bouton droit sur copier, appuyer sur le style. Lorsque nous faisons cela, nous pouvons obtenir le dessin qui a la même taille que l'arrière-plan. Allons ici et éliminons la faute. dit comme ça. Et oui, alors retirons tout ce contenant. Et maintenant, chaque article a exactement la même taille. De plus, pour cette ombre en forme de boîte, passons à la bordure. Et ici, je vais le remplacer par, non, restons comme ça, et la répartition sera de trois et le flou de 22 Faisons en sorte que les choses soient floues car dix et p seront un. Nous cliquons sur Copier Patty, Ft Style, Pastyle. C'est bon. Nous avons maintenant cette section entièrement développée. De plus, si nous le voulons, nous pouvons ajouter une marge de 60 comme ceci. 60, c'est trop. Peut-être que 30 sera la taille. Maintenant, vérifions-le sur le design. Donc, si quelqu'un clique sur cette catégorie, il ira sur la page des catégories et en fait, nous devons modifier la page des catégories, ce que nous ferons dans les prochaines leçons. 14. Comment créer une section de formulaire d'abonnement: Créons maintenant un formulaire d'abonnement. Pour ce faire, créons d'abord le conteneur. Comme ça, il faut ensuite aller faire avancer les liens entre les valeurs, puis ici une, 20 sera la marge supérieure. Ensuite, je devrai ajouter l'en-tête pour ce faire, passer aux éléments sur les éléments, glisser-déposer le titre, et je l'ajouterai comme texte du titre Passons au style sur Estyle, l'alignement sera au centre, la typographie sera Maintenant, je vais simplement dupliquer ce sous-en-tête, en-tête principal et créer un sous-en-tête Passons à Estyle on Estyle, changez-le en texte, puis j'ajouterai le texte sous cette forme et vous trouverez tout ce contenu dans la section des ressources. Je dois maintenant ajouter le formulaire d'abonnement. Ce que nous pouvons utiliser, c'est la forme élémentaire. Je vais me former ici. Ici, nous avons le formulaire. Je vais juste le glisser-déposer comme ça. Passons ensuite à l'étape suivante et ajoutons les marges supérieures à la saisie. Maintenant, nous avons de l'espace. Nous l'avons également fait ici, si vous vous souvenez, vous voyez quoi ? Voyons maintenant de quel type de champs nous avons besoin. Sur le formulaire d'abonnement, nous avons besoin d' un e-mail et nous n'avons pas besoin d'un champ de message, nous avons besoin d'un champ e-mail. De plus, si vous le souhaitez, vous pouvez conserver le nom, mais je vais le supprimer et ne conserver que l'e-mail et le bouton. Ici aussi, comme nom du formulaire, je le définirai comme subscribe. OK. Maintenant, sur l'étiquette, je vais masquer l'étiquette. Ensuite, nous avons le bouton pour le texte du bouton, je vais configurer l'abonnement comme ceci. OK. Maintenant, je veux le faire en ligne, ce qui signifie que la zone de texte ou le champ de texte et le bouton seront sur la même ligne. Pour ce faire, je vais cliquer sur le champ e-mail, et ici, comme largeur de colonne, je vais la faire passer à 75. OK, maintenant vous voyez qu'avec ce changement et je passe également aux boutons sur les boutons, la largeur de colonne sera de 25. OK. Le champ de texte est de 75 % et le bouton de 25 %. C'est ainsi que nous pouvons créer le formulaire en ligne. OK, améliorons ce design. Tout d'abord, je vais passer à Estyle on Estyle en tant qu'écart de colonne. Passons à 15, et nous n'avons pas à nous soucier de l'écart entre les lignes. Ajoutons-le sous la forme 15 pour le moment, et nous n'avons pas à nous soucier du champ HDML de l'étiquette, puis passons au champ Dans le champ, nous pouvons ajouter la couleur du texte, donc je vais ajouter la couleur du texte sous forme de texte, et ajoutons de la typographie sous forme de texte, puis la couleur de fond est blanche et rendons la couleur de la bordure un peu grise comme ça, faisons en sorte que le rayon de la bordure soit nul car nous devons suivre les boutons et autres modèles de cartes, nous devons conserver le caractère unique du site Web Ensuite, tout ira bien ici et après la position du bouton pour le maillage et le centre d'alignement. Ensuite, la typographie, faisons-en type de bouton et de bordure Aucune, alors la couleur d'arrière-plan sera cette couleur secondaire, et la couleur du texte sera la couleur blanche, et nous n'avons pas besoin de couleur de bordure, nous n'avons pas de bouton précédent ou suivant, le rayon du tableau sera nul et le remplissage du texte sera 14 14 fonctionnera parce que nous devons faire correspondre le champ de texte et la hauteur du bouton comme ceci Ensuite, je vais passer à la couleur de fond qui sera la couleur primaire, et ça va plaire. Ensuite, je garderai la couleur du texte en blanc. Et si vous le souhaitez, nous pouvons ajouter une animation comme celle-ci, mais ce n'est pas nécessaire. Lorsque vous apportez ces modifications, appliquez toujours le design et le style que vous utilisez ici, car cela préservera le caractère unique du site Web Maintenant, nous avons le formulaire d'inscription et si nous le voulons, nous pouvons accéder à Let's go advance. Nous pouvons donc ajouter une patine droite 60 et le rembourrage gauche 60 est trop petit, peut-être que 90 90 x 90 seront une bonne solution, peut-être qu'un à 212120 x 120 sera Alors maintenant, il a une taille plus petite , je vais également passer au conteneur principal. Sur le conteneur principal, j' ajouterai la hauteur de menthe à 350, peut-être 400 et je justifierai que le contenu soit au centre. Ensuite, un style, on peut ajouter la couleur de fond. Ajoutons cette couleur verte et réduisons l'opacité de la couleur verte cette façon et passons à 600 Oui, 600, c'est super Passons ensuite au formulaire sur le formulaire, nous devons définir l' action après la soumission. Ici, je vais supprimer ce que nous devons faire est de collecter la soumission, qui signifie que lorsque l'utilisateur aura envoyé ce formulaire e-mail, cette adresse e-mail regrettera notre collection d'e-mails, et je vous montrerai à quoi elle ressemble en quelques minutes et aussi ici si vous le souhaitez, nous pouvons ajouter un outil de marketing par e-mail comme Mail Jim. Si nous sélectionnons cet e-mail, vous pouvez voir ici que nous avons l'onglet Mailchimp, et ici nous pouvons ajouter l'ABI Mailchimp De cette façon, vous pouvez connecter votre formulaire d'abonnement à Mailchimp Dans cette leçon, je ne vais pas le faire Je vais donc supprimer ce chimpanzé Nous avons également cette action de messagerie, qui signifie que si nous allons ici, si quelqu'un s'abonne à cette liste d'e-mails, nous recevrons une notification, et nous devons configurer les deux e-mails également à partir du courrier électronique et éléments que nous voulons obtenir dans les champs désignent les champs contenant ce formulaire De plus, si vous cliquez sur cette icône en forme de plus, nous avons de nombreuses options ici. Si nous sélectionnons cet e-mail, nous pouvons également envoyer un e-mail à notre visiteur ou la personne qui remplit ce formulaire et cliquer sur le bouton d'abonnement, afin que nous puissions l'informer que nous avons reçu son e-mail. Je vais les supprimer tous les deux, et si vous souhaitez l'ajouter, vous pouvez l'écrire vous-même ou si vous rencontrez des problèmes en l'essayant, faites-le moi savoir. Je vais créer un laser. Et lors de la collecte, nous pouvons collecter l'adresse IP de l'utilisateur et l'agent utilisateur de l'expéditeur. Si quelqu'un envoie ce formulaire, nous pouvons également collecter l'e-mail de l'agent utilisateur UIP En option supplémentaire, je vais conserver la promulgation par défaut par défaut du navigateur et revenons au champ de formulaire et au champ de formulaire, ici nous pouvons dire, disons, entrez votre e-mail pour vous abonner à l'avance, si vous le souhaitez, vous pouvez définir une valeur par défaut, et si vous le souhaitez, vous pouvez modifier l'identifiant Donc, dans les leçons de création de formulaires ou les leçons de conception de pages de contact, nous allons approfondir ces domaines, et pour l'instant, tout semble bon Maintenant, je vais le publier et tester ce formulaire d' abonnement Je vais donc cliquer sur Aperçu des modifications et passons ici. Je vais entrer mon e-mail ici, puis je clique sur s'abonner et nous avons reçu le message de réussite. Nous pouvons également modifier le design du message. Donc, si nous passons au style, nous avons ici le message et changeons la typographie du message en texte et la couleur sera cette couleur La couleur du message d'erreur sera rouge comme ceci, publiez-le. Maintenant, la couleur du message sera différente. Je vais donc passer au tableau de bord et sur le tableau de bord, sous Elementor, vous pouvez voir la section de soumission Si vous cliquez ici, vous pouvez découvrir tous les e-mails ou tous les formulaires que vous avez soumis sur le site Web. Donc, ici, sous le formulaire d'inscription, nous avons reçu cet e-mail. Ce que nous pouvons faire, c'est sélectionner le formulaire ici. Si vous avez plusieurs formulaires et si vous souhaitez obtenir uniquement des abonnés, vous pouvez sélectionner le formulaire et cliquer sur Exporter le filtre CSV pour obtenir le fichier CSV également à l'avenir ou si vous prévoyez d'utiliser un outil de marketing par e-mail, vous pouvez utiliser ce fichier CSV pour ajouter ces e-mails à votre outil de marketing par e-mail. Maintenant, ça a l'air bien. 15. Conception du pied de page: Nous devons maintenant créer le Potter. Alors faisons-le. Pour ce faire, je vais me rendre sur le tableau de bord de WordPress. Sur le tableau de bord de Wordpress, je vais accéder à Templates Them Builder. Sur eux Builder, nous avons ici Footer. Cliquez simplement sur cette icône représentant un signe plus. En fait, je pense que nous avons déjà créé un pied de page. Essayez de le modifier. Voici le pied de page. Je vais supprimer ce pied de page inutile Nous avons ici le pied de page et cliquez sur Modifier Allons-y. J'irai m' installer sur le plateau. Je vais simplement supprimer ce texte et ne séparer que le pied de page OK, maintenant je vais créer une boîte flexible comme celle-ci. Alors, en hauteur moyenne, faisons-en 300. Oui, alors changeons la marge et les rembourrages. Ajoutons ensuite 20 comme marge supérieure. Ensuite, en ce qui concerne son style, ajoutons. Ajoutons un arrière-plan comme celui-ci. Faisons en sorte que cela soit 350 pixels. Oui, c'est bien mieux. Ensuite, à partir de là, j' ajouterai un élément. abord, je vais ajouter le logo latéral, et encore une fois sur le conteneur, sélectionnons la direction horizontale du corbeau Et sans simplement ajouter le logo latéral, j'ajouterai un conteneur, je supprimerai le contenu, puis je mettrai ce logo à l'intérieur du conteneur comme ceci sur le conteneur, il sera en colonne verticale, et un élément de ligne commençant à justifier le contenu sera également démarré. Maintenant, j'ai besoin du texte de l'annonce. Ajoutez le titre ici, échangez ces deux paragraphes et ce sera du texte en fait Ce logo ne fonctionne pas ici car texte du logo est identique à la couleur de fond C' est pourquoi cette partie n'apparaît pas, nous devons donc changer le logo avant de le changer. Changeons la couleur du texte. Et ce que je peux faire, c'est que sans simplement ajouter le logo latéral, je vais supprimer le logo latéral et ajouter l'image. Et juste comme ça, mettons-le ici. Ensuite, je dois changer l'image, faire ici, ajouter le logo, choisir cette image et ici , dans la section des ressources, vous pouvez voir que c'est un logo blanc. Ajoutons-le comme ça. Faisons ensuite face au tag ALD. Nous avons maintenant ce logo sans le fond blanc. C'est bon Maintenant, nous devons ajouter un petit paragraphe. Je vais ajouter du texte comme celui-ci et maintenant je vais luplgate ce conteneur et je vais le faire trois fois comme ça Ensuite, je supprimerai ce texte et le logo, et je le ferai également pour ici. Sympa. Maintenant, je vais ajouter le lien important. Donc, d'abord, je vais ajouter le titre, puis je vais ajouter le titre en tant que liens importants, et au bout du compte, faisons-en centre d' alignement La typographie sera subd, mais nous devons changer la taille Passons à 30 et la hauteur de la ligne sera également de 35. Et la couleur du texte sera cette couleur de fond. Mettons-le ensuite au centre. Pour ce faire, cliquez sur le conteneur et centrons l'élément de ligne comme ceci. Je vais maintenant devoir ajouter un menu. Menu de recherche ici et j'ajouterai ce menu wordpress ici sur le menu déroulant mobile, je vais le faire comme aucun En fait, je dois l'ajouter à ce conteneur comme ceci et maintenant je dois créer un menu ou je peux choisir le menu d'en-tête, sélectionner le mot pres meno ou l'élément de menu word tras, et le menu sera le menu principal, et rendons la mise en page aussi verticale que celle-ci, centre d'alignement et le pointeur seront nuls Passons maintenant à Estyle. Ici, je vais chercher. Ici, je vais changer le nom du menu en lien important. Et dans le menu Icecream, nous devons changer ce menu, mais faisons-le après avoir créé tout Pour l'instant, allons-y, changeons le texte en bouton et la couleur du texte sera la couleur d'arrière-plan comme celle-ci , la couleur du bord au-dessus sera couleur verte et la couleur active sera également la couleur verte. Et nous pouvons changer le rembourrage vertical si vous le souhaitez. Et ici, j'ajouterai l' espace entre 15. Et ici, supprimons ces rembourrages horizontaux et verticaux et faisons en sorte que ce soit 30 30, ce sera du travail, et ça ressemblera à ça. Ensuite, ce que je peux faire, c'est copier du texte et le coller comme ça, puis cliquer sur le conteneur, faire un centre de ligne, et ici je vais le remplacer par un article raisonné Ensuite, je vais cliquer sur ajouter un élément et ajouter un élément de publication. Je vais suivre ces publications et les déposer comme ça. En fait, ça devrait être déposé ici comme ça et je vais saler la peau comme d'habitude. Actuellement, elle est en horizontal, mais nous en avons besoin en vertical. Pour ce faire, je vais créer cette colonne en une seule et la page de publication en trois, non moins deux, trois, et la position de l'image sera laissée comme suit. Et le support de résolution de l'image fonctionnera et pour ce qui est de la largeur de l'image, fixons-la à 30 %, comme ça. Peut-être faisons-en 40. D'accord, nous devons afficher le titre, nous n'avons pas besoin de montrer l'exercice et nous n'avons pas besoin d' afficher les métadonnées. De plus, nous n'avons pas besoin de lire plus de bouton, et ouvrons une nouvelle fenêtre, afin que lorsque quelqu'un clique dessus, elle s'ouvre dans une nouvelle fenêtre. OK. Passons maintenant à Query on Query, je vais sélectionner les articles, les articles seront triés par date et l'ordre sera DESC Ensuite, je cliquerai dessus pour ignorer ItiGipose et la pagination, nous n'avons pas besoin Passons ensuite à eTyleoeStyle, créons En fait, nous n'avons pas besoin d'un écart de colonne ici. Faisons en sorte que cet écart brut deux et que cet écart entre colonnes soit égal à deux. Quoi qu'il en soit, il restera un alignement Ici, nous n'avons pas à nous soucier de la boîte, et nous n'avons pas non plus à nous soucier de l'image. Passons au contenu, et changeons la couleur du titre du contenu en blanc comme ceci. De plus, la typographie sera un texte comme celui-ci. Faisons en sorte que la taille du texte soit 16. Maintenant c'est beaucoup mieux et là aussi, faisons en sorte que la hauteur de la ligne soit 20. D'accord, ça a l' air plutôt bien. Et si on le souhaite, on peut faire de ce skin une carte. Le fond sera donc de couleur blanche, mais je vais le garder classique. OK. Maintenant, je vais cliquer sur ce conteneur principal, et passer à Adlace. Ajoutons 220 en bas comme ceci Et réduisons également taille de cette image de manière à avoir un bon alignement. Faisons en sorte que ce soit 30. OK, maintenant la partie supérieure du pied de page est terminée. Ici, nous devons ajouter la section des droits d'auteur. Alors faisons-le. Pour ce faire, je vais cliquer sur l'icône de classe et ajouter une nouvelle boîte Plex comme celle-ci, puis passer à l'avancement de toutes les marges et de tous les rembourrages, et d'un style, ajoutons la couleur d'arrière-plan comme couleur de texte Ensuite, je vais cliquer ici et ajouter titre. Faisons glisser et corder et en faire un H trois Et ici, je vais cliquer ici et je dois sélectionner la balise dynamique de date. Nous avons donc ici la date et l'heure actuelles. Ensuite, je clique sur cette icône G et le format de date sera personnalisé, et ici nous ne voulons voir que le E. Je vais donc garder le Y et les supprimer tous, puis à l'avance, nous pouvons ajouter le texte avant et après. Pour avant, j' ajouterai du sinus et pour après, j'ajouterai ou réutiliserai la richesse, ou reposé Passons maintenant au style Style on E, créons le centre d'alignement, et la typographie sera un bouton Ensuite, la couleur sera la couleur de fond. Maintenant, faisons en sorte que cette typographie soit à 60, 18 seront par, puis je clique sur conteneur par conteneur Faisons en sorte que le rembourrage supérieur soit 15 et que le rembourrage inférieur soit 15. Allons-y. En fait, changeons cette typographie en texte et là, rendons-la moyenne, 18 feront l'affaire Ensuite, je clique sur publier et maintenant, si nous vérifions le design, nous pouvons voir beat design Footer De plus, si nous le voulons, nous pouvons supprimer le contenu d'ici et nous devons également créer un nouveau menu pour les liens d'importation. Faisons-le maintenant et pour ce faire, je vais passer à l'apparence et aux menus. Dans les menus, je vais cliquer sur Créer un nouveau menu. Le nom du menu sera important. Liens et cliquez sur Créer. Maintenant, je vais ajouter d'accueil en tant que page, la page de blog et la page Contactez-nous et cliquer sur At Tomenu ici, je vais le changer en page d'accueil et cliquer sur Enregistrer le Actuellement, nous n' avons que ces quatre articles, mais nous devrons en ajouter d'autres à l'avenir. Je vais retourner dans notre éditeur de pied de page et cliquer ici, puis passer au menu des liens importants , comme celui-ci pour les liens importants Nous devons également créer des pages de politique de confidentialité et de conditions générales Je vais également vous montrer comment les créer, puis nous devrons également ajouter ces liens. Publions-le. OK. Maintenant, à l'étape suivante, nous devons résoudre les problèmes de téléphonie mobile. Nous devons résoudre les problèmes mobiles de cette page d'accueil. Ensuite, nous pouvons accéder à Designer Aus, au blog et à la page de contact, et nous les aborderons dans les prochaines vidéos. 16. Corriger la réactivité sur mobile: Allez-y, résolvons les problèmes de réactivité. Cliquez sur Modifier cet élément pour modifier cette page principale. Passons ensuite à la tablette Atriov, je ressemble à ça. Nous avons déjà corrigé le menu et l'en-tête séparément. Maintenant, nous devons corriger cela à partir de ce curseur de héros. Si nous passons à la vue mobile, cela ressemblera à ceci. Ce que je peux faire, c'est cliquer sur Modifier le modèle pour modifier la section des héros. Alors je passe à la section des héros. Si vous cochez ici, vous pouvez voir un modèle à quatre curseurs, et voici le conteneur Passons au conteneur principal et au conteneur principal. J'ajouterai Mnight comme cent. Je veux dire que la section des héros aura en fait une hauteur minimale, je vais l'ajouter environ 80, donc elle représentera 80 % de l'affichage de la tablette. Ensuite, sur le contenant, je vais le faire à 100 %. Comme je dois changer la taille de police pour ce faire, je sélectionne le titre de la pose et passons à Estyle sur Estyle. Ici, je clique sur cette icône, puis sur Gérer la police globale, une Ensuite, à partir de là, nous pouvons voir que nous sommes sur Portriot mobile. Donc, sur mobile Potriot, je vais changer cette taille à 46. Ensuite, la hauteur de la ligne sera fixée à 1,2. Non. Faisons-le ensemble. Et aussi sur le sous-réseau, je vais faire comme si 41,21 serait à la hauteur de la ligne Également pour le texte, je vais changer la taille de cette police de texte à 18, et pour le bouton, faisons-en 18 comme ça. Ensuite, je vais cliquer sur Enregistrer les modifications puis sur Retour à l' éditeur. Et c'est parti. Maintenant, nous avons des polices de plus petite taille et sur le modèle Mobile Hero, il affiche deux éléments, mais je n'ai besoin que d'un seul élément. Essayons de le réparer. En fait, nous devons apporter cette modification au réglage du carrousel Loop Je vais donc cliquer sur Enregistrer et mettre dans un sac sélectionner le conteneur à l'intérieur du conteneur Ici, nous avons un carrousel Loop sur un carrousel Loop. Ici, nous avons deux diapositives sur les écrans de la tablette, je vais en faire un. De cette façon, cela se montrera comme ça. OK. Maintenant, ça a l'air plutôt bien. Cliquons sur Modifier le modèle, puis sur Enregistrer. Ici, la taille intermédiaire est un peu plus grande. Ce que nous pouvons faire, c'est combler l'écart. En fait, si nous passons au réglage latéral de la mise en page du site ici, nous pouvons voir l'écart. Nous pouvons donc réduire cet écart à 15 ou 10. Oui, dix seront des œuvres. Donc sur tablette, ce sera dix, et pour le remplissage du contenu, si on le souhaite, on peut ajouter zéro Passons ensuite à Mobile View sur Mobile View, cela ressemble à ceci et Gap Ten fonctionnera également là-bas. Maintenant, je vais rapidement concevoir le changement et je reviendrai ici, si je passe aux polices globales et que voici la taille de police de l'en-tête sur mobile. Modifions-le donc en 36 et inet en sera un. En fait, le lint par défaut est un, n'est donc pas nécessaire de le modifier Et ici, faisons en sorte que ce soit 32, et la taille du texte sera de 18 et la hauteur de ligne sera de 1,2. Passons à 1.4. Il sera donc facile de lire également pour les boutons, faisons-en 18. Et maintenant, cliquez sur Concevoir les modifications pour revenir à Donc, lorsque nous utilisons des polices globales, nous n'avons pas besoin de les ajuster manuellement. Lorsque nous l'ajustons sur la police globale, cela affectera tous les éléments. Maintenant, notre en-tête semble bon. Passons maintenant à notre dernière section interne, et corrigeons d'abord la version tablette. Sur la version tablette, il faut donc ajouter le rembourrage gauche et droit Ajoutons le rembourrage droit comme dix et aussi le rembourrage gauche comme dix ou peut-être 15 15, c'est la taille que nous avons, euh, oui, c'est OK, et ça a l' air très bien. Passons ensuite à la vue mobile et voyons ce que nous pouvons faire. Sur mobile view, nous n' avons rien à faire. Il s'ajuste en conséquence. Si nous le voulons, nous pouvons modifier la taille intermédiaire, mais je garderai la valeur par défaut de 15. Ensuite, nous avons cette section, donc je vais passer à la version tablette, et comme nous l'avons fait auparavant, nous devons changer la droite à 15, gauche à 15, et elle s'ajustera également, elle s'ajustera sur le mobile. Ensuite, nous devons faire la même section pour deux abonnés, l'avance ici sera de 15 et celle qui restera sera de 15. Si vous pensez que cet espace est trop grand, vous pouvez le supprimer, mais je pense que cet espace est préférable. Maintenant, notre page d'accueil est entièrement réactive et ici nous avons un problème, cliquez sur le formulaire d'abonnement et nous ajoutons le rembourrage droit et gauche, donc je vais le mettre à zéro et ça aura l'air OK, maintenant je vais le publier, puis nous devons modifier le pied de page, cliquer sur le pied de page et sur le pied de page, passons Et ici, il faut ajouter la gauche et la droite. Le haut sera 20, 15, le bas 20. Et puis voici la raison, nous devons en faire une colonne et cela ressemblera à ceci. Ensuite, sur mobile, la partie supérieure est correcte, un lien important, c'est bien. Pour la raison du post, ça ressemble à ceci. Et si nous plaçons la position de l'image en haut, nous pouvons voir le texte comme celui-ci et le problème est que cela affectera toute la section. Je vais donc le placer comme à gauche, comme avant. Donc, dans une telle situation, nous pouvons dupliquer cette section, puis je masquerai cette section ci-dessus sur la vue mobile, elle ne sera donc disponible que pour ordinateur de bureau et tablette, et elle ne sera pas disponible pour la vue mobile. Je vais donc aller sur Advance et ici Responsive sur responsive, on peut cliquer sur Masquer sur Mobile Portal. Et lorsque nous passerons au mobile, allons-y. Cela ne s'affichera pas. Et puis nous ne voulons pas l'afficher sur l'onglet Lat et la version de bureau. Pour cela, je vais cliquer ici et accéder à Advance and responsive. Ici, je peux le masquer sur l'onglet et le masquer sur le bureau. Il sera donc masqué sur ces écrans, et il ne sera disponible que sur la version mobile. Maintenant, ce que je peux faire, c'est cliquer sur Contenu et placer l'image en haut. titre de notre pose apparaîtra donc également comme ceci sur les matrices que nous pouvons imager et nous pouvons modifier l' espacement comme ceci, faire en sorte que deux ou trois fonctionnent Maintenant, sur ordinateur, cela ne sera pas affiché. Je vais montrer l'image avec le côté gauche, celle-ci, et sur mobile, elle sera affichée. Maintenant, je clique sur publier et vérifions-le dans son design réel. Ici, je vais cliquer avec le bouton droit de la souris et cliquer sur Inspecter. Ensuite, je vais cliquer sur cette barre d'outils de l'appareil Toggle. Et voici maintenant la version mobile, et si je fais défiler la page vers le bas, voici le résultat qui s'affiche. Et pour la version desktop, voici le résultat. J'espère que tu as compris l'idée. D'accord, maintenant nous avons réussi concevoir l'en-tête, mais ici aussi, nous devons ajouter de la hauteur et de la disponibilité à gauche 15 et le publier correctement. Nous avons maintenant le design. 17. Concevoir la page À propos de: Nous devons concevoir la page ATS. Cliquons ici. Nous avons actuellement la page vide. Ce que je fais, c'est cliquer sur Modifier la page. Puis ici, je clique sur le bouton Modifier avec un élément. Maintenant que je suis chez Elemento Editor, je peux simplement cliquer ici, cliquer sur Blocs contextuels et cliquer sur la colonne de direction pour créer un nouveau conteneur. Faisons en sorte Blocs contextuels et cliquer sur la colonne de direction pour créer un nouveau conteneur. Faisons Margin et Padina soient nuls. Ici Margin doit dépasser 60 comme ça et ici nous devons ajouter les détails. Je vais d'abord ajouter le titre, le texte du titre , il sera au centre et la typographie sera l' et je vais aussi le dupliquer et en faire paragraphe et un texte de typographie Maintenant, ce que je dois faire, c'est générer du contenu. Ce que je peux faire, c'est obtenir l'aide de l'IA. OK, me voici au chat AI que j'ai utilisé pour générer des articles de blog, et là je vais dire, parlez-moi du titre et du contenu de la page, vous devez avoir sous-en-tête d'en-tête et une description nous concernant Dans votre cas, vous devez l' écrire vous-même ou utiliser l'aide de l'IA en fonction de votre créneau et cela a généré quelque chose que je ne veux pas Je dois donc dire à cette IA que c'est pour le site Web en bloc, elle inclut tous les éléments allons-y et vérifions nos catégories. Copiez simplement la catégorie. Il inclut les trois catégories, les trois catégories trois autres catégories et me donne des informations sur le contenu de ce bloc de sites Web. Et voyons ce qui va se passer. OK, c'est bon. Copions cette partie, et ici je vais simplement l'ajouter comme ceci et dans votre cas, ne faites pas de même. Vous devez le faire en fonction de votre créneau et en fonction de l'égalité de votre site Web. Ensuite, ici, nous pouvons ajouter ce que nous couvrons. Ajoutons-le après cette séance. Donc, ce que je peux faire, c'est cliquer ici, cliquer sur la boîte de contexte et sur la direction sous forme de colonne Ensuite, passez à Advance sur Advance. Ajoutons une marge pour passer un, 220, et à l'intérieur de celui-ci, je vais créer un autre conteneur et supprimer toutes les marges et tous les rembourrages. Lors de la mise en page, je dirai que la direction horizontale et que le contenu Y sera ici, puis je cliquerai ici pour ajouter l'image Ensuite, j'ajouterai un titre ici. Saviez-vous que ce conteneur est un conteneur horizontal direct ? C'est pourquoi ce titre a été ajouté comme ça et allons-y Je vais simplement copier le texte du titre ici et ajouter le texte du titre comme ceci En fait, nous pouvons utiliser ce conteneur. Je vais ajouter l'image et titre à ce conteneur principal , puis faire de ce conteneur principal direction horizontale Ensuite, j'ajouterai ce titre, uniquement ce titre à l'intérieur du conteneur et dans ce conteneur, le sous-conteneur sera en colonne verticale De cette façon, nous n'aurons pas besoin d'ajouter beaucoup d'éléments , alors passons aux IST et IST en feront un sous-en-tête comme celui-ci Ensuite, je vais le dupliquer et en faire un contenu H trois. De plus, celui-ci sera H quatre et ici chez la personne. En fait, nous pouvons ajouter cette grille que nous avons déjà créée. Je vais supprimer celui-ci et passer à la page d'accueil. Sur la page d'accueil, je cliquerai sur Modifier avec Elementor Vous voyez, je n'ai pas conçu ce site Web ni demandé un plan. Je suis juste créé en temps réel. Vous savez, je copie simplement cette grille, copie et revenons ici, puis suivons le rythme de la grille comme ceci. Ensuite, sur la grille, en fait, nous n'avons pas besoin de la grille ici, mais quadrillons la grille, les colonnes seront une et les lignes seront une, deux, trois ou quatre lignes. Oh, comme ça. Et ici, faisons en sorte que la taille de cette image soit de 40 %. En fait, nous devons y aller pour avancer. Faisons en sorte que la taille de l'image soit égale à cent et, à l'avance, la largeur sera à l'arrière, soit 40 %. Comme ça. Sympa. La plage réelle de 50 , 60, 60 % fonctionnera, et celle-ci sera de 40 par. Non, celle-ci devrait être à 60 % et cette image devrait être à 40 % comme celle-ci. Maintenant, je dois ajouter une image. Cette image doit être une image verticale. Lorsque je crée l'image, je devrais y réfléchir. Je vais créer l' image. Reviens ici. Je viens de créer l'image, donc pour créer une image, j'utilise le site Web de CNMAouse comme fxs.com et j'utilise Figma pour la découper et changer les tailles Nous avons ici l'image, cette image a une utilisation de 700 et une largeur de 600. Ajoutons-le ici et voyons ce que nous devons faire. Je vais simplement le déposer comme ça et copier ici le tag ol, après le tag ol, et ici il ressemblera ceci mais ce n'est pas entièrement couvert ici. Ce que nous pouvons faire, c'est augmenter la hauteur de l'image. J'irai sur Canva, je le ferai et nous reviendrons. Il suffit de concevoir l'image, je vais aller ici et là voir si elle ne correspond toujours pas parfaitement à notre design. Donc, ce que je peux faire, c'est en faire un centre aligné, ou je peux augmenter cette personnalisation avec Live, faire comme si 50 ou 50 vaudraient la peine. Ou ce que vous pouvez faire, c'est connaître la largeur et la hauteur de cette section. Pour ce faire, vous pouvez cliquer sur l'aperçu des modifications. Et nous y voilà. Je vais cliquer avec le bouton droit de la souris sur Inspec et cliquer ici. Ensuite, vous pouvez voir ici la hauteur de l'image et l'image avec la hauteur. Vous pouvez l'utiliser avec la hauteur pour créer l'image. Passons maintenant à la section suivante et passons ici. Voyons la section suivante. La section suivante explique pourquoi nous le faisons et rejoignons notre communauté. Créons ces deux sections. Je peux facilement dupliquer cette section et la coller, oui, nous devons la coller en dessous. ce qui concerne la section que nous couvrons, nous pouvons simplement le faire comme ceci et faire en sorte que cette marche passe en haut passe un, deux, 20, et changeons ce texte pour expliquer pourquoi nous le faisons ainsi, puis nous pourrons ajouter cette section. Nous devons maintenant ajouter rejoindre notre section communautaire. Ce que je peux faire, c'est copier ce texte, il suffit de le dupliquer et de le mettre ci-dessous, puis ici, puis de le copier et de publier cette section, de le coller ci-dessous comme ceci et de l'ajouter comme ça Ensuite, je dois l'ajouter ici, ajouter ce formulaire, donc je vais simplement le copier et le coller comme ça. Ici, je vais cliquer sur ce titre et faisons-le, car H trois fera également de même pour être un H trois Et quand nous l'ajoutons au milieu, ce n'est apparemment pas très utile. Ce que nous pouvons faire, c'est cliquer ici et en faire une ligne à gauche comme celle-ci. Nous devons également faire de même ici et lors de la session d'abonnement, tournons à gauche et écrivons des patins comme celui-ci Maintenant, ce que je veux faire, c'est ajouter une image comme celle-ci de ce côté. Pour ce faire, nous devons emballer ces articles dans un contenant différent. Cliquons ici et ajoutons un contenant comme celui-ci et tout le reste. Je vais simplement ajouter tous les articles à l'intérieur de ce conteneur comme ceci. Allons-y. Maintenant, laissons un espace entre ces deux sections. Nous pouvons facilement ajouter une baisse de marge ici ou nous pouvons utiliser deux conteneurs différents. Je vais juste ajouter une marge en haut ici. Faisons en sorte que 30 ou peut-être 60, 60 fonctionneront. Et les autres moyens, nous pouvons cliquer ici et ajouter un conteneur comme celui-ci et encore une fois, retirer ces éléments et à l'intérieur de ce conteneur, nous mettons celui-ci et celui-ci. Ensuite, je vais dupliquer ce conteneur et retirer celui-ci et celui-ci, puis je mettrai celui-ci et celui-ci à l'intérieur de ce conteneur. Maintenant, en fait, nous devons également ajouter celui-ci. C'est un peu de travail, mais il suffit d'ajouter la marge en haut, mais je veux juste vous le montrer maintenant sur ce conteneur principal, je peux passer à la mise en page et je peux ajouter l'écart entre les lignes de 60 comme ceci. Ensuite, je veux ajouter une image ici. Pour ce faire, je vais cliquer sur le conteneur principal, le changer dans le sens de la ligne horizontale et le dupliquer. Non, il suffit de copier cette image cliquer ici et de coller l'image comme ceci. Ce sera juste en fonction du design et cliquez ici. Faisons en sorte que cela soit 60. Cliquez ensuite ici et placez les éléments au centre de cet alignement. Nous devons également faire de même ici comme ça. Maintenant, je peux changer cette image. Voici l' image nouvellement créée et je clique ici, puis je vais dans Contenu et je télécharge l'image. Nous devons également ajouter le texte ALT. Lorsque vous ajoutez le texte ALT, ajoutez toujours un texte significatif et mots clés O friendly, tels que comment être riche » ou quelque chose comme ça. Et voilà, nous concevons simplement la page. De plus, si nous le voulons, nous pouvons ajouter une section supplémentaire à cette page, mais restons minimalistes Maintenant que c'est publié, et prochaine leçon, nous devons résoudre le problème de la réactivité mobile. 18. Améliorer la réactivité mobile sur la page À propos de: D'accord, nous devons maintenant résoudre les problèmes de réactivité mobile. Avant cela, dans dernière vidéo consacrée à la réactivité mobile, nous avons réduit cet écart à dix, mais nous voulons le faire uniquement dans les versions tablette et mobile, mais la version de bureau a également changé Passons au réglage latéral et à la mise en page, faisons en sorte que ce soit deux y parce que si nous en faisons dix, il y en aura toujours dix et cliquons sur les modifications, cliquons sur retour dans l' éditeur OK, parfait. Passons maintenant à la version portrait de la tablette et modifions-les. Ajoutons 15 à droite et 50 à gauche. Ici aussi, changeons cela. Faisons en sorte que ce soit une colonne de direction , puis cliquons sur l'image et passons à cent ou nous pouvons simplement la remplir et nous devons également faire de même ici. C'est en fait sur la mise en page, fais-le comme ça à 100%. Ensuite, on peut ajouter les motifs 15 à droite, neuf à gauche. Maintenant, ici aussi, nous pouvons faire la même chose : rendre la colonne verticale, puis avancer au pagayage droit à 15 et au motif à gauche à 50 Alors cliquons ici à l'avance. Complète-le w. D'accord. Maintenant, ça a l'air plutôt bien. Alors passons à Mobile Patriot sur Mobile Port Riot. Tout semble aller très bien et nous n' avons rien à faire. OK, maintenant cliquez sur publier, comme ça, nous concevons simplement la page A. Nous devons maintenant configurer la page du blog et nous allons le faire dans la leçon suivante. 19. Configuration de page de blog: OK, maintenant configurons la page de blocage pour ce faire, nous pouvons utiliser element ou Them Builder. Sous les modèles, nous avons ici le Team Builder. suffit de cliquer dessus et maintenant ici, cliquez dessus sur Nouveau. Lorsque vous cliquez dessus, nous pouvons voir ici chaque section de notre site Web que nous pouvons modifier. Nous devons tous les modifier. Commençons par modifier la section du bloc. Ici, nous avons des archives. Si je clique sur cette icône d'information, nous pouvons avoir la description ici. Nous pouvons donc créer ici la liste de blocage. Faisons-le, cliquez sur cette icône en forme de plus et nous pouvons obtenir ici les modèles prédéfinis. Si vous le souhaitez, vous pouvez utiliser l'un d'entre eux, mais je vais juste le fermer et le construire à partir de zéro. Je vais cliquer sur cette icône plus, Tex Box ici, puis définir ce zéro comme valeur et pour la marge en haut, faisons 60 pour les éléments, ici nous avons le titre de l'archive. Je vais juste l'ajouter et cela s'ajustera automatiquement en fonction de la page. Ici, je vais le placer au centre et changer la typographie en en-tête comme celui-ci Encore une fois, je vais cliquer sur Ajouter un élément et ici nous avons Arch Force, il suffit de le faire glisser et de le déposer Vous souvenez-vous de la dernière fois que nous avons fait la même chose sur la page d'accueil et que nous pouvons faire de même ici ? Maintenant, nous devons d'abord ajuster le style pour ce faire, sélectionnons le skin comme ceci, puis la colonne sera trois et nous devrions afficher l'image. Faisons en sorte que la résolution de l'image soit moyenne à grande pour obtenir une image claire. Nous devons afficher l'extrait du titre et, sauf que la longueur le sera, faisons-en deux Ensuite, si vous le souhaitez, vous pouvez afficher la date et les commandes. Donc, dans ce cas, je n'affiche pas les données ou les commandes, je vais donc simplement les supprimer comme ça et nous pouvons conserver le bouton en savoir plus, et nous avons ici le lot. Passons ensuite à la pagination. Nous pouvons définir la pagination comme ceci ou utiliser cet Escod infini, ce qui signifie que lorsque vous faites défiler le site Web, reste des images se chargera Ici aussi, nous ne pouvons plus ajouter de message. Je vais conserver le message par défaut. Si vous souhaitez un message personnalisé, vous pouvez l'utiliser. OK. Passons maintenant à eTyleTap sur iTyleTab, faisons passer l'écart entre les colonnes et un écart fera également passer à 20 l'alignement du centre d' alignement et de la carte, nous avons l'ombre de travail et je ne vais pas changer grand-chose là-dessus Toujours sur le contenu, je dois masquer l'auteur. Tiens, lançons cet Atison parce que nous n'en avons pas besoin. Passons maintenant au style sur carte. Je vais conserver les données par défaut pour ici. Passons à l'image et modifions l'espacement des images. Faisons comme C et la couleur de fond du badge sera cette couleur et la couleur du texte sera cette couleur. Maintenant, en ce qui concerne le contenu, la couleur du titre sera la couleur primaire et la couleur de la police sera, créons ce sous-titre, puis nous devons le changer en 21 Ici, il y en aura 28, on peut le faire à moitié comme ça Maintenant, en ce qui concerne les métas, nous n'avons pas à nous soucier des métas car nous n'en avons pas ajouté. Ensuite, dans l'extrait, ajoutons la couleur du texte. La typographie sera également texte comme celui-ci et nous pouvons également modifier l'espacement. Nous devons maintenant nous occuper du bouton en savoir plus Faisons en sorte qu'il soit de couleur verte. La faute de frappe sera le bouton, mais nous devons réduire sa taille Faisons en sorte qu'il soit 16. Vous pouvez vérifier cette conception et suivre le même modèle de conception car nous devons conserver le caractère unique de la page dans chaque page Nous n'avons pas de pagination et faisons de ce message rien de sa couleur principale la couleur principale et c'est un peu comme un sous-titre OK. Maintenant, tout va bien. Cependant, le simple fait d'ajouter ce texte d'archive n'est pas une bonne idée. Créons un titre et un sous-titre à l'aide de l'IA. Maintenant, je suis à notre chat JG BT, ici je vais dire, donnez-moi un en-tête et un en-tête ou une page de blog. Ici, copions ce sous-titre. En fait, je vais copier celui-ci et modifions-le. Je vais juste le supprimer. Je dois le retirer. Cliquez ensuite ici et ajoutez un titre comme celui-ci, puis stylez l'en-tête Men En fait, faisons en sorte que le sous-titre soit deux B. Ici, je dois le montrer en deux lignes Ce que je peux faire, c'est ajouter une balise RO break comme celle-ci. Ensuite, je vais le dupliquer, puis venir ici et changer la typographie texte et ajoutons ce texte ici comme ceci OK. Maintenant, je dois ajouter un peu d'espacement ici pour pouvoir simplement ajouter une marge inférieure de 20 comme ceci. Sympa. Maintenant, ça a l'air bien. Maintenant, je peux cliquer sur Publier et maintenant sur Ajouter une condition. À la condition Ajouter, je peux inclure les archives Earl, mais ce n'est pas ce dont nous avons besoin. Nous devons ajouter des archives de publication. Nous devons afficher uniquement les publications, cliquer sur les archives des publications et cliquer sur Enregistrer pour fermer. Maintenant, comment accéder à cette page ? En fait, je vais me connecter et le remplacer par host gave. Je pense que ce mot est correct, mais je ne sais pas. Maintenant, si nous voyons cela comme ça, cela se verra mais ce n'est pas ce dont nous avons besoin. Lorsque nous cliquons sur ce bloc ou lorsque nous accédons à la page de blog que nous avons déjà créée, cette liste de blocs doit apparaître. Pour ce faire, je dois me rendre sur le tableau de bord WordPress. Passons au tableau de bord WordPress. Et sur le tableau de bord Wordpress, je vais passer ici aux paramètres et aux sous-réglages, puis à Reading Lors de la lecture, définissez les pages de publication sur le blog, puis cliquez sur Enregistrer les modifications. Maintenant, si je le regarde ici, il apparaît comme ça. voyez, ça a l'air plutôt beau et il affichera automatiquement le prochain article ou le billet de blog. En fait, si je vérifie, l'espace ici est vraiment petit. Nous devons ajouter de l'espace entre ces deux sections. Donc, pour ce faire, je vais aller dans Footer. Cliquez sur Ensuite, cliquez ici et passons à Advance. Dans Advance, ajoutons la marge supérieure à 1220. De cette façon, nous disposerons d'un meilleur espace. Peut-être ajoutons-le sous la forme 60 et cliquons sur Publier. Et maintenant, si je le vérifie dans les panneaux de la page d'accueil, ici nous pouvons voir l'espacement et aussi sur la page du journal, nous pouvons le voir clairement ici OK, maintenant ça a l'air plutôt bien et ce n'est pas ça, il faut faire plus de choses. Par exemple, sur la page d'accueil, nous avons des catégories. Voici nos catégories. Voici la catégorie. Si je clique sur la catégorie, ça s'affiche comme ça et ça n'a pas l'air bien du tout. Ce que nous devons faire, c'est accéder au Team Builder sous leur créateur, cliquer sur Forced Gave, et ici je vais cliquer avec le bouton droit de la souris ici et cliquer sur la carte postale de la tour de fenêtre OpenNW Ensuite, ce que je peux faire, c'est cliquer sur Nouveau et ignorer cela. Ce que nous allons faire, c'est que si nous accédons à une page de catégorie comme celle-ci ou à une page de recherche par exemple, recherchons ABC. En fait, il n'y a pas de post sur ABC, cherchons une taxe. Lorsque nous appliquerons la taxe sur les projecteurs, cela se produira comme suit, mais ce n'est pas ce que nous voulons Nous devons créer chaque page d'archi pour ces sections. C'est ce que nous allons faire. C'est vraiment facile de le faire. Tout d'abord, je vais corriger les problèmes de réactivité sur cette archive de blog Après cela, nous pouvons simplement le copier. Pour ce faire, je vais cliquer ici et ici nous devons ajouter le pad dans le Paden 15 à droite, le rembourrage 15 à gauche De plus, ce texte est trop gros pour le corriger, passez au style du contenu. Permettez-moi d'aller sur la page d'accueil et de la vérifier également. Je pense que sur la page d'accueil, nous l'avons corrigé, mais nous devons le vérifier et nous assurer que sur la page d'accueil, nous l'avons corrigé correctement. Voyons le contenu, la typographie est passée à 21. Nous l'avons fait Faisons de même ici. Ici, le contenu et le titre seront 21, comme celui-ci 2.1 0.1 fonctionnera et le reste du texte est correct. Actual 21 est trop petit, n'est-ce pas ? Non, ça va, c'est passer au mobile et sur mobile, ça a l'air plutôt bien. Il n'y a rien à faire ici. Nous sommes prêts à partir. Maintenant, ce que nous pouvons faire, c'est simplement copier correctement. Ensuite, nous pouvons accéder à une nouvelle page d'archive et y faire face. Ensuite, nous devons ajouter le titre de l'archive, pas le titre personnalisé, nous devons ajouter ce titre d'archive comme ceci. Supprimons celui-ci, supprimons également celui-ci et recommençons. Il suffit de glisser et de déposer le titre de l' archive comme ceci. Ensuite, on le place au centre et on ajoute un sous-en-tête, puis ici, voyons la taille de l'épingle d' invitation Il est 20 ans. Il y a une marge inférieure à 20. Maintenant, je peux le publier. Lorsque je publie ceci, je dois ajouter la condition, cliquer sur Ajouter une condition, puis nous pouvons la définir ici. Si je définis toutes les archives, les pages d'archives seront définies. Ce que je veux faire, c'est ajouter toutes les archives et ajouter une autre condition Dans cette condition, je dois exclure l'archive des publications car nous avons une page d' archive différente pour elle et nous devons également exclure les archives des résultats de recherche , puis je cliquerai sur Enregistrer et fermer OK. Maintenant, si nous vérifions comme ceci sur search Archiv, cela ne fonctionnera pas car nous excluons ce type de recherche Archiv p. Je vais aller sur la page d'accueil et passons à notre catégorie. Dans cette catégorie, ça s' affiche comme ça et tu verras. Maintenant, je veux ajouter le champ de recherche. Si nous ajoutons le champ de recherche à la page de blocage, nous pouvons rechercher le message. C'est ce que nous allons faire. Pour ce faire, je vais d'abord tous les supprimer. Publions ceci, nettoyons la page comme ceci et accédons au tableau de bord. Sur le tableau de bord, je dois accéder au Them Builder. Sur eux Builder, encore une fois, nous devons accéder aux archives. En fait, nous avons oublié de renommer cette modification de page d'archive . Nous allons maintenant définir le nom comme « oh mon dieu » et la publier OK, maintenant revenons en arrière. 20. Comment ajouter une barre de recherche: OK, ici sur la page de publication, nous devons ajouter ou ajouter le champ de recherche. Cliquez sur Modifier et j'ajouterai une recherche ici. Ajoutons maintenant la barre de recherche ici. Allons-y. Ici, nous avons la barre de recherche. Ici, je peux modifier ce texte si je le souhaite, donc je vais le garder comme ça. Nous avons maintenant les résultats. Dans ces résultats, nous pouvons afficher les résultats en direct et je vous montrerai comment ils sont configurés dans la prochaine leçon ou une fois que nous aurons terminé cette fonctionnalité de recherche. Ensuite, nous avons une requête. Sur requête, je définirai cette source sous forme publications, car si nous la définissons comme toutes, elle affichera les pages de publications et autres éléments de notre site Web, mais nous n'aurons qu' à rechercher les articles. Cliquez sur les articles et sur les paramètres supplémentaires, nous n'avons pas à nous inquiéter à ce sujet, puis passons à eTyleoeStyle Je définirai la typographie du champ de recherche sur un texte comme celui-ci, puis définirons la couleur du texte et nous n'aurons puis définirons la couleur du texte et nous n' De plus, lors du focus, nous pouvons changer la couleur du texte de cette manière. Alors, l'écart entre entrée et le bouton sera de deux comme celui-ci. Et puis, en clair, nous n'avons pas d'icône, nous n'avons donc pas à la configurer. Ensuite, pour le bouton d'envoi, couleur du texte sera la couleur d'arrière-plan, et le type d'arrière-plan sera secondaire à cette couleur verte. Nous devons également définir la typographie sur un bouton comme celui-ci. Le rayon de ce bouton de recherche sera alors nul et nous devrons ajouter le rembourrage supérieur et inférieur En fait, le haut et le bas vont bien. Nous devons ajouter le bon modèle. Nous en serons à 30 et il en sera de même pour la gauche, peut-être 60. Ajoutons un 60. Ce sera mieux parce que nous devons appuyer ici et sur le bouton et lors d'une douche, la couleur du texte sera blanche et la couleur de fond est une couleur primaire comme celle-ci. Nous pouvons également ajouter l'effet HA comme celui-ci. Maintenant, ça a l'air plutôt bien. Si nous le voulons, nous pouvons ajouter des instructions telles que rechercher un article, mais je ne vais pas le faire, donc je vais passer à l' avance, en bas de Patmus 20 Nous aurons de l'espace pour respirer comme ça. Maintenant, ça a l'air plutôt bien. Maintenant, je vais cliquer sur Publier et il nous reste encore beaucoup à faire, mais essayons ça pour essayer, je vais apporter des modifications et passer à la page du blog Ici, je vais taper tax et cliquer sur Osearch Lorsque je clique sur CSearch, j'ai tous les détails ou tous les articles liés à la fiscalité, mais nous devons créer le champ Archiv de recherche et c'est parti Pour ce faire, nous devons aller dans le Team Builder Team Builder, passer dans Templates Team Builder et maintenant nous devons créer une page d'archivage de recherche Pour ce faire, cliquez sur adn puis sur Archiver. Et ici, supprimons cela et nous pouvons simplement obtenir cette section en copiant et en collant. OK. Maintenant, nous devons ajouter du texte, donc je vais le dupliquer puis le mettre ici. Ici, il devrait être là. Ensuite, changeons cet alignement comme ceci, en faisons un paragraphe supprimons ce texte, cliquez ici et définissez cet Archiv ou Archiv tit titre de l' archive sera affiché ici et nous passerons au style E sur Es style. Changeons la typographie, passons à 21 et voici faisons en sorte que cela ressemble et là 26, c'est parti Il s'agit d'une balise dynamique. N'oubliez pas que nous sommes dans le titre de l'archive. Le titre de cette archive est similaire au titre de la page. Par exemple, si nous recherchons des pistes ici, il s'agira du titre de l'archive ou du titre de la page. Dans ce cas, il ne sera pas là. Dans ce cas, il affichera Maintenant, je veux prendre ici et définir l'archive de recherche de titres. Saviez-vous que nous n'avons pas défini page de recherche lorsque nous la publions ici sous certaines conditions ? Nous avons ici les résultats de recherche. Lorsque nous avons configuré toutes les pages d'archives, nous ne l'avons pas définie. C'est parce que nous avons besoin d'une page séparée comme celle-ci pour le faire. Maintenant, je clique sur SavanClos et c'est publié. Maintenant, si je le vérifie, si je supprime simplement cette page, sera comme ça Essayons de copier cette section. Voyons maintenant qu'il recherche parfaitement. Maintenant, à l'étape suivante, je dois vérifier la réactivité. Ici, vous pouvez voir que la réactivité n' est pas très bonne. Sur la version tablette, c'est parfait et sur mobile, cliquons ici et passons au style sur le bouton d' envoi d'Estyle, nous devons l'envoyer par e-mail au format 20 sur 20 Faisons en sorte que ce soit zéro et qu'il soit 15 par 15 comme ça. Et aussi, nous avons ici l'icône claire, et voici l'icône claire. En fait, on peut changer sa couleur comme ça. Et si vous le souhaitez, nous pouvons modifier la taille de l'icône. Voici donc cette icône. Je l'ai juste oublié. OK. Maintenant, ça a l'air plutôt bien. Maintenant, publiez-le. En fait, je vais copier cette partie et sur search Aga, nous devons rythmer le style de cette façon. OK. Maintenant, publiez-le et ensuite nous devons le configurer. Cliquons ici les résultats. Pour le configurer, je vais rechercher les résultats et cliquer sur Afficher ici. Nous devons créer un résultat temporaire en temps réel signifie que lorsque je recherche comme ça, le résultat s'affichera ici Il s'affichera en temps réel. Pour ce faire, je vais cliquer sur retemplate, concept ici, changeons cela en résultats de recherche en temps réel Cliquez ici Xbox et ajoutez l'ex box comme ceci, puis retirez votre STA. Pour le rembourrage, allons chez Padins Six. Maintenant, nous devons ajouter le robinet que nous devons afficher. abord, nous avons besoin de l'image en vedette, je vais la faire 300 par 300 , puis nous devons montrer le titre de l'article. Si nous le voulons, nous pouvons afficher l'extrait du message, mais ne le montrons pas. Si vous le souhaitez, vous pouvez simplement l'ajouter comme ceci et je ne vais pas le faire , donc je vais le supprimer. Maintenant, je vais cliquer ici et passer à la mise en page. La mise en page sera horizontale et cette image devrait se trouver ici, puis cliquez ici, puis changez la typographie texte comme celui-ci et cette image aura l'air correcte Ensuite, ce que je dois faire, c'est ajouter une bordure en bas car cela chargera un article comme celui-ci parce que le message se chargera comme ceci horizontalement. La première ligne est ici, la deuxième ligne est là. Cliquons sur le conteneur principal, un style que nous appelons bordure. La bordure est solide et embêtante, faisons en sorte que la couleur de la bordure soit de cette couleur et en fait, nous n'avons besoin que du bas, nous n'avons besoin que de la bordure inférieure comme celle-ci et créons cette petite cendre incolore comme ça C'est ça et ce n'est pas ça. Nous devons ajouter le lien, ce qui signifie que lorsque vous cliquez sur cette image ou ce texte, il doit être redirigé vers le message en question. Pour cela, cliquez sur. Faisons-le d'abord pour l'image, cliquez sur l'image. Faites-en une URL personnalisée et ici, sur la balise dynamique et ici, cliquez sur PostRlt est balise dynamique et l'URL de la publication s'y trouvera également, faisons de même pour ce texte ici, nous pouvons facilement publier correctement et la couleur du texte sur le principal, affichons la couleur principale en normal sur le bord supérieur Rendons-le secondaire comme ça. OK, maintenant je clique sur publier et revenons ici. Ensuite, je cliquerai sur publier, et ici je rechercherai ici modèle de résultat de recherche en direct que nous venons de créer, il suffit de le sélectionner et de le publier. Alors essayons-le. En fait, nous devons le tester sur Live qui se trouve ici. Lorsque nous le faisons, voici le résultat, mais il ne semble pas du tout bon. Changeons le design pour changer le design, ici, je vais aller à eTyleoeStyle maintenant nous avons Au résultat, ajoutons la couleur de fond. Ajoutons cette couleur comme couleur de fond. Ajoutons une petite ombre en forme de boîte. R Ne l'ajoutons pas. Cherchons comme tag ici. Nous pouvons maintenant le modifier sur le design en vérifiant le design. Je vais d'abord faire en sorte que la distance par rapport au champ de recherche nulle et que le rayon en gras soit égal à zéro. Faisons en sorte que le rembourrage Si nous le voulons, nous pouvons modifier la largeur de la taxe. Avec un résultat comme celui-ci. Mais gardons les largeurs dans le temps. champ de texte comme celui-ci, c'est la meilleure solution, et l'écart entre les lignes sera nul et l'écart entre les colonnes, Un champ de texte comme celui-ci, c'est la meilleure solution, et l'écart entre les lignes sera nul et l'écart entre les colonnes, nous n'avons pas de colonne, et c'est tout. Le reste du design, nous pouvons le modifier en utilisant la page de résultats de recherche en direct, alors cliquez ici et commençons par l'image. OK. Passons au style, l'alignement sera laissé et ajoutons une largeur de 100 %. Et pour le conteneur, justifions les articles, alignons le centre. Faisons la pleine largeur, puis voyons voir. Cliquons sur publier et testons à nouveau. Impôt. Il est toujours plus grand et les images ne sont pas alignées correctement ou ont des tailles différentes. Nous devons le corriger et modifier la taille de l'image. Pour ce faire, je vais aller ici et ajouter un conteneur ici. Sur le conteneur, fixons la marge et le remplissage à zéro, puis ajoutons l' image et sur le conteneur, j'ajouterai le conteneur avec un 40, puis je dupliquerai le conteneur, et ici nous ne devons pas présenter d'image Je dois dupliquer le conteneur comme ceci, puis supprimer l'image d' ici et du titre de la pose. Faites-le également avec 60. Et la taille intermédiaire, faisons en sorte que la taille intermédiaire soit 50 peut-être que cette taille sera 30, 30 seront du travail, et ici, faites 70 et cliquez sur CPAblish et voyons l'aperçu maintenant. Arrêtons ce travail. Une balise de recherche. Les images sont maintenant correctement alignées, mais leur taille est toujours trop grande. Pour résoudre ce problème, passons à l' archivage forcé et je dois réduire la taille de cette image. Essayons de le faire à partir d'ici. Échangez-le par 50 % et là la taille du contenant sera également alors passons au conteneur et au conteneur, non, nous devons aller au conteneur conteneur, le placer au centre. Centrez comme ça. Faisons le maximum avec Acid Add Alignment Center ici. Le rayon de l'eau sera nul, et voyons si cela fonctionne. Trouvons des citernes post-cave. Enfin, maintenant ça a l' air beaucoup mieux. Maintenant que nous avons cet espace, cela ne fonctionnera pas. Ce que nous pouvons faire, c'est cliquer sur le conteneur et supprimer le maximum comme ceci. En fait, sans le changer, changeons la taille de ce conteneur. Peut-être ajoutons-le 50 et essayons maintenant. Espérons que cela fonctionne. Enfin, ça marche. Ce que j'ai fait, c'est que je garde la taille de l'image en vedette à 100 % et ici je change ce conteneur à 15 % comme celui-ci et ce conteneur sera « faisons-le comme ça ». Je vais le remplir automatiquement et cliquer sur publier et maintenant ça a l' air plutôt bien Réservoirs C. Et là, vous pouvez ajouter beaucoup de choses. Par exemple, vous pouvez ajouter l'EAP. Donc, ce que nous pouvons faire, c'est aller ici et cliquer sur l'icône clcpas ici post exp, aller dans Style cliquer d'abord sur ces paramètres et dans les paramètres, ajouter la longueur Exap car 15 fonctionneront peut-être Et à l'avance, si vous le souhaitez, vous pouvez ajouter d'autres éléments. Ensuite, sur Estyle, faisons-en une ligne et changeons la typographie en texte Faisons en sorte que ce soit comme un 60. Faisons en sorte que cet espacement soit égal à 15 et ajoutons une couleur de texte comme la couleur cendrée Ensuite, nous pouvons publier et voyons voir si le design actuel est là où je le publie, mais rien ne se passe. Impôt. Je ne suis pas apparu, soyons plus lucides et moins bons Faisons en sorte que cela s'applique au contenu de la pose et voyons s'il implique du texte fiscal Maintenant, on y va. Voici l'extrait, et voici également le texte, ici nous ajoutons beaucoup d' espacement, comme six et non zéro Allons-y. Oui, mettons-le zéro et sur ce conteneur, rendons-le aussi malade. Maintenant, publions-le et cliquons ici pour lancer la recherche Oh. Allons-y. Voici le design final. Et si tu veux, tu peux tester d' autres idées et améliorer les choses, mais c'est une bonne chose pour moi. Et maintenant, nous avons la page de recherche terminée, le résultat de la recherche en direct est également terminé. Nous devons maintenant ajouter la même fonctionnalité à cette archive de recherche, nous n' ajoutons que la copie d'archive forcée et le style. Ici aussi, nous devons accéder à l' ouverture des résultats et entendre la recherche, car nous devons configurer le modèle et cliquer sur Fablsh maintenant si nous allons sur la page des résultats de recherche, et testons-le Lorsque nous le testerons, il aimera ceci. Plutôt bon. Prochaine étape, nous devons modifier le message unique, et nous le ferons dans la leçon suivante. Actuellement, si nous abordons les finances personnelles, nous les verrons comme ceci et par texto, nous les verrons comme ça. Dans la leçon suivante, si nous cliquons sur ce seul article, nous devons modifier ce design. Faisons-le dans 21. Conception de publication de blog unique: Bien, concevons maintenant ce modèle d'article de blog unique. Pour ce faire, je vais accéder au tableau de bord WordPress, ou tableau de bord WordPress. Passons ensuite à Team Builder. Dans Team Builder, cliquez sur Nouveau, et ici nous avons un seul article. Cliquez dessus. Allons-y. Je vais supprimer celui-ci car nous n'en avons pas besoin. Ensuite, je vais d'abord cliquer ici et créer une boîte Plex comme celle-ci. En fait, nous allons créer une structure à deux colonnes car nous n'avons pas créé de structure à deux colonnes, alors cliquons ici et créons ce type de structure. Nous pouvons cependant le faire manuellement. Mais cliquons ici, supprimons toutes les marges et les rembourrages et faisons-le ici, de même Faisons de même ici. OK. Maintenant, en haut, ajoutons la marge supérieure à 60. Maintenant, il faut d'abord ajouter le titre de la pose. Ajoutez-le, puis nous devons ajouter le contenu de la publication. En fait, avant de publier du contenu, nous devons ajouter l'image principale comme celle-ci , puis en bas, ajouter la navigation dans les articles, afin qu'il puisse naviguer dans le message précédent et suivant. Après avoir ajouté tout cela, nous pouvons créer le design, puis avant cela, je dois ajouter le bouton Partager. Ici, nous avons un ensemble de boutons de partage. Ajoutons-le comme ceci , puis si vous autorisez les utilisateurs à commenter, vous pouvez ajouter une section de commande de publication comme celle-ci et avant cela, j'ajouterai une section de publication. Dans cette section de publication, nous recevrons un message ajouté. Commençons maintenant le design. Avant de concevoir, ajoutons tout le contenu que nous prévoyons d'ajouter à la barre latérale Pour cette barre latérale, je vais ajouter une recherche. En fait, nous pouvons obtenir la barre de recherche à partir d'ici, il suffit de la copier à juste titre. Voici la barre de recherche de l'arc de publication. Ensuite, collez-le comme ça. Nous devons changer le design, puis j'ajouterai un post set comme celui-ci. OK. Quoi d'autre ? C'est suffisant pour le moment. Si vous avez plus de choses comme l'auteur, si vous souhaitez ajouter les détails de l'auteur, nous pouvons ajouter Orthobox comme celui-ci Et oui, ajoutons également orthobox. Ainsi, vous pouvez voir clairement même si nous ne l'ajoutons pas ici, mais si je l'ajoute, vous pouvez clairement voir comment l'utiliser. OK. Nous devons maintenant modifier le design. Commençons donc par le problème de l'espacement. Ici, nous devons avoir un espacement par rapport à ces sections, cliquer sur le conteneur principal et passer à la mise en page à la masse de colonne 20 Passons ensuite au style de cet en-tête. La typographie de gauche comportera un sous-titre comme celui-ci. Ensuite, l'image, l'image, nous n'avons rien à faire. Je vais le compléter et pour ce texte, je vais l'aligner à gauche et la couleur du texte sera le texte, et le typogramme sera ce texte comme celui-ci OK, maintenant allons-y ici et là, nous pouvons ajouter le bouton Partager, alors cliquons sur le bouton Partager et ajoutons Pinterest, dupliqué, Twitter, pas Twitter Egg, ajoutons uniquement ces éléments Si vous le souhaitez, vous pouvez en ajouter d'autres, et ici vous pouvez modifier le design. Je dirais que le type de dégradé est carré, la colonne sera alignée à gauche sur les URL cibles, page en cours et sur un seul style, nous n'avons rien à faire Ça a déjà l'air bien. Ensuite, à l'avance, j' ajouterai la marge inférieure à 60. Maintenant, il a également plus d'espace. Le sommet est 30, 33, 30, comme ça. Maintenant, nous devons modifier ce bouton précédent et suivant pour ce faire, allez ici. Et si vous montrez l' étiquette, vous pouvez la masquer, mais je vais l'afficher et montrons la flèche pour le carreau et aussi cette bordure. Passons ensuite au style E sur le style E. La couleur de l'étiquette sera cette couleur verte et la typographie sera celle des boutons. Passons Ou 18 ans, ce sera du travail. Ensuite, la couleur du titre de l'article sera également cette couleur et le texte le sera aussi, mais nous devons le réduire comme 12 12 fonctionnera et une flèche, la couleur de la flèche sera également cette couleur verte ou nous pouvons ajouter une couleur gris clair comme celle-ci et je donnerai la taille par défaut. La bordure ressemblera à ceci. Si nous le voulons, ajoutons un espacement comme celui-ci. OK. Maintenant, ça a l'air d'aller bien. Aujourd'hui, il pleuvait beaucoup, alors j'ai arrêté d'enregistrer Continuons donc. Et ce que nous avons fait, c'est ajouter la couleur Her ou la couleur dgo à cet élément de navigation de publication Nous passons donc en revue tous ces éléments et ajoutons une touche de couleur. OK, maintenant montons et partons d'ici. OK, maintenant nous devons nous occuper de cette section. Ce que nous pouvons faire facilement, c'est accéder au tableau de bord de Word Press. Ensuite, nous devons visiter le site et je vais cliquer sur Modifier avec un élément ou Nous pouvons facilement copier Ceci est un élément de publication. Donc, sur la page d'accueil, nous avons ici le même élément de publication. Ce que je vais faire, c'est cliquer avec le bouton droit sur copier, venir ici, cliquer avec le bouton droit de la souris et coller le style. En fait, faisons-en une carte. Quand j'en fais une carte, le design a changé. OK, maintenant je change le nombre de colonnes à deux et nous aurons deux colonnes publiées et le nombre de publications par page sera également de deux. Montrez les images, et conservons toutes les informations, et ici je vais supprimer les métadonnées et les commentaires. La longueur de l' extrait sera de 50 et affichons en savoir plus, qui sera une catégorie, et l'important est la requête. Sur requête, nous pouvons définir la source sous forme ports et de date. Tout ordre sera aléatoire. Ainsi, lorsque quelqu'un visite cet article, il aura deux publications aléatoires et aucune pagination, nous n'avons pas à nous soucier de la pagination, et ce contenu est également terminé Donc, ce que nous pouvons faire, c'est aller dans la section des commandes. Je ne vais pas utiliser la section des commandes pour ce blog, mais je vais vous montrer comment l'améliorer. Alors voilà, cliquez sur cette icône en forme de crayon et sur la commande ici, nous avons un skin, sélectionnez les commandes du thème, et la source sera forcée à l'avance. Nous n'avons pas grand-chose à faire, mais la couleur des liens et des boutons n'est pas la même que celle de notre thème. Pour résoudre le problème, je vais cliquer ici enregistrer le brouillon et passer à stsetting En ce qui concerne le réglage, nous devons nous adapter à ce thème. Pour cela, passons à la typographie Faisons en sorte que le corps du texte soit coloré comme du texte, et la typographie sera du texte voir si quand je le ferai, cela a changé et l'espacement de la typographie, je vais juste le laisser tel quel, et ici les couleurs des liens seront cette couleur sur HO, rendons-le primitif comme ça et la typographie sera également même. Ensuite, nous avons ce bouton de commentaire ici si vous le souhaitez, vous pouvez sélectionner la typographie comme ça, mais je ne vais pas Je vais enregistrer les modifications ici et nous devons encore corriger les couleurs des boutons pour ce faire, je vais revenir en arrière et nous avons les boutons ici. Sur les boutons, je dirais que le type de bouton gapio et que sur le texte normal, la couleur de fond sera la couleur d'arrière-plan et que la couleur d'arrière-plan sera une couleur secondaire et que nous n'avons pas de rayon de bordure De plus, nous n'avons pas de type de bordure et nous devons ajouter les rembourrages et les marges Faisons en sorte que le top passe 15, 22, 15, 22, comme ça. Si vous voulez plus d' espace, vous pouvez l'ajouter, mais je vais le garder comme ça et sur le bord, le texte sera de couleur marron clair et le texte sera de couleur primaire comme celui-ci. OK. Voici comment nous pouvons le faire, et maintenant nous pouvons cliquer sur Enregistrer les modifications et cliquer sur Retour pour Modifier OK. Comme je vous l'ai déjà dit, je vais le supprimer car je n'en ai pas besoin. Je te le montre juste pour. Si vous devez l'ajouter à votre site Web, vous pouvez suivre les étapes. Nous avons maintenant le profil de l'auteur sur le profil de l'auteur. Nous pouvons faire la mise en page comme nous le voulons, et passons maintenant à Estyle Je garderai l'image. Je vais garder le réglage tel quel, et le nom sera Let's make the primal color et la typographie sera button Gardons le texte. Faisons en sorte qu'il soit de la taille d'un bouton. Comme cette biographie utilise typographie avec ce texte et ce bouton, nous ne voyons actuellement aucun bouton, donc gardons-le par défaut En fait, nous devons ajouter nos informations d'utilisateur pour améliorer l'apparence. Faisons-le après avoir terminé le reste du design. Maintenant, nous avons la barre de recherche, cliquez dessus et passons au bouton de soumission d' eTyleoeStyle Nous avons ce rembourrage. Supprimons complètement comme ça, puis faisons-le, car six par six ou 12 par 12, ce sera bien mieux. Maintenant, c'est plutôt bien aussi sur la version tablette, ça ressemblera à ça et c'est bon. Ensuite, je passerai à la version de bureau et nous avons ici un autre ensemble de posts en bloc. Ce que nous pouvons faire, c'est ajouter un design de publication en bloc. Ce design de publication en bloc pour l'obtenir, je clique sur Modifier le pied de page, copie, je viens ici, je rythme ce style Ensuite, ce que je vais faire, c'est passer à la carte Skins. En fait, la peau est classique, voyons voir. Le skin est classique, la colonne est une, la page postra trois Faisons en sorte que le nombre de colonnes soit de 14 par page. Restons-en à six. Et faisons sonner ces deux trucs. Nous n'avons pas besoin de montrer l'extrait, et nous n'avons pas non plus besoin d'afficher le bouton en savoir plus sur le style, passons au contenu, et ici la couleur de fond est le blanc. Faisons en sorte qu'il soit de couleur foncée comme ça. Maintenant c'est joli OK, maintenant nous avons un seul article de blog super cool Ce que nous pouvons faire, c'est cliquer sur publier à condition et sur Inclus Je dois sélectionner ces deux articles, puis les publier tous et cliquer sur Enregistrer et fermer. C'est bon. Passons maintenant à notre site WordPress et lisons le post de MotoRad , et c'est parti Ici, nous avons le billet de blog, et il ressemble à ce que nous voulons qu'il soit vu, c'est plutôt cool, et là nous devons nous adapter pour le faire, nous devons accéder au tableau de bord WordPress. Passons au tableau de bord WordPress et au tableau de bord WordPress, je vais accéder aux utilisateurs et au profil. Ici sur le profil, je dois saisir ces S. Je vais ajouter ces SF, j'ajouterai le prénom John Doe et le surnom sera Edwin Cette pièce s'appellera John Doe. Et ici, passons au JGPT et cherchons à me donner des informations biographiques sur cet écrivain en particulier En fait, il faut ajouter le nom. Il s'appelle John Doe. OK, ici, copions celui-ci et collons-le ici, alors nous avons besoin d' une fonctionnalité de profil. En fait, nous devons connecter ce site Web à Gravata pour le faire Je ne vais pas le faire, donc je cliquerai sur Mettre à jour le profil, puis si je vais ici et que nous allons publier, Oh mon Dieu. Nous avons ici toutes les informations sur l'auteur. Mais c'est trop long, ce que nous pouvons faire, c'est accéder au tableau de bord et créer l'équipe en cliquant sur cet élément d'une publication unique. Nous devons en fait changer le nom. Renommons-le ici, cliquons sur l'icône de réglage et disons publication d' un seul bloc ou publication d'un seul article et ici, cliquez sur cet avatar et passons au style. Faisons en sorte que ce texte de biographie soit 40 Non, c'est toujours trop. En fait, ce que nous pouvons faire, c'est le mettre ci-dessous comme ça. Ainsi, les visiteurs peuvent en apprendre davantage sur lui. De plus, si vous le souhaitez, vous pouvez ajouter le bouton d'archivage afin de voir tous les messages de cette personne ici, ici, Jack. Ajoutons une balise dynamique. Ajoutons le nom de l'auteur de la publication, puis cliquez ici. Et avant AddRD et après l'apostrophe S, post read is face, John DoysFst post read is face Maintenant, je vais passer à Estyle sur Estyle Martin, changeons la couleur du texte en couleur d'arrière-plan Et la couleur de fond sera couleur secondaire et la typographie sera un bouton. C'est trop grand, alors mettons le texte à 16. Oh, fais-le primaire comme ça. Non, en fait, cela devrait être ceci et la couleur d'arrière-plan devrait être une couleur primaire comme celle-ci. Je vais conserver le fanage par défaut, voici donc comment afficher les détails de l'auteur Si nous publions ceci et que nous allons ici, il ne l' a toujours pas mis à jour, mais pour une raison ou une autre, il n'est pas mis à jour. Cependant, si nous cliquons sur ce bouton, nous irons sur cette page d'arche. partie du poteau à bloc unique est maintenant terminée et la majeure partie du travail est terminée. Nous devons maintenant créer la page de contact. Faisons-le. 22. Concevoir la page de contact: Créons maintenant la page de contact. Pour ce faire, je vais me rendre la page de contact et cliquer sur Modifier la page. Ensuite, à partir de là, cliquez sur Modifier avec elemento et j' irai sur ChagBT et je dirai «  mon contenu » pour Comme ça, ça devrait être un contact. Nous et ceci est un journal financier. Disons que c'est sympa. Ajoutons maintenant ces informations. Pour cela, je peux aller sur une autre page. En fait, passons à la page et cliquez sur Modifier avec Elementor et à partir de là, nous pouvons copier cette section De cette façon, nous n'avons pas besoin de le construire à partir de zéro. Ensuite, copions ce texte, placons-le ici, copions ce texte. OK. Nous devons maintenant entrer en contact en partie, en partenariat et en collaboration avec les invités. Ajoutons ces informations. Tout d'abord, créons une colonne de lignes de direction, supprimons toutes les marges et rembourrages et ajoutons la marge supérieure de 1 à 20 Ensuite, je vais cliquer ici et ajouter le conteneur. Supprimons également la marge et le rembourrage de ce contenant. Cliquez ensuite ici et ajoutez un titre. Ce titre vous contactera, copiez-le, collez-le comme ça, passez à Estyle align jusqu'à ce que nous partions, typographie sera Ensuite, nous devons ajouter cet e-mail, ce téléphone et les heures de bureau. Pour ce faire, je vais aller ici et rechercher la liste des icônes. Et voilà, il suffit de le glisser-déposer comme ça. Ensuite, changez cette icône en nlop. Allons-y, en fait. Allons chercher celui-ci et ensuite nous devons ajouter l'e-mail. Allons recevoir cet e-mail. L'e-mail sera invoqué sur le site Web personnalisé design.us et également sur le lien si vous le souhaitez, vous pouvez ajouter un e-mail deux et une adresse e-mail Je pense que cela devrait être recherche d'informations correcte dans Mail two sur Google. Envoyez un mail pour travailler comme ça. Voir Nice. Lorsque quelqu'un clique sur cette icône, il ouvre cet e-mail, il ouvre la boîte e-mail, puis nous devons ajouter l'emplacement, l'emplacement c'est le numéro de téléphone. Ajoutons ce numéro de téléphone. Il s'agit d'une première page. Je vais simplement ajouter comme il s'agit téléphone de recherche et ajouter le numéro de téléphone ici, puis nous devons ajouter les heures de bureau. Copiez les heures de bureau et recherchez ici Office Lolock à la fois. OK, plutôt bien. Maintenant, ce que nous devons faire est de copier ce partenariat et contributions des invités, de lubrifier celui-ci et de le mettre ici, de le coller comme ceci Copiez ensuite celui-ci et collez-le ici et sur ce style, faites l'alignement à gauche et ici, copiez le texte, collez le texte. Sympa. Maintenant, je vais créer un nouveau conteneur, cliquer ici et ajouter ce conteneur ici. En fait, je dois l' ajouter ici, cliquer ici et l'ajouter comme ça. OK. Maintenant, il est dans ce deuxième conteneur, mais nous le voulons ici, ici même. Non, ici, en fait. OK. Maintenant, je vais modifier les marges et le rembourrage et copier celui-ci, le coller à l'intérieur, et là, envoyer un message sur ce texte, nous envoyer un message, copier cette partie et coller comme ceci et sur ce texte comme ceci, puis ici je vais rechercher formulaire par formulaire, il suffit de le glisser-déposer comme ça Et nous voilà maintenant sur le formulaire, je vais chercher, je l' ai défini comme formulaire de contact. Et ici, nous avons besoin d'un nom devrait être requis placé Mettons une soudure dans le nom que vous allez nommer ici, puis e-mail Presder sera inférieur à l'adresse e-mail que vous appuyez dessus comme ceci Ensuite, envoyez un message, pas d'espace réservé d' étiquette sur les piles, aucune suggestion Maintenant, nous pouvons également ajouter un sujet. Le type de texte doit être du texte et ici, l'étiquette sera l' objet et l'espace réservé . Entrez l' objet de l'e-mail comme ceci et il apparaîtra juste ici C'est plutôt bien, et si vous le souhaitez, vous pouvez ajouter d'autres champs de courrier électronique, et sur Advancetting, vous pouvez définir une valeur par défaut pour chaque e-mail à titre d'exemple dans le message, je dois ajouter un halo, vous pouvez simplement l'ajouter quand je l'ajoute, il s'ajoutera automatiquement à la boîte aux lettres Et sympa. Nous voulons également afficher la marque requise, et ce message devrait être requis comme celui-ci et le bouton est OK. Donc, si nous le voulons, nous pouvons modifier le texte de ce bouton d'envoi, mais je ne vais pas le faire. Après la soumission, il ne sera procédé soumission de la collection et à l'e-mail. Ainsi, lors de la soumission de la collection, nous pouvons collecter les données de ce formulaire dans le formulaire de soumission de collection situé sous Elementor et soumissions, puis par e-mail, ici nous pouvons définir les deux e-mails Ainsi, lorsque quelqu'un pose une question, vous pouvez l' envoyer directement dans votre boîte e-mail. Et ici, comme message, si nous ajoutons tous les champs, nous pouvons obtenir tous les champs. Ou si vous voulez un champ spécifique, vous pouvez accéder à quatre champs. Imaginons que nous ayons besoin de ce nom. Passons donc à l'avancement et nous pourrons copier le code court et venir ici. Ensuite, par e-mail, nous pouvons simplement taper son nom, deux seront notre e-mail et le bal de fin d'année sera celui de la personne qui a envoyé cet e-mail J'ai déjà créé comment configurer les e-mails et le SMDB. Si vous ne les avez pas cochées, je les ajouterai après cette leçon et après avoir configuré toutes ces informations, nous pourrons accéder à EstilSotils, nous pourrons modifier Faisons en sorte que l'écart entre les colonnes soit égal à 15 et que l'écart entre les lignes soit égal à 15, et non l'écart entre les colonnes. Faisons en deux. L'étiquette est alors l'espacement. Créons cet espace pour étiqueter. Peut-être que six fonctionneront. Ouais Et si vous le souhaitez, vous pouvez modifier la couleur du texte. Et si vous le souhaitez, vous pouvez également modifier la typographie Donc ici, je vais le faire un peu petit, comme 18 et Line Night sera également 18 et remplir la bordure avec « Je vais le faire zéro ». En fait, nous avons besoin d'une frontière. Un et ici principal, alors le rayon de la bordure sera nul comme ceci, et nous allons créer cette petite couleur cendrée comme ceci. OK. Passons ensuite au bouton. Le bouton est en bon état. Rien à faire Ensuite, sur le message, nous pouvons dire le message de réussite en vert, message d'erreur en rouge en ligne, la couleur du message sera cette couleur. Cela devrait être rouge. OK. Maintenant, nous n' avons plus à nous soucier des étapes car nous n' avons qu'un formulaire simple. Maintenant, nous pouvons le publier et si c'est le cas, voici le formulaire, et maintenant si je le remplis, puis que je clique sur le consentement, nous recevrons le message d'envoi. Nous pouvons également modifier ces messages si vous souhaitez modifier ces messages Passons aux options supplémentaires. Dans le cas des messages personnalisés, vous pouvez ajouter des messages personnalisés, je ne vais pas le faire. Passons à la page de soumission et dans la page de soumission, voici le message de test que je viens d'envoyer. Nous avons maintenant la page de contact et le blog entièrement fonctionnel Si vous envisagez de vous procurer Google Adsens ou de diffuser des annonces, vous devez disposer de pages sur les conditions générales et les politiques de confidentialité Dans la prochaine leçon, je vais vous montrer comment les générer 23. Créer un e-mail et configurer SMTP P: Fais-le, je vais accéder à mon compte nominatif. Vous devez accéder au HSTMPVider et accéder au panneau C. Donc, ici, je clique simplement ici et je clique sur Accéder au panneau C. OK, je redirige vers le panneau C et sur le panneau C, donc si vous n'avez pas utilisé le nom JP, peu importe. Le panneau C est le même sur tous les fournisseurs HoSTEM. Il peut y avoir quelques modifications, mais c'est assez similaire. Et si vous n'avez pas compte e-mail ou si vous êtes un fournisseur de services, un compte de messagerie, vous devez les contacter et les obtenir auprès d'eux. Donc, au nom de Jif, nous avons déjà reçu les e-mails. Donc, si je fais défiler l'écran vers le bas, nous pouvons ici le compte e-mail, ou nous pouvons simplement rechercher ici le courrier électronique. Allons-y. OK. À partir de là, je vais simplement cliquer sur le compte de messagerie. OK, voilà, j'ai mes anciens e-mails. À partir de là, il me suffit de cliquer sur Cre et sélectionner l'URL de notre site Web Pour le nom d'utilisateur, j'ajouterai des informations et générerons un mot de passe. Je vais donc générer un mot de passe et nous reviendrons. C'est bon. Maintenant, je clique sur Concreate. L'e-mail sera affiché sur un point de conception de site Web personnalisé Vous pouvez donc ajouter n'importe quel nom ou n'importe quel nom ici. Par exemple, si vous êtes Joan, vous pouvez ajouter Joan à l'URL de votre site Web, et maintenant je clique sur C Create OK. Nous avons besoin d'un autre e-mail à ajouter en tant que deux e-mails. À partir de l'e-mail, il y aura des informations, et créons deux e-mails en sélectionnant le domaine, et j'ajouterai mon nom. OK. Ensuite, je vais configurer le mot de passe comme suit. OK, puis je clique sur créer. OK, maintenant nous avons ces deux e-mails. Définissons ces informations. Tout d'abord, passons aux plugins et cliquez sur Ajouter un nouveau plugin. Et ici, recherchons le courrier WP SMTP, pas le courrier principal. Courrier. C'est bon. Voici le plugin et il est compatible avec notre version de WordPress. Cliquez sur Installer maintenant. C'est bon. Maintenant, cliquez sur Activer. Je vais simplement cliquer sur Revenir au tableau de bord. OK. Nous avons maintenant le réglage. Nous pouvons également tester si notre e-mail fonctionne correctement ou non. Si nous passons aux outils sur les outils, nous avons ici un test d'e-mail, et ici nous pouvons ajouter notre adresse e-mail et cliquer sur envoyer un e-mail, cela signifie qu' un émetteur a été détecté Cependant, cette adresse e-mail du site fonctionnait auparavant. Voyons si nous recevons un e-mail cette fois. D'accord, je me connecte simplement à mon compte Gmail et je ne vois pas l'e-mail, qui signifie que ce plugin interrompt la fonctionnalité de messagerie de mon site Web. Alors, réglons le problème. Donc, d'abord, je vais passer aux paramètres dans les paramètres ici, je vais devoir définir l'e-mail du bal des finissants. Donc, notre e-mail de bal sera celui-ci. Copiez-le et placez le pmmail ici. Le courrier Prom signifie le courrier électronique que nous envoyons des e-mails depuis ce site Web, puis ici, nous forçons le courrier électronique Prom , le créons, et ici nous pouvons définir le nom. Je garderai le nom par défaut, et je conserverai les données par défaut. Ensuite, dans le courrier, j'ai utilisé le SMTP. OK, ici nous devons ajouter l'hôte SMTP. Nous allons donc obtenir ces informations. Pour obtenir ces informations, je peux simplement aller sur C Panel et voici notre e-mail, et je clique simplement sur Connecter les appareils. OK, nous avons ici toutes les informations. Tout d'abord, nous avons besoin d'un hôte comme hôte, je vais utiliser cette adresse e-mail. Allons ici et ajoutons l'hôte comme adresse e-mail actuelle. Ensuite, pour le chiffrement, sélectionnez SSL, et ici le pot SMTP est 465, hôte SMTP doit être ce serveur sortant Copiez-le et collez-le ici, pas l'adresse e-mail, et le nom d'utilisateur SMTP sera l'e-mail, le nom d'utilisateur et ici le mot de passe du compte e-mail Saviez-vous que lorsque nous créons un compte e-mail, nous créons simplement le mot de passe correspondant à ce mot de passe , puis nous rythmons le mot de passe. OK, l'authentification est activée, puis je clique sur Enregistrer les paramètres Donc, si vous utilisez Google Workspace ou un autre fournisseur de messagerie, il vous suffit de sélectionner l'expéditeur que vous utilisez et de configurer les détails Dans ce cas, nous utilisons le protocole SMTP du serveur, j'ai donc configuré ces informations OK, passons aux outils et voilà que nous avons un problème, actualisez-le. OK, ici, sur l'envoi par e-mail et cliquez sur SendMil, voyons ce qui va se passer Pour une raison quelconque, le site Web ne se charge pas, mais espérons que cela fonctionnera. D'accord, cela indique le succès et voici un message d'avertissement, et pour le moment, ignorons-le. Alors maintenant, nous avons reçu l'e-mail. Si vous suivez la même étape que moi, vous pourrez résoudre avec succès le problème de non-envoi d'e-mail. 24. Créer des pages de politique de confidentialité et de conditions générales: Nous devons maintenant créer la page de politique de confidentialité, également la page des termes et conditions. Pour ce faire, il existe deux méthodes. La première est ooe AI HAG PT vous dit de bloquer les activités de niche et autres que vous faites et laisser l'IA générer votre contenu. Lorsque vous générez le contenu ou la page de confidentialité et la page termes et conditions, vous devez vérifier minutieusement le contenu et l'ajouter au site Web et la méthode suivante consiste à utiliser termes et conditions ou un générateur de politiques de confidentialité Utilisons le générateur de politique de confidentialité et essayons de le créer. Je cherche simplement le générateur de politique de confidentialité sur Google et j'ai ici quelques résultats Je vais me rendre sur ce site Web d' information point par point d'information sur la politique de confidentialité, et ici nous devons suivre l' Tout d'abord, je vais sélectionner la version en tant que site Web. Ensuite, lorsque je continue ici, je dois ajouter l' URL et le nom du site Web. Et j'ajouterai ici que je suis un individu. Si vous êtes une entreprise, vous pouvez ajouter l'entreprise et ajouter ici les informations. Ensuite, vous pouvez entrer dans le pays. Je vais entrer mon pays et cliquer sur l'étape suivante. Et si vous collectez des informations personnelles auprès des utilisateurs, vous pouvez les ajouter ici. Dans ce cas, nous avons un formulaire d'abonnement, ce qui signifie que nous collectons l'adresse e-mail et que nous pouvons également créer un prénom et un nom de famille sur le formulaire de contact. Ensuite, je clique sur l'étape suivante, et ici vous devez mentionner la manière dont d'autres personnes ou visiteurs peuvent vous contacter. Je vais utiliser la méthode comme e-mail et ajouter l'e-mail ici, puis je clique sur l'étape suivante. Et ici, si vous souhaitez utiliser cette politique de confidentialité professionnelle, vous devez payer. Je vais donc cliquer sur Non, je ne veux pas de politique de confidentialité professionnelle et cliquer sur l'étape suivante. Et ici, je dois ajouter l'adresse e-mail, puis nous recevrons le code. Il suffit de l'ajouter à l'adresse e-mail et de cliquer sur générer. C'est bon. Voici la page de politique de confidentialité et à partir de là, nous pouvons copier le texte ou la version HTML, ou vous pouvez copier ce lien et directement sur ce lien. Le meilleur moyen est de créer votre propre page. Faisons-le. Je vais maintenant accéder à notre blog et à toutes les pages. Et ici, je vais cliquer sur la page et titre de cette page sera la politique de confidentialité, puis je cliquerai sur Modifier avec Elementor et j' ouvrirai également la page à propos page afin que je puisse copier le design à partir de là Je vais donc cliquer sur Modifier avec Elementor et le voici. Je vais juste copier cette première partie et venir ici, puis la coller comme ça. Ici, je vais le supprimer. En fait, je vais le dupliquer puis je le supprimerai comme ça, alors je n'ai pas besoin de cette partie et voilà, je le ferai. En fait, je n'ai pas besoin de cette partie non plus, et ici je vais ajouter le texte de la politique de confidentialité, puis copions ces deux blocs-notes, et ici j'ajouterai un éditeur de texte Voici l' éditeur de texte, ajoutez-le simplement. Passons au code et faisons face au code. Et bien, je vais supprimer ce H de la page de politique de confidentialité. Maintenant, si je vais ici, je peux tracer une ligne à gauche et sélectionner le texte. De plus, si je le souhaite, je peux changer la couleur du texte, ainsi que la couleur du lien, mais par défaut, nous avons obtenu toutes ces informations, et voici la page de politique de confidentialité. Une fois que nous l'avons terminé, je peux simplement le publier et si je le consulte, voici notre page de politique de confidentialité. Oui Maintenant, nous devons ajouter ce pied de page, nous devons également générer le terme et la condition C'est assez simple. Vous pouvez utiliser le générateur de termes et conditions sur Google, et ici vous pouvez obtenir term and condition generator.com et vous pouvez suivre l'étape comme nous l'avons fait auparavant et remplir le formulaire, puis vous obtiendrez le code SDML Je ne vais pas faire ça. Maintenant, je vais aller sur Mino dans les menus, ici j'utiliserai des liens importants, et sur les liens importants, et sur les liens importants, j'ajouterai le lien de politique de confidentialité comme celui-ci Je vais maintenant cliquer sur Enregistrer. Alors, si je consulte le site Web, descendons ici. Nous avons le lien vers la politique de confidentialité. Si je clique dessus, je suis redirigé vers notre page de politique de confidentialité. D'accord, nous avons conçu notre blog avec succès. Nous devons maintenant publier des articles de blog, et vous pouvez développer cela en créant plus de catégories et en faisant autre chose. 25. Conclusion du cours et projet final Project: Félicitations pour avoir terminé ce cours. C'est maintenant à vous de mettre en pratique tout ce que vous avez appris. Votre projet de classe consiste à concevoir et à créer un site Web en blocs pour un créneau de votre choix. Voici comment vous pouvez l'aborder étape par étape. Tout d'abord, fixez votre niche. Cela peut être les voyages, la nourriture, les plats à emporter, forme physique, le faible niveau ou tout ce qui vous fascine. La deuxième étape consiste à configurer Wordpres avec Elementor Pro sur une publication et un domaine plus récents La troisième est l'étape, concevoir un nouveau blog, créer une page d'accueil, une page de blog, une mise en page d'article unique et des pages de catégories, et la quatrième étape consiste à ajouter des fonctionnalités, inclure la barre de recherche et à configurer un formulaire d'abonnement pour commencer à collecter des e-mails. L'étape suivante consiste à créer vos pages essentielles sur le contact, politique de confidentialité et les termes et conditions. Testez ensuite votre blog sur mobile, assurez-vous que tout s'affiche correctement sur tous les appareils. Lorsque vous avez terminé, partagez votre projet sur Skillshare Project Gallery Incluez la capture d'écran du blog, une brève description de votre niche et des raisons pour lesquelles vous l'avez choisie. De plus, si disponible, vous pouvez partager un lien en direct vers le blog. J'adorerais voir ce que tu crées. Merci de m'avoir rejoint dans ce cours. Je te verrai la prochaine fois.