Créer une boutique en ligne prête à la production avec Elementor et WooCommerce

1. Intro: Et bienvenue dans un autre super cours sur Wordpress et élémentaire avec moi, Ken Celui-ci est spécial car je vais vous montrer comment créer votre propre site Web de commerce électronique prêt à être produit avec WordPress, Elementor WooCommerce et d'autres outils gratuits ou d'autres plugins gratuits Donc, pas de plugins payants, pas de codage requis. Et si c'est la première fois que vous me voyez, comme je l'ai mentionné, je m'appelle Ken, et je suis graphiste et concepteur Web avec plus de dix ans d' expérience dans l'utilisation de différents outils de conception, dont WordPress. Maintenant, je travaille également en tant que professeur de conception et de développement Web sur Skillshare et ma Au cours des cinq dernières années, j'ai enseigné à des milliers d' étudiants comme vous comment créer des sites Web incroyables à l'aide de WordPress et de son outil de création Drag and Drop le plus populaire, Elementor Elementor est un incroyable constructeur de sites Web par glisser-déposer qui vous permet de créer n'importe quel type de site Web que vous pouvez imaginer sans aucune compétence en codage Et dans ce cours, je vais vous montrer comment utiliser Elementor pour créer une boutique en ligne incroyable que vous pouvez être fier d'une boutique en ligne vous pouvez présenter à vos amis Et si vous voulez une boutique en ligne, vous pouvez la lancer immédiatement après le cours. Mais à qui s'adresse ce cours ? Ce cours est conçu pour les débutants de Wordpress qui souhaitent créer rapidement une boutique en ligne tout apprenant à utiliser les différents outils gratuits, plugins disponibles dans l'écosystème Wordpress. Vous n'êtes qu'un amateur débutant son parcours dans WordPress ou un entrepreneur ou un concepteur Web en herbe qui souhaite apprendre à utiliser Wordpress pour créer tout type de site Web à l'avenir Ce cours va jeter les bases parfaites dont vous avez besoin pour devenir un expert de Wordpress. Comme vous pouvez le constater, il s'agit d'un cours pratique basé sur des projets. Ainsi, à la fin, vous vous retrouverez avec un site Web Wordpress que vous pourrez lancer immédiatement et commencer à générer des revenus. Alors, est-ce que cela ressemble au cours que vous recherchiez ? Si c'est le cas, pourquoi perdons-nous notre temps ? Allons-y et examinons le site Web que vous allez créer tout au long du cours. C'est ce que nous allons faire dans la prochaine leçon. Je te verrai bientôt. 2. Projet de classe: Voyons maintenant le projet de classe, le site Web que vous allez créer tout au long du cours. Nous voici donc sur cette page de destination fictive. Comme vous pouvez le constater, nous avons ce texte multicolore. Nous allons voir comment faire cela en utilisant du CSS personnalisé. Comme vous pouvez le voir, nous avons cette belle section sur les héros avec le bloc de texte, l'image du héros et la belle image de fond. En faisant défiler la page vers le bas, nous avons cette icône qui doit être animée. Si je recharge cette page, permettez-moi de la recharger. Juste comme ça. En faisant défiler l'écran vers le bas, nous avons cette Faire défiler la page vers le bas. Nous reviendrons sur les produits pour les consulter sous peu. Mais nous avons ici une belle section d' appel à l'action. Vous pouvez mettre n'importe quel type d' image ici, ses caractéristiques ou ses points clés, puis un bouton d' appel à l'action. Ensuite, nous avons cet autre bouton d' appel à l'action. J'utilise juste du texte factice partout. Il ne s'agit pas d'un vrai site Web. Voici le site Web que j'ai créé pendant que j'enregistrais le cours. Vous regardez donc ce que vous allez obtenir. Voici une jolie photo simple avec du texte de Lorem Ipsum des liens vers les différentes pages et un formulaire d'inscription à une liste de diffusion Et ici, nous pouvons venir sélectionner un produit, par exemple ce GPU. Laisse-moi juste ouvrir ça. Allons-y. Alors maintenant, il s'agit de la page produit unique, et nous pouvons lire tous les détails à ce sujet. Voici les points clés, les principales caractéristiques de ce GPU et la description plus détaillée du produit ici. Ensuite, ci-dessous, nous avons un produit connexe. Et d'autres produits connexes. Nous allons voir comment faire tout cela. revenant ici, vous pouvez payer immédiatement avec papal, ou si vous souhaitez continuer payer immédiatement avec papal, à faire vos achats, vous pouvez continuer à faire vos achats avant de payer en papier Mais disons que nous sommes prêts à payer, disons à ajouter à la carte, et que maintenant notre produit a été ajouté à la carte. Laissez-moi voir la carte. Il contient plusieurs produits que j'ai ajoutés pour tester le site Web. Supposons maintenant que vous soyez prêt à payer ou que vous puissiez supprimer certains produits que vous ne souhaitez pas acheter. Et cela a été supprimé et vous pouvez annuler. Ensuite, nous pouvons passer à la caisse. Ici, le client doit renseigner ses coordonnées, y compris l'expédition et tout le reste, et voici un résumé du montant qu'il est censé payer , soit environ 3,8 millions d'euros. Ils ont la possibilité de payer via PayPal. Ils peuvent payer par carte de débit ou de crédit. Ils peuvent payer avec Apple Pay ou Google Pay. Et avant de pouvoir effectuer des paiements, ils doivent accepter les termes et conditions. Il y a aussi un autre chèque que j'essaie de payer si j'essaie d' effectuer le paiement Je recevrai ces alertes ici pour me rappeler que je dois remplir toutes ces informations avant pouvoir être autorisée à effectuer le paiement. C'est un bon moyen de vérifier que la personne a fourni les informations dont vous avez besoin. Et maintenant, nous pouvons accéder à la page de la boutique. Je l'avais ouvert. Allons-y. Il vous suffit de cliquer sur la page de la boutique. Et maintenant, voici tous les produits listés. Et si je recherche peut-être un GPU, nous avons cette recherche Ajax qui recherche le produit sans rafraîchir la page Nous pouvons également appuyer sur Entrée pour accéder à la page des résultats de recherche contenant tous les GPU, et nous pouvons sélectionner le GPU que nous voulons Comme vous pouvez le constater, il s'agit d'un site Web complet prêt à accepter les paiements. Le client peut effectivement effectuer un paiement sur ce site Web car nous sommes déjà connectés à PayPal. Si j'effectue un paiement sur ce site Web en ce moment, l'argent sera crédité sur mon compte PayPal. C'est donc le projet sur lequel vous allez travailler tout au long du cours, et une fois que nous aurons terminé, vous aurez un site Web prêt à être mis en ligne. J'espère donc que cela vous a enthousiasmé car je suis très heureuse de vous montrer comment le construire. Donc, sans perdre plus de temps, allons-y et découvrons WBPressHsting, car chaque site Web a besoin d'un Mais qu'est-ce qu'un hébergeur ? 3. Hébergement Web WordPress: Maintenant, pour créer un site Web Webpress que vous pouvez lancer, vous aurez besoin d'un hébergement Web et d'un nom de domaine Mais vous vous demandez peut-être ce qu'est hébergement Web et qu'est-ce qu'un nom de domaine ? Pour vous y aider, j'ai préparé une courte fiche explicative. Alors, on y va. Désormais, chaque site Web que vous visitez est stocké quelque part en ligne sur un serveur toujours disponible sur Internet. C'est pourquoi vous pouvez accéder à un site Web situé aux Pays-Bas, aux États-Unis ou au Mexique, car il est stocké sur un serveur toujours connecté à Internet. Cela signifie donc chaque fois que vous cliquez sur un lien qui vous dirige vers un site Web spécifique, par exemple, free Peek, disons freepek.com Le navigateur a envoyé une demande pour cette page spécifique, et cette page spécifique est accessible via cette adresse ou cette URL. Ainsi, lorsqu'il a envoyé la demande, cette demande a été reçue par le serveur qui stocke le site Web free peak, et le site Web free peak est composé de nombreuses pages Web Mais comme cette page Web est représentée par ce nom de domaine spécifique, ce serveur renverra une réponse contenant la page que vous avez demandée. Ce serveur est donc ce qu'un hébergeur vous fournit. Votre hébergeur met à votre disposition un espace de stockage pour votre site Web et veille à ce que soit accessible celui-ci soit accessible à tous ceux qui souhaitent le visiter. Maintenant, l'autre chose dont vous aurez besoin est un nom de domaine. Freepik.com est un nom de domaine, et ce nom de domaine spécifique est propre Donc, personne d'autre ne peut avoir ce même freepik.com. De même, personne d'autre ne peut avoir votre numéro de téléphone. Votre numéro de téléphone est unique et il est utilisé uniquement pour vous joindre, personne d'autre. Votre site Web doit donc avoir un nom de domaine unique, et les utilisateurs utiliseront ce nom de domaine pour accéder à votre site Web. Alors maintenant, pour y revenir, je suis sur wordpress.org. Ceci est le site officiel de Wordpress. C'est ici que vous pouvez télécharger Wordpress. Si vous souhaitez développer votre site Web hors ligne, vous pouvez installer WordPress dans votre système travailler sans Internet et créer votre site Web. Mais ce qui nous intéresse, c'est la page d'hébergement. Wordpress a une liste d'hébergeurs Web recommandés, et je vous recommande de prendre un moment pour lire cette page. Comme vous pouvez le constater, ils ont trois principaux hébergeurs Web recommandés, Blue Host. Dreamhost et wordpress.com Mais cela ne signifie pas que ce sont les seuls hébergeurs que vous pouvez utiliser pour votre site Web Wordpress. Il existe d'autres hébergeurs qui sont tout aussi bons, sinon meilleurs que ces trois. Ce ne sont donc que des recommandations de Wordpress. Mais vous découvrirez ici en lisant ceci qu'il existe des centaines de milliers d' hébergeurs Web, dont la grande majorité répondent aux exigences minimales de Wordpress. Wordpress a décidé de simplement vous faciliter le travail et a décidé de vous donner les trois meilleurs qu' ils recommandent. Personnellement, j' ai utilisé Bluehost et il y a longtemps, lorsque j'ai commencé à utiliser Wordpress, j'ai essayé wordpress.com, et il ne faut pas confondre wordpress.com avec wordpress.org WordPress.org est la plateforme gérée par la Wordpress Foundation parce que Wordpress est opensource, et wordpress.org existe pour vous fournir le téléchargement de Wordpress et tout ce que vous devez savoir sur Wordpress devez Mais maintenant, en matière d'hébergement, il existe un service dédié appelé wordpress.com. Laisse-moi juste l'ouvrir. Il s'agit d'une plateforme qui vous fournit des outils et un hébergement pour créer votre site Web. C'est comme des semaines. Si vous avez vu Weeks, vous savez que lorsque vous créez un site Web sur Weeks, vous n'avez pas besoin de vous demander où trouver hébergement, car Weeks héberge le site Web pour vous. Ils vous donnent simplement les outils nécessaires pour commencer à créer votre site Web immédiatement. Bien entendu, il a ses limites de la même manière que Wix a ses limites lorsque vous le comparez à l' installation de Wordpress vous-même sur un serveur Lorsque vous installez WordPress sur un serveur quelque part, vous avez plus de contrôle pour faire bien d'autres choses que vous n'avez pas contrôle lorsque vous utilisez un service hébergé tel que wordpress.com Mais bien sûr, c'est un bel endroit que vous pouvez essayer si vous le souhaitez. Maintenant, sur le plan personnel, j'utilise NameCip, en particulier lorsque je ne fais qu'expérimenter quelques idées avant de m' engager à acheter un hébergement Web dédié à cette Et voilà. Maintenant que vous comprenez ce qu'est un hébergeur Web, ce qu'il fait et pourquoi vous en avez besoin, allez-y, procurez-vous l'hébergement Web et le nom de domaine, car vous en aurez besoin avant de passer à l'étape suivante où nous allons installer Web Press via le panneau C. Je te verrai bientôt. 4. Installer WordPress: Maintenant que vous avez acheté votre hébergement Web et le nom de domaine, il est temps d'installer WordPress. Et pour installer WordPress, vous devez vous connecter à votre panneau C. Et le moyen le plus rapide de vous connecter à votre panneau C est de passer par votre compte d'hébergeur. Comme vous pouvez le voir, je suis ici sur le compte de connexion par puce nominative. Je vais donc simplement saisir mes coordonnées, puis me connecter. Pour des raisons de sécurité, on va me demander un code de sécurité. J'utilise une application d'authentification. Ouais Allons-y Allons-y. Alors maintenant, je vais passer directement à la liste d'hébergement. Et je trouverai mon hébergement web ici. Comme vous pouvez le voir, je dois passer au panneau C qui me redirigera vers le panneau C. Et si vous choisissez d'opter pour un service d'hébergement partagé comme moi, votre panneau C ressemblera à celui-ci. Ce n'est peut-être pas identique, mais la plupart des éléments se trouveront sur votre panneau C. Et ce que nous recherchons, c'est la section d' installation des applications Softacul Comme vous pouvez le voir, nous avons Wpress et d'autres CMS en dessous nous avons Wpress et d'autres CMS Je vais donc aller chez Worpress. Et maintenant, si je fais défiler la page vers le bas, je trouverai toutes les installations de Wordpress que j'ai. Comme vous pouvez le constater, la seule installation dont je dispose actuellement est notre site Web de référence. Comme vous pouvez le voir, c'est Mr. MoneyBags.net, et c'est tout. Nous pouvons donc installer une nouvelle instance de Wordpress pour créer un nouveau site Web. Je vais donc vous dire d'installer maintenant, et vous serez confronté à ce formulaire que vous devrez remplir puis installer WordPress. Allons-y et commençons en sélectionnant notre protocole ici. J'aime utiliser le point HDTPsw. Je vais peut-être opter pour un module VFX. Et si je clique à l'extérieur, il vérifiera si j'ai un certificat SSL pour ce nom de domaine. Comme vous pouvez le constater, tout va bien. Si vous n'avez pas de certificat SSL, un message d'erreur s'affichera. Je dois vous dire qu'aucun certificat SSL n'a été trouvé, et les certificats SSL sont généralement gratuits de nos jours. Demandez donc à votre hébergeur de vous fournir votre certificat SSL gratuit. Ensuite, l'URL du site Web sera www.vfxpod.com Si vous ajoutez un nom ici, votre page d'accueil, cette page d'accueil aura un dossier supplémentaire, comme un dossier. Et c'est ce que tu ne veux pas. Vous voulez simplement que votre page d'accueil soit votre nom de domaine de base. N'ajoutez donc rien ici. Donnons ensuite un nom à notre site Web. Je vais lui donner le nom de boutique en ligne. Achetez n'importe quoi chez nous. Oui, laisse-moi m'en tenir à ça. Et ce sont les informations d'identification que vous utiliserez pour vous connecter à votre site Web Wordpress au cas où vous logo et que vous ne voudriez pas vous connecter via le panneau C. Ensuite, nous avons quelques plugins que vous pouvez préinstaller avec votre site Web Wordpress, mais vous n'avez pas à les installer car il existe meilleures alternatives que vous pouvez installer depuis le répertoire des plugins WordPress. Laissons-les donc de côté. Nous pouvons accéder aux options avancées, et ici nous pouvons décider de conserver une sauvegarde de notre site Web. Mais je ne le garde généralement pas parce que je ne l'utilise jamais. J'utilise un plugin dans WordPress pour créer mes sauvegardes et les télécharger ou les envoyer automatiquement sur mon Google Drive chaque semaine. Je vais donc vous montrer comment procéder. Ne t'inquiète pas C'est bon. Ici, vous pouvez décider si vous voulez que votre Wordpress soit mis à jour automatiquement lorsqu'il existe jour automatiquement lorsqu'il existe une nouvelle version de WordPress, ou si vous pouvez choisir de passer à des versions mineures uniquement, je vais simplement laisser cela par défaut. Assurez-vous donc de conserver ces informations d'identification quelque part. Je vais donc simplement ouvrir mon bloc-notes de texte. Je peux le copier et le mettre là, puis copier le mot de passe, Enter, juste là. Vous connaissez déjà votre adresse e-mail d'administrateur, vous pouvez donc l'y mettre directement. Donc, une fois que nous l' avons fait, nous pouvons aller dire installer WordPress. Ne quittez pas cette page tant qu'elle n'est terminée. Et voilà. Toutes nos félicitations. Vous venez d'installer WordPress pour la première fois, si c'est votre première fois. Et maintenant, nous avons deux URL ici. Il s'agit de votre page d'accueil. Donc, si je clique avec le bouton droit de la souris et que je l'ouvre dans un nouvel onglet, comme vous pouvez le voir, voici le nom de domaine, le vôtre sera bien sûr le nom de domaine que vous avez acheté. Et maintenant, voici ce que nous avons. Il s'agit simplement du thème WordPress de base. Et si je reviens ici, nous avons également une URL d'administrateur. Cela nous mènera à la zone d'administration de notre site Web. Je clique donc dessus, comme vous pouvez le voir, cela indique tableau de bord, boutique en ligne. Le nom de notre site Web, boutique en ligne. Et nous y voilà. Nous venons donc d'installer Wordpress. Toutes nos félicitations. C'est une étape importante pour vous si c'est la première fois que vous utilisez Wordpress. Maintenant, dans la leçon suivante, voyons comment installer un thème WordPress. Je te verrai bientôt. 5. Installer un thème: Maintenant que nous avons installé WordPress, il est temps d'installer un thème Wordpress. Allons-y et installons mon thème préféré de tous les temps, et son nom est Astra Je vais donc passer aux thèmes d'apparence et vous remarquerez qu'en 2025, le thème actif est 2025. année dernière, le thème actif, chaque fois que vous avez installé WordPress, était 2024, et l'année précédente, bien sûr, 2023. Maintenant, je vais dire Ajouter un nouveau thème parce que vous ne voulez pas utiliser ces thèmes WordPress par défaut. Et maintenant, comme vous pouvez le voir, nous avons ce thème appelé Astra. Je vais donc installer Astro, et je vais l' activer. Nous y voilà. Comme vous pouvez le voir ici, ils nous disent que nous pouvons commencer avec leurs modèles de démarrage, mais je vais simplement ignorer cela. C'est maintenant le thème actif. Je vais sélectionner le thème 2023 et le supprimer. Sélectionnez le thème 2024 et supprimez-le également. Et maintenant je vais laisser 2025 installé, mais pas le thème actif. Ce sera le thème de sauvegarde au cas où ce thème se briserait pour une raison quelconque. Notre site Web aura toujours structure car il aura un thème de secours Il est donc toujours conseillé d' installer un thème de secours Alors maintenant, Astra est le thème actif, et nous sommes maintenant prêts à commencer à créer notre site Web Mais comme nous allons utiliser un Elementor pour créer un site Web, dans la leçon suivante, nous allons voir comment installer un Elementor. Je te verrai bientôt. 6. Installer le plugin Elementor: Il est donc temps pour vous d' installer votre premier plugin WordPress. Allons-y et installons l'élément. Je vais donc passer aux plugins. En fait, permettez-moi de cliquer sur plugins pour accéder aux plugins déjà installés, car Wordpress est toujours livré avec ces deux plugins préinstallés. Je vais donc simplement les sélectionner tous les deux en cochant cette case supérieure Cliquez dessus, puis dites supprimer, appliquer, entrer. Nous n'en avons pas besoin, donc je peux dire « Ajouter un nouveau ». Et maintenant, nous passons au répertoire des plugins Wordpress. Maintenant, il s'agit simplement d'un extrait du répertoire des plug-ins Wordpress. Si j'écris un lien et que j' ouvre le lien dans un nouvel onglet. Comme vous pouvez le voir, nous allons sur wordpress.org, et nous sommes redirigés vers la page des plugins Nous avons également la page thématique, les blocs de pages de modèles et tout ça. C'est ici que Wordpress répertorie plus de 59 000 plugins gratuits que vous pouvez installer Alors maintenant, pour en revenir ici, Wordpress extrait tous ces plugins et les intègre ici pour vous permettre de les installer en un clic au lieu d'aller ici et de les télécharger. Donc, si je clique dessus, comme vous pouvez le voir, je dois le télécharger d' ici, y retourner et le télécharger. Au lieu de cela, je peux simplement installer directement. Cherchons donc Elementor. Créateur de site Web Elementor. Allons-y. Plus de 10 millions d' installations actives par Elementor, donc je dirais « installez maintenant Et comme je n'arrête pas de le dire à mes étudiants, comme vous pouvez le constater, il existe de nombreux autres plugins liés à Elementor développés par développeurs tiers qui ne travaillent pas ou ne travaillent pas avec Elementor Ce sont des sociétés tierces qui créent des plugins qui ajoutent plus de fonctionnalités à la version gratuite d'Elementor Ils vous permettent d' obtenir plus de fonctionnalités, plus d'éléments que vous pouvez utiliser gratuitement sur votre site Web. Alors laissez-moi dire activer. Et, bien entendu, nous verrons comment utiliser certains d'entre eux. Je vais dire activer. Et maintenant Elementor est activé. Il y a quelque temps, un assistant apparaissait toujours chaque fois que vous installiez un Elementor pour la première fois Je ne sais pas pourquoi cela n'a pas été abordé. Juste au cas où ça arriverait, suffit de passer par ce magicien. Maintenant que vous avez installé Elementor, comme vous pouvez le voir, nous avons ces modèles et un lamenter Ils n'étaient pas là avant d'installer un lamenter car ce sont des éléments du menu Elementor Ils vous permettent de définir des paramètres et modifier ce que vous voulez dans un lamenter pour qu'il fonctionne pour vous Mais je ne modifie jamais ces paramètres. Je continue simplement à créer mes sites Web. Maintenant qu' Elementor est installé, il est répertorié comme le seul plugin installé, car n'oubliez pas que nous avons supprimé les deux autres Nous allons installer d'autres plugins ici au fur et à mesure que nous construisons notre site Web, et voici comment installer un plugin WordPress. Dans la leçon suivante, examinons donc l'interface utilisateur d' Elementor, car je veux vous familiariser avec la façon de naviguer dans l'éditeur élémentaire Je te verrai donc bientôt. 7. Interface utilisateur Elementor: Il est temps de regarder l'interface utilisateur d' Elementor. Et pour ce faire, naviguons vers les pages. Voici toutes nos pages Web. Comme vous pouvez le constater, lorsque nous avons installé Worps, celui-ci était fourni avec deux exemples de pages, un brouillon, une politique de confidentialité et un exemple de page Nous pouvons utiliser cette page pour examiner l'éditeur d'éléments. Je vais donc dire modifier. Et ne t'inquiète pas. Pour le moment, nous sommes juste en train de regarder l'éditeur. Ne vous inquiétez pas de la création d' une page Web et de tout ça. Je vais vous montrer comment faire. Laisse-moi juste fermer ça. Qu'est-ce que c'est ? Clôturons également ceci et cela. Ed, nous y voilà. C'est donc un peu différent de ce que nous avions vu dans mon cours précédent, dans mon cours précédent. C'est toujours la même interface utilisateur. Dans le cours précédent, nous n'avions pas cet assistant ici, qui semble faire une liste des choses que nous pouvons faire très rapidement, mais nous n'allons pas le faire parce que nous allons faire toutes ces choses manuellement. Alors laisse-moi clore ça. Bien, c'est donc une liste de contrôle Vous pouvez y accéder d'ici. J'ai compris. Maintenant, la première chose que vous remarquerez est cette structure. Auparavant, il s'appelait le navigateur. Maintenant, cela s'appelle la structure, et cela vous donne juste un aperçu de la structure de la page. Donc, si nous avons beaucoup de contenu ici et que nous voulons simplement avoir une vue d'ensemble de la page, cela nous aidera à voir tout ce qui existe sur la page. Et c'est également utile pour nous aider à accéder très rapidement à des parties spécifiques de la page. Par exemple, si je clique dessus avec le bouton droit de la souris et que je le duplique plusieurs fois, comme vous pouvez le voir, il se duplique également ici dans la structure en temps réel, cliquez avec le bouton droit sur Maintenant, je peux développer cela. OK, développons le premier pour montrer ce qu'il y a à l'intérieur. Nous avons donc le contenant, qui est le contenant rose. Nous avons l'éditeur de texte, qui est un élément différent. Maintenant, si je sélectionne le conteneur, cela devient Modifier le conteneur. Si je sélectionne un éditeur de texte, cela devient un éditeur de texte. En d'autres termes, quel que soit l'élément que vous avez sélectionné activement ici sur la page, ses paramètres apparaîtront ici et vous pourrez modifier tous ces paramètres Donc, si je sélectionne ce troisième conteneur, je pense que, comme vous pouvez le voir dans la structure, nous avons sélectionné le troisième conteneur. Le même cas s'applique à tout ce qui se trouve dans l'éditeur de texte. Il sélectionne l'éditeur de texte, et ici nous pouvons modifier les paramètres de l'élément spécifique actuellement sélectionné ici Maintenant, pour presque tous les éditeurs, à quelques exceptions près, vous aurez toujours ces trois onglets. Il y a l' onglet de contenu, l'onglet de style et l' onglet avancé. Chaque élément. Donc, si je sélectionne un conteneur au lieu d'un élément d' éditeur de texte, conteneur, comme vous pouvez le voir, comporte également trois onglets. Mais maintenant, voici l' onglet de mise en page au lieu de l'onglet de contenu. Ici, dans l'onglet de contenu, c'est ici que nous ajoutons le contenu que nous voulons ajouter. Par exemple, à quel type de contenu s'attend un éditeur de texte ? C'est un texto. Nous pouvons donc ajouter ici le texte que nous voulons. C'est exactement ce que nous voulons. Et au fur et à mesure que nous tapons, cela se passe ici en temps réel, comme vous pouvez le constater. Maintenant, si je veux ajouter un élément différent, pas un éditeur de texte, il me suffit de cliquer sur le bouton de cet élément publicitaire ajouter différents types d'éléments. Permettez-moi donc maintenant de les supprimer tous. Permettez-moi simplement d'écrire « cliquer et supprimer » ou simplement de passer le curseur sur l'un d'entre eux et de le supprimer Il ne nous reste plus que ce single. Permettez-moi de sélectionner l'élément de l'éditeur de texte et de le supprimer Je vais cliquer dessus avec le bouton droit de la souris et le supprimer. Il ne nous reste plus que le conteneur. Si vous souhaitez ajouter quelque chose au conteneur, nous pouvons cliquer sur cet élément plus ou sur cet élément d'ajout. Alors laissez-moi simplement cliquer dessus. Il révélera tous les éléments à notre disposition. Maintenant, si je réduis mets en page de base tous ces panneaux, vous remarquerez que ce sont des panneaux contenant différents types d'éléments que nous pouvons glisser-déposer ici pour concevoir notre site Web. Mais certains d'entre eux sont dans la version pro d'Elementor, ne pouvons donc pas les utiliser. S'il n'est pas utilisable, il possède ce petit verrou en haut à droite. S'il est utilisable, s'il est gratuit, je ne l'aurai pas. Nous avons donc déjà vu l'éditeur de texte. Maintenant, si je réduis la base, nous pouvons examiner la mise en page. Comme vous pouvez le constater, nous avons un conteneur et une grille. Je préfère travailler avec des conteneurs, et vous allez voir pourquoi. Nous utiliserons des conteneurs tout au long du cours. Donc, si je fais glisser un conteneur ici dans cette boîte, il passe juste en dessous du premier conteneur. Et si j'appuie sur Ctrl I, je peux faire apparaître la structure pour voir la structure actuelle. Si je l'élargis, il n'y a rien dedans parce que nous n' y avons rien mis. Permettez-moi donc de le supprimer. Nous pouvons travailler avec celui-ci seul car il est également vide. Maintenant, puisque nous allons travailler avec des conteneurs, ne vous inquiétez pas, je vais vous expliquer comment fonctionnent les conteneurs, mais laissez-moi résumer cela. Voyons maintenant comment ajouter un autre élément. Vous avez déjà vu l'éditeur de texte. Si je le dépose là-dedans, tu peux ajouter ton texte ici. Si vous souhaitez modifier la couleur ou l'apparence du style, c'est à ce moment-là que vous passez au style. Par exemple, nous ne le voulons pas sur la gauche. Nous le voulons au milieu. Je vais donc sélectionner l'alignement central, et maintenant il est aligné au centre. Il s'agit des exigences de base de tout éditeur texte que tout éditeur de texte devrait avoir. Si nous passons à l'avance, Oh, nous pouvons également changer de couleur. Donc, pour le moment, c'est gris. Nous pouvons le changer en rouge. Donc, si nous allons avancer, c'est là que nous obtiendrons des paramètres tels que les marges, les paramètres de mise en page. Donc, si je réduis la mise en page, nous avons de nombreux groupes de paramètres. Avec la mise en page, nous obtenons les marges et le rembourrage et nous alignons l'élément lui-même, ainsi que l'ordre et la taille Toutes ces choses, nous allons voir comment les utiliser. En revenant ici pour ajouter un autre élément, ajoutons un élément d'image. Quel type de contenu un élément d'image attend-il d'une image ? Donc, sous l'onglet de contenu, nous nous attendrons à une image au lieu d'un texte. Sélectionnez donc l'élément d'image et les modifications pour modifier l'image. Nous pouvons maintenant sélectionner une image dans notre bibliothèque. Nous pouvons accéder à la médiathèque si nous avons déjà téléchargé des images, ou si ce n'est pas le cas, nous pouvons télécharger des images et sélectionner des fichiers depuis notre ordinateur. Je vais donc double-cliquer dessus à titre d'exemple. Et maintenant, nous y voilà. Il est donc déjà présélectionné, je dirais sélectionner. Et maintenant, l'image apparaît ici. Et nous pouvons continuer à le styliser. Nous pouvons lui donner une largeur maximale de peut-être 100 %. Nous pouvons lui donner une hauteur de 100 % au lieu de 500 pixels. Nous pouvons augmenter la largeur manuellement. Maintenant que nous avons défini la largeur maximale, elle passe à 100 % et nous verrons bien d'autres choses encore comment faire. Donc, petit récapitulatif. Maintenant, si je réduis tous ces autres, comme vous pouvez le voir, nous avons également cet onglet général qui fournit des éléments généraux que nous pouvons ajouter, comme un témoignage Et lorsque nous ajoutons tous ces éléments, n'oubliez pas que, comme nous les ajoutons à l'intérieur de ce conteneur, ils se trouvent tous sous le conteneur dans la structure si je le réduis. Mais maintenant, si j'ajoute un autre conteneur, en ajoutant, laissez-moi simplement le réduire. Pour ajouter un autre conteneur ici, nous pouvons accéder au PAS et à la mise en page et revenir ici. Ensuite, nous pouvons choisir Flexbox. Et j'adore utiliser les structures Flexbox. Nous n'allons donc pas utiliser de grilles, nous allons travailler avec Flexbox Et ce ne sont que des structures prédéfinies pour vous aider à configurer rapidement une section à double colonne ou une section à colonne unique, une section à quatre sections, etc. Donc, actuellement, ce que nous avons ici est ce type ou ce type de structure. Si je sélectionne cette double structure, comme vous pouvez le voir, nous avons deux divisions à l'intérieur. Si je sélectionne celui-ci, comme vous pouvez le voir, ce côté est plus long. Il ne s'agit donc que de structures prédéfinies pour nous aider à créer rapidement notre site Web Donc, si je veux ajouter un conteneur ici, je peux simplement le glisser-déposer dedans, et maintenant c'est un conteneur dans un autre conteneur. Et je peux ajouter un élément comme, disons, link in bio minimalist, et c'est parti. Il s'agit donc d'un élément entier que nous pouvons modifier et modifier. Donc, en gros, c'est comme ça qu'on ajoute des éléments. La prochaine chose que je veux que nous examinions est de savoir quels sont ces paramètres. Donc, si nous voulons accéder au tableau de bord, nous pouvons passer à Wordpress, mais il existe d'autres paramètres très importants. Vous vous souvenez que lorsque j'ai voulu dupliquer le conteneur, j'ai dû simplement cliquer ici. J'ai dû cliquer avec le bouton droit de la souris et dupliquer. Ce sont deux étapes pour faire une seule chose. Si je veux dupliquer ce conteneur, je dois cliquer dessus avec le bouton droit de la souris et le dupliquer, et il apparaîtra ci-dessous ici. Permettez-moi simplement de le supprimer. Si je veux supprimer, je dois cliquer avec le bouton droit de la souris et supprimer. Mais si je viens ici, je peux indiquer les préférences de l'utilisateur, afficher les options d'édition rapide. Cela signifie que si je survole maintenant l'un de ces éléments, j'aurai des raccourcis rapides vers certaines des opérations les plus courantes que vous souhaitez faire avec un élément, comme le dupliquer Donc, si je viens ici et que je clique dessus, automatiquement, c'est dupliqué. Si je reviens ici et que je le fais à nouveau, il suffit d'un clic pour faire une duplication. Les poignées d'édition ou les options d'édition sont très cruciales. Assurez-vous qu' ils sont activés. Ces autres, vous pouvez également consulter l'historique des choses que vous avez faites et vous pouvez remonter le temps. Vous pouvez revenir à un moment où le site Web avait une certaine apparence. Supposons, par exemple, que vous ayez commis des erreurs et que vous souhaitiez les supprimer pour annuler certaines de vos erreurs. Vous pouvez revenir en arrière pour indiquer l' heure à laquelle nous avons ajouté l'image, et voici à quoi ressemblait l' élément d'image lorsque nous l'avons ajouté. Nous pouvons également revenir au tout début et voici ce que nous avions. Et nous pouvons également revenir au montage commencé, et c'est ce que nous avions lorsque nous avons commencé. Ainsi, vous pouvez accéder rapidement à n'importe quel point de votre session de montage. Mais une fois que vous aurez fermé Elementor et que vous reviendrez, vous ne le trouverez pas C'est juste pour cette session d'édition. Ensuite, jetons un coup d'œil à ceci. Ce sont les paramètres de page que nous allons définir dans le tableau de bord d'administration de WordPress, nous ne les définirons donc pas ici. Si nous voulons prévisualiser notre page, nous devons tout d'abord la publier. Et nous pouvons cliquer ici pour prévisualiser les modifications. Voici à quoi ressemble la page, et voici notre contenu. Donc, si nous apportons des modifications ici, disons, dupliquons ce duplicata droit. Maintenant il le faut. Si je le publie, vous remarquerez qu'il se chargera, se rechargera automatiquement Nous avons maintenant ces deux phrases. Nous pouvons également l'enregistrer en tant que modèle, quel que soit le contenu de la page. Nous pouvons l'enregistrer en tant que modèle et lui donner un nom. Nous verrons donc comment faire toutes ces choses au fil du temps. Je pense qu'à l'heure actuelle, vous savez tout ce que vous devez savoir sur l'interface utilisateur. Lorsque nous modifierons le site Web pour qu'il soit réactif sur différents appareils, comme une tablette, nous serons en mesure de le faire à l'aide de ces outils. Pour l'instant, ce sont les paramètres que vous devez comprendre pour pouvoir utiliser l'interface utilisateur élémentaire et naviguer pendant que vous créez votre page Dans la leçon suivante, nous allons maintenant créer notre page d'accueil, et nous allons commencer par la barre nerveuse. Je te verrai bientôt. 8. Installer le plugin ElementsKit: Vous avez maintenant un aperçu approximatif de l'interface utilisateur élémentaire Il est temps de commencer par la construction même de la page d'accueil et nous allons commencer par la barre nerveuse. Je veux donc accéder à la zone d'administration de WordPress. Je veux également le fermer. Et en fait, je vais séparer cela. Je vais le laisser comme fenêtre à part entière. Maintenant, permettez-moi de passer à autre chose. Et laisse-moi sortir. Laissez-moi partir car ce n' est pas une page que nous allons garder. En fait, je vais tous les sélectionner, les mettre dans la corbeille et les appliquer. Alors maintenant, nous n' avons aucune page Web. Pour créer ano, nous devrons utiliser un autre plugin lié aux éléments appelé elements kit Light Allons-y donc et installons-le. Plugins, ajoutez-en de nouveaux. Et si je tape Elementor, nous y voilà. Il compte plus d'un million d' installations réalisées par Xpeed Studio. Elements Kit Elementor , modules complémentaires et modèles. Installez, activez, et maintenant nous avons le kit d'éclairage Elements. Donc, une fois que nous l'aurons installé, il apparaîtra également ici. Et ce que nous devons faire, c'est aller dans l'en-tête et le pied de page. Et maintenant, nous devons passer par cet assistant de configuration. Donc, pour commencer, choisissons Avancé ici. Et en choisissant Avancé ici, cela signifie simplement que davantage d'éléments seront disponibles dans le front-end pendant que nous modifierons nos pages. Ainsi, par exemple, si vous regardez ces widgets ici, je pense qu'ils seront activés une fois que nous aurons cliqué sur Avancé. Comme vous pouvez le constater, il sera désormais automatiquement disponible dans le front-end. Souvenez-vous de l'éditeur, nous faisions glisser des éléments vers la page depuis la gauche Ces éléments seront mis à notre disposition. Lorsque nous avons sélectionné Avancé, plusieurs de ces éléments qui n'avaient pas été cochés à l'origine l'ont été. Passons maintenant à l'étape suivante. Ici, vous pouvez leur fournir votre e-mail afin qu'ils puissent vous envoyer des offres, des remises et tout ça. Mais je vais simplement cliquer sur Suivant. L'étape suivante consiste à partager des données de diagnostic non sensibles. Je vais donc cliquer sur Étape suivante. Ensuite, enregistrez les modifications. Et nous y voilà. Maintenant, nous pouvons passer à Header et Potter. Et c'est ici que nous allons créer notre en-tête, alias, notre barre de navigation. C'est ce que nous allons faire dans la prochaine leçon. Je te verrai bientôt. 9. Présentation des conteneurs: Nous sommes donc maintenant prêts à commencer à créer l'en-tête. Et n'oubliez pas que nous sommes passés à l'en-tête et au pied de page du kit Elements. Je vais juste dire Ajouter un nouveau, et je vais dire en-tête. Oui, le type est header. Lorsque nous créerons la photo, nous viendrons également ici et dirons Photo, mais pour le moment, c'est l'en-tête, et nous voulons qu'elle soit disponible affichée sur l'ensemble du site. Si vous voulez avoir des conditions sur quelle page l'afficher, vous devrez utiliser la version pro, mais cela me suffit. Ensuite, nous voulons qu'il soit actif. Maintenant, nous pouvons simplement enregistrer les modifications puis revenir et dire modifier le contenu, ou nous pouvons simplement dire modifier le contenu et accéder directement au front-end pour le modifier. Mais je tiens juste à le dire d'abord. Pour vous montrer qu'il est répertorié ici. Et maintenant, si je dis modifier, nous aurons la même fenêtre contextuelle et je peux dire que le contenu d'édition sera redirigé vers le front-end où nous pouvons désormais créer notre en-tête. Et nous y voilà. Alors maintenant, j'ai pensé qu'avant de commencer à créer l'en-tête, je devais expliquer le fonctionnement des conteneurs. Nous verrons ensuite comment créer l'en-tête dans la leçon suivante. Donc très rapidement, je veux repartir de zéro , sans aucun conteneur ici. Nous avons donc une feuille blanche. Maintenant, si je sélectionne cela, nous aurons Flexbox, et je voudrais commencer par cette colonne de direction Et par direction, nous voulons dire, comme vous pouvez le voir dans la section mise en page, que nous avons une direction ici. Le conteneur peut avoir une disposition horizontale ou verticale, une disposition en ligne inversée ou une disposition en colonne inversée. Cela signifie que quel que soit le contenu qui se trouve à l'intérieur du conteneur, il sera organisé dans la direction que nous avons sélectionnée ici. Donc, si, par exemple, maintenant que nous avons le conteneur ici, si je vais ajouter et ajouter un titre, comme vous pouvez le voir, le titre se trouve à l'intérieur du conteneur. Si je reviens ici encore une fois et que j'ajoute, disons, un bouton, que je reviens ici et que j'ajoute, par exemple, maintenant, allons-y avec ces deux-là. Si je sélectionne le conteneur, dans lequel nous sommes censés définir la direction du contenu à l'intérieur, actuellement, chaque élément est disposé verticalement. Donc, si nous ajoutons un autre élément, comme une image, il sera placé juste en dessous de l'élément le plus bas du groupe. Si je reviens ici, c'est une direction verticale. Mais si je veux que les choses se déroulent de gauche à droite, je vais sélectionner cette option. Et maintenant, comme vous pouvez le voir, nous avons le titre, le bouton et l'image. Et c'est très puissant parce que c'est ce va nous permettre d' atteindre cet objectif, comme vous pouvez le voir, imaginez ici que nous avons deux colonnes, une, deux. Il s'agit de deux colonnes, une colonne pour une image et une colonne pour le bloc de texte. Donc, ce conteneur qui contient le bloc de texte est en fait vertical. Mais le conteneur qui contient le bloc de texte et l' image est horizontal. J'espère que vous comprenez ce point. Revenons maintenant à notre exemple ici. Ce que nous avons à l'intérieur de ce conteneur ne sont que des éléments. Ce ne sont pas des conteneurs. Ce sont des éléments. Il s'agit d'un texte, d'un élément de titre. Il s'agit d'un élément de bouton et d'un élément d'image. Si nous voulons avoir un système de conteneurs complexe comme celui-ci, nous devons utiliser des conteneurs à l' intérieur de conteneurs. Supprimons donc tout ce qui se trouve ici. Je vais simplement le sélectionner et supprimer cette suppression. Il ne nous reste plus qu'un conteneur. Si je vais ici pour plus, je peux y ajouter un contenant. Maintenant, comme vous pouvez le voir, c'est un conteneur à l'intérieur d'un conteneur. Avec ce conteneur, nous pouvons également définir la direction. Mais avant de passer à la direction, nous pouvons dire : mettons un autre conteneur à l'intérieur, mettons un autre conteneur à l'intérieur car en supposant que ce conteneur est celui qui contient tout ce qui se trouve ici. Il doit être divisé en deux, afin que nous puissions ajouter deux autres conteneurs, un. Maintenant, si nous dupliquons cela, permettez-moi de revenir ici, aux préférences utilisateur et de dire «   Afficher les options de modification rapide ». Maintenant, si je le duplique dans un conteneur, laissez-moi le réduire. Nous avons deux conteneurs à l'intérieur ce conteneur qui se trouve à l'intérieur de ce conteneur. Mais ces deux conteneurs sont empilés l'un sur l' autre, comme vous pouvez le voir un, deux, mais nous voulons qu'ils soient côte à côte, un, deux Nous sélectionnons donc un conteneur qui contient ces deux, c'est-à-dire celui-ci, ou nous pouvons aller ici, le sélectionner et changer la direction ici pour dire un, deux, donc c'est horizontal. N'oubliez pas que ce contenant se trouve à l'intérieur de ce conteneur. Maintenant, nous pouvons le faire à 100 % en largeur. D'accord, ne prenons pas d' avance sur nous-mêmes. Comme vous pouvez le voir, à l'intérieur de ces conteneurs, nous pouvons maintenant ajouter un titre. Par exemple, ce titre peut revenir ici et ajouter un éditeur, puis revenir ici et ajouter un bouton lorsque cette ligne rose apparaît. Ensuite, ici, nous pouvons ajouter un élément d'image. Et maintenant, si je publie et prévisualise, nous avons une mise en page de conteneur côte à côte. Il ne s'agissait donc que d'une brève introduction aux conteneurs afin que vous puissiez constater le pouvoir de leur utilisation lors de la mise en page de vos pages. Cela vous donne une grande flexibilité pour créer des designs très complexes. Je pense donc que nous allons terminer cette leçon ici. Nous ne voulons pas que ce soit trop long. Dans la leçon suivante, commençons à utiliser réellement ces conteneurs. Je te verrai donc bientôt. 10. Ajouter un logo: Maintenant que vous comprenez les conteneurs, il est temps de créer notre en-tête. Et la première chose que nous voulons faire est d'ajouter le logo de notre site Web. Alors permettez-moi de clore ceci, de rentrer ici. N'oubliez pas que nous étions en train de modifier notre en-tête, et c'est pourquoi il est écrit en-tête ici. Donc je veux juste continuer et tout supprimer pour que nous puissions repartir de zéro. Maintenant, je veux accéder à notre exemple de site Web ici, afin que nous puissions examiner la structure que nous essayons de créer. Nous avons un logo ici, nous avons la barre de recherche, nous avons les éléments du menu et nous avons un bouton en forme de carte. Mais nous allons commencer par un conteneur de direction. Revenons donc ici, sélectionnons Flexbox et sélectionnons-la Donc, dans ce cas, il ne s'agit pas d'un conteneur. C'est juste pour nous montrer où le contenu sera contenu dans ce conteneur. Il n'y aura aucun contenu ici. Mais nous devons ajouter un conteneur. Je vais donc entrer ici, dire conteneur et l'ajouter juste là. Maintenant, comme vous pouvez le voir sur notre site Web de référence, nous avons cet espace ici à droite et à gauche, qui signifie qu'il y a un conteneur contenant uniquement le contenu du nubar, et que sa largeur n'est pas de 100 %. Et c'est ce que je veux dire. Nous avons donc actuellement ce conteneur extérieur qui contient tout. Je veux que nous le fassions 100 % en largeur. Pas 1 000 entrées. Alors maintenant, il fait 100 % de largeur, le contenant rose extérieur. Et comme nous n'avons pas encore défini la largeur du contenant intérieur, celui-ci occupe également tout l'espace disponible dans le conteneur qui le contient. Nous pouvons donc sélectionner le contenant intérieur et dire que nous voulons qu'il n'occupe que 80 % du contenant extérieur. Mais maintenant, remarquez qu'il est aligné sur la gauche. Nous pouvons donc venir ici. Nous pouvons sélectionner le conteneur extérieur. Actuellement, c' est le conteneur intérieur qui est sélectionné. Je vais donc sélectionner le conteneur extérieur, et c'est un autre point intéressant à propos de la structure. Il vous permet de sélectionner un élément si vous ne parvenez pas à le sélectionner sur la page. Maintenant que j'ai sélectionné le conteneur extérieur, et maintenant que je l'ai sélectionné, je peux venir ici pour aligner les éléments au centre. Quand je clique dessus, regardez ceci, regardez le conteneur intérieur. Si je sélectionne le centre, nous avons aligné tout ce qui se trouve à l'intérieur de ce conteneur extérieur sur le centre. Publions-le. Revenons maintenant à notre image de référence. N'oubliez pas que nous avons dit que nous avions une colonne pour le logo. Nous en avons une pour la barre de recherche, et nous pouvons les séparer pour le moment. Créons donc trois conteneurs à l'intérieur de ce conteneur. Je vais donc dire ajouter. Ensuite, je vais y faire glisser un conteneur. Et pour nous faciliter les choses, je n'aurai pas à revenir en arrière pour copier un autre conteneur. Je peux juste le dupliquer deux fois, un, deux, et maintenant ils sont empilés les uns sur les autres Nous allons donc sélectionner celui qui les contient tous. S'il vous est difficile de le sélectionner, utilisez simplement la structure. Et maintenant, nous voulons organiser tout cela de manière horizontale. Je vais donc suivre cette direction, et maintenant nous avons trois conteneurs. Laissez-moi le publier. Alors maintenant, il va sans dire qu'ici, nous allons mettre un élément d'image, donc je vais faire glisser un élément d'image, et je vais choisir l'image que je souhaite utiliser. Nous n'avions téléchargé qu'une seule image, je vais donc télécharger des fichiers, sélectionner des fichiers. Et comme toujours pour tous mes cours, je vais fournir ce dossier Assets qui contient toutes les images que vous pouvez utiliser comme exemples de produits à suivre dans ce cours. Je les ai préparés pour qu'ils soient très légers en Ko, ils ne mesurent même pas en Mo Et c'est une autre chose que vous devez garder à l'esprit. Veillez à ce que vos images soient aussi claires que possible pour permettre à votre site Web de se charger en premier. Comme vous pouvez le voir, nous avons ici un logo que j'ai préparé pour vous à titre d'exemple. Je vais double-cliquer sur ce logo. Et n'oubliez pas que j'ai dit que vous trouverez ce dossier Assets sous cette vidéo. Il suffit de rechercher le lien sous le lecteur vidéo. Maintenant, il est déjà chargé. Je dirais sélectionner. Et nous y voilà. Notre logo est ajouté. Maintenant, remarquez que le logo est petit ici, nous pouvons donc le faire glisser. Nous pouvons passer le curseur ici et lorsque cette flèche double face apparaît, nous pouvons la faire glisser ou saisir manuellement la taille souhaitée Je veux donc le saisir manuellement. Je vais sélectionner le contenant contenant le logo, et je vais le faire correspondre à 20 % de sa largeur. Ce contenant contenant les trois sera occupé à 20 % par le logo. Peut-être que 30 % peuvent être occupés par les éléments du menu, la barre nerveuse et le bouton, puis par la barre de recherche. Peut-être que nous pouvons le faire à 40 %. Maintenant, laissons-le à 30. Cela peut donc occuper 50 personnes. Je vais le sélectionner et dire 50, sorte que ce soit 50, 30, 20 pour faire 100 % de ce contenant. Et n'oubliez pas que ce conteneur occupe 80 % du conteneur le plus externe Voilà comment ajouter votre logo. Dans la leçon suivante, voyons comment ajouter votre menu nerveux. Ce menu de navigation. Je te verrai donc bientôt. 11. Ajouter un menu de navigation: Il est donc temps d' ajouter le menu Nerve. Alors, comment s'y prendre ? Revenons à notre espace de travail. Nous y voilà. Permettez-moi de le publier avant de passer à autre chose, et prévisualisons les modifications. C'est donc ce que nous avons en ce moment. Rappelez-vous donc que nous avons installé un kit d'éléments. Donc, si je viens ici et que je tape nerf, vous remarquerez que nous avons le menu des nerfs du kit d' éléments, et nous avons aussi le menu des nerfs. Ceci est disponible avec Element of Pro. Mais une chose à propos des modules complémentaires liés aux éléments, tels que Elements Kit, c'est qu'ils nous offrent ces éléments gratuits supplémentaires auxquels nous aurions autrement dû payer pour accéder Je vais donc faire glisser le menu Elements Kit Nerve, et je vais le déposer dedans. Et maintenant, quand on le laisse tomber, c' est toujours l'élément actif. C'est pourquoi il est écrit Modifier le menu nerveux du kit d' éléments car c'est l'élément. Et maintenant, la première option ici est de sélectionner le menu. Nous devons donc sélectionner un menu à afficher car il s'agit essentiellement d'un menu. Et pour afficher un menu, nous devons d'abord le créer dans Wordpress, zone d'administration. Donc, avant d'aller plus loin, permettez-moi de dire publier. Je vais venir ici et je veux quitter Wordpress, mais au lieu de quitter cet éditeur, je veux écrire un lien et ouvrir le lien dans un nouvel onglet, puis je vais prendre ce nouvel onglet et accéder à la zone d'administration. C'est toujours intact. Pour en revenir à la zone d'administration, disons les menus d'apparence. Nous y voilà donc. Nous pouvons créer notre menu ci-dessous. Permettez-moi donc de fermer cette notification. Comme vous pouvez le constater, nous pouvons ajouter des éléments de menu, et les éléments de menu peuvent être des pages. Il peut s'agir de publications comme un article de blog, comme des articles. Il peut s'agir de liens personnalisés. Nous pouvons simplement utiliser des liens directs, catégories de produits ou des catégories d'autres types de contenu. Mais nous voulons des pages comme éléments de menu, ce qui signifie que nous devons créer quelques pages. Donc, pour aller aux pages, au lieu de fermer cet endroit, je vais simplement accéder aux pages, le lien droit sur Ajouter un nouveau et Ouvrir le lien dans un nouvel onglet. Allons-y. Nous pouvons maintenant donner un nom à cette page. Disons contact. Comme vous pouvez le voir, c'est la page que nous avons ici. Nous n'essayons pas de créer de nombreuses pages ici. Il s'agit de vous montrer comment créer une boutique en ligne. Une fois que vous aurez appris comment créer la page d'accueil ou cette page de contact unique, vous pouvez créer une page A nous, une page de politique de confidentialité, page de conditions d'utilisation Vous pouvez créer tous ces types de pages. Créons donc maintenant cette page de contact. Nous n'essayons pas de modifier les paramètres ici pour le moment. Nous voulons simplement le publier. Je vais donc aller de l'avant et le publier. Et maintenant, en rentrant ici, souvenez-vous que nous n'avons jamais quitté cet endroit. Si j'actualise ou recharge cette page, nous avons la page de contact ici, mais elle est dégradée. Nous ne pouvons pas l'utiliser. C'est parce que nous devons créer un menu. Donnons-lui un nom. Laissez-moi juste lui donner le nom de mon menu. Et ensuite, faisons-en le menu principal et créons le menu. Regardez cette zone. Il est maintenant actif car nous avons un menu auquel nous pouvons ajouter des éléments. Contacter, ajouter au menu. Il est ajouté au menu. Enregistrer le menu. Nous y voilà. Alors maintenant, permettez-moi de clore ceci parce que nous en avons fini avec cela. Si je reviens ici, souvenez-vous que nous l'avions ouvert et que nous l'avions publié. Si je recharge la page, si je sélectionne à nouveau l'élément nerveux, menu nerveux du kit d'éléments et que je reviens ici, n'oubliez pas que nous avons créé un menu appelé Mon menu Mon menu. Maintenant que nous l'avons sélectionné, comme vous pouvez le voir, il affiche les éléments de menu qu'il contient, et ce n'est qu'une page. Donc, position horizontale du menu, disons, écrivez pour changer de côté. Laisse-moi clore ça. Il est maintenant positionné sur le côté droit. Publier. Prévisualisons les modifications. Nous y voilà. Voici donc notre page de contact. En revenant ici, nous pouvons créer d'autres pages. Laisse-moi rentrer ici. Créons simplement quelques pages supplémentaires. Passez la souris dessus, puis cliquez avec le bouton droit sur Ajouter un nouveau. Ou au lieu de survoler et de cliquer avec le bouton droit de la souris, vous pouvez simplement survoler et appuyer sur le bouton central de la souris Il s'ouvrira dans un nouvel onglet. Créons donc deux pages. Laisse-moi juste appeler ça chez moi. Publiez, publiez, publiez. Et appelons ça « publier, publier ». Fermez ça, et ça. Et maintenant, rechargeons cette page. Et ajoutons le menu d'accueil et le menu « À propos ». Permettez-moi de les ramener à la maison et de les mettre juste là juste pour m'assurer que nous les organisons correctement, enregistrez le menu. Maintenant, pour revenir au premier plan, ne me reste plus qu'à cliquer sur Aperçu des modifications. Cette page sera rechargée avec les nouvelles modifications. Nous pouvons également simplement cliquer avec le bouton droit de la souris et recharger cette page afin que nous puissions voir les nouveaux éléments de menu dans également voir les nouveaux éléments de menu dans notre éditeur. Nous y voilà donc. La prochaine chose que je veux faire au fur et à mesure que nous finaliserons ici est de changer les couleurs Allons-y avec ces couleurs de boutique. Maintenant, vous remarquerez ici que j'ai cet outil, cette extension chromée appelée RGB Color Picker. Je peux le sélectionner. Tu peux l'installer. C'est gratuit. Alors je peux dire « choisissez la couleur ». Et si je passe la souris dessus, je peux choisir la couleur d' un pixel. Allons-y. Je sélectionne ce tapis, sélectionne ce menu nerveux. Ensuite, comme il s'agit de l'élément actif, je vais passer au style, à la réduction de l' emballage du menu, à l'élément de menu, car ce sont des éléments de menu Comme vous pouvez le voir dans la section Style des éléments de menu, couleur du texte de l'élément , il est actuellement noir, et au survol, il est gris. C'est pourquoi il devient gris lorsque nous survolons il est gris. C'est pourquoi le pointeur Survolez, nous voulons que ce soit cette couleur. Alors maintenant, lorsque je survole, la couleur de la marque est la même que celle du logo de notre marque Et lorsque la page est active, elle est censée être également de cette couleur. Si je publie, prévisualise les modifications, maintenant, si je passe le curseur sur l'un de ces éléments de menu, il change de couleur Et si la page active est la page À propos, si je sélectionne À propos comme vous pouvez le voir, c'est la page A, et elle est active, donc elle est orange. Voici donc comment créer le menu Nerve. Dans la leçon suivante, nous verrons comment ajouter un favicon, car actuellement, comme vous pouvez le constater, nous n'avons que cet espace réservé aux icônes générique Si vous regardez le favicon des Name chips, ils ont le logo Alors, comment ajouter cela ? Voyons comment procéder. Dans la leçon suivante. À bientôt. 12. Ajouter une icône: Il est maintenant temps d'ajouter un fabricon à notre site Web. Il existe deux manières d'accéder à l'endroit où vous pouvez configurer le fabCon Une solution consiste à passer à l'apparence, personnaliser et nous serons redirigés vers l'éditeur frontal du thème, Astra C'est ici que vous définissez les paramètres Astra. Une autre façon d'y arriver est que si je suis déjà dans le front-end, je peux simplement passer à la personnalisation. Nous serons donc emmenés au même endroit. Maintenant, pour terminer, je vais revenir ici parce que je vais revenir ici parce avions déjà fait et nous allons passer à l'identité du site, sélectionner l'icône du site. Il existe donc différentes manières de se rendre au même endroit. Je vais donc aller dans le dossier Assets, et j'avais déjà créé un favicon pour vous Et je pense que j' aurais dû faire l'inverse de cette couleur parce que ce bleu est foncé. Elle aurait dû être blanche et la ligne bleue. Mais pas de problème. Allons-y. Nous y voilà. Sélectionnez donc Et maintenant, comme vous pouvez le voir, nous l'avons définie comme icône du site. Maintenant, laissez-moi voir si je peux en sélectionner un autre parce que cela ne me plaît pas. Laissez-moi voir si je peux trouver. Permettez-moi d'utiliser cette chaussure comme tissu pour le moment Mais le plus important est que vous compreniez comment ajouter le favicon Je vais donc sélectionner cette chaussure comme favicon parce qu'elle est plus lumineuse et je vais dire « sélectionner ». Maintenant, regarde ça. Maintenant, comme vous pouvez le voir, c'est suffisamment brillant pour être vu en train de publier. Désormais, lorsque vous êtes dans l'éditeur élémentaire, même si vous actualisez la page, le fabricon ne sera pas visible car vous êtes en mode édition Mais si vous prévisualisez, vous n'êtes pas en mode édition, le fabricon apparaîtra car il s' agit d'une véritable page d'aperçu Voici donc comment définir un fabricon pour votre site Web WordPress La leçon suivante, voyons comment indiquer à WordPress quelle page est notre page d'accueil, car lorsque les gens cliquent sur ce logo, ce logo est censé nous amener sur cette page d'accueil, la page d'accueil de base, en fait, j'ai oublié de le faire. Si cette option est sélectionnée, je vais aller sur Link, dire URL personnalisée et coller notre URL de base. Ce sera YourBSRL, votre site web.com et dites «   publish », cela Je vais juste y aller. Et maintenant, si je passe le curseur dessus, vous pouvez voir qu'il est cliquable Si je clique dessus, ça devrait nous ramener à la maison. Il s'agit de la page actuellement définie comme page d'accueil, mais ce n'est pas notre page d'accueil. Il s'agit d'une grille de billets de blog ou d'articles qui auraient été répertoriés ici. Alors, comment configurer la page d'accueil ? Nous verrons cela dans la prochaine leçon. 13. Définir la page d'accueil: Il est donc temps de définir notre page d'accueil comme page d'accueil, car pour le moment, si je vais à la page d'accueil, souvenez-vous qu'il s'agit d'une page que nous avons créée. Si vous regardez l'URL, il s'agira de notre barre oblique HOME de notre domaine .com , car il s'agit d'une page que nous avons créée N'oubliez pas, des pages. Nous avons une page d'accueil, mais nous voulons que les paramètres soient les suivants : si l' utilisateur accède à cette page, elle ne doit pas contenir de barre oblique . Alors, comment régler cela ? Pour y revenir, je vais passer à la lecture des paramètres. Et maintenant, votre page d'accueil affiche une page statique, et la page statique est la page d'accueil. Enregistrez les modifications. Maintenant, revenons à la page d'accueil, et maintenant, si je sélectionne Accueil, comme vous pouvez le voir maintenant, si quelqu' un trouve vifxpd.com sous forme de lien et clique dessus, il sera redirigé vers cette page en particulier, qui est vifxpt.com ou main.com , qui est vifxpt.com ou main.com Maintenant, bien sûr, à partir de la prochaine leçon, nous allons réellement commencer à le construire. Et n'oubliez pas que nous avions une section consacrée aux héros, nous allons commencer par la section des héros. Voilà comment créer une page spécifique, la page d'accueil, car nous pouvons définir n'importe de ces pages comme page d'accueil. Et une autre chose que j'ai besoin que nous fassions en ce moment pendant que nous travaillons sur le site Web est de décourager les moteurs de recherche d' indexer ce Cela signifie simplement que les moteurs de recherche tels Google et Bing n' enverront pas leurs robots pour explorer et indexer ce site Web parce qu'il est en construction, car moteurs de recherche envoient généralement les moteurs de recherche envoient généralement de petits bouts de code sur Internet pour rechercher nouveaux sites Web afin d'indexer et d'organiser le site Web dans leur base de données et pouvoir l'afficher dans les résultats de recherche. Mais nous ne sommes pas prêts à ce que Google et Ben sachent que notre site Web existe, car cela va affecter notre référencement naturel en ce moment. Nous voulons donc décourager les moteurs de recherche d' indexer notre site Cela indique aux araignées de Google et aux robots automatisés de Google  : « Hé, ne regardez même pas ce site Web pour le moment Ne jetez même pas un œil à ce site Web pour le moment. N'enregistrez aucune de ses pages pour les montrer aux internautes lorsqu'ils recherchent quelque chose de similaire à ce que nous faisons. Quittez simplement ce site Web pour le moment. Une fois que nous aurons terminé de créer le site Web, nous viendrons vérifier cela. Enregistrez donc les modifications. Génial Maintenant que nous avons configuré notre page d'accueil, il est temps de commencer à la créer. Et bien sûr, nous allons commencer par la section des héros. Voici notre page d'accueil. Si je passe à notre exemple ou à notre site Web de référence, c'est la section des héros. Voyons donc comment créer quelque chose comme ça. Je te verrai bientôt. 14. Bloc de texte principal: Il est donc temps de créer la section héros et nous allons commencer par le bloc de texte. Donc, pour revenir à notre site Web, le moment, nous pouvons simplement cliquer sur Modifier avec Elementor Ce que nous pouvons faire, c'est accéder à la page d'édition car ce n'est actuellement pas une page Elementor C'est juste une page Wordpress Astra. Nous pouvons cliquer sur Modifier avec Elementor, et maintenant cela en fera une page Elementor Mais avant cela, nous pouvons venir ici. Nous devons venir ici et changer le modèle en élément pleine largeur. Nous voulons que ce soit une page pleine largeur car remarquez ceci maintenant, sont les paramètres de Worpes. Nous devons également accéder aux paramètres de l'Astra. N'oubliez pas que notre thème est Astra. Donc, ici, la disposition du conteneur, je vais utiliser la pleine largeur. Ne modifiez aucune de ces options, car elles ne s'appliquent que lorsque la mise en page est définie sur étroite ou normale, étroite ou normale, mais que nous avons sélectionné la pleine largeur. Alors ignorez cela. Développez ceci. Nous ne voulons pas de barre latérale, donc pas de barre latérale. Ignorez cela car cela ne s'applique que lorsque la mise en page est réglée sur normal. Nous n'avons sélectionné aucune barre latérale. Désactivez les éléments. Cela nous permettra de désactiver certains des éléments que nous avons vus lorsque cette page était encore une page WordPress Astra, et non une page élémentaire Permettez-moi de vous montrer un exemple avant d'en faire une page élémentaire Je vais juste laisser ça là et revenir sur ces pages. Si je sélectionne Afficher, je peux créer un lien et ouvrir le lien dans un nouvel onglet. Nous avons maintenant ce A et ce pied de page Astra. En revenant ici, nous pouvons désactiver l'en-tête, qui est ceci, et le pied de page, qui est ceci Supprimons également la zone de bannière. Puis sauvegardez. Maintenant, ce sont les paramètres de la page d'accueil. Si je modifie cette page, je veux juste vous montrer ce que nous venons de faire en revenant ici et en désactivant des éléments. Si nous désactivons l' en-tête, que nous l'enregistrons et que nous affichons la page, cela n'attendra pas. Que se passe-t-il ici ? Désactive l'en-tête, désactive la zone de bannière. Faisons-le également. Voyons voir. Oh, nous devons d'abord faire un élément de pleine largeur, mais avant de le modifier , prévisualisons-le. accord, oui. Cela prend donc effet. Nous avons désactivé la zone de bannière, l'en-tête. Et maintenant, comme vous pouvez le voir, nous avons toujours le pied de page. Si nous venons ici et disons désactiver le pied de page, que nous l'enregistrons et que nous prévisualisons à nouveau les modifications Maintenant, tout est terminé, prêt à être transformé en page élémentaire, mais ce n'est pas encore une page élémentaire car nous ne l'avons pas modifiée avec Elemental, mais c' est la Fermez toutes les instances de page À propos. Maintenant, pour y revenir, j'espère que vous comprenez ce que nous faisions avec ça. Maintenant qu'elle est enregistrée, nous pouvons la transformer en page élémentaire Et nous y voilà. Alors maintenant, souvenez-vous que nous avons créé l' en-tête ou la barre nerveuse un éditeur distinct dans une autre partie à l'aide d' Elements Kit Light. Alors maintenant, il n'est pas modifiable. Nous ne pouvons pas le modifier ici. Mais ce que nous pouvons faire, c'est ajouter une boîte flexible afin de commencer à créer la section des héros C'est tout ce dont nous avons besoin de toute façon. Permettez-moi donc d'ajouter ce conteneur de direction. Et comme d'habitude, je veux y ajouter un autre contenant . Et souvenez-vous de ce que nous avons fait avec l'en-tête. Je veux que cela ait une largeur de 100 %. Donc, avec le pourcentage, 100 et maintenant il occupe 100 %, et le contenant intérieur devrait occuper 80 % de ce contenant extérieur. C'est sur la gauche, alors revenons au contenant extérieur et alignons tout ce qui se trouve à l'intérieur au centre. Cela signifie que notre contenu occupera également le même espace que l'en-tête en largeur. Publions-le. Et comme d'habitude, ajoutons maintenant un autre récipient à l'intérieur. Et dupliquez-le. Maintenant, nous en avons deux. Maintenant, choisissons le héros extérieur et changeons de direction, et nous avons maintenant une section de héros à double colonne. Ici, nous pouvons ajouter notre image, l' image du héros, et nous pouvons passer à la sélection. Oh, attendez, oui, nous pouvons continuer à sélectionner l'image du héros. C'était censé être une leçon séparée. Alors laisse-moi annuler ça. Permettez-moi de venir ici et d'ajouter le bloc de texte. Donc, un titre, revenons ici, ajoutons un éditeur de texte, déposez-le juste en dessous, redescendons ici et ajoutons un bouton. Publiez-le. Prévisualisons les modifications, et c'est ce que nous avons. La première chose à faire est donc de sélectionner le texte. Et bien sûr, vous allez taper votre propre texte ici, mais je vais copier ce que j'ai ici. Donc, trois modèles D gratuits. Copiez ça. Tant que cette option est sélectionnée, je vais la coller ici. Ne collez pas le texte directement ici. Bien que cela soit possible, il sera fourni avec n'importe quel préformatage, quel que soit l' endroit où vous l'avez copié se peut donc que vous ne vouliez pas qu'il soit préformaté à l' endroit où vous l'avez copié Alors fais-le. Supprimez-le. Vous voulez donc le coller ici, et cela vous permettra d'appliquer nouveau style comme bon vous semble. Je vais donc en rester là. Je vais sélectionner ceci. Je viens de me rendre au JAGPT et j'ai demandé à ChagPT de rédiger un texte Il s'agissait d'un autre site Web. C'est pourquoi vous le voyez contenir des fichiers numériques. Je créais un site de téléchargement numérique. Mais nous travaillons sur un site Web de produit physique. Je vais sélectionner ce texte, double-cliquer dessus et le coller dedans. Maintenant, il ne s'affiche pas car si je le sélectionne, vous verrez le changement prendre effet. Je ne sais pas quel est le problème, mais si je le publie, que je l' actualise, je peux le sélectionner, passer au style, au style d'édition , à la typographie, nous pouvons le remplacer par Montserrat, ce Et nous pouvons changer le poids à 900 en noir, ce qui est très épais. Ensuite, nous pouvons également augmenter la taille à notre guise, peut-être jusqu'à cet endroit. Et je veux que ce soit pour lire quelque chose comme Par produits incroyables à des prix abordables. Ou tout simplement des produits incroyables à des prix abordables et revenez au style. Typographie, nous pouvons réduire la hauteur du trait. Peut-être que jusqu'à cet endroit, nous pouvons cliquer à l'extérieur, sélectionner la couleur du texte, le rendre noir comme ça. Vous pouvez également le sélectionner et modifier le style, comme la typographie Faisons-en également Montserrat. Montserrat. Si je sélectionne ce bouton, je peux modifier le texte, tous les produits, tous les produits. Et nous pouvons changer la couleur de fond, mais je veux utiliser les couleurs de la marque. Je vais donc accéder à mon sélecteur de couleur ici et choisir la couleur, sélectionner les pixels bleus, copier, sélectionner ceci, passer au style, au bouton, au type d'arrière-plan Couleur. Je vais le coller dedans, et maintenant il prend la couleur de notre marque. Très sympa. Maintenant, j'aime que mes boutons soient plus rembourrés à gauche et à droite, alors je vais casser ce rembourrage, lui donner un rembourrage gauche de 50, un rembourrage droit de 50 rembourrage droit Disons 15 ici. Et ici 15. Et j'aime aussi lui donner un rayon de bordure rond, donc 50. Ou on peut simplement le laisser à dix heures. Dix, c'est bien, et je vais vous donner un aperçu. Nous y voilà. Nous pouvons également fabriquer cette couleur. Je vais sélectionner ce bleu, copier, contrôler C, pendant que c'est sélectionné, sélectionner ceci, passer au style, coller la couleur du texte. Oui, faisons en sorte que ce soit bleu. Maintenant, vous vous demandez peut-être comment j'ai fait ce rouge ? J'ai utilisé ce que nous appelons le CSS. Je voulais te montrer comment faire plus tard. Nous aurons une section sur le CSS, le CSS personnalisé, mais nous pouvons l'ajouter ici juste pour avoir quelque chose qui soit beau. Des produits incroyables à un prix abordable. Abordable. Maintenant, si vous voulez rendre le mot abordable, d'une couleur différente, nous pouvons utiliser un élément HTML appelé span. Je vais donc avoir ces deux crochets, puis taper span en minuscules Span. Et puis, à la fin, j'aurai une autre période. Mais cette fois, avant le mot span, il doit y avoir une barre oblique, puis un span Cela indique à Elementor et Wordpress : « Hé, je veux faire quelque chose avec ce texte spécifique C'est comme un sélecteur. C'est comme si vous sélectionniez, c'est comme si vous sélectionniez ce mot spécifique et que vous disiez à Wordpress que je veux faire quelque chose avec ce bout de texte que j'ai sélectionné. Donc, si nous passons au premier crochet et que nous disons que le style est égal, nous pouvons utiliser des guillemets doubles. Ensuite, l'aspect du texte que nous voulons modifier est la couleur. Nous pouvons changer d'autres choses que la couleur, mais nous voulons changer la couleur pour le moment. Je vais donc lui donner une chronique. Dans un espace, je vais sélectionner cette couleur. Je vais choisir ma couleur et passer à la couleur copiée. Et si je viens ici après la colonne, colle dedans, maintenant elle prendra cette couleur. Nous disons donc à Wordpress et à Element : Hé, je veux faire quelque chose avec ce texte entouré par l'élément span, aussi simple que cela. Et que voulons-nous faire ? Nous voulons définir une couleur spécifique. Nous l'avons donc défini en lui donnant un style égal à la couleur que nous voulons y publier. Tout tourne donc autour du bloc de texte pour le moment. Nous reviendrons peut-être plus tard pour l'affiner. Nous reviendrons sur différentes parties pour l'affiner, mais c' est ce que nous avons. Prévisualisons les modifications, et j'adore. Nous y voilà. Dans la leçon suivante, voyons comment travailler sur ces boutons, car comme vous pouvez le constater, j'en ai deux. Je te verrai bientôt. 15. Boutons héros: Il est donc temps d'ajouter deux boutons à notre section héros. Alors, comment y suis je parvenue ? Comme vous pouvez déjà le deviner, il s' agit d'un conteneur qui les contient tous les deux, et c'est un conteneur orienté horizontalement. Pour en revenir à notre travail, n'avons pour l' instant qu' un seul bouton. Donc, si je vais ici, dans un conteneur, dépose le conteneur dedans, je peux le sélectionner et le déposer dedans. Maintenant, je peux le dupliquer, sélectionner le conteneur qui les contient. Puis passez à l'horizontale. Avec cette option sélectionnée, en fait, oui, avec cette option sélectionnée, je peux passer au style, couleur, et passons au sélecteur de couleur ici, choisissez la couleur F 15 a 24, collez-le dedans. Nous y voilà. Publier. Maintenant, il y a bien d'autres choses que vous pouvez faire avec un bouton. Par exemple, si nous disons « on Hover », nous pouvons lui donner une animation Alors survolez l'animation, on peut dire que j'adore Bob. Bob. Cela donne juste l'impression qu'il flotte dans les airs. Celui-ci n'en a pas. Donc, si je le sélectionne, passe aux effets de survol, je peux aussi le faire Bob Publier. C'est donc tout pour le moment. Lorsque vous travaillez avec des boutons, vous pouvez jouer avec tous ces autres paramètres, qui sont simples, vous pouvez jouer avec tous ces autres paramètres et voir à quoi ils servent. Permettez-moi donc de le publier et de prévisualiser les modifications, et c'est parti. Dans la leçon suivante, voyons comment ajouter l'image du héros. Je te verrai bientôt. 16. Image de héros: Il est donc temps d'ajouter l'image de la section héros. Revenons à notre éditeur. Et comme nous l'avions fait précédemment, faisons maintenant glisser l' image là-dedans. Et allons sélectionner notre image sur l'ordinateur. Je vais donc aller sur Télécharger des fichiers, puis sur notre dossier, et voici l' image de la section héros que j'avais sélectionnée. Sélectionnez. Et nous y voilà. Si je publie et prévisualise les modifications, vous remarquerez quelque chose. Donc, si je passe à notre site Web de référence, vous remarquerez qu'ils sont correctement alignés verticalement, de sorte que ce bloc se trouve quelque part au milieu de la hauteur de celui-ci. Mais sur notre site Web, cela semble être élevé au sommet. Donc, pour l'aligner au milieu, nous allons ici et sélectionnons le conteneur qui contient le bloc de texte. Vous souhaitez sélectionner le conteneur contenant le bloc de texte. Et ici, justifiez le contenu, disons, centrez-vous verticalement. Publiez ça. Et maintenant, ça va se recharger. Et c'est ce que nous avons maintenant. Mais maintenant, bien sûr, vous vous demandez peut-être, qu'en est-il de ce contexte ? Parce que cela ajoute une touche sympa à la section des héros pour ne pas la rendre trop simple. Pour le moment, c'est trop clair. Donc les gens aiment ça comme ça, donc tu peux le laisser comme ça. Mais je vais vous fournir l'image de fond de la section des héros. Voici donc comment ajouter l'image de la section héros. Je pensais que nous avions encore quelques éléments à modifier. C'est pourquoi je voulais que ce soit une leçon à part entière, mais je ne pense pas que nous ayons besoin d' apporter des modifications pour le moment. Dans la leçon suivante, voyons comment ajouter cette image d'arrière-plan. Je te verrai bientôt. 17. Image d'arrière-plan du héros: Voyons maintenant comment ajouter cette image d' arrière-plan de la section héros. Pour en revenir à notre éditeur, je vais venir ici et sélectionner l'ensemble du conteneur contenant la section des héros. Donc, en sélectionnant cela, si vous pouvez le sélectionner, passez au contrôle I et sélectionnez le conteneur le plus externe Ensuite, passons au style, à l' arrière-plan, sélectionnons Classique, et c'est là que nous pouvons choisir l'image que nous voulons choisir, télécharger des fichiers, sélectionner. Passons à notre dossier. J'avais préparé cette image ici. Si je clique dessus avec le bouton droit de la souris et que je l'ouvre, il s'ouvre dans un nouvel onglet de mon autre fenêtre. Comme vous pouvez le voir, il est à plumes. J'ai utilisé un logiciel en ligne pour le mettre en forme, juste pour m'assurer qu'il n'avait pas ces arêtes dures Donc, si je double-clique dessus et que je dis sélectionner, comme vous pouvez le voir, cela a été ajouté, mais il y a un problème. On ne voit pas la partie inférieure. Donc, tout d'abord, fermons ce plugin car il s'agit d'un plugin payant qu' Elementor souhaite que vous achetiez Fermez complètement cette résolution, positionnez le centre au centre, juste comme ça. Supposons que nous voulions qu'elle soit corrigée de telle sorte que lorsque nous la faisons défiler, elle reste statique. Tellement réparé. Répète, pas de répétition. Nous ne voulons pas que cela se reproduise. Et pour la taille de l'écran, nous le voulons comme couverture. Publiez ça. Et maintenant, si nous prévisualisons les modifications, c'est parti. Alors maintenant, vous remarquerez que nous avons cet espace et qu'il n'a pas l'air très beau. Nous allons donc travailler là-dessus, ne vous inquiétez pas, mais le plus important était que vous sachiez comment l'ajouter. Sélectionnez ce conteneur principal, passez à Avancé, augmentez le rembourrage inférieur à peut-être 20, peut-être 50 Et puis ici 50 publient ça. Et maintenant, si nous prévisualisons les modifications, oui, elles commencent à prendre forme. Donc, en gros, voici comment ajouter l'image d'arrière-plan. Et juste au cas où vous vous demanderiez comment je suis capable de modifier ces images. Et en fait, j'avais retrouvé ce que j'avais l'habitude de modifier. C'est ici que j'ai créé le logo, et j'utilise juste freepiek Sur FreePK, vous pouvez aller ici et dire logo du commerce électronique, et sous les filtres, vous pouvez venir dire modifiable en ligne et vérifier qu'il est ouvert avec l' Et si vous sélectionnez, par exemple, ceci, vous pouvez dire « modifier ». Cela ouvrira l'éditeur d'aperçu gratuit, et vous pourrez le modifier pour votre boutique, puis vous aurez un logo, puis vous pourrez l'exporter Vous pouvez l'exporter au format PNG sans arrière-plan. Mais j'ai expliqué comment modifier des images avec des outils en ligne gratuits dans un cours complet que j'ai publié il y a quelque temps. Tu peux y aller et y jeter un œil. C'est un cours très agréable et complet dans lequel vous n'avez pas à dépenser d'argent pour retoucher vos images. Dans la leçon suivante, commençons maintenant par la section du corps. Je te verrai bientôt. 18. Peaufiner l'en-tête: Il est donc temps de commencer à travailler sur la partie du corps. Laisse-moi juste aller ici. Nous voulons commencer à travailler sur la partie du corps, et nous voulons commencer par cette icône. Mais avant cela, je pense que nous devons régler la question du haut, car elle semble moche pour le moment. Nous pouvons donc modifier cet en-tête en le survolant et en disant « en-tête » Cela nous mènera à l'éditeur d'en-têtes Elements Kit, où nous l'avons créé. J'ai donc toujours cette page d'accueil intacte, mais maintenant nous avons changé l'en-tête ici juste pour pouvoir le modifier très rapidement. Et nous y voilà. Donc, la première chose que je veux faire est de casser tout le rembourrage de presque tous les conteneurs ici Je vais donc sélectionner ce grand conteneur ici et passer à Avancé. Je vais casser le rembourrage, et comme vous pouvez le voir, tout a légèrement bougé En effet, chaque fois que vous ajoutez un élément ou un conteneur, il est accompagné d'un rembourrage prédéfini Nous voulons donc simplement le supprimer pour réduire l'espace qu'il occupe. Laisse-moi clore ça. Ensuite, je vais sélectionner le conteneur qui contient le logo. Mais comme vous pouvez le constater, comme nous avons cassé le rembourrage par défaut, il a maintenant la même hauteur que le conteneur de sortie Je ne peux donc pas le sélectionner seul Alors, contrôlez I et développez-le maintenant. Je veux ce conteneur ici. C'est bon. Je vais donc aussi casser le rembourrage dessus Je veux faire de même à ce sujet. Et ça. Ensuite, je souhaite sélectionner le texte avancé, et je veux briser la marge afin de pouvoir modifier des cellules individuelles. Et je veux réduire la marge inférieure à peut-être 35, moins 35, et la marge supérieure du même montant, moins 35. Allons-y. Pour l'instant, je veux le supprimer. Supprimons cela. Je vais vous montrer pourquoi, car c'est là que nous allons avoir la barre de recherche, et nous allons ajouter la barre de recherche plusieurs leçons plus tard. Je vais donc sélectionner cette option car elle représente 20 % de la largeur, peut occuper 80 % et être poussée jusqu'au bout comme ça. Et maintenant, alors que ce conteneur est toujours sélectionné, nous devons disposer les objets qu'il contient au centre comme ça. Et je pense que nous avons quelque chose de mieux. Prévisualisons les modifications. Et maintenant, si je vais sur la page d'accueil, au moins il n'y a plus trop d'espace. Alors maintenant, en fait, nous avons oublié d' ajouter le bouton à la fin, donc je vais juste passer au bouton Plus. Je peux ajouter un bouton en le faisant glisser et en le stylisant partout, ou je peux aller ici et sélectionner peut-être ceci, sélectionner, copier correctement, aller ici Sélectionnez l'élément nerveux et collez-le. Il le collera sous l'élément nerveux. Ensuite, je vais sélectionner le conteneur qui les contient et changer de direction comme ça. Et maintenant, les éléments l' ont fait, parce que nous avons changé de direction, nous ne pouvons pas modifier la justification de l'alignement ici, nous pouvons modifier l'alignement pour placer les éléments au centre. Mais ici, nous voulons les mettre au bout pour les justifier jusqu'au bout. Cela peut être la coupure. Et nous pouvons changer l'icône en carte. Vous pouvez choisir la carte de votre choix ici. Peut-être ceci, insérez. Non Laisse-moi changer ça. Je préfère peut-être ça. Insérez, publiez. Maintenant, si nous prévisualisons les modifications, c'est parti. Alors maintenant, si je dis boutique en ligne, c'est parti. Je pense que c'est un en-tête bien plus beau qu'avant. Je pense donc que nous ne devrions pas prolonger cette leçon trop longtemps. C'était une leçon où nous étions censés commencer à travailler sur la partie du corps, mais c'est ce que nous devions faire. Finissons-en donc ici. Dans la leçon suivante, commençons par ajouter cette section d'icônes. À bientôt. 19. Section d'icônes: Alors allons-y et ajoutons cette icône. Pour en revenir ici, je veux tout d'abord contrôler Shift R. C'est difficile de rafraîchir. Oui, alors nous y voilà. Je voulais juste que les modifications que nous avons apportées à l'en-tête prennent effet ici, même dans l'éditeur de la page d'accueil. Maintenant que nous en avons fini avec cela pour le moment, je vais juste le fermer et fermer cet aperçu. C'est également un autre rédacteur en chef. Fermez ça, faites un peu de ménage. Laissez-moi fermer Otacul. C'est bon. Alors maintenant, allons-y et disons que nous ajoutons également une section de direction. De plus. Ensuite, je vais dans Inside Basic, nous avons une icône. Je vais donc simplement y déposer l'icône. Je vais sélectionner l'intérieur pour choisir l'icône, peut-être une flèche pointant vers le bas. Oui, peut-être ça. Insérez quelque chose comme ça. Style. Allons changer de couleur. Ça peut le rendre noir. Faites-le de la couleur que vous voulez. Nous pouvons augmenter la taille. Nous pouvons le faire pivoter, mais je ne veux pas le faire pivoter. Laissez-moi en faire 25, 25, 25. C'est un beau noir que j'aime bien. Sur Hover, nous pouvons lui donner cette couleur. Je vais donc le sélectionner, passer au style, contrôler la copie en C, le sélectionner au survol ou peut-être avant le survol, nous pouvons lui donner cette couleur Et au survol, il peut être 25, 25, 25, noir ou peut-être bleu Publiez-le et si nous le prévisualisons, c'est parti. Mais poussons-le un peu vers le bas ou vers le haut. Oui, poussons-le un peu vers le haut. Je vais donc passer à la marge et réduire le haut de la marge, peut-être à 30. Ensuite, je veux réduire la mise en page et étendre les effets de mouvement pour lui donner une animation lorsqu' elle arrive, qu'elle rebondit, rebondit comme ça, qu'elle publie, qu' Juste comme ça. C'est une bonne façon d'attirer l' attention de quelqu'un pour lui montrer : « Hé, commence à faire défiler Repoussons-le un peu vers le bas, alors élargissons la mise en page. Faisons en sorte que ce soit peut-être moins 20. Publier. Voyons voir ça. Ou peut-être allons-nous même l'éloigner de là. Alors faisons en sorte que ce soit 30. Mets-le en dehors de la section des héros. Oui, alors mettons-le juste là. Voici comment ajouter votre icône à votre travail. Dans la leçon suivante, voyons comment ajouter ce correctif. Oui, voyons comment ajouter cette section, car nous allons ajouter ces produits phares après avoir installé Woo Comer. Nous ne pouvons donc pas le faire pour le moment Voyons donc comment procéder dans la leçon suivante. N'allez nulle part. 20. Section CTA: Voyons donc comment créer cette section CtA. CtA signifie appel à l'action. Vous avez un bel en-tête, une description, quelques points clés et un appel à l'action. Et maintenant, revenons à notre éditeur, en revenant ici. Nous allons donc le mettre ici, donc je vais dire « ajouter ». Et en fait, au lieu de le recréer, pourquoi ne pas utiliser l'une des fonctionnalités les plus géniales d'Elementor Cela vous permet de ne pas vous répéter, vous pouvez donc dupliquer une section en cliquant dessus. Et maintenant, bien sûr, je veux le placer juste en dessous de cette section d'icônes, afin que je puisse simplement le faire glisser et le placer en dessous. Exactement, juste comme ça. Et maintenant, ce que je veux faire, c'est changer, tout d'abord, sélectionner le conteneur lui-même, passer au style, supprimer l'image d'arrière-plan. Ensuite, je vais faire glisser ce conteneur jusqu'au bout. Si vous n'êtes pas en mesure de le faire, comme vous pouvez le constater, cela ne fonctionne plus vraiment maintenant. Tu peux juste prendre le contrôle de moi. Laisse-moi résumer ceci, cela et cela. C'est le conteneur dont nous parlons, comme vous pouvez le voir, en allant ici, nous avons deux conteneurs. Je peux le faire glisser et le mettre en dessous. Maintenant, nous l'avons placé après l'image juste pour les faire alterner. Maintenant, sélectionnez-le ici pour le remplacer par une chaussure de sport. Remplaçons-le donc par un autre produit. Disons que ce vélo est ouvert. Maintenant, vous devriez y mettre des images créatives s'il s'agit d'un vrai site Web que vous créez en tant que boutique en ligne, juste comme ça. Et maintenant, alors que l' image est toujours sélectionnée, je vais passer au style. Voyons voir. Pouvons-nous modifier le rayon de 20 de la frontière comme ça ? Permettez-moi de modifier cette section. Découvrez nos baskets haut de gamme. Alors explorez notre offre haut de gamme Inside the span, nous avons des prix abordables. Je vais donc remplacer cela par des super vélos, et éliminons les prix à la fin. Je peux réduire la taille de la typographie peut-être jusqu'à cet endroit de publication Nous y voilà donc. Je veux juste me débarrasser d' un des boutons. Et appelons-le Shop Bikes. C'est un appel à l'action. Maintenant, nous pouvons également ajouter une liste d'icônes ici. Je vais donc dire plus d'icône. Liste d'icônes. Déposons-le juste en dessous de cette description. Et comme vous pouvez le voir, il s'agit d'une liste d'icônes. Et je vais le remplacer par l'article numéro un, un vélo de qualité supérieure, qualité supérieure le vélo le plus rapide de tous les temps ou vélos à des prix abordables. Nous y voilà donc. Nous avons la liste. Comme vous pouvez le constater, la police est différente, et c'est parce que ce n'est pas Montserrat Je vais donc passer au texte, à la typographie, changer cela en Montserrat Montserrat. Allons-y. Maintenant, vous remarquerez que les boutons ne sont pas assez alignés avec le reste du texte, et c'est parce que, comme je l'ai mentionné, chaque conteneur a un rembourrage par défaut sur tout le pourtour Donc, si je sélectionne le conteneur, vais dans Advance et je précise qu'il n' y a plus de rembourrage par défaut et que ça a l'air bien Sélectionnez cette option pour réduire la marge inférieure. Brisez-le pour modifier la cellule inférieure, puis sélectionnez-le pour augmenter la marge inférieure. Maintenant, une autre chose que nous pouvons faire pendant que cette option est sélectionnée est de revenir ici, icône et changer la couleur en Je veux sélectionner cette couleur. Contrôle C, revenez ici, sélectionnez-le. Icône, collez-le ici. Et au survol, je veux que ce soit bleu comme ça. Sélectionnez donc ce style. Cette icône bleue, copiez, sélectionnez ce style, survolez. Coller. Alors que nous le survolons, il change de couleur comme ça Prévisualisons les modifications. Et nous y voilà. Ça me plaît. Voici donc comment ajouter cette section. Bien sûr, vous pouvez jouer avec la hauteur des lignes, comme vous pouvez le constater, elles se touchent presque, mais j'aime les lignes assez rapprochées. J'aime bien la hauteur de la ligne. D'accord, c'est une bonne taille. Ouais. Dans la leçon suivante, voyons comment créer cette section d'arrière-plan fixe juste en dessous. Je te verrai bientôt. 21. Section d'arrière-plan fixe: Il est donc temps de créer cette section d'arrière-plan fixe. Voyons donc comment le faire assez rapidement. Ça devrait être très facile. Pour en revenir à notre éditeur, nous y voilà. Je vais juste le dupliquer juste en dessous, et je vais me débarrasser de ce conteneur. Il ne nous reste plus qu'un seul conteneur. Je vais le sélectionner et le supprimer car nous n'en avons pas besoin. Comme vous pouvez le constater, nous n'avons ici qu'un titre, une description et un appel à l'action. Donc, tout d'abord, en sélectionnant ceci, allant dans le style, en le plaçant au milieu, en l' alignant au centre, alignant sur le centre, en cliquant sur le bouton Acheter un vélo. Centre. Très bien, sélectionnons le conteneur lui-même et justifions-le. Évitez d'utiliser des contenants inutilement. Nous pouvons donc simplement faire glisser ce bouton, le placer juste au milieu et retirer le conteneur. Vous n'avez pas besoin d'un contenant pour le mettre là. Mais si nous sélectionnons ce conteneur qui contient tout, nous pouvons passer au style, à l'arrière-plan. Maintenant, sélectionnons une image ici. Lequel allons-nous sélectionner ? Disons que nous vendons des outils, des vélos, des voitures, des jouets, trois objets imprimables en 3D Maintenant, nous avons défini l' arrière-plan comme image, mais nous voulons également définir la couleur d'arrière-plan en noir. Attendre. Non, nous sommes censés définir la superposition d'arrière-plan. Type d'arrière-plan, sélectionnez-le, sélectionnez la couleur et donnez-lui du noir, du noir absolu. Mais maintenant, nous voulons augmenter l'intensité de cette superposition, la rendre plus foncée Nous voulons également revenir à l'arrière-plan. Faites-le fixe au centre. Pas de répétition. Assurez-vous que c'est réparé. C'est pourquoi nous pouvons le faire défiler et le laisser là où il se trouve. Je veux le remplacer par du blanc. Et remarquez si nous le changeons en couleur de texte blanc. L'orange est toujours là parce que c'est défini par ce code span ici. Je vais également sélectionner ce bouton. En fait, je veux utiliser cette couleur orange, donc je vais sélectionner ce contrôle C, sélectionner, le coller en couleur. Au survol, je veux que le texte soit blanc et que le texte soit noir. Normal, le texte doit être blanc comme ça. Et je souhaite également augmenter le rembourrage de ce contenant extérieur Avancé, cassons ça pour le bas, donnons-lui 50 et pour les 50 premiers. Sélectionnez le texte, donnez-lui également une couleur blanche et publiez-le. Maintenant, cet espacement est trop petit, je vais donc sélectionner le conteneur, la marge supérieure pouvant être 100 ou 150 Oh, ça fait 1 500. Très bien, alors publiez ça. Et prévisualisons les modifications. Ensuite, nous y voilà. Voici donc comment ajouter la section d'arrière-plan fixe. Dans la leçon suivante, nous allons voir comment créer le pied de page. Nous verrons comment créer cela un peu plus tard. Oh, non, dans la leçon suivante, voyons comment créer cette section. Je te verrai donc bientôt. 22. Créer le pied de page: Alors pourquoi ne pas créer le pied de page. Donc, sans perdre de temps, passons à notre éditeur ici. Et comme d'habitude, n'oubliez pas la même manière que nous créons l'en-tête séparément du corps, nous allons créer le pied de page séparément du corps Alors revenons ici. En fait, nous en avons terminé avec la page d'accueil pour le moment. Je vais donc simplement passer à WordPress. Assurez-vous qu'il est publié. Vous avez publié toutes vos modifications, et quittons complètement. Et maintenant, tu connais le truc. Nous passons au kit d'éléments, à l'en-tête et au pied de page. Ajouter un nouveau modèle, pied de page, sélectionner le pied de page ici. Et passons directement à Modifier le contenu. Il l' enregistrera automatiquement ici dans le tableau de bord d'administration. Très bien, alors nous y voilà. Je vais donc aller sur Flexbox, le sélectionner, ajouter un autre conteneur à l'intérieur Je veux avec 100 %. Et pour cela, nous voulons qu'il soit de 80 %. Maintenant, pour celui-ci extérieur, nous pouvons l'aligner au centre. Ici, nous pouvons ajouter un conteneur. Dupliquez-le trois fois, sélectionnez celui-ci, changez de direction ici, et maintenant nous avons un endroit où placer l'image de notre logo, sélectionnez le logo dans la médiathèque, sélectionnez-le Nous pouvons ajouter un éditeur de texte juste en dessous. Style. Maintenant, j'ai oublié de mentionner comment définir polices globales afin que vous n'ayez pas à continuer à modifier les téléphones lorsque vous ajoutez un éditeur de texte. Et vous le faites en accédant aux paramètres du site, aux polices globales. Police principale, Let's Make That Monster Rat. Cliquez en dehors du quartier secondaire de Montserrat. Vous pouvez choisir la police de votre choix. Cliquez en dehors du texte. Montserrat. Sélectionnez l'extérieur et accentuez, c'est pareil. Enregistrez les modifications dans l'éditeur. Maintenant, comme vous pouvez le constater, c'est automatiquement Montserrat, et nous n'avons rien changé Et si j'ajoute un nouvel éditeur de texte, il s'appellera Montserrat C'est donc ça. La prochaine chose que nous voulons faire est d'ajouter un titre ici. Laissons un titre ici et passons à l'âge de trois ans. Disons des liens utiles. Et juste en dessous, on peut ajouter un container. Cela comporte deux éléments. Liste d'icônes. Déposons une liste d'icônes là-bas et dupliquons-la, et nous sélectionnons le conteneur, nous pouvons en faire une double colonne. Et nous pouvons également espacer les deux. Nous pouvons mettre de l'espace entre eux. Cela signifie pousser cela jusqu'au bout, espace entre les deux comme ça ou disons espace autour de l'espace autour. Mais je n'aime pas que cela soit mal aligné. Donc de l'espace entre les deux comme ça. Maintenant, vous remarquerez qu'il est aligné bien au-dessus du logo. Nous pouvons sélectionner le conteneur lui-même, passer en haut de la page de rembourrage avancé, disons 30 Disons 40. Sélectionnez ce style, cette typographie Faisons en 900 ou peut-être 800. Cliquons à l'extérieur. Je veux changer la couleur en 25, 25, 25. 25, 25, 25, ou peut-être ce bleu. Je n'aime pas ce noir pour le moment. Alors, choisissez la couleur, sélectionnez-la, allez ici. Maintenant, comme vous pouvez le voir, nous les avons ici, publiez-les. Si je reviens ici plus tôt pour économiser, je voudrais dire : modifiez avec Elementor parce que ce que je veux faire, c'est copier le style que nous avons mis sur l' autre liste d'icônes plus tôt Si je fais défiler l'écran vers le bas et que je sélectionne ceci, copie de fuite correcte, peux venir ici et sélectionner le bon style de collage de fuite, sélectionner le bon style de fuite, de coller Il ne nous reste plus qu'à changer ce que dit chaque élément. Peut-être à la maison parce que ce sont des liens. Nous pouvons appeler cette boutique au Nous pouvons sélectionner cette politique de confidentialité. Conditions d'utilisation. Et peut-être la politique en matière de cookies. Peut-être la politique en matière de cookies. Oui, juste comme ça. Publier. Maintenant, vous remarquerez ici que les deux sont trop proches. En fait, je veux que cela soit légèrement plus large que cela. Je vais donc le mettre ou peut-être le laisser là. Mais pour cela, étant donné que c'est celui qui va contenir le formulaire d'inscription, faisons-en à 50 % ou peut-être 40 % Faisons en sorte que ce soit 30 %. Et faisons-en 30 % pour en faire 100. Nous pouvons le sélectionner et augmenter l'espacement entre les trois conteneurs, les espaces que 30 publient J'ai envie de sélectionner ce conteneur et de passer en mode avancé, marge gauche. Augmentons la marge de gauche comme ça. Ici, nous pouvons vous dire de vous joindre à nous aujourd'hui. Ensuite, nous pouvons avoir une brève description ici. Oh, attendez. Où est-ce que c'est de nous rejoindre aujourd'hui ? Je veux le dupliquer, le déposer ici et dire Rejoignez-nous aujourd'hui. C'est donc ici que nous allons mettre un chimpanzé de courrier électronique. Pour l'instant, nous allons l'utiliser comme espace réservé, la forme du chimpanzé mâle Juste comme ça, on peut le styliser. Pour les meilleures remises, offres et dernières nouvelles de notre part ou simplement pour des offres et des offres. Alors maintenant, si je sélectionne le formulaire, nous pouvons passer au style et changer les couleurs. Nous pouvons lui donner la couleur que nous voulons. Laissez-moi donc sélectionner ce bleu. Copiez, contrôlez C, revenez ici, collez. Qu'est-ce que c'est ? Eh bien, c'est de la typographie Nous voulons le bouton. Type d'arrière-plan. Oui, collez ça. Maintenant, c'est bleu, ou nous pouvons le rendre orange, faire de la couleur que vous voulez, disons publier. On peut aussi parler de réseaux sociaux, d'icônes. Déposons-y les icônes des réseaux sociaux et alignons-les peut-être de ce côté, publions-les. Et je n'aime pas que les deux soient mal alignés. Je vais donc sélectionner cette copie par clic droit, afin que nous puissions copier le style. Nous avons appliqué ici le style de collage par clic droit. Alors maintenant, d'accord, il a également copié la largeur de 30 %. Nous voulions que ce soit 40, mais maintenant il a cette marge supérieure comme celle-ci. Publier. Prévisualisons les modifications. J'aime bien, mais cet espacement est trop important. Revenons ici et sélectionnons-le. Réduction du bas de la marge. Publiez, prévisualisez les modifications. Nous y voilà. Alors maintenant, ce n'est pas encore un lien. Donc, en le sélectionnant, liez une URL personnalisée. Copions notre page d'accueil. Et publiez. Prévisualisez les modifications. Et maintenant, si vous le sélectionnez ou si vous cliquez dessus et que vous faites défiler la page jusqu'en bas, nous avons notre dossier. Maintenant, une chose est d' ajouter la marge ici. En sélectionnant cette option, nous allons passer en haut de la marge avancée. Donnons-lui 100 ou 150. Publier ceci sera rechargé. Rentre chez toi. Faisons défiler la page vers le bas. Nous avons maintenant un bon espacement uniforme. Voilà comment créer une photo à partir de zéro sans utiliser de modèles. Cela a été fait à la hâte, mais au moins vous comprenez le concept, car cela revient à créer l' en-tête ou la section héros. Il suffit de savoir comment travailler avec des conteneurs. Maintenant que nous en avons terminé avec une photo, dans la leçon suivante, voyons comment rendre la page entière réactive. En d'autres termes, rendons-le beau sur d'autres appareils que le PC, car à l'heure actuelle, il est beau sur un ordinateur de bureau. À propos des tablettes ? Qu' en est-il des smartphones ? Donc, si quelqu'un navigue sur son smartphone. Voyons comment procéder prochainement. 23. En-tête réactif: Voyons donc comment rendre cette page réactive sur différents appareils. Mais tout d'abord, voyons à quoi cela ressemble par défaut sur différents appareils. Appuyez donc sur Control Shift I sur votre clavier. Attendez, contrôlez Shift E sur votre clavier. Cela fera apparaître la console. Et maintenant, nous avons différents outils que nous pouvons utiliser pour simplement travailler sur ce site Web. Vous remarquerez ici que nous avons cette barre d'outils pour appareils Tgal. Cliquons dessus. Cela fera apparaître des simulateurs pour différents appareils. Comme vous pouvez le voir dans ce menu déroulant, nous avons différentes tailles d'appareils. Donc, si je dis iPhone 14 Max, c'est à cela que ressemble le site Web par défaut sur un iPhone 14. Faisons défiler la page jusqu'en bas. Cela n'a pas l'air si mal, mais cela peut être amélioré. Voyons à quoi cela ressemble sur une tablette. Disons iPad Pro. Voilà à quoi ça ressemble sur un iPad. Je trouve que ça a l'air bien sur un iPad, mais l'en-tête n'est pas très beau. Alors pourquoi ne pas commencer par l'en-tête ? Je vais donc le fermer, le survoler, puis l'en-tête pour que nous puissions le modifier. Et nous y voilà. La première chose que j'aime faire est donc de passer en mode tablette. Tout d'abord, permettez-moi d'être très explicite à ce sujet à 100 %. Control I, je veux celui-ci qui contient tout. Donc 90 %, pas des pixels, un pourcentage. Environ 98 %. Oui, j'aime bien. 98 % ont raison. Maintenant, sélectionnons le conteneur du logo et faisons-le 20 %. Et cette autre à 80 %. Pas des pixels. Publions-le. Vous remarquerez maintenant que les modifications que nous avions définies ou que les paramètres que nous avions définis en mode bureau sont toujours en vigueur ici, et c'est pourquoi cela a toujours une marge par rapport au mode bureau. Donc, si je le sélectionne, d'accord. Je veux juste sélectionner l'élément du kit d' éléments. Fermez ça. Va ici. Comme vous pouvez le constater, il possède les paramètres de marge que nous avons définis en mode bureau. Nous voulons casser ça, publier ça. Passons en revue les modifications. Maintenant, Control Shift I passe en mode tablette et j'aime son apparence. Ça a déjà l'air bien, et maintenant vous remarquerez que lorsque nous cliquons sur le menu des hamburgers, nous avons besoin d'un logo ici. Retournons ici. Cliquez dessus. Comme vous pouvez le constater, nous pouvons accéder au contenu, aux paramètres du menu mobile, au logo du menu mobile. Ajoutons notre logo comme d'habitude. Et maintenant, le logo apparaît dans le menu mobile, mais il est trop large. Je veux que ce soit un peu étroit. Donc, tant que c'est encore sélectionné, je vais passer au style. Menu mobile. Attendez, oui, un emballage de menu avec disons un pourcentage, et je le veux quelque part juste avant que icône du Togo ne s'effondre, quelque part là Publiez ça. Si je le ferme et que nous passons en mode mobile. Voilà à quoi cela ressemble en mode mobile. Maintenant, je ne pense pas que ça soit beau comme ça. Ça a l'air trop compliqué, trop de choses dans l'entête Donc, ce que j'aime faire parfois, pas toujours, lorsque j'ai quelque chose de plus comme ce bouton, j'aime créer un menu mobile ou un en-tête mobile distinct. Donc, en revenant ici, je peux le dupliquer. Et maintenant, cela n' apparaîtra que sur tablette et ordinateur de bureau, mais nous en aurons également un distinct pour les mobiles. Nous le faisons donc en sélectionnant le conteneur qui contient l'intégralité de l'en-tête, en passant à la version avancée, à la mise en page réduite, à la mise en page réactive. Nous voulons masquer cela sur tablette et ordinateur de bureau. Il n'apparaîtra que sur mobile. Cela signifie que c'est le seul en-tête qui s'affichera sur mobile. Et si je passe à celui-ci, nous voulons le masquer sur mobile car il devrait apparaître sur ordinateur et tablette. Donc, passez à la mise en page de réduction avancée, réactive, masquez sur mobile, publiez-la. Maintenant, si je passe au mobile, vous remarquerez que cela sera gradé comme ça, et cela deviendra actif. Maintenant, c'est terminé. C'est la version active. Et maintenant je veux juste me débarrasser de ce bouton parce que je n'aime pas qu'il soit là. Et je veux donner à ce contenant de boutons 50 % de la largeur et à cet autre 50 %, afin qu'ils soient côte à côte. Donc, en sélectionnant ceci, assurez-vous qu' il s'agit du conteneur du logo. Donnons-lui 50 % comme ça. Sélectionnons cette autre option. Donnons-lui 50 %. Comme vous pouvez le constater, en raison du rembourrage et marge sur les contenants extérieurs, nous devons les rétrécir Alors permettez-moi de descendre à peut-être 44 %. 40 % en fait. Maintenant, je vais sélectionner ce conteneur qui contient ces deux conteneurs, et voyons voir, l'espace entre les deux. Oui, donc on peut tout séparer et mettre de l'espace entre les deux. Publiez ça. Et maintenant, il est rechargé Alors maintenant, comme vous pouvez le voir, il s'agit de l'en-tête mobile. Mais je veux dire, c'est l'en-tête de la tablette. Et si nous passons au mobile, peut-être à l'iPhone ou au Samsung Galaxy S 20, ultra, comme vous pouvez le voir, nous utilisons l'autre en-tête. J'adore ça. Maintenant, je pense que nous devons réduire de 60 % la largeur du récipient extérieur. Fixons-le à 98 %. Publiez parce que je veux enfoncer un peu cette icône de hamburger vers l'intérieur Oui, juste comme ça. Faisons en sorte que ce soit 96 %. Juste comme ça. J'adore ça. Maintenant, si je clique sur l'icône Burger. D'accord, le logo est donc masqué ici parce que dans le menu mobile, ce bouton de navigation s' est effondré vers le bas Alors, rectifions-le. C'est pareil ici si je clique dessus , comme vous pouvez le voir. Donc, sur mobile, nous voulons que la largeur soit plus large, juste comme ça. Publiez-le et venons-y. Je vais recharger. Maintenant, si on clique dessus, oui, alors maintenant ça a l'air bien. Maintenant, voici le menu de l'éditeur Wordpress. C'est le même entête de l'homme ici avec tous ces paramètres. Ne vous inquiétez donc pas pour ça. Il y a ce bouton pour aller, et le logo est derrière. Donc, en gros, c'est ainsi que l'en-tête est réactif sur différents appareils. Dans la leçon suivante, nous allons voir comment rendre le reste de la page responsive. N'allez pas trop loin. En fait, prenez un verre d' eau et revenez. 24. Mise à jour de l'en-tête réactif: Nous avons un en-tête réactif. Il est temps de rendre le reste de la page responsive. Mais avant cela, je me souviens juste que nous n'avions pas expliqué comment modifier ce menu, ce menu mobile. Comme vous pouvez le constater, tout d'abord, les effets de survol sont tous bons, mais que faire si vous voulez changer la couleur de ce bouton de navigation ? Et aussi, que faire si vous souhaitez changer la couleur de ce menu de hamburgers ? Sélectionnez donc l'élément de menu. Donc, il est écrit Edit Elements Kit Nerve Menu. Tout en restant stylé, passons au menu des hamburgers. Couleur de l'icône du hamburger. Ce sont ces lignes qui se trouvent à l'intérieur du bouton. À l'heure actuelle, ils ont cette couleur. Lorsque nous les survolons, nous voulons qu'ils deviennent blancs. Donc, au survol, couleur de l'icône du hamburger. blanc. Donc, au survol, c'est blanc maintenant Si vous souhaitez modifier l'arrière-plan, c'est ici que vous pouvez le modifier. Par exemple, disons que je veux lui donner cette couleur, cette couleur orange. Laissez-moi choisir cette couleur. Choisissez la couleur. Choisissons-y un pixel orange. Sélectionnez-le. Maintenant, si nous passons à l'arrière-plan, la couleur, collez-la dedans. Si je passe la souris dessus, c'est maintenant cette couleur. Et il semble avoir une bordure bleue. Est-ce qu'il y a une frontière ? Aucune. Oui, juste comme ça. Mais encore une fois, vous ne passez pas votre doigt sur votre téléphone portable Cela n'a donc aucun sens. Quoi qu'il en soit, c'est ainsi que vous pouvez gérer vos couleurs. Ensuite, si je clique dessus maintenant, en cliquant dessus, sa couleur devient bleue. Y a-t-il un état actif ? Laissez-moi le publier et voir ce qui va apparaître. Prévisualisez les modifications. C'est bon. Donc, quand tu cliques dessus, oui, alors maintenant ça a l'air bien. Lorsqu'il est actif, il est orange. Maintenant, c'est le menu des hamburgers. Mais lorsque nous cliquons dessus, cela s' appelle l'icône du Togo. Il y a donc le hamburger à emporter et il y a un togo fermé. C'est ce dont nous parlons. Couleur de l'icône du hamburger. Dans des circonstances normales, nous pouvons le laisser à cette couleur. Mais sur Hover, bien sûr, il n'y a pas d'état de survol sur les téléphones portables, mais je veux juste passer à l'orange D'accord, c'est le Oh, ouais. Désolé, c'est l'icône. Nous avons également le contexte. Collez ça. C'est bon. Et puis pour le type de bordure, aucun. Juste comme ça. Publiez ça. Maintenant, je souhaite également actualiser ou recharger cette page pour que tout ce que nous avons fait soit également visible dans notre éditeur, pas seulement dans le produit final ici Alors maintenant, cela prend effet, et c'est ce que je voulais vous montrer pour le moment. Alors maintenant, nous pouvons sortir. En fait, je peux simplement le fermer et ensuite sortir par endroits. Et si je viens ici, il suffit de cliquer dessus pour que nous puissions commencer à modifier la page elle-même. Allons-y. Maintenant que nous sommes passés à la page elle-même, Control Shift I Maintenant, vous remarquerez que nous n'avons pas effectué ces mises à jour sur le menu de la tablette et du bureau, mais au moins vous savez comment modifier les couleurs du menu, les couleurs du menu des hamburgers. C'est donc une mission. Allez-y et faites de même ici. Je voulais juste que tu saches comment faire. 25. Page réactive: Alors maintenant, tout d'abord, passons à la page d'accueil. C'est bon. Alors maintenant, modifions-le avec Elementor. Allons-y. Passez donc en mode tablette. En mode tablette, sélectionnons-le également et soyons très explicites. l'heure actuelle, le paramètre de bureau est de 100 %, mais j'aime être très explicite quant à mes valeurs. Ici, il utilise également la valeur par défaut. Alors laissez-moi porter ce chiffre à 96 %. Oui, j'adore cette publication. Mais je viens de me rappeler que je n'aime pas les mettre côte à côte quand c'est sur tablette. J'aime faire en sorte que chacun d'entre eux soit 100 % et le faire passer en mode pile. Maintenant que cela fait 96 % de largeur, je peux aussi faire en sorte que cela fasse 100 % de largeur. Et ça à 100 %. Et maintenant, si je vais dans ce conteneur extérieur et que je change de direction, c'est 100 %, et c'est 100 %. Maintenant, il ne me reste plus qu'à le sélectionner, à passer au style, à l'aligner au centre, aller ici, à le styliser, à l'aligner au centre, sélectionner ce conteneur, à tout aligner au centre comme ça. Publier. Maintenant, nous pouvons inverser les choses ou les laisser comme ça. Certaines personnes préfèrent l' image avant le texte. Le moyen d' y parvenir, en plaçant l'image avant le texte, est donc de simplement inverser. Maintenant, il se dirige vers le bas. Tout ce qui se trouve dans le conteneur va vers le bas. Nous pouvons dire, non, inversons l'ordre, juste comme ça. Mais comme je l'ai dit, je veux qu'il en soit ainsi. Et je peux réduire la taille de cette typographie de titre, la réduire peut-être à cette taille, publier Ensuite, je vais faire défiler la page vers le bas. J'aime bien où c'est, mais nous pouvons aussi atteindre 96 %. Permettez-moi de réduire la taille de cette rubrique. Et la hauteur de la ligne jusqu'à ce point. Vous pouvez également faire de même. Si vous voulez les images, si vous voulez que chacun de ces conteneurs occupe 100 %, vous pouvez le faire. Je vais faire quelque chose de différent. Je vais le sélectionner et l'inverser, le mettre là. Je vais le laisser exactement là où il est, mais je peux le réduire, juste comme ça, publier Prévisualisons les modifications. maintenant à la touche I, à la touche Control Shift I, et passons à ces appareils. Jetons-y un coup d' œil sur iPad Pro. Voilà à quoi cela ressemble sur iPad Pro, en défilant vers le bas. Oui, je trouve que ça a l'air bien. Il est maintenant temps de travailler sur le potier réactif. Donc, en gros, je sais que nous n'avons pas fait un travail parfait. Il y a encore place à l'amélioration, mais, bien sûr, c'est juste pour vous montrer comment procéder. C'est à vous de le rendre superbe. Mais même si c'est le cas, laissez-moi l'agrandir légèrement. Je n'aime pas son apparence. Sélectionnez-le. Typographie. Augmentons la taille jusqu'à peut-être ce point. Et si nous passons à notre tablette, je pense qu'elle sera bien meilleure. Mais maintenant, augmentons la hauteur de la ligne. Très bien, publions-le et prévisualisons les modifications Je trouve que maintenant ça a l' air génial. Je vous verrai donc dans le prochain verre alors que nous travaillerons sur un pied de page réactif. À bientôt. 26. Pied de page réactif: Il est maintenant temps de travailler sur le pied de page. Faisons en sorte qu'il soit réactif. Je reviens ici. Maintenant, vous remarquerez que nous n'avons pas travaillé pour le rendre réactif sur mobile, et c'est parce que vous utiliserez les mêmes principes que nous avons utilisés sur la tablette. Par exemple, pour ce titre, nous devons aller ici et le réduire. Je pense que c'est sympa. Son apparence est déjà belle. Nous pouvons le prendre et l' aligner sur le centre et le style. Faites de même pour celui-ci. Ou nous pouvons le savoir, parce que nous voulons laisser cette liste alignée vers la gauche, laissons simplement tout aligné vers la gauche. Maintenant, une chose que je peux faire ici est de sélectionner le conteneur contenant la zone de texte avancée. Et ne rompons pas ce lien. Ajoutons simplement un rembourrage de 20 sur tous les côtés. Nous ajoutons juste de la place, une marge de manœuvre sur les côtés. Vous pouvez donc faire de même pour cela, sélectionnez ceci. Advanced 20 de manière uniforme sur tous les plans. Alors allez-y et terminez ceci, car maintenant nous voulons passer à la photo. Je vais le publier. Ou laissez-moi le faire très rapidement. Permettez-moi de faire rapidement avancer cette partie, 20, et c'est parti. Publier. Très bien, je passe à ce téléphone. Ça a l'air génial. Passons maintenant au pied de page. En fait, passons maintenant à cet aperçu. Accédez à la page d'accueil. Modifier le pied de page. En fait, nous aurions pu faire la même chose ici simplement en quittant ceci, fermant et en allant ici, en bas . Mais de toute façon, ne t'inquiète pas. Fermons donc tous ces autres. En sélectionnant le pied de page, en passant en mode tablette, bien sûr, disons clairement que c'est 100 % Le même cas s'applique ici. 96 %, et je le permettrai. Dois-je autoriser ce rembourrage, rembourrage par défaut parce que j'ai l' impression qu'il y a trop d'espace ici Regardons-le simplement dans le front-end au lieu de deviner. Contrôlez Shift I et passons en mode tablette. iPad Pro. Et maintenant, je veux que nous allions à la page d'accueil afin que nous puissions voir l'alignement. C' est ce dont je parle. Cet espace n'est pas aussi grand que l'espace photo, nous devons donc retirer le rembourrage Là-dessus, c'est ce qui contient le plus de contenu. Nous pouvons l'élargir. Donc largeur 40, disons 50, environ 50. Qu'en est-il de 60 ? Ou une autre chose que nous pouvons faire est ce que nous avons fait plus tôt. Nous pouvons le faire à 100 % en largeur. Contrôle à 100 % I pour faire apparaître la structure. Sélectionnons le conteneur qui contient ces trois conteneurs, revenons ici, et je veux que la direction soit vers le bas comme ça Nous pouvons sélectionner le logo et définir la largeur, peut-être jusqu'à ce point, sélectionner ce style, l' aligner au centre. Faisons en sorte que cela occupe 100 %. Maintenant, vous vous souvenez que nous avons défini une certaine marge sur le bureau, alors cassons cela. Et n'oubliez pas qu' il s'agit du mode tablette. Donc, quelles que soient les modifications que nous apportons ici, elles n'affectent que le mode tablette, pas le mode ordinateur de bureau. Et ensuite, disons ceci. Nous pouvons le mettre au centre. Vous pouvez le faire à 50 %. Sélectionnez ceci et alignez le tout au centre comme ça. Nous pouvons supprimer le zéro de la marge supérieure . Sélectionnez ceci. Sélectionnons la bonne copie de fuite. Sélectionnez le bon style de colle anti-fuite. Juste comme ça. Sélectionnez ceci. Y a-t-il une marge inférieure ? Non, qu'en est-il de ça ? Je pense, avons-nous créé un espace pour cela pour le conteneur principal qui les contient ? Oui, je pense que nous avons défini 30, disons dix ou zéro parce que je ne veux pas trop d'espacement Mais pour cela, nous pouvons le baisser un peu, avancer, top 30 avec marge publier dans le top 30 avec marge. Allons-y. Comme vous pouvez le constater, la chose la plus importante à apprendre est de savoir comment utiliser ces outils pour créer la mise en page que vous avez en tête. Et vous pouvez vous inspirer en recherchant des modèles de boutique en ligne ou des modèles de sites Web, et en copiant simplement un design que vous aimez. Tant que vous savez utiliser les outils, vous pouvez créer n'importe quel type de site Web. Je vais donc fermer ça. Non, au lieu de le fermer, contrôlons-le maintenant. Control Shift E. Si nous allons en bas, voici à quoi ressemble notre photo. J'en suis satisfait . Allez-y et continuez jouer avec les paramètres pour voir ce que vous pouvez trouver. Je peux simplement copier ce texte. Passons au contenu. Oui, peut-être que nous pouvons avoir quelque chose comme ça parce que je n'aime pas l'apparence de cette ligne. Œillet Control Shift. Oui, quelque chose de ce genre. Voilà comment rendre le pied de page réactif. Nous en avons presque terminé avec les pages élémentaires car lorsque nous travaillerons avec Woo Cameras, nous n'utiliserons pas Elementor Mais dans la leçon suivante, allons voir comment travailler avec nous allons voir comment travailler avec les formulaires Wordpress lors de la création de la page de contact. N'oubliez pas que nous avons une page de contact si je peux passer à notre site Web de référence. Oui, c'est donc notre page de contact. Si vous voulez avoir un site Web WordPress, vous devez comprendre comment utiliser les formulaires Wordpress, permettant aux gens vous contacter ou de s'inscrire à votre liste de diffusion. Lorsqu'ils remplissent leurs coordonnées ici et envoient un message, ils devraient arriver dans votre boîte de réception. Alors, comment faites-vous cela ? Voyons comment procéder, à partir de la leçon suivante. 27. Mise à jour du pied de page: J'ai remarqué une certaine incohérence ici. Si je fais défiler l'écran vers le bas et que je suis sur la page d'accueil, le pied de page est superbe Si je vais sur la page A, que nous avons créée au hasard, il y a maintenant un problème ici. Je ne sais donc pas exactement ce qui se passe, mais voyons si nous pouvons résoudre Passons donc au pied de page. Maintenant, une chose que nous pouvons faire est d'ouvrir ce mode navigation privée juste pour voir à quoi il ressemble Contrôlez Shift N, et je vais taper vfxpod.com. Collez-le dedans et faites-le défiler vers le bas, si je passe à la page de contact Je pense que cet élément pose quelques problèmes parce que je ne sais pas pourquoi cela se produit ainsi. Pourquoi apparaît-il comme ça sur la page d'accueil, mais ne fonctionne-t-il pas sur ces autres pages Alors voyons voir, liste Oui, nous pouvons utiliser la liste des pages. En fait, c'est ce que nous aurions dû utiliser il y a longtemps , car ce sont des liens vers des pages Web spécifiques. Alors laissez-moi simplement le laisser là. Objet publicitaire. Appelons ça notre maison. Nous pouvons maintenant rechercher la page d'accueil en la tapant. Et nous y voilà. Nous pouvons également ajouter un autre article. Appelons ça boutique. Mais pour ce qui est de la boutique, nous allons d' abord devoir installer Woocomers. Voyons donc les autres pages que nous avons à propos de nous et contactons. Donc à peu près et ici à peu près. Si une page n'existe pas, elle ne s'affichera pas si vous tapez un nom ici. Donc disons produits et tapez ici les produits, cela n'apparaîtra pas car nous n'avons pas encore de page produit. Mais comme vous avez une page de contact, nous pouvons y mettre un contact. Nous allons donc changer cela en contact. Et maintenant, c'est écrit « contact ». Maintenant, retirons-le et faisons-le glisser dedans. Alors retirons-le. Cela ne fonctionne tout simplement pas. Maison. Maintenant, je vais juste le dupliquer, mais pour vous, vous allez utiliser les pages dont vous avez besoin. Maintenant, je vais également sélectionner ce conteneur. Espacez uniformément. Regardons simplement ce que nous avons ici. accord, nous pouvons simplement augmenter l'écart entre les deux au lieu de les mettre trop loin l'un de l'autre. Disons 40 ou 60, 60. Ouais. Je l'aime bien comme ça. Et maintenant vous remarquerez que la couleur est le bleu, et c'est parce que c' est la couleur globale définie par Astra, le thème va donc falloir aller dans la zone personnalisée pour changer cette couleur. Je vais donc dire publier. Nous devons remplacer cette page par d'autres pages que vous avez. Peut-être une politique de confidentialité. Au fait, quelles pages avons-nous ? Si je peux juste revenir rapidement aux pages. Nous n'en avons que trois. Ajoutons quelques pages supplémentaires. Un, deux, trois, Privacy publish. Je vais aller ici et parler des conditions d'utilisation, de publication et des cookies. Publier. Vous pouvez inclure autant de pages que vous le souhaitez. Mais maintenant, permettez-moi de toutes les fermer. Rafraîchir Nous avons maintenant toutes ces pages. Donc, en revenant ici, en sélectionnant ceci, nous pouvons appeler cela confidentialité et ici taper confidentialité. Confidentialité. Sélectionnez ces conditions d'utilisation. Termes. Et enfin, les cookies. Biscuit. Nous y voilà. Parfait. Publier. Et maintenant, comme c'est plus petit, je pense que nous pouvons l'élargir. Donc, en sélectionnant cela, faisons en sorte que ce soit peut-être 40 % et réduisons ce chiffre à 20 % de publication. Aperçu. Et je trouve que ça a l'air mieux. Maintenant, comme je l'ai mentionné, nous devons passer à personnalisation car ce sont des liens. Astra définit des couleurs automatiques pour tous les liens, leur donne une couleur globale car, comme je l'ai mentionné, un thème est ce qui détermine l'apparence de votre site Web, donne tous les paramètres par défaut C'est à vous d'aller les changer. Nous y voilà donc. Si nous optons pour les couleurs globales, les encres, nous pouvons les remplacer les couleurs de notre marque ou nous pouvons sélectionner peut-être cette couleur. Voilà, mais ça ne change pas. Je ne sais pas pourquoi. Euh, changeons la couleur d'accent. Maintenant, c'est un facteur limitant car et si je veux survoler ? Si je survole l'un d'entre eux, je voulais qu'il change de couleur, mais je ne peux pas Mais ce n'est pas grave. Tant que cela se transforme en main, quelqu'un sait qu'il peut cliquer. Maintenant, en fermant cela, nous y voilà. Alors, en rentrant chez nous, testons-le sur les autres pages. Voilà à quoi ça ressemble là-bas. À propos de la page. Voilà à quoi ça ressemble. Page de contact. Génial. Ça a l'air bien. Alors maintenant, comme je l'ai mentionné, dans la leçon suivante, commençant par la leçon suivante, commençons à créer notre boutique Wocomers. Nous allons créer des produits. Ensuite, nous allons créer la page du produit. Nous allons nous connecter à PayPal et permettre aux utilisateurs d'effectuer des paiements sur votre site Web afin que vous puissiez leur livrer les marchandises. Lorsque nous aurons terminé, ce site Web sera prêt à commencer à recevoir de l'argent. Voyons comment procéder . Leçon suivante. 28. Créer un formulaire de contact: Eh, bon retour. Il est donc temps pour vous d'apprendre à travailler avec les formulaires Wordpress. Maintenant, permettez-moi de passer au site Web de référence. Comme vous pouvez le voir ici sur la page de contact, nous avons un formulaire qui demande à l'utilisateur de saisir son nom, adresse e-mail et son message. S'ils ont une question ou s'ils souhaitent nous faire part de leurs commentaires, ils peuvent le faire en utilisant ce formulaire. Alors, comment créer un formulaire Wordpress ? C'est la plus grande question. Pour cela, nous aurons besoin d'un plugin de formulaire. Revenons à notre site Web. Nous y voilà, je suis dans le tableau de bord. Je vais donc passer aux plug-ins, en ajouter un nouveau. Maintenant, si je tape le formulaire, vous remarquerez que nous avons plusieurs plugins en mousse à notre disposition. Mais celui que nous voulons s'appelle Forminator Forms de WPMU Dev Pour moi, c'est le meilleur plugin en mousse de tous les temps. Il vous fournit plusieurs fonctionnalités gratuites que vous devriez autrement payer si vous utilisez d'autres plugins en mousse. Très bien, alors allons-y, installons-le, et je vais l'activer. Et immédiatement, vous le verrez apparaître ici. Donc, si je clique cela nous amène au tableau de bord du plug-in, le tableau de bord de Forminator Et comme vous pouvez le voir ici, nous pouvons procéder à création d'une mousse ou d'un sondage. Si vous souhaitez organiser des sondages sur votre site Web, vous pouvez recueillir les avis des utilisateurs gratuitement. Je vais donc procéder à la création et on nous présentera ces modèles avec lesquels nous pourrons commencer. Mais je veux que nous utilisions un formulaire vierge afin de pouvoir le créer à partir de zéro. Disons qu'il s'agit de la page de contact. Alors contactez. Formulaire de contact Permettez-moi simplement de contacter le formulaire, créer. Et nous y voilà. est donc ici que nous sommes censés entrer nos champs, et nous pouvons le faire en cliquant sur Insérer des champs. Voici les différents types de champs que nous pouvons ajouter à notre formulaire. Je dirais donc que je veux un champ de nom. Je veux également un champ e-mail et un champ de zone de texte. Si je reviens ici, il s'agit d'un champ de nom, d'e-mail et d'un champ de zone de texte. Insérer un champ. Et comme vous pouvez le voir maintenant, nous en avons un, deux , trois, et voici le bouton. Ceci est ajouté automatiquement. Tout ce que vous avez à faire, c'est de changer ce qu'il dit ou ce qu'il dit. Donc, avant de faire quoi que ce soit d'autre, je veux que vous cliquiez sur Aperçu. Voici à quoi ressemble notre formulaire actuellement. Voyons donc si nous pouvons le mettre à jour légèrement. Je vais donc tout d'abord le publier . Et dès que nous le publions, on nous donne ce code court. C'est ce que nous devrons coller dans le front-end de notre page de contact pour afficher la famille. Alors laisse-moi clore ça. Si je vais sur les pages et que je fais un clin d'œil sur Ouvrir le lien dans un nouvel onglet et que je vais ici dans l'onglet, nous avons la page de contact Je vais donc dire « modifier ». Ce n'est pas encore une page élémentaire. Alors tout d'abord, n'oubliez pas, passons au modèle et changez-le en Elementor pleine largeur Passons également aux paramètres Astra. Donnons-lui une largeur complète, réduisons-la, agrandissons la barre latérale, pas de barre latérale, réduisons-la et désactivons ces champs Sauvegardez ça. Et maintenant, nous pouvons passer à l'édition avec Elementor. Et c'est parti. C'est donc une page blanche, mais nous avons notre pied de page et notre en-tête 29. Créer la page de contact: Donc, en revenant ici, comme vous pouvez le voir, nous avons les contacteurs. Laisse-moi juste le copier. Maintenant, bien sûr, permettez-moi d'ajouter cet avantage. Mettons-y le titre. Laisse-moi coller ça dedans. Permettez-moi également de prendre cette copie de texte. En plus, non. Passons ici à l'éditeur de texte Plus. Et ajoutons-y. Ils sont donc tous les deux dans ce conteneur, mais nous n'avons pas de contenant censé les contenir. Alors je l'ai oublié. Ajoutons donc un conteneur. Il se trouve à l'intérieur du conteneur extérieur, nous pouvons donc le faire glisser et le déposer dedans et cela dedans. Alors maintenant, comme d'habitude, sélectionnez-le. Faisons en sorte qu'elle occupe 100 % de l'écran. Alors prenons ça et faisons-le à 80 %. Revenez ensuite ici et alignez-le au centre. Attends, juste là. Très bien, donc sélectionner cet alignement sur le centre, le style, le centre aligné En sélectionnant cette option, revenons à la typographie stylistique. Faisons en sorte que ce soit 900. Je l'aime vraiment énorme. Augmentez donc la taille peut-être jusqu'à ce 0,50. Et bien sûr, les couleurs Donnons-lui ce bleu. Vous pouvez lui donner la couleur que vous voulez. Alors, choisissez la couleur. Choisissez l'un de ces pixels, copié, sélectionnez-le. Va ici, colle-y. Maintenant, je peux aussi choisir cette couleur. Revenez à ce contact. Nous pouvons ajouter cette durée. Envergure. Retourner ici. Le style est égal à la couleur , collez-y cette couleur. Publier. Alors permettez-moi maintenant de prendre cette copie. Contenu, collez-le dedans, sélectionnez-le pour ajouter ces détails. Publier. Nous y voilà. Maintenant, comme vous pouvez le constater, ce n'est pas aussi vaste que ce que nous avons ici. Nous pouvons donc sélectionner cette option et augmenter le rembourrage sur les côtés, peut-être le rembourrage à gauche, 50, le rembourrage à droite, 50 ou peut-être 150, et ici 15250, 250, ou disons 200 ou disons Jouez simplement avec les valeurs jusqu'à ce que vous soyez satisfait. C'est 2 500. Désolée pour ça. Publier. 30. Affichez le formulaire de contact: Alors maintenant, n'oubliez pas que nous sommes ici dans Forminator. Nous venons de créer notre formulaire, et lorsque nous l'avons créé, on nous a donné un code court, mais cette fenêtre contextuelle a disparu. Donc, pour accéder au code court, il suffit de se rendre ici et de copier le code court. Ouais. Donc, en revenant ici, nous pouvons sélectionner et ajouter une nouvelle section. Ou nous pouvons le dupliquer, simplement le dupliquer. Et supprimons tout ce qui s'y trouve. Supprimons le rembourrage que nous avons appliqué, ou laissons-le simplement là parce que nous voulons vraiment qu'il ait ce rembourrage Mais pour coller le code court, nous devons rechercher l'élément de code court. Donc, code court, déposez-le ici. Ensuite, collons le code abrégé que nous venons de copier à partir d'ici. Collez-le ici, et le formulaire apparaîtra ici. Publiez donc Preview. Et voilà. Maintenant, comme je l'ai dit, nous avons en fait besoin de plus de rembourrage sur les côtés. Nous devons donc augmenter ce chiffre à 300 ou 400. Disons maintenant que 300 par 300 publient. Maintenant, si nous voyons ceci, d' accord, j'aime cette largeur. Notre page de contact commence donc à prendre forme. Si nous faisons défiler la page, voici notre photo. Qu'est-ce qui ne va pas avec ça ? Rafraîchir Très bien, nous allons nous remettre au travail là-dessus. Ne t'inquiète pas. 31. Stylisez le formulaire de contact: Nous devons donc maintenant le styliser un peu car, comme vous pouvez le voir ici, j'ai d'épaisses bordures grises. Cela occupe toute la largeur. Alors, comment y parvenir ? En revenant ici et en revenant au formulateur, aux paramètres du formulateur. Maintenant que nos champs sont ajoutés, passons à l'apparence en cliquant sur cette apparence ou en bas ici. Donc, apparence, nous pouvons choisir d'y aller. C'est ce que j'ai choisi pour le site de référence, mais laissez-moi m'en tenir à celui-ci pour le moment. Et nous voulons changer les couleurs. Utilisons des couleurs personnalisées. Pour le bouton d'envoi, je veux que nous utilisions cette couleur. Donc, en revenant ici, en sélectionnant ceci, nous voulons récupérer ce code couleur, revenir ici. La couleur de fond, ça et oh, attends, on le colle ici, et la couleur du texte doit être blanche. Donc, si nous le prévisualisons, c'est ce que nous avons. Maintenant, n'oubliez pas que nous avons sélectionné l'apparence sans bordures. Nous devons donc donner une couleur d'arrière-plan aux champs de saisie et de la zone de texte . La couleur de fond peut donc lui donner un gris très clair, peut-être jusqu'à ce moment-là, si je le prévisualise, oui, vous pouvez le voir Je ne sais pas si vous pouvez le voir, mais vous pouvez l' assombrir si vous le souhaitez, ou utiliser des bordures ou simplement choisir une couleur de bordure ici. Disons cette couleur, aperçu. Je ne sais pas pourquoi ça n'apparaît pas. Choisissons une couleur foncée et une autre couleur juste pour le prévisualiser. Bien, nous ne pouvons pas définir de couleur de bordure car nous l'avons sélectionnée sans la bordure. Sélectionnons-le donc. Maintenant, si nous revenons ici et que nous le prévisualisons, c'est vrai. Oui, maintenant la couleur prend effet, mais nous voulons que la couleur soit un gris clair Vous pouvez donc saisir manuellement F 9f9f9 ici. Prévisualisons les modifications. J'aime bien ça. Sur Ha, la couleur de la bordure doit rester la même. Lorsqu'elle est focalisée, la couleur de la bordure peut désormais être ce gris plus foncé. C'est ce que je veux dire. Laisse-moi te montrer. Sur Ha, rien ne change, mais lorsqu'il est actif, il a cette couleur de bordure. Mets-le à jour. Et maintenant, si nous allons dans l'éditeur de contacts, sélectionnons l' élément de code abrégé et que nous l'appliquons, nous appliquerons les modifications que nous avons apportées dans le backend. Nous y voilà. Comme vous pouvez le voir, les couleurs ont pris effet, et maintenant nous pouvons prévisualiser pour mettre à jour l'aperçu. Nous y voilà. J'adore ce que nous avons, mais ces angles sont trop pointus. J'adore mes coins légèrement arrondis comme ça. Alors revenons ici. Et avant d'aller trop loin, je voudrais retourner dans les champs. Ici, nous pouvons modifier ces textes réservés, tout cela Donc, ici, M. Moneybags postule peut venir ici par e-mail et me dire « sur leur site », Appliquer Commencez à taper. Appliquer. Mettre à jour, prévisualiser. Nous y voilà. L' espace réservé a donc été mis à jour Et si vous souhaitez changer sa couleur, vous pouvez accéder à l'apparence, revenir aux couleurs et à la zone de saisie et de texte. Voyons voir. Placeholder. Il y a donc la couleur et il y a la couleur du texte. espace réservé est donc ce texte, mais la couleur du texte est celle du moment où vous commencez à taper Il s'agit donc de deux types de texte différents. Vous pouvez donc définir la couleur ici. Vous pouvez dire que l'espace réservé doit être d'un gris aussi clair. Voyons à quoi ça ressemble. Comme ça. Ou tu peux l'assombrir. Peut-être que c'est comme ça. Ensuite, pour la couleur du texte, vous pouvez définir quelque chose de sombre ou peut-être cela. Aperçu. Si je commence à taper, c'est très visible. Mets-le à jour. Et maintenant, pour apporter ces autres modifications afin d'ajouter un coin arrondi et de faire en sorte que ce bouton occupe toute la largeur, nous devrons utiliser du CSS personnalisé 32. CSS personnalisé de Forminator: Revenons donc ici et en faisant défiler l'écran vers le bas, nous aurons un champ pour le CSS personnalisé, activons-le, et maintenant nous avons un champ pour saisir Et le formulateur a pensé à l' avance et nous a même fourni des sélecteurs que nous pourrions utiliser. Par exemple, pour affecter la zone de texte, nous pouvons sélectionner ce Et tout ce que nous mettons entre ces deux crochets s'appliquera à l'élément de la zone de texte. Je veux donc dire un rayon de bordure de cinq pixels. Si je prévisualise cela, vous remarquerez maintenant que la zone de texte a ce coin arrondi, mais que les entrées sont des champs de saisie. Il s'agit d'un champ de zone de texte. Faisons donc de même pour les champs de saisie. Mettez-y donc les voitures souris et entrez, puis entrez. Entrez. Nous pouvons le copier et le coller ici. Aperçu. Et maintenant, il est également arrondi. Je veux dire, pour le moment, je pense que c'est trop décoloré parce que nous aurions dû au moins rendre les bordures ou le texte de l'espace réservé plus visibles Permettez-moi donc de le mettre à jour avant passer à autre chose et de revenir aux couleurs. Je pense que la couleur de la bordure peut être plus foncée, aussi foncée que cela. Je pense que maintenant ça a l'air beaucoup mieux. Cela peut le rendre légèrement pâle. Aperçu. Ouais C'est bon. Maintenant, vous remarquerez que nous n'avons pas de sélecteur pour le bouton, mais depuis toutes les années que j'utilise formator, le sélecteur pour le Le bouton Soumettre est toujours le formulateur qui suit sa convention. Bouton Soumettre Entrée, bouton Formateur, Donc je vais juste le copier, le coller dedans. Entrez. Tout d'abord, prévisualisons les modifications qui s'y trouvent. Et maintenant, comme vous pouvez le voir, il est également arrondi. Mais maintenant, nous pouvons dire 100 % de largeur, attendez. Avec un aperçu à 100 %. Allons-y. Ça a l'air bien mieux maintenant. Mettre à jour. Il est mis à jour, enregistré. En revenant ici, sélectionnez l' élément de code abrégé et appliquez-le. Et maintenant, si nous prévisualisons les modifications, c'est parti. Notre formulaire a maintenant l'air génial. 33. Page de contact réactive: C'est bon. Alors maintenant, pourquoi ne pas aller de l'avant et le rendre réactif très rapidement. Pour en revenir à cette page, rendons cette page réactive. Passage en mode tablette. Comme vous pouvez le constater, le rembourrage que nous avions en mode bureau est toujours appliqué Donc, en sélectionnant cette option avancée, nous voulons faire cette rupture. Laisse-le là exactement tel qu'il est. En le sélectionnant également. Détruisons ça. Et nous y voilà. Plus rien à publier. Donc, si nous voyons cela, alors Control Shift I, c'est à cela que cela ressemble sur un iPad pro. Si nous passons à un appareil mobile comme celui-ci, nous pouvons ajouter un peu de rembourrage sur le côté. En passant au mobile, en sélectionnant ceci, nous pouvons dire « cassez ça Puis à gauche, 20 à droite, 20. Le même cas s'applique à cela. Détruisez cette année 2020. Sélectionnons-le. Nous pouvons réduire la police pour en faire une ligne, publier. Allons-y. Alors maintenant, ça a l'air génial sur un téléphone portable. Ouais. Voici donc comment créer un formulaire Wordpress à l'aide de forminator Comme je l'ai mentionné, Formator est l'un de mes plugins Wordpress préférés. Et quand il s'agit de créer des formulaires, Formuator est mon plugin de formulaire préféré, point final. Dans la leçon suivante, commençons à configurer notre boutique WooCommers, car nous avons maintenant la page d'accueil et la page de contact Nous voulons maintenant créer la boutique. Comment s'y prend-on ? comment procéder dans la leçon suivante. 34. Configurer WooCommerce: Il est donc temps de configurer Woo Comers sur notre site Web. Passons donc aux plugins, Add New Noll de type WooComers Et voilà, avec plus de 8 millions d'installations actives, je vais donc installer NL. Et allons-y et activons-le. Cela ouvrira donc un assistant de configuration que nous allons parcourir étape par étape. Nous y voilà donc. Si vous souhaitez partager des données anonymes, vous pouvez les laisser activées pour les aider à améliorer leur plugin. Vous pouvez ignorer cette configuration guidée et la faire vous-même dans le tableau de bord ou continuer avec cet assistant de configuration. Maintenant, allons-y et ignorons cette configuration guidée. Pays dans lequel vous vous rendez Où est située votre entreprise ? Sélectionnez donc votre pays. Je suis au Kenya, donc je vais taper Kenya. Attends, je peux y retourner ? D'accord, nous n'avons pas besoin de cette configuration guidée parce que je suis au Kenya, allez dans mon magasin Maintenant, si j'ai ignoré la configuration guidée, c'est pour vous aider à comprendre comment configurer WooComas dans C'est ici que vous pouvez poursuivre la configuration. Nous aurions suivi les mêmes étapes. La première option consiste donc à personnaliser notre boutique. Donc, si je clique dessus, nous allons être redirigés vers une page. Tu n'as pas besoin de faire ça parce que je veux juste te montrer quelque chose. Nous utiliserons ce personnalisateur un peu plus tard pour créer nos pages de paiement, notre page de panier, etc. Je voulais juste vous montrer en quoi consiste la première étape. Et vous avez la possibilité de choisir des modèles prédéfinis par l'équipe Wocomer ou de concevoir votre propre thème. Et c'est ce que nous allons faire plus tard. Donc, comme vous pouvez le constater, la deuxième étape consiste à créer un produit, et c'est ce que nous allons faire dans la prochaine leçon. Je te verrai bientôt. 35. Créer un produit WooCommerce: Il est donc temps de créer notre premier produit Wocomers. Comme vous pouvez le constater, il s'agit de la deuxième étape. Maintenant, je peux cliquer dessus et être redirigé vers l'endroit où nous allons créer un nouveau produit, mais je veux que nous le fassions de la manière que vous allez créer le reste des produits, car cela fait partie de l'assistant et nous ne voulons pas suivre l'assistant. Je veux vous montrer comment créer un produit lorsque cet assistant n'est plus là. Alors, produits, passons à tous les produits. Tout d'abord, pour voir ce que nous avons ici. Et maintenant, nous n'avons pas de produit. Disons créer un produit. Donnons-lui un nom. Vous pouvez faire cette visite si vous le souhaitez, mais, bien sûr, je vous emmène une visite guidée pratiquement, donc vous n'avez pas besoin de le faire. Maintenant, je veux passer à notre site Web de référence ici aller dans la boutique et ouvrir l'un des produits ici. Disons cette perceuse à percussion. Et je veux que nous créions quelque chose comme ça. Comme vous pouvez le constater, la première chose dont nous avons besoin est un nom. Donnons-lui donc simplement le nom de cette perceuse à percussion. Je vais donc simplement le copier. Bien sûr, pour vous, vous allez taper le nom, le produit réel que vous souhaitez vendre. Et maintenant, avec cette courte description, j'aime en faire un résumé des principales caractéristiques de ce produit, points et rien d'autre. C'est ce que nous appelons une courte description. Et puis voici la longue description. Alors maintenant, je veux copier la longue description , que vous allez taper pour vous, mais je la copie juste pour gagner du temps. Copiez donc à juste titre. Pour en revenir à la description du produit, c'est là que vous placez cette longue description. Et maintenant, si nous faisons défiler la page vers le bas, nous avons la brève description du produit. C'est là que nous avons mis cette courte description. Je vais le copier et le coller ici. Nous avons maintenant tous les outils d'édition de texte courants dont vous pourriez avoir besoin. Donc, si vous le tapez vous-même, vous voudrez utiliser cet élément de liste à puces Donc, tout ce que vous avez à faire est d' entrer une nouvelle fonctionnalité, Enter et tout ça. Assurez-vous simplement de l'activer. Très bien, alors fais-le. Nous pouvons également désormais fournir les données du produit. Il s'agit d'un produit simple. Il peut également s'agir d'un produit groupé. Il peut s'agir d'un produit d'affiliation et tout ça. C'est un produit que nous vendons sur notre site Web. Il ne s'agit pas d'un produit virtuel. Il ne s'agit pas d'un téléchargement numérique. S'il était téléchargeable, vous sélectionneriez Virtuel et téléchargeable. Virtuel signifie peut-être un cours en ligne. téléchargeable, bien sûr, est un fichier que les gens peuvent télécharger après avoir payé. Vous pouvez également définir la devise. Nous allons voir comment changer de devise. heure actuelle, le montant est fixé aux shillings kenyans parce que j'ai sélectionné le Kenya pour mon lieu Mais vous pouvez le convertir dans n'importe quelle devise. Je vais mettre qu'est-ce que c'est ? Une perceuse. Oui, peut-être 6 000 shillings En réduction, 5 500 shillings. Laissez-moi voir ce dont nous avons besoin d'autre pour le moment, car il y a certaines choses que je veux que nous abordions dans une leçon séparée différente. Nous pouvons également définir l'inventaire, suivre la quantité de stock pour ce produit. Ainsi, chaque fois qu'un client achète le produit et qu'il s'agit d'un produit physique, vous savez que votre stock diminue désormais d'un. Dans ton magasin. Le site Web gardera donc une trace pour vous. Vous pouvez changer le stock de départ vendu individuellement. Certaines de ces choses sont des choses sur lesquelles vous pourrez en savoir plus lorsque vous en apprendrez plus sur Wocomers Ce qui nous intéresse à l'heure actuelle, c'est de créer le produit et de comprendre le flux de travail nécessaire à la création de produits et à leur vente. Vous pouvez en savoir plus sur WooComers en visionnant des tutoriels. Passons maintenant à l'expédition. Je vais ignorer l' expédition car nous n'allons pas couvrir les frais d'expédition pour le moment. Passons aux produits liés. Nous allons examiner cela. Ne t'inquiète pas. Attributs avancés. Oublions tout ça. La prochaine chose que nous voulons faire est d'ajouter une image du produit. Je vais donc sélectionner l'image du produit ici. Et c'est la perceuse à percussion. Passons donc au dossier Assets. Il s'agit d'un produit ouvert pour perceuse. Et maintenant, publions-le pour le moment. Nous pouvons donc prévisualiser les modifications. Et maintenant, félicitations. Vous avez créé votre premier produit. Maintenant, si vous le regardez, il n'est pas classé. C'est une perceuse à percussion. Voici un fil d'Ariane. Il s'agit simplement d'un chemin pour indiquer où il se trouve exactement sur votre site Web. Nous avons ensuite notre brève description, puis la description longue. Et si les clients ont laissé des commentaires, vous pourrez les voir ici. Les clients pourront consulter les avis ici. Comme vous pouvez le constater, il s'agit d'une simple page produit. Si je passe à cela, vous remarquerez que nous avons également des outils de catégorie, des tags, et la marque ici est inko Et nous avons ceci que vous aimerez peut-être aussi, et c'est un exercice différent. Mais si quelqu'un cherche cet exercice , cela pourrait l' intéresser. Et nous avons également un produit connexe, qui est un jeu de clés, car ils appartiennent tous la même catégorie d'outils Comment s'y prend-on ? Nous verrons cela dans la prochaine leçon. À voir prochainement. 36. Taxonomies de produits: Il est donc temps d' apprendre comment ajouter ces catégories et tags ainsi que la marque. Et c'est ce qu'on appelle des taxonomies dans le monde de Wordpress. Les taxonomies vous aident simplement à organiser votre contenu, car vos produits peuvent appartenir à différentes catégories Et au sein de ces catégories, il peut y avoir des sous-catégories de produits Ainsi, les clients peuvent trouver ce qu'ils recherchent beaucoup plus rapidement. Alors, comment s'y prendre ? Passons à notre site Web. Et je sais, bien sûr, que nos produits n'ont pas de bouton en papier, et c'est ce que nous allons faire lors la prochaine leçon lorsque nous ajouterons le système de paiement. Pour en revenir à l'éditeur, comme vous pouvez le voir, notre produit se trouve actuellement dans la catégorie « Non classé ». Il s'agit de la catégorie par défaut dans WordPress, et vous ne pouvez jamais supprimer cette catégorie car lorsque vous supprimez d'autres catégories et produits avaient été affectés à ces catégories, mais que vous les avez supprimés par défaut, ces produits seront désormais placés dans la catégorie Non classé. Vous ne pouvez donc pas supprimer la catégorie non classée. Maintenant, pendant que vous créez un produit, vous pouvez rapidement le placer dans une autre catégorie en cliquant sur Ajouter Cela entre donc dans la catégorie des outils. Disons donc tools et Enter. Alors maintenant, décochons les catégories et mettons cela à jour. Prévisualisons les modifications. Et maintenant, comme vous pouvez le constater, la catégorie est celle des outils. En y retournant, nous pouvons également lui donner une étiquette. Maintenant, c'est un exercice. Donc, sous outils, nous pouvons avoir une sous-catégorie appelée forets. Les tags sont simplement des libellés qui indiquent les sous-catégories d'une catégorie. Alors disons, oui, des exercices. Et vous pouvez ajouter plusieurs étiquettes à un produit car il s'agit non seulement d'une perceuse, mais aussi d'une perceuse à percussion. Il existe une perceuse sans impact et une perceuse à percussion, mais ce sont toutes des foreuses Vous pouvez donc également parler de perceuses à percussion. Donc, si je vais ici pour mettre à jour et prévisualiser les modifications. Maintenant, comme vous pouvez le constater, notre produit porte étiquettes appelées perceuses et perceuses à percussion S'il ne s'agit pas d'une perceuse à percussion, nous ne lui attribuons pas l' étiquette ou l'étiquette de la perceuse à percussion. J' espère que tu comprends. Maintenant, non seulement c'est une perceuse, mais c'est une perceuse fabriquée par une marque spécifique. Peut-être qu'un client recherche une marque spécifique. Nous avons également cette option ici. Woo Comer a pris une longueur d'avance et a déclaré : «  Fournissons aux gens tout ce dont ils ont besoin pour rendre leur boutique en ligne robuste et puissante Ajoutons donc une nouvelle marque. Disons Milwaukee et Enter. Maintenant, je vais le mettre à jour et passer en revue les modifications. Nous y voilà. La marque est donc Meal Work. J'adore ça. Alors maintenant, pour en revenir, si nous regardons le côté gauche du menu, comme vous pouvez le voir, nous avons des catégories, des tags et des marques. Vous pouvez donc créer davantage de tags catégories et de marques à l'avance, avant même de créer vos produits. Voyons donc comment procéder, car c'est très utile, la possibilité de créer vos marques et toutes ces autres taxonomies à l'avance. Je vais donc créer je vais passer aux catégories car nous l'avons mise à jour. Fermez ça. Maintenant, comme vous pouvez le constater, nous avons deux catégories car nous avons l'original et la catégorie catégorisée et la catégorie d'outils que nous avons créée. N'oubliez pas que je vous ai dit que vous ne pouviez pas le supprimer. Comme vous pouvez le voir, lorsque je passe la souris dessus, il y a une option de suppression, mais pas cette option Créons maintenant d' autres catégories. Disons des motos. Disons les ordinateurs, tout ce qui trait aux ordinateurs, aux véhicules. Je pense que c'est suffisant. Tout comme nous l'avons fait ici, nous pouvons également accéder aux marques et ajouter quelques marques. Nous allons vendre, disons, l' outil Milwaukee First Quoi d'autre ? Totale. Ce sont des marques et des vidéos différentes, car vous allez également vendre des GPU Disons Intel. Nous ne vendons pas uniquement des GPU Intel, NVDA ou AMD uniquement. Gagnez de l'argent, nous vendons aussi des vêtements, des vêtements de créateurs. Nous avons donc toutes ces marques. Nous pouvons également ajouter des balises, mais j'aime bien ajouter des balises lorsque je suis en train de modifier activement un produit spécifique, car c'est à ce moment-là que je peux réfléchir à la balise que je veux lui attribuer. Mais bien sûr, vous pouvez taper balises qui vous viennent à l'esprit ici. Donc, si je dois ajouter un nouveau produit, encore une fois, je peux simplement passer ici. Et oui, créons cette clé. Et c'est parti. Set de clés donc haut Copiez ça. Pour vous, vous allez taper le nom de votre produit. J'ai juste utilisé le même texte. l'ai collé partout car il ne s'agit que d'un espace réservé pour vous. Collez ça. Prenons également les principales fonctionnalités. Collez-les ici en tant que résumé. Donnons-lui un prix. C'est un ensemble de gamme haut de gamme, donc je vais lui donner peut-être 3 500 shillings Il est proposé pour 2 900 shillings. Et maintenant, si nous examinons nos catégories ci-dessous, vous remarquerez que toutes les catégories que nous avons créées sont disponibles. Il s'agit d'un jeu de clés. Nous pouvons le placer sous les outils. Pour les étiquettes des produits. C'est ce que je voulais dire quand j'ai dit que j'aime placer des tags lorsque je modifie un produit. Ce sont des clés. Entrez-le. Pour la marque, disons qu' elle est fabriquée par Milwaukee. Définissons une image du produit. Passons à notre système et obtenons l'image du produit de la gamme haut de gamme. Nous y voilà. Publions-le. Au moment où vous l'enregistrez, il y aura ce permalien Nous parlerons des liens primaires plus tard car c'est très important pour le référencement. Mais ce sera l' URL que les gens verront ici, dans la barre d' adresse, publier. Passons en revue les modifications. Et nous y voilà. Et les gens peuvent cliquer dessus pour le voir dans toute sa splendeur. Et comme vous pouvez le constater, catégorie outils, clés à étiquettes, marque Milwaukee Et si nous allons ici, automatiquement, tous les produits de cette catégorie seront listés ici, mais nous n'aurons qu'une limite de quatre produits connexes. Si nous avions trois autres produits sur les outils, ils seraient là tels quels. Laisse-moi te montrer ici. Nous avons ici deux produits connexes sur le site de référence. Comme vous pouvez le constater, il s'agit d'un système très robuste pour vendre vos produits et permettre aux gens de trouver très rapidement ce qu'ils recherchent, une belle boutique en ligne. Maintenant, je pense que c'est ce que nous allons atteindre pour moment, car la prochaine chose que je veux que nous examinions est de savoir comment connecter votre boutique WooCommerce au papier afin que vous puissiez accepter les paiements Nous avons dit qu'à la fin de ce cours, vous devriez être en mesure de vendre vos produits dans la vraie vie. Il ne s'agit pas d'un site de démonstration. Il s'agit d'un véritable magasin de commerce électronique. Je te verrai bientôt. 37. Intégration PayPal de WooCommerce: Je me réjouis vraiment de votre retour. Il est maintenant temps d'ajouter un système de paiement à notre site Web WordPress. En d'autres termes, il est temps d' intégrer le papier à Woo Comers. Mais avant d'y aller, vous remarquerez qu' ici, sur mon site de référence, permettez-moi de passer ici. Si je dois me laisser aller au magasin et ouvrir ce petit tracteur ici. D'accord, je pensais que cela m' avait permis de revenir ici. Ce n'est pas ça. Passons à cet original. Bien, je voulais vous montrer comment vous en débarrasser au cas où vous vendiez un produit numérique Vous pouvez vous en débarrasser car vous ne pouvez pas vendre deux copies d'un produit numérique. Cela n'a donc aucun sens. Alors permettez-moi de revenir ici. Nous avons la même chose ici. Nous pouvons donc revenir sur le produit lui-même. C'est ici que nous avons modifié l'ensemble des loyers majorés, et nous pouvons dire qu'il est vendu à l'unité. En d'autres termes, limitez les achats à un article par commande. Mettez-le à jour, prévisualisez les modifications. Et maintenant, vous n'avez plus qu'une annonce à la carte, rien d'autre. Parce que s'il s'agit d'un produit numérique, peut-être d'un produit téléchargeable, vous pouvez le supprimer. Mais il ne s'agit pas de vendre des produits numériques. C'est généralement ainsi que l'on crée une boutique Wocomers. Encore une chose, bien sûr, mon site Web de référence a ces coins arrondis qui donnent à l'image un aspect impressionnant Les produits ici et même en boutique ont ces coins arrondis qui la rendent géniale. Mais sur le site web que nous avons actuellement, ils sont très pointus. Je vais vous montrer comment changer cela. Pour y revenir, afin d'intégrer Woo commers au papier, nous devons ajouter un plugin créé par WooCommers pour s'intégrer au Ajouter un nouveau. Les plug-ins en ajoutent de nouveaux. Je vais taper WooCommers une fois de plus, Enter. Et voici le plugin WokersPapal Payments. Installez-le maintenant. Et activons-le. Voilà, les paramètres de WokmersPapal. Passons aux paramètres. Et maintenant, nous avons cette option pour activer le paiement PayPal. Alors cliquez dessus. Nous vendons des biens physiques. Si vous vendez des biens virtuels, c'est ce que vous devez vérifier. Marchandises physiques, continuez. Disponible avec une application supplémentaire. Oui, allons-y. Sélectionnez cette option car elle nous permettra d' accepter les cartes de débit et de crédit sur notre site Web. Connectez-vous ensuite à papal. Cela ouvrira une fenêtre vous permettant de vous connecter à votre compte PayPal. Comme vous pouvez le voir, j'ai un onglet Payal qui était déjà ouvert, mais laissez-moi simplement me connecter Entrez votre e-mail et dites « suivant ». Ensuite, connectez-vous. Je souhaite saisir mon code de sécurité pour des raisons de sécurité. J'utilise une application d'authentification. Restez prudents. Voyons s' il va se connecter. Si votre compte PayPal est bien, vous êtes prêt. Vous êtes lié à Woocmers et prêt à accepter des paiements sur votre site Revenir à la page WooCommers. Alors maintenant, félicitations. Maintenant, votre WooComers est connecté à votre compte PayPal, et chaque fois que quelqu'un achète quelque chose dans votre boutique, l'argent sera envoyé directement sur votre compte PayPal Passons donc aux modes de paiement. Et jetez-y un coup d'œil. Vous pouvez donc également l' activer si vous souhaitez accepter les cartes de crédit et de débit. Mais avant cela, revenons ici rechargeons cette page et voyons si nous allons en arriver là , payer avec PayPal Et si quelqu'un clique, cela s'ouvrira. C'est bon, quelque chose s'est mal passé. Je pense que c'est parce qu' il essaie de se connecter à mon propre compte Payal, ce qui n'est pas possible Mais encore une fois, en revenant ici, nous pouvons activer les paiements par carte de crédit et de débit et enregistrer. En revenant ici, si je rafraîchis la page, si nous disons « ajouter à la carte », OK, le produit avait déjà été ajouté à la carte lorsque nous avons cliqué sur Payer avec du papier Donc pas de problème car il ne peut pas effectuer paiement sans avoir d'abord ajouté le produit à la carte. Mais maintenant, si nous allons voir la carte, comme vous pouvez le voir, notre produit est répertorié ici, et nous avons la possibilité de procéder au paiement. Si quelqu'un souhaite acheter une plus grande quantité de ce produit, nous avons limité le nombre de ces personnes pouvant acheter. Revenons en arrière pour revenons simplement en arrière. Comme nous n'avons pas encore créé de page de boutique, nous devons rechercher manuellement différents produits. Je veux l'ajouter à la carte. Et c'est ce qui devrait se passer lorsque vous n'avez pas encore ajouté de produit à votre carte. Il a été ajouté à votre carte. Maintenant, si nous passons à Afficher la carte, comme vous pouvez le constater, il n'y a aucune limite quant au nombre de cartes que vous pouvez acheter, vous pouvez en ajouter deux, et ce sera multiplié par deux si nous mettons à jour la carte à 11 000 Allons-y. Et maintenant, si nous passons au paiement, le client doit renseigner ces informations. Ceux en rouge sont obligatoires, y compris leur lieu de livraison. Et nous leur avons également fourni ces options. Ils peuvent utiliser des cartes de débit ou de crédit. S'ils le sélectionnent, le bouton deviendra celui-ci. Et s'ils essaient de payer, ils recevront tout d'abord cette notification pour renseigner ces informations. Je pense donc que nous avons abordé peu près tout ce que je voulais que nous abordions. Maintenant, si nous allons ici, lorsque nous l'avons sélectionné, ce bouton est apparu. Mais si nous venons ici, nous pouvons ajouter une description de ce que nous voulons lorsque les gens cochent cette case. Alors voyons voir. Vous pouvez également utiliser vos cartes de débit ou de crédit. Cliquez sur le bouton ci-dessous. Enregistrez les modifications. Sauvegardez ça. Et maintenant, si nous allons ici et actualisons la page, voyons ce que nous obtenons. Nous y voilà. Vous pouvez également utiliser votre carte de débit ou de crédit. Cliquez sur le bouton ci-dessous. Exactement Je pense qu'en gros, c'est ainsi que vous configurez vos paiements. Bien entendu, il existe de nombreuses autres options sur ce que vous devez faire. Voyons voir. Paramètres de WooComers. Passons aux paramètres. Bien, si nous passons au sous-général, je ne veux pas vraiment que nous nous attardions trop sur cette partie car il y a tellement de paramètres ici qu'ils rendraient cette leçon trop longue Mais tant que vous avez connecté vos ordinateurs au papier, vous exposez vos produits, vous pouvez ajouter des produits à votre panier et que les utilisateurs peuvent accéder au panier et payer, et que les utilisateurs peuvent accéder au panier et c'est tout ce dont vous avez besoin pour commencer Ensuite, vous pouvez regarder d'autres didacticiels expliquant à quoi servent tous ces paramètres. Mais voyons si nous pouvons trouver quelque chose de plus à changer, comme la devise. N'oubliez pas que nous devions changer de devise, je dirais le dollar américain. 38. Paramètres WooCommerce: accord, vous pouvez définir où les virgules et les points sont placés Vous pouvez définir vos coupons de réduction. Vous pouvez activer les taux d'imposition et les calculs. Vous pouvez activer les points de vente où vous vendez ou ceux où vous n'allez pas expédier. Vous pouvez définir toutes ces choses qui, à mon avis, sont assez évidentes. Permettez-moi d'enregistrer les modifications. Nous sommes juste en train de passer à la vitesse supérieure. Nous sommes juste en train de passer à travers. Passons aux produits. Je pense que nous avons encore quelques points importants à aborder. Nous avons quelques points que nous pouvons examiner ici. Redirige vers la page de la carte après un ajout réussi. Cela signifie que chaque fois que quelqu'un clique, revenons à Je sais que la page de la boutique doit être slash SHOP Si je le saisis. Oui, nous allons voir comment ajouter cette boutique au menu. Mais si j'ajoute un produit à la carte, n'oubliez pas qu'il est déjà ajouté à la carte que je ne peux donc pas l'ajouter. Je vais recevoir un message d'erreur. Comme ça. Mais lorsque vous ajoutez un produit à la carte, vous souhaitez peut-être ajouter d'autres produits à la carte. Vous ne voulez pas être redirigé vers la page du panier dès que vous ajoutez un seul produit à la page de la carte. Ne l'activez donc pas. Euh, voyons voir. Quoi d'autre ? Vous pouvez définir vos unités de poids et activer les évaluations de produits ? Oui. Les avis ne peuvent être laissés que par des propriétaires vérifiés. Je souhaite que seules les personnes ayant acheté et utilisé mon produit laissent des avis. Et affichez l'étiquette de propriétaire vérifié sur tout avis laissé par un client, montrez qu'il s'agit d'un propriétaire vérifié, personne qui a acheté le produit. Activez le classement par étoiles. Le nombre d'étoiles devrait être obligatoire et non facultatif. Avant que quelqu'un puisse laisser un avis, il doit attribuer une note par étoiles. Je pense que ce sont de très bons réglages importants. Ici, lorsque nous avons installé WooComers, il a automatiquement créé une page appelée Shop Shop Et c'est comme ça que j'ai su que ça allait aller. La page de la boutique est Shop. Assurez-vous donc que c'est ce qui est sélectionné ici. Passons à Si vous vendez des produits téléchargeables, c'est ici que vous devez vous adresser. Inventaire. Voyons voir ça. Une autre chose que je veux que nous gardions à l'esprit ici est de revenir à la section générale Activer les boutons d' ajout d'Ajax aux cartes dans les archives Lorsque nous disons Ajax activer Ajax ajouter à la carte, nous voulons dire que lorsque nous ajoutons à la carte, n'actualisez pas cette page entière Il suffit de l'ajouter à la carte et de laisser la personne continuer ses achats. Donc, si je clique sur Ajouter au panier, nous aurons juste un petit messager, cochez Ajouter au panier. Cela a été ajouté. C'est ce que nous entendons par activer les boutons Ajax Ajouter au panier. Si je le désactive, enregistre les modifications et je retourne dans la boutique. Passons à la page du panier, dont je n'ai pas ajouté le lien ici. Passons au chariot. Maintenant, laissez-moi le retirer du panier. Et revenons maintenant à la page de la boutique. Je pense que c'était la clé à molette. Si nous ajoutons au panier, toute la page de la boutique est rechargée C'est donc ce que nous avons évité. Alors, allons-y. Sauvegardez ça. Paiements d'expédition, nous étions des paiements internes. Qu'y a-t-il dans Advanced ? Vous pouvez définir tous les e-mails que les clients recevront automatiquement lorsqu'ils achètent un produit, vous pouvez les modifier. Mais comme je l'ai dit, nous ne voulons pas prolonger cette leçon trop longtemps. Vous disposez désormais d'une base solide créer un produit WooComers, ajouter toutes les taxonomies et descriptions de produits associés, ainsi que pour intégrer le produits associés, ainsi papier Maintenant, une dernière chose que je veux que nous examinions est Inside here, vous pouvez également, comme je l'ai mentionné, lorsque vous consultez un produit, par exemple, cette gamme, elle contient des produits connexes. Ce sont des produits qui partagent la même taxonomie. Mais vous pouvez également recommander vous-même certains produits. Vous le faites manuellement lorsque vous modifiez un produit. Vous pouvez donc venir ici, dire «   produits liés » et rechercher un produit. Disons quels sont les produits que nous avons ici ? Je vais maintenant utiliser les produits que nous avons créés car c'est un exemple, Impact, commencez à taper Impact drill. Vous voudrez peut-être faire des ventes incitatives. Il s'agit peut-être d'un type de GPU plus cher, vous pouvez donc le vendre lorsque quelqu'un consulte la page produit de ce GPU moins cher Alors mettez-le à jour. Maintenant, si nous prévisualisons les modifications et que nous faisons défiler la page vers le bas, nous partons du principe qu'il s'agit d'un type plus cher du même produit, parce que vous faites des ventes incitatives, j'espère que vous comprenez cette analogie Sur ce, je tiens à vous féliciter. Vous avez désormais une boutique qui accepte les paiements. Vous pouvez maintenant commencer à vendre vos produits. Dans la leçon suivante, nous allons voir comment travailler dans la page de la boutique. Oui, parlons de la page de la boutique. Je te verrai bientôt. 39. Page de boutique: Je veux que nous parlions de la page de la boutique. Donc, si je peux passer à la boutique, nous y voilà. Maintenant, une chose que vous remarquerez, c'est que si je fais défiler la page vers le bas, nous avons ce pied juste là. Nous pouvons donc commencer par le supprimer. Mais avant cela, fermons toutes ces autres choses. Je souhaite également fermer PayPal. Revenons donc au tableau de bord. Permettez-moi de clore cela également. Pour en revenir au tableau de bord, passons aux pages. Et comme je l'ai mentionné, lorsque nous avons installé Woo Comers, il a généré automatiquement certaines pages pertinentes pour nous, comme la page de la carte, la page de paiement, la page de mon compte, la page de la boutique Passons donc à la page de la boutique et modifions-la. Maintenant, si nous passons aux paramètres Astro, désactivons les éléments, désactivons-les et disons « enregistrer Maintenant, si nous visionnons la page, nous aurions dû la consulter . Nous y voilà. Le pied de page Astra a disparu car nous avons notre propre pied de page. Maintenant, je pense que je devrais ajouter quelques produits supplémentaires ici parce que je veux cette page soit un peu plus longue. Je pourrais donc avancer rapidement dans cette partie au fur et à mesure que je crée quelques produits supplémentaires Je vous suggère de faire de même, puis je reviendrai bientôt. Je transfère donc rapidement cette partie. Je viens donc de terminer la création de ces produits supplémentaires, alors permettez-moi de les fermer maintenant. Et maintenant, si je rafraîchis la page de la boutique, nous avons maintenant plusieurs produits. Nous pouvons maintenant passer à la personnalisation. Et maintenant, cela nous amène aux paramètres Astra du front-end Comme je l'ai mentionné, lorsque vous cliquez sur Personnaliser, vous êtes redirigé vers les paramètres Astro. Astro sera suffisamment intelligent pour accéder automatiquement aux paramètres de la page spécifique que vous consultez Donc, à l'heure actuelle, parce que vous êtes sur la page de la boutique, cela nous amène à l'endroit où nous pouvons modifier la mise en page de la boutique. Nous pouvons donc passer à ce design. Et maintenant, ça a l'air légèrement différent. Ce n'est pas une énorme différence. C'est bon. Vous pouvez également limiter le nombre de produits que vous souhaitez par page. Nous en avons donc huit maintenant. Si nous avions 13 produits, nous obtiendrions automatiquement ce que nous appelons la pagination Alors laissez-moi vous le montrer sur ce site original ici. Si nous passons à la page de la boutique, parce que j'ai plus de 12 produits sur ma page, nous pouvons passer à la page deux. Et découvrez d'autres produits là-dedans. Autant de pages dont Wo Camers a besoin pour présenter vos produits. Vous pouvez donc limiter le nombre de produits que vous affichez par page. Que devons-nous examiner d'autre ? Afficher les produits, afficher les catégories, afficher ces paramètres sont des paramètres avec lesquels vous pourrez jouer plus tard. Tant que vous avez une boutique qui présente vos produits, c'est tout ce dont vous avez besoin pour le moment. Quoi d'autre est la disposition de la barre latérale ? Non, notre page n'a pas de barre latérale, ce n'est donc pas pertinent pour nous Zone de titre des produits. Je ne sais pas ce que c'est, et je pense que c'est une mission sur laquelle vous pouvez travailler vous-même. Allumons-le simplement pour voir ce qu'il affiche. Je pense que cela ajoute cela. Je ne vois pas quels autres changements cela ajoute. Je l'aime bien comme ça. Alors maintenant, vous remarquerez que nous pouvons également changer les couleurs ici. Donc, tout d'abord, permettez-moi de cliquer sur Publier pour enregistrer les modifications que nous avons apportées, puis de revenir en arrière. Nous pouvons également accéder à la page du produit unique pour la modifier si nous y passons et si nous ouvrons peut-être ce produit. Et vous remarquerez certains de ces paramètres ici. Ces paramètres de disposition de conteneur et de barre latérale de style de conteneur sont les mêmes que ceux que nous avons définis ici Donc, si nous passons aux produits, ouvrons ce petit taxi. Ces mêmes paramètres se trouvent ici, la mise en page du conteneur, mais je n'y touche pas parce que j'adore l'apparence de la page sans la toucher. Regardons donc ce que j' ai sur mes produits ici. J'ai pris le temps de vraiment me concentrer sur ce à quoi je voulais que cela ressemble. C'est donc ce que nous avons. Il s'agit d'un CSS personnalisé. Je vais vous montrer comment procéder, mais dans une leçon ultérieure. Donc, pour en revenir à la page de notre boutique, pouvons-nous y retourner sans quitter l'éditeur ? Non, alors personnalisez. Je pense que nous avons abordé tout ce que je voulais que nous abordions sur la page de la boutique. Sauf une chose. Je me souviens des couleurs. Pour en revenir au global, passons aux couleurs globales. C'est ici que vous pouvez modifier les couleurs générales de vos pages, les pages que vous n'avez pas modifiées avec un élément. Il ne s'agit pas d'une page élémentaire. Ainsi, par exemple, voyons quel accent change, les liens. Cela ne change pas. Qu'en est-il de l'accent ? Très bien, alors allons-y. Maintenant, nous voulons utiliser cette couleur. Je vais donc choisir le sélecteur de couleur, choisir la couleur et y saisir un pixel, copier Collons-le là-dedans. Maintenant, cela aura la couleur de notre site Web. Changeons les liens. Donnons ce blanc. D'accord, c'est tellement limitatif. C'est pourquoi nous avons besoin d'un CSS personnalisé, car maintenant, comme vous pouvez le voir, ces boutons, je ne vois nulle part où changer la couleur du texte de ces boutons. Attendre. Êtes-vous en train de me dire que je ne peux pas changer la couleur des boutons ? Revenons en arrière. Très bien, nous voici donc les boutons. Pouvons-nous changer la couleur du texte ? Oui. Nous voulons qu'il soit blanc comme ça. D'accord, nous pouvons définir la couleur de fond. Pouvons-nous changer cette couleur de fond à partir d'ici ? Oh, c'est vrai. Ces autres couleurs étaient donc les couleurs générales, mais maintenant nous sommes très précis quant à l'élément que nous allons définir. À l'autre endroit, nous étions en train de définir la couleur générale du thème. Mais ici, nous sommes très précis sur l'élément, le bouton. Couleur de la bordure, nous n'avons pas besoin de modifier la couleur de la bordure. Mais maintenant, je veux que nous utilisions la même couleur que celle que j'avais sélectionnée ici, juste pour maintenir la cohérence de la marque. Couleur de fond. Collez-le dedans. Sur Hova, vous pouvez lui donner cette couleur bleue. Choisissez donc la couleur. Pixel bleu. Donc, la couleur de fond sur Hover devrait être aussi bleue, comme ça. Cohérence de la marque. Très bien, alors laissez-moi terminer. Et maintenant, je pense que nous en avons terminé avec la page de la boutique. Encore une chose avant de partir. Ajoutons-le également à l'en-tête. Nous n'arrêtons pas de l'oublier. Donc, si je vais à cet endroit, passez le curseur au-dessus de celui-ci et de l'en-tête En fait, nous n'avons même pas besoin d'y aller. Alors laisse-moi juste arrêter ça et y retourner. Mais ici, passons aux menus d' apparence car nous devons l'ajouter en tant qu'élément de menu. Acheter, ajouter au menu. Et maintenant, faisons-le glisser juste après environ ou je garde généralement mes pages à propos en bas, pas les en-têtes. Quoi qu'il en soit, laissons-le là. Certaines personnes préfèrent qu'il reste au sommet. Donc, si nous revenons ici et que nous rechargeons le lien droit, nous avons maintenant la page de la boutique, et comme c'est la page active, elle est de cette couleur Et en fait, je pense que ces couleurs doivent être cohérentes avec la couleur d'une marque. Maintenant, il s'agit d'un site Web très basique. Vous avez tout le temps du monde pour le rendre exactement comme vous le souhaitez. Elément de menu. Passons à la couleur du texte de l'article. Choisissez la couleur. Je veux ce bleu. Copiez-le, collez-le dedans, publiez-le. Prévisualisez les modifications. Maintenant ça ressemble à ça. Passons à la page de la boutique. Et j'ai oublié de supprimer la page d'accueil. Supprimez et enregistrez. Viens ici, recharge la page Et maintenant, il est assez évident que lorsque vous voulez accéder à la page d'accueil, vous suffit de cliquer sur le logo. Donc, si nous cliquons sur le logo, nous serons redirigés vers la page d'accueil. Maintenant que nous avons créé nos produits, souvenez-vous que j'ai mentionné dans une leçon précédente que nous ajouterions produits en vedette à notre page d'accueil pour permettre aux utilisateurs de voir rapidement le produit en vedette. Alors, comment s'y prendre ? Nous verrons cela dans la prochaine leçon. Voir en bref. 40. Produits en vedette sur la page d'accueil: Comme nous l'avons mentionné dans une leçon précédente, nous voulons voir comment ajouter cette section de produits phares à notre page de destination. Donc, en passant à notre éditeur ici, nous sommes censés l'ajouter juste en dessous de cette flèche. Je vais donc modifier avec Elementor afin que nous puissions modifier la page. Et c'est parti. Je veux donc juste le dupliquer pour que nous ayons maintenant un conteneur supplémentaire juste en dessous. Supprimez-le. Et ajoutons un contenant pour contenir les produits en vedette. Comme d'habitude, intégrons cela à 100 % et fabriquons le contenant intérieur, 80 % de l'espace. Revenons ensuite à l'extérieur et mettons-le au milieu. Maintenant, si vous voulez afficher une grille des produits Wu Comers, si nous allons ici pour ajouter et dire «   Wu », vous remarquerez que ce ne sont pas des éléments libres Nous ne pouvons pas les faire glisser et les placer ici. Mais ce n'est pas un problème. Si nous passons à une page que j' avais ouverte à l'avance, Woo Camers nous fournit des codes abrégés pour afficher nos produits de différentes manières et afficher le panier, la page de paiement, tout cela Rappelez-vous que lorsque nous voulions afficher la page de contact, si je passe à la page de contact ici, nous avons utilisé le code court fourni par Forminator pour afficher le formulaire que nous avons créé dans le backend Je peux faire de même ici avec les produits Woo Comers. Alors ici, disons la catégorie de produit. Je recherche des produits phares. Je ne vois pas les produits en vedette. Disons simplement des produits. revenir ici, je vais sélectionner ceci et dire code court, afin que nous puissions ajouter un élément de code court et le déposer là. Ensuite, je vais le coller ici. Et nous y voilà. Maintenant , trop de produits sont exposés. Ici, je peux créer un espace et dire que limite est égale, disons, à quatre. Et maintenant, il n'affichera qu'une limite de quatre produits. Publiez ça. Maintenant, le problème avec cet élément est qu'il ne nous permet pas de modifier ces éléments, sauf si j'ai oublié quelque chose ici. Il ne permet pas de modifier ces produits. Voyons ce que j'ai sur mon site de référence. C'est à cela que cela ressemble sur mon site Web de référence, mais voici à quoi cela ressemble sur notre site Web. Tout d'abord, permettez-moi de sélectionner le conteneur ici et de créer un espace, la marge inférieure de 100 publiera et maintenant, si nous prévisualisons les modifications, faisant défiler la page vers le bas, D'accord. Alors maintenant, je ne voulais pas que les boutons soient aussi larges. Et oui, c'est ce que je voulais. Mais je pense que nous pouvons y arriver. Je crois que j'en ai utilisé 60 % sur l'autre site. Pour être sûr qu'il n' occupe pas trop de place ici. Oui, quelque chose comme ça, quelque chose de plus compact. Et je n'aime pas cet effet de survol ici, nous devrons donc le modifier ici Passons aux boutons globaux. La couleur du texte sur Hover doit également être blanche. Cela signifie que si je survole, il reste blanc. Publiez ces modifications. Et quittons cet endroit. Et maintenant, nous y voilà. Créons de l'espace ici. Je n'aime pas cette marge supérieure. Donc, marge supérieure de 100 publications, disons. Et maintenant, prévisualisons les modifications. Nous y voilà. Oh, nous devons y ajouter un titre. Donc, si je le duplique, faites-le glisser là-haut. Viens ici et duplique-le, fais-le glisser là. Et oui, supprimons-le. Et je veux le styliser et le mettre au centre. Prenez ce centre, sélectionnez-le comme contenu. Permettez-moi de dire produits phares. Je pense qu'il existe un code abrégé pour les produits en vedette. Je ne sais pas pourquoi les catégories de produits sont abrégées. Je ne sais pas pourquoi je ne trouve pas de code abrégé pour cela. Voyons s'il existe bel et bien. Permettez-moi simplement de dire le soulignement en vedette. Produits Underscore en vedette. Non, WooComers ne fournit pas cela, mais vous pouvez créer une catégorie appelée produits en vedette Et montrez cette catégorie. Donc catégorie de produit. C'est bon. Je l'ai finalement déchiffré. Je vais enfin pouvoir créer la catégorie de produits que je souhaite. Vous allez donc utiliser la catégorie de soulignement du produit, puis spécifier le numéro de catégorie, puis le nombre de produits que vous souhaitez afficher Donc, pour y revenir, il vous suffit d'accéder aux catégories et d'ouvrir une catégorie spécifique. Par exemple, en ce moment, j'ai ouvert des outils, donc des outils, disons, modifiez, et une fois que vous l'avez dit, regardez votre barre d'adresse et regardez la catégorie et l'ID de tag, qui sont 18 pour moi pour la catégorie des outils uniquement. Donc, revenons à la catégorie 18, puis limitez-les à quatre. Mais n'oubliez pas que nous n'avons créé que deux outils. Je ne pense pas avoir placé les autres produits dans l'autre perceuse de la catégorie des outils. Je n'ai même pas d'autre perceuse. Nous n'avons donc que deux exercices. Mais si, par exemple, je le modifie rapidement et que je change la catégorie en outils. Des outils aussi et mettez-les à jour. Ensuite, changez également cette catégorie futuriste de vélos électriques en outils, mettez-la à jour Nous avons maintenant quatre produits dans la catégorie des outils. Si je reviens ici et applique pour appliquer les modifications que nous avons apportées au backend, nous devrions maintenant avoir quatre produits dans cette catégorie. Même si nous en avions dix parce que nous avons déjà précisé que nous voulions une limite de quatre, nous n' en verrons que quatre ici. Publier. La résolution des problèmes a été intense. Maintenant j'ai au moins appris à créer mes propres codes abrégés de catégories de produits. Je suis très content d'avoir relevé ce défi, et vous m'avez également vu résoudre ce problème en temps réel Alors maintenant, allons-y. J'adore ça, mec. ce que je ressens. Ces produits sont trop chers, mais pas de problème. Fixez le bon prix. Ensuite, le dernier conseil que je voudrais vous donner est si vous allez au magasin et ouvrez Non, n' ouvrons pas un produit. OK, ouvrons-le et ajoutons-le à la carte. Je pense que nous l'avions déjà ajouté. Nous y voilà. Passons donc à la carte. Donc évidemment, je voulais vous montrer que vous pouvez évidemment également modifier cette page en allant dans le personnalisateur, vous serez automatiquement redirigé vers le personnalisateur Très bien, vous pouvez donc modifier le texte du bouton de la carte, dire « ajouter au panier » ou quelque chose comme ça, puis activer les ventes croisées. Je n'ai pas joué avec ça. Vous pouvez également y aller si nous procédons au paiement. Maintenant, vous pouvez également supprimer certains des champs dont vous n'avez pas besoin ici, donc passer au paiement. Le nom de l'entreprise est facultatif. La deuxième ligne d'adresse peut être masquée. Il n'est pas nécessaire d'afficher la ligne d' adresse deux. Vous pouvez également masquer le nom de l'entreprise. Si vous ne voulez pas voir si vous ne voulez pas que le client affiche le nom de l'entreprise, le champ Téléphone est peut-être obligatoire. Il peut être optionnel ou masqué. Surlignez les champs obligatoires avec un astérisque. Voilà. Vous pouvez créer un lien vers votre page de politique de confidentialité. C'est ce que je vais sélectionner. Vous pouvez créer un lien vers vos conditions d'utilisation. Cela permettra désormais aux clients de lire et d' accepter vos termes et conditions ici avant d'acheter auprès de votre entreprise. Si près de ça. Et nous y voilà. Je pense donc que cela suffit. Pour l'instant, nous avons au moins mis à jour notre page d'accueil avec la catégorie que nous voulons. Maintenant, n'oubliez pas que si vous recherchez une autre catégorie appelée produits en vedette, vous allez accéder aux catégories et dire « produits en vedette », puis « Entrez ». Et maintenant, nous y voilà, et vous devez attribuer cette catégorie aux différents produits dont vous souhaitez faire les produits phares. Et puis, bien sûr, maintenant, si nous modifions ces produits en vedette, comme vous pouvez le voir, son identifiant est le numéro 45. Donc, si vous allez ici au début, la catégorie sera la catégorie 45. J'espère donc que vous comprenez maintenant comment jouer avec les codes courts. Donc, pour l'instant, je vous verrai dans la prochaine leçon où nous parlerons de l'ajout de cette barre de recherche en haut, car nous voulons que les utilisateurs puissent rechercher des GPU ou quelque chose Comme vous pouvez le voir, nous avons cette recherche automatique Ajax Et si j'appuie sur Entrée, nous pourrons accéder aux résultats de recherche uniquement dotés d'un GPU. Alors, comment s'y prendre ? Voyons comment ajouter dans la leçon suivante. 41. Recherche de produits WooCommerce: Nous voulons maintenant travailler sur cette barre de recherche. Permettez-moi de revenir à notre éditeur ou à notre site Web, et laissez-moi simplement prévisualiser et passer au front-end. Pour ajouter une barre de recherche, nous devons utiliser un très joli plugin appelé Ivory search. Passons donc aux plug-ins, Ajouter un nouveau. Et ici, je vais chercher de l'ivoire. Et nous voilà à la recherche de Vinod Dalvivory. Alors installez-le et activons-le. Oublions cela. Et nous y voilà, Ivor Research Passons aux paramètres. Et par défaut, plusieurs formulaires de recherche nous sont fournis. Et celui que nous voulons est un formulaire de recherche Ajax pour Wocmers. Donc, comme vous pouvez déjà le deviner, nous avons déjà ce code court que nous pouvons utiliser pour l'afficher dans le front-end. Je vais donc copier ce contrôle C. Permettez-moi de terminer. Attendez, nous sommes exactement là où nous voulons être. Ouvrez donc l'éditeur d'en-têtes. Alors laisse-moi clore ça. Évidemment, il suffit d'aller ici, de passer dessus puis d' entête, alors laissez-moi clore ça quand même. Qu'est-ce que c'est ? Fermez ça. Et maintenant, nous y voilà. N'oubliez pas qu'à l'origine, nous avions trois colonnes. Je veux dire, nous avions trois conteneurs, mais j'en ai supprimé un et indiqué que nous reviendrions plus tard pour l'ajouter. Je vais donc le dupliquer. Maintenant, nous en avons trois, et je vais tout supprimer de l'intérieur. Ensuite, j'ajouterai un code court. Ensuite, déposez ce code court juste là, comme vous pouvez le voir sur le code abrégé que nous venons d'emprunter ici. Donc, tant que cette option est toujours sélectionnée, je vais passer à la largeur avancée. Donnons-lui une largeur personnalisée d' environ 80 % , publions-la et prévisualisons les modifications. Voilà à quoi ça ressemble pour le moment. Et je l'aime bien, d'ailleurs, mais nous n'avons pas dit explicitement quelle largeur ils devraient occuper. Alors faisons-en peut-être 40 %. C'est 20, si je ne me trompe pas, 40 plus 20, 60, donc cela devrait être 40 %. Publions et voyons ce que nous allons changer ici. D'accord, aucune différence. Voyons si nous pouvons publier ces 30 % et voir ce que nous avons. C'est bon. Contrôlez l'œil pour sélectionner le contenant qui les contient, et nous voulons nous assurer qu'ils sont régulièrement espacés entre eux, juste comme ça Publiez cet espace entre chaque conteneur. Et maintenant je pense qu'il est bien positionné. J'adore l'endroit où c'est. Donc, en allant sur la page d'accueil, nous y voilà. Nous pouvons donc maintenant rechercher un produit. Disons que nous avons une clé haut de gamme. Cherchons donc simplement une clé. Il effectuera automatiquement une recherche et nous affichera. C'est ce que nous entendons par Ajax. N'oubliez pas que je vous ai dit de faire ce que vous vouliez qu'il fasse sans recharger la page Il fait donc la recherche sans recharger cette page pour nous permettre de voir si c'est ce que nous recherchons D'accord, laissez-moi rechercher GPU, GPU. Oui, s'il existe plusieurs produits portant le même nom ou le nom que vous recherchez, page des résultats de recherche s'affichera. Mais s'il n' existe qu' un seul produit qui porte le nom que vous recherchez, ce produit ne sera affiché que directement. Il sera redirigé vers la page du produit unique. Donc, si je recherche un tracteur, parce que nous n'en avons aucun autre sur le site Web, cela nous mènera simplement au seul produit du nom Tractor. Mais comme nous avons plusieurs GPU, si je recherche un GPU, la page des résultats de recherche nous affichera afin que nous puissions choisir le GPU spécifique que nous voulons choisir. Donc, en gros, c'est ainsi que vous pouvez ajouter une fonctionnalité de recherche plus robuste et plus puissante à votre site Web WooComers pour permettre aux clients d'obtenir ce qu'ils veulent Voyons voir. J' aime beaucoup cette recherche. Qu'avons-nous ajouté d'autre ? Un vélo. J'aime bien cet Ajax verrez que cela vous donne toutes les descriptions, et vous pourrez décider à l'avance si c'est ce que vous voulez. C'est donc une très bonne chose. Comme nous n'avons qu'un seul vélo, serons redirigés vers la seule page contenant le vélo. Et n'oubliez pas que nous avons changé les catégories. Donc oui, je pense que c'est un excellent endroit pour terminer cette leçon. Dans la leçon suivante, nous allons voir comment utiliser du CSS personnalisé pour ajouter des coins arrondis tout autour des images du produit. Et n'oubliez pas que si nous revenons à notre site Web de référence, cette barre de recherche a des coins arrondis et l'icône ici est bien meilleure. Je pense que nous pouvons améliorer cela. Certaines personnes aiment les angles vifs comme celui-ci, vous pouvez en rester là. Mais voyons comment procéder dans la prochaine leçon. 42. Vignette d'un seul produit Coins arrondis: Voyons maintenant comment utiliser du CSS personnalisé pour modifier le style des différents éléments que nous ne pouvons pas modifier avec les plugins que nous avons utilisés pour les créer. Woo Commerce ne nous permet pas de modifier les images de ses propres produits et de leur donner des coins arrondis. Ivory Search ne nous en donne pas la possibilité. Oh, attendez. Si je passe au design, est-ce que cela nous donne cette option, d'ailleurs ? Conception. Si je dis personnalisateur de formulaire de recherche, cela ouvrira le personnalisateur comme vous pouvez le voir, ce sont les trois options dont nous disposons Il s'agit du chargeur, comme vous l'avez vu ici, lorsqu'il recherche automatiquement quelque chose. Comme vous pouvez le constater, il n'y a pas de place pour définir le degré d' arrondissement des coins. Vous pouvez changer ce que cela dit, rechercher des produits. Oui, recherchez des produits. Et ajoutons un point supplémentaire ici pour en faire une ellipse. Et vous pouvez également décider de supprimer cette icône si vous le souhaitez, ce que je trouve très cool. Mais avant cela, je voulais juste vous montrer comment j'ai atteint cet objectif en utilisant du CSS personnalisé. Alors maintenant, publions-le. Et maintenant, pour ce qui est du front end, je sais que nous sommes déjà là, et si je reviens à ce point, nous y sommes déjà. Mais n'oubliez pas que pour y arriver, il vous suffit de personnaliser. Et cela ouvrira le même endroit car ce que nous voulons, c'est ce CSS supplémentaire. C'est ici que nous pouvons ajouter du CSS supplémentaire. Retourner et revenir en arrière, du CSS supplémentaire. Nous pouvons ajouter du CSS ici de la même manière que nous l'avons ajouté au formulaire de contact. Si je passe à l'édition, lorsque nous sommes passés à l'apparence, nous sommes passés au CSS personnalisé et avons ajouté du CSS personnalisé pour affecter l' apparence du formulaire dans le front-end. Nous pouvons donc faire de même pour tout le reste ici. Maintenant, pour sélectionner cette image, nous devons utiliser Control Shift I pour ouvrir la console, et je souhaite sortir du responsive design. Et lorsque je sélectionne cet inspecteur, je peux survoler différents éléments HTML, y compris l'image Et si je le sélectionne, il nous fournira le sélecteur d'image Il s'agit du sélecteur d'image, et nous pouvons tester l'effet que notre code CSS aura sur celui-ci en l'ajoutant ici à son CSS Donc, si je dis un rayon de bordure de cinq pixels. Il a maintenant cinq pixels. Qu'en est-il de 20 ? Parce que c'est ce que je veux. Voilà à quoi ça ressemblera. Il ne me reste plus qu'à copier ce sélecteur. Copie du lien droit. Cela n'a aucun effet sur votre site Web. C'est juste pour tester pendant que vous travaillez. Mais lorsque vous rechargez cette page sans la console, les modifications que vous y avez apportées ne prendront pas effet Maintenant, en allant ici, en collant ce sélecteur et en ajoutant nos crochets, je peux dire rayon de bordure Maintenant, laissez-moi simplement supprimer ce rayon de bordure que nous avons utilisé pour les tests afin que vous puissiez voir le code réel qui prendra effet, 20 pixels. Maintenant, nous y voilà. Terminez par un point-virgule, publiez-le. Maintenant, si je ferme la console, laissez-moi simplement cliquer avec le bouton droit de la souris, ouvrir ce lien dans un nouvel onglet et l'ouvrir. Nous sommes maintenant sur la page de la boutique, mais si j'ouvre un produit ici, j'aurai ces coins arrondis. Nous l'avons défini sur ce produit de vélo en particulier, mais il s'applique à tous les produits. Bien, la prochaine chose que je veux que nous fassions est de regarder la page de la boutique C'est très amusant parce que dans cette leçon, je voulais que nous examinions comment faire en sorte que la barre de recherche ait des coins arrondis, mais nous avons fini par faire ce que j'avais prévu pour la leçon suivante. Faisons les deux maintenant. 43. Coins arrondis de la barre de recherche: Revenons donc à notre éditeur, Control Shift I, pour ouvrir la console. Nous pouvons faire de même en sélectionnant cet inspecteur et en sélectionnant la barre de recherche. Nous y voilà. Voici son sélecteur Si j'y vais et que je dis rayon de bordure, tapez 20 pixels. Comme vous pouvez le constater, cela change en temps réel. Je peux également faire de même pour l'icône, sélectionnez la zone verte. Et maintenant c'est l' icône, comme vous pouvez le voir, je vais sélectionner l'ensemble du sélecteur comme ça, copier-le correctement, et j'ai oublié de faire de même pour cela Mais de toute façon, pas de problème. Rayon de bordure. Permettez-moi de le copier et de le coller ici. Comme vous pouvez le constater, cela prend effet, mais nous n'avons pas fait de même ici. Donc, sélectionnez ceci et revenez ici. Nous y voilà. C'est ça. Copie. Supprimons cela car cela ne nous aide pas. Alors maintenant, c'est revenu à la normale. Mais maintenant, si je vais ici et que je colle ça entre crochets , avec un rayon de 20, c'est parti. Alors maintenant, il a ce coin arrondi. Mais maintenant, nous pouvons ajouter une marge à gauche, un onglet, deux points, une marge à gauche sur cette icône. Nous voulons ajouter une marge pour le mettre un peu de côté. Disons dix par cellules. Comme vous pouvez le constater, nous l' avons déplacé de dix pixels. Point virgule. Pouvons-nous déplacer cette marge cinq pixels vers la droite ? D'accord, cela n'a aucun effet, mais pas de problème. Fermons cette publication. Et maintenant, si je le ferme, pas besoin de le fermer, mais maintenant si je le recharge, ça ressemble à ça Enfin, passons à la page de la boutique. 44. Vignettes d'angles arrondis de la page de boutique: Donc, revenez ici et sélectionnez la boutique car nous avons déjà publié les modifications. Maintenant Control Shift I. Nous allons également sélectionner l'inspecteur et sélectionner cette image. Comme vous pouvez le constater, il s' agit du sélecteur. Copiez correctement. Collons-le dedans. Supports, supports bouclés. Copiez ça. Mettons-le là-dedans. Maintenant, ils ont ce joli coin arrondi. Publiez donc ces modifications. Fermons cet inspecteur. Et maintenant, si je vais ici et que je rafraîchis la page, très bien. Rafraîchissement brutal. Je ne fais que contrôler RD, mais maintenant Control Shift R. Bien, je ne sais pas ce qui se passe Permettez-moi de passer à la page d'accueil. Faire défiler la page vers le bas. Pourquoi cela n'a-t-il pas pris effet ? Je pense que nous avons besoin d'un plugin de mise en cache, mais Control Shift R encore une fois. Accédez à la page de la boutique. Cela pourrait m'obliger à installer un plugin de mise en cache, et j'avais prévu de vous montrer comment utiliser un plugin de mise en cache dans la prochaine leçon Mais maintenant, et si je vais ajouter un nouveau plug in ? C'est bon. Retournons ici. Control Shift E. Actualisez radicalement cette page pour voir si les modifications ont pris effet. S'ils prennent effet sur cette page, cela signifie probablement que nous avons un problème de mise en cache En d'autres termes, le navigateur a déjà enregistré le navigateur enregistre une copie de chaque page afin que, lorsque quelqu'un accède à cette page, il puisse être rapidement servi sans avoir à recharger cette page depuis le serveur Nous recevons donc la page qui présentait ces angles vifs, même si nous y avons apporté des modifications. Il s'agit donc de la page qui se trouve sur le serveur, mais c'est la page qui est enregistrée par les cookies sur notre navigateur. C'est pourquoi nous continuons à le voir même lorsque nous actualisons. Contrôlez notre Control Shift R pour une actualisation complète. Essayons maintenant un plugin de mise en cache. Donc, ici, je vais aller dans cache Light Speed et l'installer. Et activons-le. Très bien, maintenant, passez la souris dessus et purgez tout. D'accord, nous avons donc tout purgé. Donc, si j'écris un lien, que j' ouvre le lien dans un nouvel onglet et que je vais à la page d'accueil, voyons ce que nous avons. Exactement Les modifications ont maintenant pris effet car nous avons supprimé le cache local stocké dans le navigateur. Donc, si nous allons sur la page de la boutique, tout a maintenant ce joli coin arrondi. J'adore cet exercice de dépannage, car vous serez confronté à de nombreux problèmes lorsque vous travaillerez sur vos sites Web, et vous devrez être capable de résoudre les problèmes et de découvrir l'origine du problème Je suis donc contente que tu aies pu me voir avoir du mal avec ça. Et cela marque la fin de la création de votre site Web. Vous avez maintenant un site Web WordPress entièrement fonctionnel, boutique de commerce électronique, et vous pouvez vendre vos produits à n'importe qui dans le monde entier. Mais bien sûr, il y a beaucoup d' autres choses que vous continuerez apprendre au fur et à mesure que vous créerez votre site Web et que vous le rendrez plus robuste. Maintenant, dans les leçons suivantes, qui sont des leçons bonus, vous allez apprendre certaines des choses les plus importantes pour rendre votre site Web bien meilleur, beaucoup plus puissant et beaucoup plus fiable. Nous parlons de sécurité. Nous parlons de Perm Link. Nous parlons donc de l'une des choses que j'étais censé aborder dans les leçons bonus, c'est la mise en cache. Vous venez de découvrir la mise en cache. Dans les leçons bonus, nous allons donc vous donner encore plus de trucs et astuces pour faire de vous un gourou de WordPress. Je te verrai bientôt. 45. Mise en cache de site Web: Voyons maintenant quelques trucs et astuces supplémentaires pour faire de vous un gourou de Wordpress. Mais bien sûr, ce ne sont que des conseils et astuces de base. vous faudra tout de même approfondir Wordpress pour comprendre comment utiliser les différents plugins disponibles. N'oubliez pas que nous avons plus de 59 000 plugins gratuits sur le répertoire des plugins WordPress Cela signifie qu'aujourd'hui encore, j'apprends de nouvelles choses sur Wordpress et vous devriez en faire de même. Mais maintenant, l'un des conseils, comme je l' ai mentionné, est la mise en cache. Et maintenant, si nous revenons au tableau de bord, permettez-moi de fermer toutes ces autres parties. Passons donc à Ajouter un nouveau. Et je vais taper Cache, Enter. Comme vous pouvez le constater, nous avons plusieurs plugins de mise en cache. Beaucoup d'entre eux sont très populaires. Et comme vous pouvez le constater, la vitesse de la lumière est l'une d'entre elles, et nous l'avons déjà ajoutée. Vous pouvez donc ajouter n'importe lequel de ces autres si vous le souhaitez. WP Optimize est également très génial, mais nous devons en choisir un. Nous n'avons pas besoin d'en avoir deux. Et chaque fois que vous apportez des modifications à votre site Web, venez simplement dire « tout purger ». C'est tout ce que je fais lorsque je travaille sur mon site Web Wbress Je ne vais pas ici pour modifier tous ces autres paramètres, mais vous pouvez aller sur YouTube et consulter un didacticiel sur la façon de maximiser tous ces autres paramètres afin d'optimiser encore davantage votre site Web. Mais comme je l'ai mentionné, lorsque vous apportez des modifications, et au début, les choses ne se comportent pas comme elles sont censées se comporter Vous pouvez tout purger, et il est fort probable que les modifications prendront effet si elles ont été causées par le mauvais fonctionnement de la version enregistrée localement de la page. Cela supprimera tout le cache stocké sur votre navigateur, toutes les pages stockées sur votre navigateur et rechargera la page contenant les nouvelles modifications depuis le serveur C'est le numéro un. Je veux terminer cette leçon ici parce que dans la prochaine leçon, je veux que nous parlions des liens perma Je te verrai bientôt. 46. Permaliens: Parlons des liens perma. Je veux y aller et peut-être ouvrir ce produit. D'accord, il est donc écrit «   Product Impact Drill ». Mais maintenant, les permaliens s'appliquent principalement aux publications Wordpress. Les articles sont un type de publication dans Wordpress. Alors permettez-moi de revenir ici et de créer un nouveau post. Peut-être, disons, oui, ajouter un nouveau message. Et comme je l'ai mentionné, un exemple de publication est un article, un article de presse ou un article de blog Alors, comment faire des achats en ligne. Il s'agit peut-être d'un article de blog que vous écrivez pour vos visiteurs. Je vais donc le publier . Allons-y. Donc, si je regarde l'article, si vous regardez ce 200503 2029, comment faire des achats en ligne, voici l'URL de cet article en particulier Permettez-moi de revenir ici dans le tableau de bord et d' aller dans les paramètres Permalien Il existe différentes manières d' afficher l'URL de ce que vous recherchez. Comme vous pouvez le voir, nous avons ici le produit Impact. Nous avons notre domaine, le produit « perceuse à percussion ». C'est très convivial pour le référencement. Lorsque les robots de Google ou de Bing parcourent Internet à la recherche de nouveaux contenus, ils examinent également la structure de l'URL pour les différents produits, les différentes pages, chaque partie de votre site WordPress contenant un Les robots de Google examineront la structure de l'URL et attribueront des notes inférieures à certaines URL en raison de leur structure Vous devez donc faire très attention à la façon dont vos URL sont structurées, c'est là que les liens perma entrent Voici les différentes manières de structurer vos publications. Et comme vous pouvez le voir, nous avons actuellement cette date, puis l'échantillon, et c'est exactement ce que nous avons ici. Le nom de la publication est le meilleur moyen d'afficher vos URL pour le référencement . C'est aussi simple que ça. Enregistrez les modifications. Très bien, mettons tout en page Génial Maintenant, si je fais glisser cette page et recharge cette page, il suffit de la recharger Regardons l'URL. Très bien, maintenant, rentrons chez nous, et passons à la publication Comment faire des achats en ligne. Disons que vous regardez. Maintenant, il ne reste plus qu'à couper le nom du billet de blog dans votre domaine couper le nom du billet de blog dans Cette URL est très conviviale pour le référencement et elle recevra de meilleures notes de la part des moteurs de recherche lorsqu'ils indexeront votre site Web Assurez-vous donc que vos liens Prima sont définis sur le nom de la publication. Puis enregistrez les modifications. Je pense que nous avons déjà enregistré les modifications. Bien sûr, ce ne sont que des trucs et astuces que je partage très superficiellement Si vous souhaitez plus de détails, vous pouvez aller en savoir plus sur Prima Links. Vous pouvez en savoir plus sur la mise en cache des sites Web et sur tout ce dont je vais parler Je pense que c'est un bon endroit pour terminer ça. Ensuite, parlons de la sécurité de votre site Web Wordpress. Je te verrai bientôt. 47. Sécurité de site Web: Je vais jeter un coup d'œil à la sécurité de WordPress. Passons aux plug-ins, ajoutez-en un nouveau. C'est ce que j' aime dans Wordpress. Tout ce que vous souhaitez ajouter à votre site Wordpress est déjà créé sous forme de plugin par quelqu'un. Vous n'avez donc pas à payer d'argent supplémentaire à quelqu'un pour ajouter des fonctionnalités à votre site Web. Tapons donc sécurité. Nous avons plusieurs plugins de sécurité. Beaucoup d'entre eux sont très populaires. Vous pouvez choisir n'importe lequel d'entre eux. J'utilise une sécurité très simple. Je vais donc l'installer , mais vous pouvez utiliser Wordfence Security Jet PAC, qui appartient à Automatic, la société qui a créé Woo Coomers Très bien, allons-y et activons-le. Bienvenue dans Really Simple Security. SSL, j'ai vérifié si j'ai un certificat SSL et il l' a très bien détecté. Disons activer. Qu'est-ce que c'est ? Oui, il enverra un e-mail de test pour confirmer que l'e-mail est correctement configuré sur mon site. Permettons à RSS de nous envoyer notifications, de les enregistrer et de continuer. Voyons ce scan de vulnérabilité, un mix de connexion par e-mail instantané. Permettons-lui de les configurer automatiquement. Si vous souhaitez ajouter les fenêtres contextuelles sur les cookies qui vous le demandent, acceptez-vous la politique en matière de cookies de ce site Web, bla, bla, bla Ce sont les plugins que vous pouvez ajouter automatiquement. Ils sont fabriqués par la même entreprise. Vous pouvez donc dire installer, mais je ne vais pas les installer car ce n'est pour moi qu'un site Web factice Vous pouvez en savoir plus à ce sujet. Ils ont des tutoriels sur la façon de procéder. Installez. Maintenant, nous pouvons terminer. Nous n'avons pas besoin de ces fonctionnalités professionnelles de leur part. Nous en avons peut-être besoin, mais nous n' avons pas l'argent pour les acheter pour le moment. Le SSL est donc maintenant activé, et nous avons une alerte sur tout ce qui doit être fait sur votre site Web pour le sécuriser. Voyons donc 31 activé. C'est quelque chose que vous devez faire à propos de votre redirection d'accès HT. Maintenant, voici certaines des choses que vous pouvez utiliser Chat GPT ou un didacticiel YouTube pour apprendre Ce ne sont pas des choses sur lesquelles vous allez vous attarder. Votre site utilise Elemental. Cela peut nécessiter que certaines de ces choses ne soient pas urgentes. Ils ne sont pas très urgents. Nous avons détecté des rôles d' administrateur dans lesquels les noms de connexion et d'affichage sont identiques. Nous devons donc nous adresser aux utilisateurs, ou aux utilisateurs. Permettez-moi d'écrire le lien Openink dans un nouvel onglet. Passons au seul utilisateur qui existe, c'est-à-dire vous et vous êtes l'administrateur. Et ici, vous devez définir votre surnom Mr. Moneybags, et maintenant vous pouvez l'utiliser pour mettre à jour le profil Vous n'êtes pas censé afficher le nom qui vous a été attribué. Le nom d'utilisateur qui vous a été attribué, ce nom d'utilisateur que Wordpress vous a attribué lorsque vous avez installé WordPress. Ne l'exposez pas en public. Il peut être utilisé pour vous connecter à votre zone d'administration et détruire votre site Web ou voler des informations. Définissez donc un surnom et utilisez-le comme nom public dans votre publication. Ainsi, par exemple, si nous allons sur un site, où est le message que nous avons créé ? Comme vous pouvez le voir, le message a actuellement mon nom d'utilisateur réel, le nom d'utilisateur administrateur. Mais maintenant, si je le recharge, il est écrit « par Mr. Moneybags Les gens ne peuvent pas deviner le nom d'utilisateur aléatoire qui m'a été donné par WordPress. Vous pouvez donc passer en revue quelques-unes de ces autres choses. Je ne vais pas perdre de temps à tout configurer , car c'est juste pour vous montrer que vous utilisez des solutions de sécurité vraiment simples pour votre sécurité et pour apprendre à les utiliser. Chaque petite alerte contient plus d'informations provenant du site officiel du plugin. Alors allez-y, passez en revue toutes ces choses et voyez comment vous pouvez améliorer votre site Web, rendre plus sécurisé. Utilisez Chat GPT si vous ne comprenez pas des choses comme les HTC et comment régler ce problème, D'accord. Je pense que c'est un bon endroit pour terminer tout ça. Dans la leçon suivante. Voyons comment sauvegarder votre site Web, car s'il arrive quelque chose à votre site Web en ce moment et que vous devez réinstaller Wordpress, vous risquez de tout perdre. Mais si vous avez une sauvegarde stockée quelque part dans Google Drive ou sur votre machine, quoi qu'il arrive, vous aurez une sauvegarde. Voyons comment procéder dans la leçon suivante. À bientôt. 48. Sauvegarder votre site Web: Parlons de la sauvegarde de votre site Web. Alors, comme d'habitude, passons aux plugins. Ajouter un nouveau. Donc, ici, cherchons des renforts. Comme vous pouvez le voir, nous avons UdraftPlus et d'autres plugins de sauvegarde Wordpress géniaux Mais j'adore Updraft Plus parce que c'est très simple et direct. Alors activons-le. Et maintenant, appuyons sur Démarrer ici pour tous les paramètres. C'est bon. Ici, vous allez faire une visite guidée du plugin. C'est sur ce bouton que vous cliquez pour effectuer une sauvegarde, mais passons à la suivante. Vous pouvez choisir ici le nombre de fichiers que vous souhaitez conserver à tout moment. C'est ici que vous pouvez choisir l' endroit où vous souhaitez envoyer une copie d'une sauvegarde de votre site Web. Vous pouvez donc vous connecter à votre Google Drive. Vous pouvez utiliser ces autres services. Je l'utilise rarement. L'un de mes sites Web est connecté à Google Drive, et il envoie automatiquement une copie de sauvegarde de mon site Web à Google Drive. Mais vous n'avez pas besoin de modifier tous ces paramètres ici. La seule chose que vous devez faire est de venir ici et de cliquer sur Sauvegarder maintenant. Rien d'autre. Et puis, comme vous pouvez le voir, incluez votre base de données, elle sera incluse et incluez vos fichiers. Ce sont les publications, les plugins, les produits, tout. Et si vous souhaitez que la sauvegarde ne soit supprimée que manuellement, vous pouvez cliquer dessus, ce qui signifie que vous devrez vous-même supprimer manuellement cette sauvegarde. Faisons donc une sauvegarde maintenant. Cela peut prendre un moment. Ed, nous y voilà. Notre sauvegarde est prête. Comme vous pouvez le constater, nous sauvegardons notre base de données, plug-ins, nos thèmes, nos téléchargements et autres Vous devez donc cliquer sur chacun d'entre eux, sur la base de données, et la télécharger sur votre ordinateur. Cela a commencé. Téléchargez des plugins. Téléchargez tous les plug-ins que vous avez installés. Téléchargeons les thèmes, téléchargeons et autres. Donnez-leur un moment. Alors maintenant, téléchargez des thèmes. Nous y voilà. Téléchargez tous les téléchargements En d'autres termes, si vous avez téléchargé des images sur votre site Web, comme des images de produits, puis d'autres. Cela signifie que lorsque vous restaurez cette copie de la sauvegarde, votre site Web ressemblera exactement à ceci. Cela ressemblera exactement à ça. Alors laissez-moi juste vous montrer comment finaliser cela. Nous y voilà donc. Je vais juste ouvrir le Flex la. Voici mes fichiers depuis cette sauvegarde jusqu'ici. Je vais les couper, Control X, cliquer avec le bouton droit sur Nouveau dossier, version de la boutique en ligne un point oh. Ensuite, collez-les tous là. Je vais les garder là-bas. Vous pouvez maintenant prendre ce dossier et le placer quelque part sur votre disque dur externe ou quelque part votre disque dur où ils sont en sécurité. Alors maintenant, si nous retournons dans la boutique en ligne, dans le tableau de bord, et que nous passons à Updraft si nous voulons restaurer ce site Web, je peux simplement le supprimer, le supprimer Maintenant, nous l'avons supprimé manuellement. C'est bon. Rafraîchissons cela. Donc, comme je l'ai mentionné, s'il vous arrive de perdre votre site Web et que vous avez maintenant une toute nouvelle installation de Wordpress, vous pouvez maintenant télécharger des fichiers de sauvegarde, sélectionner, aller exactement où vous les avez placés, version de la boutique en ligne qui ensuite ouverte et ils seront téléchargés ici. Et une fois qu'ils seront téléchargés, ils auront la possibilité de les restaurer. Vous l'avez vu plus tôt avant que je ne supprime la sauvegarde qui existait ici. Cette sauvegarde, une fois téléchargée, ressemblera exactement à la sauvegarde que nous venons de supprimer. Nous n'allons donc pas attendre que le téléchargement soit terminé. Vous savez maintenant comment sauvegarder votre site Web et pourquoi c'est crucial. Dans la leçon suivante, assurons-nous que nos e-mails sont envoyés aux utilisateurs lorsqu'ils effectuent une action et à nous lorsque quelque chose se passe sur notre site Web, alertes de sécurité provenant du plugin RSS ou de soumissions de formulaires , de soumissions de formulaires de forminateur, d' ATC Voyons comment procéder dans la leçon suivante. À bientôt. 49. Livraison d'e-mail: Parlons maintenant de la délivrabilité des e-mails sur votre site Web Parce que souvenez-vous que lorsque nous sommes passés à RSS, où se trouve RSS Security. Et nous y voilà. Voyons donc validation complète des e-mails et activons les notifications pour nous assurer que vous recevrez des avertissements de sécurité. Voyons donc ceci. Validation par e-mail, notifications ici, validation par e-mail. Vous utilisez une fonctionnalité dans laquelle courrier électronique est un élément essentiel de la fonctionnalité. Vérifiez que vous pouvez envoyer des e-mails sur votre serveur. Voyons donc ignorer toutes les notifications. Non. Nous voulons recevoir des notifications, supprimer toutes les données relatives à la suppression du plugin. Ne changeons rien à cela, mais envoyons ceci pour voir si nous pouvons envoyer des e-mails. Très bien, validation de l' e-mail, e-mail envoyé, veuillez vérifier votre courrier. Accédez maintenant à votre panneau C. Comme vous pouvez le voir, j'avais déjà ouvert mon panneau C et fait défiler l'écran jusqu' aux comptes de messagerie. L'un des e-mails qui a été automatiquement créé pour vous lors de l'installation de Wordpress était, par défaut, admin at yourwebsite.com Le site Web sur lequel nous nous trouvons ici est donc VFXSpot. Donc, ce mail de vérification. Et nous y voilà. Je pense donc que cela a été envoyé aujourd'hui ou non ? Vérifiez votre adresse e-mail pour utiliser certaines fonctionnalités ou une sécurité vraiment simple. Tout d'abord, vérifions-le. Je ne vois aucune notification ici, ce qui m'indique que l'e-mail confirme votre adresse e-mail. C'est bon. Je pense donc que c' est l'e-mail qu'ils ont envoyé lorsque nous l'avons installé. Je pense que cela fonctionne correctement, mais nous ne voulons pas remettre cela en question. Nous allons donc installer le protocole SMTP, mais attendez un peu Ce sont des notifications de choses que nous devons faire. N'oubliez pas que je vous ai dit qu'une sécurité vraiment simple est un système de sécurité robuste, et vous devrez passer en revue ces éléments un par un pour voir comment vous pouvez les résoudre. Mais maintenant, revenons ici et disons plugins, ajoutons-en de nouveaux. Nous voulons être sûrs que les e-mails seront envoyés. Donc, SMTP, c'est un plugin gratuit. WP mail SMTP de WPForms est maintenant installé. Nos e-mails ont été envoyés pour vérifier que cela fonctionne, mais je veux juste m'en assurer, mais c'est juste pour des raisons de sécurité. Bienvenue dans la configuration SMTP de WP Mail. Revenons simplement au tableau de bord. Nous n'avons pas besoin de passer par l'assistant de configuration car ce que nous voulons, c'est venir ici. Ce n'est pas grave si vous les laissez par défaut. Boutique en ligne, c' est le nom du formulaire. Lorsque les gens reçoivent votre e-mail, vos clients, lisent un extrait de boutique en ligne ou le nom de marque que vous avez donné à votre site Web, à votre boutique en ligne. Vous pouvez également le remplacer par votre nom. Ken. Forcer à partir du nom. Si d'autres plugins ont défini un nom de départ différent, vous pouvez forcer l'ensemble du site Web à utiliser ce nom de départ. Nous devons vérifier cela pour nous assurer que même les messages renvoyés ne se perdent pas Passons maintenant à l'expéditeur, nous allons utiliser le protocole SMTP, et nous allons utiliser les informations de notre hébergeur C'est pourquoi nous l'avons ouvert. Il s'agit de l'e-mail que nous utilisons, nous allons donc passer à la gestion. Et c'est quelque chose que vous pouvez également demander à votre hébergeur pour vous aider. Nous allons maintenant générer un mot de passe ici. Donc, tout d'abord, laissez-moi sélectionner le domaine. D'accord, c'est déjà sélectionné. Générer. Maintenant, je vais choisir ce mot de passe, le copier. Je vais le mettre quelque part sur mon bloc-notes. Je vais le mettre sur un bloc-notes quelque part pour pouvoir récupérer à partir de là. Et c'est tout. Mettez donc à jour les paramètres de messagerie. Maintenant, nous l'avons donné. Lequel avons-nous utilisé ? C'était VFXPod Nous lui avons donc donné un mot de passe, ce qui est très important. Connectez les appareils. Passons à Connect Devices. Nous avons besoin de ces informations. Donc, pour y revenir, hôte SMTP sera le nom de domaine que vous avez utilisé Mettons-le juste là. Nous allons utiliser le protocole SSL car nous avons un certificat SSL. C'est 465 automatiquement. Ensuite, le nom d'utilisateur SMTP ici, l'e-mail que nous avons utilisé et le mot de passe sont le mot de passe que nous venons de mettre sur notre bloc-notes Je vais donc le coller là-dedans. Et maintenant, je vais juste enregistrer les paramètres. C'est bon. Maintenant, voyons si cela va fonctionner si nos e-mails fonctionnent réellement. Outils, je pense que dans le cadre des outils, nous avons envoyé un e-mail de test, oui. Permettez-moi donc d'envoyer un e-mail de test à notre adresse e-mail d'administrateur. Succès. L'e-mail de test a été envoyé avec succès. Vérifiez votre boîte de réception pour vous assurer qu'elle a bien été livrée. Maintenant, nos e-mails fonctionnent. Mais il y a une chose que tu dois garder à l'esprit. Nous avons utilisé un formulateur. Donc, si nous allons dans le formulateur pour consulter notre formulaire de contact, je voudrais vous montrer comment modifier le comportement des e-mails de vos formulaires Que se passe-t-il lorsque le formulaire est soumis ? Passons donc aux notifications par e-mail. 50. Notifications par e-mail Forminator: Les notifications par e-mail que nous avons. Maintenant, c'est le réglage de ce formulaire spécifique, de ce formulaire de contact. Si vous avez un autre formulaire et un autre formulaire, vous devez accéder à chacun des formulaires pour définir ces paramètres. Donc, les notifications par e-mail, si nous l'ouvrons , lorsque l'utilisateur soumet le formulaire, passons très rapidement au front-end. Contactez, laissez-moi fermer ces autres. Lorsque l'utilisateur saisit son nom, son adresse e-mail, tape quelque chose et envoie le message, que doit-il se passer ? Cet e-mail sera envoyé à l'administrateur car il a soumis ce formulaire pour qu'il vous soit envoyé. Il est donc étiqueté comme e-mail d'administrateur. Ce n'est qu'une étiquette pour toi. s'agit simplement d'une étiquette pour le tableau de bord afin de vous aider à savoir de quel e-mail il s'agit, car le deuxième e-mail que nous allons envoyer est destiné au client. Adresse e-mail du client. Sujet, nous pouvons régler le sujet sur Maintenant, d' accord, permettez-moi de clore ceci parce que je ne veux pas vous embrouiller pour le moment. Pour y revenir, nous allons créer l'e-mail que l'utilisateur recevra lorsqu'il vous enverra ce formulaire. Mais maintenant, nous allons travailler sur ce que vous verrez dans votre boîte de réception. C'est ce que vous allez voir. Vous verrez que vous avez soumis un nouveau formulaire de site Web. Tous les champs, il s'agit simplement d'un espace réservé pour les trois champs et les détails qu'ils contiennent, les valeurs saisies par l'utilisateur Vous pouvez également décider quelque chose de différent, peut-être participer. Vous pouvez dire que si vous dites insérer des formulaires, vous pouvez dire que vous pouvez donner un nom très précis, le nom qu'ils ont partagé. Tu peux prononcer le texte. Voici les détails d'une zone de texte, ce qu'ils ont tapé ici. Et leur adresse IP et toutes ces autres choses, mais vous n'en avez pas besoin. Mais pour résumer, tous ces champs désignent ces trois champs et toutes les données qu'ils contenaient. Très bien, merci. Débarrasse-toi de ça. Ce message a été envoyé depuis l'URL du site signifie simplement qu'il va afficher l'exportation VF, et je vais vous montrer exactement ce que je veux dire Maintenant, en ce qui concerne le sujet, nous avons également d'autres espaces réservés Comme vous pouvez le voir, le nom ici nous avons également d'autres espaces réservés. Comme vous pouvez le voir, le nom ici signifie le nom qu'ils ont partagé ici S'ils mettent Kennedy comme moi, dans votre e-mail, ce sujet indiquera nouveau numéro de soumission du formulaire d'inscription, l'identifiant de ce formulaire pour le nom du formulaire, le nom que vous avez donné au formulaire et nous lui avons donné le nom de formulaire de contact, comme vous pouvez le voir ici. Vous devez donc avoir un nom descriptif pour chaque formulaire que vous créez. Lorsque nous verrons le formulaire de contact dans notre e-mail pour le formulaire de contact, nous saurons qu'il a été envoyé depuis la page de contact. Si nous avons un autre formulaire sur une autre page et qu'il porte un nom différent, ce sera cet autre formulaire. Vous pouvez également modifier les destinataires ici. Vous pouvez insérer d'autres destinataires. Vous pouvez donner votre adresse e-mail personnelle, peut-être des souris sur protonmil.com Vous recevrez également une copie du même e-mail sous forme de notification. Maintenant, pour l'utilisateur, c'est à peu près pareil. C'est ce que le client recevra. Ceci est juste une étiquette pour que vous sachiez quelle est cette condition. Mais maintenant, ce qu'ils vont voir, c'est le sujet. C'est le sujet. Ils verront qu'il s'agit d'une copie du formulaire que vous avez soumis. Et ici, tu peux taper n'importe quoi. Voici les informations que vous avez soumises via le formulaire de contact de notre site Web. C'est bon. Entrez, vous pouvez simplement dire tous les champs du formulaire. Merci de nous avoir contactés. Nous prendrons contact avec vous prochainement, bénéficiaires. Ici, la personne à recevoir est l'e-mail qu'elle a soumis dans ce champ, adresse e-mail, adresse e-mail. Ajoutez donc cette mise à jour. Maintenant, laissez-moi soumettre ceci Ken Kyoko, laissez-moi fournir cet e-mail, puis juste un e-mail de test Envoyer un message. D'accord. Et vous pouvez toujours accéder aux couleurs personnalisées quatre Mintor pour changer cela Maintenant, si nous revenons à notre e-mail ici et si je l'actualise, voyons si je reçois, nous sommes déconnectés. Donc, en revenant en arrière, et si j' ouvre cet e-mail, consulte le courrier électronique. Exactement. Tout d'abord, il s'agit de l'e-mail de test que nous avons envoyé par SMTP Congrès, l'e-mail a été envoyé avec succès, et maintenant, si nous passons à ce formulaire, vous avez un nouveau formulaire de soumission sur le site Web. Revenons à notre site Web, et ce sont tous des champs. Si nous revenons ici, vous avez un nouveau formulaire de soumission de site Web, tous les champs sont remplis. Il extraira tous les champs qui ont été remplis et les affichera ici. Ce message a été envoyé depuis l'URL du site. URL du site Laissez-moi vérifier si j'ai reçu même e-mail dans ma boîte de réception. Comme vous pouvez le constater, j'ai également reçu de la boutique en ligne une copie du formulaire que vous avez soumis. Et si je reviens ici, fermez l'e-mail du client, une copie du formulaire que vous avez soumis. Si je l'ouvre, voici les informations que vous avez soumises via le formulaire sur notre site Web. Voici les détails, exactement ce que nous avons dit dans tous les champs. Parce que nous avons dit de l'envoyer à l'e-mail qui a été inséré dans le champ de l'adresse e-mail. C'est ainsi que vous pouvez vous assurer que vos e-mails sont envoyés aux personnes qui doivent les voir. Cela s'appliquera également à toutes vos transactions Wocomers. Lorsque des personnes effectuent des paiements ou que des transactions échouent, vous recevrez toutes ces notifications. Je pense que c'est le bon endroit pour terminer cela. Laissez-moi voir où nous en sommes en ce moment. D'accord, oui Nous en avons donc terminé avec la délivrabilité des e-mails. Parlons un peu du SEO. Je te verrai bientôt. 51. Optimisation pour les moteurs de recherche: Parlons de l'optimisation pour les moteurs de recherche. Nous devons faire plusieurs choses pour rendre notre site Web visible pour les moteurs de recherche tels que Google et Bing. heure actuelle, si vous lancez votre site Web, il sera invisible pour tous ces moteurs de recherche. Permettez-moi donc de fermer ces autres zones. Laisse-moi fermer ça. Mets-le à jour. Et l'une des raisons pour lesquelles nous ne serons pas visibles pour les moteurs de recherche est quelque chose que nous avons délibérément fait. Vous vous souviendrez qu'il y a quelques leçons, nous sommes passés aux paramètres, la lecture, et nous avons déconseillé moteurs de recherche d'indexer notre site parce qu'il était en construction Nous sommes maintenant prêts à lancer notre site Web. Donc, tout d'abord, décourageons Non, encourageons les moteurs de recherche à indexer ce site Web Nous y voilà. Maintenant, comme vous pouvez le constater, notre boutique sera bientôt disponible. Donc, si nous allons ici, une fois que nous serons prêts à lancer le site Web, nous pourrons le mettre en ligne. Alors passons en direct. Mais avant de passer à la mise en ligne, vous devrez tout d' abord faire tout le référencement. Je veux juste vous montrer comment passer en direct. Je ne voulais pas oublier que la boutique sera bientôt disponible. Donc, une fois que vous avez fait la partie SEO, vous pouvez passer en ligne. Permettez-moi donc de sauvegarder les modifications, en supposant que mon site Web soit désormais optimisé pour les moteurs de recherche. Maintenant, le référencement est un sujet à part entière, et il devrait être un cours à part entière. Et ce qui est bien, c'est que j'ai déjà publié un cours sur le référencement, référencement WordPress pour les débutants complets. Je l'ai publié sur Skillshare, où j'ai également d'autres excellents cours Wordpress et élémentaires Tu peux aller y jeter un œil dès maintenant. Il s'agit d'un cours complet, étape par étape, sur la façon d' optimiser votre site Web, avec toutes les différentes parties que vous devez examiner et configurer pour ne pas vous perdre dans la page 500 des résultats de recherche Google. Donc, sans le dire, nous n'allons pas continuer à parler de référencement. Consultez ce cours ou allez simplement sur YouTube et recherchez d' autres cours ou didacticiels sur le référencement. J'ai quelques réflexions finales à partager avec vous dans la prochaine leçon, alors terminons-en. bientôt. N'allez nulle part. 52. Réflexions finales: Et ça, c'est fini. Toutes nos félicitations. Vous avez maintenant un site Web de commerce électronique entièrement fonctionnel construit avec Wordpress, Elementor, WooCommers et d'autres outils Wordpress, des outils gratuits J'espère que ce cours vous a donné la confiance nécessaire pour concevoir, créer et lancer votre propre site Web de commerce électronique en 2025. Et si ce n'était pas votre objectif, j'espère que le cours vous a donné la confiance nécessaire pour devenir un meilleur concepteur Web Wordpress. Maintenant, quelles sont les prochaines étapes ? Eh bien, tout d'abord, j' adorerais vraiment voir ce que vous avez pu construire. Accédez à l'onglet Projets et ressources juste en dessous ce lecteur vidéo et cliquez sur le bouton Soumettre le projet. Vous pouvez prendre une capture d'écran de votre page de destination, de votre page d'accueil, la page de votre boutique ou d'une page de produit unique et la télécharger ici sur Skillshare Faites-le voir aux autres élèves, laissez votre professeur le voir et célébrons ensemble votre réussite. Et comme d'habitude, si vous avez aimé et apprécié ce cours et que vous le trouviez bénéfique, cela signifierait beaucoup pour moi si vous pouviez prendre moins d'une minute pour laisser un commentaire et me dire comment il s'est passé. Aidez les autres étudiants potentiels savoir si ce cours leur convient. Aidez-moi à savoir si j'ai un impact sur mes cours ou si je dois améliorer quelque chose. Il vous faudra littéralement moins d'une minute pour accéder à l' onglet des critiques juste en dessous de ce lecteur vidéo et y déposer votre avis, et je vous en serais vraiment reconnaissante. Maintenant, si vous envisagez de lancer votre site Web, je vous recommande vivement de vous renseigner sur le référencement. Et comme je l'ai mentionné, j'ai déjà un cours complet sur WorpresSEO N'oubliez donc pas de consulter mon profil. Descendez et recherchez une classe nommée WorpresSEO simplifiée pour les débutants, et je suis sûr que vous la trouverez très utile avant de vous lancer Je m'appelle Ken depuis toujours, et c'est un plaisir de vous apprendre à créer ce site Web, et j'ai hâte de voir ce que vous allez pouvoir créer. Jusqu'à la prochaine fois, restez créatifs. À bientôt