Construire un site Web de téléchargement numérique avec Elementor (plugins gratuits)

1. Intro: Bienvenue à un autre cours génial avec moi, peut Besser. C'est toujours un plaisir de vous avoir ici. Si vous avez regardé mes lunettes, alors vous savez, j'aime apprendre aux gens comment concevoir superbes pages de destination avec Elementor et WordPress. Maintenant, dans ce cours, je vais vous apprendre à concevoir un site Web de téléchargements numériques où vous pourrez vendre vos produits numériques. Par produits numériques, je veux dire des choses comme les modèles de logo, votre musique, si vous vendez des instruments, si vous êtes producteur de musique ou si vous concevez des modèles d'interface utilisateur à l'aide de Figma et Sketch, et vous voulez pouvoir vendez-les sur votre propre site Web. Si vous avez déjà visité un marché comme Graphic River, Free Peak ou Creative Market, alors, vous savez, une entreprise de téléchargement numérique. Je parle d'une plateforme où un visiteur peut venir explorer votre bibliothèque de produits numériques dans votre boutique numérique. Sélectionnez un produit numérique pour voir plus de détails, puis téléchargez ce produit numérique. C'est le genre d'affaires dont je parle. Si vous êtes dans l'industrie créative et votre travail implique la création de contenu numérique. Par exemple, des polices, modèles de conception graphique tels que des dépliants et des modèles de logo, des modèles UX d' interface utilisateur tels que des modèles de figma ou d'esquisse. Dans ce cours, vous apprendrez comment configurer une plateforme sur laquelle vous pouvez vendre ces modèles. Contrairement à mes autres classes élémentaires où je me suis concentré principalement sur l'utilisation d' Elementor pour créer une seule page de destination sans entrer dans les détails sur le fonctionnement d'un site Web. Dans cette classe, nous allons créer un site Web à plusieurs pages à part entière qui fonctionne et qui a le potentiel de commencer à gagner de nouveaux revenus passifs même lorsque vous dormez. C'est si vous êtes prêt à vous y engager. Donc, si vous rêvez de posséder une plateforme en ligne où les gens peuvent venir télécharger des produits numériques, où vous pouvez télécharger les modèles à créer. C'est alors le système que nous allons apprendre. J'espère que vous êtes aussi excité que moi. Je veux vous montrer ce que nous allons construire et ensuite nous n'avons pas commencé, alors suivez-moi. Et là, nous l'avons. Maintenant que nous avons eu un aperçu du site Web de téléchargements numériques qui va construire. Et parce que ce cours est conçu pour accueillir des personnes à tous les niveaux d'expérience dans WordPress, y compris les débutants. Nous allons commencer par examiner ce qu'est un CMS sans perdre plus de temps. Commençons. 2. Qu': Un système de gestion de contenu, ou CMS, est une application qui vous permet de créer, publier et de modifier du contenu numérique. Avec un CMS, vous pouvez créer un site Web entièrement fonctionnel en quelques minutes et commencer immédiatement à vendre des produits et services aux clients en ligne. Pour utiliser un CMS, vous n'avez pas besoin de savoir coder, car l'application vous fournit des outils permettant de manipuler visuellement votre contenu. Si vous savez comment pointer et cliquer sur des icônes sur un écran d'ordinateur, vous pouvez utiliser un CMS. N'importe qui peut utiliser un CMS. Nous allons ensuite jeter un coup d'œil à quelques-uns des exemples du CMS le plus populaire que nous ayons connu sous peu. Mais comment fonctionne un CMS ? Pour comprendre le fonctionnement d'un CMS, nous devons le considérer comme deux parties qui fonctionnent ensemble pour produire une expérience agréable pour l'utilisateur. Ces deux parties comprennent une application de gestion de contenu ou un CMA, qui est essentiellement l'interface utilisateur graphique frontale ou frontale avec laquelle vous interagissez lorsque vous créez et modifiez le contenu de votre site Web. Ceci est représenté par un tableau de bord qui vous fournit plusieurs outils et utilitaires que vous pouvez sélectionner et effectuer différentes choses sur votre contenu. L'autre partie est l'application de diffusion de contenu ou le C, D, a. Il s'agit du côté principal du CMS, qui est responsable de la diffusion du contenu que vous avez créé avec un CMA à votre site Web visiteurs. Pour illustrer la relation entre ces deux composantes. Considérons un CMS comme un restaurant pour un instant. Si un CMS est un restaurant, le CMA est comme la cuisine. Il fournit la cuisine là où c'est nécessaire pour cuisiner les aliments que les clients seront servis. C'est-à-dire dans un CMS, l'AMC est la partie qui vous donne les outils nécessaires pour créer un contenu publié, le contenu numérique qui sera diffusé aux visiteurs, tels que des articles de blog, produits affiché sur votre site Web lorsque vous les créez. C'est le CMA qui vous donne les outils nécessaires pour créer ces pièces. D'autre part, alors qu'il est toujours sur l'exemple du restaurant, l'ADC est comme le serveur d'un restaurant qui reçoit des commandes de repas, se rend à la cuisine pour aller chercher la nourriture et le sert aux clients. Pour revenir à notre site Web, c'est dire que l'ADC est la partie du CMS qui dessert les pages demandées par les visiteurs de votre site Web. Ainsi, lorsqu'ils demandent la page d'accueil, ils cliquent sur un bouton censé être redirigé vers une autre partie du site Web. C'est l'ADC qui est responsable de la livraison de la page qu'il a demandée. Vous pouvez utiliser un CMS de deux manières , et cela dépend de la façon dont le CMS est installé. Vous pouvez utiliser un CMS en tant que CMS local ou CMS basé sur le cloud. Si vous téléchargez et installez le CMS sur un serveur fourni par un hôte Web ou sur un serveur que vous avez créé localement sur votre machine. Le CMS est censé être une installation sur site. Parce qu'il est installé sur un serveur sur lequel vous avez le contrôle. Vous pouvez apporter des modifications directes au cœur de l'application pour répondre aux besoins spécifiques de votre projet de site Web. Par exemple, vous pouvez accéder au code source de WordPress et le modifier code source de WordPress et le pour personnaliser la façon dont vous créez votre site Web. En ce qui concerne le Cloud, CMS, un vendeur du service CMS, vous fournit un environnement hébergé dans le Cloud sur lequel vous pouvez créer et gérer votre site Web. Par exemple, pensez à des semaines. Ils vous fournissent un environnement sur lequel vous pouvez créer un site Web, mais ils gèrent la plateforme principale des semaines qui alimente votre site Web. Avec ce type d'installation, vous n'avez pas la liberté de modifier le CMS lui-même. Le noyau. Par exemple, vous pouvez créer un site Web sur des semaines, mais vous ne pouvez pas modifier le cœur de la plateforme Weeks elle-même, car seule l'équipe développeur interne des semaines a accès au code source. Vous et d'autres utilisateurs pouvez utiliser les outils fournis sur la plateforme WIX pour créer des sites Web. Mais l' équipe de la semaine s'occupe du dos et des fonctionnalités arrière pour vous. Les exemples les plus populaires de CMS sur site incluent Drupal, Joomla et WordPress, wordpress.org. Quelques exemples courants d' installations CMS basées sur le cloud incluent Weeks, Shopify et la plateforme WordPress.com. Bien que chaque CMS soit unique dans une certaine mesure, presque tous les CMS partagent certaines caractéristiques cruciales. Jetons un coup d'œil à certains d'entre eux. Numéro 1, un CMS vous donne les outils nécessaires pour publier différents types de contenu numérique. Beaucoup de gens choisissent d'utiliser un CMS car il leur permet d' assembler des éléments de contenu en quelques clics et de les publier en temps réel sous forme de billets de blog ou de produits sans avoir besoin de coder. Numéro 2. Un CMS vous offre des moyens de réviser votre contenu publié. En tant que propriétaire d'un site Web, vous voudrez toujours modifier ou mettre à jour certains contenus que vous avez déjà publiés. Un CMS fiable devrait vous permettre d'apporter des modifications à votre guise et de suivre ces modifications afin que vous puissiez revenir à des versions antérieures de votre travail en cas d'erreur pendant que vous êtes en train de monter. Un CMS offre un moyen facile d'indexer, de rechercher et de récupérer du contenu. Cela signifie simplement qu' un CMS doit permettre vous ou à vos utilisateurs d'accéder facilement au contenu de votre site Web par le biais d'une recherche en fournissant un moyen regrouper le contenu par catégories ou groupes prédéfinis. Par exemple, des modèles de dépliants, des modèles de magazines. Lorsqu'un utilisateur saisit des modèles de magazines, il doit pouvoir obtenir une liste ou une galerie de résultats liés à un magazine directement à l'écran. C'est ce que nous entendons par indexation, recherche et récupération de contenu. Maintenant que vous comprenez ce qu' est un système de gestion de contenu, jetons un coup d'œil au système de gestion de contenu le plus célèbre et le plus populaire au monde , WordPress. Nous allons le faire dans la prochaine leçon. 3. Introduction à l'environnement Wordpress en ligne: La première étape de la mise en place d'un environnement de développement WordPress en ligne consiste à obtenir un hébergement Web fiable. Un hébergeur Web stocke essentiellement votre site Web sur un ordinateur connecté à Internet 24, 7 ou 365 jours par an. Cela garantit que vos pages Web sont disponibles pour visiteurs lorsqu'ils en font la demande lorsqu'ils naviguent sur votre site Web. Nous allons donc choisir un bon site Web pour votre entreprise. Ayant conçu des sites Web WordPress depuis des années maintenant, je suis tombé sur et j'utilise beaucoup d' hébergeurs Web et certains des facteurs cruciaux que j'ai appris à prendre en compte lorsque j'ai cherché un bon hébergeur Web. y compris, y a-t-il des services d'hébergement adaptés à la presse parce qu'il y a des hébergeurs qui offrent des services spécifiques à WordPress. Quelles technologies de sécurité utilisent-ils pour protéger votre site Web ? Offrent-ils un support technique fiable 24 heures sur 24, 7 jours sur 7 ? Offriront-ils des vitesses de chargement rapides pour votre site Web ? Ce sont quelques-uns des rares, comme vous devez le considérer lorsque vous recherchez un hébergeur Web. Et avec ces facteurs à l'esprit, quelques-uns des hébergeurs Web WordPress les plus populaires qui sont connus pour leurs services conviviaux WordPress toujours excellents incluent l'hébergement TMD, site ground , hôte de rêve, Bluehost. Ces entreprises fournissent des services spécifiques à WordPress dans le cadre de leurs offres de produits. Et ce ne sont que quatre des hébergeurs Web WordPress les plus célèbres du marché. Vous pouvez obtenir de bons hébergeurs Web pour votre entreprise de téléchargements numériques dans votre propre pays. Mais juste au cas où vous voudriez vous épargner ce temps et cette douleur d'avoir à Google partout pour les meilleurs services d'hébergement Web que les quatre que j'ai déjà mentionnés, c'est le site d'hébergement de TMD, dream host et Bluehost, le très populaire parmi les utilisations WordPress et vous pourriez envisager de les utiliser. C'est donc tout pour l' hébergement Web et le nom de domaine. Il est maintenant temps de mettre en place un environnement de développement WordPress en ligne. Nous allons donc plonger directement. 4. Démo - Comment créer un ENvir WordPress WordPress en ligne: Bienvenue dans cette leçon. Dans la dernière leçon, nous avons parlé des deux environnements WordPress différents que nous pouvons configurer pour commencer à créer des sites Web. Dans cette leçon, nous allons mettre place un environnement WordPress en ligne. Nous avons également examiné quelques facteurs que vous devez prendre en compte lorsque vous recherchez un hébergeur Web. Donc maintenant, dans cette classe, je suppose que vous avez déjà décidé quel hébergeur Web nous allons utiliser pour mes démos, j'utilise ces hébergeurs Web. Je vais donc me connecter pour avoir accès à mon cPanel. Connectez-vous donc à votre hôte Web pour accéder à votre cPanel. Dans le tableau de bord de mes hôtes Web, j'ai cette option de connexion cPanel. Recherchez l'option de connexion cPanel où qu'elle se trouve dans votre tableau de bord. Donc, à l'intérieur de mon cPanel, je vais faire défiler jusqu' en bas et chercher des applications subscapularis, l'installateur, je cliquerai sur Wordpress. Et parce que vous avez cliqué sur WordPress, vous serez directement dirigé vers la page de destination WordPress à l'intérieur du calcul. Et comme j'ai déjà deux installations de WordPress sur blé, je dois vivre un site web. J'ai ici une liste des installations actuelles. Lorsque j'installerai une autre copie de WordPress, elle sera répertoriée ci-dessous ici. Ce sera donc la liste de toutes vos installations WordPress. La prochaine chose que nous devons faire maintenant est la systole. Maintenant. Nous allons maintenant accéder à cette page où nous pourrons remplir tous les détails concernant notre nouveau site Web. Par conséquent, pour le protocole, je clique sur le menu déroulant et je sélectionne HTTPS. Assurez-vous qu'il s'agit de https, www dot, de sorte qu'il s' agisse de www dot votre domaine. Laissez le répertoire vide ici, et c'est la version de WordPress que nous voulons installer. Il s'agit donc de la version 5.8.1. Donnez-vous donc un site Web et un nom, et donnez-lui une description. Très bien, vous pouvez donc fournir ici les détails de l'administrateur. Il s'agira de vos identifiants de connexion WordPress. Ainsi, chaque fois que vous souhaitez vous connecter à votre WordPress afin d'accéder au tableau de bord WordPress. Voici les détails que vous utiliserez. Assurez-vous donc qu'il s'agit d'un mot de passe fort. Laissez-moi cacher cela et définir mon mot de passe. Je vous suggère donc de laisser l'e-mail par défaut qui se trouve dans le champ de saisie ici. Ensuite, ils ne sont pas obligatoires. Oui, et c'est tout. C'est fini. Et ici, saisissez l' e-mail auquel vous souhaitez nous attaquer pour envoyer une notification lors de la création de votre site Web. Ainsi, une fois ce site web créé, une fois cette installation WordPress terminée et une notification sera envoyée à cet e-mail. Je vais donc juste mettre mon e-mail et dire installer. Ne dites pas ça. Nous devrions dire trois à quatre minutes. Très bien. Et maintenant, félicitations, le logiciel a été installé avec succès. Et c'est le lien direct vers la page principale, vers la page principale du domaine. Laissez-moi simplement cliquer pour voir où nous en avons. C'est donc notre site Web en ce moment. Et c'est le lien vers notre tableau de bord. C'est le même domaine, mais avec un administrateur de tiret WP. C'est donc le lien vers le tableau de bord. Si je clique dessus, vous serez redirigé vers le tableau de bord. Et Wallah, nous l'avons là. Nous avons mis en place un environnement en ligne où nous sommes pressés, et maintenant notre site Web est en ligne. Si nous ouvrons à juste titre le lien dans un nouvel onglet et que nous allons dans cet onglet, c'est ce que nous avons. Maintenant, la prochaine chose que nous voulons faire est de voir comment installer un thème WordPress. Qu'est-ce qu'un thème WordPress ? Je vous verrai bientôt. 5. Démo - Comment créer un environnement WordPress local: Dans ce tutoriel, je vais vous montrer comment configurer une installation locale de WordPress et nous utiliserons XAMPP. Mais tout d'abord, qu'est-ce que XAMPP ? Know Zap est un environnement de développement totalement gratuit et open source qui permet aux utilisateurs de WordPress de créer et d'héberger des sites Web localement sur leurs machines sans avoir besoin de connexion Internet. Cela signifie que nous pouvons continuer à interagir avec les sites Web que vous avez créés sans avoir besoin d' une connexion Internet. Dans son intégralité. Xampp signifie X signifie Apache, MySQL ou MySQL multiplateforme , empereur PHP. Selon WordPress, dans le contexte d'un réseau, un hôte local est un ordinateur spécifique sur lequel vous travaillez actuellement. Donc, si vous êtes dans un bureau en ce moment, l'ordinateur que vous utilisez l'hôte local d'Israël. Si vous travaillez à domicile, votre ordinateur à domicile est votre hôte local. Si vous avez un ordinateur préféré, c'est un cybercafé, cet ordinateur peut également être votre hôte local. Vous pouvez avoir XAMPP sur n'importe laquelle de ces machines et y installer WordPress et commencer à créer des sites Web à partir de là. Voyons donc comment configurer un hôte local à l'aide de XAMPP. Nous voici donc sur la page de téléchargement officielle de XAMPP. Et l'URL est www dot Apache friends.org slash index.html. Et vous remarquerez que nous avons différentes versions de XAMPP Creative pour différents systèmes d'exploitation. Parce que j'utilise Windows, je vais cliquer sur XAMPP pour Windows. Le téléchargement devrait démarrer automatiquement, mais je ne vais pas le télécharger car j'avais déjà téléchargé le, comme vous pouvez le voir ici sur mon bureau, je l'ai déjà. La prochaine chose que nous voulons faire est d' aller sur la page de téléchargement de WordPress, qui est le téléchargement slash WordPress.org. Faites défiler vers le bas et cliquez sur ce bouton ici pour télécharger la dernière version de Wordpress. Et j'en ai déjà une copie. Je l'ai déjà téléchargé et extrait. C'est sur mon bureau, comme vous pouvez le voir ici. Téléchargez donc ce WordPress et extrait dans un endroit où vous pouvez le récupérer. Maintenant que vous avez ces deux-là, commençons par installer XAMPP. Je vais donc double-cliquer dessus. Et vous recevrez cet avertissement. Allez-y et dites oui, continuez l'installation. Suivez ensuite les instructions. devrait être assez facile. Pas compliqué de viser le chemin jusqu'à la fin et installé XAMPP dans sa valeur par défaut. Voyez la droite, Désolé, j'en ai déjà une copie dans mon système, donc je ne vais pas l'installer. Donc, une fois que vous avez installé XAMPP et que vous êtes entré dans votre panneau de configuration et que vous avez regardé la liste de tous les programmes que vous avez installés sur votre machine, vous devriez trouver le module WordPress Bitnami juste là et XAMPP dans le dossier. Permettez-moi d'aller de l'avant et de conclure cela. Et à l'intérieur de votre lecteur C ou de votre système principal sec, vous trouverez un dossier appelé SAM qui devrait vous indiquer que vous avez correctement installé XAMPP sur votre machine. Et avant de passer au dossier WordPress, assurez-vous que notre serveur fonctionne maintenant. Je vais donc ouvrir XAMPP à partir du menu Démarrer. Je vais le mettre ici en lumière. Et vous remarquerez qu'il y a de nombreux boutons ici. Mais nous ne sommes intéressés que par deux boutons. Apache, MySQL. Cliquez donc sur Démarrer sur les deux et vous remarquerez que le statut a changé. Maintenant, MySQL est en cours d'exécution et Apache est en cours d'exécution. Mysql est la base de données, et Apache est un serveur. Je vais donc y aller de l'avant et minimiser cela. Passons à l'étape suivante. La prochaine chose que nous voulons faire est choisir le dossier WordPress que vous venez d'extraire. Et nous pourrions l' ouvrir une seconde. Vous remarquerez qu' il y a de nombreuses pages Web dans un tas d' autres dossiers contenant plus de fichiers qui vous permettront de naviguer sur vos pages sur votre site Web local. Maintenant que nous avons confirmé que tout ce dont vous avez besoin se trouve à l'intérieur. Copiez-le. Ensuite, nous allons ouvrir l' Explorateur Windows et aller dans C, ouvrir le dossier Zoom que nous venons de regarder et chercher ce dossier, les documents HT. C'est ici que tous vos sites Web WordPress seront installés. C'est ici que vous disposerez tous vos sites Web WordPress installés localement. Donc, si on le colle ici. Je pense que j'en avais déjà collé une copie, donc j'en ai déjà une copie ici, mais il suffit de coller ce dossier WordPress dans ce dossier HT Docs qui se trouve à l'intérieur du dossier d'examen, à l'intérieur du lecteur C. Et une fois que vous l'avez collé là-dedans, renommez-le par le nom de votre site Web. Donc, mon web m'a laissé appeler ça mon override Web. Maintenant que nous avons installé XAMPP dans notre système et qu'il fonctionne comme vous pouvez le voir par cet état ici. Et nous avons déjà téléchargé une copie de WordPress et créé un site Web à partir de celui-ci, et nous l'avons nommé mon site Web dans le dossier XAMPP. Nous pouvons maintenant accéder au tableau de bord du site Web WordPress, le tableau de bord de ces sites Web. Allons donc à l'hôte local. Mon site Web, le nom de votre site Web ou le nom que vous avez donné à votre dossier, et sera redirigé vers cette page où nous commencerons l' installation de WordPress. Donc avant d'aller plus loin, ouvrez un nouvel onglet et allez sur localhost, PHP, mon administrateur. Et la raison pour laquelle nous entrons ici est que notre site Web ne possède pas encore de base de données. Nous allons donc créer une base de données. Ensuite, nous reviendrons sur cette page et continuerons à installer tout le reste. Donc, à l'intérieur de PHP, mon administrateur, allez-y et appuyez sur cette base. Et donnons-lui un nom. Donc, quand j'ai marqué le B ou quelque chose de ce genre, donnez-lui un nom quelconque, n'a pas vraiment d'importance. C'était donc ma base de données Web et vous le trouverez ici. Ici, c'est mon soulignement Web DB. Maintenant, nous pouvons revenir sur cette page et cliquer sur, Allons chercher le nom de la base de données, donnez-lui ce nouveau nom, nous venons de le nommer. C'est donc ma base de soulignement Web DB. Pour le nom d'utilisateur, donnons-lui des itinéraires. Et pour le mot de passe, laissez le champ vide. Cliquez ensuite sur Soumettre. Très bien, Sparky, vous avez traversé cette partie de l'installation. Alors ensuite, lançons cette installation. Ici, nous allons simplement fournir des informations de base sur notre site Web WordPress et définir les informations d'identification de journalisation. Le site Web est donc mon site Web. Et puis passons simplement à l' administrateur pour le nom d'utilisateur. Utilisez un bon mot de passe fort. Mais pour l'instant, à des fins d' illustration, je vais aller avec poli. Ensuite, je confirmerai l'utilisation d'un mot de passe faible. Mon e-mail, P chez k.com. Et je vais chauffer WordPress installé. Laissons-y un moment. On y va donc. Success WordPress a été installé. Merci et profitez-en. Connectons-nous avec les informations d'identification que nous venons de créer, administrateur. Notre mot de passe m'a permis de révéler que c'était mon laissez-passer, si je me souviens bien, quel était mon mot de passe pour la lumière ou le droit. Donc, nous l'avons là. Donc, en résumé ou en résumé rapide, chaque fois que vous souhaitez créer un nouveau site Web localement sur votre machine, vous suffit de copier ce dossier, il vous suffit de copier ce dossier, de le coller ici, de lui donner un nom. Un autre site Web, copiez ce dossier , mettez-le ici, donnez-lui un autre nom, etc. Assurez-vous que c'est le dossier d'origine que vous avez téléchargé, celui que vous avez téléchargé et extrait. Vous pouvez donc avoir 50 7000 sites Web ici. Et quand vous voulez entrer dans le tableau de bord, assurez-vous tout d'abord que votre XAMPP, votre XAMPP, permettez-moi de mettre ça au point. Votre Apache et MySQL sont en cours d'exécution. Aussi longtemps que ces deux derniers sont en cours d'exécution, vous devriez pouvoir ouvrir votre navigateur comme ça et accéder directement à votre hôte local, localhost et au nom de votre site Web. Et c'est comme ça que je peux le faire, les gars. J'espère que vous avez trouvé cela utile. Si vous avez aimé cette vidéo, s'il vous plaît, donnez-moi le pouce en l'air. Nous donnons toujours la motivation nécessaire pour continuer. 6. Qu': Un thème WordPress est une collection de fichiers qui déterminent apparence et le comportement d'un site Web WordPress lorsque les utilisateurs interagissent avec lui. Ces fichiers peuvent donc inclure du code PHP, HTML et CSS, des images, plugins et des modèles de pages Web. En apportant des modifications à cette collection de fichiers, vous pouvez modifier l' apparence et la conception de votre site Web WordPress pour qu'il ressemble et fonctionne exactement comme vous le souhaitez. Par exemple, en modifiant quelques-uns de vos thèmes, paramètres d' apparence, vous pouvez modifier la façon dont articles seront affichés sur votre blog, façon dont vos produits apparaîtront sur votre boutique en ligne, comment vos menus seront présentés sur le site Web, et comment les liens ou se comportent lorsque vous cliquez dessus. Chaque fois que vous installez WordPress, il est préchargé avec le thème WordPress par défaut, généralement nommé d'après l'année au cours de laquelle le lancement est égal. Par exemple, le thème WordPress 2020 ou la douleur WordPress 2021. Vous pouvez toujours passer à un nouveau thème si vous le souhaitez. Et nous verrons comment faire cela dans cette classe. Il existe trois types de thèmes WordPress quand il s'agit de combien cela coûte pour les obtenir. Il existe des thèmes gratuits. Cela signifie qu'ils sont libres de les utiliser complètement. Vous n'avez pas besoin de payer d'argent pour les utiliser. Il existe des thèmes freemium, ce qui signifie qu'ils sont gratuits, mais avec fonctionnalités premium supplémentaires auxquelles vous devez payer pour avoir accès. Ensuite, nous avons des thèmes premium qui ne sont disponibles que si vous les achetez, vous ne pouvez les utiliser que. Si vous les avez achetés. En tant qu'utilisateur de WordPress, vous pouvez facilement trouver n'importe quelle âme, des milliers de thèmes gratuits répertoriés dans le référentiel de thèmes WordPress ou le répertoire des thèmes. Si vous souhaitez des thèmes premium, vous pouvez les acheter un marché numérique tel que Creative Market, ou payer un développeur pour en créer un pour vous. Comment savoir si un thème WordPress est bon pour votre projet ? Maintenant, bien qu'il n'y ait vraiment pas de réponse unique à cette question, généralement, tout thème WordPress bien conçu devrait avoir quelques caractéristiques communes d'un bon thème. En d'autres termes, le thème doit être présentable et génial sur toutes les tailles d'écran. Il devrait avoir une apparence cohérente sur tous les principaux navigateurs. Cela signifie que vous devriez bien travailler avec Chrome, Firefox, Safari, Internet Explorer et ces autres. Il doit être activement maintenu et régulièrement mis à jour. Il doit être en direct et donc rapide à charger. Autrement dit, s'il est bien écrit, il doit avoir un code propre et bien écrit. Vous devez disposer d'une documentation complète et bien écrite disponible en ligne. Vous devez bénéficier d'un service client fiable et d'un support pour tous les utilisateurs. Il devrait être adapté au référencement. Les deux thèmes WordPress que j'utilise dans pratiquement tous mes projets de conception Web le sont. Numéro un, Astra. Astra est un thème WordPress gratuit et polyvalent très populaire thème WordPress gratuit et polyvalent qui vous fournit des tonnes de beaux modèles prédéfinis qui sont entièrement modifiables avec n'importe quelle page populaire Drag and Drop des constructeurs, comme Elementor, Beaver Builder , DV, etc. Les fonctionnalités offertes dans la version gratuite sont suffisantes pour la plupart des projets de sites Web sur lesquels vous voudrez peut-être travailler. En fait, nous utiliserons astro pour notre projet d'entreprise de téléchargements numériques. L'autre thème que j'aime utiliser dans beaucoup de mes projets est dV. Dv n'est pas seulement l'un des thèmes WordPress les plus populaires sur le marché aujourd'hui, il dispose également d'un incroyable constructeur visuel de pages qui vous permet d' éditer tous les aspects de l'équipe et de la conception n'importe quel type de site Web que vous souhaitez sans aucune compétence en codage. Donc, que vous souhaitiez commencer à concevoir à partir zéro ou à partir d'un modèle prêt à l'emploi, dv vous donnera la possibilité de le faire en douceur. Comme je l'ai mentionné, chaque nouvelle installation WordPress est livrée avec un thème par défaut pour contrôler l'apparence de votre site Web. Wordpress vous donne la liberté de passer à un thème différent en installant simplement un nouveau thème via la fonctionnalité d'apparence WordPress dans le tableau de bord. Installons et activons notre thème dans la prochaine leçon. 7. Démo - Comment installer un thème WordPress: Bon retour. Dans la dernière leçon, nous avons examiné la facilité d'un thème WordPress. Dans cette leçon, nous allons donc passer du thème WordPress par défaut pour atteindre appelé astro. Donc, avec toujours à n'importe quel moment, passons directement aux thèmes d' apparence. Et comme je l'ai mentionné dans la dernière leçon, chaque toute nouvelle installation de WordPress est accompagnée d'un thème par défaut. Et le thème porte généralement le nom de l'année de sa sortie. ce moment, nous sommes en 2021. L'équipe active sur chaque nouvelle installation de WordPress est 2021. Et nous avons ces deux autres, 2019 et 2020. Nous voulons dire « Ajouter un nouveau ». Et le thème que nous voulons utiliser pour ce cours et le PMI recommandé pour la plupart des projets est Astra. Maintenant, au cas où vous ne pouvez pas voir Astra ici, vous pouvez taper Astra dans cette barre de recherche, Astra. Laissez-moi juste taper correctement. Astra. Et c'est là. Et nous pouvons aller de l'avant et l' installer ou rouler. Maintenant qu'il est installé, activons-le. Et maintenant, Astra est notre thème actif. Et c'est ainsi que vous pouvez installer un thème WordPress. Et je veux juste prendre un moment et cliquer sur détails du thème juste pour que nous puissions voir pourquoi Astra est une équipe géniale et pourquoi je le recommande à tous ceux qui veulent créer un site Web sur WordPress. Si vous lisez cette description ici, vous verrez pourquoi Astra est l'un des meilleurs thèmes WordPress sur le marché aujourd'hui, et il est gratuit pour vous d' installer et de commencer à utiliser dès aujourd'hui. La bonne chose est qu'il s'agit d'un thème WordPress polyvalent car vous pouvez l' utiliser pour vos articles de blog, portfolios personnels, sites Web d'entreprise, même les vitrines WooCommerce. Mais il y a certainement beaucoup d'autres thèmes WordPress géniaux. Vous devriez certainement les vérifier. Je vous montre seulement ce que j'ai utilisé et parce que cela fonctionne pour moi, je pense que je devrais en parler à plus de gens. revenant ici, maintenant que nous avons installé et activé notre thème, temps de regarder ce qu' est un plugin WordPress car nous utiliserons Elementor et d'autres plug-ins pour construire un site Web à étendre la puissance de WordPress alors que nous construisons notre activité de téléchargements numériques, je suppose que tout le monde qui suivait ce cours n'a pas utilisé était pressant. Nous devons donc partir de ce qu'est un plugin ? Voyons cela dans la prochaine leçon. On se voit sous peu. 8. Qu': Au moment de l' enregistrement de cette leçon, plus de 58 000 plugins WordPress sont disponibles pour que vous puissiez les utiliser sur votre site Web. Mais qu'est-ce qu'un plugin ? Un branchement est une application ou un logiciel tiers qui peut être installé dans votre CMS WordPress pour ajouter de nouvelles fonctionnalités à votre site Web WordPress. C'est comme un petit logiciel conçu pour pouvoir se connecter à un logiciel plus grand pour ajouter des fonctionnalités au plus grand logiciel, qui dans ce cas e est wordpress. Avec les plugins, vous pouvez ajouter des fonctionnalités étonnantes à votre entreprise de téléchargements numériques pour mieux servir vos clients. Le fait que nous soyons pressés est open source et que son architecture permet l' intégration avec des logiciels tiers, est la principale raison pour intégration avec des logiciels tiers, laquelle les plugins sont si populaires parmi les utilisateurs de wordpress. Maintenant que vous savez ce qu'est un plugin, voyons comment installer et activer un plug-in en installant et en activant Elementor. Nous le ferons dans la prochaine leçon. voit sous peu. 9. Mise à jour rapide L'assistant de configuration d'éléments: Bon retour parmi nous. Maintenant, cette leçon est une brève remarque ou une mise à jour rapide du processus d'installation d' Elementor. Si vous suivez ce cours en mai 2022 et au-delà, vous remarquerez que l'activation d' Elementor dispose désormais d' un assistant de configuration composé de plusieurs étapes que vous devez suivre pour configurer les éléments de base de votre site Web. Alors que je créais ce cours il y a plusieurs mois, Elementor ne disposait pas de cet assistant de configuration. Je veux juste que nous utilisions cet assistant de configuration. Mais tout ce que tu apprends dans ce cours ne change pas. C'est toujours le même processus. Le seul ajout est l'assistant de configuration. Comme vous pouvez le voir en ce moment, j'ai une toute nouvelle installation de WordPress et nous en sommes à la version 6. Et ce que je veux faire, c'est aller dans Plugins, Ajouter un nouveau. Nous pouvons donc ajouter Elementor et suivre ce processus. Je vais maintenant rechercher l'installation d'Elementor. Et maintenant, lorsque je clique sur Activer je suis redirigé vers cet assistant de configuration. Et nous pouvons le faire ensemble. sommes donc là. Je vais juste effectuer un petit zoom arrière afin que nous puissions voir plus de détails. accord, vous remarquerez maintenant que la première chose qu' Elemental veut que nous fassions maintenant est de créer un compte pour tirer le meilleur parti d'Elementor. Voici donc quelques-uns des avantages de la création d'un compte chez Elementor. Mais le fait est que vous n' avez pas besoin d'un compte Elementor pour utiliser Elementor. Je vais donc simplement sauter cette partie. La deuxième étape est d'accepter, de continuer avec le thème sacré qu' Elementor a créé pour nous. Ceci est fait par Elementor, mais nous utilisons le thème Astra, donc nous allons de l'avant et sautons. Astra est un thème plus puissant. La troisième étape consiste à donner un nom à notre site Web. Pendant que vous installiez votre WordPress. Vous avez donné un nom au site Web. C'est le nom qui apparaîtra ici. Mais cela nous donne la possibilité de changer le nom pour n'importe quel autre nom que nous voulons. Mon site Web, puis cliquez sur Suivant. Et si vous avez un logo pour votre site Web et que vous souhaitez l' ajouter dès maintenant à l'avance. Vous pouvez simplement ouvrir la médiathèque et la sélectionner dans la médiathèque ou la télécharger depuis votre ordinateur. Mais nous n'allons pas le faire pour l'instant. Je vais donc simplement continuer cette étape. Et bien sûr, nous pouvons ajouter le logo plus tard et je vais vous montrer comment procéder. Cliquez sur Ignorer. Et maintenant, nous arrivons à la toute dernière étape où nous avons deux options. Nous pouvons commencer à modifier notre page d'accueil à partir d'une toile vierge avec l'éditeur Elementor. Nous pouvons également parcourir des centaines de modèles ou importer nos propres modèles si nous en avons. Mais je vais y aller et sauter. Ça. Sera redirigé vers le canevas où nous pouvons maintenant commencer à créer un site Web. Et on y va. En gros, c'est tout ce que je voulais vous montrer. C'est une nouvelle mise à jour. Elle n'y était pas il y a quelques mois. Maintenant, c'est là. Mais tout le reste dans les leçons à venir reste le même. Le processus reste le même pour créer une landing page. Donc, sans perdre plus de temps, passons à la leçon suivante. Je vais accéder au menu de ce burger et cliquer sur Quitter le tableau de bord. Quittons cette page. Nous sommes maintenant dans le tableau de bord et nous sommes prêts à commencer à créer le site Web. 10. Démo - Comment installer un plugin WordPress: Bienvenue de retour. Dans la dernière leçon, nous avons vu ce qu'est un branchement. Voyons maintenant comment installer et activer un plugin WordPress. Donc, parce que nous utiliserons Elementor comme constructeur de pages, installons Elementor. Je vais donc aller de l'avant et cliquer sur le plug-in pour les débutants sera redirigé vers le moins de tous les plugins que nous avons actuellement. Et comme il s'agit d'une toute nouvelle installation de WordPress, je dois par défaut des plugins ici, débarrasser en les sélectionnant. Ensuite, dans ce menu déroulant, sélectionnez Supprimer, puis appliquer. Très bien, donc nous nous sommes débarrassés d'eux. Et je veux aussi me débarrasser de cette notification astrale ici. Alors, terminons ça et maintenant nous avons une ardoise propre. Cliquons sur Add New pour que nous puissions accéder au référentiel des plugins WordPress. Et ici, je veux chercher Elementor. Elementor. Très bien, donc ça devrait être le premier résultat ici, et c'est par elementary.com. Et vous remarquerez qu'il y a beaucoup d'autres plug-ins ici qui portent le nom Elementor. Et ce sont des plugins développés par développeurs de plugins tiers car Elementor est lui-même un projet open source. Cela signifie que vous pouvez, vous pouvez étendre la puissance du plugin de la même manière qu'Elemental a été créé pour étendre la puissance de WordPress car WordPress est open source. Ces gars ici ont donc créé des plug-ins, des widgets, des éléments qui peuvent être ajoutés à elementor et faire de votre processus de conception Reacher. Je vais donc cliquer sur Installer maintenant. Override, puis je l'activerai. Et maintenant, c'est actif. Et c'est ainsi que vous pouvez installer et activer un branchement WordPress. Dans la leçon suivante, voyons un aperçu rapide de l'espace de travail élémentaire afin vous familiariser avec les outils et les fonctionnalités avec lesquels vous allez travailler afin que vous soyez aise lors de la création. le secteur des téléchargements numériques. Je vous verrai bientôt. 11. Aperçu de l'espace de travail des éléments: Bienvenue à cette leçon. Dans la dernière leçon, nous avons vu comment installer et activer un plugin WordPress. Nous avons installé Elementor et nous utiliserons Elemental pour créer des pages Web, voyons un aperçu rapide de l'espace de travail élémentaire afin que nous puissions nous familiariser avec lui. Alors, avec notre passe plus de temps, passons à l'intérieur des pages et ajoutons de nouvelles. Mais avant d'ajouter mu, disons simplement des pages. Cliquez donc sur Pages. Et comme il s'agit d'une nouvelle installation de WordPress, nous avons ces deux pages par défaut. Je veux les supprimer, je vais donc les sélectionner tous les deux. Et dans ce menu déroulant, passez à la corbeille, puis appliquez-le. Créons maintenant une toute nouvelle page afin que nous puissions nous ouvrir dans un mentor et la faire tourner. Donnons un nom à notre page. Appelons ça la page d'accueil. maison. Et à l'extrême droite de l'écran, vous remarquerez que nous avons ces paramètres ici. Sous Paramètres. Accédez au modèle et sélectionnez Elementor pleine largeur. Arrivez en lui donnant un nom. Nous allons donc publier ça. Allons à l'intérieur de l'édition avec Elementor. Nous sommes donc en première ligne de la page que nous venons de créer. Et c'est l'espace de travail élémentaire. Chaque fois que vous créez une page Web ou un en-tête. Voici l'aspect de l' espace de travail élémentaire. Juste ici. C'est notre page qui fera glisser les éléments et les outils de gauche sur notre page et quels que soient les changements que nous effectuons ici, nous pourrons les voir prendre effet en temps réel et nous pourrons cliquez sur Aperçu des modifications et affichez la page Web sans ces paramètres, sans ces blocs. Nous serons donc en mesure de le voir. Maintenant, en partant du haut, ici, nous avons ce menu de hamburgers. Si vous cliquez dessus, nous avons des paramètres généraux pour la page Web sur le site Web, mais nous n'allons pas approfondir cela pour l'instant. Sachez simplement que nous avons quelques paramètres là-dedans. Et puis, avant d'accéder à cette icône ici, dans cette zone centrale, nous avons les différents éléments qui seront glisser-déposer sur l'espace pour créer la page Web. Donc, si je pouvais réduire ce panneau de base juste là, puis réduire ce panneau pro. Nous allons effondrer tous les panneaux. Elemental fournit ces panneaux et imbriqués dans les panneaux sont les différents éléments que nous pouvons faire glisser pour créer nos pages Web. Par exemple, si je fais glisser cet élément d'image et que je le dépose là-dedans, nous avons maintenant un élément d'image et vous remarquerez que cette zone a changé car l'élément actif actuellement sélectionné sur la page ici est l'image et c'est pourquoi elle indique Modifier l'image ici. Voici les paramètres que nous pouvons modifier pour modifier l'apparence de l'image. Et il y a d'autres panneaux ici pour modifier les paramètres de l'image. Permettez-moi donc de supprimer cela. Faites glisser quelque chose d'autre ici, comme l'éditeur de texte. Et maintenant, ici, il s'agit des paramètres de l'éditeur de texte, et ici, il est écrit éditeur de texte. Donc, quel que soit l'élément activement sélectionné ici, c'est celui qui apparaît ici. Vous pouvez également configurer les différents paramètres de l'élément. Et maintenant, parce que nous avons un élément actif et ses paramètres qui s' affichent ici, passe-t-il si nous voulions ajouter d'autres éléments à la page ? Nous ne pouvons pas voir les éléments. Il suffit donc de cliquer sur cette petite icône ici et cela révélera à nouveau les éléments. Tellement réduire que maintenant que nous avons vu que le panneau de base contient des éléments gratuits dont la plupart des sites Web ont besoin. Boutons, texte, images, vidéos, séparateurs. Nous allons effondrer ça. Si nous entrons dans le panneau Pro, vous remarquerez que nous avons des éléments pro. Nous pouvons utiliser ces éléments à moins d'avoir Elemental Pro. Donc, si nous essayons de faire glisser les éléments là-dedans, cette fenêtre contextuelle nous empêche et nous dit que nous avons besoin de la version pro. Laissez-moi donc fermer cela et réduire le panneau Pro, élargir le panneau général, nous avons plus de choses gratuites ici pour que nous puissions faire glisser et déposer un témoignage là-dedans. Permettez-moi de fermer cela, alors c'est essentiellement la partie de l'élémentaire avec laquelle nous interagirons la plupart du temps parce que nous allons faire glisser des éléments, puis modifier leurs paramètres. Ensuite, la prochaine chose ici, en bas de page, nous avons le bouton de mise à jour. Au fur et à mesure que nous apportons des modifications au site. Par exemple, permettez-moi de faire glisser un bouton là. Si vous souhaitez enregistrer les modifications que nous avons apportées jusqu' à présent, nous devons cliquer sur Mettre à jour. Et maintenant, nos paramètres ont été enregistrés. Si nous quittons cette zone, lorsque nous reviendrons, nous pourrons continuer à partir de l'endroit où nous sommes arrivés pour voir les changements sans ce bloc de paramètres. Allez-y et cliquez sur Aperçu des modifications. Et cela ouvre la page que nous construisons et nous pouvons voir à quoi elle ressemble. Nous avons également l'icône du mode responsive ici. Quand il est temps de rendre la page Web réactive à différentes tailles d'écran, nous pouvons cliquer sur ce mode réactif. Il va faire apparaître cette barre ici qui a des points d'arrêt. Et ici, nous avons les tailles de l'appareil, nous avons la tablette et l'écran mobile. Et dans la classe, vous pourrez utiliser cette icône et les paramètres du mode réactif pour vous assurer que notre site Web est génial sur toutes les tailles d'écran. Laissez-moi sortir de là. Je vais cliquer dessus pour me débarrasser de cette barre. Nous avons ensuite l' icône de l'histoire ici. Si nous cliquons dessus, nous verrons tous les mouvements que nous avons effectués depuis que nous avons commencé modifier la page et nous pourrons revenir à un moment précis dans le temps. Par exemple, revenez au moment où l'image a été ajoutée. Donc, le fait de cliquer sur le fait que tout ce qui est arrivé après l' ajout de l'image est maintenant annulé. Il s'agit donc d'une excellente fonctionnalité en ce sens que si vous avez apporté des modifications et que vous n'aimez pas l'apparence des choses, vous pouvez revenir à ces paramètres que vous il y a un moment et qui avaient l'air mieux. Ensuite, nous avons le navigateur ici. Donc, le fait de cliquer sur ce point fait apparaître ce type de contour et vous pouvez avoir une vue d'ensemble de votre site Web. Donc, si nous avons beaucoup d' éléments ici, jusqu'au bas, et que vous voulez avoir une idée de l'endroit où vous vous trouvez, une vue d'ensemble de l'endroit où vous vous trouvez. Ce navigateur va nous aider. Nous allons donc dupliquer cela quelques fois. Dupliquez ça. Cliquez avec le bouton droit sur ce répliqué. Nous avons maintenant trois sections et si nous les développons, chaque section comporte une colonne, cette colonne contenant une image. De cette façon, nous sommes en mesure de passer rapidement à différentes sections, modifier ces sections spécifiques. Ici, nous avons plus de paramètres concernant cette page Web particulière. Et nous verrons comment utiliser tous ces paramètres. Donc, si je pouvais sortir d'ici, laissez-moi les supprimer. Permettez-moi de supprimer cela. Et ce n'est qu'un aperçu rapide d'Elementor. Bien sûr, nous comprendrons comment utiliser les différents outils et panneaux ici au fur et à mesure que nous construisons nos pages, nous apprendrons en faisant cela. Donc. Cela visait simplement à vous familiariser avec l'espace de travail avec lequel vous allez interagir avec notre temps. Il est maintenant temps de commencer à créer leur page de destination des téléchargements numériques. Je vous verrai dans la prochaine leçon. 12. Créer les pages Web: Bienvenue de retour. Dans les leçons précédentes, nous avons examiné à la fois un CMS, ce que nous sommes pressés dans le fonctionnement de WordPress. Maintenant, avec cette compréhension assez solide de ces concepts, il est temps de nous salir les mains. Sam, pour commencer à construire notre site Web. Donc, sans perdre plus de temps, passons à l'intérieur des pages. Et comme il s'agit d'une toute nouvelle installation de WordPress, je n'ai pas encore créé de pages Web, donc je vais y ajouter de nouvelles. Ce sera donc notre page d'accueil. Je vais donc cliquer sur Publier ou rouler dans Maintenant, il est publié. Nous pouvons consulter la page, mais je veux simplement revenir à l'intérieur nos pages et créer le reste des pages, puis nous pourrons les voir au fur et à mesure que nous les construisons. En revenant là-bas, je dirai Ajouter un nouveau pour que nous puissions en créer quelques autres. Je vais juste appeler ce téléchargement. C'est ici que nous afficherons tous nos produits numériques et ils seront publiés. Je vais répéter deux fois de plus pour la page du blog et la page Contact, j'ajouterai un nouveau. Et c'est la page de blog publiée qui a été publiée. Et enfin, créons la page de contact et publions ce remplacement. Revenons donc ici. Et maintenant, nous avons quatre pages Web prêtes à être remplies de contenu. Nous allons donc créer notre menu de navigation. Et nous utiliserons ces pages Web comme éléments de menu. Des éléments de menu tels que ceux-ci. Nous allons donc créer un tout nouveau menu WordPress. Dans la prochaine leçon, je vous verrai bientôt. 13. Créer un menu WordPress Nav: Bienvenue de retour. Dans la leçon précédente, nous avons créé nos sites Web, nos pages Web. Il est maintenant temps de créer le menu de navigation de notre site Web. Le menu qui sera en haut, comme celui-ci. Nous utiliserons donc nos pages Web comme éléments de menu. Donc, en entrant dans les menus d' apparence. La première chose que vous remarquerez est que nous avons créé votre premier menu ci-dessous, car nous n' avons pas encore de menu. Nous pouvons donc donner un nom à notre menu. Et nous allons en faire notre menu principal. Ensuite, je cliquerai sur Créer un menu ou rouler. Notre menu est donc maintenant créé. Et comme vous pouvez le voir ici, nous pouvons ajouter des éléments de menu à partir de la colonne de gauche. Cette colonne ici. Et si je réduit le volet de ces pages, vous remarquerez que nous avons également des publications, des liens personnalisés et des catégories. Il s'agit donc de différents types de contenu que vous pouvez utiliser comme éléments de menu dans votre menu. Mais nous voulons utiliser nos pages Web comme éléments de menu, les pages Web que nous avons créées. Je vais donc tous les sélectionner. Ensuite, j'ajouterai au menu. Et maintenant, ils ont été ajoutés à notre menu. Laissez-moi simplement glisser cet élément d'accueil pour être le premier téléchargement, puis contact Blog sera le dernier élément de notre menu de navigation. Je vais enregistrer le menu. Et maintenant, notre menu est enregistré et mis à jour. Donc, la prochaine chose que nous voulons faire, maintenant que nous avons notre menu de navigation c' est de le concevoir en front de ligne sur le site Web actuel afin que les gens puissent le voir et interagir avec lui comme ça. Nous allons donc le faire dans la prochaine leçon. Je vous verrai bientôt. 14. Concevoir le navbar avec Elementor: Bienvenue dans cette leçon. Donc, pour concevoir la barre de navigation, nous devrons installer un autre plugin qui est une extension d'Elementor. Et il s'appelle le plug-in Header Footer Builder pour Elementor. Allons donc à l'intérieur. Plugins, Add New. Allons donc de l'avant et tapez Header Footer Builder. Et ici, nous l'avons. Installons donc le générateur d'en-tête ou de pied de page Elementor par la force du brainstorming. Oui, alors allons-y et activez-le. Et maintenant, c'est actif. Pour y accéder et l'utiliser, nous allons passer sous Apparence. Et vous remarquerez que c'est maintenant l' un des éléments de menu ici. Cliquez donc sur Elementor, générateur d'en-tête et de pied de page. Et une fois que nous aurons créé nos en-têtes et nos pieds de page, ils seront répertoriés ici, mais pour l'instant, nous n'en avons pas. Disons donc Add New. Et je veux sauter ça. Très bien, donnons un nom à notre barre de navigation. Alors maintenant, bar, ce serait un bon nom. Et sous type de modèle, disons que c'est un en-tête. Et disons que l'affichage sur l'ensemble du site Web. Et juste au cas où vous avez des gens sous vos ordres, vous êtes le méchant publicitaire, et vous avez également des gens qui travaillent sur le site Web. Vous pouvez leur attribuer des rôles différents. Vous pouvez décider qui peut modifier ces barres de navigation et qui ne peut pas les modifier. Disons donc que tout est autorisé. Et puis à l'extrême droite ici sous le modèle, sélectionnons Elementor pleine largeur car nous voulons la barre de navigation s' exécute de gauche à droite de l'écran. Et sous la barre latérale des paramètres Astro. sélectionnons pas de barre latérale car nous ne voulons pas de barres latérales. Pour la mise en page du contenu. Disons que toute la largeur, la barre oblique est étirée. Désactivons également l' en-tête principal, l'en-tête mobile, le titre et le pied de page, car nous ne voulons pas utiliser les en-têtes et pieds de page Astra par défaut. Nous voulons construire le nôtre, c'est ce que nous essayons de faire en ce moment. Donc, avec ces paramètres, disons Publier. Ensuite, disons Modifier avec Elementor. Nous pouvons donc maintenant aller à l'avant et commencer à construire visuellement la barre de navigation. Nous sommes donc au front end. Nous voulons concevoir visuellement la barre de navigation. Je clique donc sur le bouton Plus et je vais choisir une section à triple colonne ici. La triple colonne ici sera de telle sorte que dans cette colonne, nous aurons le logo. Permettez-moi donc d'ajouter un élément d'image, cliquer sur le signe plus, puis de faire glisser un élément d'image là-dedans. Et je clique ici pour que nous puissions sélectionner l'image du logo. Et comme je n'ai pas encore d'images téléchargées, nous devrons aller à l'intérieur, télécharger des fichiers et sélectionner des fichiers. Je vais donc préparer ce dossier appelé ressources de projet et vous le trouverez dans la description ci-dessous. Il contient tout ce dont nous avons besoin pour ce projet, y compris le logo. Nous avons donc ici des logos. Laissez-moi simplement glisser, attraper les deux logos. L'une est comme si elle était sombre car nous en aurons besoin pour le pied de page, mais pour l'en-tête face à ce que nous utilisons. Alors, en le sélectionnant, insérez un support. Et maintenant, le logo est génial. Laissez-moi simplement faire glisser ça pour augmenter un peu la taille. Et c'est joli. Ensuite, j' irai dans cette colonne ici et je clique sur le signe plus. Et ici, je vais taper Nav. Et nous aurons ces options de navigation ici. Celui qui nous intéresse, c'est le HF être responsable de la nourriture ou du bar de navigation constructeur. Permettez-moi donc de le faire glisser dans cette colonne. Et dès que vous le déposez là, les quatre éléments de menu que nous avons créés précédemment, c'est-à-dire les pages Web recréées apparaissent ici. Je veux montrer quelque chose très rapidement. Laissez-moi simplement cliquer dessus et quitter le tableau de bord. Et vous vous souviendrez que nous avons passé par les menus Apparence Et nous avons créé ce menu et ajouté ces quatre éléments de menu au menu et en avons fait notre menu principal. Revenons maintenant dans le générateur de pieds de page d'en-tête élémentaire et cliquez sur Modifier avec Elementor dans notre barre de navigation. C'est le même menu que celui que nous voyons ici. Laissez-moi simplement choisir ça. N'oubliez pas que nous appelons le menu, et c'est ce que nous avons ici. Alors allons de l'avant et coiffons la napa dans la prochaine leçon, je vous verrai bientôt. 15. Style de navbar de Elementor: Il est donc temps de coiffer notre barre de navigation et plus précisément ce menu. Parce que, par exemple, lorsque nous survolons les éléments du menu, vous remarquerez qu'il y a du vert, mais notre thème est jaune et noir, nous devons donc faire quelque chose à leur sujet. Donc, en sélectionnant le menu pour le rendre actif ici, je vais entrer dans le style. Et si je pouvais simplement réduire ce menu principal pendant une seconde, remarquez que nous avons trois éléments principaux, trois menus déroulants principaux. Ainsi, lorsque nous développons le menu principal, nous pouvons aller de l'avant et sélectionner la typographie. Laissez-moi simplement faire défiler vers le haut et changeons la police en Montserrat. J'aime bien Montserrat. Entrez. Et je pense que c'est mieux. Je cliquerai n'importe où en dehors de la boîte pour m'en débarrasser. Donc, quelque part là. Et en survol, vous remarquerez que la couleur ici est verte, la couleur du texte est verte. Nous voulons changer cela par ce jaune. Alors, laissez-moi juste voir si je peux attraper un joli jaune ici. Nous l'avons là. Nous devons donc agir. Il doit également avoir cette couleur jaune. Je vais donc sélectionner ce jaune et le copier. Ensuite, allez à l'intérieur actif et collez-le là-dedans. Maintenant, il est jaune en vol stationnaire. Et quand il est actif, il est également jaune. Permettez-moi donc de le mettre à jour. Et prévisualisons les modifications. Nous l'avons donc. Cliquez donc sur Accueil. Et maintenant qu'il est actif, comme vous pouvez le constater, il est jaune. Voilà comment créer la barre de navigation. Un peu plus tard, lorsque nous créerons la fonctionnalité de recherche pour le site Web, nous ajouterons la barre de recherche ici, mais ne vous inquiétez pas pour l'instant. La prochaine chose que nous voulons faire est de concevoir le dossier afin qu'après tau, vous puissiez créer le contenu principal de la page Web. Alors, en entrant ici, laissez-moi mettre à jour cette barre de navigation pour que nous puissions dire les changements. Nous allons donc créer un dossier dans la prochaine leçon, je vous verrai bientôt. Juste 16. Concevoir le pied: Bienvenue de retour. Continuons donc. Nous avons déjà créé les tampons de barre de navigation pour créer le dossier, pour créer la photo fera exactement la même chose que celle que nous avons faite avec la barre de navigation. Maintenant que notre barre de navigation est enregistrée, je clique sur ce menu Burger et quitter le tableau de bord. Et je vais apparaître l'en-tête Elementor et mettre un constructeur une fois de plus. Et bien sûr, vous pouvez voir notre barre de navigation répertoriée ici maintenant. Je vais donc dire ajouter un nouveau. Cette fois, il s'agit d'un cours de type de dossier destiné à être affiché sur l' ensemble du site Web. Nous pouvons modifier tous les rôles. Tout le monde, n'importe qui de n'importe quelle rangée. Le modèle est Elementor pleine largeur, pas de barre latérale ici. Disposition du contenu pour le blé étiré. Désactivons ensuite ces valeurs par défaut. S'il vous plaît, les sections du sondage ici. Et puis disons « Modifier avec Elementor » ou « ride ». Et maintenant que nous modifions le dossier, bien sûr, la barre de navigation n'est pas modifiable car elle apparaît car elle fait partie de la page Web. Mais nous ne sommes pas dans la zone où nous modifions le napa, donc nous ne pouvons pas les sélectionner et commencer à le faire glisser, vous ne pouvez tout simplement pas le faire. Seul le dossier est désormais modifiable. Et je vais donc cliquer sur le signe plus ici et ajouter, disons ajouter ceci pour l'instant. Et je vais faire remonter ces points trop mauvais quelque part. Cliquez sur ce signe plus, et ajoutons notre logo ici. Je vais cliquer dessus. Et cette fois, je veux choisir ces lumières, logo, insérer des supports. Et bien sûr, maintenant, vous ne pouvez pas voir la première moitié du logo car elle est large. Nous voulons donc donner une couleur d'arrière-plan à ce dossier. Cliquez donc sur cette section du milieu ici. Et aller au style arrière-plan, type d'arrière-plan. Cliquez sur cette case ici, et donnons-lui une couleur foncée. Peut-être quelque part, une couleur qui correspond à ces gris foncé. Ce n'est pas noir pur. Bien sûr, vous pouvez lui donner la couleur que vous voulez. Maintenant que nous avons cela, donnons de la place à ce logo en haut et en bas. Alors que cette option est toujours sélectionnée, je clique avec le bouton droit de la souris et je modifierai à nouveau la section. Je vais aller à Advanced, et je vais passer au rembourrage, supprimer ces liens et lui donner un rembourrage supérieur de 50 et un rembourrage inférieur ou 50 000, n'est-ce pas ? Nous avons donc maintenant une belle pièce en haut et en bas. Ensuite, ajoutons du texte ici, du texte descriptif. Je vais donc traîner ces draps là-dedans. Et disons quelque chose comme téléchargements gratuits pour, accord, et pendant que nous sommes encore là, passons au style couleur du texte. Faisons glisser ça jusqu'à là. Cliquez n'importe où en dehors de cette zone pour vous en débarrasser et cliquez sur Topographie pour que nous puissions changer la famille de polices en Montserrat comme ça. Et je veux changer la typographie. poids va changer le poids de la police à environ huit cents. Huit cents. Ça a l'air bien. Et revenons au contenu. Et mettons-le au milieu, comme ça. Arrivée. Prochaine. Cliquez ici sur cette minuscule icône pour faire apparaître les éléments. Et glissons un éditeur de texte là-dedans. Et bien qu'il soit encore actif, passons à l'intérieur du style, changeons cette couleur en blanc. Et mettons-le au milieu comme ça. Maintenant, pensez peut-être que nous allons ajouter quelques icônes de médias sociaux ici. Alors ajoutons, cliquez dessus. Et puis, ici, tapez les médias sociaux. Faisons glisser ça là-dedans. Génial. Mais maintenant il y a deux grands, réduisons la taille pendant qu'elle est encore sélectionnée. Passons à la taille du style. Je pense que j'aime bien ce point juste là, et je veux le pousser vers la gauche. Passons donc au contenu et poussons-le à gauche comme ça. Mettez à jour cela. Et à droite, ajoutons peut-être une liste de liens. Je vais donc rentrer ici et cliquer dessus pour faire apparaître à nouveau les éléments. Et ici, je vais le moins taper. Oui, disons que je peux lister et faire glisser la liste des icônes là-dedans. Et par défaut, il comporte trois éléments. Commençons donc par le premier article ici et renommons qu'il peut s'agir d'une catégorie de produits numériques comme les logos. C'est vrai ? Numéro deux, disons quelque chose de mensonge. Magazines. Supposons que nous vendions également modèles Elementor et que nous puissions continuer à ajouter d'autres éléments ici car nous disons quelque chose comme des dégradés. Mettez à jour cela. Et maintenant, allons ici et stylet. Sous style, épelons d'abord des textes. Disons maintenant que cette couleur est blanche. Faisons tomber ça une seconde. Allez à l'intérieur de l'icône et modifiez la couleur pour qu'elle soit jaune. Nous avons copié un alambic dans mon presse-papiers. Mais vous pouvez simplement sélectionner manuellement. Mais vous pouvez simplement ajuster manuellement. Nous l'avons donc. Il est jaune à l'état normal, mais en vol stationnaire, nous voulons qu'il soit blanc. Donc, cependant, il passe à un col blanc. Disons que sur Hoover, les textes que vous changez de jaune. Donc, en survolant, il passe à ce jaune. Génial. Bien qu'il soit toujours sélectionné, alignons-le à droite, comme ça. Et allons-y jusqu' au bout. Et mettons à jour cela. Aperçu des modifications. Parfait. Il s'agit d'un pied de page très simple. Bien sûr, nous pouvons faire beaucoup mieux, et c'est vraiment à vous de décider. Le point principal ici est de comprendre comment assembler le système, mais tout finaliser et rendre tout super génial. C'est à vous de choisir dans votre créativité. Mais bien sûr, nous pouvons améliorer un peu cela. Je veux pousser cela parce que je vois ces textes semblent trop proches de ce logo. Je veux tout d'abord faire glisser ça plus loin vers la gauche, vers la droite comme ça. Et traînez un peu ça. Mais je souhaite sélectionner cette colonne ici spécifiquement. En entrant dans la marge avancée, supprimons cette marge. Et pour la marge de gauche, augmentons ça à quelque chose comme lancer n'importe lequel, essayons ça. Mettre à jour, cet aperçu change. Oui, je pense qu'en ce moment, c'est beaucoup mieux, centralisé et que tout semble bien positionné. C'est comment créer notre dossier et notre napa, la prochaine chose que nous voulons créer notre contenu principal, comme sur ces pages. Et nous voulons commencer par la section des héros. La section E du héros, la zone que vous voyez au moment où vous ouvrez une page de destination comme celle-ci, elle contient du texte et de l'image, n' aura pas notre barre de recherche sur la section héros. Nous allons donc créer la section héros dans la prochaine leçon, je vous verrai bientôt. 17. Concevoir la section de héros: Bon, bon retour. Maintenant que notre barre de navigation et notre pied de page sont prêts, il est temps de commencer à créer le contenu principal des pages Web et nous commencerons par la page d'accueil. Je n'irai donc plus dans ce menu de hamburgers et je ne quitterai pas le tableau de bord. Et passons à l'intérieur des pages. Et maintenant, comme nous l'avons mentionné, nous voulons commencer par la page d'accueil, donc éditer. Très bien, alors sautez sur le côté droit, ici sous Paramètres, allez dans le modèle. Et sélectionnons Elementor pleine largeur. Cliquez ensuite sur l'icône Astra ici pour modifier certains paramètres Astro. Et tout comme nous l'avons fait avec la barre de navigation et le pied de page, nous voulons dire non de barre latérale. Élémenteur de mise en page de contenu, pleine largeur, mise en page du contenu pour la largeur étirée. Et nous ne voulons pas utiliser les valeurs par défaut, en-têtes principaux et tous les autres éléments fournis avec Astra. Nous voulons créer le nôtre avec Elementor. C'est pourquoi nous désactivons tous ces éléments. Et disons « Mettre à jour ». Et maintenant qu'il est mis à jour, continuons et cliquons sur Modifier avec Elementor car nous allons le concevoir visuellement à la frontière. Parfait. Vous remarquerez donc que nous avons l'espace entre le Napa et le dossier. Et nous pouvons commencer à remplir la page avec les différents types d'éléments que nous voulons. Et en passant simplement à l'un de ces sites Web de référence, nous commençons par la section héros, qui a, permettez-moi d'aller sur la page d'accueil de Creative Market pendant une seconde. Vous remarquerez donc ici sur Creative Market qu'ils ont ce beau texte qui résume l'ensemble de la page et de l' ensemble de l'entreprise. Et ils ont une image comme exemple de certains contenus que vous pouvez trouver sur le site Web. Nous allons donc créer cette section des héros très rapidement. Et cela ressemble à peu près à la section du héros de la page de prêt de la rivière graphique. En revenant sur notre page de projet, je dirai Ajouter un nouveau. Et bien sûr, nous avons besoin de deux colonnes. Dans cette colonne. Allons-y et ajoutons. Cliquez sur l' icône Plus juste là et faites-y glisser un en-tête de texte. Disons quelque chose comme des téléchargements illimités. Comme ça. Allons à l'intérieur du style et changeons la couleur à quelque chose comme 40. 40. 40. Oui. Et bien qu'il soit encore sélectionné, passons à Montserrat pour changer la famille de polices. Et je veux lui donner un poids de police de 800. Et je veux augmenter, aller de l'avant et augmenter la taille, la taille la police, jusqu'à ce point. Cliquez ensuite sur cette icône juste ici pour afficher les éléments et faire glisser un éditeur de texte. Et bien sûr, vous pouvez personnaliser ces textes pour lire ce que vous voulez dire. Donc pour bien, permettez-moi de supprimer cette dernière phrase juste là. Mettez à jour cela. Allons de l'avant et ajoutons un bouton. Je vais donc faire glisser un bouton juste en dessous de ce texte. Et ici, je clique sur ce bouton plus pour ajouter un élément d'image. Cliquer ici, c'est aller de l'avant et chercher une belle image à avoir comme image de notre section héros. Je pense donc qu'on peut y aller avec quelque chose comme ça. Ouvrez ce support d'insertion. Et il commence déjà à prendre forme. Mais bien sûr, comme nous l'avons fait avec le Napa, changeons cette couleur verte pour correspondre au thème de notre site Web. Donc, en sélectionnant ce style de bouton. Je vais passer à la couleur sous le bouton. couleur. Et donnons ce 404040. Et propre Hoover, qui voulait être ça ? Jaune ? Je l'ai toujours dans mon presse-papiers. Donc, quel que soit son état jaune, normal, il est noir. Mais maintenant, nous voulons changer ce que disent les textes. Alors qu'il est toujours actif, passons à l'intérieur du contenu et sélectionnons la zone de texte ici et disons les téléchargements d'éclats. Yup. Et nous pouvons y aller de l'avant et ajouter une icône juste avant. J'étais donc toujours sous le bouton Contenu. Nous allons sélectionner la bibliothèque d'icônes. Et disons, oui, quelque chose comme ça. Je pense que ça me plaît. Insérez ça. Et maintenant, nous avons cette belle icône juste avant le texte. Et j'ai remarqué que nous n'avons pas changé le texte en Montserrat, alors je vais sélectionner à nouveau le bouton. Entrez dans le style, la typographie, famille de polices, Montserrat pour l'uniformité. Juste comme ça. Et je veux aussi augmenter un peu le rembourrage. Alors, pendant que nous sommes encore sous style, je vais faire défiler vers le bas et passer au rembourrage. Supprimez ce lien, et cela détruira le bouton pendant une seconde. Mais ce que nous voulons faire, c'est lui donner un rembourrage de 45 à gauche. C'est pour 50 ans. 45. Et à droite, 45 ans. Pour le haut. Donnons 20. Et le bas aussi. Bon, donc maintenant, nous avons un bon rembourrage tout autour qui dit mettre à jour ça. Et reconstruisons ça change. Nous avons besoin d'espacement au-dessus du titre. Allons donc à l'intérieur et sélectionnons la colonne elle-même. Et sous Advanced, nous allons vous donner le rembourrage supérieur. Supprimons le lien sur le rembourrage. Donnons un rembourrage supérieur de 16. Mettez à jour cela. Et prévisualisons les modifications. Génial. Alors, sélectionnons l'image et donnons-lui des coins arrondis juste pour qu'elle n'ait pas ces arêtes nettes comme ça. Donc, pendant qu'il est sélectionné, je vais passer au style border-radius. Allons lui donner quelque chose comme 20. Mettez à jour cela. Et prévisualisons les modifications. Oui, c'est beaucoup mieux. Je pense donc que maintenant la section des héros est prête. Rappelez-vous que l'objectif ici n'est pas de créer un très beau site Web pour le moment, nous essayons de comprendre comment créer le système lui-même qui permet un client de se rendre sur le site Web, découvrez les produits que nous avons. Cliquez sur un produit, ouvrez la description de la page produit unique où ils ont toutes les informations sur ce produit particulier et ils peuvent acheter ou télécharger. C'est ce que nous voulons vraiment comprendre. Nous allons donc créer les produits qui s'afficheront sous la section héros. Et nous le ferons dans la prochaine leçon. Je vous verrai bientôt. 18. Créez vos catégories de produits: Bienvenue de retour. Notre section des héros est maintenant prête. Passons au tableau de bord. Cliquez donc sur ce menu Burger Quitter to Dashboard. Et nous devons nous assurer que nous sommes complètement sortis du, d'accord, donc maintenant que nous sommes dans le tableau de bord, nous voulons comprendre comment nous allons travailler avec nos produits au fur et à mesure que nous progressons. Mais à l'heure actuelle, je suppose que vous allez vendre différents types de produits numériques. Par exemple, si vous êtes graphiste, vous pouvez vendre des logos, des modèles de dépliants, des modèles d' affiches, des modèles de profil d'entreprise. Vous vendez peut-être des éléments de conception Web et des éléments de conception graphique. Il s'agit donc de différentes façons de catégoriser les différents produits numériques que vous pourriez vendre. Alors, comment faites-vous cela ? Parce que si nous pouvions simplement sauter rapidement dans Creative Market, par exemple, comme nous l'avons déjà vu, ils classent leurs produits en modèles Canva, maquettes de produits, modèles Instagram dans toutes ces catégories. En revenant à notre page ici, passons à l'intérieur des messages. Je vais cliquer sur les messages. Nous créons nos produits numériques sous forme de publications. Et au fur et à mesure que nous progressons, vous comprendrez que WordPress vous permet de créer différents types de contenus de différentes manières. L'un des moyens de créer du contenu pour votre site Web consiste à le créer sous forme de publication. Ainsi, votre produit numérique peut être créé sous forme de publication. Si vous publiez des articles, vous les publiez sous forme de publications WordPress. Vous pouvez créer un podcast et publier des épisodes de podcasts sous forme de publications WordPress. Nous voulons donc publier nos produits numériques sous forme de publications WordPress. Et vous comprendrez pourquoi c'est très puissant, car c'est ce qui nous permettra d' ouvrir le post dans le front-end avec Elementor et de le concevoir visuellement d'une manière magnifique pour viennent avec une belle page unique, le script montre un joli affichage de produits numériques et tout ça. Avant de créer des produits numériques ici, nous voulons créer les catégories. Cliquez donc sur catégories. Et bien sûr, je vais créer mes propres catégories. Désormais, par défaut, il existe toujours une catégorie non classée. Tous les contenus qui n'ont pas de catégorie entrent dans la catégorie Non classé. Vous ne pouvez pas supprimer ces catégories. Créons donc le nôtre. Je vais donc commencer par les logos. Cliquez sur Enter dans les magazines. Je vais dire Elementor. Imaginons que ce sont les trois catégories de produits que je souhaite vendre sur ce site Web. Mais bien sûr, vous aurez vos propres catégories. Maintenant que nos catégories sont définies et que nous pouvons en ajouter d'autres, nous sommes prêts à commencer à créer nos produits numériques. Créons donc nos premiers produits numériques. Dans la prochaine leçon, je vous verrai bientôt. 19. Concevoir un produit unique de description: Bienvenue de retour. Il est maintenant temps de créer votre tout premier produit numérique. Et comme je l'ai mentionné dans la dernière leçon, nous allons créer vos produits numériques sous forme de publications WordPress. Donc, pour créer vos tout premiers produits numériques, alors que nous serons encore sous les publications, disons Ajouter Nouveau ou bien, donnons-lui un nom. chose comme je veux créer un produit qui ira dans la catégorie Elementor. N'oubliez pas que l'une des catégories que nous avons créées était Elementor. J'ai donc des modèles élémentaires que j'ai déjà préparés à l'avance. Et je veux commencer par créer des produits pour cette catégorie. Disons donc bodybuilder, modèles. Gabarit. Et bien sûr, comme d'habitude, je vais commencer par passer à l'intérieur des paramètres Astro et à ne pas définir cette barre latérale. Mise en page du contenu, étiré sur toute la largeur, puis désactivez ces cinq éléments juste là, puis le pied de page. Ensuite, passons à l'intérieur des paramètres où les procédures sous Modèle modifient les valeurs par défaut, modèles en Elementor pleine largeur et y sont publiés. Nous allons publier ça. Et notre orthographe est erronée, alors permettez-moi de corriger leur mise à jour. Et avec ces paramètres, allons-y et concevons le front end en utilisant Elementor override. Nous y voilà. Nous allons le concevoir ici. Et juste pour vous montrer l' équivalent de ce que nous concevons sur une plateforme différente. Allons sur Creative Market. Et ouvrons l' un des produits. Je vais cliquer sur ce lot de polices pour l'ouvrir. Et maintenant, il s'agit de la page produit unique que nous concevons. Nous concevons une page qui contient tous les détails concernant produit spécifique sur lequel vous avez cliqué. En règle générale, vous trouverez sur la plupart des sites Web une image du produit lui-même. Et sur le côté droit, vous constaterez généralement que vous avez le bouton de paiement et une brève description du type de produit qu'il s'agit. Et en dessous, probablement des échantillons de quoi s'ils vont à l'intérieur de la rivière graphique. Nous allons ouvrir l'un des produits ici. Allons à l'intérieur. Permettez-moi d'ouvrir ce produit. Même chose, une rivière graphique. Nous avons cette image. Ensuite, nous avons le bouton Ajouter au panier et le bouton Acheter maintenant, une brève description du produit M ci-dessous. Nous avons maintenant toutes les descriptions et les liens vers des liens importants liés à ces produits. Donc, ce que nous essayons de faire, c' est la même chose. Si je pouvais commencer par créer une double colonne. Ici, ajoutons un élément d'image. Et cliquons ici pour sélectionner une image. Et comme nous n'avons pas d'image de produit ici, allons télécharger les produits à partir du dossier. N'oubliez pas que j'ai mentionné que vous pouvez trouver ce dossier de ressources de projet dans la description ci-dessous. Téléchargez-le. Vous y trouverez toutes ces images. Et les images dont j'ai besoin en ce moment sont 12. allons simplement télécharger toutes les images car nous les utiliserons à l'avenir. Comme ça. Cette image a également été appréciée. Insérez un support. Et c'est à ça que ça ressemble. Permettez-moi donc d'augmenter un peu la taille. Et de ce côté, je cliquerai sur le signe plus ici et je le glisserai. Écrivons d'abord le titre. Et pour le titre, donnons au produit le nom que nous lui avons donné dans le backend, qui était le modèle bodybuilder ou RI. Et nous allons en faire un. Mettez à jour cela. Laissez-moi simplement cliquer dessus. Vous remarquerez que nous avons un tout le chemin pour détester les recherches et ce sont des titres, des niveaux de cap. un est le titre le plus important en HTML, tandis que HCX est le plus petit et le moins important de la hiérarchie, la règle générale est d'avoir un H1 sur chaque page Web. Et celui-ci doit avoir le mot clé de cette page Web en particulier pour pouvoir se classer sur les moteurs de recherche tels que Google et Bing. Parce qu'il s'agit d'une page produit, nous devons avoir ce modèle de bodybuilder qui indique aux moteurs de recherche que cette page Web est à ce sujet. Et bien que ce soit encore sélectionné, je vais passer à l'intérieur du style pour changer la couleur. Je vais lui donner 40, 40, 40. Allons changer la famille de polices en Montserrat. Et donnons-lui un poids de police de 800. Je veux sélectionner cette colonne ici, juste pour que nous puissions ajouter un peu de rembourrage en haut et pousser ces liens de modèles de bodybuilder vers le bas. Alors que la colonne est toujours sélectionnée, je vais passer à l'intérieur avancé. Retirez ce lien juste là et donnez-lui une marge supérieure de rembourrage supérieure de 50. Très bien, donc c'est un bon espacement là-haut. Et maintenant, cliquez dessus et allons faire glisser une brève description ici juste en dessous de ce texte. Et cliquez sur cette icône juste ici pour faire apparaître les éléments. Et glissons un bouton juste en dessous. Pour l'instant, il s'agit d'un bouton de rangement qui remplacera ce bouton par le bouton de téléchargement ou d'achat réel. Donc, nous allons juste le laisser là pour l'instant. Cela disparaîtra donc à un moment donné dans les prochaines leçons. Changeons donc ce texte pour le télécharger. Donnez-lui un D majuscule, mettez-le à jour. Et maintenant, remarquez que l'image et le texte sont trop proches uns des autres. Nous avons donc besoin d'espace entre ces deux colonnes, en sélectionnant la section qui contient les deux colonnes. Nous voulons dire sous Mise en page, écart de colonnes, Disons large, Disons plus larges. Mettez à jour cela. Et prévisualisons les modifications ou écrivons super génial, ça commence maintenant à prendre forme. Changeons ce vert pour rimer avec le reste du site. Donc, en sélectionnant ce bouton juste là. Allons à l'intérieur du style. Donnons-lui cette couleur jaune. Mettez à jour cela maintenant pour plus de cohérence, toujours, chaque fois que vous utilisez un jaune ici, assurez-vous qu'il s'agit du même jaune. Il suffit donc de copier le code quelque part et n'importe où où vous voulez placer le jaune, utilisez ce même code. Donc, maintenant, c'est comme ça que ça ressemble en vol stationnaire. Nous voulons qu'il soit noir. Allons donc à l'intérieur de la couleur du survol. C'est comme ça que nous aurions l'air. Pendant que nous sommes encore ici. Passons au rembourrage et dissocions ça. Donnons-lui un rembourrage gauche de 45. 45. Et c'est encore 450. 45. Je pense que nous allons peut-être donner 15. 15. Ils sont semblables maintenant. Et choisissons l'image. J'aime bien avoir des coins arrondis. Je vais donc sélectionner l'image, coïncider Style, descendre le rayon de bordure et lui donner un rayon de bordure de 20. Oui, j'aime légèrement ça. Mettez à jour cela. Et prévisualisons les modifications. Ou bien, il commence à prendre forme. Ainsi, si, par exemple, votre entreprise vend des livres électroniques ou des cours, ce sera bien sûr l' image de vos cours. Vous devez le rendre convaincant et beau. La prochaine chose que nous voulons faire est d'ajouter une description ci-dessous. Créons donc une nouveau une double colonne, et donnons-lui une sélection de cette section elle-même, allons à Avancé, cassons ce lien de marge ici. Et donnons une marge supérieure de 50 que nous puissions la séparer de cette autre section. Donnons donc 50. Et maintenant, il y a cette pièce entre eux. Alors ici, cliquons sur le signe plus et faites-le glisser là-dedans. Et je veux le sélectionner, et je veux le changer en. Des modèles, ce schon. Voici donc la description. Bien sûr, changeons cette couleur par la couleur que nous aimons par souci de cohérence, en cliquant n'importe où pour s'en débarrasser. Et puis entrez dans la topographie, famille de polices, changez-la en Monterrey. Et donnons-lui peut-être cette taille. Faites-le glisser jusqu'à ce point probablement et vous verrez pourquoi sous peu. Donc, en sélectionnant à nouveau, je veux lui donner un poids de police de 800. Et juste en dessous. Allons-y. Cliquons dessus pour faire apparaître des éléments et ajoutons une description ici. Je vais juste copier tout cela et le dupliquer juste là. Tout comme exemple de la description de votre produit, mais elle doit être détaillée. Permettez-moi de le mettre à jour. C'est donc ce que vous fournissez ici. Très bien, la prochaine chose que nous voulons faire est de copier ce bouton. Copiez ça. Cliquez n'importe où dans cet éditeur de texte et collez. Mettons-le à jour et prévisualisons les modifications. Défilons vers le bas. C'est donc ce que nous avons, mais ici, il n'y a pas d' espace entre ces éléments. Augmentons donc cet espacement en dessous. C'est donc cette section. Je vais sélectionner la section, aller à la marge inférieure et lui donner peut-être quelque chose comme 90. Nous avons donc augmenté l'espacement de 90 pixels au bas de cette section, juste avant l'endroit où il rencontre un dossier. Nous allons donc prévisualiser les modifications. Très bien, donc maintenant, nous avons cette belle lacune juste là. Mais ce n'est pas fini. Nous devons y ajouter quelques articles supplémentaires. Lorsque nous avons besoin d'ajouter probablement des articles connexes, tels que des produits associés et quelques descriptions de produits ici. revenant ici, En revenant ici, j'aimerais venir ici et cliquer sur le signe plus ici. Je vais taper la liste. Faites glisser cette liste d'icônes à l'intérieur. Et pour augmenter l' espacement entre ces deux colonnes ici, je vais sélectionner la section elle-même. Accédez à la section Mise en page. L'écart des colonnes est plus large. J'ai besoin d'eux très larges. Et maintenant, voici où nous fournissons la description du produit en bref, par exemple, éléments tels que la taille du fichier, disons quelque chose comme les formats JSON de 2,52,5 Mo ou RI. Voyons ce que nous voudrions d'autres choses. Quelque chose comme ? Nous allons dupliquer cela, ajoutons une autre description. Il peut donc s'agir d'une version ou d' écrire quelque chose de ce genre. Et bien sûr, disons à ces boutons qu'ils sont cohérents avec un site Web. Et je n'aime pas cette couleur jaune. C'est crémeux 2. Nous voulons que le bouton soit noir, mais jaune. Nous allons donc les changer. Je veux copier ce jaune qui va à l'intérieur ici à l'état de survol, coller là-dedans, puis revenir à la normale et changer cela pour aimer ça. C'est beaucoup mieux. Laissons ça jaune, et laissons-le noir. Donc, la sélection est de nouveau. Allons de l'avant et disons style. Pour l'icône. Passons ça au jaune. Nous venons de copier. Collé comme ça. Laissez-moi vous donner une couleur de vol stationnaire. Très bien. Allons voir les textes. Donnez-lui aussi cet effet de vol stationnaire. Maintenant, faites-le même jaune pour plus de consistance. Passons ensuite en revue les modifications. Le produit unique est ici en train de prendre forme. Nous avons une image. Le client peut lire la brève description de tout ce que vous voulez lui dire ici et faire des achats. N'oubliez pas que nous avons dit que nous allions remplacer ce bouton par le bouton Acheter ou acheter maintenant ou ajouter au panier. S'il s'agit de produits gratuits, nous allons avoir un bouton de téléchargement ici. Et bien sûr, ici, le client peut lire plus de détails sur le produit lui-même et avoir un aperçu rapide des données importantes sur ce produit ici. Et ils peuvent aller de l'avant et le télécharger ou encore une fois. Nous voulons donc rendre l'achat le plus facile possible pour le client. C'est pourquoi nous avons ces boutons partout. Nous ne voulons pas qu'ils aient à faire défiler jusqu' en haut pour rechercher le bouton de téléchargement. Donc, s'ils ont défilé jusqu'à un point où ils ne peuvent pas voir le bouton de téléchargement, vous devez avoir un autre bouton Télécharger ou par bouton. Et nous avons le dossier. Une fois que nous aurons créé d'autres produits, vous des produits associés juste en dessous de ce bouton Télécharger. Nous n'aurons pas ça maintenant. Mais c'est ainsi que vous pouvez créer la page produit unique. Maintenant, tout ce que nous devons faire pour que les produits soient affichés sur un site Web, c'est de créer d'autres produits comme ceux-ci. Je veux donc créer d'autres produits numériques comme celui-ci. Disons comment le faire dans la prochaine leçon. 20. Créer un modèle de page de page de produit: Bienvenue de retour. Dans la dernière leçon, nous avons vu comment concevoir cette page de description de produit unique. Maintenant, tout ce que nous devons faire pour que les produits soient affichés sur un site Web, c'est de créer d'autres produits comme ceux-ci. Je veux donc créer plus de produits numériques comme celui-ci dans le back-end. En revenant ici, je dirai ce menu Burger Quitter to Dashboard. Et notre héritage vient d'ici. Donc, notre corps construit un gabarit, est prêt. Maintenant, il ne nous reste plus qu'à créer de nombreux autres produits ici. Il y aura la liste ici, et nous pourrons les afficher au front end. Laissez-moi simplement cliquer. seront en mesure de les répertorier sous la section des héros ici. En revenant ici, je vais dire Add New et je vais répéter le même processus que pour le modèle bodybuilder. Je vais donc dire « Ajouter un nouveau ». Et j'appellerai ces produits comme un modèle de serveur. Je vais entrer dans les paramètres, modèle, Elementor, pleine largeur, et je vais entrer dans les paramètres Astro. Encore une fois, pas de barre latérale. Pleine largeur étirée. Ceux-ci, Abel , tout ça, jusqu'au titre. Et le pied de page a ensuite publié ça. A maintenant publié, allons-y et concevons-le dans le front-end avec Elementor. Très bien, donc nous y voilà. Si je pouvais simplement ouvrir un nouvel onglet et entrer dans le tableau de bord, je veux vous montrer quelque chose très rapidement. Allons à l'intérieur du poste. Et maintenant, nous avons deux produits. Bien sûr. Ici, nous essayons de concevoir le modèle de serveur, non ? Mais c'est déjà ce que nous avons créé. Donc, si nous ouvrons avec Elementor, je dirai Modifier avec Elementor. Et ici, nous avons le produit unique que nous avons déjà créé. Nous aimons ce que ça ressemble. Et ce nouveau produit sera exactement le même que cet autre produit, seulement que les détails seront différents, l'image sera différente, mais la mise en page restera la même. Nous ne devrions donc pas perdre temps à reconstruire ce que nous avons déjà construit. Existe-t-il un moyen de simplement réutiliser ce que nous avons déjà créé ? Ici, sur une autre page. Oui, c'est très possible. Et c'est ce que nous allons faire. Mais avant de le faire, affûtons un peu cette page. Réduisons ce rythme ici en sélectionnant cette section. Allez à l'intérieur avancé. Rappelez-vous que nous avions ajouté une marge supérieure. Nous voulons réduire cela à quelque chose comme Swanee, comme ça. Et mettons à jour cela et prévisualisons les modifications. Maintenant, c'est plutôt comme ça, mais je veux augmenter l'espacement ici parce qu'il semble trop près du sommet. Je vais donc sélectionner cette section avancée, supprimer ce lien et lui donner peut-être une marge supérieure de 30. Quelque part là. Mettez à jour cela. Et prévisualisons les modifications. J'aime bien où il se trouve maintenant. Il y a donc même un espacement entre cette pièce et cette pièce, sorte qu'elle semble uniformément espacée. C'est beaucoup plus présentable. Maintenant que nous sommes satisfaits du modèle lui-même, revenons à l'intérieur de cette page où il se trouve. Et pendant que nous sommes maintenant ici, cliquez sur cette flèche ici pour enregistrer. Et cliquez sur Enregistrer en tant que modèle. Donnons un nom comme une page de produit unique. ensuite sur Entrée ou cliquez sur Enregistrer. Maintenant, nous l'avons ici. Il est disponible pour que nous puissions l'utiliser sur n'importe quelle autre page que nous voulons. Laissez-moi maintenant fermer l'espace parce que nous en avons déjà fini avec ce modèle de bodybuilder. Nous voulions juste dire cela. Je vais le fermer. Je vais fermer cette page d'aperçu. Fermez ça. Permettez-moi de fermer toutes ces autres pages. Et maintenant, il nous reste cette page où nous créons le deuxième modèle, qui est le modèle pondéré. Donc, si je peux simplement rafraîchir la page en appuyant sur Control R. pour actualiser la page. Maintenant, avec une actualisation de page, je vais cliquer sur cette minuscule icône juste ici pour ajouter un modèle. Et cette fenêtre va apparaître. Je vais ouvrir mes modèles et vous constaterez maintenant que la seule page produit que nous venons d'enregistrer est maintenant disponible. Cliquez donc sur Insérer et dites Oui. Très bien. Nous avons donc maintenant rempli nos deuxièmes produits numériques avec le modèle que nous pouvons modifier. Et nous pouvons réutiliser le même modèle partout au fur et à mesure que nous créons davantage de produits numériques. Permettez-moi donc de le mettre à jour. Et laissez-moi changer cela en serveur égal. Donc, modèle de serveur. Changez donc cela en modèle pondéré également. Mettez à jour cela. Et je vais cliquer sur l'image elle-même. Sélectionnez l'image. Et choisissons cette deuxième image pour représenter ce produit en particulier. Il s'agit donc d' un modèle élémentaire pour un tel site Web. Mettons-le à jour. Et prévisualisons les modifications. Et c'est là que nous l'avons. Notre deuxième produit numérique est prêt. En revenant à l'intérieur de notre éditeur ici, maintenant que nous sommes satisfaits de cette page particulière, passons à ce menu de burger Quitter to Dashboard. Maintenant, sortez complètement d'ici. Et maintenant, nous avons ces deux modèles. Je vais donc répéter la même chose pour quelques autres produits, environ six ou sept d'entre eux. Nous avons donc un nombre important de produits avec lesquels travailler. Et parce qu'il s'agit du même travail répétitif, je vais faire avancer rapidement cette section et j'espère que vous prendrez également le temps de créer d'autres produits numériques en utilisant le modèle que nous venons de sauvegarder. Je vous verrai donc après avoir créé tous les produits numériques. Nous y voilà. Je vais créer six produits la même manière que nous avons créé le premier à un. Maintenant que nous avons ces six produits numériques, passons au front end et voyons ce que nous avons. Je vais donc entrer dans les pages. Et nous voulons voir à quoi ressemble notre page d'accueil car les prochaines leçons, nous verrons probablement comment afficher ces produits. passant rapidement à Creative Market, nous voulions afficher ces produits de cette manière. Alors, comment pouvons-nous faire cela ? Voyons comment faire cela dans la prochaine leçon, je vous verrai bientôt. 21. Affichage des produits numériques dans une catégorie: Bienvenue de retour. Dans la dernière leçon, nous avons créé nos produits numériques. Dans cette leçon, nous voulons voir comment les afficher en front end pour clients puissent les explorer. Alors, comment pouvons-nous faire cela ? Comment présenter nos produits de manière présentable comme celle-ci ? Allons-y et faisons-le. En revenant à l'intérieur de notre tableau de bord, allons-y. Tout d'abord, voyons la page. Je vais donc cliquer avec le bouton droit de la souris et ouvrir le lien dans un nouvel onglet afin que nous puissions voir ce que nous avons actuellement. C'est à ça que ressemble la page. Nous n'avons rien après que la section héros soit le dossier. Et nous voulons quelque chose comme ça ou quelque chose comme ça. Ce que nous avons sur le cochon gratuit ou ce que nous avons sur le marché Envato. En revenant ici, nous voulons venir dire Edit avec Elementor. Parce que rappelez-vous que nous avons créé cette page avec Elementor. Nous pouvons donc venir ici et dire Modifier avec Elementor. Et cela ouvrira l'éditeur Elementor. Très bien, donc nous y voilà. Nous pouvons maintenant commencer à ajouter du contenu juste en dessous de la section héros. Commençons donc par ajouter une section pleine largeur, une seule colonne. Et ajoutons une marge haut pour vous séparer de la section héros. Donc, en cliquant dessus, j' irai à l'intérieur avancé. Supprimez ce lien et donnez-lui une marge supérieure de 50 ou droite. Nous avons donc maintenant cet espace agréable et un petit conseil que je viens de mentionner ici, lorsque vous survolez cette colonne cette section ou tout autre élément que vous pouvez modifier ici. Il doit afficher une fenêtre contextuelle rapide comportant des raccourcis rapides. Et vous le faites en allant dans ce menu de hamburgers, préférences de l'utilisateur. Poignées d'édition. Changez cela par oui et dites « Mettre à jour ». Et je vais vous montrer ce que cela fait. Maintenant, lorsque vous survolez cette colonne, il affiche ces autres options qui peuvent vous permettre de prendre rapidement des mesures. Par exemple, si je veux les dupliquer, suffit de cliquer ici. Et maintenant, nous avons deux colonnes. Je veux dupliquer cette section. Tout ce que je dois faire, c'est cliquer dessus, et nous l'avons là. Alors maintenant, pendant que nous sommes ici, laissez-moi supprimer cette colonne car nous n'en avons besoin qu'une. Je cliquerai sur le signe plus. Et ici, je vais chercher la cupidité. Et nous n'avons pas d'avidité postérieure et nous voulons afficher nos produits comme une cupidité. Si vous regardez cela, cela ressemble à une cupidité. En revenant ici, nous avons besoin d'un plugin qui étend la puissance d'Elementor. Rappelez-vous, j'ai déjà mentionné que nous avons des plugins qui étendent la puissance d'Elementor. Donc un autre plugin qui fait cela est essentiel pour Elementor, il nous donnera la possibilité d'ajouter une cupidité. Revenons donc à l'intérieur de notre tableau de bord. Plugins, ajoutez de nouveaux. Et ici, je veux taper des modules complémentaires essentiels pour Elementor. Tout devrait être le premier. Je vais donc l'installer maintenant. Allons de l'avant et activez-le. Sélectionnez Avancé et sélectionnez Suivant. Fondamentalement, c'est que si vous sélectionnez Basic, vous aurez moins de fonctionnalités activées. Mais si vous sélectionnez Avancé, vous aurez plus de fonctionnalités que nous voulons activer, l' une d'elles étant la cupidité, l'option grille. Nous voulons donc l'option avancée ici, disons ensuite, et c'est ce que je voulais dire. Donc, en choisissant basique, très peu d'entre eux auraient été sélectionnés. Maintenant que nous avions sélectionné avancé, nous avons vérifié plus de ces fonctionnalités et l'une d' elles est post greet, c'est ce que nous recherchions. Je dirai donc ensuite, ensuite, Dani a volé toutes ces autres choses. Ensuite, terminez. Maintenant que nous avons installé des modules complémentaires essentiels pour Elemental, passons au front end. Tout d'abord, permettez-moi de mettre à jour cette page. Ensuite, j'appuierai sur Control R pour actualiser la page afin que nous puissions accéder aux modules complémentaires essentiels pour Elementor. Et maintenant que les modules complémentaires essentiels pour Elemental sont installés, laissez-moi réduire cela et tous ces autres panneaux ici. Et maintenant, vous remarquerez que les modules complémentaires essentiels sont l' un des panneaux ici. Je vais donc taper la cupidité. Et cette fois, il va faire apparaître un post, nous ferons glisser dans la colonne unique ici. Et le lâcher momentanément. Nous présenterons les produits que nous venons de créer. Mettons-le à jour. Et maintenant, la prochaine chose que nous voulons faire est de travailler sur cet écran. Comment faire en sorte que cela paraisse présentable comme ça ? En revenant ici, choisissons cette cupidité. Et bien que ce soit sélectionné et qu'il s'agit de l'élément actif ici, nous pouvons maintenant commencer à modifier l'affichage de Luke. Donc, tout d'abord, réduisons cette requête. Et vous remarquerez que nous avons trois panneaux ici. Le premier panneau porte donc sur la provenance des données. N'oubliez donc pas que nous avions des catégories par défaut. Il affiche les produits qui se trouvent dans la catégorie Non classé. Donc, si nous revenons ici et regardons les catégories de publications. N'oubliez pas que nous avons créé ces trois catégories , puis nous avons eu la catégorie non classée. Et si nous entrons dans tous les articles, rappelez-vous que pendant que nous créions ces produits, nous ne leur avons pas donné de catégorie de produits, donc ils sont tous automatiquement dans la catégorie Non classé. Maintenant, lorsque nous passons au front end, c'est pourquoi, par défaut, ils sont affichés ici. Donc, ce que nous devons faire, c'est parce que ce sont produits élémentaires et que nous avons une catégorie élémentor, peuvent revenir à l'intérieur de tous les messages. Et maintenant, nous pouvons définir la catégorie pour chaque produit. Je vais vous montrer deux méthodes et comment définir la catégorie. La première méthode consiste donc à modifier n'importe lequel des produits. Et ici, à droite, sous les paramètres, juste en dessous du modèle. Rappelez-vous que nous avons dit le modèle à Elementor pleine largeur, quelques panneaux sous les catégories de facilité du modèle. Si vous cliquez dessus, toutes les catégories disponibles seront affichées. Décochez l'option Non classée et définissez-la sur Elementor car il s'agit d'un modèle élémentaire. Mettez à jour cela. Et maintenant, sortons d'ici. Et maintenant, vous remarquerez qu'il est passé à la catégorie Elementor. La deuxième méthode consiste à le faire ici avec la méthode d'édition rapide. Modification rapide. Lorsque vous cliquez dessus, toutes les options que vous pouvez modifier s'affichent. L'une d'entre elles sera alors les catégories. Décochez donc cela et cochez Elementor, puis mettez à jour. Et répétons cela pour le reste. Je vais donc éditer rapidement cet Elementor et le vérifier. Mettez à jour cela. Et maintenant, ils sont tous dans la catégorie Elementor. Maintenant, revenons à notre page ici, je vais d'abord mettre à jour, puis je vais actualiser la page en appuyant sur Contrôle R. Donc maintenant, avec une actualisation de la page, sélectionnons à nouveau la grille en cliquant sur n'importe où à l'intérieur. Et maintenant, dans les catégories, saisissons Elementor. Et maintenant, il va évoquer cet élémental juste là. Nous sommes donc très sûrs que tous ces modèles sont élémentaires. Il ne s'agit pas de modèles dans aucune autre catégorie. La prochaine chose que nous voulons faire est d'entrer dans les paramètres de mise en page. Et nous n'avons pas besoin de tous ces détails. Faisons donc un changement à cela. Tout d'abord, je vais mettre à jour cette page ou à droite. Et je ne veux pas montrer la date, le nom de l'auteur, un avatar. Cela permet de se débarrasser de toutes ces choses sous le bouton Lire la suite. Je veux afficher le bouton Lire la suite, mais je devais dire Afficher le modèle. Et je ne veux pas non plus montrer l'extrait. Ces informations seront disponibles lorsqu'ils cliqueront dessus. Ouvrez la page unique, la page produit unique que nous avons créée précédemment. Nous allons donc mettre à jour cette page. Nous devons maintenant disposer d'une image pour chaque produit que nous avons créé. Alors, comment obtenir les images ici ? Revenons à notre liste de produits. À moins d'entrer dans chaque produit et de définir une image en vedette. Par exemple, modèle de santé de vie. Donc, tout d'abord, je veux savoir quel produit il s'agissait. Je vais donc voir cela dans un nouvel onglet. Et c'est celui-là ou cette dame. Nous allons donc entrer à l'intérieur et modifier cette page. Et sous Paramètres, je vais faire défiler jusqu'à l' image en vedette et cliquer sur Définir l'image en vedette. Et, euh, donc je pense que c' était cette dame, cette image de cette image de Set Featured Image. Et c'est là que nous l'avons. Mettez à jour cela. Revenons en arrière. Cliquez avec le bouton droit de la souris et voyons quel produit il s'agissait de ce type ici. Je veux juste le modifier. Sous paramètres. Allons faire défiler jusqu'à l'image en vedette. Cliquez sur ce bouton. Et c'était ce type ici. Je vais répéter la même chose pour le reste des produits, définissant l'image en vedette. Permettez-moi donc d' avancer rapidement cette section. Et maintenant, je viens de définir l'image en vedette de tous ces produits. Passons au front end et rafraîchissons cette page juste au cas où vous n'auriez pas enregistré vos modifications, mettez-les à jour, puis appuyez sur Contrôle R. Tout va bien, donc nous y voilà. Les choses commencent à s' améliorer maintenant le jour même. Allons de l'avant et sélectionnons la grille. Et avec cette option, réduisons la requête et développons les paramètres de mise en page. Nous devons avoir trois colonnes. Je préfère trois colonnes. Revenons à la question et disons que nous avons besoin de six produits par page pour l'instant. Nous allons changer cela sous peu, mais disons six produits par page exposés. Nous avons donc maintenant une grille de six produits. Et maintenant, réduisons à nouveau la requête et développons les paramètres de mise en page. Nous avons maintenant trois colonnes, six produits. Changeons ces éléments en h3. Les balises de titre détesteront trois, car ce que nous voulons faire, c'est ajouter un H2. Avant ça. Je vais d'abord le mettre à jour. Et cliquons dessus et faisons glisser un titre vers le haut. Mettons-le au milieu. Et laissez-moi simplement appeler ça des modèles élémentaires car s'agit d'une catégorie de modèles, des éléments MAR des modèles. Bien sûr, nous allons le coiffer. Je vais changer la famille de polices en Montserrat. Je vais réduire un peu la taille et augmenter la police à 800. Mettez à jour cela. Et maintenant, prévisualisons les changements à l'état. Défilons vers le bas et voyons ce que nous avons. Au moins, c'est bien mieux que ce que nous avions. Et bien sûr, nous allons le rendre beaucoup plus présentable au fur et à mesure que nous progressons. Nous sommes en train de commencer en ce moment. Donc, en revenant ici, alors que c'est encore sélectionné, nous voulons entrer dans le style. Et maintenant, laissez-moi réduire le style Post Greed pendant un instant pour que vous puissiez voir tous les panneaux que nous avons. Nous avons donc le style miniature. Donc ces images, méta-style, cela signifie que les éléments que nous chauffons que nous sommes ici. Meta position, calotype, épigraphie et espacement. Commençons par le style de bouton Lire la suite. Cette année. Nous voulons le changer en blanc. Mais maintenant, le contexte doit être de 40, 40, 40. Comme d'habitude. Et puis, supprimons ça. Donnons-lui un rembourrage gauche de 20, rembourrage droit de 20, 10. Et donnons ensuite un rayon de limite de cinq. Faisons une mise à jour miam. Mais maintenant, réduisons cela à cinq. Rembourrage supérieur et inférieur. Ou montez une paie ça. Réduisons le style de bouton Read More et ouvrons le style de vignette. Donnons-lui un rayon de bordure de 20. Comme ça. Pour le style post-GREP. Donnons également un rayon de bordure de 20, car pour le moment où vous voyez, il sort toujours de l'image dont le coin est arrondi. Donnons aussi à ça un Tony. Et maintenant, c'est caché. Mettez à jour cela. Ensuite, réduisons cela et passons à l'intérieur de la topographie et de l'espacement. Et alignons le texte sur le centre. Supprimons ce lien. Et pour la marge inférieure, augmentons un peu pour pouvoir l'espacer, peut-être 10. Réduisons l'espacement des couleurs et de la typographie et revenons à l'intérieur du style de bouton Read More afin que nous puissions le pousser vers le milieu. Donc, cassons le lien sur la marge et augmentons la marge gauche jusqu'au centre. Utilisez votre œil pour juger où se trouve le point médian. Je pense que c'est un bon endroit. Mettez à jour cela. Ensuite, prévisualisons les modifications. Très bien, donc maintenant nos produits sont correctement affichés, mais nous devons faire quelque chose à propos du bouton. Poussez-le vers la droite. Alors, où est-il ? Mettons-le à jour en vue des modifications. Très bien, nous y sommes presque, alors augmentons beaucoup plus. Disons 100. Donc, ici, eh bien, nous sommes sur la page d'édition. Il semble mal aligné, mais sur la page réelle, prévisualisons. Maintenant, c'est presque probablement une ligne. Je pense que pour l'instant c'est presque satisfaisant, mais allons-y et donnons peut-être un 110. Donc, dans mes tentatives pour le mettre au milieu, je suis allé de l'avant et je lui ai donné une marge de 100 à droite et de 100 à gauche. Mais pour l'instant, nous allons prévisualiser les changements. Et je vois que nous devons faire quelque chose au sujet du rembourrage de ce côté. Revenons donc ici. Nous pourrions réduire la marge de droite. Maintenant, augmentons un peu la marge à droite. Peut-être un ou cinq. Mettez à jour cela. Et prévisualisons les changements ou les manèges. Et maintenant, je pense que c'est au milieu. Je ne sais pas quelles valeurs fonctionneront pour vous ici, mais ce sont les valeurs qui fonctionnent pour moi. Alors allez-y et essayez différentes valeurs jusqu'à ce que vous ayez bien compris. Très bien, donc nous l'avons là. N'oubliez pas que nous disons que DC ne créer un très beau site Web pour l'instant. Il s'agit de vous montrer comment créer le système lui-même. Je suis presque sûr que tous ceux qui suivent ce cours en ce moment nous trouverons un site Web différent, mais le système sous-jacent sera le même. Le système qui vous permet d'afficher les produits de cette façon, mais vous vendrez vos produits différemment, votre page et les couleurs que vous utiliserez. Tout cela sera différent. Notre objectif est donc d'apprendre comment créer correctement un système qui offre au client un parcours client agréable. Ils viennent sur votre site Web, explorent vos produits et lorsqu'ils cliquent sur le produit, par exemple, si je clique dessus, Voyons où seront emmenés sur cette page. Nous avons créé cette page plus tôt et nous pouvons maintenant lire des détails sur ce produit. Et si nous aimons le produit, nous pouvons aller de l'avant et le télécharger. C'est donc le genre de système sur lequel nous nous concentrons et nous allons essayer de construire. Voici donc comment afficher les produits sur votre page Web. Ensuite, nous voulons voir comment ajouter une autre catégorie de la même manière que nous avons ajouté l'élément de catégorie modèles. Nous allons le faire dans la prochaine leçon. Je vous verrai bientôt. 22. Affichage d'une catégorie de produits numériques supplémentaires: Bienvenue de retour. Dans la leçon précédente, nous avons affiché la catégorie des modèles élémentaires. Nous voulons maintenant ajouter une autre catégorie, et j'ai choisi la catégorie des magazines. Donc, avant de créer, nous allons le sélectionner. Je veux apporter un léger changement à cela. Je ne veux afficher que quatre colonnes, que nous puissions avoir une ligne. Alors que cette option est sélectionnée, passons à l'intérieur des paramètres de mise en page, disons pour. Alors disons tout d'abord montrer les produits. Ainsi, seuls quatre produits seront affichés. Et réduisons l'angle de requête à l'intérieur des paramètres de mise en page, par exemple, quatre colonnes qui les afficheront toutes sur une ligne. Laissez-moi juste le mettre à jour. Ne vous laissez pas tromper par une montre qui voit ici. Si nous prévisualisons les modifications dans le front end, il s'agira d'une ligne. Très bien, donc nous l'avons là, juste une rangée de quatre colonnes. Nous voulons maintenant ajouter une autre ligne d'une autre catégorie. Donc, juste pour corriger l'endroit, rafraîchissons la page. Et c'est là que nous l'avons. Une chose intéressante avec Elementor, comme je l'ai montré un peu plus tôt, est que vous pouvez dupliquer des éléments, afin que nous puissions dupliquer cette ligne comme ça. Et maintenant, nous avons deux rangées. Donc, si je le mets à jour et que je prévisualise les modifications, nous avons maintenant deux lignes. Il suffit donc de modifier les détails sur ce domaine particulier. Changeons donc cela en modèles de magazines, de magazines. ne nous reste plus qu'à modifier la source de ces données. Nous modifions donc la catégorie d'où les données sont extraites. Fermons donc Elementor car ce ne sont pas des modèles élémentaires et choisissons un magazine. Donc, en tapant un magazine, il affichera des magazines. Et bien sûr, parce que nous n'avons pas encore de magazines, il n'y a pas de publications trouvées car rappelez-vous que nous avons créé ces produits numériques sous le modèle élémentaire. En revenant à l'intérieur du tableau de bord, nous devons passer sous les messages et ajouter de nouveaux. Nous pouvons donc créer quelques modèles de magazines en tant que produits numériques, puis nous pourrons les afficher en frontal. Par exemple, commençons allons à l'intérieur avant de lui donner un nom, passons à l'intérieur de cette image en vedette. Et regardons quelques-uns des modèles de magazines que nous avons. Je souhaite télécharger quelques modèles de magazines que j'ai créés précédemment. Je vais donc importer toutes ces images et vous les trouverez dans la description ci-dessous dans le dossier. Comme charge restante. Allons de l'avant et choisissons celui-là. Je vais définir cela comme image en vedette. Et je vois que le nom est la masse corporelle. Donc, définissez l'image en vedette. Je vais appeler ça la masse corporelle. Gabarit de masse corporelle. Eh bien, appelons ça Magazine. Et bien sûr maintenant, sous paramètres, allons dire les valeurs par défaut, modèle, Elementor pleine largeur. Défilons vers le bas et classons-le comme magazines. Et ici, dans les paramètres de l' Astra. Passons ça à aucune barre latérale. Extensible pleine largeur. Soyons capables de les faire. Et maintenant, nous sommes prêts à y aller. Nous allons publier ça. Allons maintenant au front end. Très bien, et maintenant nous sommes en première ligne des produits du magazine. Nous devons donc utiliser le modèle que nous avons utilisé précédemment pour les modèles élémentaires. Allons donc à l'intérieur, ajoutez un modèle. Allons dans mes modèles et insérons ceci. Très bien, donc nous l'avons là. Bien sûr, la première chose à faire est de sélectionner l'image et de la remplacer par l'image actuelle du produit. Et c'est ça. Nous allons donc insérer des supports et c'est l'image de notre produit. Allons le rendre un peu plus petit jusqu'à ce point. Et changeons le nom. Je pense que c'était le magazine de masse corporelle. Probablement ça. Je vais le sélectionner , puis le remplacer. Et c'est là que nous l'avons. Prévisualisons les modifications. Très bien, donc c'est comme ça que ça ressemble. Bien sûr, vous pouvez les rendre beaucoup plus beaux que, qu'en ce moment. Alors allez-y et rendez vous plus agréable à regarder. En revenant ici, je vais cliquer sur ce menu Burger et quitter le tableau de bord. Maintenant, sortez complètement de là. Et maintenant, le magazine de masse corporelle est l'un des produits numériques. Je vais donc répéter que pour quelques autres produits, comme nous l'avons fait avec les éléments sont des modèles. Je vais donc ajouter Mu. Avant de lui donner un nom, j'irai dans Paramètres, puis je modifierai le modèle en élément 0 4 sans aucun, ce n'est pas un modèle élémentaire, c'est un magazine. Et allons de l'avant et sélectionnons une image pour cela. Choisissons le magazine Code Pantheon, définissez l'image en vedette. C'est donc de la fraude. Magazine Code Pantheon. Et puis à l'intérieur de ces paramètres Astro, n'oubliez pas de dire pas de barre latérale. Pour la largeur étirée ces cinq Abel. Ensuite, le dossier, puis publiez-le. Ensuite, nous pourrions aller au front end. Très bien, alors faisons ce que nous venons de faire avec les autres produits. Coïncider Ajouter un modèle, ajouter un modèle, mes modèles, insérer ce modèle. Et c'est là que nous l'avons. Donc, en sélectionnant l'image. Allons de l'avant et définissons notre image vedette. Compagnon. Insérez un support. Je pense que c'était jusqu'à ce moment-là. Mettez à jour pourquoi ne pas le pousser jusqu'ici et les laisser tomber un peu. Je vais donc agrandir ça. Sélectionnez cette colonne ici. Allez à avancé, malgré celui-ci, 150, comme s'ils étaient jusqu'à ce point et disons la mise à jour. Prévisualisons les modifications remplacées. Mais maintenant, nous devons changer ce nom du bodybuilder magazine Pantheon code bodybuilder. Ensuite, mettons à jour cela. Et prévisualisons les modifications. Très bien, donc il y a nos produits numériques, il y a notre modèle de magazine qui ressemble assez au reste. Et maintenant, revenons ici. Et comme nous avons enregistré nos modifications, quittez le tableau de bord. Et je le ferai encore quelques fois et je vais créer quelques autres produits numériques. Mais pour éviter de les rendre trop monotone, je vais juste avancer rapidement cette section. Je vous verrai donc après avoir créé les produits. Je viens donc de finir de créer ces produits numériques pour magazines. Nous en avons cinq. Je veux donc passer au front end et voir ce que nous avons ou comment ils regardent en ce moment. Alors, allez ici sur notre page d'accueil et rafraîchissez la page en appuyant sur Control R. Alors faisons défiler vers le bas. Et voici notre nouvelle catégorie Magazine modèle. Mais bien sûr, comme vous pouvez le constater, les boutons sont un peu bizarres. Revenons donc en arrière et alignons les correctement. Editez donc avec Elementor ici. Défilons donc vers le bas. Commençons par ça. Donc, en sélectionnant cela, Allons dans le style, style de bouton Lire la suite. Et réduisons la marge sur le côté gauche à peut-être 50. Mettons-le à jour. Faisons de même pour cette section. Sélectionnez-le, entrez dans le style. Style de bouton Lire la suite. Donnons à cela un 50 ou écrivons la mise à jour. Et prévisualisons les modifications. C'est vrai ? Nous allons donc le pousser légèrement vers la droite. Donc, peut-être 60, 65 ou 70 ans. Disons maintenant 60. Nous allons le sélectionner. Style de site en cours. Bouton en savoir plus 16. Mettez à jour cela. Et prévisualisons les modifications. vrai, ils ont l'air géniaux en ce moment. Par conséquent, du haut, nous avons la barre de navigation. Ensuite, nous avons notre section héros. Voici donc nos produits dans différentes catégories. Et nous avons notre pied de page. Mais augmentons l'espacement juste en dessous de cette section. Sélectionnez donc la section à l'intérieur avancé. Et donnons une marge inférieure de 90 comme l'autre. Nous avons donc maintenant un espace de 90 pixels entre cette section et le pied de page. Alors mettez-le à jour. Et prévisualisons les modifications. Donc, faites défiler vers le bas. Génial. Nous avons donc cet espacement agréable en bas, mais nous n'en avons pas encore fini avec cette page. Dans une leçon ultérieure, nous ajouterons un formulaire d'inscription quelque part ici sur cette page afin que nous puissions capturer e-mails des utilisateurs afin de rester en contact avec eux, de les informer des nouveaux téléchargements , etc. des sortes de choses. Pour l'instant, voici comment créer et afficher les différents produits en tant que catégories de produits sur la page de destination. Je pense que c'est fini avec ça pour l'instant. La prochaine chose que nous voulons faire est créer la page de téléchargements. Laissez-moi faire défiler vers l'extérieur. Nous voulons créer ces pages de téléchargements et c'est là que tous les produits seront affichés. Créons donc la page de téléchargements dans la leçon suivante. Je vous verrai bientôt. 23. Définir la page de Elementor comme page de page d'accueil: Bienvenue de retour. Nous avons déjà créé notre page de destination ou notre page d'accueil. Mais maintenant, si vous regardez l' URL dans la barre d'adresse ici, vous remarquerez qu'elle possède cette extension d'accueil. Et au cas où j'ai oublié de le mentionner, j'ai utilisé mon nom de domaine pour créer ce site Web de démonstration. Mais vous remarquerez que nous sommes sur la page d'accueil. Mais il possède ces extensions après le domaine. Donc ce que nous voulons, c'est de ne pas avoir ces maisons pour qu'il s'agisse poussière www dot votre site web.com ou pointer n'importe quelle extension mais sans rien réduire. Donc juste pour vous montrer exactement ce que je veux dire, si je pouvais simplement sauter sur pic.com gratuit sur la page de destination, l'URL est gratuite PQ.com, ce n'est pas gratuit pic.com slash home. Comment définir cela dans WordPress ? Parce que ce qui se passe, c'est que si nous ne définissons pas de page d'accueil par défaut, permettez-moi, par exemple, supprimer cette maison, puis de cliquer sur Entrée. Il sera redirigé vers une page bizarre qui a la page WordPress par défaut. Ça n'a pas l'air bien. Nous voulons que les gens soient redirigés vers la page que nous avons conçue avec Elementor. Alors, comment pouvons-nous faire cela ? Alors, en sautant à l'intérieur de notre tableau de bord, passons dans Paramètres et cliquons sur la lecture. L'une des options ici sera l'affichage de votre page d'accueil. Par défaut, il sera défini sur vos derniers messages. Changez cela par une page statique. Et à partir de ce menu déroulant ici, nous obtiendrons une liste de toutes les pages que nous avons créées et nous pouvons définir la page d'accueil comme page d'accueil. Maintenant, avec cela et les paramètres enregistrés, revenons au front-end. Il suffit de le sélectionner, et maintenant, appuyez sur Entrée. Là, nous l'avons. Maintenant, lorsque les utilisateurs saisissent notre URL de base, seront redirigés vers la page d'accueil que nous avons conçue avec Elementor. donc comme ça qu'il faut le régler. Dans la leçon suivante, je veux vous montrer comment définir les liens de paramètres et quels sont les liens principaux. Découvrons-le. 24. 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. 25. Conception de la page Téléchargements: Bienvenue de retour. Dans la dernière leçon, nous avons vu comment créer et afficher nos produits dans des catégories comme celle-ci sur notre page d'accueil. Maintenant, dans cette leçon, nous voulons voir comment afficher nos produits sur la page des téléchargements. Et la page de téléchargements est la page qui affiche tous les différents types de produits que nous avons. Vous pouvez donc les considérer comme la bibliothèque. La page de destination ici donne donc à leurs visiteurs un aperçu de ce à quoi ils devraient s'attendre. Et lorsqu'ils cliquent sur la page de téléchargements, vous êtes censé trouver tous nos produits. Cliquons donc sur Télécharger et voir à quoi ressemble la page en ce moment. Voici donc à quoi ressemble notre page. Il s'agit d'un modèle WordPress par défaut. Nous devons donc modifier cette page Web avec Elementor. Nous devons donc le construire visuellement avec Elementor. Nous avons donc un raccourci ici, modifier la page, nous pouvons cliquer ici. Les pages du tableau de bord, les téléchargements, puis Modifier. Et nous y voilà. La première chose à faire est donc d'entrer dans les paramètres Astro pour qu'il soit déjà actif. Et sous la barre latérale, disons pas de disposition de contenu de la barre latérale pour la largeur. Allons ces Abel, ces cinq, puis le sixième ici. Et mettez-le à jour. Assurez-vous également à l'intérieur des paramètres, notre modèle est réglé plaque pleine largeur Elementor. Et maintenant que notre page est mise à jour, allons-y et modifions avec Elementor. Et ici, nous l'avons. Ce que nous voulons faire sur cette page, c'est afficher les produits sous la forme d'une galerie filtrable. Et je vais vous montrer comment faire ça. Ce que nous devons donc faire, c'est sélectionner une section de colonne pleine largeur. Comme ça. Nous allons sélectionner la section. Et à l'intérieur avancé. Supprimez ce lien là-haut et donnons-lui une marge supérieure de 50. Ou bien. Cliquez sur le signe plus ici. Glissons un en-tête à l'intérieur. Et modifions cela par quelque chose comme les téléchargements Explorer pendant qu'il est toujours sélectionné. Va à l'intérieur du style. Changeons la couleur en topographie coïncidée, changeons la famille de polices en Montserrat. Cliquez à l'extérieur pour vous en débarrasser. Et alors que nous sommes encore des idées, j'épuise, passons le poids de la police à 800. Et augmentons peut-être la taille de cette police à ce point. Quelque part dehors. Cliquez quelque part à l'extérieur, entrez contenu et mettons-le au milieu. Ensuite, juste en dessous. Sélectionnez-le. Cliquons sur cette minuscule icône et faisons glisser quelques textes juste en dessous de l'en-tête. Et ça pourrait être juste. Et puis passons à l'intérieur du style et poussons-le au centre. Et maintenant, nous avons une brève description de ce que nous sommes sur le point de mettre ci-dessous. La prochaine chose que nous voulons faire maintenant est d'ajouter notre galerie filtrable sous ce titre, ce texte. Nous allons donc cliquer sur cette minuscule icône juste ici pour faire apparaître les éléments. Et je veux taper filtre filtrable galerie. C'est l'un des éléments apportés par les modules complémentaires essentiels pour Elementor. Faites-le glisser et déposez-le juste en dessous lorsque cette ligne bleue apparaît. Et c'est là que nous l'avons. Bien sûr, ce sont des détenteurs de places. C'est maintenant à nous de les modifier et de les transformer en produits. Tout d'abord, mettons à jour cela. Et prévisualisons les modifications. Voilà à quoi ressemblera notre page . Quand quelqu'un clique. Icône Zoom ici. Il est censé faire ressortir l'image afin qu'ils puissent avoir un peu de vue sur le produit et qu'ils puissent faire défiler tous les différents produits. Echappeons-nous à cela. Et lorsqu'ils cliquent sur cette icône de lien ici, le produit d'une seule page de ces produits en particulier sera redirigé . Voyons donc comment le faire. Et avant d'ajouter les produits eux-mêmes, ajoutons une marge juste en dessous pour avoir un bel espacement entre les deux éléments. Allons donc ici. Sélectionnez une section contenant tous ces contenus. Et maintenant, nous voulons ajouter une marge dessous alors qu'elle est toujours sélectionnée. Bas de marge avancée. Donnons 90 jours. C'est un espacement de 90 pixels entre cette section et le pied de page. Nous allons donc mettre à jour cela et prévisualiserons les modifications. Très bien, donc j' aime bien ce que ça ressemble. Revenons en arrière et modifions les produits. En revenant ici, je vais choisir n'importe où à l'intérieur. Et maintenant, l'élimination active est filtrable galerie. Laissez-moi d'abord réduire les paramètres. Et vous remarquerez que nous avons environ quatre panneaux. Commençons donc par les paramètres. Réglages intérieurs. Cela détermine le nombre d' éléments que vous souhaitez afficher. Actuellement, il est fixé à six. Nous pouvons le fixer à 12, par exemple, disons 12. Nous pouvons le définir sur 12, mais bien sûr, nous devrons créer 12 produits pour pouvoir les montrer. Ils ont donc actuellement six espaces réservés pour voir comment créer tous ces produits. Ensuite, réduisons les paramètres et passons à l'intérieur des contrôles filtrables. Les contrôles filtrables sont donc maintenant nos catégories. N'oubliez pas que nous avions un logo, catégorie de logo, catégorie élémentaire et une catégorie de magazines. Ils montent donc ici et ils sont nos contrôles pour déterminer ce qui est en vue, ce qui est visible en ce moment. Par conséquent, sous les contrôles filtrables, passons ici à l'élément de la galerie. Cliquez dessus, puis modifions cet élément de galerie en élémentor. Très bien, alors cliquons dessus pour le réduire et dupliquons-le. Nous avons donc maintenant deux contrôles filtrables. Cliquons dessus et donnons un autre logo de catégorie. Nous allons effondrer ça. Et maintenant, vous remarquerez que nous avons deux catégories ici. Ajoutons un autre magazine et prévisualisons les modifications. vrai, donc nous l'avons. Maintenant, comme je l'ai mentionné, lorsque vous cliquez sur l'un de ces articles, les produits qui se trouvent dans cette catégorie seront visibles ici, et les autres seront masqués. Ainsi, lorsque nous cliquons sur Elementor, seuls les produits appartenant à la catégorie élémentaire s' affichent lorsque vous cliquez sur le logo. Le même cas s'applique lorsque nous cliquons sur tout , tous les produits de toutes les catégories seront visibles. Nous allons maintenant créer les produits. Je vais donc réduire les contrôles filtrables et étendre les éléments de la galerie. Ce sont nos produits et nos produits. Et comme vous pouvez le constater, nous avons six espaces réservés que nous pouvons désormais modifier avec notre propre contenu. Le premier élément ici, vous remarquerez que nous avons le nom du contrôle. C'est pour demander quel contrôle filtrable contrôle cet élément. Nos contrôles sont donc ces catégories que nous venons de créer ici. Dans les commandes filtrables. Ce sont nos contrôles. Laissez-moi donc réduire cet effondrement élémentaire, ces objets de galerie. Le premier élément sera un modèle élémentaire. Je vais donc cliquer dessus. Il est contrôlé par le contrôle Elementor. Et c'est ce qu'on appelle le modèle de bodybuilder. Vous vous en souvenez ? Et je vais faire défiler vers le bas et vous verrez où nous pouvons changer l'image. Cliquez ici. Et je crois que c' était l'image. Choisissez cette image et insérez un support. Et c'est là que nous l'avons. Il y a notre produit. Je vais donc répéter la même chose pour tous les produits. Je vais réduire ce modèle de bodybuilder et développer le deuxième produit, qui est également un modèle élémentaire. C'est donc le contrôle d'Elementor. Le nom est que je vais juste inventer un nom pour que nous puissions dire l'heure. Nous avions un modèle de serveur, au fait, un modèle de serveur. Et vous pouvez modifier cette brève description qui apparaît ici. Défilons ici et modifions cette vignette. Donnons-lui cette image ici. Insérez un support. Et il y a notre deuxième produit. Passons aux troisième produits. Je vais faire défiler vers le haut et m'en souvenir. Maintenant, pour que ce lien fonctionne, c'est ici que vous ajoutez le lien, donc téléchargez ou quelque chose de ce genre. Et maintenant, lorsque quelqu'un clique sur ce lien, il sera redirigé vers cette URL. Et si vous souhaitez que ce lien s' ouvre dans un autre onglet, cliquez ici sur cette roue COG et dites ouvrir une nouvelle fenêtre. Mettons-le à jour. Et prévisualisons les modifications. Donc, nous l'avons là. Lorsque quelqu'un clique sur ce lien, remarquez l'URL que nous venons d' ajouter il y a quelques instants. Il s'ouvrira dans un nouvel onglet. Une page est toujours intacte. Et c'est parce que nous disons ouvrir une nouvelle fenêtre. Si nous la décochons, mettez-le à jour et prévisualisez les modifications. Si nous cliquons dessus, il se charge sur la même page et nous perdons tout ce sur quoi nous travaillions. Revenons ici et créons un troisième produit. Je vais faire défiler vers le haut et réduire le deuxième produit. Développez le produit PRD. C'est toujours un produit élémentaire. donc Je vais donc faire défiler vers le bas et modifier la vignette. Nous allons donc choisir cela. Très bien, génial. Maintenant, je vais créer trois autres produits ici et en ajouter quelques autres après cela. Et parce que c'est le même travail répétitif que nous avons déjà fait ici, je vais accélérer cette section. Prenez un moment et créez tous ces autres produits. Et on se retrouvera une fois que nous en aurons fini. Allons-y. Et c'est ainsi que nous y voilà. Je suis de retour. Je viens de créer quelques autres produits ici. Comme vous pouvez le constater, nous avons ajouté des magazines et des logos, ce qui nous permet d'avoir certains articles dans ces catégories. J'ai donc répété la même chose que nous avons faite pour ces deux produits. Je viens de rentrer à l'intérieur. Par exemple, ce logo, simple logo. J'ai alloué les logos des noms de contrôle car des contrôles filtrables. L'une des commandes, il y a des logos, donc c'est censé être des logos. Le nom dans les contrôles filtrables doit être le même que celui que vous donnez ici. Ainsi, sous un simple logo, le nom du contrôle est des logos. Et je lui ai donné un nom, une description et j'ai sélectionné une image pour cela. Si j'avais un lien, je l' ajouterais ici. J'ai donc fait exactement la même méthode pour tous ces différents produits ici. Et c'est ce que vous voyez ici. Nous allons donc mettre à jour cela et prévisualiserons les modifications. Très bien, donc nous voici sur la page. Permettez-moi de faire défiler vers le bas pour voir ce que nous avons. Et la page est magnifique. J'aime ce que cela ressemble car l'utilisateur peut venir sur la page, avoir un aperçu des différents produits que nous avons. Et ils peuvent les voir par catégorie. Par conséquent, s'ils veulent voir uniquement les modèles élémentaires, ils peuvent cliquer dessus et les produits seront filtrés par catégorie. Donc, s'ils veulent voir uniquement les logos, ils ne verront que les produits du logo que vous avez également. Je n'ai pas changé cette catégorie ici. Il s'agit d'un élément, d'un modèle. Mais tu prends l'exercice. Ensuite, une autre chose que nous voulons revenir en arrière, nous voyons tous les produits de toutes les catégories que nous avons dites ici. Et bien sûr, en revenant ici, en réduisant cela et en élargissant les contrôles filtrables. N'oubliez pas que nous pouvons toujours dupliquer ces catégories ici, en ajouter et en ajouter de nouvelles. Disons donc des dégradés. Et mettons à jour cela. Nous serions donc maintenant en mesure de réduire les contrôles filtrables, entrer dans les éléments de la galerie, dupliquer n'importe lequel des produits ici. Et maintenant, utilisez les dégradés comme l' un des contrôles. Et lorsque quelqu'un clique sur les dégradés, il voit uniquement les produits de la catégorie des dégradés. Et vous pouvez faire glisser ces produits et les réorganiser exactement comme vous le souhaitez sur votre page afin de ne pas avoir à vous en tenir à la façon dont ils sont disposés ici. Et au fur et à mesure que nous les réorganisons, le changement prend effet en temps réel. Donc, si nous voulons le déplacer au troisième endroit ici, vous pouvez simplement venir ici et faire glisser le premier logo vers le troisième emplacement. Et c'est là. Nous allons donc mettre à jour cela. Et passons en revue les changements une fois de plus. Maintenant que nous avons les produits ici et qu'ils sont très bien affichés. Comment les relier aux pages uniques de description de produit que nous avons créées pour eux ? Par exemple, nous avions un modèle de serveur. Ainsi, lorsque nous cliquons sur ce lien, nous sommes censés être redirigés vers la page de description du modèle. Alors, comment en sommes-nous arrivés et de quelle page est-ce que je parle ? Laissez-moi d'abord ouvrir les messages. Et appelons vers le bas le modèle de serveur. Je clique avec le bouton droit de la souris sur Afficher et ouvrir le lien dans un nouvel onglet. Et passons à cet onglet. C'est donc là que ce lien est censé nous guider. Ce dont nous avons besoin, c'est lié à ce modèle. Ce que nous devons donc faire, c'est copier ce lien comme ça. Allez dans cette page ici. Et comme il s' agit de notre modèle, du modèle auquel nous voulons créer un lien, c'est le modèle pondéré. Nous allons le chercher. C'est ça. Nous allons donc l'agrandir et faire défiler vers le bas. Juste en dessous de l'image où nous avions ce lien. Supprimez cela et collez notre lien là-dedans. Disons d'ouvrir une nouvelle fenêtre et de le mettre à jour. Maintenant, si nous prévisualisons les modifications, si nous faisons défiler vers le bas pour attendre un modèle et cliquer sur le lien. Maintenant, il va s'ouvrir dans un nouvel onglet. Et cela nous amènera à la page qui contient plus de détails sur le modèle pondéré. J'espère donc que vous commencez à connecter les points et à voir comment le parcours client évolue. Nous allons donc à la page d'accueil, faites défiler vers le bas. Nous sommes en mesure de voir des produits dans différentes catégories, n'est-ce pas ? Et lorsque nous accédons à la page de téléchargements, nous sommes en mesure d'afficher plus de produits et les différentes catégories de produits disponibles sur cette page, disponibles sur ce site Web. Et nous pouvons aller de l'avant et sélectionner un produit pour en voir plus. Apprenez-en plus sur le produit et si nous l'aimons, nous pouvons continuer à l'acheter. Alors téléchargez. Voilà donc le parcours client et voici comment créer cette galerie filtrable particulière. Donc, en sélectionnant une nouvelle fois cette galerie filtrable. Et faisons défiler vers le bas, progressons vers l'extérieur et entrons dans le contenu. Nous allons réduire la galerie et passer à l'intérieur des paramètres. Et comme je l'ai déjà mentionné, nous pouvons déterminer le nombre de produits que nous voulons afficher à tout moment. Donc, pour le moment, nous les avons dit à 12. C'est pourquoi nous pouvons maintenant voir 12 produits. On peut donc dire, par exemple, un produit. Donc, si vous dites un défilement vers le bas, seule l'aide est visible. Disons six. Et maintenant, seuls six produits sont visibles. Alors, comment voyez-vous le reste des produits ? Réduisons les paramètres et descendons vers le bouton Load More. Cliquez sur le bouton Charger plus et passons à oui. Nous avons donc maintenant beaucoup plus de boutons ici en dessous de la galerie. Mettons-le à jour. Et nous pouvons définir le nombre d'images que nous voulons afficher chaque fois que nous cliquons sur Charger plus. Ainsi, chaque fois que nous cliquons sur Load More, il en charge six autres. Et nous pouvons changer le numéro deux, peut-être un 0, 10, et il chargera dix autres modèles. Nous pouvons également modifier le texte lui-même pour en afficher davantage. Et mettons à jour cela. Et quand il n'y a plus d'images et que quelqu'un clique sur le bouton et qu'il n'y a plus d'images. C'est le message qu'ils reçoivent tous. Et nous pouvons également modifier la taille du bouton. Nous avons tellement de contrôle là-dessus. Nous pouvons également entrer dans le style, réduire le style général, aller sur le bouton Charger plus, faire défiler vers le bas. Et ici, nous pouvons changer de couleur. Par exemple, nous pouvons lui donner cette couleur jaune si nous le voulons. Mais je préfère l'avoir comme couleur. Et en planeur maintenant, il peut avoir cette couleur jaune comme ça. Ensuite, nous pouvons également augmenter l'espacement entre elle et les images ici en faisant glisser cela jusqu'à ce que nous soyons satisfaits. J'aime bien où il se trouve maintenant. Nous allons donc mettre à jour cela et prévisualiserons les modifications. Très bien, alors faisons défiler vers bas lorsque nous voyons nos produits. Et voici notre bouton Load More. N'oubliez pas que le dernier décor que nous avons dit consistait à ne présenter que six produits dans une ville donnée. Mais si nous cliquons sur Afficher plus, comme vous pouvez le voir, il en est chargé six autres. Si nous disons Afficher plus, il en est chargé un de plus. Il n'est donc plus visible, car il n'y a plus de produits à voir. Et voilà comment créer la page de téléchargement en ajoutant une galerie filtrable à manger. Et dans la galerie Filter Blur, nous pouvons ajouter différentes catégories de produits. Les utilisateurs peuvent également afficher les différents produits en fonction des catégories que vous leur avez attribuées. Ils peuvent également sélectionner un produit et afficher son image, ou accéder à ce produit et afficher plus de détails avant de décider s' ils veulent l'acheter. Donc, juste comme ça. Dans la leçon suivante, nous verrons comment créer la page de contact. Et pour être plus précis, nous voulons savoir comment utiliser la création d'un formulaire WordPress afin que les utilisateurs puissent nous envoyer un e-mail contenant des questions ou des commentaires sur nos services. Comment recevons-nous et capturons-nous e-mails et messages des utilisateurs sur notre site Web ? Voyons comment le faire dans la prochaine leçon. Je vous verrai bientôt. 26. Concevoir la page de contact: Bienvenue de retour. Dans la dernière leçon, nous avons conçu la page de téléchargements et nous avons vu comment créer ces galeries filtrables. Nous voulons maintenant savoir comment créer la page de contact. Laissez-moi l' ouvrir pour voir ce que nous avons. Comme d'habitude, nous avons le modèle WordPress normal. Nous voulons donc savoir comment créer un formulaire que les utilisateurs peuvent ressentir et nous envoyer un e-mail contenant des commentaires ou une question ou un commentaire sur nos services. Commencez à concevoir cette page de contact. Nous pouvons accéder au tableau de bord et cliquer sur Modifier sous pages. Ou nous pouvons simplement utiliser ce raccourci, cliquez sur Modifier la page. Et nous allons directement sur la page d'édition ici. Comme d'habitude, sous Paramètres, passons au modèle et passons à Elementor pleine largeur. Et passons à l'intérieur des paramètres Astros. Barre latérale, pas de barre latérale. Mise en page du contenu, étiré sur toute la largeur. Désactivons tous ces éléments, puis le dossier. Et mettons à jour cela. Maintenant qu'il est mis à jour, allons-y et modifions avec Elementor. Et ici, nous l'avons. En règle générale, sur une page de contact, vous disposez de votre numéro de téléphone, icônes de médias sociaux et d'un formulaire contenant différents champs tels que l' e-mail et leur message. Alors, comment pouvons-nous faire cela ? Allons de l'avant et prenons une section à double colonne. Et comme d'habitude, donnons une marge supérieure de 50. Supprimons donc ce lien. Restons sur 50 pour que nous ayons un peu d'espacement ici. Et puis ici, ce que nous voulons faire, c'est ajouter un code court. Nous allons donc sélectionner cette icône là-haut pour exposer les éléments et taper du code court. Très bien, nous allons donc faire glisser le code court là-dedans. Et dès que nous le publions, remarquez maintenant que nous avons entré votre code. Nous devons donc récupérer un code dans notre back-end, notre tableau de bord. Et ce code est ce qui sera notre forme. Allons donc chercher ce code court dans le backend. Mais nous n'avons pas de code court. Pourquoi ? Parce qu'ils n'ont même pas le formulaire lui-même. Nous n'avons pas créé de formulaire. Commençons donc par créer un formulaire. Mais nous ne pouvons pas encore créer de formulaire. Pourquoi nous n'avons pas le plugin ? Commençons donc par installer le plugin qui va créer notre formulaire. Passons donc à Plugins, Add New. Maintenant, il existe de nombreux plug-ins de formulaire sur le marché, mais celui que j'aime vraiment s' appelle formulator. Je ne sais même pas s'ils ont un programme d'affiliation. Je ne les commercialise pas. J'adore parler des produits qui m'y sont utilisés sont gratuits et très puissants. Allons donc de l'avant et tapez le formulateur. Et c'est le premier de WPA AMU Dev. Alors installez-le maintenant ou roulez. Activons. Parfait. Et maintenant, c'est l'un de nos plugins installés. Donc, pour y accéder, faisons défiler vers le bas dans ce menu de gauche. Et il devrait être presque en bas. Survolez, cliquez simplement sur le formulateur. Et c'est la page de destination vers laquelle nous nous sommes dirigés. Je vais juste fermer ces messages ici. Et c'est là que vous obtenez un résumé de toutes les formes de missions, de pôles de missions, de quiz de missions, car vous pouvez créer des formulaires, sondages et des quiz, et bien d'autres choses encore. Je ne vais donc pas approfondir le formulateur et ce qu'il peut faire. Allons de l'avant et créons un formulaire. Et le formulaire que nous voulons, nous pouvons commencer par une ardoise vierge et créer le formulaire. Notre, c'est nous-mêmes ou nous pouvons utiliser des modèles préfabriqués. Nous avons donc un formulaire d'inscription à la newsletter Contact Us, connexion et d'inscription. Nous avons besoin d'un formulaire Contactez-nous. Cliquons donc dessus et disons Continuer. Et donnons un nom. Formulaire de contact. Disons « Créer ». Et c'est là que nous l'avons. Voici donc notre formulaire. Voici le nom que nous lui avons donné, formulaire de contact et nous pouvons toujours le modifier à partir d'ici. Nous pouvons donc le modifier pour nous contacter. Et si nous cliquons ici sur cette icône de roue dentée, vous remarquerez que le premier élément ici est la copie du code court. Et c'est un court code qui va copier à l'avant, mais nous y arriverons. Examinons ce que nous avons sur notre formulaire. Voici donc le formulaire. Le formulaire lui-même contient le prénom, e-mail, le numéro de téléphone et le message. Et si je prévisualise ça, c'est exactement à quoi ressemble le formulaire. Le prénom, l'adresse e-mail, numéro de téléphone, le message, puis l'envoi du message. Donc FirstName, e-mail numéro de téléphone message, puis bouton Envoyer le message. Et nous pouvons les réorganiser. Nous pouvons simplement saisir ceci, le faire glisser et le déposer juste à côté du moment où cette ligne bleue apparaît sur le côté droit, déposer là, et maintenant elles seront sur une seule ligne. Nous allons donc prévisualiser cela. Et maintenant, c'est comme ça qu'ils ont l'air. Et nous pouvons obtenir un surremplissage de lecture, par exemple, si vous ne voulez pas le numéro de téléphone, nous pouvons simplement supprimer ce champ. Et maintenant, il nous reste le prénom et l'adresse e-mail. Prévisualisons ça. Et c'est ce que nous avons. Nous allons donc publier notre formulaire. Et maintenant, parce qu'il est publié, la première chose que nous obtenons est cette fenêtre contextuelle avec notre code court. Nous allons donc copier ce code court et nous recevrons ce message. Ce code court portant ce numéro 392 est le même code court auquel nous pouvons accéder en cliquant sur ce code ici et en cliquant sur Copier le code court est le même code court. Maintenant, si nous avons basculé le front end où nous modifions notre contact, rappelez-vous que nous avons laissé tomber cet élément de code court ici et que ce champ nous a été présenté . Maintenant, nous pouvons coller ce code court là-dedans, puis l'appliquer. Très bien, alors continuons et cliquez sur Mettre à jour. Et prévisualisons les modifications. Parfait, c'est ainsi que notre forme ressemble actuellement. Ajoutons une marge juste en dessous. Donc, en sélectionnant cette section, allant à l'intérieur avancé, donnons-lui un 90 ci-dessous. Et maintenant, nous avons cet espace ici. Mettons cela à jour et prévisualisons les modifications. Oui, ça a l'air bien. Bien sûr, nous devons changer cette couleur pour qu'elle corresponde au thème du site Web. Allons donc modifier la couleur d'arrière-plan du bouton. Mais maintenant, nous ne pouvons pas modifier mal ici et un mentor car le formulaire n'a pas été créé avec Elementor. N'oubliez pas que ce que nous venons de faire est de coller le code court ici. Nous l'avons créé en quatre minutes. Donc, ce que nous devons faire, c'est passer sous les champs, apparaître, Il y a de l'apparence. Cliquez donc sur Apparence. Et c'est ici que nous pouvons modifier la façon dont le formulaire se boucle. Tout d'abord, le style de conception ici peut être modifié par rapport aux valeurs par défaut, c'est ce que nous avons ici. Deux plats, sans bordures. Débarrassez-vous donc de ces frontières pointues. Et c'est celui que j'aime bien, donc je vais le mettre à jour. Mais il y en a aussi quelques autres selon vos goûts. faisant défiler vers le bas sous les couleurs, c'est ici que nous pouvons modifier les couleurs des différents éléments de notre formulaire, y compris le bouton. Revenons ici sous les couleurs. Nous allons choisir Personnalisé, et cela vous révélera plus d'options. Et ce sont les différents éléments qui composent les formes que nous nourrissons avec lesquelles nous avons formulé. Le dernier élément de la liste est donc le bouton Soumettre. Et comme vous pouvez le voir, la couleur est actuellement bleue. Alors, cliquons dessus. Et ici, passons cela à 40, 40, 40. Et en vol stationnaire, nous voulons lui donner ce jaune. Laissez-moi simplement faire glisser ça et essayer de lui donner un jaune. Oui, je pense que ça me plaît. Je vais juste copier ce jaune. Et le focus intérieur collé là-dedans. Parce qu'en nous concentrant, nous voulons que ce soit encore jaune. Appuyez sur Entrée. Par conséquent, il est jaune et non concentré lorsqu'il est actif, il est jaune. Et mettons à jour cela. Et maintenant qu'il est mis à jour, passons à l'intérieur de notre page Elementor, sélectionnons l' élément de code court et appliquons. Nous pouvons donc appliquer ces nouveaux changements de couleurs. Ensuite, prévisualisons les modifications. Très bien, donc j'aime bien ce que je vois. Maintenant, en survol, le bouton est jaune à l'état normal, il rime avec le reste du site Web. Nous allons donc ajouter un message ici juste pour parler aux visiteurs. Alors, faisons-nous glisser ça et disons. Donc. En allant à l'intérieur, ça va à l'intérieur du style, couleur, de la typographie. Allons de l'avant et changeons cela pour Montserrat. Et passons le poids de la police à 800. Et je l'aime bien. Alors, faisons-le grand ici, comme ça. Cliquez ensuite sur cette icône pour afficher les éléments. Et nous allons faire glisser du texte là-dedans. Très bien, donc quelque chose de ce genre. Maintenant, augmentons l' espacement entre ces deux-là. Donc, en sélectionnant cette section et en allant plus loin dans les colonnes de disposition. Et puis ci-dessous, nous pouvons ajouter un numéro de téléphone pour que nous puissions simplement dupliquer cela. Je vais donc juste le sélectionner. Ensuite, faites-le glisser sous ce texte. Et bien qu'il soit encore sélectionné, passons ici et réduisons la taille. Donnons cette couleur jaune. Mais n'oubliez pas, utilisez la même nuance de jaune ou n'importe quelle couleur que vous utilisez. Utilisez le même code couleur. Ne faites pas simplement glisser les jaunes comme ça. Il est bon de s'assurer que vous utilisez des couleurs de marque spécifiques pour votre marque ou votre droite, alors mettez-le à jour. On pourrait peut-être ajouter un e-mail. Je vais donc cliquer dessus, peut-être faire glisser un autre texte ici. Et cela pourrait être l'adresse e-mail. Mettez à jour cela. Et maintenant, prévisualisons les modifications. Et c'est notre page de contact. Laissez-moi simplement faire défiler vers le bas. Diminuons l'espacement entre ces deux. Diminuons donc l' espacement ici. En revenant ici, je vais sélectionner le texte ici et supprimer cette marge ici. Et pour la marge inférieure, commençons à la réduire manuellement comme ça jusqu'à ce que nous soyons satisfaits. Alors mettez-le à jour. Prévisualisons les modifications. Donc, c'est bien mieux. Une belle page Contactez-nous. Et bien sûr, il est redondant d'ajouter icônes de médias sociaux ici parce que nous les avons déjà en bas de page. La page Contactez-nous contient donc tous les détails dont un client aurait besoin pour nous contacter. Voici comment concevoir la page Contactez-nous. Dans la leçon suivante, je voulais parler de la page du blog. Nous allons donc le faire prochainement. 27. Exercice : Conception de la page de blog: Bonjour, et bienvenue à une autre leçon géniale. Dans la dernière leçon, nous avons créé cette page Contactez-nous. Il est maintenant temps de parler de cette page de blog. Comment affichons-nous notre article de blog ? Et maintenant, comme d'habitude, notre blog possède actuellement le modèle WordPress par défaut. Nous devons donc le concevoir avec Elementor. Mais comment le concevoir ? Vous l'avez peut-être remarqué, je suis passé des téléchargements à la page de contact et j'ai sauté la page du blog. C'était donc intentionnel. Je voulais vous donner l' occasion à ce stade de faire quelque chose par vous-même, concevoir cette page de blog. Vous rappelez-vous comment nous avons créé nos produits numériques ? Ces produits numériques, nous sommes entrés dans nos publications et nous disons « Ajouter un nouveau ». Et ici, nous donnerons un produit et un nom et définirons toutes les configurations sur le côté droit, puis nous allons le modifier dans le front-end avec Elementor. C'est ainsi que nous avons créé nos produits numériques. Et n'oubliez pas que nous avons dit que la création d'un produit numérique revient à créer un article de blog ou à créer un podcast. Et tous ces différents types de contenu sont créés sous forme de publications WordPress. Ajoutez donc un nouveau. Et n'oubliez pas que nous avons également créé des catégories pour les différents produits. Donc maintenant, si nous ajoutons des articles sous forme de billets de blog, articles en tant que publications WordPress, ici, nous devons également leur donner des catégories. Donc, si nous écrivons un article sur l'intelligence artificielle, nous pouvons avoir une catégorie sur l'intelligence artificielle. C'est donc la méthode pour créer le billet de blog. Maintenant, pour les afficher à l'avant. N'oubliez pas de la même façon que nous avons affiché ces produits ici sur cette page. Nous avons créé cette cupidité, puis nous avons désactivé certains éléments tels que les métadonnées, l'auteur et l'extrait. Vous devrez vous assurer que les informations que nous avons désactivées à partir de la grille de ces produits sont visibles sont activées sur le billet de blog. C'est donc un défi rapide à relever. Je sais que cela semble un peu compliqué maintenant, mais maintenant je crois que vous avez gagné en confiance après avoir suivi toutes ces leçons. Et vous pouvez toujours revenir à la leçon dans laquelle nous avons créé cette grille et voir comment procéder, car c'est la même méthode. J'espère que ce défi vous plaira. Dites-moi ce que vous en pensez. Si vous rencontrez des problèmes ou des problèmes, faites-moi savoir ce que vous pensez de la discussion. Continuons la discussion. C'est ainsi que vous allez créer une page de blog. Et une fois que vous avez fini avec la page du blog, il est temps de parler maintenant de la façon d'incorporer un bouton de téléchargement qui peut réellement télécharger un produit. Voyons que dans les prochaines leçons, je vous verrai bientôt. 28. Explorer le plugin EDD: Et bon retour. J'espère que vous avez pris le temps de créer la page de blog. Et surtout, j'espère que le défi vous a plu. Nous avons vu comment créer la page de contact et toutes ces autres pages. instant, nous voulons travailler sur le système de paiement. Nous voulons ajouter un bouton de paiement à ces produits, mais pour ce faire, nous devons installer un plugin tiers appelé Easy Digital Downloads. Allons donc à l'intérieur de notre tableau de bord. Et allons directement à l'intérieur des plugins, ajouter mu. Et ici, je vais chercher des téléchargements numériques faciles. Vous devriez être le premier produit en téléchargeant facilement des données numériques avec plus de 50 000 installations. Je vais l'installer maintenant. Activons. Très bien, donc maintenant il est activé. Et pour y accéder, passons à l'intérieur des téléchargements. Et bien sûr, nous n'avons pas encore créé de produits numériques, c'est ce que nous sommes sur le point de faire. Mais avant de le faire, je veux entrer dans les paramètres. Comme vous pouvez le constater, nous avons de nombreuses options différentes, y compris l'ajout de nouvelles options. Nous pouvons créer des catégories pour les différents produits qui le feront. Tags, historique des paiements, clients, codes de réduction. Nous pouvons consulter les rapports. Je veux que nous puissions entrer dans les paramètres pour avoir une vue d'ensemble des différentes configurations. Nous y voilà. Comme vous pouvez le constater, par défaut, au moment où nous avons installé des téléchargements faciles à installer, le plugin a également généré quelques pages par défaut dont il a besoin permettre aux clients d'effectuer des paiements . la page de paiement, cette page de confirmation d'achat. transaction a échoué si un client tente de payer et que le paiement a échoué, cette page et l'historique des achats s'affichent. Et bien sûr, tous ces autres paramètres. Nous avons des paramètres de devise. Vous pouvez également choisir le type de devise dans lequel vous souhaitez accepter les paiements. Ensuite, en passant par les paiements, nous avons différents types de paiements, Stripe , PayPal, Amazon et tous ces autres. Nous avons même des paiements de test. Vous pouvez faire vos tests avant qu'ils ne soient mis en ligne. Sous les paiements, nous avons différents paramètres imbriqués dans l'onglet. E-mails. Nous avons différents modèles d'e-mail et nous pouvons modifier les reçus d'achat, nouvelles notifications de vente, tous sont différents types d'e-mails que nous pouvons configurer, mais il s'agit d'un cours complet en soi. Nous ne pouvons pas couvrir tout ce qui concerne la gestion de vos produits numériques dans ce cours. Et nous pouvons également modifier certains styles des éléments de la partie frontale, comme le style de bouton par défaut. Nous pouvons passer d'un bouton à texte brut et vous verrez le bouton à l'avant. Nous pouvons modifier la couleur du bouton si vous le souhaitez. Et bien sûr, beaucoup d'autres paramètres imbriqués ici. Mais bien sûr, comme je l'ai mentionné, nous n'allons pas aborder tous ces problèmes. Maintenant que nous avons quelques informations de base sur les produits de téléchargement numérique, dans la leçon suivante, Voyons comment utiliser le plugin pour gérer ces produits que nous avons créés en tant que publications WordPress. Nous allons donc le faire dans la prochaine leçon. Je vous verrai bientôt. 29. Connecter le Plugin EDD à PayPal: téléchargements numériques faciles ont rendu très simple la connexion à votre compte PayPal. Donc, si nous pouvions simplement jeter dans l' onglet PayPal ici, dans l' onglet PayPal ici, il suffit de cliquer sur ce bouton qui est facilement placé ici. Je vais donc cliquer dessus. Et ces fenêtres contextuelles apparaîtront ici, essayant de nous connecter au papier. Vous devez donc disposer d'un compte Paypal. Et bien sûr, si vous n' avez pas de compte PayPal, c'est ici que vous allez créer un nouveau compte. Je vais donc simplement importer l'e-mail que j'ai utilisé pour mon PayPal. Et puis chauffez ensuite. M parce que j' ai déjà un compte. Comme vous pouvez le voir, le message indique que j'ai été redirigé vers la page de connexion. Je vais donc simplement me connecter à mon compte PayPal. Et les deux comptes seront intégrés. Alors allons de l'avant et disons d'accord et connectons-le. C'est ça. Maintenant, nous avons intégré avec succès PayPal avec des téléchargements numériques faciles. Et nous y voilà. Voila. Maintenant, notre plugin de téléchargements numériques est prêt à accepter les paiements sur le site Web. 30. Gestion de produits numériques à l'aide de EDD Plugin: Bienvenue de retour. Maintenant que nous avons eu un aperçu du plugin de téléchargement numérique facile, utilisons-le pour gérer nos produits numériques. Alors, dans les téléchargements, je cliquerai sur Ajouter un nouveau. Et comme d'habitude, nous devons donner un nom à ces téléchargements. Et le nom doit être le nom du produit qu'il est censé représenter dans la liste des produits pour lesquels nous avons créé pourrait simplement cliquer avec le bouton droit de la souris sur tous les articles et ouvrir ce lien dans un nouvel onglet afin que nous puissions Jetez-y un coup d'œil. Laissez-moi juste l'ouvrir. Ces produits ont des noms, par exemple, le modèle bodybuilder. Donc ce que je dois faire, c'est copier le modèle de bodybuilder. Revenons ensuite à l'intérieur de nos produits. Et collons le nom là-dedans. Parce que nous créons maintenant un bouton de téléchargement pour ces produits. Revenons ici, donc pour la description, ce que nous devons faire ici et cliquons avec le bouton droit de la souris dessus et ouvrons le lien dans nouveaux onglets ou nous pouvons voir le front end. Et maintenant, cette description doit être extraite de cette page unique de description du produit. Donc, je suppose vous auriez ici une description de votre produit. C'est la même description. Nous voudrions pointer son exemplaire et le mettre ici. Alors, collez-le là-dedans. Et cela sera très utile pour les moteurs de recherche car bien que ce soit ce que les clients verront sur votre page, ce qui apparaîtra dans les résultats des moteurs de recherche est cette description qui se trouve dans le bouton de téléchargement numérique facile que vous créez. Ce texte est donc ce texte ici. Donc, faites défiler vers le bas. Bien sûr, maintenant, nous pouvons fixer le prix. Je vais le laisser à 0 car il s'agit d'un téléchargement gratuit. Et ci-dessous, nous avons quelques paramètres supplémentaires ici, nous pouvons définir le nom de ce fichier de téléchargement. Donnons donc le même nom car je suppose que vous avez fait de votre modèle le même. Donc, le modèle bodybuilder, MM, l'URL du produit lorsque le client paie, c'est l'URL qu'il obtiendra pour accéder au produit. Je vais donc vous montrer comment créer ce lien. Mais pour explorer ces autres domaines ici, comme vous pouvez le voir sur le côté droit, nous avons une zone réservée aux catégories. Nous pouvons ajouter une nouvelle catégorie à partir d'ici ou cliquer ici. Et rappelez-vous comment nous avons créé des catégories pour nos publications. Nous devons donc créer la même catégorie. Donc, en entrant dans l'onglet Posts, dans les catégories, nous avions Elementor, logos et magazines. Nous avons donc besoin des mêmes catégories. Donc, au lieu de quitter cette page et d'entrer ici, créons les catégories. Eh bien, nous sommes toujours là. Ajoutez un nouveau. Donnons un nom Elementor. Et cliquons sur Entrée et vérifions cela. Créons-en un autre. Appuyez sur Entrée et vérifiez les magazines de logo qu'il entrerait. Maintenant, comme il s'agit d'un modèle élémentaire, décochons cela et cochons la catégorie Elementor. Alors publions-le ou montons. Maintenant, notre bouton est publié. Ce que nous devons faire, c'est faire défiler vers le bas. Et sur le côté droit ci-dessous, Ajouter au panier jours un code court d'achat. Copiez ce lien dans la zone. Et passons à l'intérieur de nos produits ici sous les messages. Donc, tous les messages. Et nous allons grandir jusqu' au bas, le modèle bodybuilder et éditons avec Elementor. Je vais donc simplement cliquer avec le bouton droit de la souris et ouvrir le lien dans un nouvel onglet. Et nous y voilà. Alors rappelez-vous dans les leçons précédentes que j'ai mentionné que ce bouton changerait avec le temps pour nous de le remplacer. Je vais donc le sélectionner et le supprimer. Ici, je vais taper un code court. Code court. Faites glisser des éléments de code courts à cet endroit. Et rappelez-vous ce code court que nous venons de copier ici. Retournez ici et collez-le là-dedans. Et maintenant, nous avons notre bouton d'achat. Mettez à jour cela. Et prévisualisons les changements ou roulons. Donc, nous l'avons là. Nous pouvons donc faire de même pour cette partie. Supprimez cela, et je peux simplement le dupliquer, faire glisser et le déposer. La mise à jour que Soyons vraiment change. Et c'est là que nous l'avons. Par conséquent, si je clique sur Acheter, il ajoute le produit à un panier. Et maintenant, nous pouvons vérifier. Donc, si je clique sur Checkout il sera redirigé vers la page de paiement. Et notre produit y est répertorié avec un prix et le total devra payer. Et juste en dessous, trois champs d'entrée ont été fournis dans lesquels nous sommes censés nous sentir dans nos détails. Je vais donc utiliser quelques faux détails ici. Et cliquez sur Téléchargement gratuit et l'achat est confirmé. Voici maintenant les détails de notre produit et nous pouvons cliquer sur les produits pour le télécharger. Mais maintenant, quand je clique dessus, regardez ce qui se passe. , Désolé, ce fichier n'a pas pu être téléchargé. Alors, quel est le problème ? Parce que nous n'avons pas dit à WordPress où se procurer ces produits. N'oubliez pas que nous avions ce champ dans lequel nous devions entrer l'URL du bain du produit. La raison. Voyons donc comment ajouter le lien produit dans la prochaine leçon, je vous verrai bientôt. D'accord. 31. Ajouter un lien de téléchargement direct à un produit numérique: Et bon retour. Il est donc temps d' ajouter le lien qui permettra aux clients de télécharger les produits. Pour ce faire, nous aurons besoin d'un compte Dropbox. Et la raison en est que vous ne voulez pas stocker vos produits numériques sur votre serveur WordPress car cela ralentira vraiment votre site Web. Dans des circonstances normales, lorsque ajoutez des images à votre site Web, vous les ajoutez à la bibliothèque. Nous les ajouterions ici, et nous pouvons le faire. Mais le problème est que votre site Web va ralentir, car vous commencez à ajouter des fichiers téléchargeables probablement plus volumineux que les images à votre site Web. Et WordPress doit charger tous ces matériaux. C'est pourquoi nous avons besoin d'une plateforme de stockage tierce à partir de laquelle nous n'avons besoin que de choisir le lien. Et je préfère Dropbox. J'ai donc déjà ouvert mon compte Dropbox ici. Et je suis dans un dossier où j' ai des modèles élémentaires. Et la façon d'obtenir le lien est tout d' abord de compresser vos produits. Par exemple, s'il s'agit d'un modèle de logo dans chaque format de ligne, par exemple, au format Adobe Illustrator ou Photoshop. Ou s'il s'agit d'un modèle élémentaire au format JSON, assurez-vous d'avoir ce produit, puis compressez-le. Quels que soient les produits numériques que vous vendez, vous devez le faire zipper . Une fois qu'il est compressé, je vais simplement glisser ce produit dans mon dossier Dropbox. Supposons qu'il s'agisse d'un dossier que vous avez alloué à ces types de produits et à un modèle de mentor. Je vais donc le déposer là-dedans. Donnez-lui un moment pour le télécharger. Et maintenant, il est téléchargé. Disons donc, par exemple, c'est le produit que je veux mettre sur cette page. Je vais donc copier le lien. Et maintenant, le lien est copié, comme vous pouvez le voir dans ce message ici. Retournez ici, numérique et modifions ces produits numériques. Et je vais faire défiler vers le bas jusqu' à l'endroit où nous avons besoin du lien. Je vais coller le lien là-dedans. Et puis passons jusqu'au début du lien. Remplacez le WWW par DL pour téléchargement. Et après Dropbox, remplacez-le par du contenu utilisateur. Maintenant, c'est D2L Dropbox, user contents.com, puis votre produit qui convertit ce lien en lien téléchargement direct sans le DL ni le contenu de l'utilisateur. Le lien par défaut ouvre simplement ce produit dans Dropbox. Mais ce dont nous avons besoin, c'est que lorsque quelqu'un clique sur le lien, il suffit d'une fenêtre contextuelle lui demandant s'il veut télécharger le produit. Alors, avec notre lien prêt, allons-y et cliquez sur Mettre à jour. Très bien, rappelez-vous que nous utilisons lien de ces produits ici. Laissez-moi simplement le copier pour m' assurer que nous utilisons le bon. Il s'agit de modèles de bodybuilder. Allons donc ici et disons Modifier avec Elementor. Et passons à cet onglet. Très bien, donc voici notre bouton. Je veux juste m'assurer que c'est le même bouton. Alors, collez ça là-dedans. Oui, toujours le même bouton. Mettons-le à jour. Cliquez ici sur Mettre à jour. Prévisualisons ensuite les modifications. Donc, cette fois, lorsque vous cliquez sur Achat gratuit ajouté au panier, alors passez à la caisse. Allons de l'avant et voyons si nous pouvons télécharger notre produit. Très bien, passons avec les informations d'identification par défaut ici. Et voici les détails de nos produits. Cliquons donc sur le lien. Et maintenant, il nous présente cette option ici. Je peux donc dire Enregistrer le fichier. Le téléchargement du fichier commence ici. Et nous pouvons aller de l'avant et l'ouvrir. Voici donc comment ajouter le lien. Tout ce que vous avez à faire est d'ajouter vos produits et de vous assurer qu'ils sont zippés. Ajoutez vos produits à Dropbox, puis accédez à votre produit spécifique et copiez le lien. Une fois que vous avez copié le lien, entrez dans votre produit, collé là-dedans, puis remplacez le WWW par df pour téléchargement. Ensuite, après Dropbox, le contenu utilisateur, le contenu utilisateur. Et maintenant Link est prêt. Saisissez ensuite le code court et placez-le dans le front-end de votre page ici. Et maintenant, votre bouton est prêt. est ainsi que pouvez ajouter le bouton d'achat à vos produits. Et cela marque la fin de cette leçon. J'espère que ça vous a plu. Je vous verrai dans la prochaine leçon. 32. Ajouter un formulaire de formulaire de CTA à la page d'accueil: Bienvenue dans cette leçon. Nous en avons presque fini avec un site Web, mais il y a encore quelques choses que nous devons faire pour améliorer l' expérience utilisateur sur notre site Web. Et l'un de ces êtres est que nous devons ajouter un formulaire d'inscription pour capturer e-mails des utilisateurs afin de rester en contact avec eux. N'oubliez pas que j'ai mentionné que nous ajouterions un formulaire d'inscription ici même sur la page d'accueil ou la page de destination. Alors maintenant, allons-y et faisons-le. Comme d'habitude, je vais cliquer sur Modifier avec Elementor pour que nous puissions répondre au mode d'édition. Et ici, nous sommes en train de faire défiler vers le bas. Je veux donc placer ce formulaire entre ces deux catégories de modèles. C'est donc quelque part ici. Je vais cliquer sur Plus. Nous pouvons donc l'ajouter ici. Et je vais cliquer sur plus et ajouter cette section pleine largeur. Et nous allons le séparer de cette section ici. Nous allons donc sélectionner cela en allant dans Advanced, supprimons ce lien et donnons-lui une marge de 50 en haut. Nous l'avons donc. Alors que la session est toujours sélectionnée, passons à l'intérieur du style et donnons-lui une image d' arrière-plan. Donc, image d'arrière-plan, sélectionnez cette icône de pinceau. Et ici, cette fois, nous ne lui donnons pas de couleur d' arrière-plan, nous lui donnons juste une image. Je vais donc sélectionner une image ici. Bien sûr, il faut chercher une belle image qui représente les produits qui se vendent. Je pense que je vais utiliser ça. Insérez un support. C'est vrai ? Pendant que nous sommes encore ici. Pour la position, disons centrer, centrer les pièces jointes, faire défiler, répéter, dire ne pas répéter. Et pour la taille, disons la couverture. Essayons le client. Allons simplement avec 100 pour cent pour qu'il remplisse toute la section de gauche à droite. Et maintenant, bien sûr, nous devons ajouter du contenu ici pour augmenter sa hauteur. La hauteur de cette section sera déterminée par le contenu à l'intérieur. Tout d'abord, dupliquons cette colonne. Maintenant, nous avons deux colonnes, et je vais le faire glisser un peu, le redimensionner. Et ici, je veux ajouter un code court. Je vais donc faire glisser ce code court là-dedans. Et maintenant, bien sûr, nous devons maintenant récupérer un court code du backend. Rappelez-vous comment nous avons créé le contact à partir de la page de contact, nous utilisons le formulateur pour créer un autre formulaire qui sera introduit dans cette page. Revenons donc dans le back-end et créons un formulaire à l'aide de formules. Mais avant cela, cliquez sur Mettre à jour. Bon, nous allons donc prévisualiser ça pour l'instant. Défilement vers le bas. C'est donc là que sera notre forme. Allons donc dans le tableau de bord, faites défiler vers le bas. Coordinateur Open UP. Et comme vous pouvez vous y attendre, nous avons déjà un formulaire, notre formulaire Contactez-nous. Nous voulons maintenant en créer un nouveau. Je vais donc aller de l'avant et cliquer sur Créer. Dans ce cas, je veux un formulaire d'inscription à la newsletter. Je vais donc cliquer dessus et dire Continuer. Appelons ça, inscrivez-vous. Créez cela. Par défaut, il est déjà renseigné avec deux champs prénom et l'adresse e-mail, puis le bouton S'abonner. Allez-y et prévisualisez cela avant de le publier. Très bien, pour que les utilisateurs puissent entrer leur prénom et leur adresse e-mail, puis s'abonner à notre liste de diffusion. Et nous pouvons leur envoyer par e-mail toutes les informations que nous jugeons importantes pour eux. Donc, parce que nous sommes satisfaits notre formulaire, nous allons le publier. Très bien, je vais copier ce court code. Allons-y au front end. Et à l'intérieur, ici. Tandis que cette option est sélectionnée, collons-le là-dedans. vrai, donc ça commence déjà à apparaître. Cliquez sur Mettre à jour et modifier les privilèges. Il s'agit donc simplement de voir ce que nous devons améliorer. Donc, en faisant défiler vers le bas, c'est à ça que ça ressemble. Mais maintenant, comme l' arrière-plan est un peu, BZ n'a pas pu distinguer la forme de l'arrière-plan. Faisons donc quelque chose à ce sujet. Donc, en sautant à l'intérieur ici, je vais sélectionner cette section et entrer dans le style de l'arrière-plan réduit, aller à l'intérieur de la superposition d'arrière-plan. Parce que nous voulons ajouter une superposition. Cliquez sur ce type d'arrière-plan. Donnons une couleur, peut-être noire. Et cela ne ferait que sombre en arrière-plan pour que le formulaire soit plus visible. Nous pouvons également augmenter l'opacité, peut-être jusqu'à ce moment-là. Mettons cela à jour et prévisualisons les modifications. Défilement vers le bas. C'est vrai ? Maintenant, le formulaire est plus visible cette fois. Ajoutons du texte descriptif à gauche. Je vais donc le sélectionner pour ajouter un en-tête de texte. Alors peut-être que nous pouvons dire ici modèles gratuits se sentent directement dans votre boîte de réception. Bien sûr, changeons la couleur ici, donnons un blanc pour l'instant. Ensuite, changeons la famille de polices en Montserrat. Et je veux lui donner un poids de police de 800 et augmenter un peu la taille. Peut-être jusqu'à ce moment-là. Je clique à nouveau sur cette icône pour exposer les éléments et je vais y glisser du texte, du texte descriptif. Et ici, nous pouvons dire aux utilisateurs ce qu'ils doivent prendre, quelles mesures ils doivent prendre pour obtenir ces modèles gratuits. Donc, très bien, c'est logique. C'est assez séduisant car rappelez-vous que ce que nous créons est un appel à l'action. En tant que CTA, nous voulons que les clients ou les clients potentiels prennent des mesures. Et l'action facilite l'envoi de leur e-mail, mais ils ne peuvent pas nous donner leur e-mail si nous n'avons rien de précieux à leur donner. Je pense donc que c'est un bon moyen de capturer les e-mails des utilisateurs. Maintenant, ajoutons une marge en haut ici, tout comme nous avons un bel espacement ci-dessous. Donc, en sélectionnant la section, je vais passer à l'intérieur du rembourrage avancé. Donnons-lui peut-être 50. Mettons à jour et prévisualisons les modifications. Mais avant de privilégier les changements, permettez-moi de le sélectionner, entrer dans le style et de changer la couleur en blanc. Et puis mettez-le à jour. Très bien, prévisualisons les modifications. Génial. J'aime bien un appel à l'action, mais nous devons bien sûr faire quelque chose propos de cette couleur bleue ici. Faisons donc quelque chose à ce sujet. Sauter à l'intérieur du tableau de bord. Allez à l'intérieur de l'apparence. Comme d'habitude. Tout d'abord, choisissons le design plat. Ensuite, passons dans Colors, Custom, faites défiler vers le bas jusqu' au bouton. Et donnons-lui cette couleur jaune. Rappelez-vous maintenant que vous devez utiliser la même nuance de jaune uniforme. Mais pour l'instant, je vais simplement les faire glisser pour trouver un joli jaune avec lequel nous pouvons travailler pour l'instant. Je pense donc que c'est satisfaisant. En vol stationnaire. Nous voulons qu'il soit blanc. Et sur la focalisation. Peut-être blanc aussi. Pour l'instant. Parce qu'il est blanc, c'est x ne peut pas être une femme. Faisons manquer au vol stationnaire. Cela devrait être noir car l'arrière-plan du bouton sera blanc. Nous allons donc mettre à jour cela. Et prévisualisons les modifications. C'est donc à ça que ça ressemble maintenant. Avec ces changements, passons au front end. Sélectionnons le formulaire lui-même et cliquez sur Appliquer. Ou montez là-dedans, nous l'avons. Nous allons donc prévisualiser les modifications. Défilement vers le bas ou vers la droite. Je pense donc que c' est présentable. Nous pouvons travailler avec cela. Bien sûr, vous pouvez faire beaucoup mieux. Définitivement. Encore deux choses. Je veux faire, notre changement, cette couleur de police ici, comme vous pouvez le voir, elle a l'air un peu grise. Ce n'est pas le blanc vif. Les couleurs de l'étiquette doivent donc être blanches. Nous verrons comment faire cela. Et je veux également équilibrer ces rembourrages en haut avec le rembourrage en bas, comme vous pouvez le constater, ces petits espacements ici et ici. Nous devons donc nous assurer que cela soit correctement aligné. En revenant ici, je vais sélectionner une section et donnons un rembourrage inférieur de peut-être, essayons 10, et essayons 15. Cela devrait donc augmenter l'espacement ci-dessous. Mettez à jour cela. Prévisualisons les modifications. Maintenant, c'est beaucoup mieux. Faisons donc quelque chose pour que ces étiquettes reviennent à l'intérieur de notre éditeur de formulateurs, allons de l'avant et élargissons les bases du champ. Et sous les bases du remplissage, nous avons l'étiquette. Alors, sélectionnez l'étiquette et donnez-lui peut-être cette couleur jaune. Il faut pousser ça vers le haut. Et ensuite, allons encore chercher ça. Je pense que je vais y aller. Et je copierai ce code juste au cas où j'aurais besoin de l'utiliser à nouveau, mettez-le à jour. Nous pouvons laisser l' astérisque rose. C'est l'astérisque. Il a l'air rouge. Je ne peux pas vraiment dire que c'est rose. Et maintenant, parce que nous avons ces changements, passons à l'intérieur de notre espace de travail Elementor. Sélectionnons le formulaire et appliquons les modifications car nous les avons déjà mis à jour ici. Faites défiler vers le bas. Prévisualisons les modifications. Très bien, donc notre téléphone est bien meilleur maintenant. Alors, avec ce temps maintenant, passez à la prochaine chose importante que nous devons faire avant de terminer notre site Web. Et c'est pour rendre le site web réactif sur différents appareils, différentes tailles d'écran. Voyons comment rendre le site Web présentable sur les smartphones, les tablettes, car il a déjà fière allure sur le bureau. Nous le ferons dans la prochaine leçon. Je vous verrai bientôt. 33. Rendre Navbar réactif: Bienvenue de retour. Nous en avons presque fini avec notre site Web de téléchargements numériques. Nous voulons maintenant rendre les pages Web réactives sur différentes tailles d'appareils. Et donc ce que nous voulons faire, c'est commencer par le haut, descendre, rendant chaque élément réactif et beau sur les différentes tailles d'appareils. Et nous utiliserons ces pages d'accueil à titre d'exemple. Ensuite, vous utiliserez ces mêmes principes et compétences pour rendre le reste des pages réactif. Donc sans plus de temps Western, commençons par la barre de navigation et rendons cela réactif. Donc, en entrant ici et en surmontant ça, je cliquerai sur nav pour que nous puissions entrer en mode d'édition de navigation ou rouler ici nous sommes. Nous avons maintenant notre barre de navigation modifiable. Ce que nous voulons faire, c'est cliquer sur cette icône du mode responsive ici, et cela révèle ces barres réactives. Ce que nous voulons faire, c'est sauter à l'intérieur de la vue mobile et mobile. Et c'est à quoi ressemblera le menu. En règle générale, ce que nous voulons, c'est d'avoir notre logo d'un côté et notre menu de hamburgers de l'autre côté. Maintenant, parce que ces deux éléments se trouvent dans la même section, c' est-à-dire cette section bleue. À l'heure actuelle, le logo sur les écrans mobiles occupe 100 % de la largeur. Nous voulons qu'il occupe peut-être la moitié de la semaine, et ce menu de hamburgers occupera l'autre moitié. Ce que nous faisons, c'est sélectionner cette colonne. Il tient le logo et sous les mises en page, largeur de colonne, donnons-lui 50 pour cent. Et maintenant, comme vous pouvez le voir dans le contour, il occupe 50 % de la largeur de la section. Et vous remarquerez que j' ai cette colonne supplémentaire au milieu ici. Nous sommes censés avoir une barre de recherche ici, mais nous parlerons de la barre de recherche et fonctionnalité de recherche dans la prochaine leçon. Donc pour l'instant, je veux juste me débarrasser de v. Donc maintenant il nous reste deux colonnes juste pour être sûr, laissez-moi revenir au mode bureau. Et ce sont les deux colonnes qui restent. Faites donc glisser cela tout d'abord pour redimensionner un logo et sélectionner le menu. Je vais passer à l'intérieur de la mise en page et le pousser du côté droit. Comme ça. Parce que nous nous sommes débarrassés de la colonne supplémentaire qui se trouvait entre les deux, nous avons dû effectuer ces ajustements. En remontant à la vue mobile côté est, nous avons ces deux colonnes. C'est déjà 50 pour cent. Nous allons le sélectionner. Et sous la largeur de la colonne Layout, donnons-lui également 50 pour cent. Très bien, maintenant ils sont tous les deux sur la même ligne. Mais ce que nous voulons faire, c'est sélectionner ce menu et sous Disposition, faites défiler vers le bas et recherchez réactif. Et poussons-le du bon côté. Il se trouve maintenant à l'extrême droite de l'écran. Mettons-le à jour et prévisualisons les modifications. Ou bien. Maintenant , nous n'avons rien d'autre que nous puissions voir ici parce que nous sommes train de prévisualiser le menu afin de voir à quoi il ressemble sur les écrans mobiles, appuyez sur Control Shift I sur le clavier. Contrôlez Shift I pour faire apparaître les DevTools. Et maintenant que nous avons fait apparaître les DevTools, cliquons ici sur l'icône du mode responsive qui passera en mode réactif. Et maintenant, comme vous pouvez le voir ici, nous avons différentes options pour imiter les appareils réels. Par exemple, dans ce menu déroulant, nous avons différents types de téléphones. Galaxy, iPhone 11, 12, tous ces types d'appareils. Voici donc à quoi ressemble le site Web sur le Galaxy S 20, Linux. Et si nous cliquons sur le menu déroulant, c'est à quoi ressemble le menu déroulant. Bien sûr, vous pouvez faire beaucoup plus pour améliorer ce menu, mais je vais le laisser comme ça. Je pense que je suis satisfait de son apparence. Je vais donc cliquer dessus pour quitter le mode responsive, puis je cliquerai dessus pour fermer les DevTools. Revenons ici et regardons à quoi ça ressemble sur tablette. C'est donc à ça que ressemble le site Web sur tablette. Et je pense que ça me plaît aussi. Donc, et sur le bureau, c'est à quoi ça ressemble. Revenons donc dans notre tableau de bord, maintenant que nous sommes satisfaits de notre barre de navigation réactive. Allons à l'intérieur des pages, toutes les pages. Nous pouvons donc prévisualiser la barre de navigation sur une page Web réelle. Voyons donc la page d'accueil. Je clique avec le bouton droit de la souris sur Afficher et ouvrir le lien dans un nouvel onglet. Passons à cet onglet et maintenant cliquez sur Control Shift I. Pour que nous puissions ouvrir les DevTools et passer en mode de conception réactive. Et maintenant, avec notre contenu, c'est à quoi ressemble notre menu. Je pense que j'aime l' apparence du menu et la barre de navigation Luke. Dans la leçon suivante, rendons le reste de la page réactif car comme vous pouvez le voir, elle n'a pas l'air très réactive ici. Vous devez y travailler. Voyons donc comment rendre le contenu de la page réactif. Dans la prochaine leçon, je vous verrai bientôt. 34. Rendre la page d'accueil Responsive: Bienvenue de retour. Dans la dernière leçon, nous avons rendu la barre de navigation réactive sur différentes tailles d'appareils. Cette fois, nous voulons rendre le contenu principal la page Web réactif sur différents appareils également. Laissez-moi donc quitter ce mode de conception réactif en cliquant dessus. Puis laissez-moi fermer les DevTools. Ensuite, allons-y et montons avec Elementor ou ride. Nous y voilà. Comme d'habitude. Commençons par cliquer sur l' icône du mode réactif en bas. Et maintenant, il révèle ce bar. Commençons par un écran mobile. Cliquez donc dessus. Nous y voilà. Je vais donc commencer par sélectionner la colonne qui contient le bloc de texte. Laissez-moi donc revenir en mode bureau. Cette colonne qui contient ce bloc de texte est la même colonne ici. Donc, en le sélectionnant, je veux aller à l'intérieur avancé. Donnons un rembourrage de 20. Cela permet d' obtenir un espacement uniforme autour du contenu depuis les bords. Et bien sûr, nous devons réduire la taille de cette police, sélectionner la police ici, télécharger illimité, entrer dans la topographie, saisir et commencer à faire glisser. Je pense que ça me plait à cette taille. Je retournerai à l'intérieur du contenu et j'irai à l' alignement, je l'alignerai au centre, comme ça. Mettez à jour cela. Bien sûr, cliquons sur le bouton. Et alors qu'il est toujours sélectionné, allez dans Alignement et alignez son centre. Mettez à jour cela. Jetons donc un coup d'œil à quoi ressemble la section héros. aperçu des modifications. Bien sûr, il ouvrira la page en mode bureau. Contrôlez Shift I pour ouvrir outils Web et passer en mode conception. Donc je pense que j'aime bien la section des héros ce moment, ça me paraît beaucoup mieux. Nous pouvons augmenter le rembourrage sur l'image, sur l'image de la section héros. En revenant ici, nous allons sélectionner la colonne qui contient l'image. Passez à l'intérieur d'un rembourrage avancé sans rompre ce lien. Et maintenant, nous avons ce joli espacement depuis le bord. Mettez à jour cela. Et prévisualisons les modifications. Remplacer. Donc, nous l'avons là. Mais maintenant, cela devrait également être aligné sur le centre. Je vais donc le sélectionner. Va à l'intérieur du style. Alignez-le au centre comme ça. Passons ensuite aux modèles et voyons leur apparence. Tout d'abord, mettre à jour cela et prévisualiser les modifications. Défilons vers le bas. Nous devons effectuer quelques ajustements sur le bouton. Faisons quelque chose à ce sujet. Très bien, puis le pied de page. En revenant ici, je veux tout d'abord sélectionner la section qui maintient ces modèles avancés. Donnons aussi ce rembourrage de 20, comme ça. Défilons donc vers le bas et voyons ce que l'autre catégorie a installé. Ou RI. Nous allons donc prévisualiser les modifications. Très bien, alors faisons quelque chose à propos de ces boutons. Donc, en revenant ici, les modèles élémentaires, cupidité est toujours sélectionnée. Je vais entrer dans le style. Style de bouton Lire la suite. Et je veux casser ce rembourrage. Configurons également les paramètres de la vue mobile. Donc, ici, nous voulons dire peut-être, disons peut-être la gauche 20 et la droite 20, cinq premiers et les cinq derniers. Et mettons à jour cela. Prévisualisons les modifications. Donc, faites défiler vers le bas. Il faut donc le pousser un peu vers la droite. Allons donc à l'intérieur de la marge. Alors, donnons peut-être une marge gauche de 70. Mettez à jour cela. Et prévisualisons les modifications. Il semble que la valeur de 70 pixels le pousse hors du chariot. donc évident que nous devons faire quelque chose pour contrer la bonne marge. Essayons de lui donner quelque chose comme 90. 90. Et faisons aussi de la marge gauche un 90 . Et nous allons les mettre à jour. Prévisualisons les modifications. Défilement vers le bas. Nous sommes presque là maintenant à regarder la position du bouton par rapport au texte ici, le bouton est au milieu, mais nous devons augmenter le rembourrage sur le texte lui-même. Allons donc ici. Voyons si on peut augmenter le rembourrage sur le côté gauche, peut-être 25. Mettons-le à jour et prévisualisons les modifications. Et rappelez-vous, il ne s'agit que d'imiter des appareils. En fin de compte, vous devrez tester le site Web sur un appareil réel. Donc, si vous avez un téléphone intelligent, vous pouvez ouvrir le site Web sur votre smartphone et voir à quoi il ressemble. Parce que c'est la meilleure façon de le tester. Mais cela étant dit, je pense que pour l'instant, je suis satisfait de cela. Allez-y, retournez simplement à cet endroit et voyez quelles valeurs vous allez finir. Très bien, donc maintenant les boutons du modèle élémentaire sont correctement alignés. Donc, pour les modèles de magazines, nous n'avons pas besoin de trouver comment réessayer de positionner le bouton, il suffit de copier le style sur l'élément des modèles car tout ce qui concerne ces deux grilles est le même en ce qui concerne le style. Revenons donc ici. Donc, en cliquant n'importe où dans cette grille qui contient les modèles élémentaires, je vais copier. Ensuite, je vais faire défiler vers le bas et sélectionner cette grille qui maintient les modèles de magazines sélectionnés n'importe où, cliquez avec le bouton droit de la souris et collez le style. Ainsi, comme vous pouvez le voir, les boutons ont été poussés au milieu. Et je veux sélectionner la colonne qui les contient. Et rappelez-vous que cette autre colonne présentait un rembourrage de 20. C'est pourquoi ils semblent avoir l'espacement ici. Je vais donc entrer ici, sélectionner cette colonne en allant à l'intérieur avancé, lui donner un rembourrage de 20 ou à droite. Nous allons donc mettre à jour ce remplacement. Comme vous pouvez le constater, nous devons encore travailler sur ces boutons. Je vais donc vous laisser ça, prendre un peu de temps et tout positionner correctement. Mais en gros, c'est comment tout positionner correctement sur le contenu principal. Donc, la prochaine chose que nous voulons rendre réactive est, très bien, faisons quelque chose pour le rembourrage. Allons à l'intérieur ici. Je vais faire défiler vers le haut. Sélectionnez cette colonne qui est conservée. Nous allons maintenant sélectionner la section elle-même. Allez à l'intérieur avancé, et gardons tout un rembourrage de 20. Donc, tout le contenu a un espacement de 20 autour du bord. J'aime bien ça. Nous allons donc mettre à jour cela. Et la prochaine chose que nous allons faire, c'est le pied de page. Alors, dans la leçon suivante, rendons la nourriture ou réactivité alors que nous nous dirigeons vers l'achèvement de ce cours. Je vous verrai bientôt. 35. Rendre le pied Responsive: Bienvenue de retour. Ainsi, dans les deux dernières leçons, nous avons rendu la barre de navigation réactive et le contenu principal du corps réactif maintenant pour que la nourriture soit réactive sans perdre de temps. Allons dans le dossier Elementor. Nous y voilà. Allons cliquer sur le mode réactif. Commençons par les écrans mobiles. Le logo semble être correct, mais ce que nous voulons faire, c'est sélectionner la section elle-même. Et comme vous pouvez le voir, je suis obstrué par la barre de navigation ici pour pouvoir sélectionner la section. Donc, tout ce que je dois faire est de cliquer sur Control I pour faire apparaître le navigateur. Et maintenant, je peux sélectionner la section elle-même. Donc tout d'abord, ce que je veux faire, c'est aller à l'intérieur avancé et lui donner ce rembourrage de 20 tout le long. Comme ça. Et j'aime bien le logo au milieu comme ça. Allons de l'avant et mettons également les icônes sociales au milieu. Réduisons la taille de ce titre. Donc, aller à l'intérieur du style. Il peut donc être dans une ligne comme ça. Et enfin, continuons et sélectionnons le, sélectionnez les liens rapides. Et aller à l'intérieur du style. Mettons-les au milieu comme ça et mettons-les à jour. C'est à ça que ressemble la photo. En revenant à l'intérieur de nos pages, je veux aller de l'avant et ouvrir notre page d'accueil afin que nous puissions la voir de haut en bas et la voir maintenant en mode réactif. Cliquez donc avec le bouton droit sur Afficher, ouvrez le lien dans un nouvel onglet. Et passons à cet onglet. Très bien, je vais donc appuyer sur Control I pour que nous puissions passer au DevTools puis au mode responsive. Donc, en cliquant dessus. Donc, faites défiler vers le bas. Dans, c'est à quoi ressemble notre page Web sur les smartphones. Prenez le temps de le pimenter et assurez-vous qu'il soit super génial. À quoi ressemble-t-il sur d'autres appareils comme l'iPad ? C'est donc à ça que ça ressemble sur l'iPad. Faisons quelque chose sur les bords ici. Comme vous pouvez le constater, nous avons besoin d'un rembourrage sur les bords, mais sinon tout le reste semble bien sur la cible. Comme nous sommes déjà en train de modifier le pied de page, je vais passer à la zone de pied de page et cliquer sur tablette. Et c'est comme ça que ça ressemble sur tablette. Laissez-moi les fermer. Donc, en sélectionnant à nouveau la section elle-même. Donc encore une fois, je dois faire apparaître le navigateur, sélectionner une section en mode tablette. Nous voulons également lui donner un rembourrage de 20 pièces. Très bien, comme vous pouvez le voir maintenant, nous avons cet espacement tout autour, ce qui est génial. Et maintenant, je vais passer à cet onglet et le fermer. Quittons le mode responsive et fermons cela. Modifions ensuite avec Elementor. Passons donc en mode réactif et passons directement en mode tablette. Une fois de plus, je ne peux pas sélectionner cette section. Alors contrôlez I. Et maintenant en sélectionnant la section héros, parce que c'est la section la plus haute, je vais passer à l'intérieur avancé et un rembourrage de 20 tout le long. Déplacons ça en C. Donc oui, je pense que c'est bon pour le moment, mais il faut réduire la taille de ce titre ici. Donc, en sélectionnant cela, je vais passer à l'intérieur de la topographie et réduire cette taille comme ça. Ensuite, choisissons cette section avancée. Allons lui donner 20 autres. Comme ça. Faisons de même pour cette section, avancée. Il en va de même pour cette section. Et nous allons le mettre à jour. Prévisualisez les modifications. Très bien, donc c'est à ça que ça ressemble en mode bureau. Appuyez sur Control Shift I pour faire apparaître les DevTools, passez en mode réactif. Et maintenant, voyons-le sur un iPad. Il est donc actuellement réglé sur iPad. Commençons à faire défiler. Et ça a l'air incroyable sur tablette aussi. Mais maintenant, bien sûr, vous devrez faire quelque chose à propos ces boutons ici et voir si nous pouvons les aligner correctement. Bien sûr, je suppose que vous utiliserez les mêmes compétences vous avez utilisées pour rendre la page de destination réactive et rendre l'autre page réactive. Mais comme nous avons déjà rendu la barre de navigation réactive, vous n'avez pas besoin de le faire sur chaque page car elle est déjà réactive sur chaque page. Ce qui reste donc, c'est le contenu principal de toutes ces autres pages. Jusqu'à présent, vous avez une entreprise de téléchargements numériques entièrement opérationnelle. Vous pouvez maintenant télécharger vos modèles de produits numériques et en informer les gens. Les utilisateurs peuvent accéder à votre site Web, explorer ces produits, ces modèles et télécharger ceux qu'ils souhaitent utiliser. Alors que nous terminons dans la prochaine et dernière leçon, je veux parler de la fonctionnalité de recherche car nous n'y avons toujours pas touché. Et il est important de l' avoir sur n'importe quel site Web qui contient des produits que les gens pourraient rechercher. Nous allons donc le faire dans la prochaine leçon. Je vous verrai bientôt.