Construisez un magasin de commerce électronique WordPress avec Elementor (plugins gratuits)

1. Introduction: Et bienvenue à un autre cours génial avec moi, Ken Visa. C'est toujours un plaisir de vous avoir ici aujourd'hui avec une toute nouvelle classe géniale rien que pour vous. J'enseigne l' élémentaire depuis 1,5 ans, ici même sur Skillshare. Et aujourd'hui, résultat avec un cours très spécial pour tous ceux qui veulent construire une boutique en ligne ou une boutique en ligne en utilisant WordPress, j'ai plusieurs cours enseignant aux étudiants comment utiliser l'élémentaire pour Créez des pages Web et des sites Web entièrement fonctionnels à partir de zéro. Ce cours est un peu différent car contrairement aux autres classes où je vous apprends à concevoir des pages Web et des sites Web à partir de zéro. Je vais vous montrer comment gagner du temps en utilisant des modèles prédéfinis. C'est vrai. Vous m'avez entendu. De beaux modèles préfabriqués qui ont déjà été conçus par des designers très compétents. Il vous suffit de remplacer le contenu réservé par votre propre contenu. Cela vous permet de gagner du temps lorsque vous ne souhaitez pas commencer à créer votre site Web à partir de zéro. Si vous créez, construisez ou fabriquez produits physiques et que vous possédez un magasin physique, il est maintenant temps de déplacer votre boutique vers l'espace en ligne où vous pouvez toucher plus de clients. Vous pouvez donc gérer votre boutique physique tout en le gérant en ligne et en vendant à des personnes qui aiment acheter des articles en ligne. Ce cours vous montrera donc comment faire cela. Et je suis très enthousiaste à l'idée de vous l'apporter. C'est donc le site web qui sera en train de concevoir aujourd'hui. Et au moment où nous aurons terminé la classe, vous aurez un magasin de commerce électronique entièrement fonctionnel construit avec WooCommerce. Si vous êtes aussi excité que moi, commençons. 2. Installer le thème Astra: Nous sommes ici sur le tableau de bord. Comme vous pouvez le voir, il s'agit d'une toute nouvelle installation de WordPress, WordPress 5.9 à la première chose dont nous avons besoin pour installer facilement le thème Astra. Passons donc à Aspect Themes. Bien sûr, nous avons les équipes par défaut qui viennent avec chaque nouvelle installation de WordPress, mais nous ne sommes pas intéressés par la liste trois, si nous voulons aller en ajouter une nouvelle, sera redirigée vers le thème WordPress référentiel. Et ici, nous avons de nombreux thèmes tiers que vous pouvez installer et commencer à utiliser immédiatement. Mais celui qui nous intéresse, comme mentionné précédemment, c'est Astra. Je vais donc cliquer sur Installer. Très bien, maintenant qu'il est installé, activons-le. Maintenant, le nouveau thème est activé. C'est le thème actif de notre site Web. Et vous remarquerez qu' ici, nous avons cette fenêtre contextuelle. Nous avons ici cette notification qui vous dit merci d'avoir installé Astra Deed. Vous savez, Aster est livré avec des milliers de modèles prêts à l'emploi. Et dans cette classe, nous allons installer ce plug-in appelé plugin de modèles de démarrage, car nous allons explorer différents types de modèles disponibles pour faciliter notre travail. Si vous êtes du genre à vouloir apprendre à créer sites Web ou des pages Web avec Elementor à partir de zéro, à partir d'une ardoise vierge. Vous pouvez aller de l'avant et regarder n'importe lequel de mes autres cours élémentaires ici même sur Skillshare. J'en ai beaucoup qui vous montrent comment construire une page de destination à partir de zéro en ajoutant élément par élément jusqu'à ce que vous ayez une page complète. Mais dans ce cas ou pour cette classe que nous allons utiliser, nous chercherons comment faciliter notre travail en utilisant des modèles prédéfinis gratuits. Ils sont géniaux et vous comprendrez pourquoi maintenant que notre thème Astra est installé. Dans la leçon suivante, nous verrons comment installer ce plugin et comment commencer à utiliser les modèles. Je vous verrai bientôt. 3. Installez le plug-in de modèles de démarrage: Nous sommes de retour. Maintenant. Astra est le thème actif et nous voulons commencer à installer des modèles de branchement pour pouvoir commencer à utiliser le modèle de démarrage. Cliquez donc sur Commencer sera redirigé vers un assistant de configuration, ce qui nous aidera à configurer tout ce que nous voulions écrire. Vous pouvez donc prendre un moment et regarder cette vidéo pour entendre ce gars, de l'équipe Astor. Mais je vais cliquer sur créer votre site Web maintenant pour que nous puissions commencer immédiatement. Comme vous pouvez le constater, nous avons trois types de constructeurs différents, trois constructeurs de glisser-déposer différents ici. Mais celui qui nous intéresse est élémentaire. Je vais donc choisir Elementor. En cliquant sur Elementor, les modèles que nous pouvons modifier avec Elementor seront affichés . Ainsi, comme vous pouvez le constater, ils sont regroupés en différentes catégories en fonction de ce que vous souhaitez construire. Mais bien sûr, nous nous intéressons à un magasin de commerce électronique ou à une boutique en ligne. Je vais donc cliquer sur l'une de ces catégories ici. Par exemple, les magasins de sport seront présentés avec différents types de magasins de commerce électronique. Magasin de vêtements de sport, magasin de marques, magasin de chaussures recyclées. Un certain nombre de modèles que nous pouvons utiliser. Mais dans l'exemple que je vous ai montré dans l' introduction du cours, j'utilise ce modèle ici, le magasin de cosmétiques. Je vais donc cliquer dessus pour le choisir. La prochaine étape que nous devons franchir ici consiste à ajouter un logo à notre site Web. Choisissez un logo pour votre site Web. Vous pouvez le mettre à jour à tout moment plus tard et je vous montrerai comment mettre à jour le logo ultérieurement. Allez-y et cliquez sur Charger un fichier ici. Nous allons télécharger des fichiers. Je vais donc sélectionner mon logo sur mon ordinateur. Comme vous pouvez le voir, un certain nombre de logos apparaissent, Mon nom. Bien sûr, vous utiliserez le logo de votre entreprise. Je cliquerai dessus et je dirai Ouvrir. Je vais dire « Select ». Et comme vous pouvez le constater, le logo apparaît déjà ici. Les couleurs ne correspondent pas vraiment à l'arrière-plan. Et c'est très délibéré car je voulais vous montrer dans une leçon à venir comment changer ce logo par un logo différent qui correspond à l'arrière-plan. Laissons donc ça là et disons Continuer. Ici, nous pouvons choisir les couleurs que nous voulons l'équipe ait en général. Ou bien sûr, nous pourrons les mettre à jour à tout moment plus tard. Par défaut, il s' agit des couleurs choisies. Je les laisserai par défaut car, comme je l'ai mentionné, nous pourrons les modifier plus tard et nous verrons comment le faire. Et notre police par défaut est la surveillance. Je vais en rester là et dire « Continue ». Fondamentalement, il s'agit d'un forum d'inscription organisé par l'équipe des astérisques où vous ne semblez pas recevoir de bulletins d'information sur les dernières nouveautés du thème Astra. Extrait du thème Astra. Je vais donc y aller et remplir mon nom. Donc, Ken, mon e-mail, je suis un expert, mais bien sûr, vous vous inscrirez peut-être en tant que débutant ou quelque chose de ce genre. Je dirai expert parce que je suis un expert qui crée un site Web pour moi-même. Je ne veux pas vérifier cela parce que je me suis déjà inscrit à la newsletter. Si vous souhaitez partager des données non sensibles avec le thème Astra, vous pouvez laisser cette option cochée, mais vous devez importer le contenu de démonstration que vous avez vu sur le modèle lui-même. Laissez donc ces autres. Discuter. Je dirai soumettre et construire mon site Web. Il faudra quelques minutes pour construire. Félicitations, le modèle est maintenant installé et prêt à être personnalisé pour être exactement comme vous le vouliez. Vous pouvez aller de l'avant et regarder ce gars et écouter ce qu'il a à dire. La prochaine chose que nous devons faire, nous pouvons cliquer sur afficher votre site Web et vous serez redirigé vers un nouvel onglet où vous pourrez voir votre site Web WordPress. là que nous l'avons. C'est à quoi ressemble le site Web. Bien sûr, nous chercherons comment le personnaliser. Pour quitter cet endroit, cliquez sur ce bouton Quitter au tableau de bord, ici à droite, dans le coin supérieur droit. Cliquez sur ce bouton. Nous voici maintenant sur le tableau de bord. Les gars nous demandent de leur donner une note, mais je les ai déjà évalués, donc je vais simplement supprimer ça. sauté sur l'onglet où nous avions ouvert le site Web. Nous y voilà. Laissez-moi simplement faire défiler et vous montrer ce que nous avons. Voici l'apparence du modèle. Nous verrons comment tout personnaliser pour ajouter votre propre contenu et en faire votre propre site Web. En d'autres termes, nous verrons comment personnaliser le site Web à votre goût. Ouvrez la page nette. Nous le sommes. Les autres pages fonctionnent toutes correctement. Dans la leçon suivante, Voyons comment commencer à personnaliser le site Web pour qu'il fonctionne exactement comme vous le souhaitez. 4. Installer WooCommerce: Bienvenue de retour. Maintenant que nous avons notre équipe WordPress est informée et nous avons déjà sélectionné le modèle avec lequel nous voulons travailler. Il est temps d'installer des moyens de paiement pour notre site Web. Chaque magasin de commerce électronique construit avec WordPress utilise un plugin pour accepter les paiements sur le site Web. Et il existe plusieurs identifiants de paiement sur la plateforme WooCommerce. Et l'un des meilleurs au monde est WooCommerce. Vous devez en avoir entendu parler. Nous allons donc installer WooCommerce sur un site Web et intégrer paiements afin que nous puissions permettre aux clients d' effectuer des paiements sur notre site Web et nos sous-produits. En entrant dans le tableau de bord, j'irai vers les plugins. WooCommerce est déjà installé. C'est l'un des plugins qui a été installé alors que nous n' installions pas le modèle et il est déjà actif. Donc, si nous cliquons sur WooCommerce, il sera redirigé vers cet assistant de configuration où nous pouvons maintenant connecter notre WooCommerce au site Web. Nous allons donc entrer notre adresse et tous ces détails. Je vais décocher cela parce que je ne veux pas recevoir ces informations. Allez-y et sélectionnez votre pays. Je veux dire le Kenya. Nairobi. Comté de Nairobi au Kenya. Je vais donc dire « Continue ». Non, merci. Et bien sûr, dans quel secteur le magasin opère-t-il ? Santé et beauté. Continuer ? Oui, je vends des produits physiques. Je dirai « Continuer ». Combien de produits se vendent de manière fiable ? Peut-être 11 100. Et mes ventes n'importe où ailleurs actuellement ? Non. Je ne vais pas créer de magasin pour nos clients, alors je dirai Continuer. Nous avons ici des extensions gratuites supplémentaires que vous pouvez éventuellement choisir d'installer. Je ne veux pas en choisir, alors je vais juste les décocher et dire Continuer. Nous avons déjà installé ce thème Astra, donc je cliquerai sur continuer avec mon thème actif. Ce sont les thèmes fournis avec WooCommerce. Ils sont fournis par WooCommerce, mais je voulais continuer avec le thème Astra. continuum sera donc redirigé vers la page d'accueil WooCommerce à l'intérieur de notre tableau de bord, comme vous pouvez le voir ici à gauche. Et bien sûr, voici une astuce rapide pour nous en dire un peu plus sur ce à quoi vous attendre de WooCommerce. Je vais simplement cliquer sur Suivant ou peut-être tout simplement fermer ça. Allons de l'avant et mettons en place des paiements. Passerelles de paiement supplémentaires. Nous avons besoin de paiements PayPal pour permettre aux clients de payer avec la configuration des cellules PayPal. En ce moment, nous installons le plugin PayPal PayPal qui est une extension de paiement. Et ce n'est pas débattu. Configurons ensuite le compte de paiements PayPal. Mettons-nous en place. Très bien, maintenant comme vous pouvez le voir, sous WooCommerce, nous sommes à l'intérieur des paramètres. C'est là que nous avons été redirigés. Nous étions ici, maintenant nous avons été emmenés ici. Et bien sûr, par défaut, nous avons déjà activé les paiements PayPal et nous pouvons désormais accepter en toute sécurité toutes les principales cartes de crédit et de débit grâce au réseau PayPal. La prochaine chose que nous devons faire est donc d'activer PayPal. En d'autres termes, nous devons connecter ce plugin PayPal à notre compte PayPal. Vous devrez donc disposer d'un compte PayPal auquel vous connecter pour que l'argent soit envoyé sur ce compte PayPal. Et c'est là que vous pouvez faire croître votre argent. Je dois donc me connecter. Je vais entrer mon mot de passe. Autorisez PayPal à connecter votre compte à WooCommerce. Développeurs. Acceptez et connectez-vous. Merci de vous être inscrit. Vous avez maintenant un compte et vous avez réussi à intégrer PayPal aux développeurs WooCommerce. En d'autres termes, les gens peuvent effectuer des paiements sur notre boutique de commerce électronique et l'argent sera envoyé papier d'où nous pourrons le retirer. Revenons donc aux développeurs WooCommerce. C'est dans notre tableau de bord. Comme vous pouvez le constater, ces actions ont permis de récupérer toutes ces informations sur papier. Autrefois, j' allais à l'intérieur du papier et j' ces cartes d'identité et ces clés dans du papier et je venais les coller ici. Mais comme vous pouvez le constater, ils ont amélioré le processus. Il ne s'agit que de quelques clics et les informations s' affichent automatiquement ici. Maintenant que c'est fait, allons de l'avant et disons Enregistrer les modifications. Disons maintenant d'activer la passerelle PayPal. Et bien sûr, il y a plusieurs autres paramètres ici que vous pouvez modifier, mais je ne vais pas les modifier. Revenons donc dans l'onglet Général. Ici, nous pouvons définir nos lignes d'adresse et nos détails d'expédition. Points de vente. Vendez-vous donc dans tous les pays d'expédition ? Où expédiez-vous ces détails ? Et quelle est votre devise en ce moment, c'est montrer des shillings kenyans parce que je veux dire le Kenya. Et si vous modifiez quelque chose ici, vous pouvez, si vous souhaitez activer les taxes et les calculs, vous pouvez procéder ainsi, puis cliquer sur Enregistrer les modifications. Mais bien sûr, je n'ai rien changé, donc je ne vais pas le mettre à jour. Et vous pouvez aller de l'avant et consulter d'autres tutoriels sur la configuration de WooCommerce sur n'importe quel site Web WordPress. Il existe des tonnes de tutoriels sur YouTube qui vous montrent exactement comment procéder. Si nous devions le faire maintenant, cela rendrait cette classe trop longue et nous ne voulons pas le faire car, comme vous pouvez le constater, nous avons de nombreux autres paramètres à configurer. Allons de l'avant et cliquez sur les paiements. Maintenant, comme vous pouvez le constater, nous avons une liste de différentes façons d'accepter de l'argent. Et comme nous avons fini de configurer l'extension PayPal, elle est maintenant activée, ce qui signifie que vous l'avez correctement configurée. Alors allez-y et assurez-vous qu'il est activé. Et si nous voulons y apporter des modifications, vous pouvez toujours cliquer sur Gérer. Vous serez redirigé vers cette page que nous avons déjà consultée. Maintenant que nous avons configuré WooCommerce, il est temps pour nous de commencer à personnaliser l'apparence des sites Web utilisant les différents modèles personnalisés comme nous l' avons fait et le générateur de pages Elementor. 5. Personnaliser l'en-tête: Bien, il est donc temps de commencer à personnaliser notre page de destination et le reste des pages. Pour commencer, commençons par la barre de navigation ici. La première chose que nous voulons faire est de modifier ce logo car, comme vous pouvez le voir maintenant, il n'est pas visible. Je vais donc cliquer sur Personnaliser. C'est l'un des domaines dans lesquels nous pouvons personnaliser la page de destination. Allons donc modifier l'en-tête. Il s'agit de l'en-tête où se trouvent le logo et la barre de navigation. Pour ce faire, nous allons entrer dans le générateur d'en-têtes ou nous pouvons directement cliquer sur n'importe quel élément ici lorsque cette icône apparaît. Mais je vais aller à l'intérieur des bâtisseurs d'en-têtes. Vous remarquerez que nous avons cette représentation du dessin ici. Donc, le logo du titre du site, voici un logo. Le menu principal, c'est ici. Et l'icône du panier ou la fonctionnalité de la carte, qui se trouve ici. Vous remarquerez donc que cette image va jusqu'en haut derrière la barre de navigation et le local. Cela signifie que cet en-tête est transparent. Si elle avait une couleur d'arrière-plan, nous ne verrions pas cette image monter jusqu'au sommet. Vous remarquerez donc ici que nous avons une option d'en-tête transparente personnalisée. Et si nous lisons cet avis ici, l'en-tête de cette page est défini à partir de cet en-tête transparent. Parce que si je pouvais simplement passer à une autre page, vous remarquerez que l'en-tête présente un logo sombre car il a un fond blanc. ne s'agit pas d'un arrière-plan transparent. Par conséquent, certaines parties du site Web devront avoir un logo sombre en partie sur la page de destination ou sur toute page où l'image s'étend jusqu'en haut. Il possède un en-tête transparent. Et cela signifie que nous devons avoir une vie locale brillante, comme le logo blanc. Dans ce cas. Ici, nous pouvons éditer l'image sur cette page, le logo sur ces pages de fond blanc. Et si nous voulions modifier le logo sur l'arrière-plan transparent, nous devons cliquer sur cette option. Nous y reviendrons bientôt. Tout d'abord, je veux entrer à l'intérieur par option d'en-tête transparente personnalisée. Ici, nous pouvons choisir sur quels écrans nous voulons que ces paramètres aient un effet. Nous pouvons donc choisir un ordinateur de bureau, un mobile ou un ordinateur de bureau et un mobile en même temps. Comme vous pouvez le constater, nous avons deux options de logo. Logo et logo écrit. Et voyons ce qui se passe lorsque nous changeons le logo de la rétine. J'ai un logo blanc quelque part ici. Choisissez Image. Maintenant, vous remarquerez que le logo est toujours le logo sombre que nous avions. Et cela nous indique essentiellement que le logo qui s' affiche ici, actuellement sur notre site Web est le local normal où ils sont écrits un logo est exactement le même logo que le logo normal, mais c'est deux fois plus grand que le logo normal. Donc, s'il s'agit d'un, un 100 par 100 pixels, cela devrait être de 200 sur 200 pixels, et il est généralement deux fois plus grand le logo normal car c'est l'option qui affiche sur les appareils haut de gamme tels que comme le MacBook Pros et les iPhones. C'est exactement comme ça que WordPress l'a configuré. Maintenant, pour changer cela en blanc, nous devons également changer le logo normal en blanc. Je vais cliquer dessus. Mais rappelez-vous que nous avons dit que le logo Retina devrait avoir deux fois plus de taille que le logo normal, mais à des fins d'illustration, j'utiliserai le même logo. là que nous l'avons. Nous pouvons aller de l'avant et ajuster la largeur du logo en tirant sur cette barre juste ici. Permettez-moi de l'agrandir légèrement. 384. Et je dirai Publier. Maintenant, c'est beaucoup mieux. Allons dans l'onglet Design et voyons ce que nous pouvons changer. Nous pouvons donc modifier l' arrière-plan de ce domaine ici. En cliquant dessus. Comme vous pouvez le constater, il n'est plus transparent, mais nous voulons le laisser transparent. changeons donc pas leur publication. Maintenant, je veux aller dans cette zone et recharger cette page, rafraîchir. Vous remarquerez que le logo reste sombre car le seul logo que nous avons modifié était le logo à l'intérieur de l'en-tête transparent. Donc, si nous cliquons sur le titre du site et le logo ici. Vous remarquerez que le logo ici est toujours ce logo. Nous avons notre logo normal, mais nous n'avons pas changé notre logo Retina. Donc, si quelqu'un consulte notre site Web sur un Mac Pro ou un iPhone, il verra ce logo cosmétique. Nous devons donc les modifier à deux fois la taille du logo normal que nous avons utilisé. Mais à titre d'illustration, j'utiliserai toujours le même logo. là que nous l'avons. Laissez-moi cliquer sur Publier, et je voulais vous montrer quelque chose très rapidement. Si nous pouvons passer à cette page, permettez-moi de le rafraîchir. Notre logo fonctionne. Très bien, voici comment changer le logo du site Web par défaut à un nouveau logo personnalisé. Bien sûr, ici, nous pouvons modifier l'icône du panier. Si nous cliquons sur la voiture, nous pouvons entrer dans le design. Nous pouvons également décider si vous souhaitez afficher le total du panier. Maintenant, il affiche le total du panier. Vous pouvez également afficher le titre de la carte. Juste comme ça. Nous pouvons également modifier le menu principal, qui est notre menu. Nous pouvons cliquer ici pour configurer le menu. En cliquant sur ce bouton, nous pouvons choisir le menu que nous voulons afficher. Nous avons donc actuellement trois menus différents. Mais nous voulions afficher le menu principal. Bien sûr. Laissez-moi voir à quoi ressemble cet autre menu. Il s'agit d'un menu de contact, d'un menu de lien rapide. Revenons donc au menu principal. Maintenant que nous sommes satisfaits de nos changements, je vais continuer et rester publié. Permettez-moi de fermer le personnalisateur afin que nous puissions voir notre nouvel en-tête de page de destination. C'est comme ça que ça ressemble. Je pense que j'aime bien ce que ça ressemble. La prochaine chose que nous voulons faire est de modifier le reste de la page avec Elementor, car nous avons deux façons de modifier cette page. Utiliser le personnalisateur et utiliser Elementor car différentes parties de la page de destination ont été créées à l'aide des paramètres du thème Astra ou du générateur Elementor. Nous avons donc modifié l'en-tête à l'intérieur du personnalisateur car il est créé à l'aide des paramètres PM astérisque. Mais les parties internes du corps principal de la page Web sont créées à l'aide d'Elementor. Dans la leçon suivante, nous verrons comment modifier les éléments de cette page avec Elementor. Je vous verrai donc dans la prochaine leçon. 6. Personnaliser la section du héros: Nous sommes de retour. Il est maintenant temps de modifier cette page. Et bien sûr, comme je l'ai mentionné dans la leçon précédente, différentes parties de la page sont créées à l'aide de différents outils ou paramètres. Et nous venons de voir comment modifier l'en-tête à l'aide du personnalisateur car c'est ce qui a été utilisé pour créer l'en-tête. Mais le reste du corps ici a été créé à l'aide d'Elementor. Donc, pour le modifier, nous devrons l' éditer avec élémental. Je vais donc monter ici et cliquer sur Modifier avec Elementor. Très bien, donc nous y voilà. Je vais me débarrasser de ce navigateur. Et nous commencerons par regarder la première section ici. Que se passe-t-il si nous voulons modifier l'image d'arrière-plan ? Ce que nous devons faire, c'est sélectionner la section qui contient l'image, car cette image est utilisée comme arrière-plan, nous pourrions avoir une couleur pour l' arrière-plan plutôt qu'une image. Une fois que vous avez sélectionné cette section, cette zone change pour afficher les paramètres de cette section spécifique. Vous pouvez le dire par la section de modification des mots ici. Donc, en entrant dans le style, vous remarquerez que nous avons sous l'onglet d'arrière-plan ici. Si nous l'agrandissons, vous remarquerez sous l'arrière-plan que nous avons l'image, type image d' arrière-plan. J'avais déjà téléchargé ces deux images en tant qu'autres fonds possibles. Voyons si nous pouvons travailler avec cela. Je vais le sélectionner et dire Insérer un média. Immédiatement, il passe à ce nouvel arrière-plan , donc bien sûr, vous devez préparer une belle image pour votre arrière-plan au cas où vous voudriez utiliser une autre image. Et je vous suggère de le faire 1920 par 1080 pixels. Revenons donc ici et regardons la taille 1920 par 1080 pixels. En d'autres termes, faites-le HD. C'est vrai ? Donc maintenant, nous pouvons aller de l'avant et réduire l' arrière-plan et jouer avec l'arrière-plan superposer l'obscurité de la superposition qui se trouve au-dessus de l'image. Laissez-moi vous montrer à quoi ça ressemble. Laissez-moi vous montrer l'intensité. Vous pouvez le rendre plus sombre ou plus léger. Nous pouvons également y aller et changer la couleur elle-même. Donc, si vous vouliez avoir une couleur rougeâtre ou bleuâtre, au lieu du noir, nous pouvons toujours lui donner cette superposition bleue. C'est ça. Laissez-moi effondrer l'arrière-plan. Et je pense que c'est bon. Laissez-moi vous mettre à jour. Ensuite, prévisualisons la page. C'est donc à ça que ressemble la page en ce moment. Bien sûr, ce n'est pas la page la plus belle, mais comme vous pouvez le constater, nous avons beaucoup de flexibilité dans ce que nous pouvons faire pour l'améliorer. Vous remarquerez que lorsque nous commençons à faire défiler, l'image reste au même endroit. Si vous vouliez faire défiler avec tout le reste de cette section, il suffit d'aller à l'intérieur ici en arrière-plan, en arrière-plan. Sous attache. En ce moment, il avait dit de réparer, on peut le changer pour faire défiler. Lorsque nous faisons défiler maintenant, il monte avec le reste de la section. Mettez à jour cela. Prévisualisons les modifications. C'est vrai ? La prochaine chose que nous voulons faire est de modifier ce bouton au cas où vous voudriez modifier la couleur du bouton. Sélectionnez le bouton lui-même, et cela se transforme en bouton de modification. Et voici les paramètres du bouton. Allons à l'intérieur du style. Nous pouvons modifier la couleur d'arrière-plan par n'importe quelle couleur souhaitée, ou c'est la couleur du texte. Revenons au blanc. Nous voulons modifier le type d'arrière-plan. Comme vous pouvez le constater, l' arrière-plan a changé. Vous pouvez lui donner, disons, une couleur rouge par exemple. En vol stationnaire, donnons-lui quelque chose comme laissons-le aux blancs en vol stationnaire. Mettez à jour cela. Maintenant, qu'est-ce qui modifiait encore le bouton ? Il doit pointer vers une page spécifique. Nous devons lui donner un lien. Nous l'ajoutons donc sous l'onglet bouton. Le lien peut lui donner quelque chose comme Maintenant chaque fois que quelqu'un clique sur ce bouton, il y aura, comme vous pouvez le voir ici, quand je survole, il sera pris sur mon site web.com, la même URL que celle qui apparaît. Si nous voulions ouvrir un nouvel onglet. Permettez-moi de le mettre à jour et de vous montrer très fièrement de petits changements. On y va. Ainsi, lorsque nous survolons le bouton, vous remarquerez que l'URL pointant vers le bas apparaît ici. Si nous cliquons dessus, il commencera à s'ouvrir. Il ouvrira le lien sur la même page. Laissez-moi juste y retourner. Que se passe-t-il si nous voulions plutôt ouvrir un nouvel onglet ? Ce que nous pouvons faire, le bouton bien-être est toujours sélectionné. Mx, le lien que nous avons cette roue dentée, cliquez dessus et dites ouvrir dans une nouvelle fenêtre. Ensuite, mettez-le à jour. Prévisualisons les modifications. Désormais, chaque fois que quelqu'un clique sur ce bouton, il s'ouvre dans un nouvel onglet et cette page restera intacte pour que vous puissiez continuer à naviguer sur la page de répit. Alors, cliquons dessus. Et maintenant, nous avons ouvert un nouvel onglet, nos pages sont toujours là. Bien sûr, nous pouvons également modifier ce texte ici en sélectionnant n'importe où à l'intérieur de cet élément. Allons à l'intérieur du style. Nous allons effondrer ça. Développez le contenu. La couleur du titre peut être remplacée n'importe quelle couleur souhaitée. Disons que vous lisiez. Bien sûr, rappelez-vous que j' insiste sur le fait que ce n'est pas le site le plus beau à titre d' illustration. Disons que nous voulons le rendre bleu clair comme ça. Nous voulons modifier la couleur de la police de description. Vous pouvez le changer par n'importe quelle couleur que vous voulez. Il suffit de le laisser au jaune, blanc. Mettons-le à jour. Chaque fois que nous voulions modifier ou modifier n'importe quel élément de la page Web, suffit de cliquer à l'intérieur de celle-ci. Donc, si nous voulions modifier ou modifier cela, cliquons à l'intérieur. Et maintenant, c'est ce que nous sommes en train de modifier ici. Pour modifier l'apparence elle-même, nous devons entrer dans l'onglet Style. Là, nous pouvons modifier la couleur du texte. On peut dire, un jaune. Nous allons maintenant prévisualiser les modifications. Comme ça. Nous pouvons toujours ajuster la hauteur de la section héros. Alors qu'il est toujours sélectionné, nous pouvons passer à l'intérieur de la mise en page. Sous disposition, permettez-moi de réduire que sous la disposition, nous avons cette hauteur minimale. Et vous remarquerez que la barre inférieure ici monte et descend alors qu'il les déplace. Nous pouvons définir la hauteur minimale. J'aime peut-être le régler sur quelque chose comme 60 pour qu'il remplisse tout l'écran, même si vous avez un grand écran. Mais je veux le laisser à 60 ans. Laissez-moi le mettre à jour. Prévisualisons les modifications. Si je fais défiler. Notez qu'une partie de la section héros va au-delà de la taille de notre écran. Et bien sûr, il existe de nombreux paramètres que vous pouvez modifier pour ajuster l'apparence de la section héros. Nous venons d'en toucher quelques-uns, mais vous pouvez aller de l'avant et jouer avec tous ces autres paramètres pour personnaliser la section héros et donner exactement comme vous le vouliez. C'est donc à vous de comprendre comment chaque paramètre affecte la section héros. Comme je l'ai mentionné, si vous voulez apprendre à approfondir tous ces paramètres, vous pouvez regarder n'importe lequel de mes cours où je vous montre comment concevoir une page de destination une page Web ou un site Web avec Elementor à partir de zéro à partir d'une ardoise vierge ici. N'oubliez pas que nous ne faisons que personnaliser un modèle préfabriqué pour nous faciliter les choses. Nous avons maintenant fini de modifier la section héros. La prochaine chose que nous voulons faire est de modifier cette zone interne du corps. Et c'est ce que nous allons faire dans la prochaine leçon. Je vous verrai bientôt. 7. Personnaliser la section corporelle: Nous sommes de retour. Je suis allé de l'avant et j'ai apporté quelques modifications à la section des héros. J'ai changé cette couleur de police en blanc. Et cela aussi, et remplacez la superposition d'arrière-plan en noir juste pour améliorer l'apparence générale de la section héros. Mais bien sûr, je crois que vous avez déjà défini les couleurs que vous voulez utiliser et que vous les avez appliquées sur votre section héros. La prochaine chose que nous voulons faire est sauter directement dans notre éditeur et d'y jeter un coup d'œil. Comme vous pouvez le constater, nous avons deux rangées de produits. Et lorsque vous cliquez sur le produit, il vous amène à la description du produit ou à ce produit spécifique. Allons à l'intérieur de notre éditeur Elementor. Vous remarquerez qu' aucun produit n' apparaît ici. Encore. Sur la page actuelle. Les produits apparaissent. Que se passe-t-il ? Nous utilisons ce qu'on appelle un code court. Wordpress utilise des shortcodes pour extraire des données de différentes parties du site Web. Donc, si je clique sur cette case, bien qu'elle soit vide, elle contient du contenu. Il s'agit simplement d'extraire dynamiquement ce contenu du WooCommerce stocké dans notre tableau de bord. Comme nous avons cliqué sur cet élément spécifique, cette zone a été modifiée pour modifier le raccourci car il s'agit d'un code court. Nous sommes en train de modifier le code court. Et à l'intérieur, il est dit : Saisissez votre code court. Voici à quoi ressemble le code court. Voici donc comment ça se passe. Une fois que vous avez créé vos produits à l'aide WooCommerce dans le back-end du tableau de bord. Woocommerce vous offre un moyen d'afficher ces produits sur votre page. Si je retire cela et que je laisse les produits. C'est un code court. C'est pourquoi les produits apparaissent maintenant sur notre éditeur. Et si je mets à jour ces changements d' aperçu, les produits sont là, bien sûr, définitivement. Mais maintenant la raison pour laquelle nous l'avons fait, nous avons ces détails supplémentaires ici, car WooCommerce fournit des choses que nous appelons des attributs. Ce ne sont là que des moyens d'être plus précis sur ce que vous souhaitez afficher. Donc, ici, ce que nous faisons est essentiellement si je les supprime, nous disons à Elementor d'afficher les produits que nous avons créés avec WooCommerce avec ce code court. C'est ce que nous disons. Et ensuite, en ajoutant ces attributs, nous voulons dire montrer huit produits. C'est donc la limite avec un signe égal. Ensuite, le nombre de produits que vous souhaitez afficher. C'est pourquoi nous n'en affichons que huit. Et le nombre de colonnes est de quatre. C'est pourquoi nous avons quatre colonnes, alors permettez-moi de changer cela en trois colonnes pour que nous puissions voir ce qui se passe. Maintenant, il affiche trois colonnes. Cela signifie que nous aurons une rangée supplémentaire avec deux produits ici, car nous avons toujours des produits. Mais si nous sauvegardons six produits comme limite, nous aurions deux rangées de trois colonnes. Tout comme ça parce que nous avons exactement six produits. Laissez-moi le mettre à jour. Prévisualisons les modifications. Défilement vers le bas. Nous présentons maintenant trois colonnes de six produits. Nous pouvons jouer avec ces chiffres comme bon nous semble. Nous pouvons également dire, hé, que nous ne pouvons dire qu'un seul produit et n' afficherons qu'un seul produit. Ne vous inquiétez pas, je vais vous montrer comment créer des produits WooCommerce à partir de zéro dans le back-end, dans le tableau de bord dans une leçon ultérieure. En ce moment, nous cherchons simplement comment les afficher. Vous apprendrez comment créer vos produits. Parce que, bien sûr, vous ne pouvez pas développer votre entreprise avec ces produits confectionnés ici. J'étais déjà allé de l'avant et j'ai ouvert la documentation officielle WooCommerce sur les codes courts. Nous y voilà. Comment utiliser les shortcodes. Vous pouvez aller de l'avant et en savoir plus sur l'utilisation des shortcodes WooCommerce. Mais ce que je voulais vous montrer maintenant c'est cette partie ici, le code abrégé des produits. Le code abrégé des produits est l'un de nos shortcodes les plus robustes dans lesquels il peut remplacer diverses autres chaînes utilisées dans les versions antérieures de Google Commerce. Voici les attributs d'affichage. heures à parler. Les limites indiquent le nombre de produits à afficher, et c'est ce que nous avons ici. La limite cherche. Voyons ensuite les colonnes, le nombre de colonnes à afficher est quatre par défaut. En ce moment, nous montrons trois colonnes. Et comme vous pouvez le constater, ces deux attributs ne sont pas les seuls attributs que nous pouvons utiliser pour être très précis sur les produits que nous voulons afficher sur notre page. Prenez donc un peu de temps et étudiez comment utiliser ces attributs. Si vous souhaitez avoir plus de contrôle sur ce qui apparaît sur votre page. Mais c'est essentiellement la façon de le faire. C'est l'essentiel de tout ça. La prochaine chose, bien sûr, est de modifier ces textes en sélectionnant ces textes. Ils sont automatiquement modifiés pour modifier le titre car il s'agit d'un en-tête. Et nous sommes en mesure de changer ce qu'il dit. Les meilleurs produits de la ville. Et bien sûr, si nous voulons qu'il s'agisse d'un lien, nous pouvons ajouter une URL de lien ici. Je vais donc ajouter un espace réservé à la place. Si vous souhaitez que le lien s' ouvre dans un nouvel onglet, cliquez simplement sur cette roue dentée et cochez ouvrir dans un nouvel onglet. Et maintenant, lorsque quelqu'un le survole, il se transforme en symbole de lien. Bien sûr, si nous voulons changer son apparence, nous allons dans le style et nous pouvons y apporter les changements. Disons donc que nous le changeons pour quelque chose comme ça, qu' atteigne une couleur rosée et rougeâtre. Il en va de même pour cet élément. En le sélectionnant. Nous pouvons modifier ce qu'il dit dans le titre et la description. Incroyable. Vous pouvez également aller de l'avant et changer cela. Il s'agit donc du titre et de la description. Et nous pouvons également ajouter un lien. En entrant dans le style, on peut changer son apparence. Donc, en réduisant cette image parce qu'ils n'ont pas d'image pour cela, si nous ajoutons une image, sera en plus de ces produits que nous ne voudrions pas faire cela, mais nous voudrions peut-être modifier la couleur en ce moment. Pour le titre. Peut peut-être le changer une couleur grisâtre au lieu de noir foncé. Changez la typographie si nous le voulons. Je voudrais donc les changer en échange de REO, d' échanger environ deux mois. Maintenant, c'est de retour à Montserrat. Mettez à jour cela. Donc, faites défiler vers le bas. Tout d'abord, enregistrez et prévisualisez les modifications. C'est comme ça que ça ressemble. La prochaine chose que nous voulons regarder à l'aise, c'est cette section. Défilons vers le bas. La section est divisée en deux colonnes. Cette colonne avec l'image et cette colonne avec le bloc de texte. Et un petit conseil que j'ai oublié de vous montrer est lorsque vous survolez ces icônes d'édition juste ici, dans les coins ou les colonnes. Ou même cette icône ici. Il est supposé afficher des paramètres supplémentaires sans cliquer nulle part. Ça arrive. moyen très pratique de le faire est d'entrer dans ce menu de hamburger, d' entrer dans les préférences, les préférences de l' utilisateur et de vérifier les poignées d'édition. Maintenant, lorsque nous survolerons cela, ce commutateur de paramètres supplémentaires vous aidera à faire votre travail beaucoup plus rapidement. Maintenant, si nous voulons dupliquer une colonne ou que nous devons le faire cliquez sur cette colonne plutôt que sur le bouton droit de la souris. Laissez-moi, et entrer à l'intérieur, dupliquer. Laissez-moi simplement enlever ça. Mettez à jour que la modification de cette section est toujours la même que ce que nous avons fait avec ces blocs de texte ici. À partir de la section Héros, il est toujours le même élément. C'est une rubrique. Tout comme ces titres. Si vous souhaitez reproduire ce nous avons déjà fait pour gagner du temps, nous pouvons simplement cliquer avec le bouton droit de la souris sur Copier. Accédez au même type d'élément qui est toujours un en-tête. Cliquez avec le bouton droit et collez le style. Et il copiera tous les styles que nous avons appliqués à autres éléments similaires sur ce nouveau, sur ces autres éléments similaires. Parce que c'est le cas. 8. Personnaliser la section CTA: Nous sommes donc sur le point de voir comment créer un formulaire dans le back-end à l'aide de formulaires WP, perdant du temps, passons à l' intérieur du tableau de bord. Et bien sûr, vous remarquerez que l'une des fonctionnalités que nous avons ici est WP forms. C'est l'un des plugins qui ont été installés lors l'installation des modèles prédéfinis. Donc, si je clique sur les formulaires WP ou sur tous les formulaires, laissez-moi simplement cliquer sur les formulaires WP. Par défaut, nous avons ces deux formulaires. Vous remarquerez que nous avons ici une colonne de code courte et que chaque formulaire comporte un code court. Il s'agit du code court qui représente ce formulaire. Ainsi, chaque fois que le code court apparaît n'importe où dans le front end, ce code court indique à WordPress hey, display, le formulaire d'inscription. Le même cas s'applique à ce formulaire ici. Nous pouvons donc ajouter un nouveau formulaire, sera suivi par le processus d'ajout d'un nouveau formulaire. Mais j'ai un seul problème avec ce plugin de formulaire spécifique. C'est-à-dire que la plupart des fonctionnalités dont vous aurez besoin pour pouvoir bénéficier d'un plug-in étranger, notre premium, vous devez payer le plugin pour profiter de ces fonctionnalités, mais je vais vous montrer un option. Alors sortons d'ici et je veux vous montrer ce que je veux dire exactement. Nous allons donc modifier le formulaire d'inscription. Actuellement, il s'agit des formulaires WP idéés Aller au front-end et sélectionner ceci. C'est exactement ce formulaire. C'est un formulaire d'inscription. Très bien. Allons dans Edit. Je peux vous montrer exactement ce que je veux dire et ensuite vous donner une solution. C'est la forme que nous avons. C'est le champ que nous avons sur le formulaire et entrez votre adresse e-mail , puis le bouton S'abonner. C'est exactement ce que nous avons ici. Le problème dont je parlais E. Par exemple, si vous voulez aller au marketing, nous n'avons que la possibilité de nous connecter à outils marketing dans ce domaine. Et pour utiliser ces autres, nous devons être dans la version payante de ce plugin pour connecter ce formulaire à Mailchimp afin que lorsque les personnes s' inscrivent, elles soient envoyées sur notre compte Mailchimp, MailChimp. liste de diffusion. Nous devons être dans la version pro pour pouvoir accepter les paiements via notre formulaire, nous devons passer à une version payante. C'est ce que j'entendais par la plupart des fonctionnalités que vous aimeriez avoir pour bénéficier d'un plug-in de formulaire. Notre prime ici. Il y a un très joli plugin gratuit qui propose toutes ces fonctionnalités gratuitement. Donc, ce que nous devons faire, c'est aller dans les plugins, plugins installés supprimeront les formulaires WP, l'activer. Ensuite, je vais simplement le supprimer. Très bien, alors passons à Add New. Et maintenant, dans le référentiel des plugins, cherchons à former la nature a plus de 200 000 installations actives et si elle est a plus de 200 000 installations actives développée par une société WordPress très renommée appelée WP et MU Dev. J'ai aimé ces gars et j'aime recommander des produits que j'ai aimé utiliser. Je n'ai aucune affiliation à ces types. J'aime juste leurs produits. Alors installons pour moi la nature en ce moment. Allons l'activer. Très bien, donc maintenant nous l' avons comme l'un des plugins installés et faisant défiler vers le bas. Pour moi, l'un ni l'autre ne devrait être en bas de cette liste ici. Nous allons donc rentrer à l'intérieur. J'ai juste cliqué pour moi plus tard. Voici notre tableau de bord. Permettez-moi de clore cette publicité ici car nous ne recherchons pas la version premium de celle-ci. Et bien sûr, voici un résumé de toutes vos formes de mentions, tout le nombre de soumissions que les gens ont complétées sur les forums que vous avez sur votre page tire des mentions. augmenter les soumissions parce que nous l'avons fait, car ce plugin vous permet de créer des formulaires, des sondages et des quiz. Nous allons donc créer un formulaire et nous présenterons cette liste de modèles prédéfinis. Ce dont nous avons besoin, c'est de s'inscrire à la newsletter. Continuons. Donnons-lui un nom. Formulaire d'inscription, puis cliquez sur Créer. Nous y voilà. Ce sont les champs qui sont à notre disposition. Prénommez une adresse e-mail, puis nous avons le bouton S'abonner, et nous avons les champs d'insertion. Ici, si nous cliquons dessus, nous pouvons avoir la possibilité d' ajouter d'autres champs. Et vous remarquerez que nous avons ici une option Stripe et PayPal. Fondamentalement, nous sommes en mesure d'ajouter gratuitement le paiement sur notre forum. N'oubliez pas que dans l'autre plug-in, nous devions avoir l' abonnement Premium pour pouvoir bénéficier du paiement sur notre formulaire. Ce n'est qu'un exemple de ce qui est possible avec ce plugin. Mais je n' ajouterai aucun champ ici. Parce que ce qu'on fait, c'est un formulaire d'inscription, pas un paiement pour lui. Je veux donc supprimer le prénom car ce n'est pas un champ dont nous avons besoin. Nous avons juste besoin d'une adresse e-mail. Supprimez donc ça. Et maintenant, prévisualisons le formulaire lui-même. est donc à ça que ça ressemble. Adresse e-mail, bouton s'abonner. Fermons ça et publions ça. Maintenant que le formulaire est prêt, nous recevons le code court pour l'afficher. Donc, allons-y et copions ça. Il a été copié avec succès. Une autre façon de copier ce court code est d'aller, permettez-moi de terminer, c'est remonter ici au nom du formulaire. Cliquez sur cette roue dentée et copiez le code court. Et il a été copié avec succès dans le front-end. Soulignez-le. Supprimez les shortcodes WP Forms et collez la nouvelle formule d'un code abrégé de formulaire. Cela va immédiatement passer au nouveau formulaire que nous avons créé. Mettons-le à jour et prévisualisons les modifications. Défilement vers le bas. Nous l'avons là. Forme simple et agréable créée avec un joli cornichon puissant. N'oubliez pas que j'ai mentionné d'autres fonctionnalités que vous devez payer. Sous l'autre forme, plugin s'intègre à des services de listes de diffusion tiers tels que Mailchimp. Ou si vous souhaitez effectuer vos campagnes marketing via une liste de diffusion afin que ce formulaire envoyer les personnes qui configurent vos listes de diffusion dans un service tiers, vous devez payer pour que. Mais avec le formulateur, vous n'avez pas besoin de le faire. Maintenant que nous avons créé ce formulaire, si nous entrons dans les intégrations, vous remarquerez que vous pouvez envoyer ces données de formulaires à n'importe quelle application tierce connectée, connecter à d'autres applications sur la page des intégrations. Pour l'instant, nous ne sommes connectés à aucune application tierce. Mais si nous cliquons sur la page des intégrations ou si nous allons directement dans cette zone d' intégrations car c'est là que nous serons en tête. C'est là que nous en sommes maintenant. Formulated s'intègre à vos applications tierces préférées. Vous pouvez connecter les applications disponibles via l'API ici et les activer pour collecter des données lors de l' étape d'intégration de vos téléphones. Regardez donc toutes ces options que nous avons ici. Nous avons dû payer pour pouvoir connecter notre formulaire à MailChimp sur l'autre plug-in. Mais ici, vous pouvez aller de l'avant et connecter l'API, et tout cela est gratuit. Nous pouvons nous connecter à HubSpot, Slack, Trello, campagne active, Google Sheets. Tout cela nous est fourni gratuitement. Nous pouvons même vous connecter gratuitement pour zap ici. C'est pourquoi j'adore pour moi plus tard. J'utilise ce plug-in pour créer mes formulaires tous les sites Web que je parce qu'ils disent que s'il fonctionne, il n'a pas besoin d'être réparé. Donc, pour moi, cela fonctionne. Je n'ai pas besoin de chercher d'autres plugins étrangers, dont nous aurons besoin d'un abonnement premium pour accéder aux services qui sont très essentiels à n'importe quelle forme. n'est donc que mon point de vue. N'hésitez pas à payer pour tout plug-in qui, selon vous, possède tout ce dont vous avez besoin. Mais si vous cherchez quelque chose de gratuit mais puissant, c'est la voie à suivre. Si vous voulez en savoir plus sur la formation et quel point elle sera bénéfique pour vous, surtout en tant que débutant. Allez-y et cherchez un joli tutoriel sur YouTube. Je vous recommande d'aller sur WP MU Dev Channel, le développeur WPA MU, les développeurs du plugin. Je vous recommande donc d'y aller et de chercher des formules. Pour l'instant. Voici comment créer un formulaire et l'afficher dans la section Appel à l'action de votre page de destination. Dans la leçon suivante, Voyons comment modifier le pied de page. Je vous verrai bientôt. 9. Personnaliser le pied de page: Bienvenue de retour. Il est donc temps de personnaliser le pied de page. personnalisation du pied de page se fera dans la zone Personnaliser de nos paramètres, car le pied de page est créé à l'aide des paramètres Astra, et non du générateur Elementor. C'est le même cas avec l'en-tête. N'oubliez pas que nous avons utilisé la zone Personnaliser pour personnaliser notre en-tête car il a été créé à l'aide des paramètres d' astérisque. En entrant à l'intérieur, personnalisez, faites défiler vers le bas jusqu'au pied de page. Vous remarquerez que l' un des éléments de menu ici est destiné au constructeur. Alors, continuons et cliquons dessus. Cela fait immédiatement apparaître une représentation du pied de page. Vous remarquerez donc que nous avons ce widget ici. C'est ce widget, le widget logo, c'est celui-ci ici. Et ce widget de liens rapides, puis nous avons les icônes sociales ici, puis la zone de copyright. Tout d'abord, supposons que vous n'ayez pas besoin des icônes des médias sociaux. En bas, vous n'en avez même pas besoin sur votre photo. Vous pouvez simplement aller de l'avant et les retirer. Et maintenant, il nous reste deux colonnes. Et nous voulons n'avoir qu'une seule colonne et les avoir au milieu. Nous pouvons aller de l'avant et cliquer sur cette roue dentée. Choisissez ensuite une colonne. Cliquez sur Copyright. Peut aller de l'avant et sélectionner l'alignement là, au centre, et cela pousse tout au milieu. Nous allons publier ça. J'ai aimé son apparence. Et bien sûr, alors que nous étions encore modifier les textes relatifs aux droits d'auteur, nous pouvons bien sûr changer cela pour me laisser traîner cela. Vous pouvez essentiellement taper ce que vous voulez si vous ne souhaitez pas utiliser de code court. Donc, si, par exemple, je chat que vous pouvez simplement dire copyright, essayez d'avoir besoin de 25. C'est ce qui va apparaître. Ou si vous souhaitez utiliser les codes courts. Cela tirera automatiquement l'année pour vous sans que vous ayez nécessairement à la modifier manuellement. Et il extrait automatiquement le titre de votre site des fichiers système. Ainsi, si vous modifiez le nom de votre site Web dans le tableau de bord, nom du site sur la photo changera automatiquement, sorte que vous n'aurez pas à le faire manuellement ou vous-même. Mais si cela ne vous dérange pas de le faire vous-même, vous pouvez toujours venir ici et les supprimer et simplement taper mon site web.com. Et ce n'est pas l' orthographe du site Web. Très bien, donc c'est ça. Et bien sûr, maintenant, pour modifier n'importe quel widget ici, il suffit de cliquer sur le widget lui-même et ses paramètres apparaîtront. Bienvenue à ça. Très bien, surveillé. Nous pouvons aller de l'avant et modifier ces détails. Et les options de menu de sélection ici sont ce menu spécifique que vous souhaitez extraire de votre liste de menus. Revenons donc dans le tableau de bord, les menus d'apparence. Dans la zone des menus de notre tableau de bord, nous avons une liste de menus et vous remarquerez que nous avons des contacts, menu principal et un menu de liens rapides. Ce sont les trois menus que nous avons actuellement. Et nous pouvons créer un nouveau menu. Mais avant de le faire, si nous revenons ici, vous remarquerez qu'il y a les mêmes éléments, contact, menu principal et lien rapide. Voici le menu Liens rapides. Il s'agit du menu Contact. Et ici, nous avons le menu principal. Parce que ce sont les trois menus que nous avons. Supposons que nous voulions afficher un menu différent ici. Il suffit de créer un nouveau menu. Donnons-lui un nom. Menu de pied de page. Faisons de ce menu un menu secondaire. Faisons de ce menu un pied de page. Créons un menu. Maintenant, nous l'avons comme menu. Et ce que nous devons faire, c'est ajouter des éléments de menu à partir de la colonne de gauche. Ici, nous pouvons ajouter tous les éléments que nous voulons à cette colonne. Supposons donc que nous voulions ajouter un lien vers le panier, un lien vers mon compte et un lien vers la boutique. Ajoutons-les au menu. Et maintenant, nous avons ces trois éléments de menu. Nous allons enregistrer le menu. Le menu du pied de page a été mis à jour dans cette zone. Tout d'abord, publions les modifications que nous avions apportées avant d'actualiser la page. Il est maintenant publié. Permettez-moi de rafraîchir cette page. Défilons vers le bas. Maintenant, je vais à l'intérieur du générateur de pieds de page. N'oubliez pas que nous avons ce widget ici. Donc, en cliquant dessus, si je clique dessus et que je sélectionne le menu, nous avons maintenant le menu de pied de page car c'est l'une des options. Cliquez donc sur Menu de pied de page. Maintenant, cela change aux nouveaux éléments que nous venons de créer. Et bien sûr, nous pouvons changer le titre de ces deux-là, quelque chose comme menu spécial. C'est ça. J'ai donc publié cette dérogation. Vous pouvez donc faire de même avec ce menu. En ce qui concerne le logo, nous pouvons cliquer sur cette roue dentée ou simplement cliquer sur l'élément Modifier qui apparaît ici. Peut aller de l'avant et changer, remplacer cette image. Faites défiler vers le bas pour rechercher le logo. Ajoutez deux widgets et le logo se transforme en logo ajouté. Et si vous voulez que ce logo mène quelque part lorsque quelqu'un clique dessus, vous pouvez toujours ajouter un lien ici. Mais je vais juste mettre un espace réservé juste là et le publier. C'est ainsi que vous pouvez modifier le pied de page de destination et essentiellement le pied de page de l'ensemble du site Web. Maintenant, je pense que nous en avons fini avec la page de destination. La prochaine chose que je voulais vous montrer, c'est maintenant que nous avons vu comment afficher les produits. Comment créer un produit l'aide de WooCommerce dans le backend ? Voyons comment le faire dans la prochaine leçon. 10. Créer un nouveau produit avec le plugin WooCommerce: Bienvenue de retour. Maintenant, il a commencé à créer un produit ou quelques produits à l'aide du plugin WooCommerce. Nous sommes donc ici dans le tableau de bord car nous avons déjà installé WooCommerce pendant que nous installions le modèle préfabriqué. Nous l'avons ici. En dessous de WooCommerce, nous avons des produits. Cela fait partie du plugin WooCommerce. Cliquons sur les produits. Ce sont donc les produits que nous avons actuellement. Il s'agit bien sûr des espaces réservés fournis avec le modèle préfabriqué. Ce que nous voulons faire, c'est ajouter un nouveau produit. Cliquez donc sur Ajouter un nouveau. Et donnons un nom à notre produit. Produits, premier produit. Donnons une description. Permettez-moi de saisir très rapidement une description de l'un de ces produits, Lorem Ipsum. Notez donc que l'option de paiement PayPal apparaît ici car nous avons déjà trié l'intégration PayPal WooCommerce. Collons cette description là-dedans. Maintenant, cette description est celle qui apparaît ici. Ensuite, cette description est ce que nous devons coller ici. Permettez-moi donc d'ajouter un mot, résumé afin que nous puissions les distinguer lorsque notre produit est prêt. Donc, très rapidement, avant d' apporter d'autres modifications, je veux le publier. Ce que nous voulions faire ensuite, c'est ajouter une image de produit. Je vais télécharger des fichiers, sélectionner des fichiers. Accédez à ma page de téléchargements. J'avais téléchargé deux produits que nous pouvons utiliser comme exemples de produits. Nous y voilà. Permettez-moi de changer ce nom une seconde. Nom 1, nom 2. Permettez-moi de télécharger ces deux produits. Bien, maintenant que nous avons sélectionné cette image, je vais continuer et ajouter à la galerie. Maintenant, l'image de notre produit est définie. Allons dire « Mettre à jour ». Prévisualisons les modifications. Attendez, où est l'image de notre produit ? À l'extérieur ? Nous avons dit la galerie de produits, qui sont censés définir l'image du produit. Cette galerie est donc juste au cas où vous auriez des images différentes du même produit. Peut-être que si vous avez pris des photos du même produit sous différents angles et que vous souhaitez pouvoir montrer tous ces différents angles. Vous pouvez ajouter autant d'images que vous le souhaitez, la galerie. Mais nous voulons définir l'image du produit, n'est-ce pas ? Je vais donc aller de l'avant et le choisir rapidement. Nous l'avons là. Nous allons donc mettre à jour cela. Ensuite, prévisualisons les modifications. Il y a nos produits. N'oubliez pas que ce résumé est ce que nous avons ajouté ici, brève description du produit, puis la description complète du produit apparaît ici juste en dessous du nom du produit. C'est ce qui apparaît ici. Ils ont donc laissé beaucoup de place ici, vous pouvez donc ajouter autant d' informations que vous le souhaitez, même si cela signifie cinq paragraphes décrivant le contenu du produit. Parce que nous avons ajouté une galerie d'images, et nous n'avons qu'une seule image dans la galerie. Il ne montre qu'une seule image, mais supposons, par exemple. C'est également l'une des images de la galerie. Ajoutez-le à la galerie. Nous avons maintenant deux images de la galerie de produits. Mettez à jour cela. Prévisualisons les modifications. C'est vrai ? Nous y sommes donc. Nous pouvons y aller, nous pouvons faire défiler les images comme nous le voulons. Et nous pouvons également voir une version isolée de l'image. Laissez-moi fermer cette partie. Et maintenant, notez que nous n'avons pas prix ni d'options de paiement ici. Et c'est parce que c'est la prochaine chose que nous devons faire. Retour à l'intérieur de notre tableau de bord. Tout d'abord, nous ne pouvons pas avoir nos produits dans la catégorie Non classé. Donnons donc une catégorie. Disons, par exemple, qu' mange une crème pour le visage. Donnons un prix. Le prix régulier est peut-être de 249, mais nous avons maintenant un prix spécial à prix réduit. Disons qu'il a maintenant 130 ans. Bien sûr, il ne s'agit pas d'un produit virtuel et il n'est pas téléchargeable. Inventaire. Bien sûr, le produit est en stock. Expédition. Vous pouvez aller de l'avant et définir les dimensions de votre poids. Produits liés. Donc, au cas où nous aurions d'autres produits que nous voudrions afficher ici, nous pouvons aller de l'avant et les ajouter. Par exemple, permettez-moi d'aller sur la page de la boutique. Et si nous avons des produits liés à cela, ils apparaîtront lorsque ce produit sera affiché. Ainsi, par exemple, l' huile corporelle de cacao et l' hydratant quotidien à titre d'exemple. Je vais donc taper du cacao et des ventes quotidiennes d'applications. Le cacao est donc à la recherche. Disons que nous voulons une crème hydratante quotidienne à la vente croisée. Permettez-moi de garder cela une seconde pour que nous puissions voir ce qui se passe réellement dans le front end. Très bien, nous allons donc prévisualiser les modifications. Maintenant, nous avons des prix. Avec un rabais. Nous avons une option d'ajout au panier. Nous pouvons également choisir la quantité de ces produits que nous voulons. Supposons que nous voulions des unités ou ces produits. Maintenant, vous aimerez peut-être aussi l'huile corporelle de cacao. Il s'agit d'une vente d'applications ou de produits connexes, ce qui n'est pas nécessairement la même que ces produits ici. Nous pouvons vendre ça croisé. Une autre chose que nous devons faire est de supprimer. Comme vous le remarquez maintenant, nous avons cette image répétée dans la galerie. Donc, comme il s'agit déjà d'une image en vedette, nous pouvons aller de l'avant et la supprimer afin qu'elle ne soit pas répétée car l'image du produit elle-même sera dans la galerie. Donc, si je mets à jour cela, après avoir supprimé ces images répétées ici, prévisualisant les modifications. Nous n'avons maintenant qu'une seule instance de cette image et vous pouvez ajouter autant d'autres variantes que vous le souhaitez. Fondamentalement, c'est comment créer un produit. Cela marque donc la fin de la leçon. Nous avons appris comment créer un produit à l'aide de WooCommerce. Dans les prochaines leçons, nous utiliserons simplement Elementor pour modifier ces pages car elles sont créées à l'aide d'Elementor. Je vous verrai donc dans la prochaine leçon. 11. Aidez-moi à enseigner un élément à 10 000 élèves: Bonjour mon ami. Tout d'abord, je tiens simplement à vous remercier de m'avoir rejoint dans ce cours et d'avoir choisi d'apprendre de moi. Et je tiens également à vous féliciter pour être arrivé si loin dans la classe. Le fait que vous soyez arrivé aussi loin dans la classe signifie que vous gagnez de la valeur de la classe. Je t'apprécie vraiment et j'espère que tu apprécies le cours en lui-même. Cela étant dit, j'ai besoin de ton aide. J'ai pour mission d'enseigner à au moins 10 000 entrepreneurs comme vous à utiliser elementary pour créer leurs propres sites Web ou pages de destination pour vendre leurs produits. Voici comment vous pouvez nous aider. Vous voyez quand un nouvel étudiant rejoint un cours sur Skillshare, puis aime ce cours et laisse un avis. Cela permet aux autres élèves savoir à quoi s'attendre de la classe. Et quand une classe reçoit de nombreuses critiques de la part des étudiants, Skillshare dit : «  Hé, tu sais quoi ? Ce cours suscite beaucoup d'engagement et de nombreuses critiques de la part des étudiants. Cela doit donc être utile. Cela doit donc être utile. Nous allons donc le pousser vers le haut dans la bibliothèque pour qu'il soit plus facile à découvrir par les nouveaux étudiants. L' algorithme Skillshare pousse donc ce cours vers le haut et le rend plus visible plus facile à découvrir pour les nouveaux étudiants. Parce qu'il a reçu des critiques positives. Et c'est là que tu interviens. Rejoignez-moi dans cette mission et m'a aidé à enseigner à au moins 10 000 étudiants comment utiliser Elementor, comment créer de belles pages de destination, sites Web fonctionnels en laissant un avis dans ce cours et leur indiquant à quoi s'attendre de ce cours. Cela ne vous prendra que deux minutes et c'est terminé. Mais votre évaluation aidera grandement les nouveaux étudiants, les futurs étudiants, à savoir à quoi s'attendre de la classe. La classe répond à vos attentes. Cela a-t-il dépassé vos attentes ? Si vous avez des questions, n'oubliez pas que vous pouvez toujours les poser dans la zone de discussion sous cette vidéo et je serai en mesure de vous aider. Je réponds toujours à chaque question ou commentaire que les étudiants laissent dans mes cours. Cela étant dit, je veux juste vous dire «  profitez bien du cours » et je vous verrai à la prochaine leçon. Paix. 12. La page de la boutique: Bienvenue de retour. Dans cette leçon, je veux parler de la page de la boutique. Tous nos produits sont affichés ici pour le client. Nous devons donc parler un peu de la page. En ce moment. Nous examinons le tri par défaut, mais nous avons un menu déroulant qui comporte quelques options. À partir du tri par popularité. Combien de fois le produit a été acheté du plus populaire au moins populaire. La suivante est donc classée par note moyenne. Donc, bien sûr, le produit le mieux coté passera en premier. Ensuite, nous avons trié par dernier, et ce sont les derniers produits que vous avez ajoutés. Et bien sûr, comme vous pouvez le constater, les deux produits que nous venons créer sont apparus avant le reste. Et vous remarquerez que nous les avons créés en premier , puis c'est le dernier que nous avons créé. Et c'est pourquoi il apparaît comme le dernier, comme le premier produit. Nous avons trié par prix du haut, du plus bas au plus élevé, et du plus haut au plus bas. Bien sûr, c'est explicite. Il s'agit donc de la page de la boutique. Bien sûr, il n'y a vraiment pas grand-chose à dire sur la page. La prochaine chose que nous voulons faire est de regarder ces trois pages. Et ces pages sont créées à l'aide d'Elementor. Nous devrons donc les modifier avec Elementor. Voyons comment le faire dans la prochaine leçon. 13. La page des témoignages: Examinons maintenant ces pages Elementor. Bien sûr, nous y voilà. Voici donc la page des témoignages. Vous remarquerez donc que parce que nous l'avons ouvert, nous avons maintenant la possibilité de modifier avec Elementor. Tout d'abord, faisons défiler vers le bas jusqu'au bas, et c'est à quoi ça ressemble. Vous remarquerez donc que nous avons eu un formulaire d'inscription d'appel à l'action parce que nous nous sommes débarrassés de l'autre plug-in. Il n'apparaît plus maintenant. Cela signifie que nous devons le remplacer par le formulaire de formulation que nous avons créé. Cliquez sur Modifier avec Elementor. Nous y voilà. Bien sûr, c'est comme la section héros que nous avons éditée sur la page de destination. Si vous sélectionnez cette section, nous avons les mêmes paramètres. Nous pouvons augmenter la hauteur, laisser à la taille par défaut. Nous pouvons sélectionner ces témoignages. Il s'agit d'une rubrique, donc nous pouvons bien sûr ajouter un lien si nous voulions diriger ailleurs, mais je ne pense pas que nous voudrions qu'il mène ailleurs parce que nous sommes déjà ici sur la page des témoignages. Et bien sûr, nous pouvons changer ce qu'il dit. Bienvenue. Nous pouvons changer la couleur. Fondamentalement, tout ce que nous avons fait sur la section héros et sur la page de destination, nous pouvons le faire ici. N'oubliez pas qu' il s'agit d'un témoignage et nous avons déjà vu comment modifier un témoignage. En sélectionnant cette option, nous affichons les paramètres des témoignages et nous pouvons ajouter un titre au témoignage. Cette personne est donc dans le département marketing. Ce n'est pas comme ça pour écrire ça, mais pas de problème. Nous pouvons ajouter un lien. Nous pouvons l'ouvrir dans un nouvel onglet. Il s'agit d'ouvrir dans une nouvelle fenêtre, mais cela signifie en fait ouvrir un nouvel onglet dans le même navigateur. Ne vous inquiétez pas à ce sujet. Et bien sûr, en entrant dans le style, nous pouvons changer tous les aspects des éléments du témoignage, comme le titre. Nous pouvons changer la couleur du texte par quelque chose comme une niche, une couleur verdâtre. Nous ne faisons que jouer avec les paramètres. Nous n'essayons pas de rendre ces sites Web incroyables, mais bien sûr, je compte sur vous pour appliquer votre créativité et rendre votre site Web aussi attrayant que possible. N'oubliez pas que nous pouvons toujours modifier cette superposition d'arrière-plan, en sélectionnant la section qui se trouve à l'intérieur de la superposition d'arrière-plan, la changer en couleur noire. Il y a plusieurs autres paramètres que vous pouvez expérimenter ici . La graine, la meilleure chose que vous puissiez obtenir. Et bien sûr, j'ai oublié de mentionner que vous pouvez toujours changer l' arrière-plan comme nous l'avons fait avec la section héros. Je n'ai pas d'image que je peux utiliser ici, mais bien sûr, vous savez, vous pouvez toujours avoir, bien sûr, vous pouvez toujours utiliser n'importe quelle image que nous avons. Comme ça maintenant. Ça a l'air bien mieux. En fait. Mettez à jour cela. Prévisualisons les modifications. C'est comme ça que cette page semble sentir. Allez-y et maintenant que vous savez déjà comment jouer avec l'élément des témoignages. Si vous pouvez aller de l'avant et apporter les changements nécessaires. Donc, tous vos témoignages. Ensuite, ici, bien sûr, ce que nous devons faire, c'est sélectionner ce code court. Maintenant qu'il apparaît, supprimons ça. Revenons à l'intérieur de notre formule des formulaires. N'oubliez pas que nous avons créé le formulaire d'inscription. Cliquez donc sur cette roue dentée et copiez le raccourci. Le raccourci a été copié avec succès. Revenons ici. Et collons-le ici. Maintenant, il apparaît. Mettons-le à jour. Prévisualisons les modifications. Faites défiler vers le bas. Maintenant que notre formulaire d'inscription apparaît, il est visible. Maintenant, vous vous demandez peut-être si je voulais changer la couleur de ce bouton ? C'est quelque chose que j'ai oublié de mentionner lorsque nous avons créé le formulaire lui-même. Revenons donc dans notre tableau de bord, formulaire d'inscription, nous allons le modifier. Bien que nous le créions dans ce formulaire, nous n'utilisons que l'onglet Champs. Il y a plusieurs autres onglets ci-dessous. Et voici les onglets que nous devons parcourir chaque fois que nous créons n'importe quel formulaire jusqu'à la fin. Et vous remarquerez que ces champs, puis Apparence, puis le comportement sont la même chose que nous suivrons ici. Une fois que nous avons fini de créer le formulaire, d'ajouter les champs, la prochaine chose à faire est de modifier l'apparence. Lorsque vous cliquez dessus, nous sommes maintenant dans l'onglet Apparence. Et ici, nous pouvons dire, par exemple, que nous voulons qu'il soit plat sans frontières. Si nous passons aux couleurs, nous pouvons choisir un costume, ce qui donne plus d'options. L'une des options disponibles est le bouton Soumettre. Ici, nous pouvons changer la couleur pour peut-être une sorte de lecture, par exemple. Mais bien sûr, n'hésitez pas à choisir n'importe quelle autre couleur que vous voulez. C'est ce qui s'est passé. Prévisualisez-le avant de l'enregistrer. Très bien. Mettons-le à jour. Vous pouvez également modifier les effets de survol. Donc, sur le bouton Soumettre et le bouton d'envoi des couleurs, survolez. Nous voulons qu'il soit peut-être noir. Sur la focalisation. Nous voulons également qu'il soit noir. Mettez à jour cela. Une fois que nous avons mis à jour les modifications, nous pouvons aller ici et recharger cette page. Maintenant, quand nous planons, c'est noir. C'est ainsi que vous pouvez modifier l'apparence de toutes vos formes formulées. C'est tout à propos de ces pages de témoignages. Et bien sûr, si nous ouvrons la page À propos, c'est à peu près la même chose. En utilisant l'élémentaire, vous pouvez répéter les mêmes étapes que celles utilisées maintenant, vous devez avoir appris à jouer avec tous ces éléments. Nous avons déjà vu comment travailler avec tous ces différents éléments sur la page de destination. Allons donc à l'intérieur de la page de contact. Dans la page de contact, nous sommes censés avoir un formulaire WP Forms. N'oubliez pas que nous avions deux formulaires avant de supprimer ce plugin. Et l'autre avant tout, un formulaire de contact. Maintenant que nous n' avons plus ce plug-in, ce que nous devons faire, c'est entrer dans les formulaires terminateurs. Je rose, nous devrions le faire dans la prochaine leçon. Je vous verrai bientôt. 14. Page de contact: Bienvenue de retour. Nous voici donc à l'intérieur des formulateurs dans le domaine des forums. Nous examinons la liste des formulaires que nous avons ajoutés à l'heure actuelle, nous n'en avons qu'un. Par conséquent, si vous avez créé dix formulaires avec le formulateur, ils seront répertoriés ici. Ce que nous voulons faire, c'est créer un nouveau formulaire pour notre page de contact. Allons-y. Laissez-moi juste fermer ça. Lorsque la page de contact et nous voulons créer un formulaire pour remplacer la largeur de ces formulaires WP. Allez-y et cliquez sur Créer. Et maintenant, cette fois-ci, nous voulons créer un formulaire Contactez-nous. Alors, sélectionnez-le et continuez. Formulaire de contact, disons Créer. Par défaut, il est déjà pré-rempli avec les champs dont nous aurons besoin. Pour l'instant, je ne pense pas que nous ayons besoin de numéro de téléphone, mais si c'est le cas, vous pouvez toujours le laisser là. Je vais donc enlever ça. Supprimer. N'oubliez pas que si vous supprimez un champ et que vous changez d'avis, vous pouvez toujours l' insérer à partir du champ inséré. Permettez-moi de terminer ça. Nous y voilà. Vous avez commencé le numéro de téléphone sur le terrain. Voici le numéro de téléphone. Vous pouvez toujours l'ajouter, l'insérer. Par défaut, il affiche les paramètres du téléphone, un champ que nous venons d'ajouter. Ce que je vais fermer ça. Et voici un téléphone que vous pouvez faire glisser et le placer là où il se trouvait. Vous pouvez également les avoir côte à côte. Lorsque cette ligne bleue apparaît juste sur le côté droit, ou n'importe où vous survolez. Vous pouvez placer n'importe quel champ où vous le souhaitez. Si vous ne souhaitez pas utiliser cette option, vous pouvez également utiliser cette option dans certains champs. Les mauvaises herbes sont les mêmes, mais je veux me débarrasser du numéro de téléphone comme je l'avais déjà fait. Maintenant, nous avons l'adresse e-mail, prénom, alors nous allons les changer comme ça. Ensuite, la zone de texte du champ de message. Prévisualisons cela avant de le publier. C'est comme ça que ça ressemble. Si nous les avons empilés l'un sur l'autre. Prévisualisons ça. C'est comme ça que ça ressemble. Maintenant que nous aimerions ce qu'il ressemble, publions ça. Il est maintenant publié. Choisissons le code court du formulaire de formulateur, copié avec succès. Il va dire que la page de contact et la modifier avec Elementor parce que nous n'avions pas encore cliqué dessus. Modifiez avec Elementor. Bon, alors faisons défiler vers le bas. Ce point. Supprimons ce code court et collons mon nouveau raccourci que nous venons de créer. Voici un très beau formulaire d'inscription. Mettons à jour les modifications et prévisualisons la page. Défilement vers le bas. C'est à quoi ressemble notre formulaire de contact. Je retourne ici. Laissez-moi fermer cela et nous pouvons accéder à l'onglet Apparence. Faites-le à plat. Vous pouvez modifier la couleur du bouton d' envoi en rouge. En vol stationnaire. Faisons le noir, non concentré. Faisons aussi le noir. Mettons-le à jour. Prévisualisons à nouveau les modifications. Défilement vers le bas. On y va. Ici, nous avons également une carte et nous pouvons zoomer et dézoomer. Juste au cas où nous aurions un emplacement physique vers lequel nous voudrions diriger les gens. Et la façon de le faire est de faire défiler vers le bas ici en sélectionnant les éléments qui contiennent la carte. Nous allons sélectionner cet élément. Cliquez ici avec le bouton droit de la souris et modifiez Google Maps. Il vous suffit maintenant de fournir un emplacement en effectuant une recherche rapide sur Google sur votre lieu. Vous pouvez ensuite définir le niveau de zoom par défaut. Et ces autres parties sont simples et faciles à modifier pour vous. Je vais cliquer sur Mettre à jour. Il s'agit d'un élément de médias sociaux. Lorsque nous cliquons dessus pour le modifier, c'est assez simple. Vous pouvez supprimer ceux que vous ne voulez pas. Vous pouvez accéder à l' onglet Style pour modifier les couleurs. Si vous voulez qu'ils le fassent. C'est un peu orange. C'est là que nous l'avons. Peut également choisir d'avoir leurs couleurs officielles. Donc, s'il s'agit de Facebook, d' Instagram et de Twitter. Mais nous allons y aller avec un costume. Découvrez ce que vous pouvez faire avec tous ces paramètres. Vous pouvez également modifier la couleur du survol. Donc, en ce moment, lorsque vous survolez, c'est noir, de couleur secondaire. Voyons qu'en est-il du rouge ? C'est une couleur de fond. Cliquons donc sur ces deux éléments clairs. Changeons ces deux-là, peut-être un rouge. Et maintenant, la seule icône va changer la couleur à lire. Écrivez, mettez à jour cela. Prévisualisons les modifications. Défilement vers le bas. Notre page de contact. Maintenant terminé. Chaque partie de notre site Web est maintenant complète et personnalisée à notre goût. Parcours. Prenez le temps de faire tout ce qui est en votre pouvoir pour personnaliser votre site Web jusqu'à ce que vous soyez satisfait de son apparence. 15. Réflexions finales: Cela marque la fin de notre classe. J'espère vraiment que vous avez appris quelque chose sur la façon créer des sites Web à l'aide de WordPress et plus précisément, vous avez appris à créer une boutique de commerce électronique ou à faire des achats avec WordPress. Maintenant, la prochaine chose que je vous recommande d'apprendre est le référencement, l'optimisation des moteurs de recherche. Et c'est essentiellement la façon de rendre votre site Web visible par les moteurs de recherche et visible par les utilisateurs que vous souhaitez. Lorsque des utilisateurs se rendent dans des moteurs de recherche tels que Google pour rechercher les produits que vous vendez. Vous aimeriez que votre site Web figure parmi les premiers résultats des pages de résultats. Alors, comment devenir visible par le moteur de recherche pour qu'il affiche votre site Web lorsque personnes recherchent les produits que vous vendez ? J'ai déjà publié un cours sur l'optimisation des moteurs de recherche, spécifiquement pour WordPress utilise comment optimiser votre site Web WordPress pour le rendre plus visible par les moteurs de recherche. Allez-y et ouvrez mon profil sur Skillshare. L'une des classes est WordPress SEO simplifiée. Regardez qu'il ne dure que 16 minutes et découvrez comment rendre votre site Web visible. Découvrez comment optimiser votre site Web pour les moteurs de recherche. Sinon, c'était un plaisir de vous apprendre comment construire une boutique e-commerce avec WordPress. Et j'espère vous voir dans le prochain cours à l'avenir. Je m'appelle Ken Visa. On se voit dans le prochain morceau.